Add description for Developers/webhook page (#6327)

- Add optional description field to webhook page in developer settings.

Fix https://github.com/twentyhq/twenty/issues/6236

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>

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

@@ -1,6 +1,7 @@
 export type Webhook = {
   id: string;
   targetUrl: string;
+  description?: string;
   operation: string;
   __typename: 'Webhook';
 };

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

@@ -27,6 +27,7 @@ const meta: Meta<PageDecoratorArgs> = {
                 id: '1',
                 createdAt: '2021-08-27T12:00:00Z',
                 targetUrl: 'https://example.com/webhook',
+                description: 'A Sample Description',
                 updatedAt: '2021-08-27T12:00:00Z',
                 operation: 'create',
                 __typename: 'Webhook',

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

@@ -1,24 +1,34 @@
-import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconSettings, IconTrash } from 'twenty-ui';
-
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
+import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 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 { useState } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { H2Title, IconSettings, IconTrash } from 'twenty-ui';
+
+type SettingsDevelopersWebhooksDetailForm = {
+  description?: string;
+};
 
 export const SettingsDevelopersWebhooksDetail = () => {
   const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
     useState(false);
   const navigate = useNavigate();
   const { webhookId = '' } = useParams();
+  const { enqueueSnackBar } = useSnackBar();
   const { record: webhookData } = useFindOneRecord({
     objectNameSingular: CoreObjectNameSingular.Webhook,
     objectRecordId: webhookId,
@@ -26,12 +36,37 @@ export const SettingsDevelopersWebhooksDetail = () => {
   const { deleteOneRecord: deleteOneWebhook } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.Webhook,
   });
+  const { updateOneRecord } = useUpdateOneRecord({
+    objectNameSingular: CoreObjectNameSingular.Webhook,
+  });
   const deleteWebhook = () => {
     deleteOneWebhook(webhookId);
     navigate('/settings/developers');
   };
+  const formConfig = useForm<SettingsDevelopersWebhooksDetailForm>();
+
+  const { isDirty, isValid, isSubmitting } = formConfig.formState;
+  const canSave = isDirty && isValid && !isSubmitting;
+
+  const handleSave = async (
+    formValues: SettingsDevelopersWebhooksDetailForm,
+  ) => {
+    try {
+      await updateOneRecord({
+        idToUpdate: webhookId,
+        updateOneRecordInput: formValues,
+      });
+      navigate('/settings/developers');
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  };
+
   return (
-    <>
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formConfig}>
       {webhookData?.targetUrl && (
         <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
           <SettingsPageContainer>
@@ -42,6 +77,11 @@ export const SettingsDevelopersWebhooksDetail = () => {
                   { children: 'Webhook' },
                 ]}
               />
+              <SaveAndCancelButtons
+                onCancel={() => navigate(`/settings/developers`)}
+                onSave={formConfig.handleSubmit(handleSave)}
+                isSaveDisabled={!canSave}
+              />
             </SettingsHeaderContainer>
             <Section>
               <H2Title
@@ -55,6 +95,25 @@ export const SettingsDevelopersWebhooksDetail = () => {
                 fullWidth
               />
             </Section>
+            <Section>
+              <H2Title
+                title="Description"
+                description="An optional description"
+              />
+              <Controller
+                name="description"
+                control={formConfig.control}
+                defaultValue={webhookData?.description ?? null}
+                render={({ field: { onChange, value } }) => (
+                  <TextArea
+                    placeholder="Write a description"
+                    minRows={4}
+                    value={value ?? undefined}
+                    onChange={(nextValue) => onChange(nextValue ?? null)}
+                  />
+                )}
+              />
+            </Section>
             <Section>
               <H2Title
                 title="Danger zone"
@@ -86,6 +145,6 @@ export const SettingsDevelopersWebhooksDetail = () => {
           </SettingsPageContainer>
         </SubMenuTopBarContainer>
       )}
-    </>
+    </FormProvider>
   );
 };