diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
index 20a769b99..032e95571 100644
--- a/packages/twenty-front/src/App.tsx
+++ b/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={}
/>
+ }
+ />
}
diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts
index ac76964b2..bb36263d2 100644
--- a/packages/twenty-front/src/modules/types/SettingsPath.ts
+++ b/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',
}
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabase.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabase.tsx
new file mode 100644
index 000000000..801e01bef
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabase.stories.tsx b/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabase.stories.tsx
new file mode 100644
index 000000000..0ee3ebb1b
--- /dev/null
+++ b/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 = {
+ 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;
+
+export const Default: Story = {};