@strapi/admin 5.0.0-beta.6 → 5.0.0-beta.8

package/dist/admin/{EditPage-lyFePXWl.mjs → EditPage-15aToLph.mjs}

@@ -1,18 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { RawTable, Flex, FieldLabel, RawThead, RawTr, RawTh, VisuallyHidden, Typography, RawTbody, RawTd, Checkbox, BaseCheckbox, IconButton, Box, Grid, GridItem, TextInput, TextButton, CreatableCombobox, ComboboxOption, HeaderLayout, Button, ContentLayout, Main } from '@strapi/design-system';
+import { RawTable, Flex, Field, RawThead, RawTr, RawTh, VisuallyHidden, Typography, RawTbody, RawTd, Checkbox, BaseCheckbox, Box, Grid, GridItem, IconButton, TextButton, 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, u as useNotification, f as useAPIErrorHandler } from './rbac-uVd0RAE5.mjs';
-import { s as selectAdminPermissions } from './selectors-AvywwQRm.mjs';
-import { i as isBaseQueryError } from './admin-5SXhE_nJ.mjs';
+import { b as useTypedSelector, P as Page, u as useNotification, f as useAPIErrorHandler } from './rbac-oJEkQdXG.mjs';
+import { s as selectAdminPermissions } from './selectors-Ilww6FA-.mjs';
+import { i as isBaseQueryError } from './admin-B6AW0Kov.mjs';
 import { Minus, Plus, Cross, Loader, Check, Play } from '@strapi/icons';
-import { useFormikContext, FieldArray, Field, useFormik, FormikProvider, Form } from 'formik';
 import * as yup from 'yup';
-import { B as BackButton } from './index-7fPlAzj6.mjs';
+import { u as useField, x as useForm, y as MemoizedStringInput, F as Form, b as Layouts, B as BackButton, M as MemoizedInputRenderer } from './index-69WUS0qJ.mjs';
 import { u as useEnterprise } from './useEnterprise-jpsYZWzn.mjs';
-import styled from 'styled-components';
-import { u as useWebhooks } from './useWebhooks-8VWSFqNg.mjs';
+import { styled } from 'styled-components';
+import { u as useWebhooks } from './useWebhooks-bgdpL7W6.mjs';
 
 const EventsRoot = ({ children }) => {
   const { formatMessage } = useIntl();
@@ -21,7 +20,7 @@ const EventsRoot = ({ children }) => {
     defaultMessage: "Events"
   });
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { "aria-hidden": true, children: label }),
+    /* @__PURE__ */ jsx(Field.Label, { "aria-hidden": true, children: label }),
     /* @__PURE__ */ jsx(StyledTable, { "aria-label": label, children })
   ] });
 };
