Integrations: design fixes and remove feature flag (#4003)

* Integrations: design fixes and remove feature flag

* Fix

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -32,7 +32,6 @@ export const SettingsNavigationDrawerItems = () => {
   }, [signOut, navigate]);
 
   const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
-  const isIntegrationsEnabled = useIsFeatureEnabled('IS_INTEGRATIONS_ENABLED');
   const isIntegrationsItemActive = !!useMatch({
     path: useResolvedPath('/settings/integrations').pathname,
     end: true,
@@ -144,14 +143,12 @@ export const SettingsNavigationDrawerItems = () => {
             })
           }
         />
-        {isIntegrationsEnabled && (
+        <NavigationDrawerItem
-          <NavigationDrawerItem
+          label="Integrations"
-            label="Integrations"
+          to="/settings/integrations"
-            to="/settings/integrations"
+          Icon={IconApps}
-            Icon={IconApps}
+          active={isIntegrationsItemActive}
-            active={isIntegrationsItemActive}
+        />
-          />
-        )}
       </NavigationDrawerSection>
 
       <NavigationDrawerSection>

packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts

@@ -1,6 +1,5 @@
 export type FeatureFlagKey =
   | 'IS_MESSAGING_ENABLED'
   | 'IS_BLOCKLIST_ENABLED'
-  | 'IS_INTEGRATIONS_ENABLED'
   | 'IS_QUICK_ACTIONS_ENABLED'
   | 'IS_NEW_RECORD_BOARD_ENABLED';

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx

@@ -1,12 +1,12 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { SoonPill } from 'tsup.ui.index';
 
 import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { Button } from '@/ui/input/button/components/Button';
+import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
 
-import { Integration, IntegrationType } from './constants/IntegrationTypes';
 interface SettingsIntegrationComponentProps {
-  integration: Integration;
+  integration: SettingsIntegration;
 }
 
 const StyledContainer = styled.div`
@@ -36,20 +36,6 @@ const StyledIntegrationLogo = styled.div`
   color: ${({ theme }) => theme.border.color.strong};
 `;
 
-const StyledButton = styled.button`
-  align-items: center;
-  background: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.secondary};
-  display: flex;
-  flex-direction: row;
-  font-size: ${({ theme }) => theme.font.size.md};
-  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
-  cursor: pointer;
-`;
-
 const StyledSoonPill = styled(SoonPill)`
   padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
 `;
@@ -62,7 +48,6 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
   integration,
 }: SettingsIntegrationComponentProps) => {
-  const theme = useTheme();
   const openLinkInTab = (link: string) => {
     window.open(link);
   };
@@ -83,21 +68,15 @@ export const SettingsIntegrationComponent = ({
         </StyledIntegrationLogo>
         {integration.text}
       </StyledSection>
-      {integration.type === IntegrationType.Soon ? (
+      {integration.type === 'Soon' ? (
         <StyledSoonPill />
       ) : (
-        <StyledButton onClick={() => openLinkInTab(integration.link)}>
+        <Button
-          {integration.type === IntegrationType.Use ? (
+          onClick={() => openLinkInTab(integration.link)}
-            <IconBolt size={theme.icon.size.md} />
+          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
-          ) : (
+          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
-            <IconArrowUpRight size={theme.icon.size.md} />
+          size="small"
-          )}
+        />
-          {integration.type === IntegrationType.Goto ? (
-            <div>{integration.linkText}</div>
-          ) : (
-            <div>Use</div>
-          )}
-        </StyledButton>
       )}
     </StyledContainer>
   );

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationGroup.tsx

@@ -3,11 +3,10 @@ import styled from '@emotion/styled';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 import { SettingsIntegrationComponent } from '~/pages/settings/integrations/SettingsIntegrationComponent';
-
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
-import { IntegrationCategory } from './constants/IntegrationTypes';
 
 interface SettingsIntegrationGroupProps {
-  integrationGroup: IntegrationCategory;
+  integrationGroup: SettingsIntegrationCategory;
 }
 
 const StyledIntegrationGroupHeader = styled.div`

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx

