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/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -0,0 +1,56 @@
+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 { AppPath } from '@/types/AppPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+
+export const SettingsIntegrationNewDatabaseConnection = () => {
+  const { databaseKey = '' } = 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));
+
+  useEffect(() => {
+    if (!isIntegrationAvailable) {
+      navigate(AppPath.NotFound);
+    }
+  }, [integration, databaseKey, 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/${databaseKey}`,
+            },
+            { children: 'New' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};