diff --git a/packages/twenty-front/src/modules/settings/developers/types/webhook/Webhook.ts b/packages/twenty-front/src/modules/settings/developers/types/webhook/Webhook.ts index 5eefd25fb0..fea0808b1c 100644 --- a/packages/twenty-front/src/modules/settings/developers/types/webhook/Webhook.ts +++ b/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'; }; diff --git a/packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx b/packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx index b3b387a922..ec430fcf30 100644 --- a/packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx +++ b/packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx @@ -27,6 +27,7 @@ const meta: Meta = { 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', diff --git a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx index a55a2dd4cd..74cf5c0b20 100644 --- a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx +++ b/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(); + + 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 + {webhookData?.targetUrl && ( @@ -42,6 +77,11 @@ export const SettingsDevelopersWebhooksDetail = () => { { children: 'Webhook' }, ]} /> + navigate(`/settings/developers`)} + onSave={formConfig.handleSubmit(handleSave)} + isSaveDisabled={!canSave} + />
{ fullWidth />
+
+ + ( +