feat: added webhook list section and updated api key section (#3567)

* feat: added webhook list section and updated api key ui * Fix style * Fix webhook style * Update setting path * Add soon pill on not developped features * Code review returns --------- Co-authored-by: Lakshay saini <lakshay.saini@finmo.net> Co-authored-by: martmull <martmull@hotmail.fr>
2024-01-25 22:09:17 +05:30
parent 6004969096
commit e0405edb38
22 changed files with 402 additions and 193 deletions
--- a/packages/twenty-docs/docs/contributor/server/others/zapier.mdx
+++ b/packages/twenty-docs/docs/contributor/server/others/zapier.mdx
@ -37,7 +37,7 @@ From the `packages/twenty-zapier` folder, run:
 ```bash
 cp .env.example .env
 ```
-Run the application locally, go to [http://localhost:3000/settings/developers/api-keys](http://localhost:3000/settings/developers/api-keys), and generate an API key.
+Run the application locally, go to [http://localhost:3000/settings/developers](http://localhost:3000/settings/developers/api-keys), and generate an API key.

 Replace the **YOUR_API_KEY** value in the `.env` file with the API key you just generated.

--- a/packages/twenty-docs/src/components/token-form.tsx
+++ b/packages/twenty-docs/src/components/token-form.tsx
@ -1,68 +1,68 @@
 import React, { useEffect, useState } from 'react';
-import { parseJson } from 'nx/src/utils/json';
-import tokenForm from '!css-loader!./token-form.css';
 import { TbLoader2 } from 'react-icons/tb';
+import { parseJson } from 'nx/src/utils/json';
+
+import tokenForm from '!css-loader!./token-form.css';

 export type TokenFormProps = {
-  setOpenApiJson?: (json: object) => void,
-  setToken?: (token: string) => void,
-  isTokenValid: boolean,
-  setIsTokenValid: (boolean) => void,
-}
+  setOpenApiJson?: (json: object) => void;
+  setToken?: (token: string) => void;
+  isTokenValid: boolean;
+  setIsTokenValid: (boolean) => void;
+};

-const TokenForm = (
-  {
-    setOpenApiJson,
-    setToken,
-    isTokenValid,
-    setIsTokenValid,
-  }: TokenFormProps
-) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const token = parseJson(localStorage.getItem('TryIt_securitySchemeValues'))?.bearerAuth ?? ''
+const TokenForm = ({
+  setOpenApiJson,
+  setToken,
+  isTokenValid,
+  setIsTokenValid,
+}: TokenFormProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const token =
+    parseJson(localStorage.getItem('TryIt_securitySchemeValues'))?.bearerAuth ??
+    '';

  const updateToken = async (event: React.ChangeEvent<HTMLInputElement>) => {
    localStorage.setItem(
      'TryIt_securitySchemeValues',
-      JSON.stringify({bearerAuth: event.target.value}),
-    )
-    await submitToken(event.target.value)
-  }
+      JSON.stringify({ bearerAuth: event.target.value }),
+    );
+    await submitToken(event.target.value);
+  };

-  const validateToken = (openApiJson) => setIsTokenValid(!!openApiJson.tags)
+  const validateToken = (openApiJson) => setIsTokenValid(!!openApiJson.tags);

-  const getJson = async (token: string ) => {
-    setIsLoading(true)
+  const getJson = async (token: string) => {
+    setIsLoading(true);

-    return await fetch(
-      'https://api.twenty.com/open-api',
-      {headers: {Authorization: `Bearer ${token}`}}
-    )
-      .then((res)=> res.json())
-      .then((result)=> {
-        validateToken(result)
-        setIsLoading(false)
+    return await fetch('https://api.twenty.com/open-api', {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((res) => res.json())
+      .then((result) => {
+        validateToken(result);
+        setIsLoading(false);

-        return result
+        return result;
      })
-      .catch(() => setIsLoading(false))
-  }
+      .catch(() => setIsLoading(false));
+  };

  const submitToken = async (token) => {
-    if (isLoading) return
+    if (isLoading) return;

-    const json = await getJson(token)
+    const json = await getJson(token);

-    setToken && setToken(token)
+    setToken && setToken(token);

-    setOpenApiJson && setOpenApiJson(json)
-  }
+    setOpenApiJson && setOpenApiJson(json);
+  };

-  useEffect(()=> {
-    (async ()=> {
-      await submitToken(token)
-    })()
-  },[])
+  useEffect(() => {
+    (async () => {
+      await submitToken(token);
+    })();
+  }, []);

  // We load playground style using useEffect as it breaks remaining docs style
  useEffect(() => {
@ -73,31 +73,48 @@ const TokenForm = (
    return () => styleElement.remove();
  }, []);

-  return !isTokenValid && (
-    <div>
-      <div className='container'>
-        <form className="form">
-          <label>
-            To load your playground schema, <a className='link' href='https://app.twenty.com/settings/developers/api-keys'>generate an API key</a> and paste it here:
-          </label>
-          <p>
-            <input
-              className={(token && !isLoading) ? 'input invalid' : 'input'}
-              type='text'
-              readOnly={isLoading}
-              placeholder='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMD...'
-              defaultValue={token}
-              onChange={updateToken}
-            />
-            <span className={`token-invalid ${(!token || isLoading )&& 'not-visible'}`}>Token invalid</span>
-            <div className='loader-container'>
-              <TbLoader2 className={`loader ${!isLoading && 'not-visible'}`} />
-            </div>
-          </p>
-        </form>
+  return (
+    !isTokenValid && (
+      <div>
+        <div className="container">
+          <form className="form">
+            <label>
+              To load your playground schema,{' '}
+              <a
+                className="link"
+                href="https://app.twenty.com/settings/developers"
+              >
+                generate an API key
+              </a>{' '}
+              and paste it here:
+            </label>
+            <p>
+              <input
+                className={token && !isLoading ? 'input invalid' : 'input'}
+                type="text"
+                readOnly={isLoading}
+                placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIyMD..."
+                defaultValue={token}
+                onChange={updateToken}
+              />
+              <span
+                className={`token-invalid ${
+                  (!token || isLoading) && 'not-visible'
+                }`}
+              >
+                Token invalid
+              </span>
+              <div className="loader-container">
+                <TbLoader2
+                  className={`loader ${!isLoading && 'not-visible'}`}
+                />
+              </div>
+            </p>
+          </form>
+        </div>
      </div>
-    </div>
-  )
-}
+    )
+  );
+};

 export default TokenForm;
--- a/packages/twenty-front/src/App.tsx
+++ b/packages/twenty-front/src/App.tsx
@ -30,9 +30,9 @@ import { SettingsObjectFieldEdit } from '~/pages/settings/data-model/SettingsObj
 import { SettingsObjectNewFieldStep1 } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
 import { SettingsObjectNewFieldStep2 } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2';
 import { SettingsObjects } from '~/pages/settings/data-model/SettingsObjects';
-import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
-import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
-import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
+import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
+import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/SettingsDevelopersApiKeyDetail';
+import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/SettingsDevelopersApiKeysNew';
 import { SettingsAppearance } from '~/pages/settings/SettingsAppearance';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
@ -135,7 +135,7 @@ export const App = () => {
                    <Routes>
                      <Route
                        path={SettingsPath.Developers}
-                        element={<SettingsDevelopersApiKeys />}
+                        element={<SettingsDevelopers />}
                      />
                      <Route
                        path={SettingsPath.DevelopersNewApiKey}
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@ -128,11 +128,11 @@ export const SettingsNavigationDrawerItems = () => {
        />
        <NavigationDrawerItem
          label="Developers"
-          to="/settings/developers/api-keys"
+          to="/settings/developers"
          Icon={IconRobot}
          active={
            !!useMatch({
-              path: useResolvedPath('/settings/developers/api-keys').pathname,
+              path: useResolvedPath('/settings/developers').pathname,
              end: true,
            })
          }
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';

 export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 180px 148px 148px 36px;
+  grid-template-columns: 312px 132px 68px;
 `;

 const StyledNameTableCell = styled(TableCell)`
@ -36,7 +36,6 @@ export const SettingsApiKeysFieldItemTableRow = ({
  return (
    <StyledApisFieldTableRow onClick={() => onClick()}>
      <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
-      <TableCell color={theme.font.color.tertiary}>Internal</TableCell>{' '}
      <TableCell
        color={
          fieldItem.expiration === 'Expired'
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
@ -0,0 +1,54 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { WebhookFieldItem } from '@/settings/developers/types/WebhookFieldItem';
+import { IconChevronRight } from '@/ui/display/icon';
+import { SoonPill } from '@/ui/display/pill/components/SoonPill';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+export const StyledApisFieldTableRow = styled(TableRow)`
+  grid-template-columns: 444px 68px;
+`;
+
+const StyledIconTableCell = styled(TableCell)`
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledUrlTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.primary};
+  overflow-x: scroll;
+  white-space: nowrap;
+`;
+
+const StyledIconChevronRight = styled(IconChevronRight)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const SettingsDevelopersWebhookTableRow = ({
+  fieldItem,
+  onClick,
+}: {
+  fieldItem: WebhookFieldItem;
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+
+  const soon = true; // Temporarily disabled while awaiting the development of the feature.
+  const onClickAction = !soon ? () => onClick() : undefined;
+
+  return (
+    <StyledApisFieldTableRow onClick={onClickAction}>
+      <StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
+      <StyledIconTableCell>
+        <StyledIconChevronRight
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+        {soon && <SoonPill />}
+      </StyledIconTableCell>
+    </StyledApisFieldTableRow>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/developers/types/WebhookFieldItem.ts
+++ b/packages/twenty-front/src/modules/settings/developers/types/WebhookFieldItem.ts
@ -0,0 +1,5 @@
+export type WebhookFieldItem = {
+  id: string;
+  targetUrl: string;
+  operation: string;
+};
--- a/packages/twenty-front/src/modules/types/SettingsPath.ts
+++ b/packages/twenty-front/src/modules/types/SettingsPath.ts
@ -14,7 +14,7 @@ export enum SettingsPath {
  NewObject = 'objects/new',
  WorkspaceMembersPage = 'workspace-members',
  Workspace = 'workspace',
-  Developers = 'api-keys',
+  Developers = '',
  DevelopersNewApiKey = 'api-keys/new',
  DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
 }
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@ -0,0 +1,18 @@
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/SettingsDevelopersApiKeys';
+import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/SettingsDevelopersWebhooks';
+
+export const SettingsDevelopers = () => {
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb links={[{ children: 'Developers' }]} />
+        <SettingsDevelopersApiKeys />
+        <SettingsDevelopersWebhooks />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
@ -70,7 +70,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
    });
    performOptimisticEvict('ApiKey', 'id', apiKeyId);
    if (redirect) {
-      navigate('/settings/developers/api-keys');
+      navigate('/settings/developers');
    }
  };

@ -131,7 +131,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
            <SettingsHeaderContainer>
              <Breadcrumb
                links={[
-                  { children: 'APIs', href: '/settings/developers/api-keys' },
+                  { children: 'APIs', href: '/settings/developers' },
                  { children: apiKeyData.name },
                ]}
              />
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopersApiKeys.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopersApiKeys.tsx
@ -0,0 +1,81 @@
+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/ApiFieldItem';
+import { ApiKey } from '@/settings/developers/types/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' } },
+    orderBy: {},
+  });
+
+  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>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@ -66,14 +66,14 @@ export const SettingsDevelopersApiKeysNew = () => {
        <SettingsHeaderContainer>
          <Breadcrumb
            links={[
-              { children: 'APIs', href: '/settings/developers/api-keys' },
+              { children: 'APIs', href: '/settings/developers' },
              { children: 'New' },
            ]}
          />
          <SaveAndCancelButtons
            isSaveDisabled={!canSave}
            onCancel={() => {
-              navigate('/settings/developers/api-keys');
+              navigate('/settings/developers');
            }}
            onSave={onSave}
          />
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopersWebhooks.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopersWebhooks.tsx
@ -0,0 +1,78 @@
+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/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,
+    orderBy: {},
+  });
+
+  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"
+          soon={true}
+          onClick={() => {
+            navigate('/settings/developers/webhooks/new');
+          }}
+        />
+      </StyledDiv>
+    </Section>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopers.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopers.stories.tsx
@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Developers/SettingsDevelopers',
+  component: SettingsDevelopers,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/developers' },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsDevelopers>;
+
+export const Default: Story = {
+  play: async () => {
+    await sleep(100);
+  },
+};
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeys.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeys.stories.tsx
@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';

-import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
+import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/SettingsDevelopersApiKeys';
 import {
  PageDecorator,
  PageDecoratorArgs,
@ -12,7 +12,7 @@ const meta: Meta<PageDecoratorArgs> = {
  title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeys',
  component: SettingsDevelopersApiKeys,
  decorators: [PageDecorator],
-  args: { routePath: '/settings/developers/api-keys' },
+  args: { routePath: '/settings/developers' },
  parameters: {
    msw: graphqlMocks,
  },
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeysDetail.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeysDetail.stories.tsx
@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';

-import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
+import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/SettingsDevelopersApiKeyDetail';
 import {
  PageDecorator,
  PageDecoratorArgs,
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeysNew.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/stories/SettingsDevelopersApiKeysNew.stories.tsx
@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';

-import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
+import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/SettingsDevelopersApiKeysNew';
 import {
  PageDecorator,
  PageDecoratorArgs,
--- a/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopersWebhooks.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/stories/SettingsDevelopersWebhooks.stories.tsx
@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/SettingsDevelopersWebhooks';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooks',
+  component: SettingsDevelopersWebhooks,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/developers' },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsDevelopersWebhooks>;
+
+export const Default: Story = {
+  play: async () => {
+    await sleep(100);
+  },
+};
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
@ -1,102 +0,0 @@
-import { useState } from 'react';
-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 { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
-import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
-import { formatExpirations } from '@/settings/developers/utils/format-expiration';
-import { IconPlus, IconSettings } from '@/ui/display/icon';
-import { H1Title } from '@/ui/display/typography/components/H1Title';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Button } from '@/ui/input/button/components/Button';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
-
-const StyledContainer = styled.div`
-  height: fit-content;
-`;
-
-const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
-`;
-
-const StyledHeader = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.spacing(8)};
-`;
-
-const StyledH1Title = styled(H1Title)`
-  margin-bottom: 0;
-`;
-
-export const SettingsDevelopersApiKeys = () => {
-  const navigate = useNavigate();
-
-  const [apiKeys, setApiKeys] = useState<Array<ApiFieldItem>>([]);
-
-  useFindManyRecords({
-    objectNameSingular: CoreObjectNameSingular.ApiKey,
-    filter: { revokedAt: { is: 'NULL' } },
-    orderBy: {},
-    onCompleted: (data) => {
-      setApiKeys(
-        formatExpirations(
-          data.edges.map((apiKey) => ({
-            id: apiKey.node.id,
-            name: apiKey.node.name,
-            expiresAt: apiKey.node.expiresAt,
-          })),
-        ),
-      );
-    },
-  });
-
-  return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer>
-        <StyledContainer>
-          <StyledHeader>
-            <StyledH1Title title="APIs" />
-            <Button
-              Icon={IconPlus}
-              title="Create Key"
-              accent="blue"
-              size="small"
-              onClick={() => {
-                navigate('/settings/developers/api-keys/new');
-              }}
-            />
-          </StyledHeader>
-          <H2Title
-            title="Active Keys"
-            description="Active APIs keys created by you or your team"
-          />
-          <Table>
-            <StyledTableRow>
-              <TableHeader>Name</TableHeader>
-              <TableHeader>Type</TableHeader>
-              <TableHeader>Expiration</TableHeader>
-              <TableHeader></TableHeader>
-            </StyledTableRow>
-            {apiKeys.map((fieldItem) => (
-              <SettingsApiKeysFieldItemTableRow
-                key={fieldItem.id}
-                fieldItem={fieldItem}
-                onClick={() => {
-                  navigate(`/settings/developers/api-keys/${fieldItem.id}`);
-                }}
-              />
-            ))}
-          </Table>
-        </StyledContainer>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
-  );
-};
--- a/packages/twenty-server/src/core/api-rest/api-rest-query-builder/api-rest-query-builder.factory.ts
+++ b/packages/twenty-server/src/core/api-rest/api-rest-query-builder/api-rest-query-builder.factory.ts
@ -47,7 +47,7 @@ export class ApiRestQueryBuilderFactory {

    if (!objectMetadataItems.length) {
      throw new BadRequestException(
-        `No object was found for the workspace associated with this API key. You may generate a new one here ${this.environmentService.getFrontBaseUrl()}/settings/developers/api-keys`,
+        `No object was found for the workspace associated with this API key. You may generate a new one here ${this.environmentService.getFrontBaseUrl()}/settings/developers`,
      );
    }

--- a/packages/twenty-website/src/app/components/PlaygroundTokenForm.tsx
+++ b/packages/twenty-website/src/app/components/PlaygroundTokenForm.tsx
@ -158,7 +158,7 @@ const TokenForm = ({
        <Form>
          <label>
            To load your playground schema,{' '}
-            <StyledLink href="https://app.twenty.com/settings/developers/api-keys">
+            <StyledLink href="https://app.twenty.com/settings/developers">
              generate an API key
            </StyledLink>{' '}
            and paste it here:
--- a/packages/twenty-zapier/src/authentication.ts
+++ b/packages/twenty-zapier/src/authentication.ts
@ -1,4 +1,5 @@
 import { Bundle, ZObject } from 'zapier-platform-core';
+
 import requestDb from './utils/requestDb';

 const testAuthentication = async (z: ZObject, bundle: Bundle) => {
@ -20,7 +21,7 @@ export default {
      label: 'Api Key',
      type: 'string',
      helpText:
-        'Create the api-keys key in [your twenty workspace](https://app.twenty.com/settings/developers/api-keys)',
+        'Create an API key in [your twenty workspace](https://app.twenty.com/settings/developers)',
    },
  ],
  connectionLabel: '{{data.currentWorkspace.displayName}}',