feat: add Active and Add integration card displays

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/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) => {
-    window.open(link);
-  };
+  const navigate = useNavigate();
+
+  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)}
-          Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
-          title={integration.type === 'Goto' ? integration.linkText : 'Use'}
+          onClick={openExternalLink}
+          Icon={IconArrowUpRight}
+          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) => {
-  const openLinkInTab = (link: string) => {
-    window.open(link);
-  };
-  return (
-    <Section>
-      <StyledIntegrationGroupHeader>
-        <H2Title title={integrationGroup.title} />
-        {integrationGroup.hyperlink && (
-          <StyledGroupLink
-            onClick={() => openLinkInTab(integrationGroup.hyperlink ?? '')}
-          >
-            <div>{integrationGroup.hyperlinkText}</div>
-            <div>→</div>
-          </StyledGroupLink>
-        )}
-      </StyledIntegrationGroupHeader>
-      <StyledIntegrationsSection>
-        {integrationGroup.integrations.map((integration) => {
-          return <SettingsIntegrationComponent integration={integration} />;
-        })}
-      </StyledIntegrationsSection>
-    </Section>
-  );
-};
+}: SettingsIntegrationGroupProps) => (
+  <Section>
+    <StyledIntegrationGroupHeader>
+      <H2Title title={integrationGroup.title} />
+      {integrationGroup.hyperlink && (
+        <StyledGroupLink
+          onClick={() => window.open(integrationGroup.hyperlink ?? '')}
+        >
+          <div>{integrationGroup.hyperlinkText}</div>
+          <div>→</div>
+        </StyledGroupLink>
+      )}
+    </StyledIntegrationGroupHeader>
+    <StyledIntegrationsSection>
+      {integrationGroup.integrations.map((integration) => (
+        <SettingsIntegrationComponent
+          key={[
+            integrationGroup.key,
+            integration.from.key,
+            integration.to?.key,
+          ].join('-')}
+          integration={integration}
+        />
+      ))}
+    </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/pages/settings/integrations/constants/SettingsIntegrationRequest.ts → 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/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts → 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/pages/settings/integrations/constants/SettingsIntegrationZapier.ts → 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/pages/settings/integrations/types/SettingsIntegration.ts → 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/pages/settings/integrations/types/SettingsIntegrationCategory.ts → 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');
+  },
+};