feat: create Integrations/IntegrationDetail page

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/pages/settings/developers/components/ReadDocumentationButton.tsx → 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/pages/settings/integrations/SettingsIntegrationGroup.tsx → 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__/SettingsDevelopersWebhooksDetail.stories.tsx → 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__/SettingsDevelopersWebhooksNew.stories.tsx → 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' },