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

package/README.md

@@ -102,10 +102,10 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-You can manage your multiple navigation containers by going to the **Navigation** section of the **Content Manager**.
+You can manage your multiple navigation containers by going to the **Navigation** manage view by clicking "Manage" button.
 
 <div style="margin: 20px 0" align="center">
-  <img style="width: 100%; height: auto;" src="public/assets/content-manager.png" alt="Strapi In-App Marketplace" />
+  <img style="width: 100%; height: auto;" src="public/assets/manager-view.png" alt="Navigation Manager View" />
 </div>
 
 As a next step you must configure your the plugin by the way you want to. See [**Configuration**](#🔧-configuration) section.
@@ -118,7 +118,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.1.11 (recently tested)
+- Strapi v4.2.0 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3).

package/admin/src/components/Item/index.js

@@ -48,8 +48,8 @@ const utils_1 = require("../../utils");
 const CollapseButton_1 = __importDefault(require("../CollapseButton"));
 const Item = (props) => {
     const { item, isLast = false, level = 0, levelPath = '', allowedLevels, relatedRef, isParentAttachedToMenu, onItemLevelAdd, onItemRemove, onItemRestore, onItemEdit, onItemReOrder, onItemToggleCollapse, error, displayChildren, config = {}, } = props;
-    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, } = item;
-    const { contentTypes, contentTypesNameFields } = config;
+    const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], } = item;
+    const { contentTypes = [], contentTypesNameFields } = config;
     const isExternal = type === enums_1.navigationItemType.EXTERNAL;
     const isWrapper = type === enums_1.navigationItemType.WRAPPER;
     const isHandledByPublishFlow = contentTypes.find(_ => _.uid === relatedRef?.__collectionUid)?.draftAndPublish;
@@ -111,6 +111,7 @@ const Item = (props) => {
         const { isSingle } = contentType;
         return `/content-manager/${isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}`;
     };
