@webiny/webhooks 6.4.0-beta.2 → 6.4.0-beta.4

package/admin/presentation/WebhookForm/WebhookFormPresenter.js

@@ -14,14 +14,11 @@ class WebhookFormPresenterImpl {
             saving: this._saving,
             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){
@@ -36,59 +33,9 @@ class WebhookFormPresenterImpl {
         this._saving = false;
         this._isNew = false;
         this._webhook = null;
-        this._showDeliveries = false;
-        this._availableEvents = [];
         this._webhookId = null;
-        this._selectedEvents = new Set();
-        this.actions = {
-            save: async ()=>{
-                const data = await this._form.submit();
-                if (false === data) return;
-                this._saving = true;
-                try {
-                    const merged = {
-                        name: data.name,
-                        slug: data.slug,
-                        endpointUrl: data.endpointUrl,
-                        description: data.description || void 0,
-                        enabled: data.enabled,
-                        events: Array.from(this._selectedEvents)
-                    };
-                    if (this._isNew) {
-                        const created = await this.createWebhookUseCase.execute(merged);
-                        runInAction(()=>{
-                            this._webhook = created;
-                            this._webhookId = created.id;
-                            this._isNew = false;
-                            this._form.field("slug").setDisabled(true);
-                        });
-                    } else {
-                        const updated = await this.updateWebhookUseCase.execute(this._webhookId, merged);
-                        runInAction(()=>{
-                            this._webhook = updated;
-                        });
-                    }
-                } finally{
-                    runInAction(()=>{
-                        this._saving = false;
-                    });
-                }
-            },
-            deleteWebhook: async ()=>{
-                if (!this._webhookId || this._isNew) return;
-                await this.deleteWebhookUseCase.execute(this._webhookId);
-            },
-            openDeliveries: ()=>{
-                this._showDeliveries = true;
-            },
-            closeDeliveries: ()=>{
-                this._showDeliveries = false;
-            },
-            toggleEvent: (eventName)=>{
-                if (this._selectedEvents.has(eventName)) this._selectedEvents.delete(eventName);
-                else this._selectedEvents.add(eventName);
-            }
-        };
+        this._entityFieldNames = [];
+        this._entityGroups = new Map();
         this._form = this.buildForm();
         makeAutoObservable(this, {
             vm: computed
@@ -98,7 +45,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 +61,140 @@ class WebhookFormPresenterImpl {
                 ]
         });
     }
+    entityFieldName(appLabel, entityLabel) {
+        const slug = `${appLabel}_${entityLabel}`.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+        return `events_${slug}`;
+    }
+    addEventFields(events) {
+        const grouped = new Map();
+        for (const event of events){
+            let appMap = grouped.get(event.appLabel);
+            if (!appMap) {
+                appMap = new Map();
+                grouped.set(event.appLabel, appMap);
+            }
+            const existing = appMap.get(event.entityLabel) ?? [];
+            existing.push(event);
+            appMap.set(event.entityLabel, existing);
+        }
+        this._entityGroups = grouped;
+        this._entityFieldNames = [];
+        this._form.fields((fields)=>{
+            const result = {};
+            for (const [appLabel, entities] of grouped)for (const [entityLabel, entityEvents] of entities){
+                const fieldName = this.entityFieldName(appLabel, entityLabel);
+                this._entityFieldNames.push(fieldName);
+                result[fieldName] = fields.object().label(entityLabel).renderer("objectAccordionSingle", {
+                    open: false
+                }).fields((f)=>({
+                        selected: f.text().list().options(entityEvents.map((e)=>({
+                                label: e.label,
+                                value: e.eventName
+                            }))).renderer("checkboxes")
+                    }));
+            }
+            return result;
+        });
+        this._form.setLayout((layout)=>{
+            const rows = [
+                layout.row("name", "slug"),
+                layout.row("endpointUrl"),
+                layout.row("description"),
+                layout.row("enabled")
+            ];
+            for (const [appLabel, entities] of grouped){
+                rows.push(layout.separator());
+                rows.push(layout.element("sectionHeading", {
+                    label: appLabel
+                }));
+                for (const [entityLabel] of entities){
+                    const fieldName = this.entityFieldName(appLabel, entityLabel);
+                    rows.push(layout.object(fieldName, (inner)=>[
+                            inner.row("selected")
+                        ]));
+                }
+            }
+            return rows;
+        });
+        this._form.addRule((form)=>{
+            if (0 === this._entityFieldNames.length) return [];
+            for (const fieldName of this._entityFieldNames){
+                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._entityFieldNames){
+            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 [appLabel, entities] of this._entityGroups)for (const [entityLabel, entityEvents] of entities){
+            const fieldName = this.entityFieldName(appLabel, entityLabel);
+            const objectField = this._form.field(fieldName).as("object");
+            const selectedField = objectField.children.get("selected");
+            if (!selectedField) continue;
+            const selected = entityEvents.filter((e)=>eventSet.has(e.eventName)).map((e)=>e.eventName);
+            selectedField.setValue(selected);
+        }
+    }
+    async save() {
+        const data = await this._form.submit();
+        if (false === data) return false;
+        runInAction(()=>{
+            this._saving = true;
+        });
+        try {
+            const merged = {
+                name: data.name,
+                slug: data.slug,
+                endpointUrl: data.endpointUrl,
+                description: data.description || void 0,
+                enabled: data.enabled,
+                events: this.collectEvents()
+            };
+            if (this._isNew) {
+                const created = await this.createWebhookUseCase.execute(merged);
+                runInAction(()=>{
+                    this._webhook = created;
+                    this._webhookId = created.id;
+                    this._isNew = false;
+                    this._form.field("slug").setDisabled(true);
+                });
+            } else {
+                const updated = await this.updateWebhookUseCase.execute(this._webhookId, merged);
+                runInAction(()=>{
+                    this._webhook = updated;
+                });
+            }
+        } finally{
+            runInAction(()=>{
+                this._saving = false;
+            });
+        }
+        return true;
+    }
+    async deleteWebhook() {
+        if (!this._webhookId || this._isNew) return;
+        await this.deleteWebhookUseCase.execute(this._webhookId);
+    }
     async init(id) {
         this._loading = true;
         this._isNew = "new" === id;
@@ -119,8 +203,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 +214,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 +224,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} 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    type ILayoutNodeBuilder\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 _webhookId: string | null = null;\n    private _form: IFormModel;\n    private _entityFieldNames: string[] = [];\n    private _entityGroups: Map<string, 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            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 entityFieldName(appLabel: string, entityLabel: string): string {\n        const slug = `${appLabel}_${entityLabel}`\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, Map<string, WebhookEvent[]>>();\n        for (const event of events) {\n            let appMap = grouped.get(event.appLabel);\n            if (!appMap) {\n                appMap = new Map();\n                grouped.set(event.appLabel, appMap);\n            }\n            const existing = appMap.get(event.entityLabel) ?? [];\n            existing.push(event);\n            appMap.set(event.entityLabel, existing);\n        }\n\n        this._entityGroups = grouped;\n        this._entityFieldNames = [];\n\n        this._form.fields(fields => {\n            const result: Record<string, ReturnType<typeof fields.object>> = {};\n\n            for (const [appLabel, entities] of grouped) {\n                for (const [entityLabel, entityEvents] of entities) {\n                    const fieldName = this.entityFieldName(appLabel, entityLabel);\n                    this._entityFieldNames.push(fieldName);\n\n                    result[fieldName] = fields\n                        .object()\n                        .label(entityLabel)\n                        .renderer(\"objectAccordionSingle\", { open: false })\n                        .fields(f => {\n                            return {\n                                selected: f\n                                    .text()\n                                    .list()\n                                    .options(\n                                        entityEvents.map(e => ({\n                                            label: e.label,\n                                            value: e.eventName\n                                        }))\n                                    )\n                                    .renderer(\"checkboxes\")\n                            };\n                        });\n                }\n            }\n\n            return result;\n        });\n\n        this._form.setLayout(layout => {\n            const rows: ILayoutNodeBuilder[] = [\n                layout.row(\"name\", \"slug\"),\n                layout.row(\"endpointUrl\"),\n                layout.row(\"description\"),\n                layout.row(\"enabled\")\n            ];\n\n            for (const [appLabel, entities] of grouped) {\n                rows.push(layout.separator());\n                rows.push(layout.element(\"sectionHeading\", { label: appLabel }));\n\n                for (const [entityLabel] of entities) {\n                    const fieldName = this.entityFieldName(appLabel, entityLabel);\n                    rows.push(layout.object(fieldName, inner => [inner.row(\"selected\")]));\n                }\n            }\n\n            return rows;\n        });\n\n        this._form.addRule(form => {\n            if (this._entityFieldNames.length === 0) {\n                return [];\n            }\n            for (const fieldName of this._entityFieldNames) {\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._entityFieldNames) {\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 [appLabel, entities] of this._entityGroups) {\n            for (const [entityLabel, entityEvents] of entities) {\n                const fieldName = this.entityFieldName(appLabel, entityLabel);\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 = entityEvents\n                    .filter(e => eventSet.has(e.eventName))\n                    .map(e => e.eventName);\n                selectedField.setValue(selected);\n            }\n        }\n    }\n\n    public async save(): Promise<boolean> {\n        const data = await this._form.submit<Record<string, unknown>>();\n        if (data === false) {\n            return false;\n        }\n\n        runInAction(() => {\n            this._saving = true;\n        });\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(this._webhookId!, merged);\n\n                runInAction(() => {\n                    this._webhook = updated;\n                });\n            }\n        } finally {\n            runInAction(() => {\n                this._saving = false;\n            });\n        }\n\n        return true;\n    }\n\n    public async deleteWebhook(): Promise<void> {\n        if (!this._webhookId || this._isNew) {\n            return;\n        }\n        await this.deleteWebhookUseCase.execute(this._webhookId);\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","makeAutoObservable","computed","fields","form","name","String","layout","appLabel","entityLabel","slug","events","grouped","event","appMap","existing","result","entities","entityEvents","fieldName","f","e","rows","inner","objectField","selectedField","values","allEvents","webhookEvents","eventSet","Set","selected","data","runInAction","merged","undefined","created","updated","id","eventsPromise","webhook","Promise","WebhookFormPresenter","Abstraction","FormModelFactory","GetWebhookUseCase","CreateWebhookUseCase","UpdateWebhookUseCase","DeleteWebhookUseCase","ListAvailableEventsUseCase","WebhookPermissions"],"mappings":";;;;;;;;;AAoBA,MAAMA;IAUF,IAAW,KAA4B;QACnC,OAAO;YACH,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,IAAI,CAAC,OAAO;YACpB,OAAO,IAAI,CAAC,MAAM;YAClB,SAAS,IAAI,CAAC,QAAQ;YACtB,aAAa;gBACT,SAAS,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;gBAClC,WAAW,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;YAC1C;YACA,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE;QACvB;IACJ;IAEA,YACqBC,gBAA4C,EAC5CC,iBAA8C,EAC9CC,oBAAoD,EACpDC,oBAAoD,EACpDC,oBAAoD,EACpDC,0BAAgE,EAChEC,WAAyC,CAC5D;aAPmBN,gBAAgB,GAAhBA;aACAC,iBAAiB,GAAjBA;aACAC,oBAAoB,GAApBA;aACAC,oBAAoB,GAApBA;aACAC,oBAAoB,GAApBA;aACAC,0BAA0B,GAA1BA;aACAC,WAAW,GAAXA;aA9Bb,QAAQ,GAAG;aACX,OAAO,GAAG;aACV,MAAM,GAAG;aACT,QAAQ,GAAmB;aAC3B,UAAU,GAAkB;aAE5B,iBAAiB,GAAa,EAAE;aAChC,aAAa,GAA6C,IAAIC;QAyBlE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;QAE3BC,mBAAmB,IAAI,EAAE;YAAE,IAAIC;QAAS;IAC5C;IAEQ,YAAwB;QAC5B,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC;YAChC,QAAQC,CAAAA,SAAW;oBACf,MAAMA,OAAO,IAAI,GAAG,KAAK,CAAC,QAAQ,QAAQ,CAAC;oBAC3C,MAAMA,OACD,IAAI,GACJ,KAAK,CAAC,QACN,QAAQ,CAAC,oBACT,kBAAkB,CAACC,CAAAA;wBAChB,MAAMC,OAAOC,OAAOF,KAAK,KAAK,CAAC,QAAQ,QAAQ,MAAM;wBACrD,OAAOC,KACF,IAAI,GACJ,WAAW,GACX,OAAO,CAAC,iBAAiB,IACzB,OAAO,CAAC,QAAQ;oBACzB;oBACJ,aAAaF,OACR,IAAI,GACJ,KAAK,CAAC,gBACN,QAAQ,CAAC,4BACT,WAAW,CAAC;oBACjB,aAAaA,OAAO,IAAI,GAAG,KAAK,CAAC,eAAe,QAAQ,CAAC;oBACzD,SAASA,OAAO,OAAO,GAAG,KAAK,CAAC,WAAW,YAAY,CAAC;gBAC5D;YACA,QAAQI,CAAAA,SAAU;oBACdA,OAAO,GAAG,CAAC,QAAQ;oBACnBA,OAAO,GAAG,CAAC;oBACXA,OAAO,GAAG,CAAC;oBACXA,OAAO,GAAG,CAAC;iBACd;QACL;IACJ;IAEQ,gBAAgBC,QAAgB,EAAEC,WAAmB,EAAU;QACnE,MAAMC,OAAO,GAAGF,SAAS,CAAC,EAAEC,aAAa,CACpC,WAAW,GACX,OAAO,CAAC,eAAe,KACvB,OAAO,CAAC,UAAU;QACvB,OAAO,CAAC,OAAO,EAAEC,MAAM;IAC3B;IAEQ,eAAeC,MAAsB,EAAQ;QACjD,MAAMC,UAAU,IAAIZ;QACpB,KAAK,MAAMa,SAASF,OAAQ;YACxB,IAAIG,SAASF,QAAQ,GAAG,CAACC,MAAM,QAAQ;YACvC,IAAI,CAACC,QAAQ;gBACTA,SAAS,IAAId;gBACbY,QAAQ,GAAG,CAACC,MAAM,QAAQ,EAAEC;YAChC;YACA,MAAMC,WAAWD,OAAO,GAAG,CAACD,MAAM,WAAW,KAAK,EAAE;YACpDE,SAAS,IAAI,CAACF;YACdC,OAAO,GAAG,CAACD,MAAM,WAAW,EAAEE;QAClC;QAEA,IAAI,CAAC,aAAa,GAAGH;QACrB,IAAI,CAAC,iBAAiB,GAAG,EAAE;QAE3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAACT,CAAAA;YACd,MAAMa,SAA2D,CAAC;YAElE,KAAK,MAAM,CAACR,UAAUS,SAAS,IAAIL,QAC/B,KAAK,MAAM,CAACH,aAAaS,aAAa,IAAID,SAAU;gBAChD,MAAME,YAAY,IAAI,CAAC,eAAe,CAACX,UAAUC;gBACjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAACU;gBAE5BH,MAAM,CAACG,UAAU,GAAGhB,OACf,MAAM,GACN,KAAK,CAACM,aACN,QAAQ,CAAC,yBAAyB;oBAAE,MAAM;gBAAM,GAChD,MAAM,CAACW,CAAAA,IACG;wBACH,UAAUA,EACL,IAAI,GACJ,IAAI,GACJ,OAAO,CACJF,aAAa,GAAG,CAACG,CAAAA,IAAM;gCACnB,OAAOA,EAAE,KAAK;gCACd,OAAOA,EAAE,SAAS;4BACtB,KAEH,QAAQ,CAAC;oBAClB;YAEZ;YAGJ,OAAOL;QACX;QAEA,IAAI,CAAC,KAAK,CAAC,SAAS,CAACT,CAAAA;YACjB,MAAMe,OAA6B;gBAC/Bf,OAAO,GAAG,CAAC,QAAQ;gBACnBA,OAAO,GAAG,CAAC;gBACXA,OAAO,GAAG,CAAC;gBACXA,OAAO,GAAG,CAAC;aACd;YAED,KAAK,MAAM,CAACC,UAAUS,SAAS,IAAIL,QAAS;gBACxCU,KAAK,IAAI,CAACf,OAAO,SAAS;gBAC1Be,KAAK,IAAI,CAACf,OAAO,OAAO,CAAC,kBAAkB;oBAAE,OAAOC;gBAAS;gBAE7D,KAAK,MAAM,CAACC,YAAY,IAAIQ,SAAU;oBAClC,MAAME,YAAY,IAAI,CAAC,eAAe,CAACX,UAAUC;oBACjDa,KAAK,IAAI,CAACf,OAAO,MAAM,CAACY,WAAWI,CAAAA,QAAS;4BAACA,MAAM,GAAG,CAAC;yBAAY;gBACvE;YACJ;YAEA,OAAOD;QACX;QAEA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAClB,CAAAA;YACf,IAAI,AAAkC,MAAlC,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAC7B,OAAO,EAAE;YAEb,KAAK,MAAMe,aAAa,IAAI,CAAC,iBAAiB,CAAE;gBAC5C,MAAMK,cAAcpB,KAAK,KAAK,CAACe,WAAW,EAAE,CAAC;gBAC7C,MAAMM,gBAAgBD,YAAY,QAAQ,CAAC,GAAG,CAAC;gBAC/C,IAAI,CAACC,eACD;gBAEJ,MAAMC,SAASD,cAAc,QAAQ;gBACrC,IAAIC,UAAUA,OAAO,MAAM,GAAG,GAC1B,OAAO,EAAE;YAEjB;YAEA,OAAO;gBAAC;oBAAE,MAAM;oBAAU,SAAS;gBAAuC;aAAE;QAChF;IACJ;IAEQ,gBAA0B;QAC9B,MAAMC,YAAsB,EAAE;QAE9B,KAAK,MAAMR,aAAa,IAAI,CAAC,iBAAiB,CAAE;YAC5C,MAAMK,cAAc,IAAI,CAAC,KAAK,CAAC,KAAK,CAACL,WAAW,EAAE,CAAC;YACnD,MAAMM,gBAAgBD,YAAY,QAAQ,CAAC,GAAG,CAAC;YAC/C,IAAI,CAACC,eACD;YAEJ,MAAMC,SAASD,cAAc,QAAQ;YACrC,IAAIC,UAAUA,OAAO,MAAM,GAAG,GAC1BC,UAAU,IAAI,IAAID;QAE1B;QAEA,OAAOC;IACX;IAEQ,iBAAiBC,aAAuB,EAAQ;QACpD,MAAMC,WAAW,IAAIC,IAAIF;QAEzB,KAAK,MAAM,CAACpB,UAAUS,SAAS,IAAI,IAAI,CAAC,aAAa,CACjD,KAAK,MAAM,CAACR,aAAaS,aAAa,IAAID,SAAU;YAChD,MAAME,YAAY,IAAI,CAAC,eAAe,CAACX,UAAUC;YACjD,MAAMe,cAAc,IAAI,CAAC,KAAK,CAAC,KAAK,CAACL,WAAW,EAAE,CAAC;YACnD,MAAMM,gBAAgBD,YAAY,QAAQ,CAAC,GAAG,CAAC;YAC/C,IAAI,CAACC,eACD;YAGJ,MAAMM,WAAWb,aACZ,MAAM,CAACG,CAAAA,IAAKQ,SAAS,GAAG,CAACR,EAAE,SAAS,GACpC,GAAG,CAACA,CAAAA,IAAKA,EAAE,SAAS;YACzBI,cAAc,QAAQ,CAACM;QAC3B;IAER;IAEA,MAAa,OAAyB;QAClC,MAAMC,OAAO,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM;QACpC,IAAIA,AAAS,UAATA,MACA,OAAO;QAGXC,YAAY;YACR,IAAI,CAAC,OAAO,GAAG;QACnB;QAEA,IAAI;YACA,MAAMC,SAAS;gBACX,MAAMF,KAAK,IAAI;gBACf,MAAMA,KAAK,IAAI;gBACf,aAAaA,KAAK,WAAW;gBAC7B,aAAcA,KAAK,WAAW,IAAeG;gBAC7C,SAASH,KAAK,OAAO;gBACrB,QAAQ,IAAI,CAAC,aAAa;YAC9B;YAEA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,MAAMI,UAAU,MAAM,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAACF;gBAExDD,YAAY;oBACR,IAAI,CAAC,QAAQ,GAAGG;oBAChB,IAAI,CAAC,UAAU,GAAGA,QAAQ,EAAE;oBAC5B,IAAI,CAAC,MAAM,GAAG;oBACd,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,WAAW,CAAC;gBACzC;YACJ,OAAO;gBACH,MAAMC,UAAU,MAAM,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAGH;gBAE1ED,YAAY;oBACR,IAAI,CAAC,QAAQ,GAAGI;gBACpB;YACJ;QACJ,SAAU;YACNJ,YAAY;gBACR,IAAI,CAAC,OAAO,GAAG;YACnB;QACJ;QAEA,OAAO;IACX;IAEA,MAAa,gBAA+B;QACxC,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,EAC/B;QAEJ,MAAM,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU;IAC3D;IAEA,MAAa,KAAKK,EAAU,EAAiB;QACzC,IAAI,CAAC,QAAQ,GAAG;QAChB,IAAI,CAAC,MAAM,GAAGA,AAAO,UAAPA;QACd,IAAI,CAAC,UAAU,GAAGA,AAAO,UAAPA,KAAe,OAAOA;QAExC,MAAMC,gBAAgB,IAAI,CAAC,0BAA0B,CAAC,OAAO;QAE7D,IAAK,IAAI,CAAC,MAAM,EAqBT;YACH,MAAM5B,SAAS,MAAM4B;YAErBN,YAAY;gBACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;gBAC3B,IAAI,CAAC,cAAc,CAACtB;gBACpB,IAAI,CAAC,QAAQ,GAAG;YACpB;QACJ,OA7BkB;YACd,MAAM,CAAC6B,SAAS7B,OAAO,GAAG,MAAM8B,QAAQ,GAAG,CAAC;gBACxC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAACH;gBAC/BC;aACH;YAEDN,YAAY;gBACR,IAAI,CAAC,QAAQ,GAAGO;gBAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;gBAC3B,IAAI,CAAC,cAAc,CAAC7B;gBACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACf,MAAM6B,QAAQ,IAAI;oBAClB,MAAMA,QAAQ,IAAI;oBAClB,aAAaA,QAAQ,WAAW;oBAChC,aAAaA,QAAQ,WAAW,IAAI;oBACpC,SAASA,QAAQ,OAAO;gBAC5B;gBACA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,WAAW,CAAC;gBACrC,IAAI,CAAC,gBAAgB,CAACA,QAAQ,MAAM;gBACpC,IAAI,CAAC,QAAQ,GAAG;YACpB;QACJ;IASJ;AACJ;AAEO,MAAME,4CAAuBC,qBAAAA,oBAAgC,CAAC;IACjE,gBAAgBnD;IAChB,cAAc;QACVoD;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;KACH;AACL"}

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

@@ -1,35 +1,24 @@
 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;
     saving: boolean;
     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;
-    actions: IWebhookFormActions;
     init(id: string): void;
+    save(): Promise<boolean>;
+    deleteWebhook(): Promise<void>;
 }
 export declare const WebhookFormPresenter: import("@webiny/di").Abstraction<IWebhookFormPresenter>;
 export declare namespace WebhookFormPresenter {
     type Interface = IWebhookFormPresenter;
     type ViewModel = IWebhookFormViewModel;
-    type Actions = IWebhookFormActions;
 }

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    permissions: {\n        canEdit: boolean;\n        canDelete: boolean;\n    };\n    form: IFormVM;\n}\n\nexport interface IWebhookFormPresenter {\n    vm: IWebhookFormViewModel;\n    init(id: string): void;\n    save(): Promise<boolean>;\n    deleteWebhook(): Promise<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}\n"],"names":["WebhookFormPresenter","createAbstraction"],"mappings":";AAuBO,MAAMA,uBACTC,kBAAyC"}

package/admin/presentation/WebhookForm/components/SigningSecret.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
+import type { IWebhookFormPresenter } from "../abstractions.js";
 interface SigningSecretProps {
-    secret: string;
+    presenter: IWebhookFormPresenter;
 }
-export declare const SigningSecret: ({ secret }: SigningSecretProps) => React.JSX.Element;
+export declare const SigningSecret: (({ presenter }: SigningSecretProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
 export {};

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

@@ -1,12 +1,16 @@
 import react, { useCallback, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { IconButton, Text } from "@webiny/admin-ui";
 import { useSnackbar } from "@webiny/app-admin/hooks/index.js";
 import { ReactComponent } from "@webiny/icons/visibility.svg";
 import { ReactComponent as visibility_off_svg_ReactComponent } from "@webiny/icons/visibility_off.svg";
 import { ReactComponent as content_copy_svg_ReactComponent } from "@webiny/icons/content_copy.svg";
-const SigningSecret = ({ secret })=>{
+const SigningSecret_SigningSecret = observer(function({ presenter }) {
+    const { vm } = presenter;
     const [revealed, setRevealed] = useState(false);
     const { showSnackbar } = useSnackbar();
+    if (vm.isNew || !vm.webhook?.signingSecret) return null;
+    const secret = vm.webhook.signingSecret;
     const handleCopy = useCallback(async ()=>{
         await navigator.clipboard.writeText(secret);
         showSnackbar("Signing secret copied to clipboard.");
@@ -37,7 +41,7 @@ const SigningSecret = ({ secret })=>{
         onClick: ()=>void handleCopy(),
         "aria-label": "Copy secret"
     })));
-};
-export { SigningSecret };
+});
+export { SigningSecret_SigningSecret as SigningSecret };
 
 //# sourceMappingURL=SigningSecret.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"admin/presentation/WebhookForm/components/SigningSecret.js","sources":["../../../../../src/admin/presentation/WebhookForm/components/SigningSecret.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport { IconButton, Text } from \"@webiny/admin-ui\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/index.js\";\nimport { ReactComponent as VisibilityIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as VisibilityOffIcon } from \"@webiny/icons/visibility_off.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\n\ninterface SigningSecretProps {\n    secret: string;\n}\n\nexport const SigningSecret = ({ secret }: SigningSecretProps) => {\n    const [revealed, setRevealed] = useState(false);\n    const { showSnackbar } = useSnackbar();\n\n    const handleCopy = useCallback(async () => {\n        await navigator.clipboard.writeText(secret);\n        showSnackbar(\"Signing secret copied to clipboard.\");\n    }, [secret, showSnackbar]);\n\n    return (\n        <div className=\"flex flex-col gap-xs\">\n            <Text size=\"sm\" className=\"text-neutral-strong\">\n                Signing Secret\n            </Text>\n            <div className=\"flex items-center gap-sm rounded-sm border-sm border-neutral-muted px-sm py-xs\">\n                <Text size=\"sm\" className=\"flex-1 font-mono select-all\">\n                    {revealed ? secret : \"•\".repeat(24)}\n                </Text>\n                <IconButton\n                    icon={revealed ? <VisibilityOffIcon /> : <VisibilityIcon />}\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    onClick={() => setRevealed(prev => !prev)}\n                    aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}\n                />\n                <IconButton\n                    icon={<CopyIcon />}\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    onClick={() => void handleCopy()}\n                    aria-label=\"Copy secret\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["SigningSecret","secret","revealed","setRevealed","useState","showSnackbar","useSnackbar","handleCopy","useCallback","navigator","Text","IconButton","VisibilityOffIcon","VisibilityIcon","prev","CopyIcon"],"mappings":";;;;;;AAWO,MAAMA,gBAAgB,CAAC,EAAEC,MAAM,EAAsB;IACxD,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAS;IACzC,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,MAAMC,aAAaC,YAAY;QAC3B,MAAMC,UAAU,SAAS,CAAC,SAAS,CAACR;QACpCI,aAAa;IACjB,GAAG;QAACJ;QAAQI;KAAa;IAEzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACK,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,iCAGhD,oBAAC;QAAI,WAAU;qBACX,oBAACA,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBR,WAAWD,SAAS,IAAI,MAAM,CAAC,oBAEpC,oBAACU,YAAUA;QACP,MAAMT,WAAW,WAAXA,GAAW,oBAACU,mCAAiBA,QAAAA,WAAAA,GAAM,oBAACC,gBAAcA;QACxD,SAAQ;QACR,MAAK;QACL,SAAS,IAAMV,YAAYW,CAAAA,OAAQ,CAACA;QACpC,cAAYZ,WAAW,gBAAgB;sBAE3C,oBAACS,YAAUA;QACP,oBAAM,oBAACI,iCAAQA;QACf,SAAQ;QACR,MAAK;QACL,SAAS,IAAM,KAAKR;QACpB,cAAW;;AAK/B"}
+{"version":3,"file":"admin/presentation/WebhookForm/components/SigningSecret.js","sources":["../../../../../src/admin/presentation/WebhookForm/components/SigningSecret.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { IconButton, Text } from \"@webiny/admin-ui\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/index.js\";\nimport { ReactComponent as VisibilityIcon } from \"@webiny/icons/visibility.svg\";\nimport { ReactComponent as VisibilityOffIcon } from \"@webiny/icons/visibility_off.svg\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport type { IWebhookFormPresenter } from \"../abstractions.js\";\n\ninterface SigningSecretProps {\n    presenter: IWebhookFormPresenter;\n}\n\nexport const SigningSecret = observer(function SigningSecret({ presenter }: SigningSecretProps) {\n    const { vm } = presenter;\n    const [revealed, setRevealed] = useState(false);\n    const { showSnackbar } = useSnackbar();\n\n    if (vm.isNew || !vm.webhook?.signingSecret) {\n        return null;\n    }\n\n    const secret = vm.webhook.signingSecret;\n\n    const handleCopy = useCallback(async () => {\n        await navigator.clipboard.writeText(secret);\n        showSnackbar(\"Signing secret copied to clipboard.\");\n    }, [secret, showSnackbar]);\n\n    return (\n        <div className=\"flex flex-col gap-xs\">\n            <Text size=\"sm\" className=\"text-neutral-strong\">\n                Signing Secret\n            </Text>\n            <div className=\"flex items-center gap-sm rounded-sm border-sm border-neutral-muted px-sm py-xs\">\n                <Text size=\"sm\" className=\"flex-1 font-mono select-all\">\n                    {revealed ? secret : \"•\".repeat(24)}\n                </Text>\n                <IconButton\n                    icon={revealed ? <VisibilityOffIcon /> : <VisibilityIcon />}\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    onClick={() => setRevealed(prev => !prev)}\n                    aria-label={revealed ? \"Hide secret\" : \"Reveal secret\"}\n                />\n                <IconButton\n                    icon={<CopyIcon />}\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    onClick={() => void handleCopy()}\n                    aria-label=\"Copy secret\"\n                />\n            </div>\n        </div>\n    );\n});\n"],"names":["SigningSecret","observer","presenter","vm","revealed","setRevealed","useState","showSnackbar","useSnackbar","secret","handleCopy","useCallback","navigator","Text","IconButton","VisibilityOffIcon","VisibilityIcon","prev","CopyIcon"],"mappings":";;;;;;;AAaO,MAAMA,8BAAgBC,SAAS,SAAuB,EAAEC,SAAS,EAAsB;IAC1F,MAAM,EAAEC,EAAE,EAAE,GAAGD;IACf,MAAM,CAACE,UAAUC,YAAY,GAAGC,SAAS;IACzC,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,IAAIL,GAAG,KAAK,IAAI,CAACA,GAAG,OAAO,EAAE,eACzB,OAAO;IAGX,MAAMM,SAASN,GAAG,OAAO,CAAC,aAAa;IAEvC,MAAMO,aAAaC,YAAY;QAC3B,MAAMC,UAAU,SAAS,CAAC,SAAS,CAACH;QACpCF,aAAa;IACjB,GAAG;QAACE;QAAQF;KAAa;IAEzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACM,MAAIA;QAAC,MAAK;QAAK,WAAU;OAAsB,iCAGhD,oBAAC;QAAI,WAAU;qBACX,oBAACA,MAAIA;QAAC,MAAK;QAAK,WAAU;OACrBT,WAAWK,SAAS,IAAI,MAAM,CAAC,oBAEpC,oBAACK,YAAUA;QACP,MAAMV,WAAW,WAAXA,GAAW,oBAACW,mCAAiBA,QAAAA,WAAAA,GAAM,oBAACC,gBAAcA;QACxD,SAAQ;QACR,MAAK;QACL,SAAS,IAAMX,YAAYY,CAAAA,OAAQ,CAACA;QACpC,cAAYb,WAAW,gBAAgB;sBAE3C,oBAACU,YAAUA;QACP,oBAAM,oBAACI,iCAAQA;QACf,SAAQ;QACR,MAAK;QACL,SAAS,IAAM,KAAKR;QACpB,cAAW;;AAK/B"}

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

@@ -1,9 +1,8 @@
-import react, { useEffect, useMemo } from "react";
+import react, { useCallback, 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 { Button, Heading, OverlayLoader, Separator } from "@webiny/admin-ui";
-import { FormView } from "@webiny/app-admin/features/formModel/FormView.js";
+import { FormErrors, FormView, SimpleForm, SimpleFormContent, SimpleFormFooter, SimpleFormHeader, useFieldRenderers, useRouter } from "@webiny/app-admin";
+import { Button, OverlayLoader, useToast } from "@webiny/admin-ui";
 import { WebhookFormPresenterFeature } from "../feature.js";
 import { GetWebhookFeature } from "../../../features/getWebhook/feature.js";
 import { CreateWebhookFeature } from "../../../features/createWebhook/feature.js";
@@ -12,59 +11,68 @@ 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";
+import { HasPermission } from "../../security/HasPermission.js";
+const SectionHeading = ({ field })=>/*#__PURE__*/ react.createElement("span", {
+        className: "text-md font-semibold"
+    }, String(field.label ?? ""));
 const WebhookFormView_WebhookFormViewInner = observer(function() {
     const { presenter } = useFeature(WebhookFormPresenterFeature);
     const { goToRoute } = useRouter();
     const { route } = useRoute(Routes.Form);
+    const toast = useToast();
     const id = route.params.id;
+    const defaultRenderers = useFieldRenderers();
+    const renderers = useMemo(()=>({
+            ...defaultRenderers,
+            "element:sectionHeading": SectionHeading
+        }), [
+        defaultRenderers
+    ]);
     useEffect(()=>{
         presenter.init(id);
     }, [
         presenter,
         id
     ]);
-    const { vm, actions } = presenter;
-    if (vm.loading) return /*#__PURE__*/ react.createElement(OverlayLoader, null);
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__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
-    }, vm.isNew ? "Create Webhook" : vm.webhook?.name ?? "Edit Webhook"), /*#__PURE__*/ react.createElement("div", {
-        className: "flex gap-sm"
-    }, !vm.isNew && /*#__PURE__*/ react.createElement(Button, {
-        variant: "secondary",
-        onClick: ()=>actions.openDeliveries()
-    }, "Deliveries"), /*#__PURE__*/ react.createElement(Button, {
+    const saveForm = useCallback(async ()=>{
+        const res = await presenter.save();
+        if (res) toast.showSuccessToast({
+            title: "Webhook saved successfully!"
+        });
+    }, [
+        presenter
+    ]);
+    const { vm } = presenter;
+    return /*#__PURE__*/ react.createElement(SimpleForm, null, vm.loading ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Loading..."
+    }) : null, vm.saving ? /*#__PURE__*/ react.createElement(OverlayLoader, {
+        text: "Saving..."
+    }) : null, vm.form.errors.length > 0 ? /*#__PURE__*/ react.createElement("div", {
+        className: "mb-lg"
+    }, /*#__PURE__*/ react.createElement(FormErrors, {
+        form: vm.form
+    })) : null, /*#__PURE__*/ react.createElement(SimpleFormHeader, {
+        title: vm.isNew ? "Create Webhook" : vm.webhook?.name ?? "Edit Webhook"
+    }), /*#__PURE__*/ react.createElement(SimpleFormContent, null, /*#__PURE__*/ react.createElement(FormView, {
+        name: "Webhook",
+        form: vm.form,
+        renderers: renderers
+    }), /*#__PURE__*/ react.createElement(SigningSecret, {
+        presenter: presenter
+    })), /*#__PURE__*/ react.createElement(SimpleFormFooter, {
+        className: "border-t-sm border-t-neutral-dimmed pt-lg"
+    }, /*#__PURE__*/ react.createElement(Button, {
         variant: "secondary",
         onClick: ()=>goToRoute(Routes.List)
-    }, "Cancel"), vm.permissions.canEdit && /*#__PURE__*/ react.createElement(Button, {
+    }, "Cancel"), /*#__PURE__*/ react.createElement(HasPermission, {
+        entity: "webhook",
+        action: "edit"
+    }, /*#__PURE__*/ react.createElement(Button, {
         variant: "primary",
-        onClick: ()=>void actions.save(),
+        onClick: saveForm,
         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, {
-        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, {
-        webhookId: vm.webhook.id,
-        open: vm.showDeliveries,
-        onClose: ()=>actions.closeDeliveries()
-    }));
+    }, vm.saving ? "Saving..." : "Save"))));
 });
 const WebhookFormView = ()=>{
     const container = useContainer();

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, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { DiContainerProvider, useContainer, useFeature, useRoute } from \"@webiny/app\";\nimport {\n    FormErrors,\n    useRouter,\n    useFieldRenderers,\n    SimpleForm,\n    SimpleFormHeader,\n    SimpleFormContent,\n    SimpleFormFooter,\n    FormView\n} from \"@webiny/app-admin\";\nimport { Button, OverlayLoader } from \"@webiny/admin-ui\";\nimport { useToast } from \"@webiny/admin-ui\";\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 { HasPermission } from \"~/admin/presentation/security/HasPermission.js\";\n\nconst SectionHeading = ({ field }: { field: any }) => {\n    return <span className=\"text-md font-semibold\">{String(field.label ?? \"\")}</span>;\n};\n\nconst WebhookFormViewInner = observer(function WebhookFormViewInner() {\n    const { presenter } = useFeature(WebhookFormPresenterFeature);\n    const { goToRoute } = useRouter();\n    const { route } = useRoute(Routes.Form);\n    const toast = useToast();\n    const id = route.params.id;\n    const defaultRenderers = useFieldRenderers();\n\n    const renderers = useMemo(() => {\n        return {\n            ...defaultRenderers,\n            \"element:sectionHeading\": SectionHeading\n        };\n    }, [defaultRenderers]);\n\n    useEffect(() => {\n        void presenter.init(id);\n    }, [presenter, id]);\n\n    const saveForm = useCallback(async () => {\n        const res = await presenter.save();\n        if (res) {\n            toast.showSuccessToast({ title: \"Webhook saved successfully!\" });\n        }\n    }, [presenter]);\n\n    const { vm } = presenter;\n\n    return (\n        <SimpleForm>\n            {vm.loading ? <OverlayLoader text={\"Loading...\"} /> : null}\n            {vm.saving ? <OverlayLoader text={\"Saving...\"} /> : null}\n            {vm.form.errors.length > 0 ? (\n                <div className={\"mb-lg\"}>\n                    <FormErrors form={vm.form} />\n                </div>\n            ) : null}\n            <SimpleFormHeader\n                title={vm.isNew ? \"Create Webhook\" : (vm.webhook?.name ?? \"Edit Webhook\")}\n            />\n            <SimpleFormContent>\n                <FormView name=\"Webhook\" form={vm.form} renderers={renderers} />\n                <SigningSecret presenter={presenter} />\n            </SimpleFormContent>\n            <SimpleFormFooter className={\"border-t-sm border-t-neutral-dimmed pt-lg\"}>\n                <Button variant=\"secondary\" onClick={() => goToRoute(Routes.List)}>\n                    Cancel\n                </Button>\n                <HasPermission entity=\"webhook\" action=\"edit\">\n                    <Button variant=\"primary\" onClick={saveForm} disabled={vm.saving}>\n                        {vm.saving ? \"Saving...\" : \"Save\"}\n                    </Button>\n                </HasPermission>\n            </SimpleFormFooter>\n        </SimpleForm>\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":["SectionHeading","field","String","WebhookFormViewInner","observer","presenter","useFeature","WebhookFormPresenterFeature","goToRoute","useRouter","route","useRoute","Routes","toast","useToast","id","defaultRenderers","useFieldRenderers","renderers","useMemo","useEffect","saveForm","useCallback","res","vm","SimpleForm","OverlayLoader","FormErrors","SimpleFormHeader","SimpleFormContent","FormView","SigningSecret","SimpleFormFooter","Button","HasPermission","WebhookFormView","container","useContainer","scopedContainer","child","GetWebhookFeature","CreateWebhookFeature","UpdateWebhookFeature","DeleteWebhookFeature","ListAvailableEventsFeature","WebhookPermissionsFeature","DiContainerProvider"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAMA,iBAAiB,CAAC,EAAEC,KAAK,EAAkB,GACtC,WAAP,GAAO,oBAAC;QAAK,WAAU;OAAyBC,OAAOD,MAAM,KAAK,IAAI;AAG1E,MAAME,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,QAAQC;IACd,MAAMC,KAAKL,MAAM,MAAM,CAAC,EAAE;IAC1B,MAAMM,mBAAmBC;IAEzB,MAAMC,YAAYC,QAAQ,IACf;YACH,GAAGH,gBAAgB;YACnB,0BAA0BhB;QAC9B,IACD;QAACgB;KAAiB;IAErBI,UAAU;QACDf,UAAU,IAAI,CAACU;IACxB,GAAG;QAACV;QAAWU;KAAG;IAElB,MAAMM,WAAWC,YAAY;QACzB,MAAMC,MAAM,MAAMlB,UAAU,IAAI;QAChC,IAAIkB,KACAV,MAAM,gBAAgB,CAAC;YAAE,OAAO;QAA8B;IAEtE,GAAG;QAACR;KAAU;IAEd,MAAM,EAAEmB,EAAE,EAAE,GAAGnB;IAEf,OAAO,WAAP,GACI,oBAACoB,YAAUA,MACND,GAAG,OAAO,GAAG,WAAH,GAAG,oBAACE,eAAaA;QAAC,MAAM;SAAmB,MACrDF,GAAG,MAAM,GAAG,WAAH,GAAG,oBAACE,eAAaA;QAAC,MAAM;SAAkB,MACnDF,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,WAAJ,GACrB,oBAAC;QAAI,WAAW;qBACZ,oBAACG,YAAUA;QAAC,MAAMH,GAAG,IAAI;UAE7B,oBACJ,oBAACI,kBAAgBA;QACb,OAAOJ,GAAG,KAAK,GAAG,mBAAoBA,GAAG,OAAO,EAAE,QAAQ;sBAE9D,oBAACK,mBAAiBA,MAAAA,WAAAA,GACd,oBAACC,UAAQA;QAAC,MAAK;QAAU,MAAMN,GAAG,IAAI;QAAE,WAAWN;sBACnD,oBAACa,eAAaA;QAAC,WAAW1B;uBAE9B,oBAAC2B,kBAAgBA;QAAC,WAAW;qBACzB,oBAACC,QAAMA;QAAC,SAAQ;QAAY,SAAS,IAAMzB,UAAUI,OAAO,IAAI;OAAG,yBAGnE,oBAACsB,eAAaA;QAAC,QAAO;QAAU,QAAO;qBACnC,oBAACD,QAAMA;QAAC,SAAQ;QAAU,SAASZ;QAAU,UAAUG,GAAG,MAAM;OAC3DA,GAAG,MAAM,GAAG,cAAc;AAMnD;AAEO,MAAMW,kBAAkB;IAC3B,MAAMC,YAAYC;IAElB,MAAMC,kBAAkBnB,QAAQ;QAC5B,MAAMoB,QAAQH,UAAU,oBAAoB;QAC5CI,kBAAkB,QAAQ,CAACD;QAC3BE,qBAAqB,QAAQ,CAACF;QAC9BG,qBAAqB,QAAQ,CAACH;QAC9BI,qBAAqB,QAAQ,CAACJ;QAC9BK,2BAA2B,QAAQ,CAACL;QACpCM,0BAA0B,QAAQ,CAACN;QACnChC,4BAA4B,QAAQ,CAACgC;QACrC,OAAOA;IACX,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACO,qBAAmBA;QAAC,WAAWR;qBAC5B,oBAACnC,sCAAoBA;AAGjC"}