fix(webhooks): ensure id sent to client is always a string (#20377)

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/EditPage.tsx

@@ -116,7 +116,7 @@ const EditPage = () => {
           message: formatMessage({ id: 'Settings.webhooks.created' }),
         });
 
-        navigate(res.data.id, { replace: true });
+        navigate(`../webhooks/${res.data.id}`, { replace: true });
       } else {
         const res = await updateWebhook({ id: id!, ...cleanData(data) });
 

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/ListPage.tsx

@@ -392,7 +392,7 @@ const ListPage = () => {
       </Page.Main>
       <ConfirmDialog
         isOpen={showModal}
-        onClose={() => setShowModal((prev) => !prev)}
+        onClose={() => setShowModal(false)}
         onConfirm={confirmDelete}
       />
     </Layouts.Root>

packages/core/admin/shared/contracts/webhooks.ts

@@ -26,7 +26,7 @@ export declare namespace GetWebhook {
   }
 
   export interface Params {
-    id: string;
+    id: Modules.WebhookStore.Webhook['id'];
   }
 
   export interface Response {
@@ -60,7 +60,7 @@ export declare namespace UpdateWebhook {
   }
 
   export interface Params {
-    id: string;
+    id: Modules.WebhookStore.Webhook['id'];
   }
 
   export interface Response {
@@ -79,7 +79,7 @@ export declare namespace DeleteWebhook {
   }
 
   export interface Params {
-    id: string;
+    id: Modules.WebhookStore.Webhook['id'];
   }
 
   export interface Response {
@@ -94,7 +94,7 @@ export declare namespace DeleteWebhook {
 export declare namespace DeleteWebhooks {
   export interface Request {
     body: {
-      ids: string[];
+      ids: Modules.WebhookStore.Webhook['id'][];
     };
     query: {};
   }
@@ -115,7 +115,7 @@ export declare namespace TriggerWebhook {
   }
 
   export interface Params {
-    id: string;
+    id: Modules.WebhookStore.Webhook['id'];
   }
 
   export interface Response {

packages/core/core/src/services/webhook-runner.ts

@@ -6,11 +6,13 @@ import createdDebugger from 'debug';
 import _ from 'lodash';
 import type { Logger } from '@strapi/logger';
 
+import type { Modules } from '@strapi/types';
 import WorkerQueue from './worker-queue';
-import type { Webhook } from './webhook-store';
 import type { EventHub } from './event-hub';
 import type { Fetch } from '../utils/fetch';
 
+type Webhook = Modules.WebhookStore.Webhook;
+
 interface Config {
   defaultHeaders: Record<string, string>;
 }

packages/core/core/src/services/webhook-store.ts

@@ -4,6 +4,7 @@
 
 import { errors } from '@strapi/utils';
 import type { Model, Database } from '@strapi/database';
+import type { Modules } from '@strapi/types';
 
 const { ValidationError } = errors;
 
@@ -33,31 +34,9 @@ const webhookModel: Model = {
   },
 };
 
-interface DBInput {
-  name: string;
-  url: string;
-  headers: Record<string, string>;
-  events: string[];
-  enabled: boolean;
-}
-
-interface DBOutput {
-  id: string;
-  name: string;
-  url: string;
-  headers: Record<string, string>;
-  events: string[];
-  enabled: boolean;
-}
-
-export interface Webhook {
-  id: string;
-  name: string;
-  url: string;
-  headers: Record<string, string>;
-  events: string[];
-  isEnabled: boolean;
-}
+type Webhook = Modules.WebhookStore.Webhook;
+type DBOutput = Omit<Webhook, 'id' | 'isEnabled'> & { id: string | number; enabled: boolean };
+type DBInput = Omit<DBOutput, 'id'>;
 
 const toDBObject = (data: Webhook): DBInput => {
   return {
@@ -71,7 +50,7 @@ const toDBObject = (data: Webhook): DBInput => {
 
 const fromDBObject = (row: DBOutput): Webhook => {
   return {
-    id: row.id,
+    id: typeof row.id === 'number' ? row.id.toString() : row.id,
     name: row.name,
     url: row.url,
     headers: row.headers,