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
2025-06-13 11:07:25 +05:30
committed by GitHub
parent b160871227
commit 3d57c90e04
89 changed files with 3465 additions and 1679 deletions

View File

@ -454,8 +454,8 @@ msgstr "Alle ({relationRecordsCount})"
#. js-lingui-id: 9ljU00
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "All Actions"
msgstr "Alle Aktionen"
#~ msgid "All Actions"
#~ msgstr "Alle Aktionen"
#. js-lingui-id: 7EZqN0
#: src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@ -469,8 +469,8 @@ msgstr "Alle Zeilen"
#. js-lingui-id: aFE/OW
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "All Objects"
msgstr "Alle Objekte"
#~ msgid "All Objects"
#~ msgstr "Alle Objekte"
#. js-lingui-id: Hm90t3
#: src/modules/settings/roles/components/SettingsRolesList.tsx
@ -513,7 +513,7 @@ msgid "An error occurred while updating password"
msgstr "Beim Aktualisieren des Passworts ist ein Fehler aufgetreten"
#. js-lingui-id: mJ6m4C
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "An optional description"
msgstr "Eine optionale Beschreibung"
@ -922,8 +922,8 @@ msgstr "Chinesisch - Traditionell"
#. js-lingui-id: JEFFOR
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Choose an object"
msgstr "Objekt auswählen"
#~ msgid "Choose an object"
#~ msgstr "Objekt auswählen"
#. js-lingui-id: Qz73jD
#: src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx
@ -1315,8 +1315,8 @@ msgstr "Ihren Arbeitsbereich erstellen"
#. js-lingui-id: d+F6q9
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Created"
msgstr "Erstellt"
#~ msgid "Created"
#~ msgstr "Erstellt"
#. js-lingui-id: R3PLzn
#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownCurrencySelect.tsx
@ -1385,11 +1385,11 @@ msgid "Czech"
msgstr "Tschechisch"
#. js-lingui-id: Zz6Cxn
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
#: src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
#: src/modules/settings/profile/components/DeleteWorkspace.tsx
#: src/modules/settings/profile/components/DeleteAccount.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
msgid "Danger zone"
msgstr "Gefahrenzone"
@ -1526,12 +1526,13 @@ msgid "Define what will be visible to other users in your workspace"
msgstr "Definieren Sie, was für andere Benutzer in Ihrem Arbeitsbereich sichtbar sein soll"
#. js-lingui-id: cnGeoo
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
#: src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx
#: src/modules/views/view-picker/components/ViewPickerCreateButton.tsx
#: src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
#: src/modules/action-menu/mock/action-menu-actions.mock.tsx
#: src/modules/action-menu/mock/action-menu-actions.mock.tsx
@ -1585,19 +1586,22 @@ msgid "Delete Records on All Objects"
msgstr ""
#. js-lingui-id: T6S2Ns
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
msgid "Delete this integration"
msgstr "Diese Integration löschen"
#. js-lingui-id: KSOhjo
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Delete this webhook"
msgstr ""
#. js-lingui-id: aRG49z
#: src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
msgid "Delete view"
msgstr "Ansicht löschen"
#. js-lingui-id: snMaH4
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Delete webhook"
msgstr "Webhook löschen"
@ -1624,8 +1628,8 @@ msgstr "Gesamten Arbeitsbereich löschen"
#. js-lingui-id: vGjmyl
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Deleted"
msgstr "Gelöscht"
#~ msgid "Deleted"
#~ msgstr "Gelöscht"
#. js-lingui-id: kcGoDz
#: src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
@ -1659,10 +1663,10 @@ msgid "Descending"
msgstr "Absteigend"
#. js-lingui-id: Nu4oKW
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
#: src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
#: src/modules/settings/roles/role-permissions/settings-permissions/components/SettingsRolePermissionsSettingsTableHeader.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Description"
msgstr "Beschreibung"
@ -1950,7 +1954,7 @@ msgid "Empty Object"
msgstr "Leeres Objekt"
#. js-lingui-id: T3juzf
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Endpoint URL"
msgstr "Endpunkt-URL"
@ -2329,7 +2333,7 @@ msgid "Filter"
msgstr "Filter"
#. js-lingui-id: cSev+j
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Filters"
msgstr "Filter"
@ -2613,6 +2617,11 @@ msgstr "Wie Sie in der App identifiziert werden."
msgid "How your system is doing"
msgstr "Wie Ihr System läuft"
#. js-lingui-id: 0yRnXS
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "https://example.com/webhook"
msgstr ""
#. js-lingui-id: mkWad2
#: src/pages/settings/profile/appearance/components/LocalePicker.tsx
msgid "Hungarian"
@ -3361,6 +3370,7 @@ msgstr "Zum vorherigen Workflow navigieren"
#. js-lingui-id: isRobC
#: src/pages/settings/data-model/SettingsNewObject.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "New"
msgstr "Neu"
@ -3745,10 +3755,15 @@ msgstr "Geöffnet"
msgid "Opportunities"
msgstr ""
#. js-lingui-id: hY8F2i
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Optional secret used to compute the HMAC signature for webhook payloads"
msgstr ""
#. js-lingui-id: qNELak
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Optional: Define a secret string that we will include in every webhook. Use this to authenticate and verify the webhook upon receipt."
msgstr "Optional: Definieren Sie einen geheimen String, den wir in jedem Webhook enthalten. Verwenden Sie dies zur Authentifizierung und Überprüfung des Webhooks bei Erhalt."
#~ msgid "Optional: Define a secret string that we will include in every webhook. Use this to authenticate and verify the webhook upon receipt."
#~ msgstr "Optional: Definieren Sie einen geheimen String, den wir in jedem Webhook enthalten. Verwenden Sie dies zur Authentifizierung und Überprüfung des Webhooks bei Erhalt."
#. js-lingui-id: 0zpgxV
#: src/modules/settings/roles/components/SettingsRolesDefaultRole.tsx
@ -3912,8 +3927,8 @@ msgstr "Spielplatz"
#. js-lingui-id: jEw0Mr
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Please enter a valid URL"
msgstr "Bitte geben Sie eine gültige URL ein"
#~ msgid "Please enter a valid URL"
#~ msgstr "Bitte geben Sie eine gültige URL ein"
#. js-lingui-id: X5x85V
#: src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx
@ -3925,10 +3940,15 @@ msgstr "Bitte suchen Sie zuerst nach einem Benutzer"
msgid "Please type \"{confirmationValue}\" to confirm you want to delete this API Key. Be aware that any script using this key will stop working."
msgstr "Bitte geben Sie \"{confirmationValue}\" ein, um zu bestätigen, dass Sie diesen API-Schlüssel löschen möchten. Beachten Sie, dass jedes Skript, das diesen Schlüssel verwendet, nicht mehr funktioniert."
#. js-lingui-id: GbtYRD
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Please type \"yes\" to confirm you want to delete this webhook."
msgstr ""
#. js-lingui-id: mFZTXr
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Please type {confirmationText} to confirm you want to delete this webhook."
msgstr "Bitte geben Sie {confirmationText} ein, um zu bestätigen, dass Sie diesen Webhook löschen möchten."
#~ msgid "Please type {confirmationText} to confirm you want to delete this webhook."
#~ msgstr "Bitte geben Sie {confirmationText} ein, um zu bestätigen, dass Sie diesen Webhook löschen möchten."
#. js-lingui-id: aRWD63
#: src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
@ -4364,10 +4384,15 @@ msgid "Seats"
msgstr ""
#. js-lingui-id: 8VEDbV
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Secret"
msgstr "Geheimnis"
#. js-lingui-id: e1v+J3
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Secret (optional)"
msgstr ""
#. js-lingui-id: a3LDKx
#: src/pages/settings/security/SettingsSecuritySSOIdentifyProvider.tsx
#: src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx
@ -4502,7 +4527,7 @@ msgid "Select the default value for this boolean field"
msgstr "Wählen Sie den Standardwert für dieses boolesche Feld aus"
#. js-lingui-id: xraglu
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Select the events you wish to send to this endpoint"
msgstr "Wählen Sie die Ereignisse aus, die Sie an diesen Endpunkt senden möchten"
@ -5266,8 +5291,8 @@ msgstr ""
#. js-lingui-id: +b7T3G
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Updated"
msgstr "Aktualisiert"
#~ msgid "Updated"
#~ msgstr "Aktualisiert"
#. js-lingui-id: ONWvwQ
#: src/modules/ui/input/components/ImageInput.tsx
@ -5296,8 +5321,8 @@ msgstr "Laden Sie die XML-Datei mit Ihren Verbindungsinformationen hoch"
#. js-lingui-id: IagCbF
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "URL"
msgstr "URL"
#~ msgid "URL"
#~ msgstr "URL"
#. js-lingui-id: 6dMpmz
#: src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.tsx
@ -5508,7 +5533,7 @@ msgid "We support your square PNGs, JPEGs and GIFs under 10MB"
msgstr "Wir unterstützen Ihre quadratischen PNGs, JPEGs und GIFs unter 10MB"
#. js-lingui-id: ZS7vYp
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "We will send POST requests to this endpoint for every new event"
msgstr "Wir senden POST-Anfragen an diesen Endpunkt für jedes neue Ereignis"
@ -5526,8 +5551,8 @@ msgstr "Wir senden Ihnen einen Link, um den Besitz der Domain zu verifizieren"
#: src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx
#: src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx
#: src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/hooks/useSettingsNavigationItems.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "Webhooks"
msgstr "Webhooks"
@ -5551,6 +5576,11 @@ msgstr "Wann der API-Schlüssel abläuft."
msgid "When the key will be disabled"
msgstr "Wann der Schlüssel deaktiviert wird"
#. js-lingui-id: RfrIUU
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#~ msgid "Will be saved as:"
#~ msgstr ""
#. js-lingui-id: wvyffT
#: src/modules/workflow/components/RecordShowPageWorkflowHeader.tsx
#~ msgid "Workflow cannot be tested"
@ -5576,7 +5606,6 @@ msgstr "Wann der Schlüssel deaktiviert wird"
#: src/pages/settings/security/SettingsSecurity.tsx
#: src/pages/settings/integrations/SettingsIntegrations.tsx
#: src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/playground/SettingsRestPlayground.tsx
#: src/pages/settings/developers/playground/SettingsGraphQLPlayground.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@ -5592,6 +5621,7 @@ msgstr "Wann der Schlüssel deaktiviert wird"
#: src/modules/settings/roles/role-permissions/settings-permissions/components/SettingsRolePermissionsSettingsSection.tsx
#: src/modules/settings/roles/components/SettingsRolesContainer.tsx
#: src/modules/settings/hooks/useSettingsNavigationItems.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/favorites/components/WorkspaceFavorites.tsx
msgid "Workspace"
msgstr "Arbeitsbereich"
@ -5632,8 +5662,8 @@ msgid "Wrap on record pages"
msgstr "Auf Rekordseiten umwickeln"
#. js-lingui-id: Q9pNST
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
#: src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
msgid "Write a description"
@ -5641,8 +5671,8 @@ msgstr "Beschreibung schreiben"
#. js-lingui-id: L80fMJ
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
msgid "Write a secret"
msgstr "Ein Geheimnis schreiben"
#~ msgid "Write a secret"
#~ msgstr "Ein Geheimnis schreiben"
#. js-lingui-id: zkWmBh
#: src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx
@ -5650,8 +5680,9 @@ msgid "Yearly"
msgstr ""
#. js-lingui-id: 3d1wCB
#: src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
#: src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
#: src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
msgid "yes"
msgstr "ja"