@strapi/content-manager 0.0.0-next.39c0188c3aa01bec7b64b948211571d5159e811d → 0.0.0-next.3a1d87a9c3b1d4d89f741c6ecd7f501230fd8d76

package/dist/admin/chunks/ListConfigurationPage-DK0ARecn.js

@@ -1,795 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import { useForm, Layouts, BackButton, InputRenderer, useNotification, useField, Form, useTracking, useAPIErrorHandler, Page } from '@strapi/admin/strapi-admin';
-import { Button, useCollator, Flex, Typography, Grid, Modal, Box, useComposedRefs, Menu, VisuallyHidden, Main, Divider } from '@strapi/design-system';
-import { useIntl } from 'react-intl';
-import { useParams, Navigate } from 'react-router-dom';
-import { C as COLLECTION_TYPES, g as getTranslation, z as capitalise, c as useDoc, p as useGetContentTypeConfigurationQuery, w as checkIfAttributeIsDisplayable, m as useDocLayout, A as useUpdateContentTypeConfigurationMutation, S as SINGLE_TYPES } from './index-BkyR-Bnu.js';
-import { u as useTypedSelector } from './hooks-DMvik5y_.js';
-import { s as setIn } from './objects-wl73iEma.js';
-import { Drag, Pencil, Cross, Plus } from '@strapi/icons';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { styled } from 'styled-components';
-import { C as CardDragPreview } from './CardDragPreview-DwuraT0K.js';
-import { u as useDragAndDrop, I as ItemTypes } from './useDragAndDrop-HYwNDExe.js';
-import * as yup from 'yup';
-import { F as FieldTypeIcon } from './FieldTypeIcon-BY6MrVF4.js';
-import 'lodash/fp/mapValues';
-import 'fractional-indexing';
-import 'lodash/fp/pipe';
-import 'qs';
-import 'date-fns';
-import '@reduxjs/toolkit';
-import 'react-redux';
-import 'lodash/clone';
-import 'lodash/toPath';
-import 'react-dnd';
-import '@strapi/icons/symbols';
-
-const Header = ({ name })=>{
-    const { formatMessage } = useIntl();
-    const params = useParams();
-    const modified = useForm('Header', (state)=>state.modified);
-    const isSubmitting = useForm('Header', (state)=>state.isSubmitting);
-    return /*#__PURE__*/ jsx(Layouts.Header, {
-        navigationAction: /*#__PURE__*/ jsx(BackButton, {
-            fallback: `../${COLLECTION_TYPES}/${params.slug}`
-        }),
-        primaryAction: /*#__PURE__*/ jsx(Button, {
-            size: "S",
-            disabled: !modified,
-            type: "submit",
-            loading: isSubmitting,
-            children: formatMessage({
-                id: 'global.save',
-                defaultMessage: 'Save'
-            })
-        }),
-        subtitle: formatMessage({
-            id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.list-settings'),
-            defaultMessage: 'Define the settings of the list view.'
-        }),
-        title: formatMessage({
-            id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),
-            defaultMessage: 'Configure the view - {name}'
-        }, {
-            name: capitalise(name)
-        })
-    });
-};
-
-const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
-    'media',
-    'richtext',
-    'dynamiczone',
-    'relation',
-    'component',
-    'json',
-    'blocks'
-];
-const Settings = ()=>{
-    const { formatMessage, locale } = useIntl();
-    const formatter = useCollator(locale, {
-        sensitivity: 'base'
-    });
-    const { schema } = useDoc();
-    const layout = useForm('Settings', (state)=>state.values.layout ?? []);
-    const currentSortBy = useForm('Settings', (state)=>state.values.settings.defaultSortBy);
-    const onChange = useForm('Settings', (state)=>state.onChange);
-    const sortOptions = React.useMemo(()=>Object.values(layout).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,
-        schema
-    ]);
-    const sortOptionsSorted = sortOptions.sort((a, b)=>formatter.compare(a.label, b.label));
-    React.useEffect(()=>{
-        if (sortOptionsSorted.findIndex((opt)=>opt.value === currentSortBy) === -1) {
-            onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);
-        }
-    }, [
-        currentSortBy,
-        onChange,
-        sortOptionsSorted
-    ]);
-    const formLayout = React.useMemo(()=>SETTINGS_FORM_LAYOUT.map((row)=>row.map((field)=>{
-                if (field.type === 'enumeration') {
-                    return {
-                        ...field,
-                        hint: field.hint ? formatMessage(field.hint) : undefined,
-                        label: formatMessage(field.label),
-                        options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options
-                    };
-                } else {
-                    return {
-                        ...field,
-                        hint: field.hint ? formatMessage(field.hint) : undefined,
-                        label: formatMessage(field.label)
-                    };
-                }
-            })), [
-        formatMessage,
-        sortOptionsSorted
-    ]);
-    return /*#__PURE__*/ jsxs(Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 4,
-        children: [
-            /*#__PURE__*/ jsx(Typography, {
-                variant: "delta",
-                tag: "h2",
-                children: formatMessage({
-                    id: getTranslation('containers.SettingPage.settings'),
-                    defaultMessage: 'Settings'
-                })
-            }),
-            /*#__PURE__*/ jsx(Grid.Root, {
-                gap: 4,
-                children: formLayout.map((row)=>row.map(({ size, ...field })=>/*#__PURE__*/ jsx(Grid.Item, {
-                            s: 12,
-                            col: size,
-                            direction: "column",
-                            alignItems: "stretch",
-                            children: /*#__PURE__*/ jsx(InputRenderer, {
-                                ...field
-                            })
-                        }, field.name)))
-            }, "bottom")
-        ]
-    });
-};
-const SETTINGS_FORM_LAYOUT = [
-    [
-        {
-            label: {
-                id: getTranslation('form.Input.search'),
-                defaultMessage: 'Enable search'
-            },
-            name: 'settings.searchable',
-            size: 4,
-            type: 'boolean'
-        },
-        {
-            label: {
-                id: getTranslation('form.Input.filters'),
-                defaultMessage: 'Enable filters'
-            },
-            name: 'settings.filterable',
-            size: 4,
-            type: 'boolean'
-        },
-        {
-            label: {
-                id: getTranslation('form.Input.bulkActions'),
-                defaultMessage: 'Enable bulk actions'
-            },
-            name: 'settings.bulkable',
-            size: 4,
-            type: 'boolean'
-        }
-    ],
-    [
-        {
-            hint: {
-                id: getTranslation('form.Input.pageEntries.inputDescription'),
-                defaultMessage: 'Note: You can override this value in the Collection Type settings page.'
-            },
-            label: {
-                id: 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: getTranslation('form.Input.defaultSort'),
-                defaultMessage: 'Default sort attribute'
-            },
-            name: 'settings.defaultSortBy',
-            options: [],
-            size: 3,
-            type: 'enumeration'
-        },
-        {
-            label: {
-                id: 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.object().shape({
-    label: yup.string().required(),
-    sortable: yup.boolean()
-});
-const EditFieldForm = ({ attribute, name, onClose })=>{
-    const { formatMessage } = useIntl();
-    const { toggleNotification } = useNotification();
-    const { value, onChange } = useField(name);
-    if (!value) {
-        // This is very unlikely to happen, but it ensures the form is not opened without a 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__*/ jsx(Modal.Content, {
-        children: /*#__PURE__*/ jsxs(Form, {
-            method: "PUT",
-            initialValues: value,
-            validationSchema: FIELD_SCHEMA,
-            onSubmit: (data)=>{
-                onChange(name, data);
-                onClose();
-            },
-            children: [
-                /*#__PURE__*/ jsx(Modal.Header, {
-                    children: /*#__PURE__*/ jsxs(HeaderContainer, {
-                        children: [
-                            /*#__PURE__*/ jsx(FieldTypeIcon, {
-                                type: attribute.type
-                            }),
-                            /*#__PURE__*/ jsx(Modal.Title, {
-                                children: formatMessage({
-                                    id: getTranslation('containers.list-settings.modal-form.label'),
-                                    defaultMessage: 'Edit {fieldName}'
-                                }, {
-                                    fieldName: capitalise(value.label)
-                                })
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ jsx(Modal.Body, {
-                    children: /*#__PURE__*/ jsx(Grid.Root, {
-                        gap: 4,
-                        children: [
-                            {
-                                name: 'label',
-                                label: formatMessage({
-                                    id: getTranslation('form.Input.label'),
-                                    defaultMessage: 'Label'
-                                }),
-                                hint: formatMessage({
-                                    id: getTranslation('form.Input.label.inputDescription'),
-                                    defaultMessage: "This value overrides the label displayed in the table's head"
-                                }),
-                                size: 6,
-                                type: 'string'
-                            },
-                            {
-                                label: formatMessage({
-                                    id: 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__*/ jsx(Grid.Item, {
-                                s: 12,
-                                col: size,
-                                direction: "column",
-                                alignItems: "stretch",
-                                children: /*#__PURE__*/ jsx(InputRenderer, {
-                                    ...field
-                                })
-                            }, field.name))
-                    })
-                }),
-                /*#__PURE__*/ jsxs(Modal.Footer, {
-                    children: [
-                        /*#__PURE__*/ jsx(Button, {
-                            onClick: onClose,
-                            variant: "tertiary",
-                            children: formatMessage({
-                                id: 'app.components.Button.cancel',
-                                defaultMessage: 'Cancel'
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Button, {
-                            type: "submit",
-                            children: formatMessage({
-                                id: 'global.finish',
-                                defaultMessage: 'Finish'
-                            })
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-};
-const HeaderContainer = styled(Flex)`
-  svg {
-    width: 3.2rem;
-    margin-right: ${({ theme })=>theme.spaces[3]};
-  }
-`;
-
-const DraggableCard = ({ attribute, index, isDraggingSibling, label, name, onMoveField, onRemoveField, setIsDraggingSibling })=>{
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const { formatMessage } = useIntl();
-    const [, forceRerenderAfterDnd] = React.useState(false);
-    const [{ isDragging }, objectRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(true, {
-        type: ItemTypes.FIELD,
-        item: {
-            index,
-            label,
-            name
-        },
-        index,
-        onMoveItem: onMoveField,
-        onEnd: ()=>setIsDraggingSibling(false)
-    });
-    React.useEffect(()=>{
-        dragPreviewRef(getEmptyImage(), {
-            captureDraggingState: false
-        });
-    }, [
-        dragPreviewRef
-    ]);
-    React.useEffect(()=>{
-        if (isDragging) {
-            setIsDraggingSibling(true);
-        }
-    }, [
-        isDragging,
-        setIsDraggingSibling
-    ]);
-    // Effect in order to force a rerender after reordering the components
-    // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
-    // anymore, this hack forces a rerender in order to apply the dragRef
-    React.useEffect(()=>{
-        if (!isDraggingSibling) {
-            forceRerenderAfterDnd((prev)=>!prev);
-        }
-    }, [
-        isDraggingSibling
-    ]);
-    const composedRefs = useComposedRefs(dropRef, objectRef);
-    return /*#__PURE__*/ jsxs(FieldWrapper, {
-        ref: composedRefs,
-        children: [
-            isDragging && /*#__PURE__*/ jsx(CardDragPreview, {
-                label: label
-            }),
-            !isDragging && isDraggingSibling && /*#__PURE__*/ jsx(CardDragPreview, {
-                isSibling: true,
-                label: label
-            }),
-            !isDragging && !isDraggingSibling && /*#__PURE__*/ jsxs(FieldContainer, {
-                borderColor: "neutral150",
-                background: "neutral100",
-                hasRadius: true,
-                justifyContent: "space-between",
-                onClick: ()=>setIsModalOpen(true),
-                children: [
-                    /*#__PURE__*/ jsxs(Flex, {
-                        gap: 3,
-                        children: [
-                            /*#__PURE__*/ jsx(DragButton, {
-                                ref: dragRef,
-                                "aria-label": formatMessage({
-                                    id: getTranslation('components.DraggableCard.move.field'),
-                                    defaultMessage: 'Move {item}'
-                                }, {
-                                    item: label
-                                }),
-                                onClick: (e)=>e.stopPropagation(),
-                                children: /*#__PURE__*/ jsx(Drag, {})
-                            }),
-                            /*#__PURE__*/ jsx(Typography, {
-                                fontWeight: "bold",
-                                children: label
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs(Flex, {
-                        paddingLeft: 3,
-                        onClick: (e)=>e.stopPropagation(),
-                        children: [
-                            /*#__PURE__*/ jsxs(Modal.Root, {
-                                open: isModalOpen,
-                                onOpenChange: setIsModalOpen,
-                                children: [
-                                    /*#__PURE__*/ jsx(Modal.Trigger, {
-                                        children: /*#__PURE__*/ jsx(ActionButton, {
-                                            onClick: (e)=>{
-                                                e.stopPropagation();
-                                            },
-                                            "aria-label": formatMessage({
-                                                id: getTranslation('components.DraggableCard.edit.field'),
-                                                defaultMessage: 'Edit {item}'
-                                            }, {
-                                                item: label
-                                            }),
-                                            type: "button",
-                                            children: /*#__PURE__*/ jsx(Pencil, {
-                                                width: "1.2rem",
-                                                height: "1.2rem"
-                                            })
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(EditFieldForm, {
-                                        attribute: attribute,
-                                        name: `layout.${index}`,
-                                        onClose: ()=>{
-                                            setIsModalOpen(false);
-                                        }
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(ActionButton, {
-                                onClick: onRemoveField,
-                                "data-testid": `delete-${name}`,
-                                "aria-label": formatMessage({
-                                    id: getTranslation('components.DraggableCard.delete.field'),
-                                    defaultMessage: 'Delete {item}'
-                                }, {
-                                    item: label
-                                }),
-                                type: "button",
-                                children: /*#__PURE__*/ jsx(Cross, {
-                                    width: "1.2rem",
-                                    height: "1.2rem"
-                                })
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};
-const ActionButton = styled.button`
-  display: flex;
-  align-items: center;
-  height: ${({ theme })=>theme.spaces[7]};
-  color: ${({ theme })=>theme.colors.neutral600};
-
-  &:hover {
-    color: ${({ theme })=>theme.colors.neutral700};
-  }
-
-  &:last-child {
-    padding: 0 ${({ theme })=>theme.spaces[3]};
-  }
-`;
-const DragButton = styled(ActionButton)`
-  padding: 0 ${({ theme })=>theme.spaces[3]};
-  border-right: 1px solid ${({ theme })=>theme.colors.neutral150};
-  cursor: all-scroll;
-`;
-const FieldContainer = styled(Flex)`
-  max-height: 3.2rem;
-  cursor: pointer;
-`;
-const FieldWrapper = styled(Box)`
-  &:last-child {
-    padding-right: ${({ theme })=>theme.spaces[3]};
-  }
-`;
-
-const SortDisplayedFields = ()=>{
-    const { formatMessage } = useIntl();
-    const { model, schema } = useDoc();
-    const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);
-    const [lastAction, setLastAction] = React.useState(null);
-    const scrollableContainerRef = React.useRef(null);
-    const values = useForm('SortDisplayedFields', (state)=>state.values.layout ?? []);
-    const addFieldRow = useForm('SortDisplayedFields', (state)=>state.addFieldRow);
-    const removeFieldRow = useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
-    const moveFieldRow = useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
-    const { metadata: allMetadata } = useGetContentTypeConfigurationQuery(model, {
-        selectFromResult: ({ data })=>({
-                metadata: data?.contentType.metadatas ?? {}
-            })
-    });
-    /**
-   * This is our list of fields that are not displayed in the current layout
-   * so we create their default state to be added to the layout.
-   */ const nonDisplayedFields = React.useMemo(()=>{
-        if (!schema) {
-            return [];
-        }
-        const displayedFieldNames = values.map((field)=>field.name);
-        return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
-            if (!displayedFieldNames.includes(name) && 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.useEffect(()=>{
-        if (lastAction === 'add' && scrollableContainerRef?.current) {
-            scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
-        }
-    }, [
-        lastAction
-    ]);
-    return /*#__PURE__*/ jsxs(Flex, {
-        alignItems: "stretch",
-        direction: "column",
-        gap: 4,
-        children: [
-            /*#__PURE__*/ jsx(Typography, {
-                variant: "delta",
-                tag: "h2",
-                children: formatMessage({
-                    id: getTranslation('containers.SettingPage.view'),
-                    defaultMessage: 'View'
-                })
-            }),
-            /*#__PURE__*/ jsxs(Flex, {
-                padding: 4,
-                borderColor: "neutral300",
-                borderStyle: "dashed",
-                borderWidth: "1px",
-                hasRadius: true,
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        flex: "1",
-                        overflow: "auto hidden",
-                        ref: scrollableContainerRef,
-                        children: /*#__PURE__*/ jsx(Flex, {
-                            gap: 3,
-                            children: values.map((field, index)=>/*#__PURE__*/ jsx(DraggableCard, {
-                                    index: index,
-                                    isDraggingSibling: isDraggingSibling,
-                                    onMoveField: handleMoveField,
-                                    onRemoveField: ()=>handleRemoveField(index),
-                                    setIsDraggingSibling: setIsDraggingSibling,
-                                    ...field,
-                                    attribute: schema.attributes[field.name],
-                                    label: typeof field.label === 'object' ? formatMessage(field.label) : field.label
-                                }, field.name))
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(Menu.Root, {
-                        children: [
-                            /*#__PURE__*/ jsxs(Menu.Trigger, {
-                                paddingLeft: 2,
-                                paddingRight: 2,
-                                justifyContent: "center",
-                                endIcon: null,
-                                disabled: nonDisplayedFields.length === 0,
-                                variant: "tertiary",
-                                children: [
-                                    /*#__PURE__*/ jsx(VisuallyHidden, {
-                                        tag: "span",
-                                        children: formatMessage({
-                                            id: getTranslation('components.FieldSelect.label'),
-                                            defaultMessage: 'Add a field'
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(Plus, {
-                                        "aria-hidden": true,
-                                        focusable: false,
-                                        style: {
-                                            position: 'relative',
-                                            top: 2
-                                        }
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(Menu.Content, {
-                                children: nonDisplayedFields.map((field)=>/*#__PURE__*/ jsx(Menu.Item, {
-                                        onSelect: ()=>handleAddField(field),
-                                        children: typeof field.label === 'object' ? formatMessage(field.label) : field.label
-                                    }, field.name))
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-const ListConfiguration = ()=>{
-    const { formatMessage } = useIntl();
-    const { trackUsage } = useTracking();
-    const { toggleNotification } = useNotification();
-    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
-    const { model, collectionType } = useDoc();
-    const { isLoading: isLoadingLayout, list, edit } = useDocLayout();
-    const [updateContentTypeConfiguration] = useUpdateContentTypeConfigurationMutation();
-    const handleSubmit = async (data)=>{
-        try {
-            trackUsage('willSaveContentTypeLayout');
-            const layoutData = data.layout ?? [];
-            /**
-       * We reconstruct the metadatas object by taking the existing edit metadatas
-       * and re-merging that by attribute name with the current list metadatas, whilst overwriting
-       * the data from the form we've built.
-       */ 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: setIn(data.settings, 'displayName', undefined),
-                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.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 === SINGLE_TYPES) {
-        return /*#__PURE__*/ jsx(Navigate, {
-            to: `/single-types/${model}`
-        });
-    }
-    if (isLoadingLayout) {
-        return /*#__PURE__*/ jsx(Page.Loading, {});
-    }
-    return /*#__PURE__*/ jsxs(Layouts.Root, {
-        children: [
-            /*#__PURE__*/ jsx(Page.Title, {
-                children: `Configure ${list.settings.displayName} List View`
-            }),
-            /*#__PURE__*/ jsx(Main, {
-                children: /*#__PURE__*/ jsxs(Form, {
-                    initialValues: initialValues,
-                    onSubmit: handleSubmit,
-                    method: "PUT",
-                    children: [
-                        /*#__PURE__*/ jsx(Header, {
-                            collectionType: collectionType,
-                            model: model,
-                            name: list.settings.displayName ?? ''
-                        }),
-                        /*#__PURE__*/ jsx(Layouts.Content, {
-                            children: /*#__PURE__*/ jsxs(Flex, {
-                                alignItems: "stretch",
-                                background: "neutral0",
-                                direction: "column",
-                                gap: 6,
-                                hasRadius: true,
-                                shadow: "tableShadow",
-                                paddingTop: 6,
-                                paddingBottom: 6,
-                                paddingLeft: 7,
-                                paddingRight: 7,
-                                children: [
-                                    /*#__PURE__*/ jsx(Settings, {}),
-                                    /*#__PURE__*/ jsx(Divider, {}),
-                                    /*#__PURE__*/ jsx(SortDisplayedFields, {})
-                                ]
-                            })
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-};
-const ProtectedListConfiguration = ()=>{
-    const permissions = useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
-    return /*#__PURE__*/ jsx(Page.Protect, {
-        permissions: permissions,
-        children: /*#__PURE__*/ jsx(ListConfiguration, {})
-    });
-};
-
-export { ListConfiguration, ProtectedListConfiguration };
-//# sourceMappingURL=ListConfigurationPage-DK0ARecn.js.map