@@ -38,9 +37,8 @@ const StyledTable = styled(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 {
@@ -89,9 +87,9 @@ const EventsHeaders = ({ getHeaders = getCEHeaders }) => {
 };
 const EventsBody = ({ providedEvents }) => {
   const events = providedEvents || getCEEvents();
-  const { values, handleChange: onChange } = useFormikContext();
+  const { value = [], onChange } = 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];
@@ -101,22 +99,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);
@@ -125,15 +119,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__ */ jsx(RawTbody, { children: Object.entries(events).map(([event, value]) => {
+  return /* @__PURE__ */ jsx(RawTbody, { children: Object.entries(events).map(([event, value2]) => {
     return /* @__PURE__ */ jsx(
       EventsRow,
       {
         disabledEvents,
         name: event,
-        events: value,
+        events: value2,
         inputValue: formattedValue[event],
         handleSelect,
         handleSelectAll
@@ -169,9 +163,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__ */ jsxs(RawTr, { children: [
@@ -190,14 +182,14 @@ const EventsRow = ({
       }
     ) }),
     events.map((event) => {
-      return /* @__PURE__ */ jsx(RawTd, { children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(RawTd, { textAlign: "center", children: /* @__PURE__ */ jsx(
         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);
     }),
@@ -216,139 +208,115 @@ const EventTableCE = () => {
 
 const HeadersInput = () => {
   const { formatMessage } = useIntl();
-  const { values, errors } = useFormikContext();
+  const addFieldRow = useForm("HeadersInput", (state) => state.addFieldRow);
+  const removeFieldRow = useForm("HeadersInput", (state) => state.removeFieldRow);
+  const { value = [] } = useField("headers");
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { children: formatMessage({
+    /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
       id: "Settings.webhooks.form.headers",
       defaultMessage: "Headers"
     }) }),
-    /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral100", hasRadius: true, children: /* @__PURE__ */ jsx(
-      FieldArray,
-      {
-        validateOnChange: false,
-        name: "headers",
-        render: ({ push, remove }) => /* @__PURE__ */ jsxs(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__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-                Field,
-                {
-                  as: HeaderCombobox,
-                  name: `headers.${index}.key`,
-                  "aria-label": `row ${index + 1} key`,
-                  label: formatMessage({
-                    id: "Settings.webhooks.key",
-                    defaultMessage: "Key"
-                  }),
-                  error: comboboxError
-                }
-              ) }),
-              /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", children: [
-                /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                  Field,
-                  {
-                    as: TextInput,
-                    name: `headers.${index}.value`,
-                    "aria-label": `row ${index + 1} value`,
-                    label: formatMessage({
-                      id: "Settings.webhooks.value",
-                      defaultMessage: "Value"
-                    }),
-                    error: textInputError
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  Flex,
-                  {
-                    paddingLeft: 2,
-                    style: { alignSelf: "center" },
-                    paddingTop: textInputError ? 0 : 5,
-                    children: /* @__PURE__ */ jsx(
-                      StyledIconButton,
-                      {
-                        borderRadius: "3rem",
-                        width: "2rem",
-                        height: "2rem",
-                        padding: "0.4rem",
-                        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__ */ jsx(Minus, {})
-                      }
-                    )
-                  }
-                )
-              ] }) })
-            ] }, `${index}.${header.key}`);
-          }),
-          /* @__PURE__ */ jsx(GridItem, { col: 12, children: /* @__PURE__ */ jsx(
-            TextButton,
+    /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral100", hasRadius: true, children: value.map((_, index) => {
+      return /* @__PURE__ */ jsxs(Grid, { gap: 4, children: [
+        /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
+          HeaderCombobox,
+          {
+            name: `headers.${index}.key`,
+            "aria-label": `row ${index + 1} key`,
+            label: formatMessage({
+              id: "Settings.webhooks.key",
+              defaultMessage: "Key"
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-end", gap: 2, children: [
+          /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+            MemoizedStringInput,
             {
-              type: "button",
-              onClick: () => {
-                push({ key: "", value: "" });
-              },
-              startIcon: /* @__PURE__ */ jsx(Plus, {}),
-              children: formatMessage({
-                id: "Settings.webhooks.create.header",
-                defaultMessage: "Create new header"
-              })
+              name: `headers.${index}.value`,
+              "aria-label": `row ${index + 1} value`,
+              label: formatMessage({
+                id: "Settings.webhooks.value",
+                defaultMessage: "Value"
+              }),
+              type: "string"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Flex, { paddingTop: 6, style: { alignSelf: "flex-start" }, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              borderRadius: "3rem",
+              width: "2rem",
+              height: "2rem",
+              padding: "0.4rem",
+              alignItems: "center",
+              justifyContent: "center",
+              disabled: value.length === 1,
+              onClick: () => removeFieldRow("headers", index),
+              color: "primary600",
+              label: formatMessage(
+                {
+                  id: "Settings.webhooks.headers.remove",
+                  defaultMessage: "Remove header row {number}"
+                },
+                { number: index + 1 }
+              ),
+              children: /* @__PURE__ */ jsx(Minus, { width: "0.8rem" })
             }
           ) })
-        ] })
-      }
-    ) })
+        ] }) }),
+        /* @__PURE__ */ jsx(GridItem, { col: 12, children: /* @__PURE__ */ jsx(
+          TextButton,
+          {
+            type: "button",
+            onClick: () => {
+              addFieldRow("headers", { key: "", value: "" });
+            },
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            children: formatMessage({
+              id: "Settings.webhooks.create.header",
+              defaultMessage: "Create new header"
+            })
+          }
+        ) })
+      ] }, index);
+    }) })
   ] });
 };
