@webiny/webhooks 6.4.0-beta.1 → 6.4.0-beta.3

package/admin/presentation/WebhookForm/WebhookFormPresenter.js

@@ -15,13 +15,11 @@ class WebhookFormPresenterImpl {
             isNew: this._isNew,
             webhook: this._webhook,
             showDeliveries: this._showDeliveries,
-            availableEvents: this._availableEvents,
             permissions: {
                 canEdit: this.permissions.canEdit("webhook"),
                 canDelete: this.permissions.canDelete("webhook")
             },
-            form: this._form.vm,
-            selectedEvents: Array.from(this._selectedEvents)
+            form: this._form.vm
         };
     }
     constructor(formModelFactory, getWebhookUseCase, createWebhookUseCase, updateWebhookUseCase, deleteWebhookUseCase, listAvailableEventsUseCase, permissions){
@@ -37,9 +35,9 @@ class WebhookFormPresenterImpl {
         this._isNew = false;
         this._webhook = null;
         this._showDeliveries = false;
-        this._availableEvents = [];
         this._webhookId = null;
-        this._selectedEvents = new Set();
+        this._eventFieldNames = [];
+        this._eventGroups = new Map();
         this.actions = {
             save: async ()=>{
                 const data = await this._form.submit();
@@ -52,7 +50,7 @@ class WebhookFormPresenterImpl {
                         endpointUrl: data.endpointUrl,
                         description: data.description || void 0,
                         enabled: data.enabled,
-                        events: Array.from(this._selectedEvents)
+                        events: this.collectEvents()
                     };
                     if (this._isNew) {
                         const created = await this.createWebhookUseCase.execute(merged);
@@ -83,10 +81,6 @@ class WebhookFormPresenterImpl {
             },
             closeDeliveries: ()=>{
                 this._showDeliveries = false;
-            },
-            toggleEvent: (eventName)=>{
-                if (this._selectedEvents.has(eventName)) this._selectedEvents.delete(eventName);
-                else this._selectedEvents.add(eventName);
             }
         };
         this._form = this.buildForm();
@@ -98,7 +92,10 @@ class WebhookFormPresenterImpl {
         return this.formModelFactory.create({
             fields: (fields)=>({
                     name: fields.text().label("Name").required("Name is required"),
-                    slug: fields.text().label("Slug").required("Slug is required"),
+                    slug: fields.text().label("Slug").required("Slug is required").computedUntilDirty((form)=>{
+                        const name = String(form.field("name").getValue() ?? "");
+                        return name.trim().toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-");
+                    }),
                     endpointUrl: fields.text().label("Endpoint URL").required("Endpoint URL is required").placeholder("https://"),
                     description: fields.text().label("Description").renderer("textarea"),
                     enabled: fields.boolean().label("Enabled").defaultValue(false)
@@ -111,6 +108,82 @@ class WebhookFormPresenterImpl {
                 ]
         });
     }
+    eventFieldName(app) {
+        const slug = app.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+        return `events_${slug}`;
+    }
+    addEventFields(events) {
+        const grouped = new Map();
+        for (const event of events){
+            const existing = grouped.get(event.appLabel) ?? [];
+            existing.push(event);
+            grouped.set(event.appLabel, existing);
+        }
+        this._eventGroups = grouped;
+        this._eventFieldNames = [];
+        this._form.fields((fields)=>{
+            const result = {};
+            for (const [app, appEvents] of grouped){
+                const fieldName = this.eventFieldName(app);
+                this._eventFieldNames.push(fieldName);
+                result[fieldName] = fields.object().label(app).renderer("objectAccordionSingle").fields((f)=>({
+                        selected: f.text().list().options(appEvents.map((e)=>({
+                                label: e.label,
+                                value: e.eventName
+                            }))).renderer("checkboxes")
+                    }));
+            }
+            return result;
+        });
+        this._form.setLayout((layout)=>[
+                layout.row("name", "slug"),
+                layout.row("endpointUrl"),
+                layout.row("description"),
+                layout.row("enabled"),
+                layout.separator(),
+                ...this._eventFieldNames.map((name)=>layout.object(name, (inner)=>[
+                            inner.row("selected")
+                        ]))
+            ]);
+        this._form.addRule((form)=>{
+            if (0 === this._eventFieldNames.length) return [];
+            for (const fieldName of this._eventFieldNames){
+                const objectField = form.field(fieldName).as("object");
+                const selectedField = objectField.children.get("selected");
+                if (!selectedField) continue;
+                const values = selectedField.getValue();
+                if (values && values.length > 0) return [];
+            }
+            return [
+                {
+                    path: "Events",
+                    message: "At least one event must be selected."
+                }
+            ];
+        });
+    }
+    collectEvents() {
+        const allEvents = [];
+        for (const fieldName of this._eventFieldNames){
+            const objectField = this._form.field(fieldName).as("object");
+            const selectedField = objectField.children.get("selected");
+            if (!selectedField) continue;
+            const values = selectedField.getValue();
+            if (values && values.length > 0) allEvents.push(...values);
+        }
+        return allEvents;
+    }
+    distributeEvents(webhookEvents) {
+        const eventSet = new Set(webhookEvents);
+        for (const [app, appEvents] of this._eventGroups){
+            const fieldName = this.eventFieldName(app);
+            const objectField = this._form.field(fieldName).as("object");
+            const selectedField = objectField.children.get("selected");
+            if (!selectedField) continue;
+            const selected = appEvents.filter((e)=>eventSet.has(e.eventName)).map((e)=>e.eventName);
+            selectedField.setValue(selected);
+        }
+    }
     async init(id) {
         this._loading = true;
         this._isNew = "new" === id;
@@ -119,8 +192,8 @@ class WebhookFormPresenterImpl {
         if (this._isNew) {
             const events = await eventsPromise;
             runInAction(()=>{
-                this._availableEvents = events;
                 this._form = this.buildForm();
+                this.addEventFields(events);
                 this._loading = false;
             });
         } else {
@@ -130,8 +203,8 @@ class WebhookFormPresenterImpl {
             ]);
             runInAction(()=>{
                 this._webhook = webhook;
-                this._availableEvents = events;
                 this._form = this.buildForm();
+                this.addEventFields(events);
                 this._form.setData({
                     name: webhook.name,
                     slug: webhook.slug,
@@ -140,7 +213,7 @@ class WebhookFormPresenterImpl {
                     enabled: webhook.enabled
                 });
                 this._form.field("slug").setDisabled(true);
-                this._selectedEvents = new Set(webhook.events);
+                this.distributeEvents(webhook.events);
                 this._loading = false;
             });
         }

package/admin/presentation/WebhookForm/WebhookFormPresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WebhookForm/WebhookFormPresenter.js","sources":["../../../../src/admin/presentation/WebhookForm/WebhookFormPresenter.ts"],"sourcesContent":["import { computed, makeAutoObservable, runInAction } from \"mobx\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\nimport type { WebhookEvent } from \"~/admin/shared/types.js\";\nimport {\n    WebhookFormPresenter as Abstraction,\n    type IWebhookFormPresenter,\n    type IWebhookFormViewModel,\n    type IWebhookFormActions\n} from \"./abstractions.js\";\nimport { GetWebhookUseCase } from \"~/admin/features/getWebhook/abstractions.js\";\nimport { CreateWebhookUseCase } from \"~/admin/features/createWebhook/abstractions.js\";\nimport { UpdateWebhookUseCase } from \"~/admin/features/updateWebhook/abstractions.js\";\nimport { DeleteWebhookUseCase } from \"~/admin/features/deleteWebhook/abstractions.js\";\nimport { ListAvailableEventsUseCase } from \"~/admin/features/listAvailableEvents/abstractions.js\";\nimport { WebhookPermissions } from \"~/admin/features/permissions/abstractions.js\";\nimport {\n    FormModelFactory,\n    type IFormModel\n} from \"@webiny/app-admin/features/formModel/abstractions.js\";\n\nclass WebhookFormPresenterImpl implements IWebhookFormPresenter {\n    private _loading = false;\n    private _saving = false;\n    private _isNew = false;\n    private _webhook: Webhook | null = null;\n    private _showDeliveries = false;\n    private _availableEvents: WebhookEvent[] = [];\n    private _webhookId: string | null = null;\n    private _form;\n    private _selectedEvents: Set<string> = new Set();\n\n    public get vm(): IWebhookFormViewModel {\n        return {\n            loading: this._loading,\n            saving: this._saving,\n            isNew: this._isNew,\n            webhook: this._webhook,\n            showDeliveries: this._showDeliveries,\n            availableEvents: this._availableEvents,\n            permissions: {\n                canEdit: this.permissions.canEdit(\"webhook\"),\n                canDelete: this.permissions.canDelete(\"webhook\")\n            },\n            form: this._form.vm,\n            selectedEvents: Array.from(this._selectedEvents)\n        };\n    }\n\n    public constructor(\n        private readonly formModelFactory: FormModelFactory.Interface,\n        private readonly getWebhookUseCase: GetWebhookUseCase.Interface,\n        private readonly createWebhookUseCase: CreateWebhookUseCase.Interface,\n        private readonly updateWebhookUseCase: UpdateWebhookUseCase.Interface,\n        private readonly deleteWebhookUseCase: DeleteWebhookUseCase.Interface,\n        private readonly listAvailableEventsUseCase: ListAvailableEventsUseCase.Interface,\n        private readonly permissions: WebhookPermissions.Interface\n    ) {\n        this._form = this.buildForm();\n\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    private buildForm(): IFormModel {\n        return this.formModelFactory.create({\n            fields: fields => ({\n                name: fields.text().label(\"Name\").required(\"Name is required\"),\n                slug: fields.text().label(\"Slug\").required(\"Slug is required\"),\n                endpointUrl: fields\n                    .text()\n                    .label(\"Endpoint URL\")\n                    .required(\"Endpoint URL is required\")\n                    .placeholder(\"https://\"),\n                description: fields.text().label(\"Description\").renderer(\"textarea\"),\n                enabled: fields.boolean().label(\"Enabled\").defaultValue(false)\n            }),\n            layout: layout => [\n                layout.row(\"name\", \"slug\"),\n                layout.row(\"endpointUrl\"),\n                layout.row(\"description\"),\n                layout.row(\"enabled\")\n            ]\n        });\n    }\n\n    public actions: IWebhookFormActions = {\n        save: async () => {\n            const data = await this._form.submit<Record<string, unknown>>();\n            if (data === false) {\n                return;\n            }\n\n            this._saving = true;\n\n            try {\n                const merged = {\n                    name: data.name as string,\n                    slug: data.slug as string,\n                    endpointUrl: data.endpointUrl as string,\n                    description: (data.description as string) || undefined,\n                    enabled: data.enabled as boolean,\n                    events: Array.from(this._selectedEvents)\n                };\n\n                if (this._isNew) {\n                    const created = await this.createWebhookUseCase.execute(merged);\n\n                    runInAction(() => {\n                        this._webhook = created;\n                        this._webhookId = created.id;\n                        this._isNew = false;\n                        this._form.field(\"slug\").setDisabled(true);\n                    });\n                } else {\n                    const updated = await this.updateWebhookUseCase.execute(\n                        this._webhookId!,\n                        merged\n                    );\n\n                    runInAction(() => {\n                        this._webhook = updated;\n                    });\n                }\n            } finally {\n                runInAction(() => {\n                    this._saving = false;\n                });\n            }\n        },\n        deleteWebhook: async () => {\n            if (!this._webhookId || this._isNew) {\n                return;\n            }\n            await this.deleteWebhookUseCase.execute(this._webhookId);\n        },\n        openDeliveries: () => {\n            this._showDeliveries = true;\n        },\n        closeDeliveries: () => {\n            this._showDeliveries = false;\n        },\n        toggleEvent: (eventName: string) => {\n            if (this._selectedEvents.has(eventName)) {\n                this._selectedEvents.delete(eventName);\n            } else {\n                this._selectedEvents.add(eventName);\n            }\n        }\n    };\n\n    public async init(id: string): Promise<void> {\n        this._loading = true;\n        this._isNew = id === \"new\";\n        this._webhookId = id === \"new\" ? null : id;\n\n        const eventsPromise = this.listAvailableEventsUseCase.execute();\n\n        if (!this._isNew) {\n            const [webhook, events] = await Promise.all([\n                this.getWebhookUseCase.execute(id),\n                eventsPromise\n            ]);\n\n            runInAction(() => {\n                this._webhook = webhook;\n                this._availableEvents = events;\n                this._form = this.buildForm();\n                this._form.setData({\n                    name: webhook.name,\n                    slug: webhook.slug,\n                    endpointUrl: webhook.endpointUrl,\n                    description: webhook.description ?? \"\",\n                    enabled: webhook.enabled\n                });\n                this._form.field(\"slug\").setDisabled(true);\n                this._selectedEvents = new Set(webhook.events);\n                this._loading = false;\n            });\n        } else {\n            const events = await eventsPromise;\n\n            runInAction(() => {\n                this._availableEvents = events;\n                this._form = this.buildForm();\n                this._loading = false;\n            });\n        }\n    }\n}\n\nexport const WebhookFormPresenter = Abstraction.createImplementation({\n    implementation: WebhookFormPresenterImpl,\n    dependencies: [\n        FormModelFactory,\n        GetWebhookUseCase,\n        CreateWebhookUseCase,\n        UpdateWebhookUseCase,\n        DeleteWebhookUseCase,\n        ListAvailableEventsUseCase,\n        WebhookPermissions\n    ]\n});\n"],"names":["WebhookFormPresenterImpl","Array","formModelFactory","getWebhookUseCase","createWebhookUseCase","updateWebhookUseCase","deleteWebhookUseCase","listAvailableEventsUseCase","permissions","Set","data","merged","undefined","created","runInAction","updated","eventName","makeAutoObservable","computed","fields","layout","id","eventsPromise","events","webhook","Promise","WebhookFormPresenter","Abstraction","FormModelFactory","GetWebhookUseCase","CreateWebhookUseCase","UpdateWebhookUseCase","DeleteWebhookUseCase","ListAvailableEventsUseCase","WebhookPermissions"],"mappings":"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"}
+{"version":3,"file":"admin/presentation/WebhookForm/WebhookFormPresenter.js","sources":["../../../../src/admin/presentation/WebhookForm/WebhookFormPresenter.ts"],"sourcesContent":["import { computed, makeAutoObservable, runInAction } from \"mobx\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\nimport type { WebhookEvent } from \"~/admin/shared/types.js\";\nimport {\n    WebhookFormPresenter as Abstraction,\n    type IWebhookFormPresenter,\n    type IWebhookFormViewModel,\n    type IWebhookFormActions\n} from \"./abstractions.js\";\nimport { GetWebhookUseCase } from \"~/admin/features/getWebhook/abstractions.js\";\nimport { CreateWebhookUseCase } from \"~/admin/features/createWebhook/abstractions.js\";\nimport { UpdateWebhookUseCase } from \"~/admin/features/updateWebhook/abstractions.js\";\nimport { DeleteWebhookUseCase } from \"~/admin/features/deleteWebhook/abstractions.js\";\nimport { ListAvailableEventsUseCase } from \"~/admin/features/listAvailableEvents/abstractions.js\";\nimport { WebhookPermissions } from \"~/admin/features/permissions/abstractions.js\";\nimport {\n    FormModelFactory,\n    type IFormModel\n} from \"@webiny/app-admin/features/formModel/abstractions.js\";\n\nclass WebhookFormPresenterImpl implements IWebhookFormPresenter {\n    private _loading = false;\n    private _saving = false;\n    private _isNew = false;\n    private _webhook: Webhook | null = null;\n    private _showDeliveries = false;\n    private _webhookId: string | null = null;\n    private _form: IFormModel;\n    private _eventFieldNames: string[] = [];\n    private _eventGroups: Map<string, WebhookEvent[]> = new Map();\n\n    public get vm(): IWebhookFormViewModel {\n        return {\n            loading: this._loading,\n            saving: this._saving,\n            isNew: this._isNew,\n            webhook: this._webhook,\n            showDeliveries: this._showDeliveries,\n            permissions: {\n                canEdit: this.permissions.canEdit(\"webhook\"),\n                canDelete: this.permissions.canDelete(\"webhook\")\n            },\n            form: this._form.vm\n        };\n    }\n\n    public constructor(\n        private readonly formModelFactory: FormModelFactory.Interface,\n        private readonly getWebhookUseCase: GetWebhookUseCase.Interface,\n        private readonly createWebhookUseCase: CreateWebhookUseCase.Interface,\n        private readonly updateWebhookUseCase: UpdateWebhookUseCase.Interface,\n        private readonly deleteWebhookUseCase: DeleteWebhookUseCase.Interface,\n        private readonly listAvailableEventsUseCase: ListAvailableEventsUseCase.Interface,\n        private readonly permissions: WebhookPermissions.Interface\n    ) {\n        this._form = this.buildForm();\n\n        makeAutoObservable(this, { vm: computed });\n    }\n\n    private buildForm(): IFormModel {\n        return this.formModelFactory.create({\n            fields: fields => ({\n                name: fields.text().label(\"Name\").required(\"Name is required\"),\n                slug: fields\n                    .text()\n                    .label(\"Slug\")\n                    .required(\"Slug is required\")\n                    .computedUntilDirty(form => {\n                        const name = String(form.field(\"name\").getValue() ?? \"\");\n                        return name\n                            .trim()\n                            .toLowerCase()\n                            .replace(/[^a-z0-9\\s-]/g, \"\")\n                            .replace(/\\s+/g, \"-\");\n                    }),\n                endpointUrl: fields\n                    .text()\n                    .label(\"Endpoint URL\")\n                    .required(\"Endpoint URL is required\")\n                    .placeholder(\"https://\"),\n                description: fields.text().label(\"Description\").renderer(\"textarea\"),\n                enabled: fields.boolean().label(\"Enabled\").defaultValue(false)\n            }),\n            layout: layout => [\n                layout.row(\"name\", \"slug\"),\n                layout.row(\"endpointUrl\"),\n                layout.row(\"description\"),\n                layout.row(\"enabled\")\n            ]\n        });\n    }\n\n    private eventFieldName(app: string): string {\n        const slug = app\n            .toLowerCase()\n            .replace(/[^a-z0-9]+/g, \"_\")\n            .replace(/^_|_$/g, \"\");\n        return `events_${slug}`;\n    }\n\n    private addEventFields(events: WebhookEvent[]): void {\n        const grouped = new Map<string, WebhookEvent[]>();\n        for (const event of events) {\n            const existing = grouped.get(event.appLabel) ?? [];\n            existing.push(event);\n            grouped.set(event.appLabel, existing);\n        }\n\n        this._eventGroups = grouped;\n        this._eventFieldNames = [];\n\n        this._form.fields(fields => {\n            const result: Record<string, ReturnType<typeof fields.object>> = {};\n\n            for (const [app, appEvents] of grouped) {\n                const fieldName = this.eventFieldName(app);\n                this._eventFieldNames.push(fieldName);\n\n                result[fieldName] = fields\n                    .object()\n                    .label(app)\n                    .renderer(\"objectAccordionSingle\")\n                    .fields(f => {\n                        return {\n                            selected: f\n                                .text()\n                                .list()\n                                .options(\n                                    appEvents.map(e => ({\n                                        label: e.label,\n                                        value: e.eventName\n                                    }))\n                                )\n                                .renderer(\"checkboxes\")\n                        };\n                    });\n            }\n\n            return result;\n        });\n\n        this._form.setLayout(layout => [\n            layout.row(\"name\", \"slug\"),\n            layout.row(\"endpointUrl\"),\n            layout.row(\"description\"),\n            layout.row(\"enabled\"),\n            layout.separator(),\n            ...this._eventFieldNames.map(name =>\n                layout.object(name, inner => [inner.row(\"selected\")])\n            )\n        ]);\n\n        this._form.addRule(form => {\n            if (this._eventFieldNames.length === 0) {\n                return [];\n            }\n            for (const fieldName of this._eventFieldNames) {\n                const objectField = form.field(fieldName).as(\"object\");\n                const selectedField = objectField.children.get(\"selected\");\n                if (!selectedField) {\n                    continue;\n                }\n                const values = selectedField.getValue<string[]>();\n                if (values && values.length > 0) {\n                    return [];\n                }\n            }\n\n            return [{ path: \"Events\", message: \"At least one event must be selected.\" }];\n        });\n    }\n\n    private collectEvents(): string[] {\n        const allEvents: string[] = [];\n\n        for (const fieldName of this._eventFieldNames) {\n            const objectField = this._form.field(fieldName).as(\"object\");\n            const selectedField = objectField.children.get(\"selected\");\n            if (!selectedField) {\n                continue;\n            }\n            const values = selectedField.getValue<string[]>();\n            if (values && values.length > 0) {\n                allEvents.push(...values);\n            }\n        }\n\n        return allEvents;\n    }\n\n    private distributeEvents(webhookEvents: string[]): void {\n        const eventSet = new Set(webhookEvents);\n\n        for (const [app, appEvents] of this._eventGroups) {\n            const fieldName = this.eventFieldName(app);\n            const objectField = this._form.field(fieldName).as(\"object\");\n            const selectedField = objectField.children.get(\"selected\");\n            if (!selectedField) {\n                continue;\n            }\n\n            const selected = appEvents.filter(e => eventSet.has(e.eventName)).map(e => e.eventName);\n            selectedField.setValue(selected);\n        }\n    }\n\n    public actions: IWebhookFormActions = {\n        save: async () => {\n            const data = await this._form.submit<Record<string, unknown>>();\n            if (data === false) {\n                return;\n            }\n\n            this._saving = true;\n\n            try {\n                const merged = {\n                    name: data.name as string,\n                    slug: data.slug as string,\n                    endpointUrl: data.endpointUrl as string,\n                    description: (data.description as string) || undefined,\n                    enabled: data.enabled as boolean,\n                    events: this.collectEvents()\n                };\n\n                if (this._isNew) {\n                    const created = await this.createWebhookUseCase.execute(merged);\n\n                    runInAction(() => {\n                        this._webhook = created;\n                        this._webhookId = created.id;\n                        this._isNew = false;\n                        this._form.field(\"slug\").setDisabled(true);\n                    });\n                } else {\n                    const updated = await this.updateWebhookUseCase.execute(\n                        this._webhookId!,\n                        merged\n                    );\n\n                    runInAction(() => {\n                        this._webhook = updated;\n                    });\n                }\n            } finally {\n                runInAction(() => {\n                    this._saving = false;\n                });\n            }\n        },\n        deleteWebhook: async () => {\n            if (!this._webhookId || this._isNew) {\n                return;\n            }\n            await this.deleteWebhookUseCase.execute(this._webhookId);\n        },\n        openDeliveries: () => {\n            this._showDeliveries = true;\n        },\n        closeDeliveries: () => {\n            this._showDeliveries = false;\n        }\n    };\n\n    public async init(id: string): Promise<void> {\n        this._loading = true;\n        this._isNew = id === \"new\";\n        this._webhookId = id === \"new\" ? null : id;\n\n        const eventsPromise = this.listAvailableEventsUseCase.execute();\n\n        if (!this._isNew) {\n            const [webhook, events] = await Promise.all([\n                this.getWebhookUseCase.execute(id),\n                eventsPromise\n            ]);\n\n            runInAction(() => {\n                this._webhook = webhook;\n                this._form = this.buildForm();\n                this.addEventFields(events);\n                this._form.setData({\n                    name: webhook.name,\n                    slug: webhook.slug,\n                    endpointUrl: webhook.endpointUrl,\n                    description: webhook.description ?? \"\",\n                    enabled: webhook.enabled\n                });\n                this._form.field(\"slug\").setDisabled(true);\n                this.distributeEvents(webhook.events);\n                this._loading = false;\n            });\n        } else {\n            const events = await eventsPromise;\n\n            runInAction(() => {\n                this._form = this.buildForm();\n                this.addEventFields(events);\n                this._loading = false;\n            });\n        }\n    }\n}\n\nexport const WebhookFormPresenter = Abstraction.createImplementation({\n    implementation: WebhookFormPresenterImpl,\n    dependencies: [\n        FormModelFactory,\n        GetWebhookUseCase,\n        CreateWebhookUseCase,\n        UpdateWebhookUseCase,\n        DeleteWebhookUseCase,\n        ListAvailableEventsUseCase,\n        WebhookPermissions\n    ]\n});\n"],"names":["WebhookFormPresenterImpl","formModelFactory","getWebhookUseCase","createWebhookUseCase","updateWebhookUseCase","deleteWebhookUseCase","listAvailableEventsUseCase","permissions","Map","data","merged","undefined","created","runInAction","updated","makeAutoObservable","computed","fields","form","name","String","layout","app","slug","events","grouped","event","existing","result","appEvents","fieldName","f","e","inner","objectField","selectedField","values","allEvents","webhookEvents","eventSet","Set","selected","id","eventsPromise","webhook","Promise","WebhookFormPresenter","Abstraction","FormModelFactory","GetWebhookUseCase","CreateWebhookUseCase","UpdateWebhookUseCase","DeleteWebhookUseCase","ListAvailableEventsUseCase","WebhookPermissions"],"mappings":"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"}

package/admin/presentation/WebhookForm/abstractions.d.ts

@@ -1,5 +1,4 @@
 import type { Webhook } from "../../../admin/shared/types.js";
-import type { WebhookEvent } from "../../../admin/shared/types.js";
 import type { IFormVM } from "@webiny/app-admin/features/formModel/abstractions.js";
 export interface IWebhookFormViewModel {
     loading: boolean;
@@ -7,20 +6,17 @@ export interface IWebhookFormViewModel {
     isNew: boolean;
     webhook: Webhook | null;
     showDeliveries: boolean;
-    availableEvents: WebhookEvent[];
     permissions: {
         canEdit: boolean;
         canDelete: boolean;
     };
     form: IFormVM;
-    selectedEvents: string[];
 }
 export interface IWebhookFormActions {
     save(): Promise<void>;
     deleteWebhook(): Promise<void>;
     openDeliveries(): void;
     closeDeliveries(): void;
-    toggleEvent(eventName: string): void;
 }
 export interface IWebhookFormPresenter {
     vm: IWebhookFormViewModel;

package/admin/presentation/WebhookForm/abstractions.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WebhookForm/abstractions.js","sources":["../../../../src/admin/presentation/WebhookForm/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\nimport type { WebhookEvent } from \"~/admin/shared/types.js\";\nimport type { IFormVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\n\nexport interface IWebhookFormViewModel {\n    loading: boolean;\n    saving: boolean;\n    isNew: boolean;\n    webhook: Webhook | null;\n    showDeliveries: boolean;\n    availableEvents: WebhookEvent[];\n    permissions: {\n        canEdit: boolean;\n        canDelete: boolean;\n    };\n    form: IFormVM;\n    selectedEvents: string[];\n}\n\nexport interface IWebhookFormActions {\n    save(): Promise<void>;\n    deleteWebhook(): Promise<void>;\n    openDeliveries(): void;\n    closeDeliveries(): void;\n    toggleEvent(eventName: string): void;\n}\n\nexport interface IWebhookFormPresenter {\n    vm: IWebhookFormViewModel;\n    actions: IWebhookFormActions;\n    init(id: string): void;\n}\n\nexport const WebhookFormPresenter =\n    createAbstraction<IWebhookFormPresenter>(\"WebhookFormPresenter\");\n\nexport namespace WebhookFormPresenter {\n    export type Interface = IWebhookFormPresenter;\n    export type ViewModel = IWebhookFormViewModel;\n    export type Actions = IWebhookFormActions;\n}\n"],"names":["WebhookFormPresenter","createAbstraction"],"mappings":";AAkCO,MAAMA,uBACTC,kBAAyC"}
+{"version":3,"file":"admin/presentation/WebhookForm/abstractions.js","sources":["../../../../src/admin/presentation/WebhookForm/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\nimport type { IFormVM } from \"@webiny/app-admin/features/formModel/abstractions.js\";\n\nexport interface IWebhookFormViewModel {\n    loading: boolean;\n    saving: boolean;\n    isNew: boolean;\n    webhook: Webhook | null;\n    showDeliveries: boolean;\n    permissions: {\n        canEdit: boolean;\n        canDelete: boolean;\n    };\n    form: IFormVM;\n}\n\nexport interface IWebhookFormActions {\n    save(): Promise<void>;\n    deleteWebhook(): Promise<void>;\n    openDeliveries(): void;\n    closeDeliveries(): void;\n}\n\nexport interface IWebhookFormPresenter {\n    vm: IWebhookFormViewModel;\n    actions: IWebhookFormActions;\n    init(id: string): void;\n}\n\nexport const WebhookFormPresenter =\n    createAbstraction<IWebhookFormPresenter>(\"WebhookFormPresenter\");\n\nexport namespace WebhookFormPresenter {\n    export type Interface = IWebhookFormPresenter;\n    export type ViewModel = IWebhookFormViewModel;\n    export type Actions = IWebhookFormActions;\n}\n"],"names":["WebhookFormPresenter","createAbstraction"],"mappings":";AA8BO,MAAMA,uBACTC,kBAAyC"}

package/admin/presentation/WebhookForm/components/WebhookFormView.js

@@ -1,7 +1,7 @@
 import react, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { DiContainerProvider, useContainer, useFeature, useRoute } from "@webiny/app";
-import { useRouter } from "@webiny/app-admin";
+import { FormErrors, useRouter } from "@webiny/app-admin";
 import { Button, Heading, OverlayLoader, Separator } from "@webiny/admin-ui";
 import { FormView } from "@webiny/app-admin/features/formModel/FormView.js";
 import { WebhookFormPresenterFeature } from "../feature.js";
@@ -12,7 +12,6 @@ import { DeleteWebhookFeature } from "../../../features/deleteWebhook/feature.js
 import { ListAvailableEventsFeature } from "../../../features/listAvailableEvents/feature.js";
 import { WebhookPermissionsFeature } from "../../../features/permissions/feature.js";
 import { Routes } from "../../../routes.js";
-import { EventsSelector } from "./EventsSelector.js";
 import { SigningSecret } from "./SigningSecret.js";
 import { WebhookDeliveriesDrawer } from "../../WebhookDeliveries/components/WebhookDeliveriesDrawer.js";
 const WebhookFormView_WebhookFormViewInner = observer(function() {
@@ -47,17 +46,12 @@ const WebhookFormView_WebhookFormViewInner = observer(function() {
         onClick: ()=>void actions.save(),
         disabled: vm.saving
     }, vm.saving ? "Saving..." : "Save"))), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
-        className: "flex-1 overflow-auto p-md"
-    }, /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg max-w-[720px]"
-    }, /*#__PURE__*/ react.createElement(FormView, {
+        className: "p-lg"
+    }, /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormErrors, {
+        form: vm.form
+    }), /*#__PURE__*/ react.createElement(FormView, {
         name: "Webhook",
         form: vm.form
-    }), /*#__PURE__*/ react.createElement(EventsSelector, {
-        availableEvents: vm.availableEvents,
-        selectedEvents: vm.selectedEvents,
-        onToggle: actions.toggleEvent,
-        disabled: !vm.permissions.canEdit
     }), !vm.isNew && vm.webhook?.signingSecret && /*#__PURE__*/ react.createElement(SigningSecret, {
         secret: vm.webhook.signingSecret
     })))), vm.showDeliveries && vm.webhook && /*#__PURE__*/ react.createElement(WebhookDeliveriesDrawer, {

package/admin/presentation/WebhookForm/components/WebhookFormView.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WebhookForm/components/WebhookFormView.js","sources":["../../../../../src/admin/presentation/WebhookForm/components/WebhookFormView.tsx"],"sourcesContent":["import React, { useMemo, useEffect } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport { useRoute } from \"@webiny/app\";\nimport { Button, Heading, OverlayLoader, Separator } from \"@webiny/admin-ui\";\nimport { FormView } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport { WebhookFormPresenterFeature } from \"../feature.js\";\nimport { GetWebhookFeature } from \"~/admin/features/getWebhook/feature.js\";\nimport { CreateWebhookFeature } from \"~/admin/features/createWebhook/feature.js\";\nimport { UpdateWebhookFeature } from \"~/admin/features/updateWebhook/feature.js\";\nimport { DeleteWebhookFeature } from \"~/admin/features/deleteWebhook/feature.js\";\nimport { ListAvailableEventsFeature } from \"~/admin/features/listAvailableEvents/feature.js\";\nimport { WebhookPermissionsFeature } from \"~/admin/features/permissions/feature.js\";\nimport { Routes } from \"~/admin/routes.js\";\nimport { EventsSelector } from \"./EventsSelector.js\";\nimport { SigningSecret } from \"./SigningSecret.js\";\nimport { WebhookDeliveriesDrawer } from \"~/admin/presentation/WebhookDeliveries/components/WebhookDeliveriesDrawer.js\";\n\nconst WebhookFormViewInner = observer(function WebhookFormViewInner() {\n    const { presenter } = useFeature(WebhookFormPresenterFeature);\n    const { goToRoute } = useRouter();\n    const { route } = useRoute(Routes.Form);\n    const id = route.params.id;\n\n    useEffect(() => {\n        void presenter.init(id);\n    }, [presenter, id]);\n\n    const { vm, actions } = presenter;\n\n    if (vm.loading) {\n        return <OverlayLoader />;\n    }\n\n    return (\n        <>\n            <div className=\"flex flex-col h-main-content\">\n                <div className=\"flex items-center justify-between py-sm px-md\">\n                    <Heading level={5}>\n                        {vm.isNew ? \"Create Webhook\" : (vm.webhook?.name ?? \"Edit Webhook\")}\n                    </Heading>\n                    <div className=\"flex gap-sm\">\n                        {!vm.isNew && (\n                            <Button variant=\"secondary\" onClick={() => actions.openDeliveries()}>\n                                Deliveries\n                            </Button>\n                        )}\n                        <Button variant=\"secondary\" onClick={() => goToRoute(Routes.List)}>\n                            Cancel\n                        </Button>\n                        {vm.permissions.canEdit && (\n                            <Button\n                                variant=\"primary\"\n                                onClick={() => void actions.save()}\n                                disabled={vm.saving}\n                            >\n                                {vm.saving ? \"Saving...\" : \"Save\"}\n                            </Button>\n                        )}\n                    </div>\n                </div>\n                <Separator />\n                <div className=\"flex-1 overflow-auto p-md\">\n                    <div className=\"flex flex-col gap-lg max-w-[720px]\">\n                        <FormView name=\"Webhook\" form={vm.form} />\n                        <EventsSelector\n                            availableEvents={vm.availableEvents}\n                            selectedEvents={vm.selectedEvents}\n                            onToggle={actions.toggleEvent}\n                            disabled={!vm.permissions.canEdit}\n                        />\n                        {!vm.isNew && vm.webhook?.signingSecret && (\n                            <SigningSecret secret={vm.webhook.signingSecret} />\n                        )}\n                    </div>\n                </div>\n            </div>\n            {vm.showDeliveries && vm.webhook && (\n                <WebhookDeliveriesDrawer\n                    webhookId={vm.webhook.id}\n                    open={vm.showDeliveries}\n                    onClose={() => actions.closeDeliveries()}\n                />\n            )}\n        </>\n    );\n});\n\nexport const WebhookFormView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        GetWebhookFeature.register(child);\n        CreateWebhookFeature.register(child);\n        UpdateWebhookFeature.register(child);\n        DeleteWebhookFeature.register(child);\n        ListAvailableEventsFeature.register(child);\n        WebhookPermissionsFeature.register(child);\n        WebhookFormPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <WebhookFormViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["WebhookFormViewInner","observer","presenter","useFeature","WebhookFormPresenterFeature","goToRoute","useRouter","route","useRoute","Routes","id","useEffect","vm","actions","OverlayLoader","Heading","Button","Separator","FormView","EventsSelector","SigningSecret","WebhookDeliveriesDrawer","WebhookFormView","container","useContainer","scopedContainer","useMemo","child","GetWebhookFeature","CreateWebhookFeature","UpdateWebhookFeature","DeleteWebhookFeature","ListAvailableEventsFeature","WebhookPermissionsFeature","DiContainerProvider"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAMA,uCAAuBC,SAAS;IAClC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,IAAI;IACtC,MAAMC,KAAKH,MAAM,MAAM,CAAC,EAAE;IAE1BI,UAAU;QACDT,UAAU,IAAI,CAACQ;IACxB,GAAG;QAACR;QAAWQ;KAAG;IAElB,MAAM,EAAEE,EAAE,EAAEC,OAAO,EAAE,GAAGX;IAExB,IAAIU,GAAG,OAAO,EACV,OAAO,WAAP,GAAO,oBAACE,eAAaA;IAGzB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,SAAOA;QAAC,OAAO;OACXH,GAAG,KAAK,GAAG,mBAAoBA,GAAG,OAAO,EAAE,QAAQ,+BAExD,oBAAC;QAAI,WAAU;OACV,CAACA,GAAG,KAAK,IAAI,WAAJ,GACN,oBAACI,QAAMA;QAAC,SAAQ;QAAY,SAAS,IAAMH,QAAQ,cAAc;OAAI,6BAIzE,oBAACG,QAAMA;QAAC,SAAQ;QAAY,SAAS,IAAMX,UAAUI,OAAO,IAAI;OAAG,WAGlEG,GAAG,WAAW,CAAC,OAAO,IAAI,WAAJ,GACnB,oBAACI,QAAMA;QACH,SAAQ;QACR,SAAS,IAAM,KAAKH,QAAQ,IAAI;QAChC,UAAUD,GAAG,MAAM;OAElBA,GAAG,MAAM,GAAG,cAAc,yBAK3C,oBAACK,WAASA,OAAAA,WAAAA,GACV,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,UAAQA;QAAC,MAAK;QAAU,MAAMN,GAAG,IAAI;sBACtC,oBAACO,gBAAcA;QACX,iBAAiBP,GAAG,eAAe;QACnC,gBAAgBA,GAAG,cAAc;QACjC,UAAUC,QAAQ,WAAW;QAC7B,UAAU,CAACD,GAAG,WAAW,CAAC,OAAO;QAEpC,CAACA,GAAG,KAAK,IAAIA,GAAG,OAAO,EAAE,iBAAiB,WAAjB,GACtB,oBAACQ,eAAaA;QAAC,QAAQR,GAAG,OAAO,CAAC,aAAa;WAK9DA,GAAG,cAAc,IAAIA,GAAG,OAAO,IAAI,WAAJ,GAC5B,oBAACS,yBAAuBA;QACpB,WAAWT,GAAG,OAAO,CAAC,EAAE;QACxB,MAAMA,GAAG,cAAc;QACvB,SAAS,IAAMC,QAAQ,eAAe;;AAK1D;AAEO,MAAMS,kBAAkB;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,UAAU,oBAAoB;QAC5CK,kBAAkB,QAAQ,CAACD;QAC3BE,qBAAqB,QAAQ,CAACF;QAC9BG,qBAAqB,QAAQ,CAACH;QAC9BI,qBAAqB,QAAQ,CAACJ;QAC9BK,2BAA2B,QAAQ,CAACL;QACpCM,0BAA0B,QAAQ,CAACN;QACnCvB,4BAA4B,QAAQ,CAACuB;QACrC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACO,qBAAmBA;QAAC,WAAWT;qBAC5B,oBAACzB,sCAAoBA;AAGjC"}
+{"version":3,"file":"admin/presentation/WebhookForm/components/WebhookFormView.js","sources":["../../../../../src/admin/presentation/WebhookForm/components/WebhookFormView.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature, useRoute } from \"@webiny/app\";\nimport { FormErrors, useRouter } from \"@webiny/app-admin\";\nimport { Button, Heading, OverlayLoader, Separator } from \"@webiny/admin-ui\";\nimport { FormView } from \"@webiny/app-admin/features/formModel/FormView.js\";\nimport { WebhookFormPresenterFeature } from \"../feature.js\";\nimport { GetWebhookFeature } from \"~/admin/features/getWebhook/feature.js\";\nimport { CreateWebhookFeature } from \"~/admin/features/createWebhook/feature.js\";\nimport { UpdateWebhookFeature } from \"~/admin/features/updateWebhook/feature.js\";\nimport { DeleteWebhookFeature } from \"~/admin/features/deleteWebhook/feature.js\";\nimport { ListAvailableEventsFeature } from \"~/admin/features/listAvailableEvents/feature.js\";\nimport { WebhookPermissionsFeature } from \"~/admin/features/permissions/feature.js\";\nimport { Routes } from \"~/admin/routes.js\";\nimport { SigningSecret } from \"./SigningSecret.js\";\nimport { WebhookDeliveriesDrawer } from \"~/admin/presentation/WebhookDeliveries/components/WebhookDeliveriesDrawer.js\";\n\nconst WebhookFormViewInner = observer(function WebhookFormViewInner() {\n    const { presenter } = useFeature(WebhookFormPresenterFeature);\n    const { goToRoute } = useRouter();\n    const { route } = useRoute(Routes.Form);\n    const id = route.params.id;\n\n    useEffect(() => {\n        void presenter.init(id);\n    }, [presenter, id]);\n\n    const { vm, actions } = presenter;\n\n    if (vm.loading) {\n        return <OverlayLoader />;\n    }\n\n    return (\n        <>\n            <div className=\"flex flex-col h-main-content\">\n                <div className=\"flex items-center justify-between py-sm px-md\">\n                    <Heading level={5}>\n                        {vm.isNew ? \"Create Webhook\" : (vm.webhook?.name ?? \"Edit Webhook\")}\n                    </Heading>\n                    <div className=\"flex gap-sm\">\n                        {!vm.isNew && (\n                            <Button variant=\"secondary\" onClick={() => actions.openDeliveries()}>\n                                Deliveries\n                            </Button>\n                        )}\n                        <Button variant=\"secondary\" onClick={() => goToRoute(Routes.List)}>\n                            Cancel\n                        </Button>\n                        {vm.permissions.canEdit && (\n                            <Button\n                                variant=\"primary\"\n                                onClick={() => void actions.save()}\n                                disabled={vm.saving}\n                            >\n                                {vm.saving ? \"Saving...\" : \"Save\"}\n                            </Button>\n                        )}\n                    </div>\n                </div>\n                <Separator />\n\n                <div className=\"p-lg\">\n                    <>\n                        <FormErrors form={vm.form} />\n                        <FormView name=\"Webhook\" form={vm.form} />\n                        {!vm.isNew && vm.webhook?.signingSecret && (\n                            <SigningSecret secret={vm.webhook.signingSecret} />\n                        )}\n                    </>\n                </div>\n            </div>\n            {vm.showDeliveries && vm.webhook && (\n                <WebhookDeliveriesDrawer\n                    webhookId={vm.webhook.id}\n                    open={vm.showDeliveries}\n                    onClose={() => actions.closeDeliveries()}\n                />\n            )}\n        </>\n    );\n});\n\nexport const WebhookFormView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        GetWebhookFeature.register(child);\n        CreateWebhookFeature.register(child);\n        UpdateWebhookFeature.register(child);\n        DeleteWebhookFeature.register(child);\n        ListAvailableEventsFeature.register(child);\n        WebhookPermissionsFeature.register(child);\n        WebhookFormPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <WebhookFormViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["WebhookFormViewInner","observer","presenter","useFeature","WebhookFormPresenterFeature","goToRoute","useRouter","route","useRoute","Routes","id","useEffect","vm","actions","OverlayLoader","Heading","Button","Separator","FormErrors","FormView","SigningSecret","WebhookDeliveriesDrawer","WebhookFormView","container","useContainer","scopedContainer","useMemo","child","GetWebhookFeature","CreateWebhookFeature","UpdateWebhookFeature","DeleteWebhookFeature","ListAvailableEventsFeature","WebhookPermissionsFeature","DiContainerProvider"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAMA,uCAAuBC,SAAS;IAClC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGC,SAASC,OAAO,IAAI;IACtC,MAAMC,KAAKH,MAAM,MAAM,CAAC,EAAE;IAE1BI,UAAU;QACDT,UAAU,IAAI,CAACQ;IACxB,GAAG;QAACR;QAAWQ;KAAG;IAElB,MAAM,EAAEE,EAAE,EAAEC,OAAO,EAAE,GAAGX;IAExB,IAAIU,GAAG,OAAO,EACV,OAAO,WAAP,GAAO,oBAACE,eAAaA;IAGzB,OAAO,WAAP,GACI,wDACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACC,SAAOA;QAAC,OAAO;OACXH,GAAG,KAAK,GAAG,mBAAoBA,GAAG,OAAO,EAAE,QAAQ,+BAExD,oBAAC;QAAI,WAAU;OACV,CAACA,GAAG,KAAK,IAAI,WAAJ,GACN,oBAACI,QAAMA;QAAC,SAAQ;QAAY,SAAS,IAAMH,QAAQ,cAAc;OAAI,6BAIzE,oBAACG,QAAMA;QAAC,SAAQ;QAAY,SAAS,IAAMX,UAAUI,OAAO,IAAI;OAAG,WAGlEG,GAAG,WAAW,CAAC,OAAO,IAAI,WAAJ,GACnB,oBAACI,QAAMA;QACH,SAAQ;QACR,SAAS,IAAM,KAAKH,QAAQ,IAAI;QAChC,UAAUD,GAAG,MAAM;OAElBA,GAAG,MAAM,GAAG,cAAc,yBAK3C,oBAACK,WAASA,OAAAA,WAAAA,GAEV,oBAAC;QAAI,WAAU;qBACX,wDACI,oBAACC,YAAUA;QAAC,MAAMN,GAAG,IAAI;sBACzB,oBAACO,UAAQA;QAAC,MAAK;QAAU,MAAMP,GAAG,IAAI;QACrC,CAACA,GAAG,KAAK,IAAIA,GAAG,OAAO,EAAE,iBAAiB,WAAjB,GACtB,oBAACQ,eAAaA;QAAC,QAAQR,GAAG,OAAO,CAAC,aAAa;WAK9DA,GAAG,cAAc,IAAIA,GAAG,OAAO,IAAI,WAAJ,GAC5B,oBAACS,yBAAuBA;QACpB,WAAWT,GAAG,OAAO,CAAC,EAAE;QACxB,MAAMA,GAAG,cAAc;QACvB,SAAS,IAAMC,QAAQ,eAAe;;AAK1D;AAEO,MAAMS,kBAAkB;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBC,QAAQ;QAC5B,MAAMC,QAAQJ,UAAU,oBAAoB;QAC5CK,kBAAkB,QAAQ,CAACD;QAC3BE,qBAAqB,QAAQ,CAACF;QAC9BG,qBAAqB,QAAQ,CAACH;QAC9BI,qBAAqB,QAAQ,CAACJ;QAC9BK,2BAA2B,QAAQ,CAACL;QACpCM,0BAA0B,QAAQ,CAACN;QACnCvB,4BAA4B,QAAQ,CAACuB;QACrC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACO,qBAAmBA;QAAC,WAAWT;qBAC5B,oBAACzB,sCAAoBA;AAGjC"}

package/admin/presentation/WebhookList/components/WebhookListView.js

@@ -5,12 +5,16 @@ import { useRouter } from "@webiny/app-admin";
 import { Button, DataTable, DropdownMenu, Heading, IconButton, Separator, Tag, Text, TimeAgo } from "@webiny/admin-ui";
 import { useConfirmationDialog, useSnackbar } from "@webiny/app-admin/hooks/index.js";
 import { ReactComponent } from "@webiny/icons/more_vert.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
 import { WebhookListPresenterFeature } from "../feature.js";
 import { ListWebhooksFeature } from "../../../features/ListWebhooks/feature.js";
 import { DeleteWebhookFeature } from "../../../features/deleteWebhook/feature.js";
 import { TriggerWebhookFeature } from "../../../features/triggerWebhook/feature.js";
 import { WebhookPermissionsFeature } from "../../../features/permissions/feature.js";
 import { Routes } from "../../../routes.js";
+import { ReactComponent as edit_svg_ReactComponent } from "@webiny/icons/edit.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as webhook_svg_ReactComponent } from "@webiny/icons/webhook.svg";
 const WebhookListView_WebhookListViewInner = observer(function() {
     const { presenter } = useFeature(WebhookListPresenterFeature);
     const { goToRoute } = useRouter();
@@ -95,20 +99,26 @@ const WebhookListView_WebhookListViewInner = observer(function() {
                             "aria-label": "Actions"
                         })
                     }, /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
-                        onSelect: ()=>goToRoute(Routes.Form, {
+                        icon: /*#__PURE__*/ react.createElement(edit_svg_ReactComponent, null),
+                        onClick: ()=>goToRoute(Routes.Form, {
                                 id: row.id
-                            })
-                    }, "Edit"), vm.permissions.canEdit && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
-                        onSelect: ()=>{
+                            }),
+                        text: "Edit"
+                    }), vm.permissions.canEdit && /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+                        icon: /*#__PURE__*/ react.createElement(webhook_svg_ReactComponent, null),
+                        onClick: ()=>{
                             presenter.actions.triggerWebhook(row.id).then(()=>{
                                 showSnackbar("Test event triggered.");
                             });
-                        }
-                    }, "Trigger Test"), vm.permissions.canDelete && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
-                        onSelect: ()=>{
+                        },
+                        text: "Trigger Test"
+                    }), vm.permissions.canDelete && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+                        onClick: ()=>{
                             showDeleteConfirmation(()=>presenter.actions.deleteWebhook(row.id));
-                        }
-                    }, "Delete"))),
+                        },
+                        icon: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
+                        text: "Delete"
+                    }))),
                 size: 56,
                 enableSorting: false,
                 enableHiding: false,
