@strapi/admin 5.9.0 → 5.10.0

package/dist/admin/chunks/EditPage-BNZ90ISm.mjs

@@ -0,0 +1,986 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { RawTable, Flex, Field, RawThead, RawTr, RawTh, VisuallyHidden, Typography, RawTbody, RawTd, Checkbox, TextButton, Box, Grid, IconButton, Combobox, ComboboxOption, Button, Main } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useMatch, useNavigate } from 'react-router-dom';
+import { b as useTypedSelector, P as Page, a as useNotification, e as useAPIErrorHandler } from './Theme-CDaBfQ-7.mjs';
+import { s as selectAdminPermissions } from './selectors-PQdhPmzv.mjs';
+import { i as isBaseQueryError } from './admin-BBS7sDVu.mjs';
+import { Minus, Plus, Cross, Loader, Check, Play } from '@strapi/icons';
+import * as yup from 'yup';
+import { u as useField, w as useForm, x as MemoizedStringInput, F as Form, b as Layouts, B as BackButton, M as MemoizedInputRenderer } from './index-BUGouNML.mjs';
+import { u as useEnterprise } from './useEnterprise-Dy8wMNV5.mjs';
+import { styled } from 'styled-components';
+import { u as useWebhooks } from './useWebhooks-DzJ3X-hd.mjs';
+
+const EventsRoot = ({ children })=>{
+    const { formatMessage } = useIntl();
+    const label = formatMessage({
+        id: 'Settings.webhooks.form.events',
+        defaultMessage: 'Events'
+    });
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                "aria-hidden": true,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(StyledTable, {
+                "aria-label": label,
+                children: children
+            })
+        ]
+    });
+};
+// TODO check whether we want to move alternating background colour tables to the design system
+const StyledTable = styled(RawTable)`
+  tbody tr:nth-child(odd) {
+    background: ${({ theme })=>theme.colors.neutral100};
+  }
+
+  thead th span {
+    color: ${({ theme })=>theme.colors.neutral500};
+  }
+
+  td,
+  th {
+    padding-block-start: ${({ theme })=>theme.spaces[3]};
+    padding-block-end: ${({ theme })=>theme.spaces[3]};
+    width: 6%;
+    vertical-align: middle;
+  }
+
+  tbody tr td:first-child {
+    /**
+     * Add padding to the start of the first column to avoid the checkbox appearing
+     * too close to the edge of the table
+     */
+    padding-inline-start: ${({ theme })=>theme.spaces[2]};
+  }
+`;
+const getCEHeaders = ()=>{
+    const headers = [
+        {
+            id: 'Settings.webhooks.events.create',
+            defaultMessage: 'Create'
+        },
+        {
+            id: 'Settings.webhooks.events.update',
+            defaultMessage: 'Update'
+        },
+        {
+            id: 'app.utils.delete',
+            defaultMessage: 'Delete'
+        },
+        {
+            id: 'app.utils.publish',
+            defaultMessage: 'Publish'
+        },
+        {
+            id: 'app.utils.unpublish',
+            defaultMessage: 'Unpublish'
+        }
+    ];
+    return headers;
+};
+const EventsHeaders = ({ getHeaders = getCEHeaders })=>{
+    const { formatMessage } = useIntl();
+    const headers = getHeaders();
+    return /*#__PURE__*/ jsx(RawThead, {
+        children: /*#__PURE__*/ jsxs(RawTr, {
+            children: [
+                /*#__PURE__*/ jsx(RawTh, {
+                    children: /*#__PURE__*/ jsx(VisuallyHidden, {
+                        children: formatMessage({
+                            id: 'Settings.webhooks.event.select',
+                            defaultMessage: 'Select event'
+                        })
+                    })
+                }),
+                headers.map((header)=>{
+                    if ([
+                        'app.utils.publish',
+                        'app.utils.unpublish'
+                    ].includes(header?.id ?? '')) {
+                        return /*#__PURE__*/ jsx(RawTh, {
+                            title: formatMessage({
+                                id: 'Settings.webhooks.event.publish-tooltip',
+                                defaultMessage: 'This event only exists for content with draft & publish enabled'
+                            }),
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage(header)
+                            })
+                        }, header.id);
+                    }
+                    return /*#__PURE__*/ jsx(RawTh, {
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            variant: "sigma",
+                            textColor: "neutral600",
+                            children: formatMessage(header)
+                        })
+                    }, header.id);
+                })
+            ]
+        })
+    });
+};
+const EventsBody = ({ providedEvents })=>{
+    const events = providedEvents || getCEEvents();
+    const { value = [], onChange } = useField('events');
+    const inputName = 'events';
+    const inputValue = value;
+    const disabledEvents = [];
+    const formattedValue = inputValue.reduce((acc, curr)=>{
+        const key = curr.split('.')[0];
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(curr);
+        return acc;
+    }, {});
+    const handleSelect = (name, value)=>{
+        const set = new Set(inputValue);
+        if (value) {
+            set.add(name);
+        } else {
+            set.delete(name);
+        }
+        onChange(inputName, Array.from(set));
+    };
+    const handleSelectAll = (name, value)=>{
+        const set = new Set(inputValue);
+        if (value) {
+            events[name].forEach((event)=>{
+                if (!disabledEvents.includes(event)) {
+                    set.add(event);
+                }
+            });
+        } else {
+            events[name].forEach((event)=>set.delete(event));
+        }
+        onChange(inputName, Array.from(set));
+    };
+    return /*#__PURE__*/ jsx(RawTbody, {
+        children: Object.entries(events).map(([event, value])=>{
+            return /*#__PURE__*/ jsx(EventsRow, {
+                disabledEvents: disabledEvents,
+                name: event,
+                events: value,
+                inputValue: formattedValue[event],
+                handleSelect: handleSelect,
+                handleSelectAll: handleSelectAll
+            }, event);
+        })
+    });
+};
+const getCEEvents = ()=>{
+    const entryEvents = [
+        'entry.create',
+        'entry.update',
+        'entry.delete',
+        'entry.publish',
+        'entry.unpublish'
+    ];
+    return {
+        entry: entryEvents,
+        media: [
+            'media.create',
+            'media.update',
+            'media.delete'
+        ]
+    };
+};
+const EventsRow = ({ disabledEvents = [], name, events = [], inputValue = [], handleSelect, handleSelectAll })=>{
+    const { formatMessage } = useIntl();
+    const enabledCheckboxes = events.filter((event)=>!disabledEvents.includes(event));
+    const hasSomeCheckboxSelected = inputValue.length > 0;
+    const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;
+    const onChangeAll = ()=>{
+        const valueToSet = !areAllCheckboxesSelected;
+        handleSelectAll(name, valueToSet);
+    };
+    const targetColumns = 5;
+    return /*#__PURE__*/ jsxs(RawTr, {
+        children: [
+            /*#__PURE__*/ jsx(RawTd, {
+                children: /*#__PURE__*/ jsx(Checkbox, {
+                    "aria-label": formatMessage({
+                        id: 'global.select-all-entries',
+                        defaultMessage: 'Select all entries'
+                    }),
+                    name: name,
+                    checked: hasSomeCheckboxSelected && !areAllCheckboxesSelected ? 'indeterminate' : areAllCheckboxesSelected,
+                    onCheckedChange: onChangeAll,
+                    children: removeHyphensAndTitleCase(name)
+                })
+            }),
+            events.map((event)=>{
+                return /*#__PURE__*/ jsx(RawTd, {
+                    textAlign: "center",
+                    children: /*#__PURE__*/ jsx(Flex, {
+                        width: "100%",
+                        justifyContent: "center",
+                        children: /*#__PURE__*/ jsx(Checkbox, {
+                            disabled: disabledEvents.includes(event),
+                            "aria-label": event,
+                            name: event,
+                            checked: inputValue.includes(event),
+                            onCheckedChange: (value)=>handleSelect(event, !!value)
+                        })
+                    })
+                }, event);
+            }),
+            events.length < targetColumns && /*#__PURE__*/ jsx(RawTd, {
+                colSpan: targetColumns - events.length
+            })
+        ]
+    });
+};
+/**
+ * Converts a string to title case and removes hyphens.
+ */ const removeHyphensAndTitleCase = (str)=>str.replace(/-/g, ' ').split(' ').map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+const Events = {
+    Root: EventsRoot,
+    Headers: EventsHeaders,
+    Body: EventsBody,
+    Row: EventsRow
+};
+
+const EventTableCE = ()=>{
+    return /*#__PURE__*/ jsxs(Events.Root, {
+        children: [
+            /*#__PURE__*/ jsx(Events.Headers, {}),
+            /*#__PURE__*/ jsx(Events.Body, {})
+        ]
+    });
+};
+
+const AddHeaderButton = styled(TextButton)`
+  cursor: pointer;
+`;
+const HeadersInput = ()=>{
+    const { formatMessage } = useIntl();
+    const addFieldRow = useForm('HeadersInput', (state)=>state.addFieldRow);
+    const removeFieldRow = useForm('HeadersInput', (state)=>state.removeFieldRow);
+    const setFieldValue = useForm('HeadersInput', (state)=>state.onChange);
+    const { value = [] } = useField('headers');
+    const removeRow = (index)=>{
+        // if we are removing the last row, simply clear it
+        if (value.length === 1) {
+            setFieldValue('headers', [
+                {
+                    key: '',
+                    value: ''
+                }
+            ]);
+        } else {
+            removeFieldRow('headers', index);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: formatMessage({
+                    id: 'Settings.webhooks.form.headers',
+                    defaultMessage: 'Headers'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Box, {
+                padding: 8,
+                background: "neutral100",
+                hasRadius: true,
+                children: [
+                    value.map((val, index)=>{
+                        return /*#__PURE__*/ jsxs(Grid.Root, {
+                            gap: 4,
+                            padding: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Grid.Item, {
+                                    col: 6,
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    children: /*#__PURE__*/ jsx(HeaderCombobox, {
+                                        name: `headers.${index}.key`,
+                                        "aria-label": `row ${index + 1} key`,
+                                        label: formatMessage({
+                                            id: 'Settings.webhooks.key',
+                                            defaultMessage: 'Key'
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Grid.Item, {
+                                    col: 6,
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    children: /*#__PURE__*/ jsxs(Flex, {
+                                        alignItems: "flex-end",
+                                        gap: 2,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                style: {
+                                                    flex: 1
+                                                },
+                                                children: /*#__PURE__*/ jsx(MemoizedStringInput, {
+                                                    name: `headers.${index}.value`,
+                                                    "aria-label": `row ${index + 1} value`,
+                                                    label: formatMessage({
+                                                        id: 'Settings.webhooks.value',
+                                                        defaultMessage: 'Value'
+                                                    }),
+                                                    type: "string"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(IconButton, {
+                                                width: "4rem",
+                                                height: "4rem",
+                                                onClick: ()=>removeRow(index),
+                                                color: "primary600",
+                                                label: formatMessage({
+                                                    id: 'Settings.webhooks.headers.remove',
+                                                    defaultMessage: 'Remove header row {number}'
+                                                }, {
+                                                    number: index + 1
+                                                }),
+                                                type: "button",
+                                                children: /*#__PURE__*/ jsx(Minus, {
+                                                    width: "0.8rem"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }, `${index}-${JSON.stringify(val.key)}`);
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        paddingTop: 4,
+                        children: /*#__PURE__*/ jsx(AddHeaderButton, {
+                            type: "button",
+                            onClick: ()=>{
+                                addFieldRow('headers', {
+                                    key: '',
+                                    value: ''
+                                });
+                            },
+                            startIcon: /*#__PURE__*/ jsx(Plus, {}),
+                            children: formatMessage({
+                                id: 'Settings.webhooks.create.header',
+                                defaultMessage: 'Create new header'
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const HeaderCombobox = ({ name, label, ...restProps })=>{
+    const [options, setOptions] = React.useState([
+        ...HTTP_HEADERS
+    ]);
+    const { value: headers } = useField('headers');
+    const field = useField(name);
+    React.useEffect(()=>{
+        const headerOptions = HTTP_HEADERS.filter((key)=>!headers?.some((header)=>header.key !== field.value && header.key === key));
+        setOptions(headerOptions);
+    }, [
+        headers,
+        field.value
+    ]);
+    const handleChange = (value)=>{
+        field.onChange(name, value);
+    };
+    const handleCreateOption = (value)=>{
+        setOptions((prev)=>[
+                ...prev,
+                value
+            ]);
+        handleChange(value);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: name,
+        error: field.error,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Combobox, {
+                ...restProps,
+                onClear: ()=>handleChange(''),
+                onChange: handleChange,
+                onCreateOption: handleCreateOption,
+                placeholder: "",
+                creatable: true,
+                value: field.value,
+                children: options.map((key)=>/*#__PURE__*/ jsx(ComboboxOption, {
+                        value: key,
+                        children: key
+                    }, key))
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+const HTTP_HEADERS = [
+    'A-IM',
+    'Accept',
+    'Accept-Charset',
+    'Accept-Encoding',
+    'Accept-Language',
+    'Accept-Datetime',
+    'Access-Control-Request-Method',
+    'Access-Control-Request-Headers',
+    'Authorization',
+    'Cache-Control',
+    'Connection',
+    'Content-Length',
+    'Content-Type',
+    'Cookie',
+    'Date',
+    'Expect',
+    'Forwarded',
+    'From',
+    'Host',
+    'If-Match',
+    'If-Modified-Since',
+    'If-None-Match',
+    'If-Range',
+    'If-Unmodified-Since',
+    'Max-Forwards',
+    'Origin',
+    'Pragma',
+    'Proxy-Authorization',
+    'Range',
+    'Referer',
+    'TE',
+    'User-Agent',
+    'Upgrade',
+    'Via',
+    'Warning'
+];
+
+const TriggerContainer = ({ isPending, onCancel, response })=>{
+    const { statusCode, message } = response ?? {};
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Box, {
+        background: "neutral0",
+        padding: 5,
+        shadow: "filterShadow",
+        hasRadius: true,
+        children: /*#__PURE__*/ jsxs(Grid.Root, {
+            gap: 4,
+            style: {
+                alignItems: 'center'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Grid.Item, {
+                    col: 3,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        children: formatMessage({
+                            id: 'Settings.webhooks.trigger.test',
+                            defaultMessage: 'Test-trigger'
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Grid.Item, {
+                    col: 3,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: /*#__PURE__*/ jsx(Status, {
+                        isPending: isPending,
+                        statusCode: statusCode
+                    })
+                }),
+                /*#__PURE__*/ jsx(Grid.Item, {
+                    col: 6,
+                    direction: "column",
+                    alignItems: "stretch",
+                    children: !isPending ? /*#__PURE__*/ jsx(Message, {
+                        statusCode: statusCode,
+                        message: message
+                    }) : /*#__PURE__*/ jsx(Flex, {
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ jsx("button", {
+                            onClick: onCancel,
+                            type: "button",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                gap: 2,
+                                alignItems: "center",
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        textColor: "neutral400",
+                                        children: formatMessage({
+                                            id: 'Settings.webhooks.trigger.cancel',
+                                            defaultMessage: 'cancel'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Cross, {
+                                        fill: "neutral400",
+                                        height: "1.2rem",
+                                        width: "1.2rem"
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+const Status = ({ isPending, statusCode })=>{
+    const { formatMessage } = useIntl();
+    if (isPending || !statusCode) {
+        return /*#__PURE__*/ jsxs(Flex, {
+            gap: 2,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsx(Loader, {
+                    height: "1.2rem",
+                    width: "1.2rem"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    children: formatMessage({
+                        id: 'Settings.webhooks.trigger.pending',
+                        defaultMessage: 'pending'
+                    })
+                })
+            ]
+        });
+    }
+    if (statusCode >= 200 && statusCode < 300) {
+        return /*#__PURE__*/ jsxs(Flex, {
+            gap: 2,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsx(Check, {
+                    fill: "success700",
+                    height: "1.2rem",
+                    width: "1.2rem"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    children: formatMessage({
+                        id: 'Settings.webhooks.trigger.success',
+                        defaultMessage: 'success'
+                    })
+                })
+            ]
+        });
+    }
+    if (statusCode >= 300) {
+        return /*#__PURE__*/ jsxs(Flex, {
+            gap: 2,
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsx(Cross, {
+                    fill: "danger700",
+                    height: "1.2rem",
+                    width: "1.2rem"
+                }),
+                /*#__PURE__*/ jsxs(Typography, {
+                    children: [
+                        formatMessage({
+                            id: 'Settings.error',
+                            defaultMessage: 'error'
+                        }),
+                        " ",
+                        statusCode
+                    ]
+                })
+            ]
+        });
+    }
+    return null;
+};
+const Message = ({ statusCode, message })=>{
+    const { formatMessage } = useIntl();
+    if (!statusCode) {
+        return null;
+    }
+    if (statusCode >= 200 && statusCode < 300) {
+        return /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "flex-end",
+            children: /*#__PURE__*/ jsx(Typography, {
+                textColor: "neutral600",
+                ellipsis: true,
+                children: formatMessage({
+                    id: 'Settings.webhooks.trigger.success.label',
+                    defaultMessage: 'Trigger succeeded'
+                })
+            })
+        });
+    }
+    if (statusCode >= 300) {
+        return /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "flex-end",
+            children: /*#__PURE__*/ jsx(Flex, {
+                maxWidth: `25rem`,
+                justifyContent: "flex-end",
+                title: message,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    ellipsis: true,
+                    textColor: "neutral600",
+                    children: message
+                })
+            })
+        });
+    }
+    return null;
+};
+
+const WebhookForm = ({ handleSubmit, triggerWebhook, isCreating, isTriggering, triggerResponse, data })=>{
+    const { formatMessage } = useIntl();
+    const [showTriggerResponse, setShowTriggerResponse] = React.useState(false);
+    const EventTable = useEnterprise(EventTableCE, async ()=>(await import('./EventsTable-CsFf4rOj.mjs')).EventsTableEE);
+    /**
+   * Map the headers into a form that can be used within the formik form
+   */ const mapHeaders = (headers)=>{
+        if (!Object.keys(headers).length) {
+            return [
+                {
+                    key: '',
+                    value: ''
+                }
+            ];
+        }
+        return Object.entries(headers).map(([key, value])=>({
+                key,
+                value
+            }));
+    };
+    // block rendering until the EE component is fully loaded
+    if (!EventTable) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Form, {
+        initialValues: {
+            name: data?.name || '',
+            url: data?.url || '',
+            headers: mapHeaders(data?.headers || {}),
+            events: data?.events || []
+        },
+        method: isCreating ? 'POST' : 'PUT',
+        onSubmit: handleSubmit,
+        validationSchema: makeWebhookValidationSchema({
+            formatMessage
+        }),
+        children: ({ isSubmitting, modified })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Layouts.Header, {
+                        primaryAction: /*#__PURE__*/ jsxs(Flex, {
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    onClick: ()=>{
+                                        triggerWebhook();
+                                        setShowTriggerResponse(true);
+                                    },
+                                    variant: "tertiary",
+                                    startIcon: /*#__PURE__*/ jsx(Play, {}),
+                                    disabled: isCreating || isTriggering,
+                                    children: formatMessage({
+                                        id: 'Settings.webhooks.trigger',
+                                        defaultMessage: 'Trigger'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    startIcon: /*#__PURE__*/ jsx(Check, {}),
+                                    type: "submit",
+                                    disabled: !modified,
+                                    loading: isSubmitting,
+                                    children: formatMessage({
+                                        id: 'global.save',
+                                        defaultMessage: 'Save'
+                                    })
+                                })
+                            ]
+                        }),
+                        title: isCreating ? formatMessage({
+                            id: 'Settings.webhooks.create',
+                            defaultMessage: 'Create a webhook'
+                        }) : data?.name,
+                        navigationAction: /*#__PURE__*/ jsx(BackButton, {
+                            fallback: "../webhooks"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Layouts.Content, {
+                        children: /*#__PURE__*/ jsxs(Flex, {
+                            direction: "column",
+                            alignItems: "stretch",
+                            gap: 4,
+                            children: [
+                                showTriggerResponse && /*#__PURE__*/ jsx(TriggerContainer, {
+                                    isPending: isTriggering,
+                                    response: triggerResponse,
+                                    onCancel: ()=>setShowTriggerResponse(false)
+                                }),
+                                /*#__PURE__*/ jsx(Box, {
+                                    background: "neutral0",
+                                    padding: 8,
+                                    shadow: "filterShadow",
+                                    hasRadius: true,
+                                    children: /*#__PURE__*/ jsxs(Flex, {
+                                        direction: "column",
+                                        alignItems: "stretch",
+                                        gap: 6,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Grid.Root, {
+                                                gap: 6,
+                                                children: [
+                                                    {
+                                                        label: formatMessage({
+                                                            id: 'global.name',
+                                                            defaultMessage: 'Name'
+                                                        }),
+                                                        name: 'name',
+                                                        required: true,
+                                                        size: 6,
+                                                        type: 'string'
+                                                    },
+                                                    {
+                                                        label: formatMessage({
+                                                            id: 'Settings.roles.form.input.url',
+                                                            defaultMessage: 'Url'
+                                                        }),
+                                                        name: 'url',
+                                                        required: true,
+                                                        size: 12,
+                                                        type: 'string'
+                                                    }
+                                                ].map(({ size, ...field })=>/*#__PURE__*/ jsx(Grid.Item, {
+                                                        col: size,
+                                                        direction: "column",
+                                                        alignItems: "stretch",
+                                                        children: /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                                            ...field
+                                                        })
+                                                    }, field.name))
+                                            }),
+                                            /*#__PURE__*/ jsx(HeadersInput, {}),
+                                            /*#__PURE__*/ jsx(EventTable, {})
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+    });
+};
+const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
+const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
+const makeWebhookValidationSchema = ({ formatMessage })=>yup.object().shape({
+        name: yup.string().nullable().required(formatMessage({
+            id: 'Settings.webhooks.validation.name.required',
+            defaultMessage: 'Name is required'
+        })).matches(NAME_REGEX, formatMessage({
+            id: 'Settings.webhooks.validation.name.regex',
+            defaultMessage: 'The name must start with a letter and only contain letters, numbers, spaces and underscores'
+        })),
+        url: yup.string().nullable().required(formatMessage({
+            id: 'Settings.webhooks.validation.url.required',
+            defaultMessage: 'Url is required'
+        })).matches(URL_REGEX, formatMessage({
+            id: 'Settings.webhooks.validation.url.regex',
+            defaultMessage: 'The value must be a valid Url'
+        })),
+        headers: yup.lazy((array)=>{
+            const baseSchema = yup.array();
+            if (array.length === 1) {
+                const { key, value } = array[0];
+                if (!key && !value) {
+                    return baseSchema;
+                }
+            }
+            return baseSchema.of(yup.object().shape({
+                key: yup.string().required(formatMessage({
+                    id: 'Settings.webhooks.validation.key',
+                    defaultMessage: 'Key is required'
+                })).nullable(),
+                value: yup.string().required(formatMessage({
+                    id: 'Settings.webhooks.validation.value',
+                    defaultMessage: 'Value is required'
+                })).nullable()
+            }));
+        }),
+        events: yup.array()
+    });
+
+/* -------------------------------------------------------------------------------------------------
+ * EditView
+ * -----------------------------------------------------------------------------------------------*/ const cleanData = (data)=>({
+        ...data,
+        headers: data.headers.reduce((acc, { key, value })=>{
+            if (key !== '') {
+                acc[key] = value;
+            }
+            return acc;
+        }, {})
+    });
+const EditPage = ()=>{
+    const { formatMessage } = useIntl();
+    const match = useMatch('/settings/webhooks/:id');
+    const id = match?.params.id;
+    const isCreating = id === 'create';
+    const navigate = useNavigate();
+    const { toggleNotification } = useNotification();
+    const { _unstableFormatAPIError: formatAPIError, _unstableFormatValidationErrors: formatValidationErrors } = useAPIErrorHandler();
+    /**
+   * Prevents the notifications from showing up twice because the function identity
+   * coming from the helper plugin is not stable
+   */ // eslint-disable-next-line react-hooks/exhaustive-deps
+    const stableFormatAPIError = React.useCallback(formatAPIError, []);
+    const [isTriggering, setIsTriggering] = React.useState(false);
+    const [triggerResponse, setTriggerResponse] = React.useState();
+    const { isLoading, webhooks, error, createWebhook, updateWebhook, triggerWebhook } = useWebhooks({
+        id: id
+    }, {
+        skip: isCreating
+    });
+    React.useEffect(()=>{
+        if (error) {
+            toggleNotification({
+                type: 'danger',
+                message: stableFormatAPIError(error)
+            });
+        }
+    }, [
+        error,
+        toggleNotification,
+        stableFormatAPIError
+    ]);
+    const handleTriggerWebhook = async ()=>{
+        try {
+            setIsTriggering(true);
+            const res = await triggerWebhook(id);
+            if ('error' in res) {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatAPIError(res.error)
+                });
+                return;
+            }
+            setTriggerResponse(res.data);
+        } catch  {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        } finally{
+            setIsTriggering(false);
+        }
+    };
+    const handleSubmit = async (data, helpers)=>{
+        try {
+            if (isCreating) {
+                const res = await createWebhook(cleanData(data));
+                if ('error' in res) {
+                    if (isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
+                        helpers.setErrors(formatValidationErrors(res.error));
+                    } else {
+                        toggleNotification({
+                            type: 'danger',
+                            message: formatAPIError(res.error)
+                        });
+                    }
+                    return;
+                }
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'Settings.webhooks.created'
+                    })
+                });
+                navigate(`../webhooks/${res.data.id}`, {
+                    replace: true
+                });
+            } else {
+                const res = await updateWebhook({
+                    id: id,
+                    ...cleanData(data)
+                });
+                if ('error' in res) {
+                    if (isBaseQueryError(res.error) && res.error.name === 'ValidationError') {
+                        helpers.setErrors(formatValidationErrors(res.error));
+                    } else {
+                        toggleNotification({
+                            type: 'danger',
+                            message: formatAPIError(res.error)
+                        });
+                    }
+                    return;
+                }
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'notification.form.success.fields'
+                    })
+                });
+            }
+        } catch  {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        }
+    };
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Page.Loading, {});
+    }
+    const [webhook] = webhooks ?? [];
+    return /*#__PURE__*/ jsxs(Main, {
+        children: [
+            /*#__PURE__*/ jsx(Page.Title, {
+                children: formatMessage({
+                    id: 'Settings.PageTitle',
+                    defaultMessage: 'Settings - {name}'
+                }, {
+                    name: 'Webhooks'
+                })
+            }),
+            /*#__PURE__*/ jsx(WebhookForm, {
+                data: webhook,
+                handleSubmit: handleSubmit,
+                triggerWebhook: handleTriggerWebhook,
+                isCreating: isCreating,
+                isTriggering: isTriggering,
+                triggerResponse: triggerResponse
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * ProtectedEditView
+ * -----------------------------------------------------------------------------------------------*/ const ProtectedEditPage = ()=>{
+    const permissions = useTypedSelector(selectAdminPermissions);
+    return /*#__PURE__*/ jsx(Page.Protect, {
+        permissions: permissions.settings?.webhooks.update,
+        children: /*#__PURE__*/ jsx(EditPage, {})
+    });
+};
+
+var EditPage$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  EditPage: EditPage,
+  ProtectedEditPage: ProtectedEditPage
+});
+
+export { EditPage as E, Events as a, EditPage$1 as b };
+//# sourceMappingURL=EditPage-BNZ90ISm.mjs.map