strapi-plugin-navigation 2.2.4 → 2.2.6

package/README.md

@@ -45,12 +45,14 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
    - [Plugin file](#in-v202-and-older--default-configuration-state-for-v203-and-newer)
 5. [🔧 GraphQL Configuration](#-gql-configuration)
 6. [🌍 i18n Internationalization](#-i18n-internationalization)
-7. [🕸️ Public API specification](#%EF%B8%8F-public-api-specification)
+7. [👤 RBAC](#-rbac)
+8. [🔐 Authorization strategy](#-authorization-strategy)
+9. [🕸️ Public API specification](#%EF%B8%8F-public-api-specification)
    - [REST API](#rest-api) 
    - [GraphQL API](#graphql-api)
-8. [💬 FAQ](#-faq)
-10. [🤝 Contributing](#-contributing)
-11. [👨‍💻 Community support](#-community-support)
+10. [💬 FAQ](#-faq)
+11. [🤝 Contributing](#-contributing)
+12. [👨‍💻 Community support](#-community-support)
 
 ## ✨ Features
 
@@ -118,7 +120,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.6.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).
@@ -163,6 +165,9 @@ 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: {...},
             }
@@ -175,6 +180,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`.
@@ -249,12 +255,35 @@ Of course if you know that `fr` version is present at id `2` you can just query
 If feature is enabled GQL render navigation query is expanded to handle `locale` param(it will work the same as regular requests). Checkout schema provided by GraphQL plugin.
 
 ## 👤 RBAC
-Plugin provides granular permissions based on Strapi RBAC functionality.
+Plugin provides granular permissions based on **Strapi RBAC** functionality within the editorial interface &amp; **Admin API**. Those settings are editable via the _Setings_ -> _Administration Panel_ -> _Roles_.
 
-### Mandatory permissions
 For any role different than **Super Admin**, to access the **Navigation panel** you must set following permissions:
+
+### Mandatory permissions
 - _Plugins_ -> _Navigation_ -> _Read_ - gives you the access to **Navigation Panel**
 
+### Other permissions
+- _Plugins_ -> _Navigation_ -> _Update_ - with this permission user is able to change Navigation structure
+- _Plugins_ -> _Navigation_ -> _Settings_ - special permission for users that should be able to change plugin settings
+
+## 🔐 Authorization strategy
+Is applied for **Public API** both for REST and GraphQL. You can manage is by two different ways. Those settings are editable via the _Setings_ -> _Users &amp; Permissions Plugin_ -> _Roles_. 
+
+## User based
+- _Public_ - as per description it's default role for any not authenticated user. By enabling **Public API** of the plugin here you're making it **fully public**, without **any permissions check**.
+- _Authenticated_ - as per description this is default role for Strapi Users. If you enable **Public API** here, for any call made you must use the User authentication token as `Bearer <token>`.
+
+## Token based
+- _Full Access_ - gives full access to every Strapi Content API including our plugin endpoints as well.
+- _Custom_ - granural access management to every Strapi Content API endpoints as well as plugin **Public API** - _(recomended approach)_
+
+> _Note: Token usage &amp Read-Only tokens_
+> If you're aiming to use token based approach, for every call you must provide proper token in headers as `Bearer <token>`.
+>
+> Important: As the Read-Only tokens are dedicated to support just `find` and `findAll` endpoints from Strapi Content API, they are not covering access to plugin **Public API** `render` and `renderChild` endpoints. We recommend to use the `Custom` token type for fully granural and secured approach instead of `Full Access` ones.
+>
+> Reference: [Strapi - API Tokens](https://docs.strapi.io/dev-docs/configurations/api-tokens#usage)
+
 ## Base Navigation Item model
 
 ### Flat

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

@@ -15,9 +15,9 @@ const utils_1 = require("../../../utils");
 const icons_1 = require("./icons");
 const wrapperStyle = { zIndex: 2 };
 const pathWrapperStyle = { maxWidth: "425px" };
-const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => (react_1.default.createElement(Wrapper_1.default, null,
+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', ellipsis: true, style: pathWrapperStyle }, path),
         react_1.default.createElement(Flex_1.Flex, null,
@@ -25,9 +25,9 @@ const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit,
     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

@@ -40,6 +40,8 @@ const reducer_1 = __importStar(require("./reducer"));
 const actions_1 = require("./actions");
 const parsers_1 = require("../View/utils/parsers");
 const utils_1 = require("../../utils");
+const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
+const permissions_1 = __importDefault(require("../../permissions"));
 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);
@@ -50,6 +52,11 @@ const DataManagerProvider = ({ children }) => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const formatMessageRef = (0, react_1.useRef)();
     formatMessageRef.current = formatMessage;
+    const viewPermissions = (0, react_1.useMemo)(() => ({
+        access: permissions_1.default.access || permissions_1.default.update,
+        update: permissions_1.default.update,
+    }), []);
+    const { isLoading: isLoadingForPermissions, allowedActions: { canAccess, canUpdate, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
     const getLayoutSettingRef = (0, react_1.useRef)();
     getLayoutSettingRef.current = (settingName) => (0, lodash_1.get)({}, ["settings", settingName], "");
     const isInDevelopmentMode = autoReload;
@@ -289,6 +296,9 @@ const DataManagerProvider = ({ children }) => {
     });
     const slugify = (query) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/slug?q=${query}`, { method: "GET", signal });
     const hardReset = () => getDataRef.current();
+    if (!canAccess && !isLoadingForPermissions) {
+        return (react_1.default.createElement(NoAccessPage_1.default, null));
+    }
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
             activeItem,
@@ -318,7 +328,10 @@ const DataManagerProvider = ({ children }) => {
             handleNavigationsDeletion,
             hardReset,
             slugify,
-        } }, isLoading ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
+            permissions: {
+                canAccess, canUpdate
+            },
+        } }, isLoading || isLoadingForPermissions ? react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null) : children));
 };
 DataManagerProvider.propTypes = {
     children: prop_types_1.default.node.isRequired,

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: { canSettings: canManageSettings, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
     const isLoading = isConfigLoading || isContentTypesLoading;
     const isError = configErr || contentTypesErr;
     const configContentTypes = navigationConfigData?.contentTypes || [];
@@ -155,6 +161,9 @@ const SettingsPage = () => {
     };
     const handleRestartDiscard = () => setRestartStatus(RESTART_NOT_REQUIRED);
     const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
+    if (!(isLoadingForPermissions || canManageSettings)) {
+        return (react_1.default.createElement(NoAccessPage_1.default, null));
+    }
     if (isLoading || isError) {
         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') }),

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

@@ -44,12 +44,13 @@ const translations_1 = require("../../../../translations");
 const types_1 = require("../../../../../../types");
 const AdditionalFieldInput_1 = __importDefault(require("../../../../components/AdditionalFieldInput"));
 const utils_2 = require("../../../../utils");
-const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, slugify, }) => {
+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: loadingAware(async (payload) => onSubmit(await sanitizePayload(slugify, payload, data)), setIsLoading),
@@ -380,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',
@@ -405,19 +406,19 @@ 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) => {

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

@@ -1,4 +1,4 @@
-import { Audience, Effect, ContentTypeEntity, NavigationItemAdditionalField, NavigationItemAdditionalFieldValues, NavigationItemType, NavigationPluginConfig, PluginConfigNameFields, ToBeFixed, VoidEffect } from '../../../../../../types';
+import { Audience, Effect, ContentTypeEntity, NavigationItemAdditionalField, NavigationItemAdditionalFieldValues, NavigationItemType, NavigationPluginConfig, PluginConfigNameFields, PluginPermissions, ToBeFixed, VoidEffect } from '../../../../../../types';
 import { Id } from 'strapi-typed';
 import { StrapiContentTypeSchema } from '../../../SettingsPage/types';
 export declare type FormEventTarget<TValue = unknown> = {
@@ -63,6 +63,7 @@ export declare type NavigationItemFormProps = {
     slugify: (q: string) => Promise<{
         slug: string;
     }>;
+    permissions: PluginPermissions;
 };
 export declare type ContentTypeSearchQuery = ToBeFixed;
 export declare type RawFormPayload = {

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

@@ -1,9 +1,10 @@
-export function NavigationItemPopupFooter({ handleCancel, handleSubmit, submitDisabled, formViewId }: {
+export function NavigationItemPopupFooter({ handleCancel, handleSubmit, submitDisabled, formViewId, canUpdate }: {
     handleCancel: any;
     handleSubmit: any;
     submitDisabled: any;
     formViewId: any;
-}): JSX.Element;
+    canUpdate: any;
+}): JSX.Element | null;
 export namespace NavigationItemPopupFooter {
     namespace defaultProps {
         const onValidate: undefined;
@@ -17,6 +18,7 @@ export namespace NavigationItemPopupFooter {
         export { submitDisabled_1 as submitDisabled };
         const formViewId_1: PropTypes.Requireable<object>;
         export { formViewId_1 as formViewId };
+        export const canUpdate: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

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

@@ -9,7 +9,10 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const Button_1 = require("@strapi/design-system/Button");
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const utils_1 = require("../../../../utils");
-const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, formViewId }) => {
+const NavigationItemPopupFooter = ({ handleCancel, handleSubmit, submitDisabled, formViewId, canUpdate }) => {
+    if (!canUpdate) {
+        return null;
+    }
     return (react_1.default.createElement(ModalLayout_1.ModalFooter, { startActions: react_1.default.createElement(Button_1.Button, { onClick: handleCancel, variant: "tertiary" }, (0, utils_1.getMessage)('popup.item.form.button.cancel')), endActions: react_1.default.createElement(Button_1.Button, { onClick: handleSubmit, disabled: submitDisabled }, (0, utils_1.getMessage)(`popup.item.form.button.save`)) }));
 };
 exports.NavigationItemPopupFooter = NavigationItemPopupFooter;
@@ -23,5 +26,6 @@ exports.NavigationItemPopupFooter.propTypes = {
     handleSubmit: prop_types_1.default.func,
     submitDisabled: prop_types_1.default.bool,
     formViewId: prop_types_1.default.object,
+    canUpdate: prop_types_1.default.bool,
 };
 //# sourceMappingURL=NavigationItemPopupFooter.js.map