feat: create Integrations/IntegrationDetail page (#4574)

* feat: create Integrations/IntegrationDetail page

Closes #4546

* docs: add Settings/Integrations/Integration Detail page stories

* docs: add Settings/Billing page stories

* refactor: move some Settings components to @/settings

* refactor: move some Settings integrations components to @/settings/integrations

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';
@@ -170,6 +171,10 @@ export const App = () => {
                   path={SettingsPath.Integrations}
                   element={<SettingsIntegrations />}
                 />
+                <Route
+                  path={SettingsPath.IntegrationDetail}
+                  element={<SettingsIntegrationDetail />}
+                />
                 <Route
                   path={SettingsPath.ObjectNewFieldStep1}
                   element={<SettingsObjectNewFieldStep1 />}

packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx

@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
+import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
+import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
+import { formatExpirations } from '@/settings/developers/utils/format-expiration';
+import { Table } from '@/spreadsheet-import/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+const StyledTableBody = styled(TableBody)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  grid-template-columns: 312px 132px 68px;
+`;
+
+export const SettingsApiKeysTable = () => {
+  const navigate = useNavigate();
+
+  const { records: apiKeys } = useFindManyRecords<ApiKey>({
+    objectNameSingular: CoreObjectNameSingular.ApiKey,
+    filter: { revokedAt: { is: 'NULL' } },
+  });
+
+  return (
+    <Table>
+      <StyledTableRow>
+        <TableHeader>Name</TableHeader>
+        <TableHeader>Expiration</TableHeader>
+        <TableHeader></TableHeader>
+      </StyledTableRow>
+      {!!apiKeys.length && (
+        <StyledTableBody>
+          {formatExpirations(apiKeys).map((fieldItem) => (
+            <SettingsApiKeysFieldItemTableRow
+              key={fieldItem.id}
+              fieldItem={fieldItem as ApiFieldItem}
+              onClick={() => {
+                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+              }}
+            />
+          ))}
+        </StyledTableBody>
+      )}
+    </Table>
+  );
+};

packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx

@@ -1,7 +1,7 @@
 import { IconBook2 } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 
-export const ReadDocumentationButton = () => {
+export const SettingsReadDocumentationButton = () => {
   return (
     <Button
       title="Read documentation"

packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
+import { WebhookFieldItem } from '@/settings/developers/types/webhook/WebhookFieldItem';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+const StyledTableBody = styled(TableBody)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  grid-template-columns: 444px 68px;
+`;
+
+export const SettingsWebhooksTable = () => {
+  const navigate = useNavigate();
+
+  const { records: webhooks } = useFindManyRecords<WebhookFieldItem>({
+    objectNameSingular: CoreObjectNameSingular.Webhook,
+  });
+
+  return (
+    <Table>
+      <StyledTableRow>
+        <TableHeader>Url</TableHeader>
+        <TableHeader></TableHeader>
+      </StyledTableRow>
+      {!!webhooks.length && (
+        <StyledTableBody>
+          {webhooks.map((webhookFieldItem) => (
+            <SettingsDevelopersWebhookTableRow
+              key={webhookFieldItem.id}
+              fieldItem={webhookFieldItem}
+              onClick={() => {
+                navigate(
+                  `/settings/developers/webhooks/${webhookFieldItem.id}`,
+                );
+              }}
+            />
+          ))}
+        </StyledTableBody>
+      )}
+    </Table>
+  );
+};

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
+import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
-import { SettingsIntegrationComponent } from '~/pages/settings/integrations/SettingsIntegrationComponent';
 import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
 
 interface SettingsIntegrationGroupProps {

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/:integrationKey',
   DevelopersNewWebhook = 'webhooks/new',
   DevelopersNewWebhookDetail = 'webhooks/:webhookId',
 }

packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts

@@ -2,4 +2,6 @@ export type FeatureFlagKey =
   | 'IS_BLOCKLIST_ENABLED'
   | 'IS_CALENDAR_ENABLED'
   | 'IS_QUICK_ACTIONS_ENABLED'
-  | 'IS_EVENT_OBJECT_ENABLED';
+  | 'IS_EVENT_OBJECT_ENABLED'
+  | 'IS_AIRTABLE_INTEGRATION_ENABLED'
+  | 'IS_POSTGRESQL_INTEGRATION_ENABLED';

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

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsBilling } from '../SettingsBilling';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsBilling',
+  component: SettingsBilling,
+  decorators: [PageDecorator],
+  args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsBilling>;
+
+export const Default: Story = {};

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
 import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
 import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
@@ -11,7 +12,6 @@ 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 { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
 
 export const SettingsAccounts = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx

@@ -1,23 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { IconSettings } from '@/ui/display/icon';
+import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
+import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
+import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
+import { IconPlus, IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
-import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooks';
 
-import { ReadDocumentationButton } from './components/ReadDocumentationButton';
+const StyledButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
 
 export const SettingsDevelopers = () => {
+  const navigate = useNavigate();
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <SettingsHeaderContainer>
           <Breadcrumb links={[{ children: 'Developers' }]} />
-          <ReadDocumentationButton />
+          <SettingsReadDocumentationButton />
         </SettingsHeaderContainer>
-        <SettingsDevelopersApiKeys />
-        <SettingsDevelopersWebhooks />
+        <Section>
+          <H2Title
+            title="API keys"
+            description="Active APIs keys created by you or your team."
+          />
+          <SettingsApiKeysTable />
+          <StyledButtonContainer>
+            <Button
+              Icon={IconPlus}
+              title="Create API key"
+              size="small"
+              variant="secondary"
+              onClick={() => {
+                navigate('/settings/developers/api-keys/new');
+              }}
+            />
+          </StyledButtonContainer>
+        </Section>
+        <Section>
+          <H2Title
+            title="Webhooks"
+            description="Establish Webhook endpoints for notifications on asynchronous events."
+          />
+          <SettingsWebhooksTable />
+          <StyledButtonContainer>
+            <Button
+              Icon={IconPlus}
+              title="Create Webhook"
+              size="small"
+              variant="secondary"
+              onClick={() => {
+                navigate('/settings/developers/webhooks/new');
+              }}
+            />
+          </StyledButtonContainer>
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx

@@ -10,7 +10,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksDetail',
+  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksDetail',
   component: SettingsDevelopersWebhooksDetail,
   decorators: [PageDecorator],
   args: {

packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksNew.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksNew',
+  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksNew',
   component: SettingsDevelopersWebhooksNew,
   decorators: [PageDecorator],
   args: { routePath: '/settings/developers' },

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx

@@ -1,80 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
-import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
-import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
-import { formatExpirations } from '@/settings/developers/utils/format-expiration';
-import { IconPlus } from '@/ui/display/icon';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Button } from '@/ui/input/button/components/Button';
-import { Section } from '@/ui/layout/section/components/Section';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableBody } from '@/ui/layout/table/components/TableBody';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-
-const StyledDiv = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 312px 132px 68px;
-`;
-
-const StyledTableBody = styled(TableBody)`
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-`;
-
-export const SettingsDevelopersApiKeys = () => {
-  const navigate = useNavigate();
-
-  const { records: apiKeys } = useFindManyRecords({
-    objectNameSingular: CoreObjectNameSingular.ApiKey,
-    filter: { revokedAt: { is: 'NULL' } },
-  });
-
-  return (
-    <Section>
-      <H2Title
-        title="API keys"
-        description="Active APIs keys created by you or your team."
-      />
-      <Table>
-        <StyledTableRow>
-          <TableHeader>Name</TableHeader>
-          <TableHeader>Expiration</TableHeader>
-          <TableHeader></TableHeader>
-        </StyledTableRow>
-        {!!apiKeys.length && (
-          <StyledTableBody>
-            {formatExpirations(apiKeys as ApiKey[]).map((fieldItem) => (
-              <SettingsApiKeysFieldItemTableRow
-                key={fieldItem.id}
-                fieldItem={fieldItem as ApiFieldItem}
-                onClick={() => {
-                  navigate(`/settings/developers/api-keys/${fieldItem.id}`);
-                }}
-              />
-            ))}
-          </StyledTableBody>
-        )}
-      </Table>
-      <StyledDiv>
-        <Button
-          Icon={IconPlus}
-          title="Create API key"
-          size="small"
-          variant="secondary"
-          onClick={() => {
-            navigate('/settings/developers/api-keys/new');
-          }}
-        />
-      </StyledDiv>
-    </Section>
-  );
-};

packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooks.tsx

@@ -1,76 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
-import { WebhookFieldItem } from '@/settings/developers/types/webhook/WebhookFieldItem';
-import { IconPlus } from '@/ui/display/icon';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Button } from '@/ui/input/button/components/Button';
-import { Section } from '@/ui/layout/section/components/Section';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableBody } from '@/ui/layout/table/components/TableBody';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-
-const StyledDiv = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-top: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 444px 68px;
-`;
-
-const StyledTableBody = styled(TableBody)`
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-`;
-
-export const SettingsDevelopersWebhooks = () => {
-  const navigate = useNavigate();
-
-  const { records: webhooks } = useFindManyRecords({
-    objectNameSingular: CoreObjectNameSingular.Webhook,
-  });
-
-  return (
-    <Section>
-      <H2Title
-        title="Webhooks"
-        description="Establish Webhook endpoints for notifications on asynchronous events."
-      />
-      <Table>
-        <StyledTableRow>
-          <TableHeader>Url</TableHeader>
-          <TableHeader></TableHeader>
-        </StyledTableRow>
-        {!!webhooks.length && (
-          <StyledTableBody>
-            {webhooks.map((fieldItem) => (
-              <SettingsDevelopersWebhookTableRow
-                key={fieldItem.id}
-                fieldItem={fieldItem as WebhookFieldItem}
-                onClick={() => {
-                  navigate(`/settings/developers/webhooks/${fieldItem.id}`);
-                }}
-              />
-            ))}
-          </StyledTableBody>
-        )}
-      </Table>
-      <StyledDiv>
-        <Button
-          Icon={IconPlus}
-          title="Create Webhook"
-          size="small"
-          variant="secondary"
-          onClick={() => {
-            navigate('/settings/developers/webhooks/new');
-          }}
-        />
-      </StyledDiv>
-    </Section>
-  );
-};

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

@@ -0,0 +1,56 @@
+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_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
+
+export const SettingsIntegrationDetail = () => {
+  const { integrationKey = '' } = useParams();
+  const navigate = useNavigate();
+  const integrationLabel = SETTINGS_INTEGRATION_ALL_CATEGORY.integrations.find(
+    ({ from: { key } }) => key === integrationKey,
+  )?.text;
+
+  const isAirtableIntegrationEnabled = useIsFeatureEnabled(
+    'IS_AIRTABLE_INTEGRATION_ENABLED',
+  );
+  const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
+    'IS_POSTGRESQL_INTEGRATION_ENABLED',
+  );
+  const isIntegrationAvailable =
+    (integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
+    (integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled);
+
+  useEffect(() => {
+    if (!integrationLabel || !isIntegrationAvailable) {
+      return navigate(AppPath.NotFound);
+    }
+  }, [
+    integrationLabel,
+    integrationKey,
+    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>
+  );
+};

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

@@ -1,9 +1,9 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsIntegrationGroup } from '@/settings/integrations/components/SettingsIntegrationGroup';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { SETTINGS_INTEGRATION_CATEGORIES } from '~/pages/settings/integrations/constants/SettingsIntegrationCategories';
-import { SettingsIntegrationGroup } from '~/pages/settings/integrations/SettingsIntegrationGroup';
 
 export const SettingsIntegrations = () => {
   return (

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

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

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

@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
 import {
   PageDecorator,
@@ -13,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrations',
   component: SettingsIntegrations,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/integrations' },
+  args: { routePath: getSettingsPagePath(SettingsPath.Integrations) },
   parameters: {
     msw: graphqlMocks,
   },

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts

@@ -0,0 +1,26 @@
+import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
+
+export const SETTINGS_INTEGRATION_ALL_CATEGORY: SettingsIntegrationCategory = {
+  key: 'all',
+  title: 'All',
+  integrations: [
+    {
+      from: {
+        key: 'airtable',
+        image: '/images/integrations/airtable-logo.png',
+      },
+      type: 'Soon',
+      text: 'Airtable',
+      link: '/settings/integrations/airtable',
+    },
+    {
+      from: {
+        key: 'postgresql',
+        image: '/images/integrations/postgresql-logo.png',
+      },
+      type: 'Soon',
+      text: 'PostgreSQL',
+      link: '/settings/integrations/postgresql',
+    },
+  ],
+};

packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts

@@ -1,9 +1,11 @@
+import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
 import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationRequest';
 import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationWindmill';
 import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationZapier';
 import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
 
 export const SETTINGS_INTEGRATION_CATEGORIES: SettingsIntegrationCategory[] = [
+  SETTINGS_INTEGRATION_ALL_CATEGORY,
   SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
   SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
   SETTINGS_INTEGRATION_REQUEST_CATEGORY,

packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts

@@ -2,7 +2,7 @@ export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
 
 export type SettingsIntegration = {
   from: { key: string; image: string };
-  to: { key: string; image: string } | null;
+  to?: { key: string; image: string } | null;
   type: SettingsIntegrationType;
   linkText?: string;
   link: string;

packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts

@@ -4,6 +4,6 @@ export type SettingsIntegrationCategory = {
   key: string;
   title: string;
   hyperlinkText?: string;
-  hyperlink: string | null;
+  hyperlink?: string | null;
   integrations: SettingsIntegration[];
 };

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,
       },

packages/twenty-server/src/engine/core-modules/feature-flag/feature-flag.entity.ts

@@ -17,6 +17,8 @@ export enum FeatureFlagKeys {
   IsBlocklistEnabled = 'IS_BLOCKLIST_ENABLED',
   IsCalendarEnabled = 'IS_CALENDAR_ENABLED',
   IsEventObjectEnabled = 'IS_EVENT_OBJECT_ENABLED',
+  IsAirtableIntegrationEnabled = 'IS_AIRTABLE_INTEGRATION_ENABLED',
+  IsPostgreSQLIntegrationEnabled = 'IS_POSTGRESQL_INTEGRATION_ENABLED',
 }
 
 @Entity({ name: 'featureFlag', schema: 'core' })

packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/commands/add-standard-id.command.ts

@@ -56,6 +56,8 @@ export class AddStandardIdCommand extends CommandRunner {
             IS_BLOCKLIST_ENABLED: true,
             IS_CALENDAR_ENABLED: true,
             IS_EVENT_OBJECT_ENABLED: true,
+            IS_AIRTABLE_INTEGRATION_ENABLED: true,
+            IS_POSTGRESQL_INTEGRATION_ENABLED: true,
           },
         );
       const standardFieldMetadataCollection = this.standardFieldFactory.create(
@@ -68,6 +70,8 @@ export class AddStandardIdCommand extends CommandRunner {
           IS_BLOCKLIST_ENABLED: true,
           IS_CALENDAR_ENABLED: true,
           IS_EVENT_OBJECT_ENABLED: true,
+          IS_AIRTABLE_INTEGRATION_ENABLED: true,
+          IS_POSTGRESQL_INTEGRATION_ENABLED: true,
         },
       );