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 = {};