@@ -2,16 +2,15 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { SETTINGS_INTEGRATION_CATEGORIES } from '~/pages/settings/integrations/constants/SettingsIntegrationCategories';
 import { SettingsIntegrationGroup } from '~/pages/settings/integrations/SettingsIntegrationGroup';
 
-import integrationCategories from './constants/Integrations';
-
 export const SettingsIntegrations = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <Breadcrumb links={[{ children: 'Integrations' }]} />
-        {integrationCategories.map((group) => {
+        {SETTINGS_INTEGRATION_CATEGORIES.map((group) => {
           return <SettingsIntegrationGroup integrationGroup={group} />;
         })}
       </SettingsPageContainer>

packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrations.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Integrations/SettingsIntegrations',
+  component: SettingsIntegrations,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/integrations' },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsIntegrations>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(1000);
+
+    await canvas.findByText('Go to GitHub');
+  },
+};

packages/twenty-front/src/pages/settings/integrations/constants/IntegrationTypes.ts

@@ -1,22 +0,0 @@
-export enum IntegrationType {
-  Use = 'Use',
-  Goto = 'Goto',
-  Soon = 'Soon',
-}
-
-export interface Integration {
-  from: { key: string; image: string };
-  to: { key: string; image: string } | null;
-  type: IntegrationType;
-  linkText?: string;
-  link: string;
-  text: string;
-}
-
-export interface IntegrationCategory {
-  key: string;
-  title: string;
-  hyperlinkText?: string;
-  hyperlink: string | null;
-  integrations: Integration[];
-}

packages/twenty-front/src/pages/settings/integrations/constants/Integrations.ts

@@ -1,12 +0,0 @@
-import { IntegrationCategory } from './IntegrationTypes';
-import requestIntegrations from './Request';
-import windmillIntegrations from './Windmill';
-import zapierIntegrations from './Zapier';
-
-const integrationCategories: IntegrationCategory[] = [
-  zapierIntegrations,
-  windmillIntegrations,
-  requestIntegrations,
-];
-
-export default integrationCategories;

packages/twenty-front/src/pages/settings/integrations/constants/Request.ts

@@ -1,19 +0,0 @@
-import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
-
-const requestIntegrations: IntegrationCategory = {
-  key: 'request',
-  title: 'Request an integration',
-  hyperlink: null,
-  integrations: [
-    {
-      from: { key: 'github', image: '/images/integrations/Github.png' },
-      to: null,
-      type: IntegrationType.Goto,
-      text: 'Request an integration on Github conversations',
-      link: 'https://github.com/twentyhq/twenty/issues/new/choose',
-      linkText: 'Go to GitHub',
-    },
-  ],
-};
-
-export default requestIntegrations;

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts

@@ -0,0 +1,10 @@
+import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationRequest';
+import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationWindmill';
+import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationZapier';
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_CATEGORIES: SettingsIntegrationCategory[] = [
+  SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
+  SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
+  SETTINGS_INTEGRATION_REQUEST_CATEGORY,
+];

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts

@@ -0,0 +1,18 @@
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'request',
+    title: 'Request an integration',
+    hyperlink: null,
+    integrations: [
+      {
+        from: { key: 'github', image: '/images/integrations/github-logo.png' },
+        to: null,
+        type: 'Goto',
+        text: 'Request an integration on Github conversations',
+        link: 'https://github.com/twentyhq/twenty/discussions/categories/ideas',
+        linkText: 'Go to GitHub',
+      },
+    ],
+  };

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts

@@ -0,0 +1,21 @@
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'windmill',
+    title: 'With Windmill',
+    hyperlink: null,
+    integrations: [
+      {
+        from: {
+          key: 'windmill',
+          image: '/images/integrations/windmill-logo.png',
+        },
+        to: null,
+        type: 'Goto',
+        text: 'Create a workflow with Windmill',
+        link: 'https://www.windmill.dev',
+        linkText: 'Go to Windmill',
+      },
+    ],
+  };

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts

@@ -0,0 +1,42 @@
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
+  {
+    key: 'zapier',
+    title: 'With Zapier',
+    hyperlinkText: 'See all zaps',
+    hyperlink: 'https://zapier.com/apps/twenty/integrations',
+    integrations: [
+      {
+        from: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        to: { key: 'slack', image: '/images/integrations/slack-logo.png' },
+        type: 'Use',
+        text: 'Post to Slack when a company is updated',
+        link: 'https://zapier.com/apps/twenty/integrations/slack',
+      },
+      {
+        from: { key: 'cal', image: '/images/integrations/cal-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when Cal.com event is created',
+        link: 'https://zapier.com/apps/twenty/integrations/calcom',
+      },
+      {
+        from: {
+          key: 'mailchimp',
+          image: '/images/integrations/mailchimp-logo.png',
+        },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a person when a MailChimp sub is created',
+        link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
+      },
+      {
+        from: { key: 'tally', image: '/images/integrations/tally-logo.png' },
+        to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
+        type: 'Use',
+        text: 'Create a company when a Tally form is sent',
+        link: 'https://zapier.com/apps/twenty/integrations/tally',
+      },
+    ],
+  };

packages/twenty-front/src/pages/settings/integrations/constants/Windmill.ts

@@ -1,19 +0,0 @@
-import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
-
-const windmillIntegrations: IntegrationCategory = {
-  key: 'windmill',
-  title: 'With Windmill',
-  hyperlink: null,
-  integrations: [
-    {
-      from: { key: 'windmill', image: '/images/integrations/Windmill.png' },
-      to: null,
-      type: IntegrationType.Goto,
-      text: 'Create a workflow with Windmill',
-      link: 'https://www.windmill.dev',
-      linkText: 'Go to Windmill',
-    },
-  ],
-};
-
-export default windmillIntegrations;

packages/twenty-front/src/pages/settings/integrations/constants/Zapier.ts

@@ -1,40 +0,0 @@
-import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
-
-const zapierIntegrations: IntegrationCategory = {
-  key: 'zapier',
-  title: 'With Zapier',
-  hyperlinkText: 'See all zaps',
-  hyperlink: 'https://zapier.com/apps/twenty/integrations',
-  integrations: [
-    {
-      from: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
-      to: { key: 'slack', image: '/images/integrations/Slack.png' },
-      type: IntegrationType.Use,
-      text: 'Post to Slack when a company is updated',
-      link: 'https://zapier.com/apps/twenty/integrations/slack',
-    },
-    {
-      from: { key: 'cal', image: '/images/integrations/Cal.png' },
-      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
-      type: IntegrationType.Use,
-      text: 'Create a person when Cal.com event is created',
-      link: 'https://zapier.com/apps/twenty/integrations/calcom',
-    },
-    {
-      from: { key: 'mailchimp', image: '/images/integrations/MailChimp.png' },
-      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
-      type: IntegrationType.Use,
-      text: 'Create a person when a MailChimp sub is created',
-      link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
-    },
-    {
-      from: { key: 'tally', image: '/images/integrations/Tally.png' },
-      to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
-      type: IntegrationType.Use,
-      text: 'Create a company when a Tally form is sent',
-      link: 'https://zapier.com/apps/twenty/integrations/tally',
-    },
-  ],
-};
-
-export default zapierIntegrations;

packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts

@@ -0,0 +1,10 @@
+export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
+
+export type SettingsIntegration = {
+  from: { key: string; image: string };
+  to: { key: string; image: string } | null;
+  type: SettingsIntegrationType;
+  linkText?: string;
+  link: string;
+  text: string;
+};

packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts

@@ -0,0 +1,9 @@
+import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+
+export type SettingsIntegrationCategory = {
+  key: string;
+  title: string;
+  hyperlinkText?: string;
+  hyperlink: string | null;
+  integrations: SettingsIntegration[];
+};

packages/twenty-server/src/core/feature-flag/feature-flag.entity.ts

@@ -14,7 +14,6 @@ import { IDField } from '@ptc-org/nestjs-query-graphql';
 import { Workspace } from 'src/core/workspace/workspace.entity';
 
 export enum FeatureFlagKeys {
-  IsIntegrationsEnabled = 'IS_INTEGRATIONS_ENABLED',
   IsMessagingEnabled = 'IS_MESSAGING_ENABLED',
   IsBlocklistEnabled = 'IS_BLOCKLIST_ENABLED',
   IsWorkspaceCleanable = 'IS_WORKSPACE_CLEANABLE',