@@ -121,18 +131,20 @@ const WebhookListView_WebhookListViewInner = observer(function() {
         showDeleteConfirmation,
         showSnackbar
     ]);
+    const createButton = /*#__PURE__*/ react.createElement(Button, {
+        variant: "primary",
+        onClick: ()=>goToRoute(Routes.Form, {
+                id: "new"
+            }),
+        icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null)
+    }, "Create Webhook");
     return /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-col h-main-content"
     }, /*#__PURE__*/ react.createElement("div", {
         className: "flex items-center justify-between py-sm px-md"
     }, /*#__PURE__*/ react.createElement(Heading, {
         level: 5
-    }, "Webhooks"), vm.permissions.canCreate && /*#__PURE__*/ react.createElement(Button, {
-        variant: "primary",
-        onClick: ()=>goToRoute(Routes.Form, {
-                id: "new"
-            })
-    }, "Create Webhook")), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
+    }, "Webhooks"), vm.permissions.canCreate && createButton), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement("div", {
         className: "flex-1 overflow-auto"
     }, vm.list.pagination.loading || 0 !== vm.list.rows.length ? /*#__PURE__*/ react.createElement(DataTable, {
         columns: columns,
@@ -145,12 +157,7 @@ const WebhookListView_WebhookListViewInner = observer(function() {
         className: "flex flex-col items-center justify-center h-full gap-md"
     }, /*#__PURE__*/ react.createElement(Text, {
         className: "text-neutral-strong"
-    }, "No webhooks found."), vm.permissions.canCreate && /*#__PURE__*/ react.createElement(Button, {
-        variant: "primary",
-        onClick: ()=>goToRoute(Routes.Form, {
-                id: "new"
-            })
-    }, "Create Webhook"))));
+    }, "No webhooks found."), vm.permissions.canCreate && createButton)));
 });
 const WebhookListView = ()=>{
     const container = useContainer();

package/admin/presentation/WebhookList/components/WebhookListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WebhookList/components/WebhookListView.js","sources":["../../../../../src/admin/presentation/WebhookList/components/WebhookListView.tsx"],"sourcesContent":["import React, { useMemo, useEffect, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport {\n    Button,\n    DataTable,\n    DropdownMenu,\n    Heading,\n    IconButton,\n    Separator,\n    Tag,\n    Text,\n    TimeAgo\n} from \"@webiny/admin-ui\";\nimport type { DataTableSorting, OnDataTableSortingChange } from \"@webiny/admin-ui\";\nimport { useConfirmationDialog, useSnackbar } from \"@webiny/app-admin/hooks/index.js\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { WebhookListPresenterFeature } from \"../feature.js\";\nimport { ListWebhooksFeature } from \"~/admin/features/ListWebhooks/feature.js\";\nimport { DeleteWebhookFeature } from \"~/admin/features/deleteWebhook/feature.js\";\nimport { TriggerWebhookFeature } from \"~/admin/features/triggerWebhook/feature.js\";\nimport { WebhookPermissionsFeature } from \"~/admin/features/permissions/feature.js\";\nimport { Routes } from \"~/admin/routes.js\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\n\nconst WebhookListViewInner = observer(function WebhookListViewInner() {\n    const { presenter } = useFeature(WebhookListPresenterFeature);\n    const { goToRoute } = useRouter();\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    const { showSnackbar } = useSnackbar();\n\n    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({\n        title: \"Delete Webhook\",\n        message: \"Are you sure you want to delete this webhook?\"\n    });\n\n    const sorting: DataTableSorting = useMemo(() => {\n        const sort = vm.list.sort;\n        if (!sort || !sort.field) {\n            return [];\n        }\n        return [{ id: sort.field, desc: sort.direction === \"DESC\" }];\n    }, [vm.list.sort]);\n\n    const onSortingChange: OnDataTableSortingChange = useCallback(\n        updater => {\n            const next = typeof updater === \"function\" ? updater(sorting) : updater;\n            if (next.length > 0) {\n                const { id, desc } = next[0];\n                presenter.actions.sort.set(id, desc ? \"DESC\" : \"ASC\");\n            }\n        },\n        [sorting, presenter.actions.sort]\n    );\n\n    const columns = useMemo(\n        () => ({\n            name: {\n                header: \"Name\",\n                cell: (row: Webhook) => (\n                    <Text\n                        className=\"cursor-pointer text-primary hover:underline\"\n                        onClick={() => goToRoute(Routes.Form, { id: row.id })}\n                    >\n                        {row.name}\n                    </Text>\n                ),\n                enableSorting: true,\n                size: 200\n            },\n            endpointUrl: {\n                header: \"Endpoint\",\n                cell: (row: Webhook) => (\n                    <Text className=\"font-mono text-sm truncate\">{row.endpointUrl}</Text>\n                ),\n                size: 250\n            },\n            enabled: {\n                header: \"Status\",\n                cell: (row: Webhook) => (\n                    <Tag\n                        variant={row.enabled ? \"success\" : \"neutral-muted\"}\n                        content={row.enabled ? \"Active\" : \"Disabled\"}\n                    />\n                ),\n                enableSorting: true,\n                size: 100\n            },\n            createdOn: {\n                header: \"Created\",\n                cell: (row: Webhook) =>\n                    row.createdOn ? <TimeAgo datetime={row.createdOn} /> : <Text size=\"sm\">—</Text>,\n                enableSorting: true,\n                size: 120\n            },\n            actions: {\n                header: \" \",\n                cell: (row: Webhook) => (\n                    <DropdownMenu\n                        trigger={\n                            <IconButton\n                                icon={<MoreVerticalIcon />}\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                aria-label=\"Actions\"\n                            />\n                        }\n                    >\n                        <DropdownMenu.Item onSelect={() => goToRoute(Routes.Form, { id: row.id })}>\n                            Edit\n                        </DropdownMenu.Item>\n                        {vm.permissions.canEdit && (\n                            <DropdownMenu.Item\n                                onSelect={() => {\n                                    void presenter.actions.triggerWebhook(row.id).then(() => {\n                                        showSnackbar(\"Test event triggered.\");\n                                    });\n                                }}\n                            >\n                                Trigger Test\n                            </DropdownMenu.Item>\n                        )}\n                        {vm.permissions.canDelete && (\n                            <>\n                                <DropdownMenu.Separator />\n                                <DropdownMenu.Item\n                                    onSelect={() => {\n                                        showDeleteConfirmation(() =>\n                                            presenter.actions.deleteWebhook(row.id)\n                                        );\n                                    }}\n                                >\n                                    Delete\n                                </DropdownMenu.Item>\n                            </>\n                        )}\n                    </DropdownMenu>\n                ),\n                size: 56,\n                enableSorting: false,\n                enableHiding: false,\n                enableResizing: false\n            }\n        }),\n        [vm.permissions, presenter.actions, goToRoute, showDeleteConfirmation, showSnackbar]\n    );\n\n    return (\n        <div className=\"flex flex-col h-main-content\">\n            <div className=\"flex items-center justify-between py-sm px-md\">\n                <Heading level={5}>Webhooks</Heading>\n                {vm.permissions.canCreate && (\n                    <Button variant=\"primary\" onClick={() => goToRoute(Routes.Form, { id: \"new\" })}>\n                        Create Webhook\n                    </Button>\n                )}\n            </div>\n            <Separator />\n            <div className=\"flex-1 overflow-auto\">\n                {!vm.list.pagination.loading && vm.list.rows.length === 0 ? (\n                    <div className=\"flex flex-col items-center justify-center h-full gap-md\">\n                        <Text className=\"text-neutral-strong\">No webhooks found.</Text>\n                        {vm.permissions.canCreate && (\n                            <Button\n                                variant=\"primary\"\n                                onClick={() => goToRoute(Routes.Form, { id: \"new\" })}\n                            >\n                                Create Webhook\n                            </Button>\n                        )}\n                    </div>\n                ) : (\n                    <DataTable<Webhook>\n                        columns={columns}\n                        data={vm.list.rows}\n                        loading={vm.list.pagination.loading}\n                        sorting={sorting}\n                        onSortingChange={onSortingChange}\n                        stickyHeader\n                    />\n                )}\n            </div>\n        </div>\n    );\n});\n\nexport const WebhookListView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ListWebhooksFeature.register(child);\n        DeleteWebhookFeature.register(child);\n        TriggerWebhookFeature.register(child);\n        WebhookPermissionsFeature.register(child);\n        WebhookListPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <WebhookListViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["WebhookListViewInner","observer","presenter","useFeature","WebhookListPresenterFeature","goToRoute","useRouter","useEffect","vm","showSnackbar","useSnackbar","showDeleteConfirmation","useConfirmationDialog","sorting","useMemo","sort","onSortingChange","useCallback","updater","next","id","desc","columns","row","Text","Routes","Tag","TimeAgo","DropdownMenu","IconButton","MoreVerticalIcon","Heading","Button","Separator","DataTable","WebhookListView","container","useContainer","scopedContainer","child","ListWebhooksFeature","DeleteWebhookFeature","TriggerWebhookFeature","WebhookPermissionsFeature","DiContainerProvider"],"mappings":";;;;;;;;;;;;;AA0BA,MAAMA,uCAAuBC,SAAS;IAClC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IAEtBC,UAAU;QACNL,UAAU,IAAI;IAClB,GAAG;QAACA;KAAU;IAEd,MAAM,EAAEM,EAAE,EAAE,GAAGN;IAEf,MAAM,EAAEO,YAAY,EAAE,GAAGC;IAEzB,MAAM,EAAE,kBAAkBC,sBAAsB,EAAE,GAAGC,sBAAsB;QACvE,OAAO;QACP,SAAS;IACb;IAEA,MAAMC,UAA4BC,QAAQ;QACtC,MAAMC,OAAOP,GAAG,IAAI,CAAC,IAAI;QACzB,IAAI,CAACO,QAAQ,CAACA,KAAK,KAAK,EACpB,OAAO,EAAE;QAEb,OAAO;YAAC;gBAAE,IAAIA,KAAK,KAAK;gBAAE,MAAMA,AAAmB,WAAnBA,KAAK,SAAS;YAAY;SAAE;IAChE,GAAG;QAACP,GAAG,IAAI,CAAC,IAAI;KAAC;IAEjB,MAAMQ,kBAA4CC,YAC9CC,CAAAA;QACI,MAAMC,OAAO,AAAmB,cAAnB,OAAOD,UAAyBA,QAAQL,WAAWK;QAChE,IAAIC,KAAK,MAAM,GAAG,GAAG;YACjB,MAAM,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGF,IAAI,CAAC,EAAE;YAC5BjB,UAAU,OAAO,CAAC,IAAI,CAAC,GAAG,CAACkB,IAAIC,OAAO,SAAS;QACnD;IACJ,GACA;QAACR;QAASX,UAAU,OAAO,CAAC,IAAI;KAAC;IAGrC,MAAMoB,UAAUR,QACZ,IAAO;YACH,MAAM;gBACF,QAAQ;gBACR,MAAM,CAACS,MAAAA,WAAAA,GACH,oBAACC,MAAIA;wBACD,WAAU;wBACV,SAAS,IAAMnB,UAAUoB,OAAO,IAAI,EAAE;gCAAE,IAAIF,IAAI,EAAE;4BAAC;uBAElDA,IAAI,IAAI;gBAGjB,eAAe;gBACf,MAAM;YACV;YACA,aAAa;gBACT,QAAQ;gBACR,MAAM,CAACA,MAAAA,WAAAA,GACH,oBAACC,MAAIA;wBAAC,WAAU;uBAA8BD,IAAI,WAAW;gBAEjE,MAAM;YACV;YACA,SAAS;gBACL,QAAQ;gBACR,MAAM,CAACA,MAAAA,WAAAA,GACH,oBAACG,KAAGA;wBACA,SAASH,IAAI,OAAO,GAAG,YAAY;wBACnC,SAASA,IAAI,OAAO,GAAG,WAAW;;gBAG1C,eAAe;gBACf,MAAM;YACV;YACA,WAAW;gBACP,QAAQ;gBACR,MAAM,CAACA,MACHA,IAAI,SAAS,GAAG,WAAH,GAAG,oBAACI,SAAOA;wBAAC,UAAUJ,IAAI,SAAS;uCAAO,oBAACC,MAAIA;wBAAC,MAAK;uBAAK;gBAC3E,eAAe;gBACf,MAAM;YACV;YACA,SAAS;gBACL,QAAQ;gBACR,MAAM,CAACD,MAAAA,WAAAA,GACH,oBAACK,cAAYA;wBACT,uBACI,oBAACC,YAAUA;4BACP,oBAAM,oBAACC,gBAAgBA;4BACvB,SAAQ;4BACR,MAAK;4BACL,cAAW;;qCAInB,oBAACF,aAAa,IAAI;wBAAC,UAAU,IAAMvB,UAAUoB,OAAO,IAAI,EAAE;gCAAE,IAAIF,IAAI,EAAE;4BAAC;uBAAI,SAG1Ef,GAAG,WAAW,CAAC,OAAO,IAAI,WAAJ,GACnB,oBAACoB,aAAa,IAAI;wBACd,UAAU;4BACD1B,UAAU,OAAO,CAAC,cAAc,CAACqB,IAAI,EAAE,EAAE,IAAI,CAAC;gCAC/Cd,aAAa;4BACjB;wBACJ;uBACH,iBAIJD,GAAG,WAAW,CAAC,SAAS,IAAI,WAAJ,GACrB,wDACI,oBAACoB,aAAa,SAAS,uBACvB,oBAACA,aAAa,IAAI;wBACd,UAAU;4BACNjB,uBAAuB,IACnBT,UAAU,OAAO,CAAC,aAAa,CAACqB,IAAI,EAAE;wBAE9C;uBACH;gBAOjB,MAAM;gBACN,eAAe;gBACf,cAAc;gBACd,gBAAgB;YACpB;QACJ,IACA;QAACf,GAAG,WAAW;QAAEN,UAAU,OAAO;QAAEG;QAAWM;QAAwBF;KAAa;IAGxF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAAC;QAAI,WAAU;qBACX,oBAACsB,SAAOA;QAAC,OAAO;OAAG,aAClBvB,GAAG,WAAW,CAAC,SAAS,IAAI,WAAJ,GACrB,oBAACwB,QAAMA;QAAC,SAAQ;QAAU,SAAS,IAAM3B,UAAUoB,OAAO,IAAI,EAAE;gBAAE,IAAI;YAAM;OAAI,kCAKxF,oBAACQ,WAASA,OAAAA,WAAAA,GACV,oBAAC;QAAI,WAAU;OACV,AAACzB,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,IAAIA,AAAwB,MAAxBA,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAOtC,cAMT,oBAAC0B,WAASA;QACN,SAASZ;QACT,MAAMd,GAAG,IAAI,CAAC,IAAI;QAClB,SAASA,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO;QACnC,SAASK;QACT,iBAAiBG;QACjB;SAnBoD,WAAJ,GACpD,oBAAC;QAAI,WAAU;qBACX,oBAACQ,MAAIA;QAAC,WAAU;OAAsB,uBACrChB,GAAG,WAAW,CAAC,SAAS,IAAI,WAAJ,GACrB,oBAACwB,QAAMA;QACH,SAAQ;QACR,SAAS,IAAM3B,UAAUoB,OAAO,IAAI,EAAE;gBAAE,IAAI;YAAM;OACrD;AAkB7B;AAEO,MAAMU,kBAAkB;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBxB,QAAQ;QAC5B,MAAMyB,QAAQH,UAAU,oBAAoB;QAC5CI,oBAAoB,QAAQ,CAACD;QAC7BE,qBAAqB,QAAQ,CAACF;QAC9BG,sBAAsB,QAAQ,CAACH;QAC/BI,0BAA0B,QAAQ,CAACJ;QACnCnC,4BAA4B,QAAQ,CAACmC;QACrC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACK,qBAAmBA;QAAC,WAAWN;qBAC5B,oBAACtC,sCAAoBA;AAGjC"}
+{"version":3,"file":"admin/presentation/WebhookList/components/WebhookListView.js","sources":["../../../../../src/admin/presentation/WebhookList/components/WebhookListView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature } from \"@webiny/app\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport type { DataTableSorting, OnDataTableSortingChange } from \"@webiny/admin-ui\";\nimport {\n    Button,\n    DataTable,\n    DropdownMenu,\n    Heading,\n    IconButton,\n    Separator,\n    Tag,\n    Text,\n    TimeAgo\n} from \"@webiny/admin-ui\";\nimport { useConfirmationDialog, useSnackbar } from \"@webiny/app-admin/hooks/index.js\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { WebhookListPresenterFeature } from \"../feature.js\";\nimport { ListWebhooksFeature } from \"~/admin/features/ListWebhooks/feature.js\";\nimport { DeleteWebhookFeature } from \"~/admin/features/deleteWebhook/feature.js\";\nimport { TriggerWebhookFeature } from \"~/admin/features/triggerWebhook/feature.js\";\nimport { WebhookPermissionsFeature } from \"~/admin/features/permissions/feature.js\";\nimport { Routes } from \"~/admin/routes.js\";\nimport type { Webhook } from \"~/admin/shared/types.js\";\nimport { ReactComponent as Edit } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as Delete } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as WebhookIcon } from \"@webiny/icons/webhook.svg\";\n\nconst WebhookListViewInner = observer(function WebhookListViewInner() {\n    const { presenter } = useFeature(WebhookListPresenterFeature);\n    const { goToRoute } = useRouter();\n\n    useEffect(() => {\n        presenter.init();\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    const { showSnackbar } = useSnackbar();\n\n    const { showConfirmation: showDeleteConfirmation } = useConfirmationDialog({\n        title: \"Delete Webhook\",\n        message: \"Are you sure you want to delete this webhook?\"\n    });\n\n    const sorting: DataTableSorting = useMemo(() => {\n        const sort = vm.list.sort;\n        if (!sort || !sort.field) {\n            return [];\n        }\n        return [{ id: sort.field, desc: sort.direction === \"DESC\" }];\n    }, [vm.list.sort]);\n\n    const onSortingChange: OnDataTableSortingChange = useCallback(\n        updater => {\n            const next = typeof updater === \"function\" ? updater(sorting) : updater;\n            if (next.length > 0) {\n                const { id, desc } = next[0];\n                presenter.actions.sort.set(id, desc ? \"DESC\" : \"ASC\");\n            }\n        },\n        [sorting, presenter.actions.sort]\n    );\n\n    const columns = useMemo(\n        () => ({\n            name: {\n                header: \"Name\",\n                cell: (row: Webhook) => (\n                    <Text\n                        className=\"cursor-pointer text-primary hover:underline\"\n                        onClick={() => goToRoute(Routes.Form, { id: row.id })}\n                    >\n                        {row.name}\n                    </Text>\n                ),\n                enableSorting: true,\n                size: 200\n            },\n            endpointUrl: {\n                header: \"Endpoint\",\n                cell: (row: Webhook) => (\n                    <Text className=\"font-mono text-sm truncate\">{row.endpointUrl}</Text>\n                ),\n                size: 250\n            },\n            enabled: {\n                header: \"Status\",\n                cell: (row: Webhook) => (\n                    <Tag\n                        variant={row.enabled ? \"success\" : \"neutral-muted\"}\n                        content={row.enabled ? \"Active\" : \"Disabled\"}\n                    />\n                ),\n                enableSorting: true,\n                size: 100\n            },\n            createdOn: {\n                header: \"Created\",\n                cell: (row: Webhook) =>\n                    row.createdOn ? <TimeAgo datetime={row.createdOn} /> : <Text size=\"sm\">—</Text>,\n                enableSorting: true,\n                size: 120\n            },\n            actions: {\n                header: \" \",\n                cell: (row: Webhook) => (\n                    <DropdownMenu\n                        trigger={\n                            <IconButton\n                                icon={<MoreVerticalIcon />}\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                aria-label=\"Actions\"\n                            />\n                        }\n                    >\n                        <DropdownMenu.Item\n                            icon={<Edit />}\n                            onClick={() => goToRoute(Routes.Form, { id: row.id })}\n                            text={\"Edit\"}\n                        />\n                        {vm.permissions.canEdit && (\n                            <DropdownMenu.Item\n                                icon={<WebhookIcon />}\n                                onClick={() => {\n                                    void presenter.actions.triggerWebhook(row.id).then(() => {\n                                        showSnackbar(\"Test event triggered.\");\n                                    });\n                                }}\n                                text={\"Trigger Test\"}\n                            />\n                        )}\n                        {vm.permissions.canDelete && (\n                            <>\n                                <DropdownMenu.Separator />\n                                <DropdownMenu.Item\n                                    onClick={() => {\n                                        showDeleteConfirmation(() =>\n                                            presenter.actions.deleteWebhook(row.id)\n                                        );\n                                    }}\n                                    icon={<Delete />}\n                                    text={\"Delete\"}\n                                />\n                            </>\n                        )}\n                    </DropdownMenu>\n                ),\n                size: 56,\n                enableSorting: false,\n                enableHiding: false,\n                enableResizing: false\n            }\n        }),\n        [vm.permissions, presenter.actions, goToRoute, showDeleteConfirmation, showSnackbar]\n    );\n\n    const createButton = (\n        <Button\n            variant=\"primary\"\n            onClick={() => goToRoute(Routes.Form, { id: \"new\" })}\n            icon={<AddIcon />}\n        >\n            Create Webhook\n        </Button>\n    );\n\n    return (\n        <div className=\"flex flex-col h-main-content\">\n            <div className=\"flex items-center justify-between py-sm px-md\">\n                <Heading level={5}>Webhooks</Heading>\n                {vm.permissions.canCreate && createButton}\n            </div>\n            <Separator />\n            <div className=\"flex-1 overflow-auto\">\n                {!vm.list.pagination.loading && vm.list.rows.length === 0 ? (\n                    <div className=\"flex flex-col items-center justify-center h-full gap-md\">\n                        <Text className=\"text-neutral-strong\">No webhooks found.</Text>\n                        {vm.permissions.canCreate && createButton}\n                    </div>\n                ) : (\n                    <DataTable<Webhook>\n                        columns={columns}\n                        data={vm.list.rows}\n                        loading={vm.list.pagination.loading}\n                        sorting={sorting}\n                        onSortingChange={onSortingChange}\n                        stickyHeader\n                    />\n                )}\n            </div>\n        </div>\n    );\n});\n\nexport const WebhookListView = () => {\n    const container = useContainer();\n\n    const scopedContainer = useMemo(() => {\n        const child = container.createChildContainer();\n        ListWebhooksFeature.register(child);\n        DeleteWebhookFeature.register(child);\n        TriggerWebhookFeature.register(child);\n        WebhookPermissionsFeature.register(child);\n        WebhookListPresenterFeature.register(child);\n        return child;\n    }, []);\n\n    return (\n        <DiContainerProvider container={scopedContainer}>\n            <WebhookListViewInner />\n        </DiContainerProvider>\n    );\n};\n"],"names":["WebhookListViewInner","observer","presenter","useFeature","WebhookListPresenterFeature","goToRoute","useRouter","useEffect","vm","showSnackbar","useSnackbar","showDeleteConfirmation","useConfirmationDialog","sorting","useMemo","sort","onSortingChange","useCallback","updater","next","id","desc","columns","row","Text","Routes","Tag","TimeAgo","DropdownMenu","IconButton","MoreVerticalIcon","Edit","WebhookIcon","Delete","createButton","Button","AddIcon","Heading","Separator","DataTable","WebhookListView","container","useContainer","scopedContainer","child","ListWebhooksFeature","DeleteWebhookFeature","TriggerWebhookFeature","WebhookPermissionsFeature","DiContainerProvider"],"mappings":"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"}

package/admin/presentation/WebhookSettings/WebhookSettingsPresenter.d.ts

@@ -0,0 +1,21 @@
+import { type IWebhookSettingsPresenter, type IWebhookSettingsViewModel } from "./abstractions.js";
+import { GetWebhookSettingsUseCase } from "../../../admin/features/getWebhookSettings/abstractions.js";
+import { UpdateWebhookSettingsUseCase } from "../../../admin/features/updateWebhookSettings/abstractions.js";
+import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
+declare class WebhookSettingsPresenterImpl implements IWebhookSettingsPresenter {
+    private readonly formModelFactory;
+    private readonly getWebhookSettingsUseCase;
+    private readonly updateWebhookSettingsUseCase;
+    private _loading;
+    private _saving;
+    private _form;
+    get vm(): IWebhookSettingsViewModel;
+    constructor(formModelFactory: FormModelFactory.Interface, getWebhookSettingsUseCase: GetWebhookSettingsUseCase.Interface, updateWebhookSettingsUseCase: UpdateWebhookSettingsUseCase.Interface);
+    private buildForm;
+    save(): Promise<boolean>;
+    init(): Promise<void>;
+}
+export declare const WebhookSettingsPresenter: typeof WebhookSettingsPresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IWebhookSettingsPresenter>;
+};
+export {};

package/admin/presentation/WebhookSettings/WebhookSettingsPresenter.js

@@ -0,0 +1,83 @@
+import { computed, makeAutoObservable, runInAction } from "mobx";
+import { WebhookSettingsPresenter } from "./abstractions.js";
+import { GetWebhookSettingsUseCase } from "../../features/getWebhookSettings/abstractions.js";
+import { UpdateWebhookSettingsUseCase } from "../../features/updateWebhookSettings/abstractions.js";
+import { FormModelFactory } from "@webiny/app-admin/features/formModel/abstractions.js";
+class WebhookSettingsPresenterImpl {
+    get vm() {
+        return {
+            loading: this._loading,
+            saving: this._saving,
+            form: this._form.vm
+        };
+    }
+    constructor(formModelFactory, getWebhookSettingsUseCase, updateWebhookSettingsUseCase){
+        this.formModelFactory = formModelFactory;
+        this.getWebhookSettingsUseCase = getWebhookSettingsUseCase;
+        this.updateWebhookSettingsUseCase = updateWebhookSettingsUseCase;
+        this._loading = false;
+        this._saving = false;
+        this._form = this.buildForm();
+        makeAutoObservable(this, {
+            vm: computed
+        });
+    }
+    buildForm() {
+        return this.formModelFactory.create({
+            fields: (fields)=>({
+                    signingSecret: fields.text().label("Signing Secret").placeholder("Enter a signing secret for webhook payloads").description("Used to sign webhook payloads so receivers can verify authenticity.")
+                }),
+            layout: (layout)=>[
+                    layout.row("signingSecret")
+                ]
+        });
+    }
+    async save() {
+        const data = await this._form.submit();
+        if (false === data) return false;
+        this._saving = true;
+        try {
+            const settings = await this.updateWebhookSettingsUseCase.execute({
+                signingSecret: data.signingSecret || void 0
+            });
+            runInAction(()=>{
+                this._form.setData({
+                    signingSecret: settings.signingSecret ?? ""
+                });
+            });
+        } finally{
+            runInAction(()=>{
+                this._saving = false;
+            });
+        }
+        return true;
+    }
+    async init() {
+        this._loading = true;
+        try {
+            const settings = await this.getWebhookSettingsUseCase.execute();
+            runInAction(()=>{
+                this._form = this.buildForm();
+                this._form.setData({
+                    signingSecret: settings.signingSecret ?? ""
+                });
+                this._loading = false;
+            });
+        } catch  {
+            runInAction(()=>{
+                this._loading = false;
+            });
+        }
+    }
+}
+const WebhookSettingsPresenter_WebhookSettingsPresenter = WebhookSettingsPresenter.createImplementation({
+    implementation: WebhookSettingsPresenterImpl,
+    dependencies: [
+        FormModelFactory,
+        GetWebhookSettingsUseCase,
+        UpdateWebhookSettingsUseCase
+    ]
+});
+export { WebhookSettingsPresenter_WebhookSettingsPresenter as WebhookSettingsPresenter };
+
+//# sourceMappingURL=WebhookSettingsPresenter.js.map