strapi-plugin-navigation 2.1.0-beta.1 → 2.2.0

package/admin/src/pages/View/components/NavigationItemForm/utils/form.d.ts

@@ -1,45 +1,26 @@
-export namespace form {
-    const fieldsToDisable: never[];
-    const fieldsToOmit: never[];
-    function schema(isSingleSelected: any): import("yup/lib/object").OptionalObjectSchema<{
-        title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
-        relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-        related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-    }, Record<string, any>, import("yup/lib/object").TypeOfShape<{
-        title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
-        relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-        related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-    }>>;
-    function schema(isSingleSelected: any): import("yup/lib/object").OptionalObjectSchema<{
-        title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
-        relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-        related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-    }, Record<string, any>, import("yup/lib/object").TypeOfShape<{
-        title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
-        path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
-        menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
-        relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-        related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
-    }>>;
-    const inputsPrefix: string;
-}
 import * as yup from "yup";
+import { NavigationItemAdditionalField } from "../../../../../../../types";
+import { RawFormPayload } from "../types";
+export declare const schemaFactory: (isSingleSelected: boolean, additionalFields: NavigationItemAdditionalField[]) => import("yup/lib/object").OptionalObjectSchema<{
+    title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
+    relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    additionalFields: import("yup/lib/object").OptionalObjectSchema<{}, Record<string, any>, import("yup/lib/object").TypeOfShape<{}>>;
+}, Record<string, any>, import("yup/lib/object").TypeOfShape<{
+    title: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    uiRouterKey: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    type: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    path: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    externalPath: yup.StringSchema<string | undefined, Record<string, any>, string | undefined>;
+    menuAttached: yup.BooleanSchema<boolean | undefined, Record<string, any>, boolean | undefined>;
+    relatedType: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    related: import("yup/lib/mixed").MixedSchema<any, Record<string, any>, any>;
+    additionalFields: import("yup/lib/object").OptionalObjectSchema<{}, Record<string, any>, import("yup/lib/object").TypeOfShape<{}>>;
+}>>;
+export declare const defaultValues: RawFormPayload;
 //# sourceMappingURL=form.d.ts.map

package/admin/src/pages/View/components/NavigationItemForm/utils/form.js

@@ -26,58 +26,94 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.form = void 0;
+exports.defaultValues = exports.schemaFactory = void 0;
 const yup = __importStar(require("yup"));
 const lodash_1 = require("lodash");
 const helper_plugin_1 = require("@strapi/helper-plugin");
-const enums_1 = require("../../../utils/enums");
+const utils_1 = require("../../../../../utils");
 const pluginId_1 = __importDefault(require("../../../../../pluginId"));
