feat: create Integrations/IntegrationDetail page

Closes #4546
twentyhq · Mar 19, 2024 · 37f3181 · 37f3181
1 parent e579554
commit 37f3181
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 2 deletions.
diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
@@ -38,6 +38,7 @@ 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 { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
 import { SettingsAppearance } from '~/pages/settings/SettingsAppearance';
 import { SettingsBilling } from '~/pages/settings/SettingsBilling.tsx';
@@ -171,6 +172,10 @@ export const App = () => {
                   path={SettingsPath.Integrations}
                   element={<SettingsIntegrations />}
                 />
+                <Route
+                  path={SettingsPath.IntegrationDetail}
+                  element={<SettingsIntegrationDetail />}
+                />
                 <Route
                   path={SettingsPath.ObjectNewFieldStep1}
                   element={<SettingsObjectNewFieldStep1 />}

diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts
@@ -21,6 +21,7 @@ export enum SettingsPath {
   DevelopersNewApiKey = 'api-keys/new',
   DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
   Integrations = 'integrations',
+  IntegrationDetail = 'integrations/:integrationSlug',
   DevelopersNewWebhook = 'webhooks/new',
   DevelopersNewWebhookDetail = 'webhooks/:webhookId',
 }
diff --git a/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
@@ -1,4 +1,6 @@
 export type FeatureFlagKey =
   | 'IS_BLOCKLIST_ENABLED'
   | 'IS_CALENDAR_ENABLED'
-  | 'IS_QUICK_ACTIONS_ENABLED';
+  | 'IS_QUICK_ACTIONS_ENABLED'
+  | 'IS_AIRTABLE_INTEGRATION_ENABLED'
+  | 'IS_POSTGRESQL_INTEGRATION_ENABLED';
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+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';
+import { SETTINGS_INTEGRATION_LABEL_BY_SLUG } from '~/pages/settings/integrations/constants/SettingsIntegrationLabelBySlug';
+
+export const SettingsIntegrationDetail = () => {
+  const { integrationSlug = '' } = useParams();
+  const navigate = useNavigate();
+  const integrationLabel = SETTINGS_INTEGRATION_LABEL_BY_SLUG[integrationSlug];
+
+  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+    'IS_AIRTABLE_INTEGRATION_ENABLED',
+  );
+  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+    'IS_POSTGRESQL_INTEGRATION_ENABLED',
+  );
+  const isIntegrationAvailable =
+    (integrationSlug === 'airtable' && isAirtableIntegrationEnabled) ||
+    (integrationSlug === 'postgresql' && isPostgresqlIntegrationEnabled);
+
+  useEffect(() => {
+    if (!integrationLabel || !isIntegrationAvailable) {
+      return navigate(AppPath.NotFound);
+    }
+  }, [
+    integrationLabel,
+    integrationSlug,
+    isAirtableIntegrationEnabled,
+    isIntegrationAvailable,
+    isPostgresqlIntegrationEnabled,
+    navigate,
+  ]);
+
+  if (!integrationLabel || !isIntegrationAvailable) return null;
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Integrations', href: '/settings/integrations' },
+            { children: integrationLabel },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
diff --git a/.../twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationLabelBySlug.ts b/.../twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationLabelBySlug.ts
@@ -0,0 +1,4 @@
+export const SETTINGS_INTEGRATION_LABEL_BY_SLUG: Record<string, string> = {
+  airtable: 'Airtable',
+  postgresql: 'PostgreSQL',
+};
diff --git a/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts b/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
@@ -15,13 +15,23 @@ export const seedFeatureFlags = async (
     .into(`${schemaName}.${tableName}`, ['key', 'workspaceId', 'value'])
     .orIgnore()
     .values([
+      {
+        key: FeatureFlagKeys.IsBlocklistEnabled,
+        workspaceId: workspaceId,
+        value: true,
+      },
       {
         key: FeatureFlagKeys.IsCalendarEnabled,
         workspaceId: workspaceId,
         value: true,
       },
       {
-        key: FeatureFlagKeys.IsBlocklistEnabled,
+        key: FeatureFlagKeys.IsAirtableIntegrationEnabled,
+        workspaceId: workspaceId,
+        value: true,
+      },
+      {
+        key: FeatureFlagKeys.IsPostgreSQLIntegrationEnabled,
         workspaceId: workspaceId,
         value: true,
       },

diff --git a/packages/twenty-server/src/engine/modules/feature-flag/feature-flag.entity.ts b/packages/twenty-server/src/engine/modules/feature-flag/feature-flag.entity.ts
@@ -16,6 +16,8 @@ import { Workspace } from 'src/engine/modules/workspace/workspace.entity';
 export enum FeatureFlagKeys {
   IsBlocklistEnabled = 'IS_BLOCKLIST_ENABLED',
   IsCalendarEnabled = 'IS_CALENDAR_ENABLED',
+  IsAirtableIntegrationEnabled = 'IS_AIRTABLE_INTEGRATION_ENABLED',
+  IsPostgreSQLIntegrationEnabled = 'IS_POSTGRESQL_INTEGRATION_ENABLED',
 }
 
 @Entity({ name: 'featureFlag', schema: 'core' })

diff --git a/.../src/engine/workspace-manager/workspace-sync-metadata/commands/add-standard-id.command.ts b/.../src/engine/workspace-manager/workspace-sync-metadata/commands/add-standard-id.command.ts
@@ -50,6 +50,8 @@ export class AddStandardIdCommand extends CommandRunner {
           {
             IS_BLOCKLIST_ENABLED: true,
             IS_CALENDAR_ENABLED: true,
+            IS_AIRTABLE_INTEGRATION_ENABLED: true,
+            IS_POSTGRESQL_INTEGRATION_ENABLED: true,
           },
         );
       const standardFieldMetadataCollection = this.standardFieldFactory.create(
@@ -61,6 +63,8 @@ export class AddStandardIdCommand extends CommandRunner {
         {
           IS_BLOCKLIST_ENABLED: true,
           IS_CALENDAR_ENABLED: true,
+          IS_AIRTABLE_INTEGRATION_ENABLED: true,
+          IS_POSTGRESQL_INTEGRATION_ENABLED: true,
         },
       );