strapi-plugin-navigation 2.2.3 → 2.2.5

package/README.md

@@ -118,7 +118,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.2.0 (recently tested)
+- Strapi v4.9.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).
@@ -149,6 +149,9 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 > *Note v2.0.3 and newer only*
 > Changing this file will not automatically change plugin configuration. To synchronize plugin's config with plugins.js file, it is necessary to restore configuration through the settings page 
 
+> *Note for newer than v2.2.0*
+> `slugify` as been removed. **THIS A BREAKING CHANGE**
+
 ```js
     module.exports = ({ env }) => ({
         // ...
@@ -160,13 +163,11 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
                 contentTypesNameFields: {
                     'api::page.page': ['title']
                 },
+                pathDefaultFields: {
+                    'api::page.page': ['slug']
+                },
                 allowedLevels: 2,
                 gql: {...},
-                slugify: {
-                  customReplacements: [
-                    ["🤔", "thinking"],
-                  ],
-                }
             }
         }
     });
@@ -177,6 +178,7 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
 - `allowedLevels` - Maximum level for which you're able to mark item as "Menu attached"
 - `contentTypes` - UIDs of related content types
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
+- `pathDefaultFields` - The attribute to copy the default path from per content type. Syntax: `'api::<collection name>.<content type name>': ['url_slug', 'path']`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `i18nEnabled` - should you want to manage multi-locale content via navigation set this value `Enabled`. More **[ here ](#i18n-internationalization)**
 - `cascadeMenuAttached` - If you don't want "Menu attached" to cascade on child items set this value `Disabled`.
@@ -632,6 +634,33 @@ module.exports = {
 
 If you already got it, make sure that `navigation` plugin is inserted before `graphql`. That should do the job.
 
+### Slug generation
+
+#### Customisation
+
+Slug generation is available as a controller and service. If you have custom requirements outside of what this plugin provides you can add your own logic with [plugins extensions](https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html).
+
+For example:
+
+```ts
+// path: ./src/index.js
+
+module.exports = {
+  // ...
+  bootstrap({ strapi }) {
+    const navigationCommonService = strapi.plugin("navigation").service("common");
+    const originalGetSlug = navigationCommonService.getSlug;
+    const preprocess = (q) => {
+      return q + "suffix";
+    };
+
+    navigationCommonService.getSlug = (query) => {
+      return originalGetSlug(preprocess(query));
+    };
+  },
+};
+```
+
 ## 🤝 Contributing
 
 <div>

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

@@ -36,14 +36,14 @@ const DEFAULT_STRING_VALUE = "";
 const handlerFactory = ({ field, prop, onChange }) => ({ target }) => {
     onChange(field.name, target[prop]);
 };
-const AdditionalFieldInput = ({ field, isLoading, onChange, value, error }) => {
+const AdditionalFieldInput = ({ field, isLoading, onChange, value, disabled, error }) => {
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const defaultInputProps = (0, react_1.useMemo)(() => ({
         id: field.name,
         name: field.name,
         label: field.label,
-        disabled: isLoading,
+        disabled: isLoading || disabled,
         error: error && formatMessage(error),
     }), [field, isLoading, error]);
     const handleBoolean = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "checked" }), [onChange, field]);

package/admin/src/components/AdditionalFieldInput/types.d.ts

@@ -5,6 +5,7 @@ export declare type AdditionalFieldInputProps = {
     isLoading: boolean;
     onChange: (name: string, value: string) => void;
     value: string | boolean | string[] | null;
+    disabled: boolean;
     error: MessageDescriptor | null;
 };
 export declare type TargetProp = "value" | "checked";

package/admin/src/components/Item/ItemCardHeader/icons.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 export declare const pencilIcon: JSX.Element;
 export declare const refreshIcon: JSX.Element;
 export declare const trashIcon: JSX.Element;
+export declare const eyeIcon: JSX.Element;
 //# sourceMappingURL=icons.d.ts.map

package/admin/src/components/Item/ItemCardHeader/icons.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.trashIcon = exports.refreshIcon = exports.pencilIcon = void 0;
+exports.eyeIcon = exports.trashIcon = exports.refreshIcon = exports.pencilIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const icons_1 = require("@strapi/icons");
 exports.pencilIcon = react_1.default.createElement(icons_1.Pencil, null);
 exports.refreshIcon = react_1.default.createElement(icons_1.Refresh, null);
 exports.trashIcon = react_1.default.createElement(icons_1.Trash, null);
+exports.eyeIcon = react_1.default.createElement(icons_1.Eye, null);
 //# sourceMappingURL=icons.js.map

package/admin/src/components/Item/ItemCardHeader/index.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     path: string;
     icon: ToBeFixed;
     removed: boolean;
+    canUpdate: boolean;
     onItemRemove: VoidEffect;
     onItemEdit: VoidEffect;
     onItemRestore: VoidEffect;

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

@@ -14,18 +14,20 @@ const ItemCardBadge_1 = __importDefault(require("../ItemCardBadge"));
 const utils_1 = require("../../../utils");
 const icons_1 = require("./icons");
 const wrapperStyle = { zIndex: 2 };
-const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => (react_1.default.createElement(Wrapper_1.default, null,
+const pathWrapperStyle = { maxWidth: "425px" };
+const ItemCardHeader = ({ title, path, icon, removed, canUpdate, onItemRemove, onItemEdit, onItemRestore, dragRef }) => (react_1.default.createElement(Wrapper_1.default, null,
     react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
-        react_1.default.createElement(DragButton_1.default, { ref: dragRef }),
+        canUpdate && (react_1.default.createElement(DragButton_1.default, { ref: dragRef })),
         react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold" }, title),
-        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: 'neutral500' }, path),
-        react_1.default.createElement(Icon_1.Icon, { as: icon })),
+        react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: 'neutral500', ellipsis: true, style: pathWrapperStyle }, path),
+        react_1.default.createElement(Flex_1.Flex, null,
+            react_1.default.createElement(Icon_1.Icon, { as: icon }))),
     react_1.default.createElement(Flex_1.Flex, { alignItems: "center", style: wrapperStyle },
         removed &&
             (react_1.default.createElement(ItemCardBadge_1.default, { borderColor: "danger200", backgroundColor: "danger100", textColor: "danger600" }, (0, utils_1.getMessage)("components.navigationItem.badge.removed"))),
-        react_1.default.createElement(IconButton_1.IconButton, { disabled: removed, onClick: onItemEdit, label: "Edit", icon: icons_1.pencilIcon }),
-        removed ?
-            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRestore, label: "Restore", icon: icons_1.refreshIcon }) :
-            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRemove, label: "Remove", icon: icons_1.trashIcon }))));
+        react_1.default.createElement(IconButton_1.IconButton, { disabled: removed, onClick: onItemEdit, label: (0, utils_1.getMessage)(`components.navigationItem.action.${canUpdate ? 'edit' : 'view'}`, canUpdate ? 'Edit' : 'View'), icon: canUpdate ? icons_1.pencilIcon : icons_1.eyeIcon }),
+        canUpdate && (react_1.default.createElement(react_1.default.Fragment, null, removed ?
+            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRestore, label: (0, utils_1.getMessage)('components.navigationItem.action.restore', "Restore"), icon: icons_1.refreshIcon }) :
+            react_1.default.createElement(IconButton_1.IconButton, { onClick: onItemRemove, label: (0, utils_1.getMessage)('components.navigationItem.action.remove', "Remove"), icon: icons_1.trashIcon }))))));
 exports.default = ItemCardHeader;
 //# sourceMappingURL=index.js.map

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

@@ -46,7 +46,7 @@ const ItemCardRemovedOverlay_1 = require("./ItemCardRemovedOverlay");
 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 { item, isLast = false, level = 0, levelPath = '', allowedLevels, relatedRef, isParentAttachedToMenu, onItemLevelAdd, onItemRemove, onItemRestore, onItemEdit, onItemReOrder, onItemToggleCollapse, error, displayChildren, config = {}, permissions = {}, } = props;
     const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], } = item;
     const { contentTypes = [], contentTypesNameFields } = config;
     const isExternal = type === utils_1.navigationItemType.EXTERNAL;
@@ -60,6 +60,7 @@ const Item = (props) => {
     const relatedItemLabel = !isExternal ? (0, parsers_1.extractRelatedItemLabel)(relatedRef, contentTypesNameFields, { contentTypes }) : '';
     const relatedTypeLabel = relatedRef?.labelSingular;
     const relatedBadgeColor = isPublished ? 'success' : 'secondary';
+    const { canUpdate } = permissions;
     const dragRef = (0, react_1.useRef)(null);
     const dropRef = (0, react_1.useRef)(null);
     const previewRef = (0, react_1.useRef)(null);
@@ -110,7 +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]);
+    const onNewItemClick = (0, react_1.useCallback)((event) => canUpdate && onItemLevelAdd(event, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, `${structureId}.${items.length}`), [viewId, isNextMenuAllowedLevel, absolutePath, menuAttached, structureId, items, canUpdate]);
     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)),
@@ -120,14 +121,14 @@ const Item = (props) => {
                             ...item,
                             isMenuAllowedLevel,
                             isParentAttachedToMenu,
-                        }, levelPath, isParentAttachedToMenu), onItemRestore: () => onItemRestore(item), dragRef: refs.dragRef, removed: removed })),
+                        }, levelPath, isParentAttachedToMenu), onItemRestore: () => onItemRestore(item), dragRef: refs.dragRef, removed: removed, canUpdate: canUpdate })),
                 react_1.default.createElement(Divider_1.Divider, null),
                 !isExternal && (react_1.default.createElement(Card_1.CardBody, { style: { padding: '8px' } },
                     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: onNewItemClick },
-                                react_1.default.createElement(Typography_1.Typography, { variant: "pi", fontWeight: "bold", textColor: removed ? "neutral600" : "primary600" }, (0, utils_1.getMessage)("components.navigationItem.action.newItem")))),
+                            canUpdate && (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'}` }))),
                             react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: 'neutral600' },
