feat: add Integrations/Integration Details/New Database page (#4593)

Closes #4553

packages/twenty-front/src/App.tsx

@@ -39,6 +39,7 @@ import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelope
 import { SettingsDevelopersWebhooksDetail } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail';
 import { SettingsDevelopersWebhooksNew } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew';
 import { SettingsIntegrationDetail } from '~/pages/settings/integrations/SettingsIntegrationDetail';
+import { SettingsIntegrationNewDatabase } from '~/pages/settings/integrations/SettingsIntegrationNewDatabase';
 import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
 import { SettingsAppearance } from '~/pages/settings/SettingsAppearance';
 import { SettingsBilling } from '~/pages/settings/SettingsBilling.tsx';
@@ -178,6 +179,10 @@ export const App = () => {
                   path={SettingsPath.IntegrationDetail}
                   element={<SettingsIntegrationDetail />}
                 />
+                <Route
+                  path={SettingsPath.IntegrationNewDatabase}
+                  element={<SettingsIntegrationNewDatabase />}
+                />
                 <Route
                   path={SettingsPath.ObjectNewFieldStep1}
                   element={<SettingsObjectNewFieldStep1 />}

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

@@ -22,6 +22,7 @@ export enum SettingsPath {
   DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
   Integrations = 'integrations',
   IntegrationDetail = 'integrations/:integrationKey',
+  IntegrationNewDatabase = 'integrations/:integrationKey/new',
   DevelopersNewWebhook = 'webhooks/new',
   DevelopersNewWebhookDetail = 'webhooks/:webhookId',
 }

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

@@ -0,0 +1,56 @@
+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';
+
+export const SettingsIntegrationNewDatabase = () => {
+  const { integrationKey = '' } = useParams();
+  const navigate = useNavigate();
+
+  const [integrationCategoryAll] = useSettingsIntegrationCategories();
+  const integration = integrationCategoryAll.integrations.find(
+    ({ from: { key } }) => key === integrationKey,
+  );
+
+  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+    'IS_AIRTABLE_INTEGRATION_ENABLED',
+  );
+  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+    'IS_POSTGRESQL_INTEGRATION_ENABLED',
+  );
+  const isIntegrationAvailable =
+    !!integration &&
+    ((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+      (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
+
+  useEffect(() => {
+    if (!isIntegrationAvailable) {
+      navigate(AppPath.NotFound);
+    }
+  }, [integration, integrationKey, navigate, isIntegrationAvailable]);
+
+  if (!isIntegrationAvailable) return null;
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Integrations', href: '/settings/integrations' },
+            {
+              children: integration.text,
+              href: `/settings/integrations/${integrationKey}`,
+            },
+            { children: 'New' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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

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