3272 add a page to create and edit webhook (#3859)

* Reorganize files

* Add new webhook form

* Reorganize files

* Add Webhook update

* Fix paths

* Code review returns

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

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
+import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
 import { IconChevronRight } from '@/ui/display/icon';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';

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

@@ -2,9 +2,8 @@ import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { WebhookFieldItem } from '@/settings/developers/types/WebhookFieldItem';
+import { WebhookFieldItem } from '@/settings/developers/types/webhook/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';
 
@@ -36,18 +35,14 @@ export const SettingsDevelopersWebhookTableRow = ({
 }) => {
   const theme = useTheme();
 
-  const soon = true; // Temporarily disabled while awaiting the development of the feature.
-  const onClickAction = !soon ? () => onClick() : undefined;
-
   return (
-    <StyledApisFieldTableRow onClick={onClickAction}>
+    <StyledApisFieldTableRow onClick={onClick}>
       <StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
       <StyledIconTableCell>
         <StyledIconChevronRight
           size={theme.icon.size.md}
           stroke={theme.icon.stroke.sm}
         />
-        {soon && <SoonPill />}
       </StyledIconTableCell>
     </StyledApisFieldTableRow>
   );

packages/twenty-front/src/modules/settings/developers/types/webhook/Webhook.ts

@@ -0,0 +1,5 @@
+export type Webhook = {
+  id: string;
+  targetUrl: string;
+  operation: string;
+};

packages/twenty-front/src/modules/settings/developers/utils/format-expiration.ts

@@ -1,5 +1,5 @@
-import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
-import { ApiKey } from '@/settings/developers/types/ApiKey';
+import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
+import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { beautifyDateDiff } from '~/utils/date-utils';
 
 export const formatExpiration = (

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -17,4 +17,6 @@ export enum SettingsPath {
   Developers = '',
   DevelopersNewApiKey = 'api-keys/new',
   DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
+  DevelopersNewWebhook = 'webhooks/new',
+  DevelopersNewWebhookDetail = 'webhooks/:webhookId',
 }