@@ -135,7 +136,7 @@ const Item = (props) => {
                                 "\u00A0/\u00A0"),
                             react_1.default.createElement(Typography_1.Typography, { variant: "omega", textColor: 'neutral800' }, relatedItemLabel),
                             react_1.default.createElement(Link_1.Link, { to: `/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`, endIcon: react_1.default.createElement(icons_1.ArrowRight, null) }, "\u00A0")))))))),
-        hasChildren && !removed && !collapsed && react_1.default.createElement(NavigationItemList_1.default, { onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemRestore: onItemRestore, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, error: error, allowedLevels: allowedLevels, isParentAttachedToMenu: menuAttached, items: item.items, level: level + 1, levelPath: absolutePath, contentTypes: contentTypes, contentTypesNameFields: contentTypesNameFields })));
+        hasChildren && !removed && !collapsed && react_1.default.createElement(NavigationItemList_1.default, { onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemRestore: onItemRestore, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, error: error, allowedLevels: allowedLevels, isParentAttachedToMenu: menuAttached, items: item.items, level: level + 1, levelPath: absolutePath, contentTypes: contentTypes, contentTypesNameFields: contentTypesNameFields, permissions: permissions })));
 };
 Item.propTypes = {
     item: prop_types_1.default.shape({

package/admin/src/components/NavigationItemList/index.d.ts

@@ -1,5 +1,5 @@
 export default List;
-declare function List({ allowedLevels, error, isParentAttachedToMenu, items, level, levelPath, onItemEdit, onItemLevelAdd, onItemRemove, onItemRestore, onItemReOrder, onItemToggleCollapse, displayFlat, contentTypes, contentTypesNameFields, }: {
+declare function List({ allowedLevels, error, isParentAttachedToMenu, items, level, levelPath, onItemEdit, onItemLevelAdd, onItemRemove, onItemRestore, onItemReOrder, onItemToggleCollapse, displayFlat, contentTypes, contentTypesNameFields, permissions, }: {
     allowedLevels: any;
     error: any;
     isParentAttachedToMenu?: boolean | undefined;
@@ -15,6 +15,7 @@ declare function List({ allowedLevels, error, isParentAttachedToMenu, items, lev
     displayFlat: any;
     contentTypes: any;
     contentTypesNameFields: any;
+    permissions: any;
 }): JSX.Element;
 declare namespace List {
     namespace propTypes {

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

@@ -7,12 +7,12 @@ const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const Item_1 = __importDefault(require("../Item"));
 const Wrapper_1 = __importDefault(require("./Wrapper"));
-const List = ({ allowedLevels, error, isParentAttachedToMenu = false, items, level = 0, levelPath = '', onItemEdit, onItemLevelAdd, onItemRemove, onItemRestore, onItemReOrder, onItemToggleCollapse, displayFlat, contentTypes, contentTypesNameFields, }) => (react_1.default.createElement(Wrapper_1.default, { level: level }, items.map((item, n) => {
+const List = ({ allowedLevels, error, isParentAttachedToMenu = false, items, level = 0, levelPath = '', onItemEdit, onItemLevelAdd, onItemRemove, onItemRestore, onItemReOrder, onItemToggleCollapse, displayFlat, contentTypes, contentTypesNameFields, permissions, }) => (react_1.default.createElement(Wrapper_1.default, { level: level }, items.map((item, n) => {
     const { relatedRef, ...itemProps } = item;
     return (react_1.default.createElement(Item_1.default, { key: `list-item-${item.viewId || n}`, item: itemProps, isLast: n === items.length - 1, relatedRef: relatedRef, level: level, levelPath: levelPath, isParentAttachedToMenu: isParentAttachedToMenu, allowedLevels: allowedLevels, onItemRestore: onItemRestore, onItemLevelAdd: onItemLevelAdd, onItemRemove: onItemRemove, onItemEdit: onItemEdit, onItemReOrder: onItemReOrder, onItemToggleCollapse: onItemToggleCollapse, error: error, displayChildren: displayFlat, config: {
             contentTypes,
             contentTypesNameFields
-        } }));
+        }, permissions: permissions }));
 })));
 List.propTypes = {
     allowedLevels: prop_types_1.default.number,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useNavigationManager: () => {
     navigationManagerModal: JSX.Element | null;
     openNavigationManagerModal: () => void;

package/admin/src/index.js

@@ -50,7 +50,7 @@ exports.default = {
                     const component = await Promise.resolve().then(() => __importStar(require('./pages/SettingsPage')));
                     return component;
                 },
-                permissions: permissions_1.default.access,
+                permissions: permissions_1.default.settings,
             }
         ]);
         app.addMenuLink({

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

@@ -287,6 +287,7 @@ const DataManagerProvider = ({ children }) => {
         method: "DELETE",
         signal,
     });
+    const slugify = (query) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/slug?q=${query}`, { method: "GET", signal });
     const hardReset = () => getDataRef.current();
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
@@ -316,6 +317,7 @@ const DataManagerProvider = ({ children }) => {
             readNavigationItemFromLocale,
             handleNavigationsDeletion,
             hardReset,
+            slugify,
         } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {

package/admin/src/pages/DataManagerProvider/reducer.d.ts

@@ -1,5 +1,5 @@
 export default reducer;
-declare function reducer(state: any, action: any): any;
+declare function reducer(state: any, action: any): (base?: ((draftState: any) => any) | undefined, ...args: unknown[]) => ((draftState: any) => any) | Promise<(draftState: any) => any>;
 export namespace initialState {
     const items: never[];
     const activeItem: undefined;

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

@@ -0,0 +1,3 @@
+declare const NoAcccessPage: () => JSX.Element;
+export default NoAcccessPage;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Main_1 = require("@strapi/design-system/Main");
+const Layout_1 = require("@strapi/design-system/Layout");
+const EmptyStateLayout_1 = require("@strapi/design-system/EmptyStateLayout");
+const icons_1 = require("@strapi/icons");
+const react_intl_1 = require("react-intl");
+const NoAcccessPage = () => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    (0, helper_plugin_1.useFocusWhenNavigate)();
+    return (react_1.default.createElement(Main_1.Main, { labelledBy: "title" },
+        react_1.default.createElement(Layout_1.HeaderLayout, { id: "title", title: formatMessage({
+                id: 'page.auth.noAccess',
+                defaultMessage: 'No access',
+            }) }),
+        react_1.default.createElement(Layout_1.ContentLayout, null,
+            react_1.default.createElement(EmptyStateLayout_1.EmptyStateLayout, { action: react_1.default.createElement(helper_plugin_1.LinkButton, { variant: "secondary", endIcon: react_1.default.createElement(icons_1.ArrowRight, null), to: "/" }, formatMessage({
+                    id: 'components.notAccessPage.back',
+                    defaultMessage: 'Back to homepage',
+                })), content: formatMessage({
+                    id: 'page.auth.not.allowed',
+                    defaultMessage: "Oops! It seems like You do not have access to this page...",
+                }), hasRadius: true, icon: react_1.default.createElement(icons_1.EmptyPictures, { width: "10rem" }), shadow: "tableShadow" }))));
+};
+exports.default = NoAcccessPage;
+//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const SettingsPage: () => JSX.Element;
 export default SettingsPage;
 //# sourceMappingURL=index.d.ts.map

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

@@ -55,6 +55,8 @@ const styles_1 = require("../../components/Alert/styles");
 const DisableI18nModal_1 = require("./components/DisableI18nModal");
 const CustomFieldModal_1 = __importDefault(require("./components/CustomFieldModal"));
 const CustomFieldTable_1 = __importDefault(require("./components/CustomFieldTable"));
+const permissions_2 = __importDefault(require("../../permissions"));
+const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
 const RESTART_NOT_REQUIRED = { required: false };
 const RESTART_REQUIRED = { required: true, reasons: [] };
 const RELATION_ATTRIBUTE_TYPES = ['relation', 'media', 'component'];
@@ -77,6 +79,10 @@ const SettingsPage = () => {
     const [contentTypeExpanded, setContentTypeExpanded] = (0, react_1.useState)(undefined);
     const { data: navigationConfigData, isLoading: isConfigLoading, error: configErr, submitMutation, restoreMutation, restartMutation } = (0, useNavigationConfig_1.default)();
     const { data: allContentTypesData, isLoading: isContentTypesLoading, error: contentTypesErr } = (0, useAllContentTypes_1.default)();
+    const viewPermissions = (0, react_1.useMemo)(() => ({
+        settings: permissions_2.default.settings
+    }), []);
+    const { isLoading: isLoadingForPermissions, allowedActions: { canManageSettings, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
     const isLoading = isConfigLoading || isContentTypesLoading;
     const isError = configErr || contentTypesErr;
     const configContentTypes = navigationConfigData?.contentTypes || [];
@@ -198,6 +204,9 @@ const SettingsPage = () => {
         const filteredFields = customFields.filter(f => f.name !== field.name);
         setCustomFields([...filteredFields, updatedField]);
     };
+    if (!(isLoadingForPermissions || canManageSettings)) {
+        return (react_1.default.createElement(NoAccessPage_1.default, null));
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(helper_plugin_1.SettingsPageTitle, { name: (0, utils_2.getMessage)('Settings.email.plugin.title', 'Configuration') }),
         react_1.default.createElement(Main_1.Main, { labelledBy: "title" },

package/admin/src/pages/SettingsPage/types.d.ts

@@ -19,7 +19,7 @@ export declare type StrapiContentTypeSchema = StrapiContentTypeFullSchema & {
 export declare type PreparePayload = (payload: {
     form: RawPayload;
     pruneObsoleteI18nNavigations: boolean;
-}) => Omit<NavigationPluginConfig, "slugify">;
+}) => NavigationPluginConfig;
 export declare type OnSave = Effect<RawPayload>;
 export declare type OnPopupClose = Effect<boolean>;
 export declare type HandleSetContentTypeExpanded = Effect<string | undefined>;

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

@@ -1,5 +1,5 @@
 export default NavigationHeader;
-declare function NavigationHeader({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, }: {
+declare function NavigationHeader({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, permissions, }: {
     activeNavigation: any;
     availableNavigations: any;
     structureHasErrors: any;
@@ -8,5 +8,6 @@ declare function NavigationHeader({ activeNavigation, availableNavigations, stru
     handleLocalizationSelection: any;
     handleSave: any;
     config: any;
+    permissions?: {} | undefined;
 }): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -46,7 +46,7 @@ const pickDefaultLocaleNavigation = ({ activeNavigation, config }) => config.i18
             : activeNavigation?.localizations.find(({ localeCode }) => localeCode === config.defaultLocale)
         : null
     : activeNavigation;
-const NavigationHeader = ({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, }) => {
+const NavigationHeader = ({ activeNavigation, availableNavigations, structureHasErrors, structureHasChanged, handleChangeSelection, handleLocalizationSelection, handleSave, config, permissions = {}, }) => {
     const { formatMessage } = (0, react_intl_1.useIntl)();
     const allLocaleVersions = (0, react_1.useMemo)(() => activeNavigation?.localizations.length && config.i18nEnabled
         ? (0, lodash_1.uniqBy)([activeNavigation, ...(activeNavigation.localizations ?? [])].sort((a, b) => a.localeCode.localeCompare(b.localeCode)), 'id')
@@ -54,21 +54,22 @@ const NavigationHeader = ({ activeNavigation, availableNavigations, structureHas
     const hasLocalizations = config.i18nEnabled && allLocaleVersions.length;
     const passedActiveNavigation = pickDefaultLocaleNavigation({ activeNavigation, config });
     const { closeNavigationManagerModal, openNavigationManagerModal, navigationManagerModal } = (0, useNavigationManager_1.useNavigationManager)();
+    const { canUpdate } = permissions;
     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: "27vw", marginRight: "8px" },
+            react_1.default.createElement(Box_1.Box, { marginRight: "8px" },
                 react_1.default.createElement(Grid_1.Grid, { gap: 4 },
                     !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 },
+                    canUpdate && (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: canUpdate ? 4 : 10 },
                         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: 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", fullWidth: true, size: "S" }, formatMessage((0, translations_1.getTrad)('submit.cta.save')))))),
-            navigationManagerModal), title: formatMessage({
+                    canUpdate && (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'))))))),
+            canUpdate && navigationManagerModal), title: formatMessage({
             id: (0, translations_1.getTrad)('header.title'),
             defaultMessage: 'UI Navigation',
         }), subtitle: formatMessage({

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

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
-const slugify_1 = __importDefault(require("@sindresorhus/slugify"));
+const fp_1 = require("lodash/fp");
 const formik_1 = require("formik");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const Select_1 = require("@strapi/design-system/Select");
@@ -44,17 +44,17 @@ const translations_1 = require("../../../../translations");
 const types_1 = require("../../../../../../types");
 const AdditionalFieldInput_1 = __importDefault(require("../../../../components/AdditionalFieldInput"));
 const utils_2 = require("../../../../utils");
-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 NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, slugify, permissions = {}, }) => {
     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);
     const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = (0, react_1.useState)(undefined);
+    const { canUpdate } = permissions;
     const formik = (0, formik_1.useFormik)({
         initialValues: formDefinition.defaultValues,
-        onSubmit: (payload) => onSubmit(sanitizePayload(payload, data)),
-        validate: (values) => (0, form_1.checkFormValidity)(sanitizePayload(values, {}), formDefinition.schemaFactory(isSingleSelected, additionalFields)),
+        onSubmit: loadingAware(async (payload) => onSubmit(await sanitizePayload(slugify, payload, data)), setIsLoading),
+        validate: loadingAware(async (values) => (0, form_1.checkFormValidity)(await sanitizePayload(slugify, values, {}), formDefinition.schemaFactory(isSingleSelected, additionalFields)), setIsLoading),
         validateOnChange: false,
     });
     const initialRelatedTypeSelected = (0, lodash_1.get)(data, 'relatedType.value');
@@ -120,7 +120,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             }, contentTypesNameFields, { contentTypes });
         }
     }, [contentTypeEntities, contentTypesNameFields, contentTypes]);
-    const sanitizePayload = (payload, data) => {
+    const sanitizePayload = async (slugify, payload, data) => {
         const { related, relatedType, menuAttached, type, ...purePayload } = payload;
         const relatedId = related;
         const singleRelatedItem = isSingleSelected ? (0, lodash_1.first)(contentTypeEntities) : undefined;
@@ -128,6 +128,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         const title = !!payload.title?.trim()
             ? payload.title
             : getDefaultTitle(related, relatedType, isSingleSelected);
+        const uiRouterKey = await generateUiRouterKey(slugify, title, relatedId, relatedCollectionType);
         return {
             ...data,
             ...purePayload,
@@ -140,7 +141,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             relatedType: type === utils_1.navigationItemType.INTERNAL ? relatedCollectionType : undefined,
             isSingle: isSingleSelected,
             singleRelatedItem,
-            uiRouterKey: generateUiRouterKey(title, relatedId, relatedCollectionType),
+            uiRouterKey,
         };
     };
     const onChange = ({ name, value }) => {
@@ -183,17 +184,16 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             value,
         });
     };
-    const generateUiRouterKey = (title, related, relatedType) => {
-        const { slugify: customSlugifyConfig } = config;
+    const generateUiRouterKey = async (slugify, title, related, relatedType) => {
         if (title) {
-            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? (0, slugify_1.default)(title, customSlugifyConfig).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? await slugify(title).then((0, fp_1.prop)("slug")) : undefined;
         }
         else if (related) {
             const relationTitle = (0, parsers_1.extractRelatedItemLabel)({
                 ...contentTypeEntities.find(_ => _.id === related),
                 __collectionUid: relatedType
             }, contentTypesNameFields, { contentTypes });
-            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? (0, slugify_1.default)(relationTitle, customSlugifyConfig).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? await slugify(relationTitle).then((0, fp_1.prop)("slug")) : undefined;
         }
         return undefined;
     };
@@ -236,7 +236,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     }), item => item.metadatas.intlLabel.id);
     const isExternal = formik.values.type === utils_1.navigationItemType.EXTERNAL;
     const pathSourceName = isExternal ? 'externalPath' : 'path';
-    const submitDisabled = (formik.values.type === utils_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)(formik.values.related));
+    const submitDisabled = (formik.values.type === utils_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)(formik.values.related)) || isLoading;
     const debouncedSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(nextValue => setContentTypeSearchQuery(nextValue), 500), []);
     const debounceContentTypeSearchQuery = (value) => {
         setContentTypeSearchInputValue(value);
@@ -381,20 +381,20 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             react_1.default.createElement(ModalLayout_1.ModalBody, null,
                 react_1.default.createElement(Grid_1.Grid, { gap: 5 },
                     react_1.default.createElement(Grid_1.GridItem, { key: "title", col: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { autoFocused: true, intlLabel: (0, translations_1.getTrad)('popup.item.form.title.label', 'Title'), name: "title", placeholder: (0, translations_1.getTrad)("e.g. Blog", 'e.g. Blog'), description: (0, translations_1.getTrad)('popup.item.form.title.placeholder', 'e.g. Blog'), type: "text", error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { autoFocused: true, intlLabel: (0, translations_1.getTrad)('popup.item.form.title.label', 'Title'), name: "title", placeholder: (0, translations_1.getTrad)("e.g. Blog", 'e.g. Blog'), description: (0, translations_1.getTrad)('popup.item.form.title.placeholder', 'e.g. Blog'), type: "text", disabled: !canUpdate, error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
                     react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 4, lg: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.type.label', 'Internal link'), name: "type", options: navigationItemTypeOptions, type: "select", error: formik.errors.type, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.type })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.type.label', 'Internal link'), name: "type", options: navigationItemTypeOptions, type: "select", disabled: !canUpdate, error: formik.errors.type, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.type })),
                     react_1.default.createElement(Grid_1.GridItem, { key: "menuAttached", col: 4, lg: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.menuAttached.label', 'MenuAttached'), name: "menuAttached", type: "bool", error: formik.errors.menuAttached, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.menuAttached, disabled: config.cascadeMenuAttached ? !(data.isMenuAllowedLevel && data.parentAttachedToMenu) : false })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.menuAttached.label', 'MenuAttached'), name: "menuAttached", type: "bool", error: formik.errors.menuAttached, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.menuAttached, disabled: !canUpdate || (config.cascadeMenuAttached ? !(data.isMenuAllowedLevel && data.parentAttachedToMenu) : false) })),
                     react_1.default.createElement(Grid_1.GridItem, { key: "path", col: 12 },
-                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.label`, 'Path'), name: pathSourceName, placeholder: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.placeholder`, 'e.g. Blog'), type: "text", error: formik.errors[pathSourceName], onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values[pathSourceName], description: generatePreviewPath() })),
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.label`, 'Path'), name: pathSourceName, placeholder: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.placeholder`, 'e.g. Blog'), type: "text", disabled: !canUpdate, error: formik.errors[pathSourceName], onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values[pathSourceName], description: generatePreviewPath() })),
                     formik.values.type === utils_1.navigationItemType.INTERNAL && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.relatedType.label', 'Related Type'), placeholder: (0, translations_1.getTrad)('popup.item.form.relatedType.placeholder', 'Related Type'), name: "relatedType", error: formik.errors.relatedType, onChange: onChangeRelatedType, options: relatedTypeSelectOptions, value: formik.values.relatedType, disabled: isLoading || (0, lodash_1.isEmpty)(relatedTypeSelectOptions), description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.relatedType.label', 'Related Type'), placeholder: (0, translations_1.getTrad)('popup.item.form.relatedType.placeholder', 'Related Type'), name: "relatedType", error: formik.errors.relatedType, onChange: onChangeRelatedType, options: relatedTypeSelectOptions, value: formik.values.relatedType, disabled: isLoading || (0, lodash_1.isEmpty)(relatedTypeSelectOptions) || !canUpdate, description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
                                     ? (0, translations_1.getTrad)('popup.item.form.relatedType.empty', 'There are no more content types')
                                     : undefined })),
                         formik.values.relatedType && !isSingleSelected && (react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), placeholder: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), name: "related", error: formik.errors.related, onChange: ({ target: { name, value } }) => onChange({ name, value }), onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, options: relatedSelectOptions, value: formik.values.related, disabled: isLoading || thereAreNoMoreContentTypes, description: !isLoading && thereAreNoMoreContentTypes
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), placeholder: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), name: "related", error: formik.errors.related, onChange: ({ target: { name, value } }) => onChange({ name, value }), onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, options: relatedSelectOptions, value: formik.values.related, disabled: isLoading || thereAreNoMoreContentTypes || !canUpdate, description: !isLoading && thereAreNoMoreContentTypes
                                     ? {
                                         id: (0, translations_1.getTradId)('popup.item.form.related.empty'),
                                         defaultMessage: 'There are no more entities',
@@ -406,19 +406,31 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                             return (react_1.default.createElement(Grid_1.GridItem, { key: "audience", col: 6, lg: 12 },
                                 react_1.default.createElement(Select_1.Select, { id: "audience", placeholder: (0, utils_2.getMessage)('popup.item.form.audience.placeholder'), label: (0, utils_2.getMessage)('popup.item.form.audience.label'), onChange: onAudienceChange, value: formik.values.audience, hint: !isLoading && (0, lodash_1.isEmpty)(audienceOptions)
                                         ? (0, utils_2.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) || !canUpdate }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))));
                         }
                         else {
                             return (react_1.default.createElement(Grid_1.GridItem, { key: additionalField.name, col: 6, lg: 12 },
-                                react_1.default.createElement(AdditionalFieldInput_1.default, { field: additionalField, isLoading: isLoading, onChange: onAdditionalFieldChange, value: (0, lodash_1.get)(formik.values, `additionalFields.${additionalField.name}`, null), error: (0, lodash_1.get)(formik.errors, `additionalFields.${additionalField.name}`, null) })));
+                                react_1.default.createElement(AdditionalFieldInput_1.default, { field: additionalField, isLoading: isLoading, onChange: onAdditionalFieldChange, value: (0, lodash_1.get)(formik.values, `additionalFields.${additionalField.name}`, null), disabled: !canUpdate, error: (0, lodash_1.get)(formik.errors, `additionalFields.${additionalField.name}`, null) })));
                         }
                     })),
                 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)(formik.errors, 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_2.getMessage)('popup.item.form.i18n.locale.button'))))) : null)),
-        react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: formik.handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled })));
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formik.errors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading || !canUpdate })),
+                    canUpdate && (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_2.getMessage)('popup.item.form.i18n.locale.button')))))) : null)),
+        react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: formik.handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled, canUpdate: canUpdate })));
+};
+const appendLabelPublicationStatusFallback = () => "";
+const loadingAware = (action, isLoading) => async (input) => {
+    try {
+        isLoading(true);
+        return await action(input);
+    }
+    catch (_) {
+    }
+    finally {
+        isLoading(false);
+    }
 };
 exports.default = NavigationItemForm;
 //# sourceMappingURL=index.js.map