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) => {

32
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -1,3 +1,4 @@
import { v4 } from 'uuid';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
@ -9,10 +10,6 @@ import styled from '@emotion/styled';
import { Trans, useLingui } from '@lingui/react/macro';
import { Button, H2Title, IconPlus, MOBILE_VIEWPORT, Section } from 'twenty-ui';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const StyledButtonContainer = styled.div`
display: flex;
@ -32,24 +29,7 @@ const StyledContainer = styled.div<{ isMobile: boolean }>`
export const SettingsDevelopers = () => {
const isMobile = useIsMobile();
const navigate = useNavigateSettings();
const { t } = useLingui();
const { createOneRecord: createOneWebhook } = useCreateOneRecord<Webhook>({
objectNameSingular: CoreObjectNameSingular.Webhook,
});
const createNewWebhook = async () => {
const newWebhook = await createOneWebhook({
targetUrl: '',
operations: ['*.*'],
});
if (!newWebhook) {
return;
}
navigate(SettingsPath.DevelopersNewWebhookDetail, {
webhookId: newWebhook.id,
});
};
return (
<SubMenuTopBarContainer
@ -93,7 +73,15 @@ export const SettingsDevelopers = () => {
title={t`Create Webhook`}
size="small"
variant="secondary"
onClick={createNewWebhook}
to={getSettingsPath(
SettingsPath.DevelopersNewWebhookDetail,
{
webhookId: v4(),
},
{
creationMode: true,
},
)}
/>
</StyledButtonContainer>
</Section>

13
packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
View File

@ -1,7 +1,7 @@
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useParams, useSearchParams } from 'react-router-dom';
import {
Button,
H2Title,
@ -33,6 +33,7 @@ import { useRecoilValue } from 'recoil';
import { FeatureFlagKey } from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { useWebhookUpdateForm } from '@/settings/developers/hooks/useWebhookUpdateForm';
import { isDefined } from 'twenty-shared';
const OBJECT_DROPDOWN_WIDTH = 340;
const ACTION_DROPDOWN_WIDTH = 140;
@ -68,8 +69,13 @@ export const SettingsDevelopersWebhooksDetail = () => {
const { webhookId = '' } = useParams();
const [searchParams] = useSearchParams();
const isCreationMode = isDefined(searchParams.get('creationMode'));
const {
formData,
title,
loading,
isTargetUrlValid,
updateWebhook,
@ -78,6 +84,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
deleteWebhook,
} = useWebhookUpdateForm({
webhookId,
isCreationMode,
});
const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
@ -114,7 +121,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
return (
<SubMenuTopBarContainer
title={formData.targetUrl}
title={title}
reserveTitleSpace
links={[
{
@ -220,7 +227,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
fullWidth
/>
</Section>
{isAnalyticsEnabled && isAnalyticsV2Enabled && (
{!isCreationMode && isAnalyticsEnabled && isAnalyticsV2Enabled && (
<AnalyticsGraphDataInstanceContext.Provider
value={{ instanceId: `webhook-${webhookId}-analytics` }}
>

9
packages/twenty-front/src/utils/url/getUrlHostname.ts
View File

@ -1,9 +1,12 @@
import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';
export const getUrlHostname = (url: string) => {
export const getUrlHostname = (
url: string,
options?: { keepPath?: boolean },
) => {
try {
const absoluteUrl = getAbsoluteUrl(url);
return new URL(absoluteUrl).hostname.replace(/^www\./i, '');
const parsedUrl = new URL(getAbsoluteUrl(url));
return `${parsedUrl.hostname.replace(/^www\./i, '')}${options?.keepPath && parsedUrl.pathname !== '/' ? parsedUrl.pathname : ''}`;
} catch {
return '';
}

89
packages/twenty-server/src/modules/workflow/workflow-trigger/utils/assert-version-can-be-activated.util.ts
View File

@ -88,40 +88,65 @@ function assertCronTriggerSettingsAreValid(settings: any) {
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (settings.type === 'CUSTOM' && !settings.pattern) {
throw new WorkflowTriggerException(
'No pattern provided in CUSTOM cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (!settings.schedule) {
throw new WorkflowTriggerException(
'No schedule provided in cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (settings.type === 'HOURS' && settings.schedule.hour <= 0) {
throw new WorkflowTriggerException(
'Invalid hour value. Should be integer greater than 1',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
switch (settings.type) {
case 'CUSTOM': {
if (!settings.pattern) {
throw new WorkflowTriggerException(
'No pattern provided in CUSTOM cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (
settings.type === 'HOURS' &&
(settings.schedule.minute < 0 || settings.schedule.minute > 59)
) {
throw new WorkflowTriggerException(
'Invalid minute value. Should be integer between 0 and 59',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
return;
}
if (settings.type === 'MINUTES' && settings.schedule.minute <= 0) {
throw new WorkflowTriggerException(
'Invalid minute value. Should be integer greater than 1',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
case 'HOURS': {
if (!settings.schedule) {
throw new WorkflowTriggerException(
'No schedule provided in cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (settings.schedule.hour <= 0) {
throw new WorkflowTriggerException(
'Invalid hour value. Should be integer greater than 1',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (settings.schedule.minute < 0 || settings.schedule.minute > 59) {
throw new WorkflowTriggerException(
'Invalid minute value. Should be integer between 0 and 59',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
return;
}
case 'MINUTES': {
if (!settings.schedule) {
throw new WorkflowTriggerException(
'No schedule provided in cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
if (settings.schedule.minute <= 0) {
throw new WorkflowTriggerException(
'Invalid minute value. Should be integer greater than 1',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
return;
}
default:
throw new WorkflowTriggerException(
'Invalid setting type provided in cron trigger',
WorkflowTriggerExceptionCode.INVALID_WORKFLOW_TRIGGER,
);
}
}