@strapi/content-manager 0.0.0-experimental.cffeb3f30bb8beaa0d2a247ba56da461781c6690 → 0.0.0-experimental.d042f6a350fa3a48d61e7c56875e2a0a7ba3c8f5

package/dist/admin/chunks/layout-CX-A0s3P.js

@@ -1,618 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var strapiAdmin = require('@strapi/admin/strapi-admin');
-var reactIntl = require('react-intl');
-var reactRouterDom = require('react-router-dom');
-var designSystem = require('@strapi/design-system');
-var reactDnd = require('react-dnd');
-var CardDragPreview = require('./CardDragPreview-_dubYgXO.js');
-var Icons = require('@strapi/icons');
-var styledComponents = require('styled-components');
-var index = require('./index-CKZHZ3ir.js');
-var Relations = require('./Relations-BDe2e0a7.js');
-var qs = require('qs');
-var hooks = require('./hooks-D-sOYd1s.js');
-var useDragAndDrop = require('./useDragAndDrop-gcqEJMnO.js');
-require('lodash/fp/mapValues');
-require('yup');
-require('fractional-indexing');
-require('lodash/fp/pipe');
-require('date-fns');
-require('@reduxjs/toolkit');
-require('react-dnd-html5-backend');
-require('react-window');
-require('./relations-CuPmv-zR.js');
-require('react-redux');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function getStyle(initialOffset, currentOffset, mouseOffset) {
-    if (!initialOffset || !currentOffset || !mouseOffset) {
-        return {
-            display: 'none'
-        };
-    }
-    const { x, y } = mouseOffset;
-    return {
-        transform: `translate(${x}px, ${y}px)`
-    };
-}
-const DragLayer = ({ renderItem })=>{
-    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = reactDnd.useDragLayer((monitor)=>({
-            item: monitor.getItem(),
-            itemType: monitor.getItemType(),
-            initialOffset: monitor.getInitialSourceClientOffset(),
-            currentOffset: monitor.getSourceClientOffset(),
-            isDragging: monitor.isDragging(),
-            mouseOffset: monitor.getClientOffset()
-        }));
-    if (!isDragging) {
-        return null;
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        height: "100%",
-        left: 0,
-        position: "fixed",
-        pointerEvents: "none",
-        top: 0,
-        zIndex: 100,
-        width: "100%",
-        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-            style: getStyle(initialOffset, currentOffset, mouseOffset),
-            children: renderItem({
-                type: itemType,
-                item
-            })
-        })
-    });
-};
-
-const ComponentDragPreview = ({ displayedValue })=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-        background: "neutral0",
-        borderColor: "neutral200",
-        justifyContent: "space-between",
-        gap: 3,
-        padding: 3,
-        width: "30rem",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(ToggleButton, {
-                type: "button",
-                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                    gap: 6,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(DropdownIconWrapper, {
-                            alignItems: "center",
-                            justifyContent: "center",
-                            background: "neutral200",
-                            height: "3.2rem",
-                            width: "3.2rem",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.CaretDown, {})
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                            maxWidth: "15rem",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                textColor: "neutral700",
-                                ellipsis: true,
-                                children: displayedValue
-                            })
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                gap: 2,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        withTooltip: false,
-                        label: "",
-                        variant: "ghost",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {})
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                        withTooltip: false,
-                        label: "",
-                        variant: "ghost",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
-                    })
-                ]
-            })
-        ]
-    });
-};
-const DropdownIconWrapper = styledComponents.styled(designSystem.Flex)`
-  border-radius: 50%;
-
-  svg {
-    height: 0.6rem;
-    width: 1.1rem;
-    > path {
-      fill: ${({ theme })=>theme.colors.neutral600};
-    }
-  }
-`;
-// TODO: we shouldn't have to reset a whole button
-const ToggleButton = styledComponents.styled.button`
-  border: none;
-  background: transparent;
-  display: block;
-  width: 100%;
-  text-align: unset;
-  padding: 0;
-`;
-
-const RelationDragPreview = ({ status, displayedValue, width })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-        style: {
-            width
-        },
-        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-            paddingTop: 2,
-            paddingBottom: 2,
-            paddingLeft: 2,
-            paddingRight: 4,
-            hasRadius: true,
-            borderWidth: 1,
-            background: "neutral0",
-            borderColor: "neutral200",
-            justifyContent: "space-between",
-            gap: 4,
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(Relations.FlexWrapper, {
-                    gap: 1,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                            withTooltip: false,
-                            label: "",
-                            variant: "ghost",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            width: "100%",
-                            minWidth: 0,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                                    minWidth: 0,
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    paddingRight: 4,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Relations.LinkEllipsis, {
-                                        href: "",
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                            textColor: "primary600",
-                                            ellipsis: true,
-                                            children: displayedValue
-                                        })
-                                    })
-                                }),
-                                status ? /*#__PURE__*/ jsxRuntime.jsx(index.DocumentStatus, {
-                                    status: status
-                                }) : null
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(Relations.DisconnectButton, {
-                    type: "button",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {
-                        width: "12px"
-                    })
-                })
-            ]
-        })
-    });
-};
-
-const SubNavLinkCustom = styledComponents.styled(designSystem.SubNavLink)`
-  div {
-    width: inherit;
-    span:nth-child(2) {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: inherit;
-    }
-  }
-`;
-const LeftMenu = ()=>{
-    const [search, setSearch] = React__namespace.useState('');
-    const [{ query }] = strapiAdmin.useQueryParams();
-    const { formatMessage, locale } = reactIntl.useIntl();
-    const collectionTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
-    const singleTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
-    const { schemas } = index.useContentTypeSchema();
-    const { startsWith } = designSystem.useFilter(locale, {
-        sensitivity: 'base'
-    });
-    const formatter = designSystem.useCollator(locale, {
-        sensitivity: 'base'
-    });
-    const menu = React__namespace.useMemo(()=>[
-            {
-                id: 'collectionTypes',
-                title: formatMessage({
-                    id: index.getTranslation('components.LeftMenu.collection-types'),
-                    defaultMessage: 'Collection Types'
-                }),
-                searchable: true,
-                links: collectionTypeLinks
-            },
-            {
-                id: 'singleTypes',
-                title: formatMessage({
-                    id: index.getTranslation('components.LeftMenu.single-types'),
-                    defaultMessage: 'Single Types'
-                }),
-                searchable: true,
-                links: singleTypeLinks
-            }
-        ].map((section)=>({
-                ...section,
-                links: section.links/**
-           * Filter by the search value
-           */ .filter((link)=>startsWith(link.title, search))/**
-           * Sort correctly using the language
-           */ .sort((a, b)=>formatter.compare(a.title, b.title))/**
-           * Apply the formated strings to the links from react-intl
-           */ .map((link)=>{
-                    return {
-                        ...link,
-                        title: formatMessage({
-                            id: link.title,
-                            defaultMessage: link.title
-                        })
-                    };
-                })
-            })), [
-        collectionTypeLinks,
-        search,
-        singleTypeLinks,
-        startsWith,
-        formatMessage,
-        formatter
-    ]);
-    const handleClear = ()=>{
-        setSearch('');
-    };
-    const handleChangeSearch = ({ target: { value } })=>{
-        setSearch(value);
-    };
-    const label = formatMessage({
-        id: index.getTranslation('header.name'),
-        defaultMessage: 'Content Manager'
-    });
-    const getPluginsParamsForLink = (link)=>{
-        const schema = schemas.find((schema)=>schema.uid === link.uid);
-        const isI18nEnabled = Boolean(schema?.pluginOptions?.i18n?.localized);
-        // The search params have the i18n plugin
-        if (query.plugins && 'i18n' in query.plugins) {
-            // Prepare removal of i18n from the plugins search params
-            const { i18n, ...restPlugins } = query.plugins;
-            // i18n is not enabled, remove it from the plugins search params
-            if (!isI18nEnabled) {
-                return restPlugins;
-            }
-            // i18n is enabled, put the plugins search params back together
-            return {
-                i18n,
-                ...restPlugins
-            };
-        }
-        return query.plugins;
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SubNav, {
-        "aria-label": label,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavHeader, {
-                label: label,
-                searchable: true,
-                value: search,
-                onChange: handleChangeSearch,
-                onClear: handleClear,
-                searchLabel: formatMessage({
-                    id: 'content-manager.components.LeftMenu.Search.label',
-                    defaultMessage: 'Search for a content type'
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSections, {
-                children: menu.map((section)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SubNavSection, {
-                        label: section.title,
-                        badgeLabel: section.links.length.toString(),
-                        children: section.links.map((link)=>{
-                            return /*#__PURE__*/ jsxRuntime.jsx(SubNavLinkCustom, {
-                                tag: reactRouterDom.NavLink,
-                                to: {
-                                    pathname: link.to,
-                                    search: qs.stringify({
-                                        ...qs.parse(link.search ?? ''),
-                                        plugins: getPluginsParamsForLink(link)
-                                    })
-                                },
-                                width: "100%",
-                                children: link.title
-                            }, link.uid);
-                        })
-                    }, section.id);
-                })
-            })
-        ]
-    });
-};
-
-const { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } = index.HOOKS;
-const useContentManagerInitData = ()=>{
-    const { toggleNotification } = strapiAdmin.useNotification();
-    const dispatch = hooks.useTypedDispatch();
-    const runHookWaterfall = strapiAdmin.useStrapiApp('useContentManagerInitData', (state)=>state.runHookWaterfall);
-    const { notifyStatus } = designSystem.useNotifyAT();
-    const { formatMessage } = reactIntl.useIntl();
-    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler(index.getTranslation);
-    const checkUserHasPermissions = strapiAdmin.useAuth('useContentManagerInitData', (state)=>state.checkUserHasPermissions);
-    const state = hooks.useTypedSelector((state)=>state['content-manager'].app);
-    const initialDataQuery = index.useGetInitialDataQuery(undefined, {
-        /**
-     * TODO: remove this when the CTB has been refactored to use redux-toolkit-query
-     * and it can invalidate the cache on mutation
-     */ refetchOnMountOrArgChange: true
-    });
-    React.useEffect(()=>{
-        if (initialDataQuery.data) {
-            notifyStatus(formatMessage({
-                id: index.getTranslation('App.schemas.data-loaded'),
-                defaultMessage: 'The schemas have been successfully loaded.'
-            }));
-        }
-    }, [
-        formatMessage,
-        initialDataQuery.data,
-        notifyStatus
-    ]);
-    React.useEffect(()=>{
-        if (initialDataQuery.error) {
-            toggleNotification({
-                type: 'danger',
-                message: formatAPIError(initialDataQuery.error)
-            });
-        }
-    }, [
-        formatAPIError,
-        initialDataQuery.error,
-        toggleNotification
-    ]);
-    const contentTypeSettingsQuery = index.useGetAllContentTypeSettingsQuery();
-    React.useEffect(()=>{
-        if (contentTypeSettingsQuery.error) {
-            toggleNotification({
-                type: 'danger',
-                message: formatAPIError(contentTypeSettingsQuery.error)
-            });
-        }
-    }, [
-        formatAPIError,
-        contentTypeSettingsQuery.error,
-        toggleNotification
-    ]);
-    const formatData = async (components, contentTypes, fieldSizes, contentTypeConfigurations)=>{
-        /**
-     * We group these by the two types we support. We do with an object because we can use default
-     * values of arrays to make sure we always have an array to manipulate further on if, for example,
-     * a user has not made any single types.
-     *
-     * This means we have to manually add new content types to this hook if we add a new type – but
-     * the safety is worth it.
-     */ const { collectionType: collectionTypeLinks, singleType: singleTypeLinks } = contentTypes.reduce((acc, model)=>{
-            acc[model.kind].push(model);
-            return acc;
-        }, {
-            collectionType: [],
-            singleType: []
-        });
-        const collectionTypeSectionLinks = generateLinks(collectionTypeLinks, 'collectionTypes', contentTypeConfigurations);
-        const singleTypeSectionLinks = generateLinks(singleTypeLinks, 'singleTypes');
-        // Collection Types verifications
-        const collectionTypeLinksPermissions = await Promise.all(collectionTypeSectionLinks.map(({ permissions })=>checkUserHasPermissions(permissions)));
-        const authorizedCollectionTypeLinks = collectionTypeSectionLinks.filter((_, index)=>collectionTypeLinksPermissions[index].length > 0);
-        // Single Types verifications
-        const singleTypeLinksPermissions = await Promise.all(singleTypeSectionLinks.map(({ permissions })=>checkUserHasPermissions(permissions)));
-        const authorizedSingleTypeLinks = singleTypeSectionLinks.filter((_, index)=>singleTypeLinksPermissions[index].length > 0);
-        const { ctLinks } = runHookWaterfall(MUTATE_COLLECTION_TYPES_LINKS, {
-            ctLinks: authorizedCollectionTypeLinks,
-            models: contentTypes
-        });
-        const { stLinks } = runHookWaterfall(MUTATE_SINGLE_TYPES_LINKS, {
-            stLinks: authorizedSingleTypeLinks,
-            models: contentTypes
-        });
-        dispatch(index.setInitialData({
-            authorizedCollectionTypeLinks: ctLinks,
-            authorizedSingleTypeLinks: stLinks,
-            components,
-            contentTypeSchemas: contentTypes,
-            fieldSizes
-        }));
-    };
-    React.useEffect(()=>{
-        if (initialDataQuery.data && contentTypeSettingsQuery.data) {
-            formatData(initialDataQuery.data.components, initialDataQuery.data.contentTypes, initialDataQuery.data.fieldSizes, contentTypeSettingsQuery.data);
-        }
-    }, [
-        initialDataQuery.data,
-        contentTypeSettingsQuery.data
-    ]);
-    return {
-        ...state
-    };
-};
-const generateLinks = (links, type, configurations = [])=>{
-    return links.filter((link)=>link.isDisplayed).map((link)=>{
-        const collectionTypesPermissions = [
-            {
-                action: 'plugin::content-manager.explorer.create',
-                subject: link.uid
-            },
-            {
-                action: 'plugin::content-manager.explorer.read',
-                subject: link.uid
-            }
-        ];
-        const singleTypesPermissions = [
-            {
-                action: 'plugin::content-manager.explorer.read',
-                subject: link.uid
-            }
-        ];
-        const permissions = type === 'collectionTypes' ? collectionTypesPermissions : singleTypesPermissions;
-        const currentContentTypeConfig = configurations.find(({ uid })=>uid === link.uid);
-        let search = null;
-        if (currentContentTypeConfig) {
-            const searchParams = {
-                page: 1,
-                pageSize: currentContentTypeConfig.settings.pageSize,
-                sort: `${currentContentTypeConfig.settings.defaultSortBy}:${currentContentTypeConfig.settings.defaultSortOrder}`
-            };
-            search = qs.stringify(searchParams, {
-                encode: false
-            });
-        }
-        return {
-            permissions,
-            search,
-            kind: link.kind,
-            title: link.info.displayName,
-            to: `/content-manager/${link.kind === 'collectionType' ? index.COLLECTION_TYPES : index.SINGLE_TYPES}/${link.uid}`,
-            uid: link.uid,
-            // Used for the list item key in the helper plugin
-            name: link.uid,
-            isDisplayed: link.isDisplayed
-        };
-    });
-};
-
-/* -------------------------------------------------------------------------------------------------
- * Layout
- * -----------------------------------------------------------------------------------------------*/ const Layout = ()=>{
-    const contentTypeMatch = reactRouterDom.useMatch('/content-manager/:kind/:uid/*');
-    const { isLoading, collectionTypeLinks, models, singleTypeLinks } = useContentManagerInitData();
-    const authorisedModels = [
-        ...collectionTypeLinks,
-        ...singleTypeLinks
-    ].sort((a, b)=>a.title.localeCompare(b.title));
-    const { pathname } = reactRouterDom.useLocation();
-    const { formatMessage } = reactIntl.useIntl();
-    const startSection = strapiAdmin.useGuidedTour('Layout', (state)=>state.startSection);
-    const startSectionRef = React__namespace.useRef(startSection);
-    React__namespace.useEffect(()=>{
-        if (startSectionRef.current) {
-            startSectionRef.current('contentManager');
-        }
-    }, []);
-    if (isLoading) {
-        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
-                    children: formatMessage({
-                        id: index.getTranslation('plugin.name'),
-                        defaultMessage: 'Content Manager'
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {})
-            ]
-        });
-    }
-    // Array of models that are displayed in the content manager
-    const supportedModelsToDisplay = models.filter(({ isDisplayed })=>isDisplayed);
-    // Redirect the user to the 403 page
-    if (authorisedModels.length === 0 && supportedModelsToDisplay.length > 0 && pathname !== '/content-manager/403') {
-        return /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Navigate, {
-            to: "/403"
-        });
-    }
-    // Redirect the user to the create content type page
-    if (supportedModelsToDisplay.length === 0 && pathname !== '/no-content-types') {
-        return /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Navigate, {
-            to: "/no-content-types"
-        });
-    }
-    if (!contentTypeMatch && authorisedModels.length > 0) {
-        return /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Navigate, {
-            to: {
-                pathname: authorisedModels[0].to,
-                search: authorisedModels[0].search ?? ''
-            },
-            replace: true
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
-                children: formatMessage({
-                    id: index.getTranslation('plugin.name'),
-                    defaultMessage: 'Content Manager'
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Layouts.Root, {
-                sideNav: /*#__PURE__*/ jsxRuntime.jsx(LeftMenu, {}),
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(DragLayer, {
-                        renderItem: renderDraglayerItem
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Outlet, {})
-                ]
-            })
-        ]
-    });
-};
-/* -------------------------------------------------------------------------------------------------
- * renderDraglayerItem
- * -----------------------------------------------------------------------------------------------*/ function renderDraglayerItem({ type, item }) {
-    if (!type || type && typeof type !== 'string') {
-        return null;
-    }
-    /**
-   * Because a user may have multiple relations / dynamic zones / repeable fields in the same content type,
-   * we append the fieldName for the item type to make them unique, however, we then want to extract that
-   * first type to apply the correct preview.
-   */ const [actualType] = type.split('_');
-    switch(actualType){
-        case useDragAndDrop.ItemTypes.EDIT_FIELD:
-        case useDragAndDrop.ItemTypes.FIELD:
-            return /*#__PURE__*/ jsxRuntime.jsx(CardDragPreview.CardDragPreview, {
-                label: item.label
-            });
-        case useDragAndDrop.ItemTypes.COMPONENT:
-        case useDragAndDrop.ItemTypes.DYNAMIC_ZONE:
-            return /*#__PURE__*/ jsxRuntime.jsx(ComponentDragPreview, {
-                displayedValue: item.displayedValue
-            });
-        case useDragAndDrop.ItemTypes.RELATION:
-            return /*#__PURE__*/ jsxRuntime.jsx(RelationDragPreview, {
-                ...item
-            });
-        default:
-            return null;
-    }
-}
-
-exports.Layout = Layout;
-//# sourceMappingURL=layout-CX-A0s3P.js.map