strapi-plugin-navigation 2.1.0 → 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,11 +26,11 @@ 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"));
 const externalPathRegexps = [
     /^mailto:[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
@@ -38,49 +38,82 @@ const externalPathRegexps = [
     /^#.*/,
     /(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,})/,
 ];
-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)
-                    .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 === 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 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.js

@@ -32,7 +32,6 @@ 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 = ({ availableLocale, isOpen, isLoading, data, config = {}, onSubmit, onClose, usedContentTypeItems, getContentTypeItems, usedContentTypesData, locale, readNavigationItemFromLocale, }) => {
@@ -44,7 +43,7 @@ const NavigationItemPopUp = ({ availableLocale, isOpen, isLoading, data, config
     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}`;

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/{List → AllNavigations}/index.js

@@ -26,21 +26,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.listFooterActions = exports.List = void 0;
+exports.AllNavigationsFooter = exports.AllNavigations = void 0;
 const BaseCheckbox_1 = require("@strapi/design-system/BaseCheckbox");
-const Typography_1 = require("@strapi/design-system/Typography");
 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 icons_1 = require("@strapi/icons");
+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 Create_1 = require("../Create");
-const List = ({ navigations, selected, setState }) => {
+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({
@@ -48,7 +50,7 @@ const List = ({ navigations, selected, setState }) => {
         selected: hasAnySelected ? [] : navigations.map((n) => n),
         view: "LIST",
     }), [setState, navigations, hasAnySelected]);
-    const currentlySelectedSet = (0, react_1.useMemo)(() => new Set(selected.map(({ id }) => id)), [selected]);
+    const currentlySelectedSet = (0, react_1.useMemo)(() => new Set(selected.map((0, fp_1.prop)("id"))), [selected]);
     const handleSelect = (navigation, isSelected) => () => {
         setState({
             navigations,
@@ -62,9 +64,7 @@ const List = ({ navigations, selected, setState }) => {
         setState({
             view: "EDIT",
             navigation,
-            alreadyUsedNames: navigations
-                .map(({ name }) => name)
-                .filter((name) => name !== navigation.name),
+            alreadyUsedNames: navigations.reduce((acc, { name }) => name !== navigation.name ? acc.concat([name]) : acc, []),
         });
     };
     const _delete = (navigations) => () => {
@@ -84,7 +84,7 @@ const List = ({ navigations, selected, setState }) => {
                     },
                 })),
                 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 + 1, colCount: i18nEnabled ? 6 : 5 },
+        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,
@@ -107,32 +107,33 @@ const List = ({ navigations, selected, setState }) => {
                     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(({ localeCode }) => localeCode) || [])
+                        .concat(navigation.localizations?.map((0, fp_1.prop)("localeCode")) || [])
                         .join(", ")))) : null,
-                react_1.default.createElement(Table_1.Td, null, navigation.visible ? icons.visible : icons.notVisible),
+                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.delete })))))))))));
-};
-exports.List = List;
-const listFooterActions = ({ onClose, state, setState, navigations, }) => {
-    return {
-        startActions: (react_1.default.createElement(Button_1.Button, { onClick: onClose, variant: "tertiary", disabled: state.isLoading }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
-        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: () => setState({
-                view: "CREATE",
-                alreadyUsedNames: navigations.map(({ name }) => name),
-                current: Create_1.INITIAL_NAVIGATION,
-            }), variant: "default" }, (0, utils_1.getMessage)("popup.navigation.manage.button.create"))),
-    };
-};
-exports.listFooterActions = listFooterActions;
-const icons = {
-    edit: react_1.default.createElement(icons_1.Pencil, null),
-    delete: react_1.default.createElement(icons_1.Trash, null),
-    visible: react_1.default.createElement(icons_1.Eye, null),
-    notVisible: react_1.default.createElement(icons_1.EyeStriked, null),
+                            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/{Delete → DeletionConfirm}/index.js

@@ -3,26 +3,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteFooterActions = exports.Delete = void 0;
-const Button_1 = require("@strapi/design-system/Button");
+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 Delete = ({ navigations }) => (react_1.default.createElement(Grid_1.Grid, null,
+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.Delete = Delete;
-const deleteFooterActions = ({ state, onSubmit, onReset, }) => {
-    return {
-        startActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onReset, variant: "tertiary" }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
-        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onSubmit, variant: "danger" }, (0, utils_1.getMessage)("popup.navigation.manage.button.delete"))),
-    };
-};
-exports.deleteFooterActions = deleteFooterActions;
-const renderItems = (navigations) => navigations.map(({ name }) => `"${name}"`).join(", ");
+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/{Error → ErrorDetails}/index.js

@@ -23,13 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.errorFooterActions = exports.ErrorView = void 0;
-const Button_1 = require("@strapi/design-system/Button");
+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 ErrorView = ({ errors }) => {
+const Footer_1 = require("../Footer");
+const ErrorDetails = ({ errors }) => {
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     (0, react_1.useEffect)(() => {
         errors.map((error) => {
@@ -43,11 +43,11 @@ const ErrorView = ({ errors }) => {
     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.ErrorView = ErrorView;
-const errorFooterActions = ({ onReset }) => {
-    return {
-        endActions: (react_1.default.createElement(Button_1.Button, { onClick: onReset, variant: "secondary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.goBack"))),
-    };
-};
-exports.errorFooterActions = errorFooterActions;
+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

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { Navigation } from "../types";
 import { useIntl } from "react-intl";
+import { Effect } from "../../../../../../../types";
+import { Navigation } from "../types";
 interface Props {
     navigation: Partial<Navigation>;
-    onChange: (n: Navigation) => void;
+    onChange: Effect<Navigation>;
     isLoading?: boolean;
     validationSchema: ReturnType<typeof validationSchemaFactory>;
 }

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

@@ -24,13 +24,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validationSchemaFactory = exports.Form = void 0;
-const yup = __importStar(require("yup"));
 const Grid_1 = require("@strapi/design-system/Grid");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
+const yup = __importStar(require("yup"));
 const translations_1 = require("../../../../../translations");
+const lodash_1 = require("lodash");
 const Form = ({ navigation, onChange: onChangeBase, isLoading, validationSchema, }) => {
+    const initialValues = {
+        id: (0, lodash_1.get)(navigation, "id", ""),
+        name: (0, lodash_1.get)(navigation, "name", ""),
+    };
     const onChange = (0, react_1.useCallback)(({ target: { name, value } }) => {
         onChangeBase({
             ...navigation,
@@ -48,7 +53,7 @@ const Form = ({ navigation, onChange: onChangeBase, isLoading, validationSchema,
             .then(() => setError(null))
             .catch(setError);
     }, [navigation, validationSchema, setError]);
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: navigation, onSubmit: onChangeBase },
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: initialValues, onSubmit: onChangeBase },
         react_1.default.createElement(helper_plugin_1.Form, null,
             react_1.default.createElement(Grid_1.Grid, { gap: 5 },
                 react_1.default.createElement(Grid_1.GridItem, { col: 6 },

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Footer } from "../Footer";
+import { CommonProps, EditState } from "../types";
+interface Props extends EditState, CommonProps {
+}
+export declare const NavigationUpdate: ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }: Props) => JSX.Element;
+export declare const NavigationUpdateFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/View/components/NavigationManager/{Edit → NavigationUpdate}/index.js

@@ -23,13 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.editFooterActions = exports.Edit = void 0;
-const Button_1 = require("@strapi/design-system/Button");
+exports.NavigationUpdateFooter = exports.NavigationUpdate = void 0;
 const react_1 = __importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const utils_1 = require("../../../../../utils");
+const Footer_1 = require("../Footer");
 const Form_1 = require("../Form");
-const Edit = ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }) => {
+const NavigationUpdate = ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }) => {
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const onChange = (0, react_1.useCallback)((updated) => {
         setState({
@@ -43,12 +43,17 @@ const Edit = ({ alreadyUsedNames, current, isLoading, navigation: initialValue,
     const validationSchema = (0, react_1.useMemo)(() => (0, Form_1.validationSchemaFactory)(alreadyUsedNames, formatMessage), [alreadyUsedNames]);
     return (react_1.default.createElement(Form_1.Form, { navigation: navigation, onChange: onChange, isLoading: isLoading, validationSchema: validationSchema }));
 };
-exports.Edit = Edit;
-const editFooterActions = ({ state, onSubmit, onReset, }) => {
-    return {
-        startActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onReset, variant: "tertiary" }, (0, utils_1.getMessage)("popup.item.form.button.cancel"))),
-        endActions: (react_1.default.createElement(Button_1.Button, { disabled: state.isLoading, onClick: onSubmit, variant: "secondary" }, (0, utils_1.getMessage)("popup.navigation.manage.button.save"))),
-    };
-};
-exports.editFooterActions = editFooterActions;
+exports.NavigationUpdate = NavigationUpdate;
+const NavigationUpdateFooter = ({ 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.save"),
+        disabled: state.isLoading,
+        onClick: onSubmit,
+        variant: "secondary",
+    } }));
+exports.NavigationUpdateFooter = NavigationUpdateFooter;
 //# sourceMappingURL=index.js.map