-exports.form = {
-    fieldsToDisable: [],
-    fieldsToOmit: [],
-    schema(isSingleSelected) {
-        return yup.object({
-            title: yup.string()
-                .when('type', {
-                is: val => val === enums_1.navigationItemType.EXTERNAL,
-                then: yup.string()
-                    .required(helper_plugin_1.translatedErrors.required),
-                otherwise: yup.string().notRequired(),
-            }),
-            uiRouterKey: yup.string().required(helper_plugin_1.translatedErrors.required),
-            type: yup.string().required(helper_plugin_1.translatedErrors.required),
-            path: yup.string()
-                .when('type', {
-                is: val => val === enums_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
-                then: yup.string().required(helper_plugin_1.translatedErrors.required),
-                otherwise: yup.string().notRequired(),
-            }),
-            externalPath: yup.string()
-                .when('type', {
-                is: val => val === enums_1.navigationItemType.EXTERNAL,
-                then: yup.string()
-                    .required(helper_plugin_1.translatedErrors.required)
-                    .matches(/(#.*)|(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/, {
-                    excludeEmptyString: true,
-                    message: `${pluginId_1.default}.popup.item.form.externalPath.validation.type`,
-                }),
-                otherwise: yup.string().notRequired(),
-            }),
-            menuAttached: yup.boolean(),
-            relatedType: yup.mixed()
-                .when('type', {
-                is: val => val === enums_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
-                then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
-                otherwise: yup.mixed().notRequired(),
-            }),
-            related: yup.mixed()
-                .when('type', {
-                is: val => val === enums_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
-                then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
-                otherwise: yup.mixed().notRequired(),
-            }),
-        });
+const externalPathRegexps = [
+    /^mailto:[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
+    /^tel:(\+\d{1,3})?[\s]?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{3,4}$/,
+    /^#.*/,
+    /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/,
+];
+const schemaFactory = (isSingleSelected, additionalFields) => {
+    return yup.object({
+        title: yup.string()
+            .when('type', {
+            is: (val) => val !== utils_1.navigationItemType.INTERNAL,
+            then: yup.string()
+                .required(helper_plugin_1.translatedErrors.required),
+            otherwise: yup.string().notRequired(),
+        }),
+        uiRouterKey: yup.string().required(helper_plugin_1.translatedErrors.required),
+        type: yup.string().required(helper_plugin_1.translatedErrors.required),
+        path: yup.string()
+            .when('type', {
+            is: (val) => val !== utils_1.navigationItemType.EXTERNAL || (0, lodash_1.isNil)(val),
+            then: yup.string().matches(/^\S+$/, "Invalid path string").required(helper_plugin_1.translatedErrors.required),
+            otherwise: yup.string().notRequired(),
+        }),
+        externalPath: yup.string()
+            .when('type', {
+            is: (val) => val === utils_1.navigationItemType.EXTERNAL,
+            then: yup.string()
+                .required(helper_plugin_1.translatedErrors.required)
+                .test(`${pluginId_1.default}.popup.item.form.externalPath.validation.type`, externalPath => externalPath ? externalPathRegexps.some(re => re.test(externalPath)) : true),
+            otherwise: yup.string().notRequired(),
+        }),
+        menuAttached: yup.boolean(),
+        relatedType: yup.mixed()
+            .when('type', {
+            is: (val) => val === utils_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
+            then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
+            otherwise: yup.mixed().notRequired(),
+        }),
+        related: yup.mixed()
+            .when('type', {
+            is: (val) => val === utils_1.navigationItemType.INTERNAL || (0, lodash_1.isNil)(val),
+            then: isSingleSelected ? yup.mixed().notRequired() : yup.mixed().required(helper_plugin_1.translatedErrors.required),
+            otherwise: yup.mixed().notRequired(),
+        }),
+        additionalFields: yup.object({
+            ...additionalFields.reduce((acc, current) => {
+                var value;
+                if (typeof current === 'string')
+                    return acc;
+                if (current.type === 'boolean')
+                    value = yup.bool();
+                else if (current.type === 'string')
+                    value = yup.string();
+                else if (current.type === 'select' && current.multi)
+                    value = yup.array().of(yup.string());
+                else if (current.type === 'select' && !current.multi)
+                    value = yup.string();
+                else
+                    throw new Error(`Type "${current.type}" is unsupported by custom fields`);
+                if (current.required)
+                    value = value.required(helper_plugin_1.translatedErrors.required);
+                else
+                    value = value.notRequired();
+                return { ...acc, [current.name]: value };
+            }, {})
+        })
+    });
+};
+exports.schemaFactory = schemaFactory;
+exports.defaultValues = {
+    type: "INTERNAL",
+    related: "",
+    relatedType: "",
+    audience: [],
+    menuAttached: false,
+    title: "",
+    externalPath: "",
+    path: "",
+    additionalFields: {
+        boolean: false,
+        string: "",
     },
-    inputsPrefix: '',
+    updated: false,
 };
 //# sourceMappingURL=form.js.map

package/admin/src/pages/View/components/NavigationItemPopup/index.d.ts

@@ -1,5 +1,6 @@
 export default NavigationItemPopUp;
-declare function NavigationItemPopUp({ isOpen, isLoading, data, config, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, }: {
+declare function NavigationItemPopUp({ availableLocale, isOpen, isLoading, data, config, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }: {
+    availableLocale: any;
     isOpen: any;
     isLoading: any;
     data: any;
@@ -10,6 +11,7 @@ declare function NavigationItemPopUp({ isOpen, isLoading, data, config, onSubmit
     getContentTypeItems: any;
     usedContentTypesData: any;
     locale: any;
+    readNavigationItemFromLocale: any;
 }): JSX.Element;
 declare namespace NavigationItemPopUp {
     namespace propTypes {
@@ -21,6 +23,7 @@ declare namespace NavigationItemPopUp {
         const onClose: PropTypes.Validator<(...args: any[]) => any>;
         const getContentTypeItems: PropTypes.Validator<(...args: any[]) => any>;
         const locale: PropTypes.Requireable<string>;
+        const readNavigationItemFromLocale: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/admin/src/pages/View/components/NavigationItemPopup/index.js

@@ -1,18 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = require("lodash");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const NavigationItemForm_1 = __importDefault(require("../NavigationItemForm"));
 const parsers_1 = require("../../utils/parsers");
-const enums_1 = require("../../utils/enums");
 const NavigationItemPopupHeader_1 = require("./NavigationItemPopupHeader");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopUp = ({ isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, }) => {
+const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }) => {
     const handleOnSubmit = (payload) => {
         onSubmit(payload);
     };
@@ -21,7 +43,7 @@ const NavigationItemPopUp = ({ isOpen, isLoading, data, config = {}, onSubmit, o
     const appendLabelPublicationStatus = (label = '', item = {}, isCollection = false) => {
         const appendix = (0, parsers_1.isRelationPublished)({
             relatedRef: item,
-            type: item.isSingle ? enums_1.navigationItemType.INTERNAL : item.type,
+            type: item.isSingle ? utils_1.navigationItemType.INTERNAL : item.type,
             isCollection,
         }) ? '' : `[${(0, utils_1.getMessage)('notification.navigation.item.relation.status.draft')}] `.toUpperCase();
         return `${appendix}${label}`;
@@ -45,9 +67,11 @@ const NavigationItemPopUp = ({ isOpen, isLoading, data, config = {}, onSubmit, o
             } : undefined,
         };
     };
+    const preparedData = (0, react_1.useMemo)(prepareFormData.bind(null, data), [data]);
+    const hasViewId = !!data.viewId;
     return (react_1.default.createElement(ModalLayout_1.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClose, isOpen: isOpen },
-        react_1.default.createElement(NavigationItemPopupHeader_1.NavigationItemPopupHeader, { isNewItem: !data.viewId }),
-        react_1.default.createElement(NavigationItemForm_1.default, { data: prepareFormData(data), isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale })));
+        react_1.default.createElement(NavigationItemPopupHeader_1.NavigationItemPopupHeader, { isNewItem: !hasViewId }),
+        react_1.default.createElement(NavigationItemForm_1.default, { availableLocale: availableLocale, config: config, data: preparedData, isLoading: isLoading, additionalFields: additionalFields, contentTypesNameFields: contentTypesNameFields, availableAudience: availableAudience, contentTypes: contentTypes, contentTypeEntities: contentTypeItems, usedContentTypeEntities: usedContentTypeItems, getContentTypeEntities: getContentTypeItems, usedContentTypesData: usedContentTypesData, onSubmit: handleOnSubmit, onCancel: onClose, appendLabelPublicationStatus: appendLabelPublicationStatus, locale: locale, readNavigationItemFromLocale: readNavigationItemFromLocale })));
 };
 NavigationItemPopUp.propTypes = {
     data: prop_types_1.default.object.isRequired,
@@ -57,7 +81,8 @@ NavigationItemPopUp.propTypes = {
     onSubmit: prop_types_1.default.func.isRequired,
     onClose: prop_types_1.default.func.isRequired,
     getContentTypeItems: prop_types_1.default.func.isRequired,
-    locale: prop_types_1.default.string
+    locale: prop_types_1.default.string,
+    readNavigationItemFromLocale: prop_types_1.default.func.isRequired,
 };
 exports.default = NavigationItemPopUp;
 //# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/icons.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const edit: JSX.Element;
+export declare const deleteIcon: JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/icons.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteIcon = exports.edit = void 0;
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("@strapi/icons");
+exports.edit = react_1.default.createElement(icons_1.Pencil, null);
+exports.deleteIcon = react_1.default.createElement(icons_1.Trash, null);
+//# sourceMappingURL=icons.js.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footer } from "../Footer";
+import { CommonProps, ListState } from "../types";
+interface Props extends ListState, CommonProps {
+}
+export declare const AllNavigations: ({ navigations, selected, setState }: Props) => JSX.Element;
+export declare const AllNavigationsFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/AllNavigations/index.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllNavigationsFooter = exports.AllNavigations = void 0;
+const BaseCheckbox_1 = require("@strapi/design-system/BaseCheckbox");
+const Box_1 = require("@strapi/design-system/Box");
+const Button_1 = require("@strapi/design-system/Button");
+const Flex_1 = require("@strapi/design-system/Flex");
+const Grid_1 = require("@strapi/design-system/Grid");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+const Table_1 = require("@strapi/design-system/Table");
+const Typography_1 = require("@strapi/design-system/Typography");
+const fp_1 = require("lodash/fp");
+const react_1 = __importStar(require("react"));
+const useDataManager_1 = __importDefault(require("../../../../../hooks/useDataManager"));
+const utils_1 = require("../../../../../utils");
+const Footer_1 = require("../Footer");
+const NewNavigation_1 = require("../NewNavigation");
+const icons = __importStar(require("./icons"));
+const AllNavigations = ({ navigations, selected, setState }) => {
+    const { config: { i18nEnabled }, } = (0, useDataManager_1.default)();
+    const hasAnySelected = !!selected.length;
+    const toggleSelected = (0, react_1.useCallback)(() => setState({
+        navigations,
+        selected: hasAnySelected ? [] : navigations.map((n) => n),
+        view: "LIST",
+    }), [setState, navigations, hasAnySelected]);
+    const currentlySelectedSet = (0, react_1.useMemo)(() => new Set(selected.map((0, fp_1.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",
+            navigation,
+            alreadyUsedNames: navigations.reduce((acc, { name }) => name !== navigation.name ? acc.concat([name]) : acc, []),
+        });
+    };
+    const _delete = (navigations) => () => {
+        setState({
+            view: "DELETE",
+            navigations,
+        });
+    };
+    const deleteSelected = (0, react_1.useCallback)(_delete(selected), [_delete]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Grid_1.Grid, null,
+            react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 3 }, hasAnySelected ? (react_1.default.createElement(Flex_1.Flex, { direction: "row", gap: 1 },
+                react_1.default.createElement(Box_1.Box, { paddingRight: 3 }, (0, utils_1.getMessage)({
+                    id: "popup.navigation.manage.table.hasSelected",
+                    props: {
+                        count: selected.length,
+                    },
+                })),
+                react_1.default.createElement(Button_1.Button, { onClick: deleteSelected, variant: "tertiary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete")))) : null)),
+        react_1.default.createElement(Table_1.Table, { rowCount: navigations.length, colCount: i18nEnabled ? 6 : 5 },
+            react_1.default.createElement(Table_1.Thead, null,
+                react_1.default.createElement(Table_1.Tr, null,
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { onValueChange: toggleSelected, value: hasAnySelected })),
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.id"))),
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.name"))),
+                    i18nEnabled ? (react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.locale")))) : null,
+                    react_1.default.createElement(Table_1.Th, null,
+                        react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, (0, utils_1.getMessage)("popup.navigation.manage.table.visibility"))),
+                    react_1.default.createElement(Table_1.Th, null))),
+            react_1.default.createElement(Table_1.Tbody, null, navigations.map((navigation) => (react_1.default.createElement(Table_1.Tr, { key: navigation.id },
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { onValueChange: handleSelect(navigation, currentlySelectedSet.has(navigation.id)), value: currentlySelectedSet.has(navigation.id) })),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, navigation.id)),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, navigation.name)),
+                i18nEnabled ? (react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, [navigation.localeCode]
+                        .concat(navigation.localizations?.map((0, fp_1.prop)("localeCode")) || [])
+                        .join(", ")))) : null,
+                react_1.default.createElement(Table_1.Td, null, navigation.visible
+                    ? (0, utils_1.getMessage)("popup.navigation.manage.navigation.visible")
+                    : (0, utils_1.getMessage)("popup.navigation.manage.navigation.hidden")),
+                react_1.default.createElement(Table_1.Td, null,
+                    react_1.default.createElement(Flex_1.Flex, { direction: "row" },
+                        react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: edit(navigation), label: (0, utils_1.getMessage)("popup.navigation.manage.button.edit"), noBorder: true, icon: icons.edit })),
+                        react_1.default.createElement(Box_1.Box, { paddingLeft: 1 },
+                            react_1.default.createElement(IconButton_1.IconButton, { onClick: _delete([navigation]), label: (0, utils_1.getMessage)("popup.navigation.manage.button.delete"), noBorder: true, icon: icons.deleteIcon })))))))))));
+};
+exports.AllNavigations = AllNavigations;
+const AllNavigationsFooter = ({ onClose, state, setState, navigations, }) => (react_1.default.createElement(Footer_1.FooterBase, { start: {
+        onClick: onClose,
+        variant: "tertiary",
+        disabled: state.isLoading,
+        children: (0, utils_1.getMessage)("popup.item.form.button.cancel"),
+    }, end: {
+        onClick: () => setState({
+            view: "CREATE",
+            alreadyUsedNames: navigations.map(({ name }) => name),
+            current: NewNavigation_1.INITIAL_NAVIGATION,
+        }),
+        variant: "default",
+        disabled: state.isLoading,
+        children: (0, utils_1.getMessage)("popup.navigation.manage.button.create"),
+    } }));
+exports.AllNavigationsFooter = AllNavigationsFooter;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/DeletionConfirm/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footer } from "../Footer";
+import { CommonProps, DeleteState } from "../types";
+interface Props extends DeleteState, CommonProps {
+}
+export declare const DeletionConfirm: ({ navigations }: Props) => JSX.Element;
+export declare const DeleteConfirmFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/DeletionConfirm/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteConfirmFooter = exports.DeletionConfirm = void 0;
+const Flex_1 = require("@strapi/design-system/Flex");
+const Grid_1 = require("@strapi/design-system/Grid");
+const Typography_1 = require("@strapi/design-system/Typography");
+const fp_1 = require("lodash/fp");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../../../../utils");
+const Footer_1 = require("../Footer");
+const DeletionConfirm = ({ navigations }) => (react_1.default.createElement(Grid_1.Grid, null,
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Flex_1.Flex, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "beta" }, (0, utils_1.getMessage)("popup.navigation.manage.delete.header")))),
+    react_1.default.createElement(Grid_1.GridItem, { col: 12, paddingBottom: 1 },
+        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "semiBold" }, renderItems(navigations)))));
+exports.DeletionConfirm = DeletionConfirm;
+const DeleteConfirmFooter = ({ state, onSubmit, onReset }) => (react_1.default.createElement(Footer_1.FooterBase, { start: {
+        children: (0, utils_1.getMessage)("popup.item.form.button.cancel"),
+        disabled: state.isLoading,
+        onClick: onReset,
+        variant: "tertiary",
+    }, end: {
+        children: (0, utils_1.getMessage)("popup.navigation.manage.button.delete"),
+        disabled: state.isLoading,
+        onClick: onSubmit,
+        variant: "danger",
+    } }));
+exports.DeleteConfirmFooter = DeleteConfirmFooter;
+const renderItems = (navigations) => navigations.map((0, fp_1.prop)("name")).join(", ");
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/ErrorDetails/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footer } from "../Footer";
+import { CommonProps, ErrorState } from "../types";
+interface Props extends ErrorState, CommonProps {
+}
+export declare const ErrorDetails: ({ errors }: Props) => JSX.Element;
+export declare const ErrorDetailsFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/ErrorDetails/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorDetailsFooter = exports.ErrorDetails = void 0;
+const Grid_1 = require("@strapi/design-system/Grid");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../../../../utils");
+const Footer_1 = require("../Footer");
+const ErrorDetails = ({ errors }) => {
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    (0, react_1.useEffect)(() => {
+        errors.map((error) => {
+            toggleNotification({
+                type: "warning",
+                message: { id: "", defaultMessage: error.message },
+            });
+            console.error(error);
+        });
+    }, []);
+    return (react_1.default.createElement(Grid_1.Grid, null,
+        react_1.default.createElement(Grid_1.GridItem, { col: 12 }, (0, utils_1.getMessage)("popup.navigation.manage.error.message"))));
+};
+exports.ErrorDetails = ErrorDetails;
+const ErrorDetailsFooter = ({ onReset }) => (react_1.default.createElement(Footer_1.FooterBase, { end: {
+        children: (0, utils_1.getMessage)("popup.navigation.manage.button.goBack"),
+        onClick: onReset,
+        variant: "secondary",
+    } }));
+exports.ErrorDetailsFooter = ErrorDetailsFooter;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/Footer/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { VoidEffect } from "../../../../../../../types";
+import { Navigation, SetState, State } from "../types";
+interface FooterBaseProps {
+    end?: ActionProps;
+    start?: ActionProps;
+}
+export declare type Footer = React.FC<{
+    navigations: Array<Navigation>;
+    onClose?: VoidEffect;
+    onReset: VoidEffect;
+    onSubmit: VoidEffect;
+    setState: SetState;
+    state: State;
+}>;
+interface ActionProps {
+    children: React.ReactNode;
+    disabled?: boolean;
+    onClick?: VoidEffect;
+    variant: "danger" | "secondary" | "tertiary" | "default";
+}
+export declare const FooterBase: React.FC<FooterBaseProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/Footer/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterBase = void 0;
+const Button_1 = require("@strapi/design-system/Button");
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const react_1 = __importDefault(require("react"));
+const FooterBase = ({ start, end }) => (react_1.default.createElement(ModalLayout_1.ModalFooter, { endActions: renderActions(end), startActions: renderActions(start) }));
+exports.FooterBase = FooterBase;
+const renderActions = (actions) => actions ? (react_1.default.createElement(Button_1.Button, { onClick: actions.onClick, variant: actions.variant, disabled: actions.disabled }, actions.children)) : null;
+//# sourceMappingURL=index.js.map