-const StyledIconButton = styled(IconButton)`
-  svg {
-    width: 0.8rem;
-    rect {
-      fill: ${(props) => props.theme.colors.primary600};
-    }
-  }
-`;
-const HeaderCombobox = ({ name, onChange, value, ...restProps }) => {
-  const {
-    values: { headers }
-  } = useFormikContext();
+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 !== 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__ */ jsx(
-    CreatableCombobox,
-    {
-      ...restProps,
-      onClear: () => handleChange(""),
-      onChange: handleChange,
-      onCreateOption: handleCreateOption,
-      placeholder: "",
-      value,
-      children: options.map((key) => /* @__PURE__ */ jsx(ComboboxOption, { value: key, children: key }, key))
-    }
-  );
+  return /* @__PURE__ */ jsxs(Field.Root, { 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",
@@ -461,7 +429,7 @@ const WebhookForm = ({
   const [showTriggerResponse, setShowTriggerResponse] = React.useState(false);
   const EventTable = useEnterprise(
     EventTableCE,
-    async () => (await import('./EventsTable-2C605_qQ.mjs')).EventsTableEE
+    async () => (await import('./EventsTable-x0tiLQ21.mjs')).EventsTableEE
   );
   const mapHeaders = (headers) => {
     if (!Object.keys(headers).length) {
@@ -469,111 +437,104 @@ const WebhookForm = ({
     }
     return Object.entries(headers).map(([key, value]) => ({ key, value }));
   };
-  const 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__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsxs(Form, { children: [
-    /* @__PURE__ */ jsx(
-      HeaderLayout,
-      {
-        primaryAction: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-          /* @__PURE__ */ jsx(
-            Button,
+  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,
+                  size: "L",
+                  children: formatMessage({
+                    id: "Settings.webhooks.trigger",
+                    defaultMessage: "Trigger"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  startIcon: /* @__PURE__ */ jsx(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__ */ jsx(BackButton, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          showTriggerResponse && /* @__PURE__ */ jsx(
+            TriggerContainer,
             {
-              onClick: () => {
-                triggerWebhook();
-                setShowTriggerResponse(true);
-              },
-              variant: "tertiary",
-              startIcon: /* @__PURE__ */ jsx(Play, {}),
-              disabled: isCreating || isTriggering,
-              size: "L",
-              children: formatMessage({
-                id: "Settings.webhooks.trigger",
-                defaultMessage: "Trigger"
-              })
+              isPending: isTriggering,
+              response: triggerResponse,
+              onCancel: () => setShowTriggerResponse(false)
             }
           ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              startIcon: /* @__PURE__ */ jsx(Check, {}),
-              type: "submit",
-              size: "L",
-              disabled: !formik.dirty,
-              loading: formik.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, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(ContentLayout, { 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__ */ jsxs(Grid, { gap: 6, children: [
-          /* @__PURE__ */ jsx(GridItem, { col: 6, children: /* @__PURE__ */ jsx(
-            Field,
-            {
-              as: TextInput,
-              name: "name",
-              error: formik.errors.name,
-              label: formatMessage({
-                id: "global.name",
-                defaultMessage: "Name"
-              }),
-              required: true
-            }
-          ) }),
-          /* @__PURE__ */ jsx(GridItem, { col: 12, children: /* @__PURE__ */ jsx(
-            Field,
-            {
-              as: TextInput,
-              name: "url",
-              error: formik.errors.url,
-              label: formatMessage({
-                id: "Settings.roles.form.input.url",
-                defaultMessage: "Url"
-              }),
-              required: true
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(HeadersInput, {}),
-        /* @__PURE__ */ jsx(EventTable, {})
-      ] }) })
-    ] }) })
-  ] }) });
+          /* @__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, { 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(GridItem, { col: size, 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*)\/?(.*))/;
@@ -690,13 +651,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 (isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            formik.setErrors(formatValidationErrors(res.error));
+            helpers.setErrors(formatValidationErrors(res.error));
           } else {
             toggleNotification({
               type: "danger",
@@ -714,7 +675,7 @@ const EditPage = () => {
         const res = await updateWebhook({ id, ...cleanData(data) });
         if ("error" in res) {
           if (isBaseQueryError(res.error) && res.error.name === "ValidationError") {
-            formik.setErrors(formatValidationErrors(res.error));
+            helpers.setErrors(formatValidationErrors(res.error));
           } else {
             toggleNotification({
               type: "danger",
@@ -774,4 +735,4 @@ const EditPage$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty
 }, Symbol.toStringTag, { value: 'Module' }));
 
 export { EditPage as E, Events as a, EditPage$1 as b };
-//# sourceMappingURL=EditPage-lyFePXWl.mjs.map
+//# sourceMappingURL=EditPage-15aToLph.mjs.map