feat: create Settings/Integrations/Database/Connection page (#4785)

Closes #4556

- Renames some pages and components after discussion about terminology
with @thomtrp.
- Creates the Settings/Integrations/Database/Connection page.

packages/twenty-front/src/App.tsx

@@ -40,8 +40,9 @@ import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-ke
 import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
 import { SettingsDevelopersWebhooksDetail } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail';
 import { SettingsDevelopersWebhooksNew } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew';
-import { SettingsIntegrationDetail } from '~/pages/settings/integrations/SettingsIntegrationDetail';
+import { SettingsIntegrationDatabase } from '~/pages/settings/integrations/SettingsIntegrationDatabase';
-import { SettingsIntegrationNewDatabase } from '~/pages/settings/integrations/SettingsIntegrationNewDatabase';
+import { SettingsIntegrationDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnection';
+import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
 import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
 import { SettingsAppearance } from '~/pages/settings/SettingsAppearance';
 import { SettingsBilling } from '~/pages/settings/SettingsBilling.tsx';
@@ -178,12 +179,16 @@ export const App = () => {
                   element={<SettingsIntegrations />}
                 />
                 <Route
-                  path={SettingsPath.IntegrationDetail}
+                  path={SettingsPath.IntegrationDatabase}
-                  element={<SettingsIntegrationDetail />}
+                  element={<SettingsIntegrationDatabase />}
                 />
                 <Route
-                  path={SettingsPath.IntegrationNewDatabase}
+                  path={SettingsPath.IntegrationNewDatabaseConnection}
-                  element={<SettingsIntegrationNewDatabase />}
+                  element={<SettingsIntegrationNewDatabaseConnection />}
+                />
+                <Route
+                  path={SettingsPath.IntegrationDatabaseConnection}
+                  element={<SettingsIntegrationDatabaseConnection />}
                 />
                 <Route
                   path={SettingsPath.ObjectNewFieldStep1}

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

@@ -6,9 +6,9 @@ import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { Status } from '@/ui/display/status/components/Status';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
-type SettingsIntegrationDatabasesListCardProps = {
+type SettingsIntegrationDatabaseConnectionsListCardProps = {
-  integrationLogoUrl: string;
+  databaseLogoUrl: string;
-  databases: {
+  connections: {
     id: string;
     key: string;
     name: string;
@@ -18,7 +18,7 @@ type SettingsIntegrationDatabasesListCardProps = {
   }[];
 };
 
-const StyledIntegrationLogoContainer = styled.div`
+const StyledDatabaseLogoContainer = styled.div`
   align-items: center;
   display: flex;
   height: ${({ theme }) => theme.spacing(4)};
@@ -26,7 +26,7 @@ const StyledIntegrationLogoContainer = styled.div`
   width: ${({ theme }) => theme.spacing(4)};
 `;
 
-const StyledIntegrationLogo = styled.img`
+const StyledDatabaseLogo = styled.img`
   height: 100%;
 `;
 
@@ -36,35 +36,35 @@ const StyledRowRightContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const SettingsIntegrationDatabasesListCard = ({
+export const SettingsIntegrationDatabaseConnectionsListCard = ({
-  integrationLogoUrl,
+  databaseLogoUrl,
-  databases,
+  connections,
-}: SettingsIntegrationDatabasesListCardProps) => {
+}: SettingsIntegrationDatabaseConnectionsListCardProps) => {
   const navigate = useNavigate();
 
   return (
     <SettingsListCard
-      items={databases}
+      items={connections}
       RowIcon={() => (
-        <StyledIntegrationLogoContainer>
+        <StyledDatabaseLogoContainer>
-          <StyledIntegrationLogo alt="" src={integrationLogoUrl} />
+          <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
-        </StyledIntegrationLogoContainer>
+        </StyledDatabaseLogoContainer>
       )}
-      RowRightComponent={({ item: database }) => (
+      RowRightComponent={({ item: connection }) => (
         <StyledRowRightContainer>
           <Status
             color="green"
             text={
-              database.tables.length === 1
+              connection.tables.length === 1
                 ? `1 tracked table`
-                : `${database.tables.length} tracked tables`
+                : `${connection.tables.length} tracked tables`
             }
           />
           <LightIconButton Icon={IconChevronRight} accent="tertiary" />
         </StyledRowRightContainer>
       )}
-      onRowClick={(database) => navigate(`./${database.key}`)}
+      onRowClick={(connection) => navigate(`./${connection.key}`)}
-      getItemLabel={(database) => database.name}
+      getItemLabel={(connection) => connection.name}
       hasFooter
       footerButtonLabel="Add connection"
       onFooterButtonClick={() => navigate('./new')}

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -21,8 +21,9 @@ export enum SettingsPath {
   DevelopersNewApiKey = 'api-keys/new',
   DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
   Integrations = 'integrations',
-  IntegrationDetail = 'integrations/:integrationKey',
+  IntegrationDatabase = 'integrations/:databaseKey',
-  IntegrationNewDatabase = 'integrations/:integrationKey/new',
+  IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionKey',
+  IntegrationNewDatabaseConnection = 'integrations/:databaseKey/new',
   DevelopersNewWebhook = 'webhooks/new',
   DevelopersNewWebhookDetail = 'webhooks/:webhookId',
 }

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

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { IconSettings } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsIntegrationDatabasesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabasesListCard';
+import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard';
 import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -16,13 +16,13 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
 
-export const SettingsIntegrationDetail = () => {
+export const SettingsIntegrationDatabase = () => {
-  const { integrationKey = '' } = useParams();
+  const { databaseKey = '' } = useParams();
   const navigate = useNavigate();
 
   const [integrationCategoryAll] = useSettingsIntegrationCategories();
   const integration = integrationCategoryAll.integrations.find(
-    ({ from: { key } }) => key === integrationKey,
+    ({ from: { key } }) => key === databaseKey,
   );
 
   const isAirtableIntegrationEnabled = useIsFeatureEnabled(
@@ -33,21 +33,21 @@ export const SettingsIntegrationDetail = () => {
   );
   const isIntegrationAvailable =
     !!integration &&
-    ((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+    ((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
-      (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
+      (databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
 
   useEffect(() => {
     if (!isIntegrationAvailable) {
       navigate(AppPath.NotFound);
     }
-  }, [integration, integrationKey, navigate, isIntegrationAvailable]);
+  }, [integration, databaseKey, navigate, isIntegrationAvailable]);
 
   if (!isIntegrationAvailable) return null;
 
-  const databases =
+  const connections =
     mockedRemoteObjectIntegrations.find(
       ({ key }) => key === integration.from.key,
-    )?.databases || [];
+    )?.connections || [];
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -69,9 +69,9 @@ export const SettingsIntegrationDetail = () => {
             title={`${integration.text} database`}
             description={`Connect or access your ${integration.text} data`}
           />
-          <SettingsIntegrationDatabasesListCard
+          <SettingsIntegrationDatabaseConnectionsListCard
-            integrationLogoUrl={integration.from.image}
+            databaseLogoUrl={integration.from.image}
-            databases={databases}
+            connections={connections}
           />
         </Section>
       </SettingsPageContainer>

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

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { IconSettings } from 'twenty-ui';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
+
+export const SettingsIntegrationDatabaseConnection = () => {
+  const { databaseKey = '', connectionKey = '' } = useParams();
+  const navigate = useNavigate();
+
+  const [integrationCategoryAll] = useSettingsIntegrationCategories();
+  const integration = integrationCategoryAll.integrations.find(
+    ({ from: { key } }) => key === databaseKey,
+  );
+
+  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+    'IS_AIRTABLE_INTEGRATION_ENABLED',
+  );
+  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+    'IS_POSTGRESQL_INTEGRATION_ENABLED',
+  );
+  const isIntegrationAvailable =
+    !!integration &&
+    ((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
+      (databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
+
+  const connections =
+    mockedRemoteObjectIntegrations.find(
+      ({ key }) => key === integration?.from.key,
+    )?.connections || [];
+  const connection = connections.find(({ key }) => key === connectionKey);
+
+  useEffect(() => {
+    if (!isIntegrationAvailable || !connection) {
+      navigate(AppPath.NotFound);
+    }
+  }, [integration, databaseKey, navigate, isIntegrationAvailable, connection]);
+
+  if (!isIntegrationAvailable || !connection) return null;
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            {
+              children: 'Integrations',
+              href: getSettingsPagePath(SettingsPath.Integrations),
+            },
+            {
+              children: integration.text,
+              href: `/settings/integrations/${databaseKey}`,
+            },
+            { children: connection.name },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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

@@ -9,13 +9,13 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
-export const SettingsIntegrationNewDatabase = () => {
+export const SettingsIntegrationNewDatabaseConnection = () => {
-  const { integrationKey = '' } = useParams();
+  const { databaseKey = '' } = useParams();
   const navigate = useNavigate();
 
   const [integrationCategoryAll] = useSettingsIntegrationCategories();
   const integration = integrationCategoryAll.integrations.find(
-    ({ from: { key } }) => key === integrationKey,
+    ({ from: { key } }) => key === databaseKey,
   );
 
   const isAirtableIntegrationEnabled = useIsFeatureEnabled(
@@ -26,14 +26,14 @@ export const SettingsIntegrationNewDatabase = () => {
   );
   const isIntegrationAvailable =
     !!integration &&
-    ((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+    ((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
-      (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
+      (databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
 
   useEffect(() => {
     if (!isIntegrationAvailable) {
       navigate(AppPath.NotFound);
     }
-  }, [integration, integrationKey, navigate, isIntegrationAvailable]);
+  }, [integration, databaseKey, navigate, isIntegrationAvailable]);
 
   if (!isIntegrationAvailable) return null;
 
@@ -45,7 +45,7 @@ export const SettingsIntegrationNewDatabase = () => {
             { children: 'Integrations', href: '/settings/integrations' },
             {
               children: integration.text,
-              href: `/settings/integrations/${integrationKey}`,
+              href: `/settings/integrations/${databaseKey}`,
             },
             { children: 'New' },
           ]}

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

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { SettingsIntegrationDetail } from '~/pages/settings/integrations/SettingsIntegrationDetail';
+import { SettingsIntegrationDatabase } from '~/pages/settings/integrations/SettingsIntegrationDatabase';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -10,12 +10,12 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Integrations/SettingsIntegrationDetail',
+  title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
-  component: SettingsIntegrationDetail,
+  component: SettingsIntegrationDatabase,
   decorators: [PageDecorator],
   args: {
-    routePath: getSettingsPagePath(SettingsPath.IntegrationDetail),
+    routePath: getSettingsPagePath(SettingsPath.IntegrationDatabase),
-    routeParams: { ':integrationKey': 'postgresql' },
+    routeParams: { ':databaseKey': 'postgresql' },
   },
   parameters: {
     msw: graphqlMocks,
@@ -24,6 +24,6 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsIntegrationDetail>;
+export type Story = StoryObj<typeof SettingsIntegrationDatabase>;
 
 export const Default: Story = {};

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SettingsIntegrationDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnection';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
+  component: SettingsIntegrationDatabaseConnection,
+  decorators: [PageDecorator],
+  args: {
+    routePath: getSettingsPagePath(SettingsPath.IntegrationDatabaseConnection),
+    routeParams: {
+      ':databaseKey': 'postgresql',
+      ':connectionKey': 'twenty_postgres',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
+
+export const Default: Story = {};

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { SettingsIntegrationNewDatabase } from '~/pages/settings/integrations/SettingsIntegrationNewDatabase';
+import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -8,12 +8,12 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabase',
+  title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
-  component: SettingsIntegrationNewDatabase,
+  component: SettingsIntegrationNewDatabaseConnection,
   decorators: [PageDecorator],
   args: {
-    routePath: '/settings/integrations/:integrationKey/new',
+    routePath: '/settings/integrations/:databaseKey/new',
-    routeParams: { ':integrationKey': 'postgresql' },
+    routeParams: { ':databaseKey': 'postgresql' },
   },
   parameters: {
     msw: graphqlMocks,
@@ -22,6 +22,6 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
-export type Story = StoryObj<typeof SettingsIntegrationNewDatabase>;
+export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
 
 export const Default: Story = {};

packages/twenty-front/src/testing/mock-data/remoteObjectDatabases.ts

@@ -2,7 +2,7 @@ export const mockedRemoteObjectIntegrations = [
   {
     id: '5b717911-dc75-4876-bf33-dfdc994c88cd',
     key: 'postgresql',
-    databases: [
+    connections: [
       {
         id: '67cbfd35-8dd4-4591-b9d4-c1906281a5da',
         key: 'twenty_postgres',