feat: add Active and Add integration card displays (#4591)

* feat: add Active and Add integration card displays

Closes #4541

* docs: add PaymentSuccess page stories

* refactor: move page components

packages/twenty-front/src/App.tsx

@@ -1,11 +1,12 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
+import { VerifyEffect } from '@/auth/components/VerifyEffect';
 import { billingState } from '@/client-config/states/billingState.ts';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
-import { DefaultPageTitle } from '~/DefaultPageTitle';
+import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
 import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';
 import { ChooseYourPlan } from '~/pages/auth/ChooseYourPlan.tsx';
@@ -14,7 +15,6 @@ import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
 import { PasswordReset } from '~/pages/auth/PasswordReset';
 import { PaymentSuccess } from '~/pages/auth/PaymentSuccess.tsx';
 import { SignInUp } from '~/pages/auth/SignInUp';
-import { VerifyEffect } from '~/pages/auth/VerifyEffect';
 import { DefaultHomePage } from '~/pages/DefaultHomePage';
 import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
 import { NotFound } from '~/pages/not-found/NotFound';
@@ -46,13 +46,16 @@ import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
 import { Tasks } from '~/pages/tasks/Tasks';
+import { getPageTitleFromPath } from '~/utils/title-utils';
 
 export const App = () => {
   const billing = useRecoilValue(billingState);
+  const { pathname } = useLocation();
+  const pageTitle = getPageTitleFromPath(pathname);
 
   return (
     <>
-      <DefaultPageTitle />
+      <PageTitle title={pageTitle} />
       <GotoHotkeysEffect />
       <CommandMenuEffect />
       <DefaultLayout>

packages/twenty-front/src/DefaultPageTitle.tsx

@@ -1,11 +0,0 @@
-import { useLocation } from 'react-router-dom';
-
-import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
-import { getPageTitleFromPath } from '~/utils/title-utils';
-
-export const DefaultPageTitle = () => {
-  const { pathname } = useLocation();
-  const pageTitle = getPageTitleFromPath(pathname);
-
-  return <PageTitle title={pageTitle} />;
-};

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -1,9 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Pill } from 'twenty-ui';
 
-import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
+import { IconArrowUpRight, IconBolt, IconPlus } from '@/ui/display/icon';
+import { Status } from '@/ui/display/status/components/Status';
 import { Button } from '@/ui/input/button/components/Button';
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { isDefined } from '~/utils/isDefined';
 
 interface SettingsIntegrationComponentProps {
   integration: SettingsIntegration;
@@ -19,6 +23,12 @@ const StyledContainer = styled.div`
   flex-direction: row;
   justify-content: space-between;
   padding: ${({ theme }) => theme.spacing(3)};
+
+  ${({ onClick }) =>
+    isDefined(onClick) &&
+    css`
+      cursor: pointer;
+    `}
 `;
 
 const StyledSection = styled.div`
@@ -48,33 +58,52 @@ const StyledLogo = styled.img`
 export const SettingsIntegrationComponent = ({
   integration,
 }: SettingsIntegrationComponentProps) => {
-  const openLinkInTab = (link: string) => {
+  const navigate = useNavigate();
-    window.open(link);
+
-  };
+  const navigateToIntegrationPage = () => navigate(integration.link);
+  const openExternalLink = () => window.open(integration.link);
 
   return (
-    <StyledContainer>
+    <StyledContainer
+      onClick={
+        integration.type === 'Active' ? navigateToIntegrationPage : undefined
+      }
+    >
       <StyledSection>
         <StyledIntegrationLogo>
           <StyledLogo src={integration.from.image} alt={integration.from.key} />
-          {integration.to ? (
+          {isDefined(integration.to) && (
             <>
               <div>→</div>
               <StyledLogo src={integration.to.image} alt={integration.to.key} />
             </>
-          ) : (
-            <></>
           )}
         </StyledIntegrationLogo>
         {integration.text}
       </StyledSection>
       {integration.type === 'Soon' ? (
         <StyledSoonPill label="Soon" />
+      ) : integration.type === 'Active' ? (
+        <Status color="green" text="Active" />
+      ) : integration.type === 'Add' ? (
+        <Button
+          onClick={navigateToIntegrationPage}
+          Icon={IconPlus}
+          title="Add"
+          size="small"
+        />
+      ) : integration.type === 'Use' ? (
+        <Button
+          onClick={openExternalLink}
+          Icon={IconBolt}
+          title="Use"
+          size="small"
+        />
       ) : (
         <Button
-          onClick={() => openLinkInTab(integration.link)}
+          onClick={openExternalLink}
-          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
+          Icon={IconArrowUpRight}
-          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          title={integration.linkText}
           size="small"
         />
       )}

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
 
 interface SettingsIntegrationGroupProps {
   integrationGroup: SettingsIntegrationCategory;
@@ -33,28 +33,30 @@ const StyledIntegrationsSection = styled.div`
 
 export const SettingsIntegrationGroup = ({
   integrationGroup,
-}: SettingsIntegrationGroupProps) => {
+}: SettingsIntegrationGroupProps) => (
-  const openLinkInTab = (link: string) => {
+  <Section>
-    window.open(link);
+    <StyledIntegrationGroupHeader>
-  };
+      <H2Title title={integrationGroup.title} />
-  return (
+      {integrationGroup.hyperlink && (
-    <Section>
+        <StyledGroupLink
-      <StyledIntegrationGroupHeader>
+          onClick={() => window.open(integrationGroup.hyperlink ?? '')}
-        <H2Title title={integrationGroup.title} />
+        >
-        {integrationGroup.hyperlink && (
+          <div>{integrationGroup.hyperlinkText}</div>
-          <StyledGroupLink
+          <div>→</div>
-            onClick={() => openLinkInTab(integrationGroup.hyperlink ?? '')}
+        </StyledGroupLink>
-          >
+      )}
-            <div>{integrationGroup.hyperlinkText}</div>
+    </StyledIntegrationGroupHeader>
-            <div>→</div>
+    <StyledIntegrationsSection>
-          </StyledGroupLink>
+      {integrationGroup.integrations.map((integration) => (
-        )}
+        <SettingsIntegrationComponent
-      </StyledIntegrationGroupHeader>
+          key={[
-      <StyledIntegrationsSection>
+            integrationGroup.key,
-        {integrationGroup.integrations.map((integration) => {
+            integration.from.key,
-          return <SettingsIntegrationComponent integration={integration} />;
+            integration.to?.key,
-        })}
+          ].join('-')}
-      </StyledIntegrationsSection>
+          integration={integration}
-    </Section>
+        />
-  );
+      ))}
-};
+    </StyledIntegrationsSection>
+  </Section>
+);

packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts

@@ -0,0 +1,10 @@
+export const MOCK_REMOTE_DATABASES = [
+  {
+    name: 'airtable',
+    isActive: false,
+  },
+  {
+    name: 'postgresql',
+    isActive: true,
+  },
+];

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

@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
   {

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

@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
   {

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

@@ -1,4 +1,4 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
   {

packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts

@@ -0,0 +1,35 @@
+import { MOCK_REMOTE_DATABASES } from '@/settings/integrations/constants/MockRemoteDatabases';
+import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationRequest';
+import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationWindmill';
+import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationZapier';
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+import { getSettingsIntegrationAll } from '@/settings/integrations/utils/getSettingsIntegrationAll';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const useSettingsIntegrationCategories =
+  (): SettingsIntegrationCategory[] => {
+    const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+      'IS_AIRTABLE_INTEGRATION_ENABLED',
+    );
+    const isAirtableIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'airtable',
+    )?.isActive;
+    const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+      'IS_POSTGRESQL_INTEGRATION_ENABLED',
+    );
+    const isPostgresqlIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
+      ({ name }) => name === 'postgresql',
+    )?.isActive;
+
+    return [
+      getSettingsIntegrationAll({
+        isAirtableIntegrationEnabled,
+        isAirtableIntegrationActive,
+        isPostgresqlIntegrationEnabled,
+        isPostgresqlIntegrationActive,
+      }),
+      SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
+      SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
+      SETTINGS_INTEGRATION_REQUEST_CATEGORY,
+    ];
+  };

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

@@ -1,4 +1,9 @@
-export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
+export type SettingsIntegrationType =
+  | 'Active'
+  | 'Add'
+  | 'Goto'
+  | 'Soon'
+  | 'Use';
 
 export type SettingsIntegration = {
   from: { key: string; image: string };

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

@@ -1,4 +1,4 @@
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 
 export type SettingsIntegrationCategory = {
   key: string;

packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts

@@ -0,0 +1,44 @@
+import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+
+export const getSettingsIntegrationAll = ({
+  isAirtableIntegrationEnabled,
+  isAirtableIntegrationActive,
+  isPostgresqlIntegrationEnabled,
+  isPostgresqlIntegrationActive,
+}: {
+  isAirtableIntegrationEnabled: boolean;
+  isAirtableIntegrationActive: boolean;
+  isPostgresqlIntegrationEnabled: boolean;
+  isPostgresqlIntegrationActive: boolean;
+}): SettingsIntegrationCategory => ({
+  key: 'all',
+  title: 'All',
+  integrations: [
+    {
+      from: {
+        key: 'airtable',
+        image: '/images/integrations/airtable-logo.png',
+      },
+      type: !isAirtableIntegrationEnabled
+        ? 'Soon'
+        : isAirtableIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'Airtable',
+      link: '/settings/integrations/airtable',
+    },
+    {
+      from: {
+        key: 'postgresql',
+        image: '/images/integrations/postgresql-logo.png',
+      },
+      type: !isPostgresqlIntegrationEnabled
+        ? 'Soon'
+        : isPostgresqlIntegrationActive
+          ? 'Active'
+          : 'Add',
+      text: 'PostgreSQL',
+      link: '/settings/integrations/postgresql',
+    },
+  ],
+});

packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx

@@ -0,0 +1,48 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { graphql, HttpResponse } from 'msw';
+
+import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+
+import { PaymentSuccess } from '../PaymentSuccess';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Auth/PaymentSuccess',
+  component: PaymentSuccess,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.PlanRequiredSuccess },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof PaymentSuccess>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Start');
+  },
+};

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

@@ -2,19 +2,21 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
 
 export const SettingsIntegrationDetail = () => {
   const { integrationKey = '' } = useParams();
   const navigate = useNavigate();
-  const integrationLabel = SETTINGS_INTEGRATION_ALL_CATEGORY.integrations.find(
+
+  const [integrationCategoryAll] = useSettingsIntegrationCategories();
+  const integration = integrationCategoryAll.integrations.find(
     ({ from: { key } }) => key === integrationKey,
-  )?.text;
+  );
 
   const isAirtableIntegrationEnabled = useIsFeatureEnabled(
     'IS_AIRTABLE_INTEGRATION_ENABLED',
@@ -23,23 +25,17 @@ export const SettingsIntegrationDetail = () => {
     'IS_POSTGRESQL_INTEGRATION_ENABLED',
   );
   const isIntegrationAvailable =
-    (integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+    !!integration &&
-    (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled);
+    ((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+      (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
 
   useEffect(() => {
-    if (!integrationLabel || !isIntegrationAvailable) {
+    if (!isIntegrationAvailable) {
-      return navigate(AppPath.NotFound);
+      navigate(AppPath.NotFound);
     }
-  }, [
+  }, [integration, integrationKey, navigate, isIntegrationAvailable]);
-    integrationLabel,
-    integrationKey,
-    isAirtableIntegrationEnabled,
-    isIntegrationAvailable,
-    isPostgresqlIntegrationEnabled,
-    navigate,
-  ]);
 
-  if (!integrationLabel || !isIntegrationAvailable) return null;
+  if (!isIntegrationAvailable) return null;
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -47,7 +43,7 @@ export const SettingsIntegrationDetail = () => {
         <Breadcrumb
           links={[
             { children: 'Integrations', href: '/settings/integrations' },
-            { children: integrationLabel },
+            { children: integration.text },
           ]}
         />
       </SettingsPageContainer>

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

@@ -1,18 +1,20 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationGroup } from '@/settings/integrations/components/SettingsIntegrationGroup';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 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';
 
 export const SettingsIntegrations = () => {
+  const integrationCategories = useSettingsIntegrationCategories();
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <Breadcrumb links={[{ children: 'Integrations' }]} />
-        {SETTINGS_INTEGRATION_CATEGORIES.map((group) => {
+        {integrationCategories.map((group) => (
-          return <SettingsIntegrationGroup integrationGroup={group} />;
+          <SettingsIntegrationGroup key={group.key} integrationGroup={group} />
-        })}
+        ))}
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

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

@@ -1,26 +0,0 @@
-import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
-
-export const SETTINGS_INTEGRATION_ALL_CATEGORY: SettingsIntegrationCategory = {
-  key: 'all',
-  title: 'All',
-  integrations: [
-    {
-      from: {
-        key: 'airtable',
-        image: '/images/integrations/airtable-logo.png',
-      },
-      type: 'Soon',
-      text: 'Airtable',
-      link: '/settings/integrations/airtable',
-    },
-    {
-      from: {
-        key: 'postgresql',
-        image: '/images/integrations/postgresql-logo.png',
-      },
-      type: 'Soon',
-      text: 'PostgreSQL',
-      link: '/settings/integrations/postgresql',
-    },
-  ],
-};

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

@@ -1,12 +0,0 @@
-import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
-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_ALL_CATEGORY,
-  SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
-  SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
-  SETTINGS_INTEGRATION_REQUEST_CATEGORY,
-];