@strapi/admin 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/admin/{EditPage-QD0hqEQx.js → EditPage-2l5T1lDC.js}

@@ -5,18 +5,15 @@ const React = require('react');
 const designSystem = require('@strapi/design-system');
 const reactIntl = require('react-intl');
 const reactRouterDom = require('react-router-dom');
-const rbac = require('./rbac-WZsv1761.js');
-const selectors = require('./selectors-CiTVxP8O.js');
-const admin = require('./admin-vlKSOeHB.js');
+const rbac = require('./rbac-xo8GO653.js');
+const selectors = require('./selectors-lQOnkFXz.js');
+const admin = require('./admin-sk7xXllW.js');
 const icons = require('@strapi/icons');
-const formik = require('formik');
 const yup = require('yup');
-const index = require('./index-Ze-KuF2r.js');
+const index = require('./index-8r8zglVb.js');
 const useEnterprise = require('./useEnterprise-DUs6BYlP.js');
-const styled = require('styled-components');
-const useWebhooks = require('./useWebhooks-oZ5DKtvz.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
+const styledComponents = require('styled-components');
+const useWebhooks = require('./useWebhooks-BBj9Ew7F.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -38,7 +35,6 @@ function _interopNamespace(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespace(React);
 const yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const EventsRoot = ({ children }) => {
   const { formatMessage } = reactIntl.useIntl();
@@ -47,11 +43,11 @@ const EventsRoot = ({ children }) => {
     defaultMessage: "Events"
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { "aria-hidden": true, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { "aria-hidden": true, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(StyledTable, { "aria-label": label, children })
   ] });
 };
-const StyledTable = styled__default.default(designSystem.RawTable)`
+const StyledTable = styledComponents.styled(designSystem.RawTable)`
   tbody tr:nth-child(odd) {
     background: ${({ theme }) => theme.colors.neutral100};
   }
@@ -64,9 +60,8 @@ const StyledTable = styled__default.default(designSystem.RawTable)`
   th {
     padding-block-start: ${({ theme }) => theme.spaces[3]};
     padding-block-end: ${({ theme }) => theme.spaces[3]};
-    width: 10%;
+    width: 6%;
     vertical-align: middle;
-    text-align: center;
   }
 
   tbody tr td:first-child {
@@ -115,9 +110,9 @@ const EventsHeaders = ({ getHeaders = getCEHeaders }) => {
 };
 const EventsBody = ({ providedEvents }) => {
   const events = providedEvents || getCEEvents();
-  const { values, handleChange: onChange } = formik.useFormikContext();
+  const { value = [], onChange } = index.useField("events");
   const inputName = "events";
-  const inputValue = values.events;
+  const inputValue = value;
   const disabledEvents = [];
   const formattedValue = inputValue.reduce((acc, curr) => {
     const key = curr.split(".")[0];
@@ -127,22 +122,18 @@ const EventsBody = ({ providedEvents }) => {
     acc[key].push(curr);
     return acc;
   }, {});
-  const handleSelect = ({
-    target: { name, value }
-  }) => {
+  const handleSelect = (name, value2) => {
     const set = new Set(inputValue);
-    if (value) {
+    if (value2) {
       set.add(name);
     } else {
       set.delete(name);
     }
-    onChange({ target: { name: inputName, value: Array.from(set) } });
+    onChange(inputName, Array.from(set));
   };
-  const handleSelectAll = ({
-    target: { name, value }
-  }) => {
+  const handleSelectAll = (name, value2) => {
     const set = new Set(inputValue);
-    if (value) {
+    if (value2) {
       events[name].forEach((event) => {
         if (!disabledEvents.includes(event)) {
           set.add(event);
@@ -151,15 +142,15 @@ const EventsBody = ({ providedEvents }) => {
     } else {
       events[name].forEach((event) => set.delete(event));
     }
-    onChange({ target: { name: inputName, value: Array.from(set) } });
+    onChange(inputName, Array.from(set));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.RawTbody, { children: Object.entries(events).map(([event, value]) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.RawTbody, { children: Object.entries(events).map(([event, value2]) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       EventsRow,
       {
         disabledEvents,
         name: event,
-        events: value,
+        events: value2,
         inputValue: formattedValue[event],
         handleSelect,
         handleSelectAll
@@ -195,9 +186,7 @@ const EventsRow = ({
   const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;
   const onChangeAll = ({ target: { name: name2 } }) => {
     const valueToSet = !areAllCheckboxesSelected;
-    handleSelectAll({
-      target: { name: name2, value: valueToSet }
-    });
+    handleSelectAll(name2, valueToSet);
   };
   const targetColumns = 5;
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.RawTr, { children: [
@@ -216,14 +205,14 @@ const EventsRow = ({
       }
     ) }),
     events.map((event) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.RawTd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(designSystem.RawTd, { textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.BaseCheckbox,
         {
           disabled: disabledEvents.includes(event),
           "aria-label": event,
           name: event,
           value: inputValue.includes(event),
-          onValueChange: (value) => handleSelect({ target: { name: event, value } })
+          onValueChange: (value) => handleSelect(event, value)
         }
       ) }, event);
     }),
@@ -242,139 +231,115 @@ const EventTableCE = () => {
 
 const HeadersInput = () => {
   const { formatMessage } = reactIntl.useIntl();
-  const { values, errors } = formik.useFormikContext();
+  const addFieldRow = index.useForm("HeadersInput", (state) => state.addFieldRow);
+  const removeFieldRow = index.useForm("HeadersInput", (state) => state.removeFieldRow);
+  const { value = [] } = index.useField("headers");
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.FieldLabel, { children: formatMessage({
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
       id: "Settings.webhooks.form.headers",
       defaultMessage: "Headers"
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      formik.FieldArray,
-      {
-        validateOnChange: false,
-        name: "headers",
-        render: ({ push, remove }) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
-          values.headers.map((header, index) => {
-            const formikError = errors.headers?.[index];
-            const comboboxError = typeof formikError === "object" ? formikError.key : void 0;
-            const textInputError = typeof formikError === "object" ? formikError.value : void 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-                formik.Field,
-                {
-                  as: HeaderCombobox,
-                  name: `headers.${index}.key`,
-                  "aria-label": `row ${index + 1} key`,
-                  label: formatMessage({
-                    id: "Settings.webhooks.key",
-                    defaultMessage: "Key"
-                  }),
-                  error: comboboxError
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-end", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  formik.Field,
-                  {
-                    as: designSystem.TextInput,
-                    name: `headers.${index}.value`,
-                    "aria-label": `row ${index + 1} value`,
-                    label: formatMessage({
-                      id: "Settings.webhooks.value",
-                      defaultMessage: "Value"
-                    }),
-                    error: textInputError
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Flex,
-                  {
-                    paddingLeft: 2,
-                    style: { alignSelf: "center" },
-                    paddingTop: textInputError ? 0 : 5,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      StyledIconButton,
-                      {
-                        borderRadius: 30 / 16,
-                        width: 20 / 16,
-                        height: 20 / 16,
-                        padding: 3 / 16,
-                        alignItems: "center",
-                        justifyContent: "center",
-                        disabled: values.headers.length === 1,
-                        onClick: () => remove(index),
-                        label: formatMessage(
-                          {
-                            id: "Settings.webhooks.headers.remove",
-                            defaultMessage: "Remove header row {number}"
-                          },
-                          { number: index + 1 }
-                        ),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, {})
-                      }
-                    )
-                  }
-                )
-              ] }) })
-            ] }, `${index}.${header.key}`);
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.TextButton,
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral100", hasRadius: true, children: value.map((_, index$1) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
+          HeaderCombobox,
+          {
+            name: `headers.${index$1}.key`,
+            "aria-label": `row ${index$1 + 1} key`,
+            label: formatMessage({
+              id: "Settings.webhooks.key",
+              defaultMessage: "Key"
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-end", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            index.StringInput,
             {
-              type: "button",
-              onClick: () => {
-                push({ key: "", value: "" });
-              },
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-              children: formatMessage({
-                id: "Settings.webhooks.create.header",
-                defaultMessage: "Create new header"
-              })
+              name: `headers.${index$1}.value`,
+              "aria-label": `row ${index$1 + 1} value`,
+              label: formatMessage({
+                id: "Settings.webhooks.value",
+                defaultMessage: "Value"
+              }),
+              type: "string"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 6, style: { alignSelf: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              borderRadius: "3rem",
+              width: "2rem",
+              height: "2rem",
+              padding: "0.4rem",
+              alignItems: "center",
+              justifyContent: "center",
+              disabled: value.length === 1,
+              onClick: () => removeFieldRow("headers", index$1),
+              color: "primary600",
+              label: formatMessage(
+                {
+                  id: "Settings.webhooks.headers.remove",
+                  defaultMessage: "Remove header row {number}"
+                },
+                { number: index$1 + 1 }
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Minus, { width: "0.8rem" })
             }
           ) })
-        ] })
-      }
-    ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextButton,
+          {
+            type: "button",
+            onClick: () => {
+              addFieldRow("headers", { key: "", value: "" });
+            },
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+            children: formatMessage({
+              id: "Settings.webhooks.create.header",
+              defaultMessage: "Create new header"
+            })
+          }
+        ) })
+      ] }, index$1);
+    }) })
   ] });
 };
-const StyledIconButton = styled__default.default(designSystem.IconButton)`
-  svg {
-    width: 0.5rem;
-    rect {
-      fill: ${(props) => props.theme.colors.primary600};
-    }
-  }
-`;
-const HeaderCombobox = ({ name, onChange, value, ...restProps }) => {
-  const {
-    values: { headers }
-  } = formik.useFormikContext();
+const HeaderCombobox = ({ name, label, ...restProps }) => {
   const [options, setOptions] = React__namespace.useState([...HTTP_HEADERS]);
+  const { value: headers } = index.useField("headers");
+  const field = index.useField(name);
   React__namespace.useEffect(() => {
     const headerOptions = HTTP_HEADERS.filter(
-      (key) => !headers?.some((header) => header.key !== value && header.key === key)
+      (key) => !headers?.some((header) => header.key !== field.value && header.key === key)
     );
     setOptions(headerOptions);
-  }, [headers, value]);
-  const handleChange = (value2) => {
-    onChange({ target: { name, value: value2 } });
+  }, [headers, field.value]);
+  const handleChange = (value) => {
+    field.onChange(name, value);
   };
-  const handleCreateOption = (value2) => {
-    setOptions((prev) => [...prev, value2]);
-    handleChange(value2);
+  const handleCreateOption = (value) => {
+    setOptions((prev) => [...prev, value]);
+    handleChange(value);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    designSystem.CreatableCombobox,
-    {
-      ...restProps,
-      onClear: () => handleChange(""),
-      onChange: handleChange,
-      onCreateOption: handleCreateOption,
-      placeholder: "",
-      value,
-      children: options.map((key) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: key, children: key }, key))
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error: field.error, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Combobox,
+      {
+        ...restProps,
+        onClear: () => handleChange(""),
+        onChange: handleChange,
+        onCreateOption: handleCreateOption,
+        placeholder: "",
+        creatable: true,
+        value: field.value,
+        children: options.map((key) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.ComboboxOption, { value: key, children: key }, key))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+  ] });
 };
 const HTTP_HEADERS = [
   "A-IM",
@@ -428,40 +393,27 @@ const TriggerContainer = ({ isPending, onCancel, response }) => {
         id: "Settings.webhooks.trigger.cancel",
         defaultMessage: "cancel"
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.Cross, color: "neutral400" })
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { fill: "neutral400", height: "1.2rem", width: "1.2rem" })
     ] }) }) }) })
   ] }) });
 };
-const Icon = styled__default.default.svg(
-  ({ theme, color }) => `
-  width: ${12 / 16}rem;
-  height: ${12 / 16}rem;
-
-
-  ${color ? styled.css`
-          path {
-            fill: ${theme.colors[color]};
-          }
-        ` : ""}
-`
-);
 const Status = ({ isPending, statusCode }) => {
   const { formatMessage } = reactIntl.useIntl();
   if (isPending || !statusCode) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.Loader }),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Loader, { height: "1.2rem", width: "1.2rem" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({ id: "Settings.webhooks.trigger.pending", defaultMessage: "pending" }) })
     ] });
   }
   if (statusCode >= 200 && statusCode < 300) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.Check, color: "success700" }),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { fill: "success700", height: "1.2rem", width: "1.2rem" }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({ id: "Settings.webhooks.trigger.success", defaultMessage: "success" }) })
     ] });
   }
   if (statusCode >= 300) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: icons.Cross, color: "danger700" }),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { fill: "danger700", height: "1.2rem", width: "1.2rem" }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
         formatMessage({ id: "Settings.error", defaultMessage: "error" }),
         " ",
@@ -483,7 +435,7 @@ const Message = ({ statusCode, message }) => {
     }) }) });
   }
   if (statusCode >= 300) {
-    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { maxWidth: `${250 / 16}rem`, justifyContent: "flex-end", title: message, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, textColor: "neutral600", children: message }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { maxWidth: `25rem`, justifyContent: "flex-end", title: message, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { ellipsis: true, textColor: "neutral600", children: message }) }) });
   }
   return null;
 };
@@ -500,7 +452,7 @@ const WebhookForm = ({
   const [showTriggerResponse, setShowTriggerResponse] = React__namespace.useState(false);
   const EventTable = useEnterprise.useEnterprise(
     EventTableCE,
-    async () => (await Promise.resolve().then(() => require('./EventsTable-y0d489dF.js'))).EventsTableEE
+    async () => (await Promise.resolve().then(() => require('./EventsTable-i6DpZCjP.js'))).EventsTableEE
   );
   const mapHeaders = (headers) => {
     if (!Object.keys(headers).length) {
@@ -508,111 +460,104 @@ const WebhookForm = ({
     }
     return Object.entries(headers).map(([key, value]) => ({ key, value }));
   };
-  const formik$1 = formik.useFormik({
-    initialValues: {
-      name: data?.name || "",
-      url: data?.url || "",
-      headers: mapHeaders(data?.headers || {}),
-      events: data?.events || []
-    },
-    async onSubmit(values, formik2) {
-      await handleSubmit(values, formik2);
-      formik2.resetForm({ values });
-    },
-    validationSchema: makeWebhookValidationSchema({ formatMessage }),
-    validateOnChange: false,
-    validateOnBlur: false
-  });
   if (!EventTable) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children: /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.HeaderLayout,
-      {
-        primaryAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.Layouts.Header,
+          {
+            primaryAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  onClick: () => {
+                    triggerWebhook();
+                    setShowTriggerResponse(true);
+                  },
+                  variant: "tertiary",
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
+                  disabled: isCreating || isTriggering,
+                  size: "L",
+                  children: formatMessage({
+                    id: "Settings.webhooks.trigger",
+                    defaultMessage: "Trigger"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                  type: "submit",
+                  size: "L",
+                  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__ */ jsxRuntime.jsx(index.BackButton, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(index.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          showTriggerResponse && /* @__PURE__ */ jsxRuntime.jsx(
+            TriggerContainer,
             {
-              onClick: () => {
-                triggerWebhook();
-                setShowTriggerResponse(true);
-              },
-              variant: "tertiary",
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Play, {}),
-              disabled: isCreating || isTriggering,
-              size: "L",
-              children: formatMessage({
-                id: "Settings.webhooks.trigger",
-                defaultMessage: "Trigger"
-              })
+              isPending: isTriggering,
+              response: triggerResponse,
+              onCancel: () => setShowTriggerResponse(false)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
-            {
-              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
-              type: "submit",
-              size: "L",
-              disabled: !formik$1.dirty,
-              loading: formik$1.isSubmitting,
-              children: formatMessage({
-                id: "global.save",
-                defaultMessage: "Save"
-              })
-            }
-          )
-        ] }),
-        title: isCreating ? formatMessage({
-          id: "Settings.webhooks.create",
-          defaultMessage: "Create a webhook"
-        }) : data?.name,
-        navigationAction: /* @__PURE__ */ jsxRuntime.jsx(index.BackButton, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
-      showTriggerResponse && /* @__PURE__ */ jsxRuntime.jsx(
-        TriggerContainer,
-        {
-          isPending: isTriggering,
-          response: triggerResponse,
-          onCancel: () => setShowTriggerResponse(false)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 8, shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid, { gap: 6, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(
-            formik.Field,
-            {
-              as: designSystem.TextInput,
-              name: "name",
-              error: formik$1.errors.name,
-              label: formatMessage({
-                id: "global.name",
-                defaultMessage: "Name"
-              }),
-              required: true
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-            formik.Field,
-            {
-              as: designSystem.TextInput,
-              name: "url",
-              error: formik$1.errors.url,
-              label: formatMessage({
-                id: "Settings.roles.form.input.url",
-                defaultMessage: "Url"
-              }),
-              required: true
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(HeadersInput, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(EventTable, {})
-      ] }) })
-    ] }) })
-  ] }) });
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 8, shadow: "filterShadow", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { 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__ */ jsxRuntime.jsx(designSystem.GridItem, { col: size, children: /* @__PURE__ */ jsxRuntime.jsx(index.InputRenderer, { ...field }) }, field.name)) }),
+            /* @__PURE__ */ jsxRuntime.jsx(HeadersInput, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(EventTable, {})
+          ] }) })
+        ] }) })
+      ] })
+    }
+  );
 };
 const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
 const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
@@ -729,13 +674,13 @@ const EditPage = () => {
       setIsTriggering(false);
     }
   };
-  const handleSubmit = async (data, formik) => {
+  const handleSubmit = async (data, helpers) => {
     try {
       if (isCreating) {
         const res = await createWebhook(cleanData(data));
         if ("error" in res) {
           if (admin.isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            formik.setErrors(formatValidationErrors(res.error));
+            helpers.setErrors(formatValidationErrors(res.error));
           } else {
             toggleNotification({
               type: "danger",
@@ -753,7 +698,7 @@ const EditPage = () => {
         const res = await updateWebhook({ id, ...cleanData(data) });
         if ("error" in res) {
           if (admin.isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            formik.setErrors(formatValidationErrors(res.error));
+            helpers.setErrors(formatValidationErrors(res.error));
           } else {
             toggleNotification({
               type: "danger",
@@ -815,4 +760,4 @@ const EditPage$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
 exports.EditPage = EditPage;
 exports.EditPage$1 = EditPage$1;
 exports.Events = Events;
-//# sourceMappingURL=EditPage-QD0hqEQx.js.map
+//# sourceMappingURL=EditPage-2l5T1lDC.js.map