Pretty format webhook payload example + unify expected body validation (#13034)

## Webhook Expected Body is automatically pretty formatted


https://github.com/user-attachments/assets/0ca7d621-0c6e-4bef-903f-859efd02f9cc

## Expected body fields can't contain spaces in keys' name


https://github.com/user-attachments/assets/b68d36a6-acd4-4ba2-a99a-5857e30c8582

Closes https://github.com/twentyhq/core-team-issues/issues/1117
This commit is contained in:
Baptiste Devessier
2025-07-04 11:45:14 +02:00
committed by GitHub
parent 92576aec0f
commit 43c3d114bb
5 changed files with 290 additions and 36 deletions
@@ -8,6 +8,7 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { WorkflowWebhookTrigger } from '@/workflow/types/Workflow';
import { parseAndValidateVariableFriendlyStringifiedJson } from '@/workflow/utils/parseAndValidateVariableFriendlyStringifiedJson';
import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
import { WEBHOOK_TRIGGER_AUTHENTICATION_OPTIONS } from '@/workflow/workflow-trigger/constants/WebhookTriggerAuthenticationOptions';
@@ -18,6 +19,7 @@ import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTri
import { getWebhookTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getWebhookTriggerDefaultSettings';
import { useTheme } from '@emotion/react';
import { useLingui } from '@lingui/react/macro';
import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
@@ -152,28 +154,27 @@ export const WorkflowEditTriggerWebhookForm = ({
}
onBlur={onBlur}
readonly={triggerOptions.readonly}
defaultValue={JSON.stringify(trigger.settings.expectedBody)}
defaultValue={JSON.stringify(
trigger.settings.expectedBody,
null,
2,
)}
onChange={(newExpectedBody) => {
if (triggerOptions.readonly === true) {
return;
}
let formattedExpectedBody = {};
try {
formattedExpectedBody = JSON.parse(
newExpectedBody || '{}',
(key, value) => {
if (isDefined(key) && key.includes(' ')) {
throw new Error(t`JSON keys cannot contain spaces`);
}
return value;
},
const parsingResult =
parseAndValidateVariableFriendlyStringifiedJson(
isNonEmptyString(newExpectedBody) ? newExpectedBody : '{}',
);
} catch (e) {
if (!parsingResult.isValid) {
setErrorMessages((prev) => ({
...prev,
expectedBody: String(e),
expectedBody: parsingResult.error,
}));
return;
}
@@ -182,18 +183,17 @@ export const WorkflowEditTriggerWebhookForm = ({
expectedBody: undefined,
}));
const outputSchema = getFunctionOutputSchema(
formattedExpectedBody,
);
const outputSchema = getFunctionOutputSchema(parsingResult.data);
triggerOptions.onTriggerUpdate(
{
...trigger,
settings: {
...trigger.settings,
expectedBody: formattedExpectedBody,
httpMethod: 'POST',
expectedBody: parsingResult.data,
outputSchema,
} as WorkflowWebhookTrigger['settings'],
} satisfies WorkflowWebhookTrigger['settings'],
},
{ computeOutputSchema: false },
);