strapi-plugin-navigation 2.1.0-beta.2 → 2.2.1

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { useIntl } from "react-intl";
+import { Effect } from "../../../../../../../types";
+import { Navigation } from "../types";
+interface Props {
+    navigation: Partial<Navigation>;
+    onChange: Effect<Navigation>;
+    isLoading?: boolean;
+    validationSchema: ReturnType<typeof validationSchemaFactory>;
+}
+export declare const Form: ({ navigation, onChange: onChangeBase, isLoading, validationSchema, }: Props) => JSX.Element;
+export declare const validationSchemaFactory: (alreadyUsedNames: Array<string>, formatMessage: ReturnType<typeof useIntl>["formatMessage"]) => import("yup/lib/object").OptionalObjectSchema<{
+    name: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    visible: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
+}, Record<string, any>, import("yup/lib/object").TypeOfShape<{
+    name: import("yup/lib/string").RequiredStringSchema<string | undefined, Record<string, any>>;
+    visible: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, Record<string, any>>;
+}>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,103 @@
+"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.validationSchemaFactory = exports.Form = void 0;
+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,
+            [name]: value,
+        });
+    }, [onChangeBase, navigation]);
+    const [error, setError] = (0, react_1.useState)(null);
+    const errorProps = (0, react_1.useMemo)(() => ({
+        name: error?.path === "name" ? error.message : undefined,
+        visible: error?.path === "visible" ? error.message : undefined,
+    }), [error]);
+    (0, react_1.useEffect)(() => {
+        validationSchema
+            .validate(navigation)
+            .then(() => setError(null))
+            .catch(setError);
+    }, [navigation, validationSchema, setError]);
+    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 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...formProps.name, name: "name", description: {
+                            id: (0, translations_1.getTradId)("popup.item.form.title.placeholder"),
+                            defaultMessage: "e.g. Blog",
+                        }, type: "text", error: errorProps.name, onChange: onChange, value: navigation.name, disabled: isLoading, required: true })),
+                react_1.default.createElement(Grid_1.GridItem, { col: 6 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...formProps.visible, name: "visible", type: "bool", error: errorProps.visible, onChange: onChange, value: navigation.visible, disabled: isLoading }))))));
+};
+exports.Form = Form;
+const formProps = {
+    name: {
+        intlLabel: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.name.label"),
+            defaultMessage: "Name",
+        },
+        placeholder: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.name.placeholder"),
+            defaultMessage: "Navigations's name",
+        },
+    },
+    visible: {
+        intlLabel: {
+            id: (0, translations_1.getTradId)("popup.navigation.form.visible.label"),
+            defaultMessage: "Visibility",
+        },
+    },
+};
+const validationSchemaFactory = (alreadyUsedNames, formatMessage) => yup.object({
+    name: yup
+        .string()
+        .notOneOf(alreadyUsedNames, formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.alreadyUsed"),
+    }))
+        .required(formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.required"),
+    }))
+        .min(2, formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.name.tooShort"),
+    })),
+    visible: yup.boolean().required(formatMessage({
+        id: (0, translations_1.getTradId)("popup.navigation.form.validation.visible.required"),
+    })),
+});
+exports.validationSchemaFactory = validationSchemaFactory;
+//# sourceMappingURL=index.js.map

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/NavigationUpdate/index.js

