Webhook wip

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx

@@ -1,5 +1,5 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import omit from 'lodash.omit';
+import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';

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

@@ -2,19 +2,24 @@ import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { H2Title, IconSettings, IconTrash } from 'twenty-ui';
 
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 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 { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { Webhook } from '@/settings/developers/types/webhook/Webhook';
 import { Button } from '@/ui/input/button/components/Button';
+import { Select } from '@/ui/input/components/Select';
 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';
 
 export const SettingsDevelopersWebhooksDetail = () => {
+  const { objectMetadataItems } = useObjectMetadataItems();
   const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
     useState(false);
   const navigate = useNavigate();
@@ -30,6 +35,29 @@ export const SettingsDevelopersWebhooksDetail = () => {
     deleteOneWebhook(webhookId);
     navigate('/settings/developers');
   };
+
+  const objectFilter = webhookData?.operation.split('.')[1];
+  const fieldTypeOptions = [
+    { value: '*', label: 'All Objects' },
+    ...objectMetadataItems.map((item) => ({
+      value: item.nameSingular,
+      label: item.labelSingular,
+    })),
+  ];
+
+  const { updateOneRecord } = useUpdateOneRecord<Webhook>({
+    objectNameSingular: CoreObjectNameSingular.Webhook,
+  });
+
+  const onObjectFilterChange = (filterValue: string) => {
+    updateOneRecord({
+      idToUpdate: webhookId,
+      updateOneRecordInput: {
+        operation: `*.${filterValue}`,
+      },
+    });
+  };
+
   return (
     <>
       {webhookData?.targetUrl && (
@@ -55,6 +83,19 @@ export const SettingsDevelopersWebhooksDetail = () => {
                 fullWidth
               />
             </Section>
+            <Section>
+              <H2Title
+                title="Filters"
+                description="Select the event you wish to send to this endpoint"
+              />
+              <Select
+                fullWidth
+                dropdownId="object-webhook-type-select"
+                value={objectFilter}
+                onChange={onObjectFilterChange}
+                options={fieldTypeOptions}
+              />
+            </Section>
             <Section>
               <H2Title
                 title="Danger zone"