@strapi/admin 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/admin/ListConfigurationPage-Sj0Fbune.js

@@ -0,0 +1,679 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const designSystem = require('@strapi/design-system');
+const reactHelmet = require('react-helmet');
+const reactIntl = require('react-intl');
+const reactRouterDom = require('react-router-dom');
+const layout = require('./reducers-uDxSALD_.js');
+const useDocumentLayout = require('./useDocumentLayout-wBQQmFJL.js');
+const index = require('./index-Xcv2DEB8.js');
+const v2 = require('@strapi/design-system/v2');
+const Icons = require('@strapi/icons');
+const reactDndHtml5Backend = require('react-dnd-html5-backend');
+const styled = require('styled-components');
+const yup = require('yup');
+const FieldTypeIcon = require('./FieldTypeIcon--WKPFDG2.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+const yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+
+const Header = ({ name }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const modified = layout.useForm("Header", (state) => state.modified);
+  const isSubmitting = layout.useForm("Header", (state) => state.isSubmitting);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.HeaderLayout,
+    {
+      navigationAction: /* @__PURE__ */ jsxRuntime.jsx(index.BackButton, {}),
+      primaryAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { size: "S", disabled: !modified, type: "submit", loading: isSubmitting, children: formatMessage({ id: "global.save", defaultMessage: "Save" }) }),
+      subtitle: formatMessage({
+        id: layout.getTranslation("components.SettingsViewWrapper.pluginHeader.description.list-settings"),
+        defaultMessage: "Define the settings of the list view."
+      }),
+      title: formatMessage(
+        {
+          id: layout.getTranslation("components.SettingsViewWrapper.pluginHeader.title"),
+          defaultMessage: "Configure the view - {name}"
+        },
+        { name: layout.capitalise(name) }
+      )
+    }
+  );
+};
+
+const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
+  "media",
+  "richtext",
+  "dynamiczone",
+  "relation",
+  "component",
+  "json",
+  "blocks"
+];
+const Settings = () => {
+  const { formatMessage, locale } = reactIntl.useIntl();
+  const formatter = designSystem.useCollator(locale, {
+    sensitivity: "base"
+  });
+  const { schema } = layout.useDoc();
+  const layout$1 = layout.useForm("Settings", (state) => state.values.layout ?? []);
+  const currentSortBy = layout.useForm(
+    "Settings",
+    (state) => state.values.settings.defaultSortBy
+  );
+  const onChange = layout.useForm("Settings", (state) => state.onChange);
+  const sortOptionsCE = React__namespace.useMemo(
+    () => Object.values(layout$1).reduce((acc, field) => {
+      if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {
+        acc.push({
+          value: field.name,
+          label: typeof field.label !== "string" ? formatMessage(field.label) : field.label
+        });
+      }
+      return acc;
+    }, []),
+    [formatMessage, layout$1, schema]
+  );
+  const sortOptions = index.useEnterprise(
+    sortOptionsCE,
+    async () => {
+      return (await Promise.resolve().then(() => require('./constants-wsN7Fj5H.js'))).REVIEW_WORKFLOW_STAGE_SORT_OPTION_NAME;
+    },
+    {
+      combine(ceOptions, eeOption) {
+        return [...ceOptions, { ...eeOption, label: formatMessage(eeOption.label) }];
+      },
+      defaultValue: sortOptionsCE,
+      enabled: !!schema?.options?.reviewWorkflows
+    }
+  );
+  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));
+  React__namespace.useEffect(() => {
+    if (sortOptionsSorted.findIndex((opt) => opt.value === currentSortBy) === -1) {
+      onChange("settings.defaultSortBy", sortOptionsSorted[0]?.value);
+    }
+  }, [currentSortBy, onChange, sortOptionsSorted]);
+  const formLayout = React__namespace.useMemo(
+    () => SETTINGS_FORM_LAYOUT.map(
+      (row) => row.map((field) => {
+        if (field.type === "enumeration") {
+          return {
+            ...field,
+            hint: field.hint ? formatMessage(field.hint) : void 0,
+            label: formatMessage(field.label),
+            options: field.name === "settings.defaultSortBy" ? sortOptionsSorted : field.options
+          };
+        } else {
+          return {
+            ...field,
+            hint: field.hint ? formatMessage(field.hint) : void 0,
+            label: formatMessage(field.label)
+          };
+        }
+      })
+    ),
+    [formatMessage, sortOptionsSorted]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h2", children: formatMessage({
+      id: layout.getTranslation("containers.SettingPage.settings"),
+      defaultMessage: "Settings"
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: formLayout.map(
+      (row) => row.map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { s: 12, col: size, children: /* @__PURE__ */ jsxRuntime.jsx(useDocumentLayout.InputRenderer, { ...field }) }, field.name))
+    ) }, "bottom")
+  ] });
+};
+const SETTINGS_FORM_LAYOUT = [
+  [
+    {
+      label: {
+        id: layout.getTranslation("form.Input.search"),
+        defaultMessage: "Enable search"
+      },
+      name: "settings.searchable",
+      size: 4,
+      type: "boolean"
+    },
+    {
+      label: {
+        id: layout.getTranslation("form.Input.filters"),
+        defaultMessage: "Enable filters"
+      },
+      name: "settings.filterable",
+      size: 4,
+      type: "boolean"
+    },
+    {
+      label: {
+        id: layout.getTranslation("form.Input.bulkActions"),
+        defaultMessage: "Enable bulk actions"
+      },
+      name: "settings.bulkable",
+      size: 4,
+      type: "boolean"
+    }
+  ],
+  [
+    {
+      hint: {
+        id: layout.getTranslation("form.Input.pageEntries.inputDescription"),
+        defaultMessage: "Note: You can override this value in the Collection Type settings page."
+      },
+      label: {
+        id: layout.getTranslation("form.Input.pageEntries"),
+        defaultMessage: "Entries per page"
+      },
+      name: "settings.pageSize",
+      options: ["10", "20", "50", "100"].map((value) => ({ value, label: value })),
+      size: 6,
+      type: "enumeration"
+    },
+    {
+      label: {
+        id: layout.getTranslation("form.Input.defaultSort"),
+        defaultMessage: "Default sort attribute"
+      },
+      name: "settings.defaultSortBy",
+      options: [],
+      size: 3,
+      type: "enumeration"
+    },
+    {
+      label: {
+        id: layout.getTranslation("form.Input.sort.order"),
+        defaultMessage: "Default sort order"
+      },
+      name: "settings.defaultSortOrder",
+      options: ["ASC", "DESC"].map((value) => ({ value, label: value })),
+      size: 3,
+      type: "enumeration"
+    }
+  ]
+];
+
+const FIELD_SCHEMA = yup__namespace.object().shape({
+  label: yup__namespace.string().required(),
+  sortable: yup__namespace.boolean()
+});
+const EditFieldForm = ({ attribute, name, onClose }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { toggleNotification } = layout.useNotification();
+  const id = React.useId();
+  const { value, onChange } = layout.useField(name);
+  if (!value) {
+    console.error(
+      "You've opened a field to edit without it being part of the form, this is likely a bug with Strapi. Please open an issue."
+    );
+    toggleNotification({
+      message: formatMessage({
+        id: "content-manager.containers.list-settings.modal-form.error",
+        defaultMessage: "An error occurred while trying to open the form."
+      }),
+      type: "danger"
+    });
+    return null;
+  }
+  let shouldDisplaySortToggle = !["media", "relation"].includes(attribute.type);
+  if ("relation" in attribute && ["oneWay", "oneToOne", "manyToOne"].includes(attribute.relation)) {
+    shouldDisplaySortToggle = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalLayout, { onClose, labelledBy: id, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    layout.Form,
+    {
+      method: "PUT",
+      initialValues: value,
+      validationSchema: FIELD_SCHEMA,
+      onSubmit: (data) => {
+        onChange(name, data);
+        onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldTypeIcon.FieldTypeIcon, { type: attribute.type }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id, children: formatMessage(
+            {
+              id: layout.getTranslation("containers.list-settings.modal-form.label"),
+              defaultMessage: "Edit {fieldName}"
+            },
+            { fieldName: layout.capitalise(value.label) }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.ModalBody, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid, { gap: 4, children: [
+          {
+            name: "label",
+            label: formatMessage({
+              id: layout.getTranslation("form.Input.label"),
+              defaultMessage: "Label"
+            }),
+            hint: formatMessage({
+              id: layout.getTranslation("form.Input.label.inputDescription"),
+              defaultMessage: "This value overrides the label displayed in the table's head"
+            }),
+            size: 6,
+            type: "string"
+          },
+          {
+            label: formatMessage({
+              id: layout.getTranslation("form.Input.sort.field"),
+              defaultMessage: "Enable sort on this field"
+            }),
+            name: "sortable",
+            size: 6,
+            type: "boolean"
+          }
+        ].filter(
+          (field) => field.name !== "sortable" || field.name === "sortable" && shouldDisplaySortToggle
+        ).map(({ size, ...field }) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.GridItem, { s: 12, col: size, children: /* @__PURE__ */ jsxRuntime.jsx(useDocumentLayout.InputRenderer, { ...field }) }, field.name)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.ModalFooter,
+          {
+            startActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }),
+            endActions: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", children: formatMessage({ id: "global.finish", defaultMessage: "Finish" }) })
+          }
+        )
+      ]
+    }
+  ) });
+};
+const HeaderContainer = styled__default.default(designSystem.Flex)`
+  svg {
+    width: ${32 / 16}rem;
+    height: ${24 / 16}rem;
+    margin-right: ${({ theme }) => theme.spaces[3]};
+  }
+`;
+
+const DraggableCard = ({
+  attribute,
+  index,
+  isDraggingSibling,
+  label,
+  name,
+  onMoveField,
+  onRemoveField,
+  setIsDraggingSibling
+}) => {
+  const [isModalOpen, setIsModalOpen] = React__namespace.useState(false);
+  const { formatMessage } = reactIntl.useIntl();
+  const [, forceRerenderAfterDnd] = React__namespace.useState(false);
+  const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = layout.useDragAndDrop(true, {
+    type: layout.ItemTypes.FIELD,
+    item: { index, label, name },
+    index,
+    onMoveItem: onMoveField,
+    onEnd: () => setIsDraggingSibling(false)
+  });
+  React__namespace.useEffect(() => {
+    dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), { captureDraggingState: false });
+  }, [dragPreviewRef]);
+  React__namespace.useEffect(() => {
+    if (isDragging) {
+      setIsDraggingSibling(true);
+    }
+  }, [isDragging, setIsDraggingSibling]);
+  React__namespace.useEffect(() => {
+    if (!isDraggingSibling) {
+      forceRerenderAfterDnd((prev) => !prev);
+    }
+  }, [isDraggingSibling]);
+  const composedRefs = designSystem.useComposedRefs(dragRef, objectRef);
+  return /* @__PURE__ */ jsxRuntime.jsxs(FieldWrapper, { ref: dropRef, children: [
+    isDragging && /* @__PURE__ */ jsxRuntime.jsx(layout.CardDragPreview, { label }),
+    !isDragging && isDraggingSibling && /* @__PURE__ */ jsxRuntime.jsx(layout.CardDragPreview, { isSibling: true, label }),
+    !isDragging && !isDraggingSibling && /* @__PURE__ */ jsxRuntime.jsxs(
+      FieldContainer,
+      {
+        borderColor: "neutral150",
+        background: "neutral100",
+        hasRadius: true,
+        justifyContent: "space-between",
+        onClick: () => setIsModalOpen(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DragButton,
+              {
+                as: "span",
+                "aria-label": formatMessage(
+                  {
+                    id: layout.getTranslation("components.DraggableCard.move.field"),
+                    defaultMessage: "Move {item}"
+                  },
+                  { item: label }
+                ),
+                onClick: (e) => e.stopPropagation(),
+                ref: composedRefs,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Drag, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", children: label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { paddingLeft: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ActionButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setIsModalOpen(true);
+                },
+                "aria-label": formatMessage(
+                  {
+                    id: layout.getTranslation("components.DraggableCard.edit.field"),
+                    defaultMessage: "Edit {item}"
+                  },
+                  { item: label }
+                ),
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Pencil, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ActionButton,
+              {
+                onClick: onRemoveField,
+                "data-testid": `delete-${name}`,
+                "aria-label": formatMessage(
+                  {
+                    id: layout.getTranslation("components.DraggableCard.delete.field"),
+                    defaultMessage: "Delete {item}"
+                  },
+                  { item: label }
+                ),
+                type: "button",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Cross, {})
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      EditFieldForm,
+      {
+        attribute,
+        name: `layout.${index}`,
+        onClose: () => setIsModalOpen(false)
+      }
+    )
+  ] });
+};
+const ActionButton = styled__default.default.button`
+  display: flex;
+  align-items: center;
+  height: ${({ theme }) => theme.spaces[7]};
+
+  &:last-child {
+    padding: 0 ${({ theme }) => theme.spaces[3]};
+  }
+`;
+const DragButton = styled__default.default(ActionButton)`
+  padding: 0 ${({ theme }) => theme.spaces[3]};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+  cursor: all-scroll;
+
+  svg {
+    width: ${12 / 16}rem;
+    height: ${12 / 16}rem;
+  }
+`;
+const FieldContainer = styled__default.default(designSystem.Flex)`
+  max-height: ${32 / 16}rem;
+  cursor: pointer;
+
+  svg {
+    width: ${10 / 16}rem;
+    height: ${10 / 16}rem;
+
+    path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+const FieldWrapper = styled__default.default(designSystem.Box)`
+  &:last-child {
+    padding-right: ${({ theme }) => theme.spaces[3]};
+  }
+`;
+
+const SortDisplayedFields = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { model, schema } = layout.useDoc();
+  const [isDraggingSibling, setIsDraggingSibling] = React__namespace.useState(false);
+  const [lastAction, setLastAction] = React__namespace.useState(null);
+  const scrollableContainerRef = React__namespace.useRef(null);
+  const values = layout.useForm(
+    "SortDisplayedFields",
+    (state) => state.values.layout ?? []
+  );
+  const addFieldRow = layout.useForm("SortDisplayedFields", (state) => state.addFieldRow);
+  const removeFieldRow = layout.useForm("SortDisplayedFields", (state) => state.removeFieldRow);
+  const moveFieldRow = layout.useForm("SortDisplayedFields", (state) => state.moveFieldRow);
+  const { metadata: allMetadata } = layout.useGetContentTypeConfigurationQuery(model, {
+    selectFromResult: ({ data }) => ({ metadata: data?.contentType.metadatas ?? {} })
+  });
+  const nonDisplayedFields = React__namespace.useMemo(() => {
+    if (!schema) {
+      return [];
+    }
+    const displayedFieldNames = values.map((field) => field.name);
+    return Object.entries(schema.attributes).reduce(
+      (acc, [name, attribute]) => {
+        if (!displayedFieldNames.includes(name) && useDocumentLayout.checkIfAttributeIsDisplayable(attribute)) {
+          const { list: metadata } = allMetadata[name];
+          acc.push({
+            name,
+            label: metadata.label || name,
+            sortable: metadata.sortable
+          });
+        }
+        return acc;
+      },
+      []
+    );
+  }, [allMetadata, values, schema]);
+  const handleAddField = (field) => {
+    setLastAction("add");
+    addFieldRow("layout", field);
+  };
+  const handleRemoveField = (index) => {
+    setLastAction("remove");
+    removeFieldRow("layout", index);
+  };
+  const handleMoveField = (dragIndex, hoverIndex) => {
+    moveFieldRow("layout", dragIndex, hoverIndex);
+  };
+  React__namespace.useEffect(() => {
+    if (lastAction === "add" && scrollableContainerRef?.current) {
+      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
+    }
+  }, [lastAction]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "stretch", direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", as: "h2", children: formatMessage({
+      id: layout.getTranslation("containers.SettingPage.view"),
+      defaultMessage: "View"
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 4, borderColor: "neutral300", borderStyle: "dashed", borderWidth: "1px", hasRadius: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", overflow: "auto hidden", ref: scrollableContainerRef, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 3, children: values.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        DraggableCard,
+        {
+          index,
+          isDraggingSibling,
+          onMoveField: handleMoveField,
+          onRemoveField: () => handleRemoveField(index),
+          setIsDraggingSibling,
+          ...field,
+          attribute: schema.attributes[field.name],
+          label: typeof field.label === "object" ? formatMessage(field.label) : field.label
+        },
+        field.name
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(v2.Menu.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          v2.Menu.Trigger,
+          {
+            paddingLeft: 2,
+            paddingRight: 2,
+            justifyContent: "center",
+            endIcon: null,
+            disabled: nonDisplayedFields.length === 0,
+            variant: "tertiary",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.VisuallyHidden, { as: "span", children: formatMessage({
+                id: layout.getTranslation("components.FieldSelect.label"),
+                defaultMessage: "Add a field"
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icons.Plus, { "aria-hidden": true, focusable: false, style: { position: "relative", top: 2 } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(v2.Menu.Content, { children: nonDisplayedFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(v2.Menu.Item, { onSelect: () => handleAddField(field), children: typeof field.label === "object" ? formatMessage(field.label) : field.label }, field.name)) })
+      ] })
+    ] })
+  ] });
+};
+
+const ListConfiguration = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { trackUsage } = layout.useTracking();
+  const { toggleNotification } = layout.useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = layout.useAPIErrorHandler();
+  const { model, collectionType } = layout.useDoc();
+  const { isLoading: isLoadingLayout, list, edit } = useDocumentLayout.useDocLayout();
+  const [updateContentTypeConfiguration] = layout.useUpdateContentTypeConfigurationMutation();
+  const handleSubmit = async (data) => {
+    try {
+      trackUsage("willSaveContentTypeLayout");
+      const layoutData = data.layout ?? [];
+      const meta = Object.entries(edit.metadatas).reduce(
+        (acc, [name, editMeta]) => {
+          const { mainField: _mainField, ...listMeta } = list.metadatas[name];
+          const { label, sortable } = layoutData.find((field) => field.name === name) ?? {};
+          acc[name] = {
+            edit: editMeta,
+            list: {
+              ...listMeta,
+              label: label || listMeta.label,
+              sortable: sortable || listMeta.sortable
+            }
+          };
+          return acc;
+        },
+        {}
+      );
+      const res = await updateContentTypeConfiguration({
+        layouts: {
+          edit: edit.layout.flatMap(
+            (panel) => panel.map((row) => row.map(({ name, size }) => ({ name, size })))
+          ),
+          list: layoutData.map((field) => field.name)
+        },
+        settings: layout.setIn(data.settings, "displayName", void 0),
+        metadatas: meta,
+        uid: model
+      });
+      if ("data" in res) {
+        trackUsage("didEditListSettings");
+        toggleNotification({
+          type: "success",
+          message: formatMessage({ id: "notification.success.saved", defaultMessage: "Saved" })
+        });
+      } else {
+        toggleNotification({
+          type: "danger",
+          message: formatAPIError(res.error)
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: "notification.error", defaultMessage: "An error occurred" })
+      });
+    }
+  };
+  const initialValues = React__namespace.useMemo(() => {
+    return {
+      layout: list.layout.map(({ label, sortable, name }) => ({
+        label: typeof label === "string" ? label : formatMessage(label),
+        sortable,
+        name
+      })),
+      settings: list.settings
+    };
+  }, [formatMessage, list.layout, list.settings]);
+  if (collectionType === layout.SINGLE_TYPES) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: `/single-types/${model}` });
+  }
+  if (isLoadingLayout) {
+    return /* @__PURE__ */ jsxRuntime.jsx(layout.Page.Loading, {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Layout, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactHelmet.Helmet, { title: `Configure ${list.settings.displayName} List View | Strapi` }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { children: /* @__PURE__ */ jsxRuntime.jsxs(layout.Form, { initialValues, onSubmit: handleSubmit, method: "PUT", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Header,
+        {
+          collectionType,
+          model,
+          name: list.settings.displayName ?? ""
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.ContentLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Flex,
+        {
+          alignItems: "stretch",
+          background: "neutral0",
+          direction: "column",
+          gap: 6,
+          hasRadius: true,
+          shadow: "tableShadow",
+          paddingTop: 6,
+          paddingBottom: 6,
+          paddingLeft: 7,
+          paddingRight: 7,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Settings, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(SortDisplayedFields, {})
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+};
+const ProtectedListConfiguration = () => {
+  const permissions = layout.useTypedSelector(
+    (state) => state.admin_app.permissions.contentManager?.collectionTypesConfigurations
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(layout.Page.Protect, { permissions, children: /* @__PURE__ */ jsxRuntime.jsx(ListConfiguration, {}) });
+};
+
+exports.ListConfiguration = ListConfiguration;
+exports.ProtectedListConfiguration = ProtectedListConfiguration;
+//# sourceMappingURL=ListConfigurationPage-Sj0Fbune.js.map