+    const onNewItemClick = (0, react_1.useCallback)((event) => onItemLevelAdd(event, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, `${structureId}.${items.length}`), [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items]);
     return (react_1.default.createElement(Wrapper_1.default, { level: level, isLast: isLast, style: { opacity: isDragging ? 0.2 : 1 }, ref: refs ? refs.dropRef : null },
         react_1.default.createElement(Card_1.Card, { style: { width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' } },
             removed && (react_1.default.createElement(ItemCardRemovedOverlay_1.ItemCardRemovedOverlay, null)),
@@ -126,7 +127,7 @@ const Item = (props) => {
                     react_1.default.createElement(Flex_1.Flex, { style: { width: '100%' }, direction: "row", alignItems: "center", justifyContent: "space-between" },
                         react_1.default.createElement(Flex_1.Flex, null,
                             !(0, lodash_1.isEmpty)(item.items) && react_1.default.createElement(CollapseButton_1.default, { toggle: () => onItemToggleCollapse(item), collapsed: collapsed, itemsCount: item.items.length }),
-                            react_1.default.createElement(TextButton_1.TextButton, { disabled: removed, startIcon: react_1.default.createElement(icons_1.Plus, null), onClick: (e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached) },
+                            react_1.default.createElement(TextButton_1.TextButton, { disabled: removed, startIcon: react_1.default.createElement(icons_1.Plus, null), onClick: onNewItemClick },
                                 react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontWeight: "bold", textColor: removed ? "neutral600" : "primary600" }, (0, utils_1.getMessage)("components.navigationItem.action.newItem")))),
                         relatedItemLabel && (react_1.default.createElement(Flex_1.Flex, { justifyContent: 'center', alignItems: 'center' },
                             isHandledByPublishFlow && (react_1.default.createElement(ItemCardBadge_1.default, { borderColor: `${relatedBadgeColor}200`, backgroundColor: `${relatedBadgeColor}100`, textColor: `${relatedBadgeColor}600`, className: "action", small: true }, (0, utils_1.getMessage)({ id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}` }))),

package/admin/src/hooks/useI18nCopyNavigationItemsModal.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ConfirmEffect } from "../pages/View/components/I18nCopyNavigationItems";
+export declare const useI18nCopyNavigationItemsModal: (onConfirm: ConfirmEffect) => {
+    setI18nCopyModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    setI18nCopySourceLocale: React.Dispatch<React.SetStateAction<string | undefined>>;
+    i18nCopyItemsModal: JSX.Element | null;
+    i18nCopySourceLocale: string | undefined;
+};
+//# sourceMappingURL=useI18nCopyNavigationItemsModal.d.ts.map

package/admin/src/hooks/useI18nCopyNavigationItemsModal.js

@@ -0,0 +1,51 @@
+"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.useI18nCopyNavigationItemsModal = void 0;
+const react_1 = __importStar(require("react"));
+const I18nCopyNavigationItems_1 = require("../pages/View/components/I18nCopyNavigationItems");
+const useI18nCopyNavigationItemsModal = (onConfirm) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const [sourceLocale, setSourceLocale] = (0, react_1.useState)(undefined);
+    const onCancel = (0, react_1.useCallback)(() => {
+        setIsOpened(false);
+    }, [setIsOpened]);
+    const onConfirmWithModalClose = (0, react_1.useCallback)(() => {
+        if (!sourceLocale) {
+            return;
+        }
+        onConfirm(sourceLocale);
+        setIsOpened(false);
+    }, [onConfirm, sourceLocale]);
+    const modal = (0, react_1.useMemo)(() => isOpened ? (react_1.default.createElement(I18nCopyNavigationItems_1.I18nCopyNavigationItemsModal, { onConfirm: onConfirmWithModalClose, onCancel: onCancel })) : null, [isOpened, onConfirmWithModalClose, onCancel]);
+    return (0, react_1.useMemo)(() => ({
+        setI18nCopyModalOpened: setIsOpened,
+        setI18nCopySourceLocale: setSourceLocale,
+        i18nCopyItemsModal: modal,
+        i18nCopySourceLocale: sourceLocale,
+    }), [setSourceLocale, setIsOpened, modal, sourceLocale]);
+};
+exports.useI18nCopyNavigationItemsModal = useI18nCopyNavigationItemsModal;
+//# sourceMappingURL=useI18nCopyNavigationItemsModal.js.map

package/admin/src/hooks/useNavigationManager.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useNavigationManager: () => {
+    navigationManagerModal: JSX.Element | null;
+    openNavigationManagerModal: () => void;
+    closeNavigationManagerModal: () => void;
+};
+//# sourceMappingURL=useNavigationManager.d.ts.map

package/admin/src/hooks/useNavigationManager.js

@@ -0,0 +1,41 @@
+"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.useNavigationManager = void 0;
+const react_1 = __importStar(require("react"));
+const NavigationManager_1 = require("../pages/View/components/NavigationManager");
+const useNavigationManager = () => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const open = (0, react_1.useCallback)(() => setIsOpened(true), [setIsOpened]);
+    const close = (0, react_1.useCallback)(() => setIsOpened(false), [setIsOpened]);
+    const modal = (0, react_1.useMemo)(() => isOpened ? (react_1.default.createElement(NavigationManager_1.NavigationManager, { initialState: { view: "INITIAL" }, isOpened: true, onClose: close })) : null, [isOpened, close]);
+    return (0, react_1.useMemo)(() => ({
+        navigationManagerModal: modal,
+        openNavigationManagerModal: open,
+        closeNavigationManagerModal: close,
+    }), [modal, open, close]);
+};
+exports.useNavigationManager = useNavigationManager;
+//# sourceMappingURL=useNavigationManager.js.map

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

@@ -39,6 +39,7 @@ const init_1 = __importDefault(require("./init"));
 const reducer_1 = __importStar(require("./reducer"));
 const actions_1 = require("./actions");
 const parsers_1 = require("../View/utils/parsers");
+const utils_1 = require("../../utils");
 const i18nAwareItems = ({ items, config }) => config.i18nEnabled ? items.filter(({ localeCode }) => localeCode === config.defaultLocale) : items;
 const DataManagerProvider = ({ children }) => {
     const [reducerState, dispatch] = (0, react_1.useReducer)(reducer_1.default, reducer_1.initialState, init_1.default);
@@ -60,7 +61,7 @@ const DataManagerProvider = ({ children }) => {
     const passedActiveItems = (0, react_1.useMemo)(() => {
         return i18nAwareItems({ config, items });
     }, [config, items]);
-    const getNavigation = async (id, cfg) => {
+    const getNavigation = async (id, navigationConfig) => {
         try {
             if (activeId || id) {
                 dispatch({
@@ -74,7 +75,10 @@ const DataManagerProvider = ({ children }) => {
                     type: actions_1.GET_NAVIGATION_DATA_SUCCEEDED,
                     activeItem: {
                         ...activeItem,
-                        items: (0, parsers_1.prepareItemToViewPayload)(activeItem.items, null, cfg),
+                        items: (0, parsers_1.prepareItemToViewPayload)({
+                            config: navigationConfig,
+                            items: activeItem.items,
+                        }),
                     },
                 });
             }
@@ -186,6 +190,26 @@ const DataManagerProvider = ({ children }) => {
         });
         handleChangeSelection(targetId);
     };
+    const readNavigationItemFromLocale = async ({ locale, structureId }) => {
+        try {
+            const source = changedActiveItem.localizations?.find((navigation) => navigation.locale === locale);
+            if (!source) {
+                return (0, utils_1.errorStatusResourceFor)(['popup.item.form.i18n.locale.error.unavailable']);
+            }
+            const url = `/navigation/i18n/item/read/${source.id}/${changedActiveItem.id}?path=${structureId}`;
+            return (0, utils_1.resolvedResourceFor)(await (0, helper_plugin_1.request)(url, {
+                method: "GET",
+                signal,
+            }));
+        }
+        catch (error) {
+            let messageKey;
+            if (error instanceof Error) {
+                messageKey = (0, lodash_1.get)(error, 'response.payload.error.details.messageKey');
+            }
+            return (0, utils_1.errorStatusResourceFor)([messageKey ?? 'popup.item.form.i18n.locale.error.generic']);
+        }
+    };
     const handleChangeNavigationPopupVisibility = (visible) => {
         dispatch({
             type: actions_1.CHANGE_NAVIGATION_POPUP_VISIBILITY,
@@ -227,7 +251,10 @@ const DataManagerProvider = ({ children }) => {
                 type: actions_1.SUBMIT_NAVIGATION_SUCCEEDED,
                 navigation: {
                     ...navigation,
-                    items: (0, parsers_1.prepareItemToViewPayload)(navigation.items, null, config),
+                    items: (0, parsers_1.prepareItemToViewPayload)({
+                        config,
+                        items: navigation.items,
+                    }),
                 },
             });
             toggleNotification({
@@ -255,6 +282,14 @@ const DataManagerProvider = ({ children }) => {
             });
         }
     };
+    const handleNavigationsDeletion = async (ids) => Promise.all(ids.map((id) => handleNavigationDeletion(id)));
+    const handleNavigationDeletion = (id) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/${id}`, {
+        method: "DELETE",
+        signal,
+    });
+    const hardReset = () => {
+        return getDataRef.current();
+    };
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
             activeItem,
@@ -280,6 +315,9 @@ const DataManagerProvider = ({ children }) => {
             isInDevelopmentMode,
             error,
             availableLocale,
+            readNavigationItemFromLocale,
+            handleNavigationsDeletion,
+            hardReset,
         } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {

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

@@ -1,8 +1,8 @@
-import React, { VFC } from "react";
-interface ConfirmEffect {
+import { VFC } from "react";
+export interface ConfirmEffect {
     (source: string): void;
 }
-interface CancelEffect {
+export interface CancelEffect {
     (): void;
 }
 interface Props {
@@ -10,11 +10,5 @@ interface Props {
     onCancel: CancelEffect;
 }
 export declare const I18nCopyNavigationItemsModal: VFC<Props>;
-export declare const useI18nCopyNavigationItemsModal: (onConfirm: ConfirmEffect) => {
-    setI18nCopyModalOpened: React.Dispatch<React.SetStateAction<boolean>>;
-    setI18nCopySourceLocale: React.Dispatch<React.SetStateAction<string | undefined>>;
-    i18nCopyItemsModal: JSX.Element | null;
-    i18nCopySourceLocale: string | undefined;
-};
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,33 +1,10 @@
 "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.useI18nCopyNavigationItemsModal = exports.I18nCopyNavigationItemsModal = void 0;
-const react_1 = __importStar(require("react"));
+exports.I18nCopyNavigationItemsModal = void 0;
+const react_1 = __importDefault(require("react"));
 const ConfirmationDialog_1 = __importDefault(require("../../../../components/ConfirmationDialog"));
 const utils_1 = require("../../../../utils");
 const refreshIcon = react_1.default.createElement(react_1.default.Fragment, null);
@@ -35,26 +12,4 @@ const I18nCopyNavigationItemsModal = ({ onConfirm, onCancel, }) => {
     return (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: true, header: (0, utils_1.getMessage)("pages.view.actions.i18nCopyItems.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("pages.view.actions.i18nCopyItems.confirmation.confirm"), iconConfirm: refreshIcon, mainIcon: refreshIcon, onConfirm: onConfirm, onCancel: onCancel }, (0, utils_1.getMessage)("pages.view.actions.i18nCopyItems.confirmation.content")));
 };
 exports.I18nCopyNavigationItemsModal = I18nCopyNavigationItemsModal;
-const useI18nCopyNavigationItemsModal = (onConfirm) => {
-    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
-    const [sourceLocale, setSourceLocale] = (0, react_1.useState)(undefined);
-    const onCancel = (0, react_1.useCallback)(() => {
-        setIsOpened(false);
-    }, [setIsOpened]);
-    const onConfirmWithModalClose = (0, react_1.useCallback)(() => {
-        if (!sourceLocale) {
-            return;
-        }
-        onConfirm(sourceLocale);
-        setIsOpened(false);
-    }, [onConfirm, sourceLocale]);
-    const modal = (0, react_1.useMemo)(() => isOpened ? (react_1.default.createElement(exports.I18nCopyNavigationItemsModal, { onConfirm: onConfirmWithModalClose, onCancel: onCancel })) : null, [isOpened, onConfirmWithModalClose, onCancel]);
-    return (0, react_1.useMemo)(() => ({
-        setI18nCopyModalOpened: setIsOpened,
-        setI18nCopySourceLocale: setSourceLocale,
-        i18nCopyItemsModal: modal,
-        i18nCopySourceLocale: sourceLocale,
-    }), [setSourceLocale, setIsOpened, modal, sourceLocale]);
-};
-exports.useI18nCopyNavigationItemsModal = useI18nCopyNavigationItemsModal;
 //# sourceMappingURL=index.js.map

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

@@ -37,6 +37,7 @@ const Select_1 = require("@strapi/design-system/Select");
 const Box_1 = require("@strapi/design-system/Box");
 const Grid_1 = require("@strapi/design-system/Grid");
 const lodash_1 = require("lodash");
+const useNavigationManager_1 = require("../../../../hooks/useNavigationManager");
 const submitIcon = react_1.default.createElement(Check_1.default, null);
 const pickDefaultLocaleNavigation = ({ activeNavigation, config }) => config.i18nEnabled
     ? activeNavigation
@@ -52,18 +53,22 @@ const NavigationHeader = ({ activeNavigation, availableNavigations, structureHas
         : [], [activeNavigation, config]);
     const hasLocalizations = config.i18nEnabled && allLocaleVersions.length;
     const passedActiveNavigation = pickDefaultLocaleNavigation({ activeNavigation, config });
+    const { closeNavigationManagerModal, openNavigationManagerModal, navigationManagerModal } = (0, useNavigationManager_1.useNavigationManager)();
     return (react_1.default.createElement(Layout_1.HeaderLayout, { primaryAction: react_1.default.createElement(Stack_1.Stack, { horizontal: true, size: 2 },
-            react_1.default.createElement(Box_1.Box, { width: "20vw", marginRight: "8px" },
+            react_1.default.createElement(Box_1.Box, { width: "27vw", marginRight: "8px" },
                 react_1.default.createElement(Grid_1.Grid, { gap: 4 },
-                    !hasLocalizations ? (react_1.default.createElement(Grid_1.GridItem, { col: 3 })) : null,
-                    react_1.default.createElement(Grid_1.GridItem, { col: 6 },
+                    !hasLocalizations ? (react_1.default.createElement(Grid_1.GridItem, { col: 2 })) : null,
+                    react_1.default.createElement(Grid_1.GridItem, { col: 3 },
+                        react_1.default.createElement(Button_1.Button, { onClick: openNavigationManagerModal, startIcon: null, type: "button", variant: "secondary", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('header.action.manage')))),
+                    react_1.default.createElement(Grid_1.GridItem, { col: 4 },
                         react_1.default.createElement(Select_1.Select, { type: "select", placeholder: "Change navigation", name: "navigationSelect", onChange: handleChangeSelection, value: passedActiveNavigation?.id, size: "S", style: null }, availableNavigations.map(({ id, name }) => react_1.default.createElement(Select_1.Option, { key: id, value: id }, name)))),
                     hasLocalizations
-                        ? react_1.default.createElement(Grid_1.GridItem, { col: 3 },
+                        ? react_1.default.createElement(Grid_1.GridItem, { col: 2 },
                             react_1.default.createElement(Select_1.Select, { type: "select", placeholder: formatMessage((0, translations_1.getTrad)('pages.main.header.localization.select.placeholder')), name: "navigationLocalizationSelect", onChange: handleLocalizationSelection, value: activeNavigation?.id, size: "S" }, allLocaleVersions.map(({ id, localeCode }) => react_1.default.createElement(Select_1.Option, { key: id, value: id }, localeCode))))
                         : null,
-                    react_1.default.createElement(Grid_1.GridItem, { col: "3" },
-                        react_1.default.createElement(Button_1.Button, { onClick: handleSave, startIcon: submitIcon, disabled: structureHasErrors || !structureHasChanged, type: "submit" }, formatMessage((0, translations_1.getTrad)('submit.cta.save'))))))), title: formatMessage({
+                    react_1.default.createElement(Grid_1.GridItem, { col: 3 },
+                        react_1.default.createElement(Button_1.Button, { onClick: handleSave, startIcon: submitIcon, disabled: structureHasErrors || !structureHasChanged, type: "submit", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('submit.cta.save')))))),
+            navigationManagerModal), title: formatMessage({
             id: (0, translations_1.getTrad)('header.title'),
             defaultMessage: 'UI Navigation',
         }), subtitle: formatMessage({

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

@@ -1,5 +1,7 @@
 export default NavigationItemForm;
-declare function NavigationItemForm({ isLoading, inputsPrefix, data, contentTypes, contentTypeEntities, usedContentTypeEntities, availableAudience, additionalFields, contentTypesNameFields, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus, locale, }: {
+declare function NavigationItemForm({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes, contentTypeEntities, usedContentTypeEntities, availableAudience, additionalFields, contentTypesNameFields, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus, locale, readNavigationItemFromLocale, }: {
+    config: any;
+    availableLocale: any;
     isLoading: any;
     inputsPrefix: any;
     data?: {} | undefined;
@@ -15,6 +17,7 @@ declare function NavigationItemForm({ isLoading, inputsPrefix, data, contentType
     usedContentTypesData: any;
     appendLabelPublicationStatus?: (() => string) | undefined;
     locale: any;
+    readNavigationItemFromLocale: any;
 }): JSX.Element;
 declare namespace NavigationItemForm {
     namespace defaultProps {
@@ -25,6 +28,8 @@ declare namespace NavigationItemForm {
         const requestError: null;
     }
     namespace propTypes {
+        export const config: PropTypes.Validator<object>;
+        export const availableLocale: PropTypes.Requireable<(string | null | undefined)[]>;
         export const isLoading: PropTypes.Requireable<boolean>;
         const fieldsToDisable_1: PropTypes.Requireable<any[]>;
         export { fieldsToDisable_1 as fieldsToDisable };
@@ -45,6 +50,7 @@ declare namespace NavigationItemForm {
         export const getContentTypeEntities: PropTypes.Validator<(...args: any[]) => any>;
         export const appendLabelPublicationStatus: PropTypes.Requireable<(...args: any[]) => any>;
         export const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        export const readNavigationItemFromLocale: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -35,6 +35,7 @@ const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const Select_1 = require("@strapi/design-system/Select");
 const Grid_1 = require("@strapi/design-system/Grid");
 const helper_plugin_1 = require("@strapi/helper-plugin");
+const Button_1 = require("@strapi/design-system/Button");
 const NavigationItemPopupFooter_1 = require("../NavigationItemPopup/NavigationItemPopupFooter");
 const enums_1 = require("../../utils/enums");
 const parsers_1 = require("../../utils/parsers");
@@ -42,7 +43,9 @@ const form_1 = require("./utils/form");
 const form_2 = require("../../utils/form");
 const translations_1 = require("../../../../translations");
 const utils_1 = require("../../../../utils");
-const NavigationItemForm = ({ isLoading, inputsPrefix, data = {}, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = () => '', locale, }) => {
+const appendLabelPublicationStatusFallback = () => '';
+const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data = {}, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(isPreloading);
     const [hasBeenInitialized, setInitializedState] = (0, react_1.useState)(false);
     const [hasChanged, setChangedState] = (0, react_1.useState)(false);
     const [contentTypeSearchQuery, setContentTypeSearchQuery] = (0, react_1.useState)(undefined);
@@ -50,6 +53,17 @@ const NavigationItemForm = ({ isLoading, inputsPrefix, data = {}, contentTypes =
     const [form, setFormState] = (0, react_1.useState)({});
     const [formErrors, setFormErrorsState] = (0, react_1.useState)({});
     const { relatedType } = form;
+    const isI18nBootstrapAvailable = !!(config.i18nEnabled && availableLocale && availableLocale.length);
+    const availableLocaleOptions = (0, react_1.useMemo)(() => availableLocale.map((locale) => ({
+        value: locale,
+        label: locale,
+        metadatas: {
+            intlLabel: {
+                id: `i18n.locale.${locale}`,
+                defaultMessage: locale,
+            }
+        },
+    })), [availableLocale]);
     const relatedFieldName = `${inputsPrefix}related`;
     if (!hasBeenInitialized && !(0, lodash_1.isEmpty)(data)) {
         setInitializedState(true);
@@ -242,20 +256,80 @@ const NavigationItemForm = ({ isLoading, inputsPrefix, data = {}, contentTypes =
     }, [isSingleSelected, relatedSelectOptions]);
     (0, react_1.useEffect)(() => {
         const value = relatedType;
-        const fetchContentTypeEntities = async () => {
-            if (value) {
-                const item = (0, lodash_1.find)(contentTypes, (_) => _.uid === value);
-                if (item) {
-                    await getContentTypeEntities({
-                        modelUID: item.uid,
-                        query: contentTypeSearchQuery,
-                        locale,
-                    }, item.plugin);
-                }
+        if (value) {
+            const item = (0, lodash_1.find)(contentTypes, (_) => _.uid === value);
+            if (item) {
+                getContentTypeEntities({
+                    modelUID: item.uid,
+                    query: contentTypeSearchQuery,
+                    locale,
+                }, item.plugin);
             }
-        };
-        fetchContentTypeEntities();
+        }
     }, [relatedType, contentTypeSearchQuery]);
+    const resetCopyItemFormErrors = () => {
+        setFormErrorsState((prevState) => ({
+            ...prevState,
+            [itemLocaleCopyField]: null,
+        }));
+    };
+    const itemLocaleCopyField = `${inputsPrefix}i18n.locale`;
+    const itemLocaleCopyValue = form[itemLocaleCopyField];
+    const onCopyFromLocale = (0, react_1.useCallback)(async (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsLoading(true);
+        resetCopyItemFormErrors();
+        try {
+            const result = await readNavigationItemFromLocale({
+                locale: itemLocaleCopyValue,
+                structureId: data.structureId
+            });
+            if (result.type === utils_1.ResourceState.RESOLVED) {
+                const { value: { related, ...rest } } = result;
+                setFormState((prevState) => ({
+                    ...prevState,
+                    ...rest,
+                }));
+                if (related) {
+                    const relatedType = relatedTypeSelectOptions
+                        .find(({ value }) => value === related.__contentType)?.value;
+                    setFormState((prevState) => ({
+                        ...prevState,
+                        relatedType,
+                        [relatedFieldName]: related.id,
+                    }));
+                }
+            }
+            if (result.type === utils_1.ResourceState.ERROR) {
+                setFormErrorsState((prevState) => ({
+                    ...prevState,
+                    [itemLocaleCopyField]: (0, utils_1.getMessage)(result.errors[0]),
+                }));
+            }
+        }
+        catch (error) {
+            setFormErrorsState((prevState) => ({
+                ...prevState,
+                [itemLocaleCopyField]: (0, utils_1.getMessage)('popup.item.form.i18n.locale.error.generic'),
+            }));
+        }
+        setIsLoading(false);
+    }, [setIsLoading, setFormState, setFormErrorsState]);
+    const onChangeLocaleCopy = (0, react_1.useCallback)(({ target: { value } }) => {
+        resetCopyItemFormErrors();
+        onChange({ target: { name: itemLocaleCopyField, value } });
+    }, [onChange, itemLocaleCopyField]);
+    const itemCopyProps = (0, react_1.useMemo)(() => ({
+        intlLabel: {
+            id: (0, translations_1.getTradId)('popup.item.form.i18n.locale.label'),
+            defaultMessage: 'Copy details from'
+        },
+        placeholder: {
+            id: (0, translations_1.getTradId)('popup.item.form.i18n.locale.placeholder'),
+            defaultMessage: 'locale'
+        },
+    }), [translations_1.getTradId]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(formik_1.Formik, null,
             react_1.default.createElement(helper_plugin_1.Form, null,
@@ -321,7 +395,12 @@ const NavigationItemForm = ({ isLoading, inputsPrefix, data = {}, contentTypes =
                         additionalFields.includes(enums_1.navigationItemAdditionalFields.AUDIENCE) && (react_1.default.createElement(Grid_1.GridItem, { key: `${inputsPrefix}audience`, col: 6, lg: 12 },
                             react_1.default.createElement(Select_1.Select, { id: `${inputsPrefix}audience`, placeholder: (0, utils_1.getMessage)('popup.item.form.audience.placeholder'), label: (0, utils_1.getMessage)('popup.item.form.audience.label'), onChange: onAudienceChange, value: audience, hint: !isLoading && (0, lodash_1.isEmpty)(audienceOptions)
                                     ? (0, utils_1.getMessage)('popup.item.form.audience.empty', 'There are no more audiences')
-                                    : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label))))))))),
+                                    : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))))),
+                    isI18nBootstrapAvailable ? (react_1.default.createElement(Grid_1.Grid, { gap: 5, paddingTop: 5 },
+                        react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formErrors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading })),
+                        react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12, paddingTop: 6 },
+                            react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: onCopyFromLocale, disabled: isLoading || !itemLocaleCopyValue }, (0, utils_1.getMessage)('popup.item.form.i18n.locale.button'))))) : null))),
         react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled })));
 };
 NavigationItemForm.defaultProps = {
@@ -332,6 +411,8 @@ NavigationItemForm.defaultProps = {
     requestError: null,
 };
 NavigationItemForm.propTypes = {
+    config: prop_types_1.default.object.isRequired,
+    availableLocale: prop_types_1.default.arrayOf(prop_types_1.default.string),
     isLoading: prop_types_1.default.bool,
     fieldsToDisable: prop_types_1.default.array,
     formErrors: prop_types_1.default.object.isRequired,
@@ -347,6 +428,7 @@ NavigationItemForm.propTypes = {
     getContentTypeEntities: prop_types_1.default.func.isRequired,
     appendLabelPublicationStatus: prop_types_1.default.func,
     onCancel: prop_types_1.default.func,
+    readNavigationItemFromLocale: prop_types_1.default.func.isRequired,
 };
 exports.default = NavigationItemForm;
 //# sourceMappingURL=index.js.map

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

@@ -32,6 +32,12 @@ const lodash_1 = require("lodash");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const enums_1 = require("../../../utils/enums");
 const pluginId_1 = __importDefault(require("../../../../../pluginId"));
+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,})/,
+];
 exports.form = {
     fieldsToDisable: [],
     fieldsToOmit: [],
@@ -57,10 +63,7 @@ exports.form = {
                 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`,
-                }),
+                    .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(),

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";