strapi-plugin-navigation 2.5.4 → 3.0.0-beta.0

package/admin/pages/HomePage/components/NavigationItemForm/utils/properties.js

@@ -0,0 +1,51 @@
+import { first, isEmpty } from 'lodash';
+import { extractRelatedItemLabel } from '../../../../HomePage/utils';
+export const generateUiRouterKey = async ({ slugify, title, config, related, relatedType, contentTypeItems, }) => {
+    if (title) {
+        return title ? await slugify(title) : undefined;
+    }
+    else if (related) {
+        const relationTitle = extractRelatedItemLabel({
+            ...(contentTypeItems?.find((_) => _.id === related) ?? {
+                id: -1,
+            }),
+            __collectionUid: relatedType,
+        }, config);
+        return relationTitle ? await slugify(relationTitle) : undefined;
+    }
+    return undefined;
+};
+export const getDefaultPath = ({ currentType, config, contentTypeItems, currentRelated, currentRelatedType, isSingleSelected, }) => {
+    if (currentType !== 'INTERNAL')
+        return '';
+    if (!currentRelatedType) {
+        return '';
+    }
+    const pathDefaultFields = config?.pathDefaultFields[currentRelatedType] ?? [];
+    if (isEmpty(currentType) && !isEmpty(pathDefaultFields)) {
+        const selectedEntity = isSingleSelected
+            ? first(contentTypeItems ?? [])
+            : contentTypeItems?.find(({ id }) => id === currentRelated);
+        const pathDefaultValues = pathDefaultFields
+            .map((field) => selectedEntity?.[field] ?? '')
+            .filter((value) => !!value.toString().trim());
+        return pathDefaultValues[0] ?? '';
+    }
+    return '';
+};
+export const generatePreviewPath = ({ currentPath, isExternal, current, currentType, config, contentTypeItems, currentRelated, currentRelatedType, isSingleSelected, }) => {
+    if (!isExternal) {
+        const itemPath = isEmpty(currentPath) || currentPath === '/'
+            ? getDefaultPath({
+                currentType,
+                config,
+                contentTypeItems,
+                currentRelated,
+                currentRelatedType,
+                isSingleSelected,
+            })
+            : currentPath || '';
+        return `${current.levelPath !== '/' ? `${current.levelPath}` : ''}/${itemPath}`;
+    }
+    return undefined;
+};

package/admin/pages/HomePage/components/NavigationItemList/Wrapper.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+const Wrapper = styled.div `
+  position: relative;
+  ${({ level, theme }) => level &&
+    `
+    &::before {
+      content: "";
+      display: block;
+      height: ${theme.spaces[3]};
+      width: 19px;
+
+      position: absolute;
+      top: -${theme.spaces[2]};
+      left: 30px;
+      
+      border: 0px solid transparent;
+      border-left: 4px solid ${theme.colors.neutral300};
+    }
+  `};
+`;
+export default Wrapper;

package/admin/pages/HomePage/components/NavigationItemList/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Item, } from '../NavigationItemListItem';
+import Wrapper from './Wrapper';
+export const List = ({ isParentAttachedToMenu = false, items, level = 0, levelPath = '', onItemEdit, onItemLevelAdd, onItemRemove, onItemRestore, onItemReOrder, onItemToggleCollapse, displayFlat, permissions, structurePrefix, viewParentId, }) => (_jsx(Wrapper, { "data-level": level, children: items?.map((item, index) => {
+        return (_jsx(Item, { item: item, isLast: index === items.length - 1, level: level, levelPath: levelPath, isParentAttachedToMenu: isParentAttachedToMenu, onItemRestore: onItemRestore, onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, displayChildren: displayFlat, permissions: permissions, structureId: structurePrefix ? `${structurePrefix}.${index}` : index.toString(), viewParentId: viewParentId }, `list-item-${item.viewId || index}`));
+    }) }));

package/admin/pages/HomePage/components/NavigationItemListItem/ItemCardBadge/index.js

@@ -0,0 +1,20 @@
+import { Badge } from '@strapi/design-system';
+import styled from 'styled-components';
+export const ItemCardBadge = styled(Badge) `
+  border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
+
+  ${({ small, theme }) => small &&
+    `
+			padding: ${theme.spaces[1]} ${theme.spaces[2]};
+			margin: 0px ${theme.spaces[3]};
+			vertical-align: middle;
+
+			cursor: default;
+
+			span {
+				font-size: .65rem;
+				line-height: 1;
+				vertical-align: middle;
+			}
+		`}
+`;

