admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Webhook follow up (#10124)

Browse Source 
- fix webhook creation
- fix pointer
This commit is contained in:
martmull
2025-02-11 17:30:11 +01:00
committed by GitHub
parent 5252b22b64
commit 83bf2d1739
13 changed files with 184 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/object-record/hooks/useCreateManyRecords.ts
View File

@ -26,7 +26,7 @@ type PartialObjectRecordWithId = Partial<ObjectRecord> & {
type useCreateManyRecordsProps = {
objectNameSingular: string;
recordGqlFields?: RecordGqlOperationGqlRecordFields;
skipPostOptmisticEffect?: boolean;
skipPostOptimisticEffect?: boolean;
shouldMatchRootQueryFilter?: boolean;
};
@ -35,7 +35,7 @@ export const useCreateManyRecords = <
>({
objectNameSingular,
recordGqlFields,
skipPostOptmisticEffect = false,
skipPostOptimisticEffect = false,
shouldMatchRootQueryFilter,
}: useCreateManyRecordsProps) => {
const apolloClient = useApolloClient();
@ -135,7 +135,7 @@ export const useCreateManyRecords = <
update: (cache, { data }) => {
const records = data?.[mutationResponseField];
if (!isDefined(records?.length) || skipPostOptmisticEffect) return;
if (!isDefined(records?.length) || skipPostOptimisticEffect) return;
triggerCreateRecordsOptimisticEffect({
cache,

8
packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts
View File

@ -23,7 +23,7 @@ import { isDefined } from 'twenty-shared';
type useCreateOneRecordProps = {
objectNameSingular: string;
recordGqlFields?: RecordGqlOperationGqlRecordFields;
skipPostOptmisticEffect?: boolean;
skipPostOptimisticEffect?: boolean;
shouldMatchRootQueryFilter?: boolean;
};
@ -32,7 +32,7 @@ export const useCreateOneRecord = <
>({
objectNameSingular,
recordGqlFields,
skipPostOptmisticEffect = false,
skipPostOptimisticEffect = false,
shouldMatchRootQueryFilter,
}: useCreateOneRecordProps) => {
const apolloClient = useApolloClient();
@ -95,7 +95,7 @@ export const useCreateOneRecord = <
computeReferences: false,
});
if (optimisticRecordNode !== null) {
if (skipPostOptimisticEffect === false && optimisticRecordNode !== null) {
triggerCreateRecordsOptimisticEffect({
cache: apolloClient.cache,
objectMetadataItem,
@ -117,7 +117,7 @@ export const useCreateOneRecord = <
},
update: (cache, { data }) => {
const record = data?.[mutationResponseField];
if (skipPostOptmisticEffect === false && isDefined(record)) {
if (skipPostOptimisticEffect === false && isDefined(record)) {
triggerCreateRecordsOptimisticEffect({
cache,
objectMetadataItem,

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx
View File

@ -139,7 +139,7 @@ export const FormNumberFieldInput = ({
</FormFieldInputRowContainer>
{hint ? <InputHint>{hint}</InputHint> : null}
{error && <InputErrorHelper>{error}</InputErrorHelper>}
<InputErrorHelper>{error}</InputErrorHelper>
</FormFieldInputContainer>
);
};

2
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
View File

@ -91,7 +91,7 @@ export const FormTextFieldInput = ({
) : null}
</FormFieldInputRowContainer>
{hint && <InputHint>{hint}</InputHint>}
{error && <InputErrorHelper>{error}</InputErrorHelper>}
<InputErrorHelper>{error}</InputErrorHelper>
</FormFieldInputContainer>
);
};

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

@ -5,6 +5,7 @@ import { IconChevronRight } from 'twenty-ui';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { getUrlHostname } from '~/utils/url/getUrlHostname';
export const StyledApisFieldTableRow = styled(TableRow)`
grid-template-columns: 1fr 28px;
@ -37,7 +38,9 @@ export const SettingsDevelopersWebhookTableRow = ({
return (
<StyledApisFieldTableRow to={to}>
<StyledUrlTableCell>{fieldItem.targetUrl}</StyledUrlTableCell>
<StyledUrlTableCell>
{getUrlHostname(fieldItem.targetUrl, { keepPath: true })}
</StyledUrlTableCell>
<StyledIconTableCell>
<StyledIconChevronRight
size={theme.icon.size.md}

100
packages/twenty-front/src/modules/settings/developers/hooks/useWebhookUpdateForm.ts
View File

@ -2,6 +2,7 @@ import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useState } from 'react';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { useDebouncedCallback } from 'use-debounce';
import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
@ -11,6 +12,7 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { SettingsPath } from '@/types/SettingsPath';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { isValidUrl } from '~/utils/url/isValidUrl';
import { getUrlHostname } from '~/utils/url/getUrlHostname';
type WebhookFormData = {
targetUrl: string;
@ -19,10 +21,18 @@ type WebhookFormData = {
secret?: string;
};
export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
export const useWebhookUpdateForm = ({
webhookId,
isCreationMode,
}: {
webhookId: string;
isCreationMode: boolean;
}) => {
const navigate = useNavigateSettings();
const [loading, setLoading] = useState(true);
const [isCreated, setIsCreated] = useState(!isCreationMode);
const [loading, setLoading] = useState(!isCreationMode);
const [title, setTitle] = useState(isCreationMode ? 'New Webhook' : '');
const [formData, setFormData] = useState<WebhookFormData>({
targetUrl: '',
@ -37,6 +47,10 @@ export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
objectNameSingular: CoreObjectNameSingular.Webhook,
});
const { createOneRecord } = useCreateOneRecord<Webhook>({
objectNameSingular: CoreObjectNameSingular.Webhook,
});
const addEmptyOperationIfNecessary = (
newOperations: WebhookOperationType[],
) => {
@ -49,34 +63,6 @@ export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
return newOperations;
};
useFindOneRecord({
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,
});
setLoading(false);
},
});
const cleanAndFormatOperations = (operations: WebhookOperationType[]) => {
return Array.from(
new Set(
@ -90,6 +76,19 @@ export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
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: {
@ -104,7 +103,13 @@ export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
const validateData = (data: Partial<WebhookFormData>) => {
if (isDefined(data?.targetUrl)) {
const trimmedUrl = data.targetUrl.trim();
setIsTargetUrlValid(isValidUrl(trimmedUrl));
const isTargetUrlValid = isValidUrl(trimmedUrl);
setIsTargetUrlValid(isTargetUrlValid);
if (isTargetUrlValid) {
setTitle(
getUrlHostname(trimmedUrl, { keepPath: true }) || 'New Webhook',
);
}
}
};
@ -147,8 +152,41 @@ export const useWebhookUpdateForm = ({ webhookId }: { webhookId: string }) => {
navigate(SettingsPath.Developers);
};
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,
});
setTitle(
getUrlHostname(data.targetUrl, { keepPath: true }) || 'New Webhook',
);
setLoading(false);
},
});
return {
formData,
title,
isTargetUrlValid,
updateWebhook,
updateOperation,

17
packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
View File

@ -4,12 +4,25 @@ import styled from '@emotion/styled';
const StyledInputErrorHelper = styled.div`
color: ${({ theme }) => theme.color.red};
font-size: ${({ theme }) => theme.font.size.xs};
position: absolute;
`;
const StyledErrorContainer = styled.div`
margin-top: ${({ theme }) => theme.spacing(1)};
`;
export const InputErrorHelper = ({
children,
isVisible = true,
}: {
children: React.ReactNode;
children?: React.ReactNode;
isVisible?: boolean;
}) => (
<StyledInputErrorHelper aria-live="polite">{children}</StyledInputErrorHelper>
<StyledErrorContainer>
{children && isVisible && (
<StyledInputErrorHelper aria-live="polite">
{children}
</StyledInputErrorHelper>
)}
</StyledErrorContainer>
);

12
packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
View File

@ -76,18 +76,14 @@ const StyledInput = styled.input<
}
&:focus {
${({ theme }) => {
${({ theme, error }) => {
return `
border-color: ${theme.color.blue};
border-color: ${error ? theme.border.color.danger : theme.color.blue};
`;
}};
}
`;
const StyledErrorHelper = styled(InputErrorHelper)`
padding: ${({ theme }) => theme.spacing(1)};
`;
const StyledLeftIconContainer = styled.div<{ sizeVariant: TextInputV2Size }>`
align-items: center;
display: flex;
@ -270,9 +266,7 @@ const TextInputV2Component = (
)}
</StyledTrailingIconContainer>
</StyledInputContainer>
{error && !noErrorHelper && (
<StyledErrorHelper>{error}</StyledErrorHelper>
)}
<InputErrorHelper isVisible={!noErrorHelper}>{error}</InputErrorHelper>
</StyledContainer>
);
};

2
packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm.tsx
View File

@ -111,7 +111,7 @@ export const WorkflowEditTriggerCronForm = ({
placeholder="0 */1 * * *"
error={errorMessagesVisible ? errorMessages.CUSTOM : undefined}
onBlur={onBlur}
hint="Format: [Second] [Minute] [Hour] [Day of Month] [Month] [Day of Week]"
hint="Format: [Minute] [Hour] [Day of Month] [Month] [Day of Week]"
readonly={triggerOptions.readonly}
defaultValue={trigger.settings.pattern}
onPersist={(newPattern: string) => {