@@ -0,0 +1,59 @@
+"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.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 NavigationUpdate = ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const onChange = (0, react_1.useCallback)((updated) => {
+        setState({
+            view: "EDIT",
+            alreadyUsedNames,
+            current: updated,
+            navigation: initialValue,
+        });
+    }, [setState, initialValue, alreadyUsedNames]);
+    const navigation = (0, react_1.useMemo)(() => current ?? initialValue, [current]);
+    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.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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Footer } from "../Footer";
+import { CommonProps, CreateState, Navigation } from "../types";
+interface Props extends CreateState, CommonProps {
+}
+export declare const INITIAL_NAVIGATION: Navigation;
+export declare const NewNavigation: ({ setState, current, isLoading, alreadyUsedNames, }: Props) => JSX.Element;
+export declare const NewNavigationFooter: Footer;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,62 @@
+"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.NewNavigationFooter = exports.NewNavigation = exports.INITIAL_NAVIGATION = 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");
+exports.INITIAL_NAVIGATION = {
+    name: "Navigation",
+    items: [],
+    visible: true,
+};
+const NewNavigation = ({ setState, current, isLoading, alreadyUsedNames, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const onSubmit = (0, react_1.useCallback)((updated) => {
+        setState({
+            view: "CREATE",
+            current: updated,
+            alreadyUsedNames,
+        });
+    }, [setState]);
+    const validationSchema = (0, react_1.useMemo)(() => (0, Form_1.validationSchemaFactory)(alreadyUsedNames, formatMessage), [alreadyUsedNames]);
+    return (react_1.default.createElement(Form_1.Form, { navigation: current, onChange: onSubmit, isLoading: isLoading, validationSchema: validationSchema }));
+};
+exports.NewNavigation = NewNavigation;
+const NewNavigationFooter = ({ state, onSubmit, onReset, }) => (react_1.default.createElement(Footer_1.FooterBase, { start: {
+        children: (0, utils_1.getMessage)("popup.item.form.button.cancel"),
+        variant: "tertiary",
+        disabled: state.isLoading,
+        onClick: onReset,
+    }, end: {
+        children: (0, utils_1.getMessage)("popup.navigation.manage.button.save"),
+        variant: "default",
+        disabled: state.isLoading,
+        onClick: onSubmit,
+    } }));
+exports.NewNavigationFooter = NewNavigationFooter;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { VoidEffect } from "../../../../../../types";
+import { State } from "./types";
+interface Props {
+    initialState: State;
+    isOpened?: boolean;
+    onClose?: VoidEffect;
+}
+export declare const NavigationManager: ({ initialState, isOpened, onClose, }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,190 @@
+"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.NavigationManager = void 0;
+const Flex_1 = require("@strapi/design-system/Flex");
+const Loader_1 = require("@strapi/design-system/Loader");
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const lodash_1 = require("lodash");
+const fp_1 = require("lodash/fp");
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const useDataManager_1 = __importDefault(require("../../../../hooks/useDataManager"));
+const utils_1 = require("../../../../utils");
+const AllNavigations_1 = require("./AllNavigations");
+const DeletionConfirm_1 = require("./DeletionConfirm");
+const ErrorDetails_1 = require("./ErrorDetails");
+const NavigationUpdate_1 = require("./NavigationUpdate");
+const NewNavigation_1 = require("./NewNavigation");
+const NavigationManager = ({ initialState, isOpened, onClose, }) => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const [state, setState] = (0, react_1.useState)(initialState);
+    const { items = [], handleNavigationsDeletion, handleSubmitNavigation, hardReset, } = (0, useDataManager_1.default)();
+    const navigations = (0, react_1.useMemo)(() => (0, lodash_1.sortBy)(items, "id"), [items]);
+    const onReset = (0, react_1.useCallback)(() => setState({ view: "INITIAL" }), [setState]);
+    const onSubmit = (0, react_1.useCallback)(async () => {
+        const performAction = state.view === "DELETE"
+            ? async () => {
+                await handleNavigationsDeletion(state.navigations.map((0, fp_1.prop)("id")));
+                await hardReset();
+            }
+            : (state.view === "CREATE" || state.view === "EDIT") && state.current
+                ? async () => {
+                    await handleSubmitNavigation(formatMessage, state.current);
+                    await hardReset();
+                }
+                : () => { };
+        try {
+            setState({
+                ...state,
+                isLoading: true,
+            });
+            await performAction();
+            setState({ view: "INITIAL" });
+        }
+        catch (error) {
+            setState({
+                view: "ERROR",
+                errors: error instanceof Error ? [error] : [],
+            });
+        }
+    }, [
+        state,
+        setState,
+        hardReset,
+        handleSubmitNavigation,
+        handleNavigationsDeletion,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (state.view === "INITIAL") {
+            setState({
+                view: "LIST",
+                navigations,
+                selected: [],
+            });
+        }
+    }, [state.view]);
+    const header = renderHeader(state);
+    const content = renderContent(state, setState);
+    const footer = renderFooter({
+        state,
+        setState,
+        onClose,
+        onSubmit,
+        onReset,
+        navigations,
+    });
+    return (react_1.default.createElement(ModalLayout_1.ModalLayout, { labelledBy: "condition-modal-breadcrumbs", onClose: onClose, isOpen: isOpened },
+        react_1.default.createElement(ModalLayout_1.ModalHeader, null, header),
+        react_1.default.createElement(ModalLayout_1.ModalBody, null, content),
+        footer));
+};
+exports.NavigationManager = NavigationManager;
+const renderHeader = (state) => {
+    switch (state.view) {
+        case "LIST":
+        case "CREATE":
+        case "ERROR":
+        case "DELETE": {
+            return (react_1.default.createElement(Flex_1.Flex, { direction: "row" },
+                state.isLoading ? react_1.default.createElement(Loader_1.Loader, { small: true }) : null,
+                (0, utils_1.getMessage)(`popup.navigation.manage.header.${state.view}`)));
+        }
+        case "EDIT": {
+            return (react_1.default.createElement(Flex_1.Flex, { direction: "row" },
+                state.isLoading ? react_1.default.createElement(Loader_1.Loader, { small: true }) : null,
+                (0, utils_1.getMessage)({
+                    id: "popup.navigation.manage.header.EDIT",
+                    props: {
+                        name: state.navigation.name,
+                    },
+                })));
+        }
+        case "INITIAL": {
+            return null;
+        }
+        default:
+            return handleUnknownState(state);
+    }
+};
+const renderContent = (state, setState) => {
+    const commonProps = {
+        setState,
+    };
+    switch (state.view) {
+        case "LIST": {
+            return react_1.default.createElement(AllNavigations_1.AllNavigations, { ...state, ...commonProps });
+        }
+        case "EDIT": {
+            return react_1.default.createElement(NavigationUpdate_1.NavigationUpdate, { ...state, ...commonProps });
+        }
+        case "CREATE": {
+            return react_1.default.createElement(NewNavigation_1.NewNavigation, { ...state, ...commonProps });
+        }
+        case "DELETE": {
+            return react_1.default.createElement(DeletionConfirm_1.DeletionConfirm, { ...state, ...commonProps });
+        }
+        case "INITIAL": {
+            return react_1.default.createElement(Loader_1.Loader, { small: true });
+        }
+        case "ERROR": {
+            return react_1.default.createElement(ErrorDetails_1.ErrorDetails, { ...state, ...commonProps });
+        }
+        default:
+            return handleUnknownState(state);
+    }
+};
+const renderFooter = (props) => {
+    switch (props.state.view) {
+        case "LIST": {
+            return react_1.default.createElement(AllNavigations_1.AllNavigationsFooter, { ...props });
+        }
+        case "CREATE": {
+            return react_1.default.createElement(NewNavigation_1.NewNavigationFooter, { ...props });
+        }
+        case "EDIT": {
+            return react_1.default.createElement(NavigationUpdate_1.NavigationUpdateFooter, { ...props });
+        }
+        case "DELETE": {
+            return react_1.default.createElement(DeletionConfirm_1.DeleteConfirmFooter, { ...props });
+        }
+        case "ERROR": {
+            return react_1.default.createElement(ErrorDetails_1.ErrorDetailsFooter, { ...props });
+        }
+        case "INITIAL": {
+            return null;
+        }
+        default:
+            return handleUnknownState(props.state);
+    }
+};
+const handleUnknownState = (state) => {
+    console.warn(`Unknown state "${state?.view}". (${JSON.stringify(state)})`);
+    return null;
+};
+//# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationManager/types.d.ts

@@ -0,0 +1,40 @@
+import { Dispatch, SetStateAction } from "react";
+import { Navigation as FullNavigationEntity } from "../../../../../../types";
+export declare type Navigation = Pick<FullNavigationEntity, "id" | "items" | "name" | "localeCode" | "localizations" | "visible">;
+export declare type State = InitialState | ListState | EditState | CreateState | DeleteState | ErrorState;
+export declare type SetState = Dispatch<SetStateAction<State>>;
+interface CommonState {
+    isLoading?: boolean;
+}
+export interface CommonProps {
+    setState: SetState;
+}
+export interface InitialState extends CommonState {
+    view: "INITIAL";
+}
+export interface ListState extends CommonState {
+    view: "LIST";
+    navigations: Array<Navigation>;
+    selected: Array<Navigation>;
+}
+export interface EditState extends CommonState {
+    view: "EDIT";
+    navigation: Navigation;
+    current?: Navigation;
+    alreadyUsedNames: Array<string>;
+}
+export interface CreateState extends CommonState {
+    view: "CREATE";
+    current: Navigation;
+    alreadyUsedNames: Array<string>;
+}
+export interface DeleteState extends CommonState {
+    view: "DELETE";
+    navigations: Array<Navigation>;
+}
+export interface ErrorState extends CommonState {
+    view: "ERROR";
+    errors: Array<Error>;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/admin/src/pages/View/components/NavigationManager/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -1,4 +1,4 @@
-declare var _default: React.MemoExoticComponent<() => JSX.Element>;
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
 export default _default;
 import React from "react";
 //# sourceMappingURL=index.d.ts.map

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

@@ -44,15 +44,15 @@ const NavigationItemList_1 = __importDefault(require("../../components/Navigatio
 const NavigationContentHeader_1 = __importDefault(require("./components/NavigationContentHeader"));
 const NavigationHeader_1 = __importDefault(require("./components/NavigationHeader"));
 const NavigationItemPopup_1 = __importDefault(require("./components/NavigationItemPopup"));
-const I18nCopyNavigationItems_1 = require("./components/I18nCopyNavigationItems");
+const useI18nCopyNavigationItemsModal_1 = require("../../hooks/useI18nCopyNavigationItemsModal");
 const Search_1 = __importDefault(require("../../components/Search"));
 const useDataManager_1 = __importDefault(require("../../hooks/useDataManager"));
 const translations_1 = require("../../translations");
 const parsers_1 = require("./utils/parsers");
 const View = () => {
-    const { items: availableNavigations, activeItem: activeNavigation, changedActiveItem: changedActiveNavigation, config, navigationItemPopupOpened, isLoading, isLoadingForAdditionalDataToBeSet, isLoadingForSubmit, handleChangeNavigationItemPopupVisibility, handleChangeSelection, handleChangeNavigationData, handleResetNavigationData, handleSubmitNavigation, handleLocalizationSelection, handleI18nCopy, getContentTypeItems, error, availableLocale: allAvailableLocale, } = (0, useDataManager_1.default)();
+    const { items: availableNavigations, activeItem: activeNavigation, changedActiveItem: changedActiveNavigation, config, navigationItemPopupOpened, isLoading, isLoadingForAdditionalDataToBeSet, isLoadingForSubmit, handleChangeNavigationItemPopupVisibility, handleChangeSelection, handleChangeNavigationData, handleResetNavigationData, handleSubmitNavigation, handleLocalizationSelection, handleI18nCopy, getContentTypeItems, error, availableLocale: allAvailableLocale, readNavigationItemFromLocale, } = (0, useDataManager_1.default)();
     const availableLocale = (0, react_1.useMemo)(() => allAvailableLocale.filter(locale => locale !== changedActiveNavigation?.localeCode), [changedActiveNavigation, allAvailableLocale]);
-    const { i18nCopyItemsModal, i18nCopySourceLocale, setI18nCopyModalOpened, setI18nCopySourceLocale } = (0, I18nCopyNavigationItems_1.useI18nCopyNavigationItemsModal)((0, react_1.useCallback)((sourceLocale) => {
+    const { i18nCopyItemsModal, i18nCopySourceLocale, setI18nCopyModalOpened, setI18nCopySourceLocale } = (0, useI18nCopyNavigationItemsModal_1.useI18nCopyNavigationItemsModal)((0, react_1.useCallback)((sourceLocale) => {
         const source = activeNavigation?.localizations?.find(({ localeCode }) => localeCode === sourceLocale);
         if (source) {
             handleI18nCopy(source.id, activeNavigation?.id);
@@ -73,16 +73,17 @@ const View = () => {
         setActiveNavigationItemState(editedItem);
         handleChangeNavigationItemPopupVisibility(visible);
     };
-    const addNewNavigationItem = (e, viewId = null, isMenuAllowedLevel = true, levelPath = '', parentAttachedToMenu = true) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const addNewNavigationItem = (0, react_1.useCallback)((event, viewParentId = null, isMenuAllowedLevel = true, levelPath = '', parentAttachedToMenu = true, structureId = "0") => {
+        event.preventDefault();
+        event.stopPropagation();
         changeNavigationItemPopupState(true, {
-            viewParentId: viewId,
+            viewParentId,
             isMenuAllowedLevel,
             levelPath,
             parentAttachedToMenu,
+            structureId,
         });
-    };
+    }, [changeNavigationItemPopupState]);
     const usedContentTypesData = (0, react_1.useMemo)(() => changedActiveNavigation ? (0, parsers_1.usedContentTypes)(changedActiveNavigation.items) : [], [changedActiveNavigation]);
     const pullUsedContentTypeItem = (items = []) => items.reduce((prev, curr) => [...prev, curr.relatedRef ? {
             __collectionUid: curr.relatedRef.__collectionUid,
@@ -196,6 +197,7 @@ const View = () => {
             startIcon: react_1.default.createElement(Plus_1.default, null),
             disabled: isLoadingForSubmit,
             type: "submit",
+            variant: "default",
             tradId: 'header.action.newItem',
             margin: '16px',
         },
@@ -225,7 +227,7 @@ const View = () => {
                                 react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: openI18nCopyModalOpened, disabled: !i18nCopySourceLocale, size: "S" }, formatMessage((0, translations_1.getTrad)('view.i18n.fill.cta.button'))))))) : null)),
                 !(0, lodash_1.isEmpty)(changedActiveNavigation.items || [])
                     && react_1.default.createElement(NavigationItemList_1.default, { items: isSearchEmpty ? changedActiveNavigation.items || [] : filteredList, onItemLevelAdd: addNewNavigationItem, onItemRemove: handleItemRemove, onItemEdit: handleItemEdit, onItemRestore: handleItemRestore, onItemReOrder: handleItemReOrder, onItemToggleCollapse: handleItemToggleCollapse, displayFlat: !isSearchEmpty, root: true, error: error, allowedLevels: config.allowedLevels, contentTypes: config.contentTypes, isParentAttachedToMenu: true, contentTypesNameFields: config.contentTypesNameFields })))),
-        navigationItemPopupOpened && react_1.default.createElement(NavigationItemPopup_1.default, { isLoading: isLoadingForAdditionalDataToBeSet, data: activeNavigationItem, config: config, usedContentTypesData: usedContentTypesData, usedContentTypeItems: usedContentTypeItems, getContentTypeItems: getContentTypeItems, onSubmit: handleSubmitNavigationItem, onClose: onPopUpClose, locale: activeNavigation.localeCode }),
+        navigationItemPopupOpened && react_1.default.createElement(NavigationItemPopup_1.default, { availableLocale: availableLocale, isLoading: isLoadingForAdditionalDataToBeSet, data: activeNavigationItem, config: config, usedContentTypesData: usedContentTypesData, usedContentTypeItems: usedContentTypeItems, getContentTypeItems: getContentTypeItems, onSubmit: handleSubmitNavigationItem, onClose: onPopUpClose, locale: activeNavigation.localeCode, readNavigationItemFromLocale: readNavigationItemFromLocale }),
         i18nCopyItemsModal));
 };
 exports.default = (0, react_1.memo)(View);

package/admin/src/pages/View/utils/parsers.d.ts

@@ -9,6 +9,7 @@ export function transformItemToRESTPayload(item: any, parent?: undefined, master
     order: any;
     uiRouterKey: any;
     collapsed: any;
+    additionalFields: any;
     menuAttached: any;
     audience: any;
     path: any;
@@ -27,7 +28,12 @@ export function transformToRESTPayload(payload: any, config?: {}): {
     items: any;
 };
 export function transformItemToViewPayload(payload: any, items: any[] | undefined, config: any): any;
-export function prepareItemToViewPayload(items?: any[], viewParentId?: null, config?: {}): any;
+export function prepareItemToViewPayload({ items, viewParentId, config, structureIdPrefix }: {
+    items?: any[] | undefined;
+    viewParentId?: null | undefined;
+    config?: {} | undefined;
+    structureIdPrefix?: string | undefined;
+}): any;
 export function extractRelatedItemLabel(item?: {}, fields?: {}, config?: {}): any;
 export function usedContentTypes(items?: any[]): any;
 export function isRelationCorrect({ related, type }: {