package/admin/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/Wrapper.js

@@ -0,0 +1,14 @@
+import { CardTitle } from '@strapi/design-system';
+import styled from 'styled-components';
+export const CardItemTitle = styled(CardTitle) `
+  width: 100%;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  > div > * {
+    margin: 0px ${({ theme }) => theme.spaces[1]};
+  }
+`;

package/admin/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/icons.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Eye, Pencil, Trash, Typhoon } from '@strapi/icons';
+export const pencilIcon = _jsx(Pencil, {});
+export const refreshIcon = _jsx(Typhoon, {});
+export const trashIcon = _jsx(Trash, {});
+export const eyeIcon = _jsx(Eye, {});

package/admin/pages/HomePage/components/NavigationItemListItem/ItemCardHeader/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton as BaseIconButton, Flex, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { getTrad } from '../../../../../translations';
+import DragButton from '../../DragButton';
+import { ItemCardBadge } from '../ItemCardBadge';
+import { CardItemTitle } from './Wrapper';
+import { eyeIcon, pencilIcon, refreshIcon, trashIcon } from './icons';
+const wrapperStyle = { zIndex: 2 };
+const pathWrapperStyle = { maxWidth: '425px' };
+export const ItemCardHeader = ({ title, path, icon, removed, canUpdate, onItemRemove, onItemEdit, onItemRestore, dragRef, isSearchActive, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(CardItemTitle, { children: [_jsxs(Flex, { alignItems: "center", children: [canUpdate && _jsx(DragButton, { ref: dragRef, isActive: isSearchActive }), _jsx(Typography, { variant: "omega", fontWeight: "bold", children: title }), _jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral500", ellipsis: true, style: pathWrapperStyle, children: path }), _jsx(Flex, { children: icon })] }), _jsxs(Flex, { alignItems: "center", style: wrapperStyle, children: [removed && (_jsx(ItemCardBadge, { borderColor: "danger200", backgroundColor: "danger100", textColor: "danger600", children: formatMessage(getTrad('components.navigationItem.badge.removed')) })), _jsx(IconButton, { isActive: isSearchActive, disabled: removed, onClick: onItemEdit, label: formatMessage(getTrad(`components.navigationItem.action.${canUpdate ? 'edit' : 'view'}`, canUpdate ? 'Edit' : 'View')), children: canUpdate ? pencilIcon : eyeIcon }), canUpdate && (_jsx(_Fragment, { children: removed ? (_jsx(IconButton, { isActive: isSearchActive, onClick: onItemRestore, label: formatMessage(getTrad('components.navigationItem.action.restore', 'Restore')), children: refreshIcon })) : (_jsx(IconButton, { isActive: isSearchActive, onClick: onItemRemove, label: formatMessage(getTrad('components.navigationItem.action.remove', 'Remove')), children: trashIcon })) }))] })] }));
+};
+const IconButton = styled(BaseIconButton) `
+  transition: background-color 0.3s ease-in;
+  ${({ isActive, theme }) => (isActive ? `background-color: ${theme.colors.neutral150} ;` : '')}
+`;

package/admin/pages/HomePage/components/NavigationItemListItem/ItemCardRemovedOverlay/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export const ItemCardRemovedOverlay = styled.div `
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+
+  background: rgba(255, 255, 255, 0.75);
+`;

package/admin/pages/HomePage/components/NavigationItemListItem/Wrapper.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+const Wrapper = styled.div `
+  position: relative;
+  margin-top: ${({ theme }) => theme.spaces[2]};
+  margin-left: ${({ level }) => level && '54px'};
+
+  ${({ level, theme, isLast }) => level &&
+    `
+		&::before {
+			${!isLast && 'content: "";'}
+			display: block;
+			top: ${theme.spaces[1]};
+			left: -24px;
+			position: absolute;
+			height: calc(100% + ${theme.spaces[2]});
+			width: 19px;
+			border: 0px solid transparent;
+			border-left: 4px solid ${theme.colors.neutral300};
+		}
+
+		&::after {
+			content: "";
+			display: block;
+			height: 22px;
+			width: 19px;
+			position: absolute;
+			top: ${theme.spaces[1]};
+			left: -${theme.spaces[6]};
+			
+			background: transparent;
+			border: 4px solid ${theme.colors.neutral300};
+			border-top: transparent;
+			border-right: transparent;
+			border-radius: 0 0 0 100%;
+		}
+	`};
+`;
+export default Wrapper;

package/admin/pages/HomePage/components/NavigationItemListItem/index.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, Divider, Flex, Link, TextButton, Typography } from '@strapi/design-system';
+import { ArrowRight, Earth, Link as LinkIcon, Plus } from '@strapi/icons';
+import { isEmpty, isNumber } from 'lodash';
+import { useCallback, useEffect, useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { useIntl } from 'react-intl';
+import { useTheme } from 'styled-components';
+import { getTrad } from '../../../../translations';
+import { RELATED_ITEM_SEPARATOR } from '../../../../utils/constants';
+import { useConfig, useContentTypeItems, useContentTypes } from '../../hooks';
+import { extractRelatedItemLabel, mapServerNavigationItem } from '../../utils';
+import { CollapseButton } from '../CollapseButton';
+import { List } from '../NavigationItemList';
+import { ItemCardBadge } from './ItemCardBadge';
+import { ItemCardHeader } from './ItemCardHeader';
+import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
+import Wrapper from './Wrapper';
+export const Item = ({ item, isLast = false, level = 0, levelPath = '', isParentAttachedToMenu, onItemLevelAdd, onItemRemove, onItemRestore, onItemEdit, onItemReOrder, onItemToggleCollapse, displayChildren, permissions, structureId, viewParentId, }) => {
+    const { viewId, type, path, removed, externalPath, menuAttached, collapsed, items = [], isSearchActive, related, relatedType, } = mapServerNavigationItem(item, true);
+    const { formatMessage } = useIntl();
+    const configQuery = useConfig();
+    const isExternal = type === 'EXTERNAL';
+    // TODO: is handled by publish flow
+    const isHandledByPublishFlow = true;
+    const isNextMenuAllowedLevel = isNumber(configQuery.data?.allowedLevels)
+        ? level < configQuery.data.allowedLevels - 1
+        : true;
+    const isMenuAllowedLevel = isNumber(configQuery.data?.allowedLevels)
+        ? level < configQuery.data.allowedLevels
+        : true;
+    const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
+    const absolutePath = isExternal
+        ? undefined
+        : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
+    const contentTypeItemsQuery = useContentTypeItems({
+        uid: relatedType ?? '',
+    });
+    const contentTypesQuery = useContentTypes();
+    const contentType = contentTypesQuery.data?.find((_) => _.uid === relatedType);
+    const relatedItem = contentTypeItemsQuery.data?.find((contentTypeItem) => contentTypeItem.id === related) ?? { id: -1 };
+    const isPublished = !!relatedItem.publishedAt;
+    const relatedItemLabel = !isExternal
+        ? extractRelatedItemLabel(relatedItem, configQuery.data)
+        : '';
+    const relatedTypeLabel = contentType?.info.displayName ?? '';
+    const relatedBadgeColor = isPublished ? 'success' : 'secondary';
+    const canUpdate = permissions.canUpdate;
+    const dragRef = useRef(null);
+    const dropRef = useRef(null);
+    const previewRef = useRef(null);
+    const [, drop] = useDrop({
+        accept: `navigation-item_${levelPath}`,
+        hover(hoveringItem, monitor) {
+            const dragIndex = hoveringItem.order ?? 0;
+            const dropIndex = item.order ?? 0;
+            // Don't replace items with themselves
+            if (dragIndex === dropIndex) {
+                return;
+            }
+            const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const clientOffset = monitor.getClientOffset();
+            if (!clientOffset) {
+                return;
+            }
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            // Place the hovering item before or after the drop target
+            const isAfter = hoverClientY > hoverMiddleY;
+            const newOrder = isAfter ? (item.order ?? 0) + 0.5 : (item.order ?? 0) - 0.5;
+            if (dragIndex < dropIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            // Dragging upwards
+            if (dragIndex > dropIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            onItemReOrder({
+                item: mapServerNavigationItem(hoveringItem, true),
+                newOrder,
+            });
+        },
+        collect: (monitor) => ({
+            isOverCurrent: monitor.isOver({ shallow: true }),
+        }),
+    });
+    const [{ isDragging }, drag, dragPreview] = useDrag({
+        type: `navigation-item_${levelPath}`,
+        item: () => item,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    });
+    const refs = {
+        dragRef: drag(dragRef),
+        dropRef: drop(dropRef),
+        previewRef: dragPreview(previewRef),
+    };
+    const generatePreviewUrl = (entity) => {
+        const isSingle = contentType?.kind === 'singleType';
+        const entityLocale = entity?.locale ? `?plugins[i18n][locale]=${entity?.locale}` : '';
+        return `/content-manager/${isSingle ? 'single-types' : 'collection-types'}/${contentType?.uid}${!isSingle ? '/' + entity?.id : ''}${entityLocale}`;
+    };
+    const onNewItemClick = useCallback((event) => canUpdate &&
+        onItemLevelAdd(event, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, `${structureId}.${items.length}`, Math.max(...items.map(({ order }) => order))), [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items, canUpdate]);
+    useEffect(() => {
+        if (isSearchActive) {
+            refs.dropRef?.current?.scrollIntoView?.({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'center',
+            });
+        }
+    }, [isSearchActive, refs.dropRef.current]);
+    const theme = useTheme();
+    return (_jsxs(Wrapper, { level: level, isLast: isLast, style: { opacity: isDragging ? 0.2 : 1 }, ref: refs ? refs.dropRef : undefined, children: [_jsxs(Card, { style: {
+                    width: '728px',
+                    zIndex: 1,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    backgroundColor: isSearchActive ? theme.colors.neutral150 : undefined,
+                    borderColor: isSearchActive ? theme.colors.neutral300 : undefined,
+                    transition: 'background-color 0.3s ease-in',
+                }, children: [removed && _jsx(ItemCardRemovedOverlay, {}), _jsxs("div", { ref: refs.previewRef, children: [_jsx(CardBody, { children: _jsx(ItemCardHeader, { title: item.title ?? '', path: isExternal ? externalPath : absolutePath, icon: isExternal ? _jsx(Earth, {}) : _jsx(LinkIcon, {}), onItemRemove: () => onItemRemove({ ...item, viewParentId }), onItemEdit: () => {
+                                        const [relatedType, related] = item.related?.split(RELATED_ITEM_SEPARATOR) ?? [];
+                                        if (item.type !== 'EXTERNAL' && item.type !== 'INTERNAL') {
+                                            return;
+                                        }
+                                        onItemEdit({
+                                            item: item.type === 'INTERNAL'
+                                                ? {
+                                                    ...item,
+                                                    type: 'INTERNAL',
+                                                    isMenuAllowedLevel,
+                                                    isParentAttachedToMenu,
+                                                    isSearchActive: false,
+                                                    relatedType,
+                                                    related: related ? parseInt(related, 10) : undefined,
+                                                    additionalFields: item.additionalFields ?? {},
+                                                    items: item.items ?? [],
+                                                    autoSync: item.autoSync ?? true,
+                                                    externalPath: undefined,
+                                                    viewParentId,
+                                                    audience: item.audience?.map(({ id }) => id) ?? [],
+                                                }
+                                                : {
+                                                    ...item,
+                                                    type: 'EXTERNAL',
+                                                    isMenuAllowedLevel,
+                                                    isParentAttachedToMenu,
+                                                    isSearchActive: false,
+                                                    relatedType: undefined,
+                                                    related: undefined,
+                                                    additionalFields: item.additionalFields ?? {},
+                                                    items: item.items ?? [],
+                                                    autoSync: item.autoSync ?? true,
+                                                    externalPath: item.externalPath ?? '',
+                                                    viewParentId,
+                                                    audience: item.audience?.map(({ id }) => id) ?? [],
+                                                },
+                                            levelPath,
+                                            isParentAttachedToMenu,
+                                        });
+                                    }, onItemRestore: () => onItemRestore({ ...item, viewParentId }), dragRef: refs.dragRef, removed: removed, canUpdate: canUpdate, isSearchActive: isSearchActive }) }), _jsx(Divider, {}), !isExternal && (_jsx(CardBody, { style: { padding: '8px' }, children: _jsxs(Flex, { style: { width: '100%' }, direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsxs(Flex, { children: [!isEmpty(item.items) && (_jsx(CollapseButton, { toggle: () => onItemToggleCollapse({ ...item, viewParentId }), collapsed: collapsed, itemsCount: item.items?.length ?? 0 })), canUpdate && isNextMenuAllowedLevel && (_jsx(TextButton, { disabled: removed, startIcon: _jsx(Plus, {}), onClick: onNewItemClick, children: _jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: removed ? 'neutral600' : 'primary600', children: formatMessage(getTrad('components.navigationItem.action.newItem')) }) }))] }), relatedItemLabel && (_jsxs(Flex, { justifyContent: "center", alignItems: "center", children: [isHandledByPublishFlow && (_jsx(ItemCardBadge, { borderColor: `${relatedBadgeColor}200`, backgroundColor: `${relatedBadgeColor}100`, textColor: `${relatedBadgeColor}600`, className: "action", small: true, children: formatMessage(getTrad(`components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`)) })), _jsxs(Typography, { variant: "omega", textColor: "neutral600", children: [relatedTypeLabel, "\u00A0/\u00A0"] }), _jsx(Typography, { variant: "omega", textColor: "neutral800", children: relatedItemLabel }), _jsx(Link, { to: generatePreviewUrl(relatedItem ?? undefined), endIcon: _jsx(ArrowRight, {}), children: "\u00A0" })] }))] }) }))] })] }), hasChildren && !removed && !collapsed && (_jsx(List, { onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemRestore: onItemRestore, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, isParentAttachedToMenu: menuAttached, items: item.items ?? [], level: level + 1, levelPath: absolutePath, permissions: permissions, structurePrefix: structureId, viewParentId: viewId }))] }));
+};

package/admin/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../translations';
+export const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, canUpdate, }) => {
+    const { formatMessage } = useIntl();
+    if (!canUpdate) {
+        return null;
+    }
+    return (_jsxs(Modal.Footer, { children: [_jsx(Modal.Close, { children: _jsx(Button, { onClick: handleCancel, variant: "tertiary", children: formatMessage(getTrad('popup.item.form.button.cancel')) }) }), _jsx(Button, { onClick: handleSubmit, disabled: submitDisabled, children: formatMessage(getTrad('popup.item.form.button.save')) })] }));
+};

package/admin/pages/HomePage/components/NavigationItemPopup/NavigationItemPopupHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../translations';
+export const NavigationItemPopupHeader = ({ isNewItem, canUpdate, }) => {
+    const { formatMessage } = useIntl();
+    let modalType = 'view';
+    if (canUpdate) {
+        modalType = isNewItem ? 'new' : 'edit';
+    }
+    return (_jsx(Modal.Header, { children: _jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title", children: formatMessage(getTrad(`popup.item.header.${modalType}`)) }) }));
+};

package/admin/pages/HomePage/components/NavigationItemPopup/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../translations';
+import { isRelationPublished } from '../../utils';
+import { NavigationItemForm } from '../NavigationItemForm';
+import { NavigationItemPopupHeader } from './NavigationItemPopupHeader';
+const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, currentItem = {}, onSubmit, onClose, locale, permissions, currentNavigation, }) => {
+    const { formatMessage } = useIntl();
+    const handleOnSubmit = (payload) => {
+        onSubmit(payload);
+    };
+    const appendLabelPublicationStatus = (label, item, isCollection) => {
+        const appendix = isRelationPublished({
+            relatedRef: item,
+            type: item.isSingle ? 'INTERNAL' : item.type,
+            isCollection,
+        })
+            ? ''
+            : `[${formatMessage(getTrad('notification.navigation.item.relation.status.draft'))}] `.toUpperCase();
+        return `${appendix}${label}`;
+    };
+    const hasViewId = !!currentItem.viewId;
+    return (_jsx(Modal.Root, { labelledBy: "condition-modal-breadcrumbs", onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose({
+                    preventDefault() { },
+                    stopPropagation() { },
+                    target: {},
+                });
+            }
+        }, open: isOpen, children: _jsxs(Modal.Content, { children: [_jsx(NavigationItemPopupHeader, { isNewItem: !hasViewId, canUpdate: permissions?.canUpdate }), _jsx(NavigationItemForm, { availableLocale: availableLocale, current: currentItem, isLoading: isLoading, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale, permissions: permissions, currentNavigation: currentNavigation })] }) }));
+};
+export default NavigationItemPopUp;

package/admin/pages/HomePage/components/NavigationManager/AllNavigations/icons.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pencil, Trash, Feather } from "@strapi/icons";
+export const edit = _jsx(Pencil, {});
+export const deleteIcon = _jsx(Trash, {});
+export const featherIcon = _jsx(Feather, {});

package/admin/pages/HomePage/components/NavigationManager/AllNavigations/index.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Checkbox, Flex, Grid, IconButton, Table, Tbody, Td, Th, Thead, Tr, Typography, } from '@strapi/design-system';
+import { prop } from 'lodash/fp';
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { useConfig, useLocale } from '../../../hooks';
+import { FooterBase } from '../Footer';
+import { INITIAL_NAVIGATION } from '../NewNavigation';
+import * as icons from './icons';
+export const AllNavigations = ({ navigations, selected, setState }) => {
+    const configQuery = useConfig();
+    const hasAnySelected = !!selected.length;
+    const { formatMessage } = useIntl();
+    const localeQuery = useLocale();
+    const toggleSelected = useCallback(() => setState({
+        navigations,
+        selected: hasAnySelected ? [] : navigations.map((n) => n),
+        view: 'LIST',
+    }), [setState, navigations, hasAnySelected]);
+    const currentlySelectedSet = useMemo(() => new Set(selected.map(prop('id'))), [selected]);
+    const handleSelect = (navigation, isSelected) => () => {
+        setState({
+            navigations,
+            selected: isSelected
+                ? selected.filter(({ id }) => id !== navigation.id)
+                : selected.concat([navigation]),
+            view: 'LIST',
+        });
+    };
+    const edit = (navigation) => () => {
+        setState({
+            view: 'EDIT',
+            current: navigation,
+            navigation,
+            alreadyUsedNames: navigations.reduce((acc, { name }) => (name !== navigation.name ? acc.concat([name]) : acc), []),
+        });
+    };
+    const _delete = (navigations) => () => {
+        setState({
+            view: 'DELETE',
+            navigations,
+        });
+    };
+    const purgeCache = (navigations) => () => {
+        setState({
+            view: 'CACHE_PURGE',
+            navigations,
+        });
+    };
+    const deleteSelected = useCallback(_delete(selected), [_delete]);
+    const purgeSelected = useCallback(purgeCache(selected), [purgeCache]);
+    const getLocalizations = (focused) => [focused].concat(navigations.filter((navigation) => navigation.documentId === focused.documentId && navigation.id !== focused.id));
+    return (_jsxs(_Fragment, { children: [_jsx(Grid.Root, { children: _jsx(Grid.Item, { col: 12, paddingBottom: 3, children: hasAnySelected ? (_jsxs(Flex, { direction: "row", gap: 1, children: [_jsx(Box, { paddingRight: 3, children: formatMessage(getTrad('popup.navigation.manage.table.hasSelected'), {
+                                    count: selected.length,
+                                }) }), _jsx(Button, { onClick: deleteSelected, variant: "tertiary", children: formatMessage(getTrad('popup.navigation.manage.button.delete')) }), configQuery.data?.isCacheEnabled ? (_jsx(Button, { onClick: purgeSelected, variant: "tertiary", children: formatMessage(getTrad('popup.navigation.manage.button.purge')) })) : null] })) : null }) }), _jsxs(Table, { rowCount: navigations.length, colCount: 6, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: _jsx(Checkbox, { onCheckedChange: toggleSelected, check: hasAnySelected }) }), _jsx(Th, { children: _jsx(Typography, { textColor: "neutral800", children: formatMessage(getTrad('popup.navigation.manage.table.id')) }) }), _jsx(Th, { children: _jsx(Typography, { textColor: "neutral800", children: formatMessage(getTrad('popup.navigation.manage.table.name')) }) }), _jsx(Th, { children: _jsx(Typography, { textColor: "neutral800", children: formatMessage(getTrad('popup.navigation.manage.table.locale')) }) }), _jsx(Th, { children: _jsx(Typography, { textColor: "neutral800", children: formatMessage(getTrad('popup.navigation.manage.table.visibility')) }) }), _jsx(Th, { children: configQuery.data?.isCacheEnabled ? (_jsx(Flex, { direction: "row", children: _jsx(Box, { paddingLeft: 1, children: _jsx(IconButton, { onClick: purgeCache([]), label: formatMessage(getTrad('popup.navigation.manage.button.purge')), noBorder: true, children: icons.featherIcon }) }) })) : null })] }) }), _jsx(Tbody, { children: navigations
+                            .filter(({ localeCode }) => localeCode === localeQuery.data?.defaultLocale)
+                            .map((navigation) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(Checkbox, { onCheckedChange: handleSelect(navigation, currentlySelectedSet.has(navigation.id)), checked: currentlySelectedSet.has(navigation.id) }) }), _jsx(Td, { children: _jsx(Typography, { textColor: "neutral800", children: navigation.id }) }), _jsx(Td, { children: _jsx(Typography, { textColor: "neutral800", children: navigation.name }) }), _jsx(Td, { children: _jsx(Typography, { textColor: "neutral800", children: getLocalizations(navigation).map(prop('localeCode')).join(', ') }) }), _jsx(Td, { children: _jsx(Typography, { textColor: "neutral800", children: navigation.visible
+                                            ? formatMessage(getTrad('popup.navigation.manage.navigation.visible'))
+                                            : formatMessage(getTrad('popup.navigation.manage.navigation.hidden')) }) }), _jsx(Td, { children: _jsxs(Flex, { width: "100%", direction: "row", alignItems: "center", justifyContent: "flex-end", children: [_jsx(Box, { paddingLeft: 1, children: _jsx(IconButton, { onClick: edit(navigation), label: formatMessage(getTrad('popup.navigation.manage.button.edit')), noBorder: true, children: icons.edit }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(IconButton, { onClick: _delete([navigation]), label: formatMessage(getTrad('popup.navigation.manage.button.delete')), noBorder: true, children: icons.deleteIcon }) }), configQuery.data?.isCacheEnabled ? (_jsx(Box, { paddingLeft: 1, children: _jsx(IconButton, { onClick: purgeCache([navigation]), label: formatMessage(getTrad('popup.navigation.manage.button.purge')), noBorder: true, children: icons.featherIcon }) })) : null] }) })] }, navigation.id))) })] })] }));
+};
+export const AllNavigationsFooter = ({ onClose, state, setState, navigations, isLoading, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { start: {
+            onClick: onClose,
+            variant: 'tertiary',
+            disabled: isLoading,
+            children: formatMessage(getTrad('popup.item.form.button.cancel')),
+        }, end: {
+            onClick: () => setState({
+                view: 'CREATE',
+                alreadyUsedNames: navigations.map(({ name }) => name),
+                current: INITIAL_NAVIGATION,
+            }),
+            variant: 'default',
+            disabled: isLoading,
+            children: formatMessage(getTrad('popup.navigation.manage.button.create')),
+        } }));
+};

