refactor: Webhooks (#12487)
Closes #12303 ### What’s Changed - Replace auto‐save with explicit Save / Cancel Webhook forms now use manual “Save” and “Cancel” buttons instead of the old debounced auto‐save/update. - Separate “New” and “Detail” routes Two dedicated paths `/settings/webhooks/new` for creation and /`settings/webhooks/:webhookId` for editing, making the UX clearer. - URL hint & normalization If a user omits the http(s):// scheme, we display a “Will be saved as https://…” hint and automatically default to HTTPS. - Centralized validation with Zod Introduced a `webhookFormSchema` for client‐side URL, operations, and secret validation. - Storybook coverage Added stories for both “New Webhook” and “Webhook Detail” - Unit tests Added tests for the new `useWebhookForm` hook
This commit is contained in:
nitin
+352
@@ -0,0 +1,352 @@
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { ReactNode } from 'react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { WebhookFormMode } from '@/settings/developers/constants/WebhookFormMode';
|
||||
import { useWebhookForm } from '../useWebhookForm';
|
||||
|
||||
// Mock dependencies
|
||||
const mockNavigateSettings = jest.fn();
|
||||
const mockEnqueueSnackBar = jest.fn();
|
||||
const mockCreateOneRecord = jest.fn();
|
||||
const mockUpdateOneRecord = jest.fn();
|
||||
const mockDeleteOneRecord = jest.fn();
|
||||
|
||||
jest.mock('~/hooks/useNavigateSettings', () => ({
|
||||
useNavigateSettings: () => mockNavigateSettings,
|
||||
}));
|
||||
|
||||
jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar', () => ({
|
||||
useSnackBar: () => ({
|
||||
enqueueSnackBar: mockEnqueueSnackBar,
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/object-record/hooks/useCreateOneRecord', () => ({
|
||||
useCreateOneRecord: () => ({
|
||||
createOneRecord: mockCreateOneRecord,
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/object-record/hooks/useUpdateOneRecord', () => ({
|
||||
useUpdateOneRecord: () => ({
|
||||
updateOneRecord: mockUpdateOneRecord,
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/object-record/hooks/useDeleteOneRecord', () => ({
|
||||
useDeleteOneRecord: () => ({
|
||||
deleteOneRecord: mockDeleteOneRecord,
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/object-record/hooks/useFindOneRecord', () => ({
|
||||
useFindOneRecord: () => ({
|
||||
loading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
const Wrapper = ({ children }: { children: ReactNode }) => (
|
||||
<MockedProvider addTypename={false}>
|
||||
<RecoilRoot>
|
||||
<MemoryRouter>{children}</MemoryRouter>
|
||||
</RecoilRoot>
|
||||
</MockedProvider>
|
||||
);
|
||||
|
||||
describe('useWebhookForm', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Create Mode', () => {
|
||||
it('should initialize with default values in create mode', () => {
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
expect(result.current.isCreationMode).toBe(true);
|
||||
expect(result.current.formConfig.getValues()).toEqual({
|
||||
targetUrl: '',
|
||||
description: '',
|
||||
operations: [{ object: '*', action: '*' }],
|
||||
secret: '',
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle webhook creation successfully', async () => {
|
||||
const mockCreatedWebhook = {
|
||||
id: 'new-webhook-id',
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
};
|
||||
mockCreateOneRecord.mockResolvedValue(mockCreatedWebhook);
|
||||
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
const formData = {
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: [{ object: 'person', action: 'created' }],
|
||||
secret: 'test-secret',
|
||||
};
|
||||
|
||||
await result.current.handleSave(formData);
|
||||
|
||||
expect(mockCreateOneRecord).toHaveBeenCalledWith({
|
||||
id: expect.any(String),
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: ['person.created'],
|
||||
secret: 'test-secret',
|
||||
});
|
||||
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
|
||||
'Webhook https://test.com/webhook created successfully',
|
||||
{ variant: 'success' },
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle creation errors', async () => {
|
||||
const error = new Error('Creation failed');
|
||||
mockCreateOneRecord.mockRejectedValue(error);
|
||||
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
const formData = {
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: [{ object: 'person', action: 'created' }],
|
||||
secret: 'test-secret',
|
||||
};
|
||||
|
||||
await result.current.handleSave(formData);
|
||||
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Creation failed', {
|
||||
variant: 'error',
|
||||
});
|
||||
});
|
||||
|
||||
it('should clean and format operations correctly', async () => {
|
||||
mockCreateOneRecord.mockResolvedValue({ id: 'test-id' });
|
||||
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
const formData = {
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: [
|
||||
{ object: 'person', action: 'created' },
|
||||
{ object: 'person', action: 'created' },
|
||||
{ object: 'company', action: 'updated' },
|
||||
{ object: null, action: 'test' },
|
||||
],
|
||||
secret: 'test-secret',
|
||||
};
|
||||
|
||||
await result.current.handleSave(formData);
|
||||
|
||||
expect(mockCreateOneRecord).toHaveBeenCalledWith({
|
||||
id: expect.any(String),
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: ['person.created', 'company.updated'],
|
||||
secret: 'test-secret',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edit Mode', () => {
|
||||
const webhookId = 'test-webhook-id';
|
||||
|
||||
it('should initialize correctly in edit mode', () => {
|
||||
const { result } = renderHook(
|
||||
() =>
|
||||
useWebhookForm({
|
||||
mode: WebhookFormMode.Edit,
|
||||
webhookId,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
expect(result.current.isCreationMode).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle webhook update successfully', async () => {
|
||||
mockUpdateOneRecord.mockResolvedValue({});
|
||||
|
||||
const { result } = renderHook(
|
||||
() =>
|
||||
useWebhookForm({
|
||||
mode: WebhookFormMode.Edit,
|
||||
webhookId,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
const formData = {
|
||||
targetUrl: 'https://updated.com/webhook',
|
||||
description: 'Updated webhook',
|
||||
operations: [{ object: 'person', action: 'updated' }],
|
||||
secret: 'updated-secret',
|
||||
};
|
||||
|
||||
await result.current.handleSave(formData);
|
||||
|
||||
expect(mockUpdateOneRecord).toHaveBeenCalledWith({
|
||||
idToUpdate: webhookId,
|
||||
updateOneRecordInput: {
|
||||
targetUrl: 'https://updated.com/webhook',
|
||||
description: 'Updated webhook',
|
||||
operations: ['person.updated'],
|
||||
secret: 'updated-secret',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle update errors', async () => {
|
||||
const error = new Error('Update failed');
|
||||
mockUpdateOneRecord.mockRejectedValue(error);
|
||||
|
||||
const { result } = renderHook(
|
||||
() =>
|
||||
useWebhookForm({
|
||||
mode: WebhookFormMode.Edit,
|
||||
webhookId,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
const formData = {
|
||||
targetUrl: 'https://test.com/webhook',
|
||||
description: 'Test webhook',
|
||||
operations: [{ object: 'person', action: 'created' }],
|
||||
secret: 'test-secret',
|
||||
};
|
||||
|
||||
await result.current.handleSave(formData);
|
||||
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Update failed', {
|
||||
variant: 'error',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Operation Management', () => {
|
||||
it('should update operations correctly', () => {
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
result.current.updateOperation(0, 'object', 'person');
|
||||
|
||||
const operations = result.current.formConfig.getValues('operations');
|
||||
expect(operations[0].object).toBe('person');
|
||||
});
|
||||
|
||||
it('should remove operations correctly', () => {
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
result.current.formConfig.setValue('operations', [
|
||||
{ object: 'person', action: 'created' },
|
||||
{ object: 'company', action: 'updated' },
|
||||
]);
|
||||
|
||||
const initialOperations =
|
||||
result.current.formConfig.getValues('operations');
|
||||
const initialCount = initialOperations.length;
|
||||
|
||||
result.current.removeOperation(0);
|
||||
|
||||
const updatedOperations =
|
||||
result.current.formConfig.getValues('operations');
|
||||
expect(updatedOperations.length).toBeLessThanOrEqual(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Webhook Deletion', () => {
|
||||
const webhookId = 'test-webhook-id';
|
||||
|
||||
it('should delete webhook successfully', async () => {
|
||||
mockDeleteOneRecord.mockResolvedValue({});
|
||||
|
||||
const { result } = renderHook(
|
||||
() =>
|
||||
useWebhookForm({
|
||||
mode: WebhookFormMode.Edit,
|
||||
webhookId,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
await result.current.deleteWebhook();
|
||||
|
||||
expect(mockDeleteOneRecord).toHaveBeenCalledWith(webhookId);
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
|
||||
'Webhook deleted successfully',
|
||||
{ variant: 'success' },
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle deletion without webhookId', async () => {
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
await result.current.deleteWebhook();
|
||||
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith(
|
||||
'Webhook ID is required for deletion',
|
||||
{ variant: 'error' },
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle deletion errors', async () => {
|
||||
const error = new Error('Deletion failed');
|
||||
mockDeleteOneRecord.mockRejectedValue(error);
|
||||
|
||||
const { result } = renderHook(
|
||||
() =>
|
||||
useWebhookForm({
|
||||
mode: WebhookFormMode.Edit,
|
||||
webhookId,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
await result.current.deleteWebhook();
|
||||
|
||||
expect(mockEnqueueSnackBar).toHaveBeenCalledWith('Deletion failed', {
|
||||
variant: 'error',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Form Validation', () => {
|
||||
it('should validate canSave property', () => {
|
||||
const { result } = renderHook(
|
||||
() => useWebhookForm({ mode: WebhookFormMode.Create }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
// Initially canSave should be false (form is not valid)
|
||||
expect(result.current.canSave).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,256 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
|
||||
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { WebhookFormMode } from '@/settings/developers/constants/WebhookFormMode';
|
||||
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
|
||||
import {
|
||||
webhookFormSchema,
|
||||
WebhookFormValues,
|
||||
} from '@/settings/developers/validation-schemas/webhookFormSchema';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { v4 } from 'uuid';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
|
||||
import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
|
||||
|
||||
type UseWebhookFormProps = {
|
||||
webhookId?: string;
|
||||
mode: WebhookFormMode;
|
||||
};
|
||||
|
||||
export const useWebhookForm = ({ webhookId, mode }: UseWebhookFormProps) => {
|
||||
const navigate = useNavigateSettings();
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
|
||||
const isCreationMode = mode === WebhookFormMode.Create;
|
||||
|
||||
const { createOneRecord } = useCreateOneRecord<Webhook>({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const { updateOneRecord } = useUpdateOneRecord<Webhook>({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const { deleteOneRecord: deleteOneWebhook } = useDeleteOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const formConfig = useForm<WebhookFormValues>({
|
||||
mode: isCreationMode ? 'onSubmit' : 'onTouched',
|
||||
resolver: zodResolver(webhookFormSchema),
|
||||
defaultValues: {
|
||||
targetUrl: '',
|
||||
description: '',
|
||||
operations: [
|
||||
{
|
||||
object: '*',
|
||||
action: '*',
|
||||
},
|
||||
],
|
||||
secret: '',
|
||||
},
|
||||
});
|
||||
|
||||
const addEmptyOperationIfNecessary = (
|
||||
newOperations: WebhookOperationType[],
|
||||
): WebhookOperationType[] => {
|
||||
if (
|
||||
!newOperations.some((op) => op.object === '*' && op.action === '*') &&
|
||||
!newOperations.some((op) => op.object === null)
|
||||
) {
|
||||
return [...newOperations, WEBHOOK_EMPTY_OPERATION];
|
||||
}
|
||||
return newOperations;
|
||||
};
|
||||
|
||||
const cleanAndFormatOperations = (operations: WebhookOperationType[]) => {
|
||||
return Array.from(
|
||||
new Set(
|
||||
operations
|
||||
.filter((op) => isDefined(op.object) && isDefined(op.action))
|
||||
.map((op) => `${op.object}.${op.action}`),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const { loading, error } = useFindOneRecord({
|
||||
skip: isCreationMode,
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
objectRecordId: webhookId || '',
|
||||
onCompleted: (data) => {
|
||||
if (!data) return;
|
||||
|
||||
const baseOperations = data?.operations
|
||||
? data.operations.map((op: string) => {
|
||||
const [object, action] = op.split('.');
|
||||
return { object, action };
|
||||
})
|
||||
: data?.operation
|
||||
? [
|
||||
{
|
||||
object: data.operation.split('.')[0],
|
||||
action: data.operation.split('.')[1],
|
||||
},
|
||||
]
|
||||
: [];
|
||||
const operations = addEmptyOperationIfNecessary(baseOperations);
|
||||
|
||||
formConfig.reset({
|
||||
targetUrl: data.targetUrl || '',
|
||||
description: data.description || '',
|
||||
operations,
|
||||
secret: data.secret || '',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { isDirty, isValid, isSubmitting } = formConfig.formState;
|
||||
const canSave = isCreationMode
|
||||
? isValid && !isSubmitting
|
||||
: isDirty && isValid && !isSubmitting;
|
||||
|
||||
const handleCreate = async (formValues: WebhookFormValues) => {
|
||||
try {
|
||||
const cleanedOperations = cleanAndFormatOperations(formValues.operations);
|
||||
|
||||
const webhookData = {
|
||||
targetUrl: formValues.targetUrl.trim(),
|
||||
operations: cleanedOperations,
|
||||
description: formValues.description,
|
||||
secret: formValues.secret,
|
||||
};
|
||||
|
||||
const createdWebhook = await createOneRecord({
|
||||
id: v4(),
|
||||
...webhookData,
|
||||
});
|
||||
|
||||
enqueueSnackBar(
|
||||
`Webhook ${createdWebhook?.targetUrl} created successfully`,
|
||||
{
|
||||
variant: SnackBarVariant.Success,
|
||||
},
|
||||
);
|
||||
|
||||
navigate(
|
||||
createdWebhook ? SettingsPath.WebhookDetail : SettingsPath.Webhooks,
|
||||
createdWebhook ? { webhookId: createdWebhook.id } : undefined,
|
||||
);
|
||||
} catch (error) {
|
||||
enqueueSnackBar((error as Error).message, {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (formValues: WebhookFormValues) => {
|
||||
if (!webhookId) {
|
||||
enqueueSnackBar('Webhook ID is required for updates', {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const cleanedOperations = cleanAndFormatOperations(formValues.operations);
|
||||
|
||||
const webhookData = {
|
||||
targetUrl: formValues.targetUrl.trim(),
|
||||
operations: cleanedOperations,
|
||||
description: formValues.description,
|
||||
secret: formValues.secret,
|
||||
};
|
||||
|
||||
await updateOneRecord({
|
||||
idToUpdate: webhookId,
|
||||
updateOneRecordInput: webhookData,
|
||||
});
|
||||
|
||||
formConfig.reset(formValues);
|
||||
|
||||
enqueueSnackBar(`Webhook ${webhookData.targetUrl} updated successfully`, {
|
||||
variant: SnackBarVariant.Success,
|
||||
});
|
||||
} catch (error) {
|
||||
enqueueSnackBar((error as Error).message, {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = isCreationMode ? handleCreate : handleUpdate;
|
||||
|
||||
const updateOperation = (
|
||||
index: number,
|
||||
field: 'object' | 'action',
|
||||
value: string | null,
|
||||
) => {
|
||||
const currentOperations = formConfig.getValues('operations');
|
||||
const newOperations = [...currentOperations];
|
||||
|
||||
newOperations[index] = {
|
||||
...newOperations[index],
|
||||
[field]: value,
|
||||
};
|
||||
|
||||
formConfig.setValue(
|
||||
'operations',
|
||||
addEmptyOperationIfNecessary(newOperations),
|
||||
{ shouldDirty: true, shouldValidate: true },
|
||||
);
|
||||
};
|
||||
|
||||
const removeOperation = (index: number) => {
|
||||
const currentOperations = formConfig.getValues('operations');
|
||||
const newOperations = currentOperations.filter((_, i) => i !== index);
|
||||
|
||||
formConfig.setValue(
|
||||
'operations',
|
||||
addEmptyOperationIfNecessary(newOperations),
|
||||
{ shouldDirty: true, shouldValidate: true },
|
||||
);
|
||||
};
|
||||
|
||||
const deleteWebhook = async () => {
|
||||
if (!webhookId) {
|
||||
enqueueSnackBar('Webhook ID is required for deletion', {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteOneWebhook(webhookId);
|
||||
enqueueSnackBar('Webhook deleted successfully', {
|
||||
variant: SnackBarVariant.Success,
|
||||
});
|
||||
|
||||
navigate(SettingsPath.Webhooks);
|
||||
} catch (error) {
|
||||
enqueueSnackBar((error as Error).message, {
|
||||
variant: SnackBarVariant.Error,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
formConfig,
|
||||
loading,
|
||||
canSave,
|
||||
handleSave,
|
||||
updateOperation,
|
||||
removeOperation,
|
||||
deleteWebhook,
|
||||
isCreationMode,
|
||||
error,
|
||||
};
|
||||
};
|
||||
@@ -1,218 +0,0 @@
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
|
||||
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { useState } from 'react';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
||||
import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
|
||||
import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
|
||||
import {
|
||||
getUrlHostnameOrThrow,
|
||||
isDefined,
|
||||
isValidUrl,
|
||||
} from 'twenty-shared/utils';
|
||||
|
||||
type WebhookFormData = {
|
||||
targetUrl: string;
|
||||
description?: string;
|
||||
operations: WebhookOperationType[];
|
||||
secret?: string;
|
||||
};
|
||||
|
||||
export const useWebhookUpdateForm = ({
|
||||
webhookId,
|
||||
isCreationMode,
|
||||
}: {
|
||||
webhookId: string;
|
||||
isCreationMode: boolean;
|
||||
}) => {
|
||||
const navigate = useNavigateSettings();
|
||||
|
||||
const [isCreated, setIsCreated] = useState(!isCreationMode);
|
||||
const [loading, setLoading] = useState(!isCreationMode);
|
||||
const [title, setTitle] = useState(isCreationMode ? 'New Webhook' : '');
|
||||
|
||||
const [formData, setFormData] = useState<WebhookFormData>({
|
||||
targetUrl: '',
|
||||
description: '',
|
||||
operations: [
|
||||
{
|
||||
object: '*',
|
||||
action: '*',
|
||||
},
|
||||
],
|
||||
secret: '',
|
||||
});
|
||||
|
||||
const [isTargetUrlValid, setIsTargetUrlValid] = useState(true);
|
||||
|
||||
const { updateOneRecord } = useUpdateOneRecord<Webhook>({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const { createOneRecord } = useCreateOneRecord<Webhook>({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const addEmptyOperationIfNecessary = (
|
||||
newOperations: WebhookOperationType[],
|
||||
) => {
|
||||
if (
|
||||
!newOperations.some((op) => op.object === '*' && op.action === '*') &&
|
||||
!newOperations.some((op) => op.object === null)
|
||||
) {
|
||||
return [...newOperations, WEBHOOK_EMPTY_OPERATION];
|
||||
}
|
||||
return newOperations;
|
||||
};
|
||||
|
||||
const cleanAndFormatOperations = (operations: WebhookOperationType[]) => {
|
||||
return Array.from(
|
||||
new Set(
|
||||
operations
|
||||
.filter((op) => isDefined(op.object) && isDefined(op.action))
|
||||
.map((op) => `${op.object}.${op.action}`),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const handleSave = useDebouncedCallback(async () => {
|
||||
const cleanedOperations = cleanAndFormatOperations(formData.operations);
|
||||
|
||||
const webhookData = {
|
||||
...(isTargetUrlValid && { targetUrl: formData.targetUrl.trim() }),
|
||||
operations: cleanedOperations,
|
||||
description: formData.description,
|
||||
secret: formData.secret,
|
||||
};
|
||||
|
||||
if (!isCreated) {
|
||||
await createOneRecord({ id: webhookId, ...webhookData });
|
||||
setIsCreated(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await updateOneRecord({
|
||||
idToUpdate: webhookId,
|
||||
updateOneRecordInput: {
|
||||
...(isTargetUrlValid && { targetUrl: formData.targetUrl.trim() }),
|
||||
operations: cleanedOperations,
|
||||
description: formData.description,
|
||||
secret: formData.secret,
|
||||
},
|
||||
});
|
||||
}, 300);
|
||||
|
||||
const isFormValidAndSetErrors = () => {
|
||||
const { targetUrl } = formData;
|
||||
|
||||
if (isDefined(targetUrl)) {
|
||||
const trimmedUrl = targetUrl.trim();
|
||||
const isValid = isValidUrl(trimmedUrl);
|
||||
|
||||
if (!isValid) {
|
||||
setIsTargetUrlValid(false);
|
||||
return false;
|
||||
}
|
||||
|
||||
setIsTargetUrlValid(true);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const updateWebhook = async (data: Partial<WebhookFormData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }));
|
||||
|
||||
if (!isFormValidAndSetErrors()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDefined(data?.targetUrl)) {
|
||||
setTitle(getUrlHostnameOrThrow(data.targetUrl) || 'New Webhook');
|
||||
}
|
||||
|
||||
await handleSave();
|
||||
};
|
||||
|
||||
const updateOperation = async (
|
||||
index: number,
|
||||
field: 'object' | 'action',
|
||||
value: string | null,
|
||||
) => {
|
||||
const newOperations = [...formData.operations];
|
||||
|
||||
newOperations[index] = {
|
||||
...newOperations[index],
|
||||
[field]: value,
|
||||
};
|
||||
|
||||
await updateWebhook({
|
||||
operations: addEmptyOperationIfNecessary(newOperations),
|
||||
});
|
||||
};
|
||||
|
||||
const removeOperation = async (index: number) => {
|
||||
const newOperations = formData.operations.filter((_, i) => i !== index);
|
||||
await updateWebhook({
|
||||
operations: addEmptyOperationIfNecessary(newOperations),
|
||||
});
|
||||
};
|
||||
|
||||
const { deleteOneRecord: deleteOneWebhook } = useDeleteOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
});
|
||||
|
||||
const deleteWebhook = async () => {
|
||||
await deleteOneWebhook(webhookId);
|
||||
navigate(SettingsPath.Webhooks);
|
||||
};
|
||||
|
||||
useFindOneRecord({
|
||||
skip: isCreationMode,
|
||||
objectNameSingular: CoreObjectNameSingular.Webhook,
|
||||
objectRecordId: webhookId,
|
||||
onCompleted: (data) => {
|
||||
const baseOperations = data?.operations
|
||||
? data.operations.map((op: string) => {
|
||||
const [object, action] = op.split('.');
|
||||
return { object, action };
|
||||
})
|
||||
: data?.operation
|
||||
? [
|
||||
{
|
||||
object: data.operation.split('.')[0],
|
||||
action: data.operation.split('.')[1],
|
||||
},
|
||||
]
|
||||
: [];
|
||||
const operations = addEmptyOperationIfNecessary(baseOperations);
|
||||
setFormData({
|
||||
targetUrl: data.targetUrl,
|
||||
description: data.description,
|
||||
operations,
|
||||
secret: data.secret,
|
||||
});
|
||||
if (isValidUrl(data.targetUrl)) {
|
||||
setTitle(getUrlHostnameOrThrow(data.targetUrl));
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
formData,
|
||||
title,
|
||||
isTargetUrlValid,
|
||||
updateWebhook,
|
||||
updateOperation,
|
||||
removeOperation,
|
||||
deleteWebhook,
|
||||
loading,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user