package/admin/pages/HomePage/components/NavigationManager/DeletionConfirm/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Grid, Typography } from '@strapi/design-system';
+import { prop } from 'lodash/fp';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { FooterBase } from '../Footer';
+export const DeletionConfirm = ({ navigations }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(Grid.Root, { children: [_jsx(Grid.Item, { col: 12, paddingBottom: 1, children: _jsx(Flex, { children: _jsx(Typography, { variant: "beta", children: formatMessage(getTrad('popup.navigation.manage.delete.header')) }) }) }), _jsx(Grid.Item, { col: 12, paddingBottom: 1, children: _jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: renderItems(navigations) }) })] }));
+};
+export const DeleteConfirmFooter = ({ state, onSubmit, onReset, isLoading }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { start: {
+            children: formatMessage(getTrad('popup.item.form.button.cancel')),
+            disabled: isLoading,
+            onClick: onReset,
+            variant: 'tertiary',
+        }, end: {
+            children: formatMessage(getTrad('popup.navigation.manage.button.delete')),
+            disabled: isLoading,
+            onClick: onSubmit,
+            variant: 'danger',
+        } }));
+};
+const renderItems = (navigations) => navigations.map(prop('name')).join(', ');

package/admin/pages/HomePage/components/NavigationManager/ErrorDetails/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid } from '@strapi/design-system';
+import { useNotification } from '@strapi/strapi/admin';
+import { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { FooterBase } from '../Footer';
+export const ErrorDetails = ({ errors }) => {
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    useEffect(() => {
+        errors.map((error) => {
+            toggleNotification({
+                type: 'warning',
+                message: formatMessage({ id: '', defaultMessage: error.message }),
+            });
+            console.error(error);
+        });
+    }, []);
+    return (_jsx(Grid.Root, { children: _jsx(Grid.Item, { col: 12, children: formatMessage(getTrad('popup.navigation.manage.error.message')) }) }));
+};
+export const ErrorDetailsFooter = ({ onReset }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { end: {
+            children: formatMessage(getTrad('popup.navigation.manage.button.goBack')),
+            onClick: onReset,
+            variant: 'secondary',
+        } }));
+};

package/admin/pages/HomePage/components/NavigationManager/Footer/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal } from '@strapi/design-system';
+export const FooterBase = ({ start, end }) => {
+    return (_jsxs(Modal.Footer, { children: [_jsx(Modal.Close, { children: renderActions(start) }), renderActions(end)] }));
+};
+const renderActions = (actions) => actions ? (_jsx(Button, { onClick: actions.onClick, variant: actions.variant, disabled: actions.disabled, children: actions.children })) : null;

package/admin/pages/HomePage/components/NavigationManager/Form/hooks.js

@@ -0,0 +1,19 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+const formSchema = ({ alreadyUsedNames }) => z.object({
+    name: z
+        .string()
+        .min(2)
+        .and(z.string().refine((name) => !alreadyUsedNames.includes(name), 'name already used')),
+    visible: z.boolean(),
+});
+export const useNavigationForm = ({ alreadyUsedNames, navigation: { name, visible }, }) => {
+    return useForm({
+        resolver: zodResolver(formSchema({ alreadyUsedNames })),
+        defaultValues: {
+            name: name ?? '',
+            visible: visible ?? false,
+        },
+    });
+};

package/admin/pages/HomePage/components/NavigationManager/Form/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from '@strapi/design-system';
+import { debounce } from 'lodash';
+import { useEffect } from 'react';
+import { Controller } from 'react-hook-form';
+import { useIntl } from 'react-intl';
+import { Checkbox, Grid } from '@strapi/design-system';
+import { getTrad } from '../../../../../translations';
+import { useNavigationForm } from './hooks';
+import { TextInput } from '@strapi/design-system';
+export const Form = ({ navigation, onChange, alreadyUsedNames = [], isLoading, }) => {
+    const { control, watch } = useNavigationForm({ alreadyUsedNames, navigation });
+    const [name, visible] = watch(['name', 'visible']);
+    const onChangeLimited = debounce(onChange, 300);
+    const { formatMessage } = useIntl();
+    useEffect(() => {
+        if (`${name}-${visible}` !== `${navigation.name}-${navigation.visible}`) {
+            onChangeLimited({
+                ...navigation,
+                name,
+                visible,
+            });
+        }
+    }, [name, visible, navigation]);
+    return (_jsxs(Grid.Root, { gap: 5, children: [_jsx(Grid.Item, { col: 6, children: _jsx(Controller, { control: control, name: "name", render: ({ field: { value, onChange }, fieldState }) => (_jsxs(Field.Root, { width: "100%", error: fieldState.error?.message, children: [_jsx(Field.Label, { children: formatMessage(getTrad('popup.navigation.form.name.label', 'Name')) }), _jsx(TextInput, { name: "name", type: "string", placeholder: formatMessage(getTrad('popup.navigation.form.name.placeholder', "Navigations's name")), onChange: onChange, value: value, disabled: isLoading }), _jsx(Field.Error, {})] })) }) }), _jsx(Grid.Item, { col: 6, children: _jsx(Controller, { control: control, name: "visible", render: ({ field: { onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, children: [_jsx(Field.Label, { children: formatMessage(getTrad('popup.navigation.form.visible.label', 'Visibility')) }), _jsx(Checkbox, { name: "visible", checked: value, onCheckedChange: onChange, disabled: isLoading }), _jsx(Field.Hint, { children: formatMessage(getTrad('popup.item.form.visible.label')) }), _jsx(Field.Error, {})] })) }) })] }));
+};