strapi-plugin-navigation 2.3.0-beta.0 → 2.3.1

package/README.md

@@ -45,12 +45,16 @@ 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. [🔌 Extensions](#-extensions)
+11. [🧩 Examples](#-examples)
+12. [💬 FAQ](#-faq)
+13. [🤝 Contributing](#-contributing)
+14. [👨‍💻 Community support](#-community-support)
 
 ## ✨ Features
 
@@ -118,7 +122,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.15.x (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 +167,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,10 +182,10 @@ 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`.
-- `slugify` - allows to extend configuration of our "slugging" solution of choice. To learn more visit the [documentation](https://github.com/sindresorhus/slugify#api). It can be left unset since it's optional. **This option can only be handled by configuration in config file**.
 
 ### Properties
 
@@ -249,12 +256,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
@@ -347,6 +377,73 @@ Plugin supports both **REST API** and **GraphQL API** exposed by Strapi.
 > Version `v2.0.13` introduced breaking change!
 > All responses have changed their structure. Related field will now be of type ContentType instead of Array\<ContentType\>
 
+`GET <host>/api/navigation/?locale=<locale>&orderBy=<orderBy>&orderDirection=<orderDirection>`
+
+NOTE: All params are optional
+
+**Example URL**: `https://localhost:1337/api/navigation?locale=en`
+
+**Example response body**
+
+```json
+[
+  {
+    "id": 383,
+    "name": "Floor",
+    "slug": "floor-pl",
+    "visible": true,
+    "createdAt": "2023-09-29T12:45:54.399Z",
+    "updatedAt": "2023-09-29T13:44:08.702Z",
+    "localeCode": "pl"
+  },
+  {
+    "id": 384,
+    "name": "Floor",
+    "slug": "floor-fr",
+    "visible": true,
+    "createdAt": "2023-09-29T12:45:54.399Z",
+    "updatedAt": "2023-09-29T13:44:08.725Z",
+    "localeCode": "fr"
+  },
+  {
+    "id": 382,
+    "name": "Floor",
+    "slug": "floor",
+    "visible": true,
+    "createdAt": "2023-09-29T12:45:54.173Z",
+    "updatedAt": "2023-09-29T13:44:08.747Z",
+    "localeCode": "en"
+  },
+  {
+    "id": 374,
+    "name": "Main navigation",
+    "slug": "main-navigation-pl",
+    "visible": true,
+    "createdAt": "2023-09-29T12:22:30.373Z",
+    "updatedAt": "2023-09-29T13:44:08.631Z",
+    "localeCode": "pl"
+  },
+  {
+    "id": 375,
+    "name": "Main navigation",
+    "slug": "main-navigation-fr",
+    "visible": true,
+    "createdAt": "2023-09-29T12:22:30.373Z",
+    "updatedAt": "2023-09-29T13:44:08.658Z",
+    "localeCode": "fr"
+  },
+  {
+    "id": 373,
+    "name": "Main navigation",
+    "slug": "main-navigation",
+    "visible": true,
+    "createdAt": "2023-09-29T12:22:30.356Z",
+    "updatedAt": "2023-09-29T13:44:08.680Z",
+    "localeCode": "en"
+  }
+]
+```
+
 `GET <host>/api/navigation/render/<navigationIdOrSlug>?type=<type>`
 
 Return a rendered navigation structure depends on passed type (`TREE`, `RFR` or nothing to render as `FLAT`).
@@ -609,37 +706,16 @@ For collection types it will be read from content type's attribute name `templat
 
 For single types a global name of this content type will be used as a template name or it can be set manually with an option named `templateName`.
 
-## 🧩 Examples
-
-Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
-
-## 💬 FAQ
-
-### GraphQL tricks
-
-**Q:** I would like to use GraphQL schemas but I'm not getting renderNavigation query or even proper types as Navigation, NavigationItem etc. What should I do?
-
-**A:** **A:** There is a one trick you might try. Strapi by default is ordering plugins by the way which takes `strapi-plugin-graphql` to initialize earlier than other plugins so types might not be injected. If you don't have it yet, please create `config/plugins.js` file and put there following lines (put `graphql` at the end):
-
-```js
-module.exports = {
-  'navigation': { enabled: true },
-  'graphql': { enabled: true },
-};
-```
-
-If you already got it, make sure that `navigation` plugin is inserted before `graphql`. That should do the job.
+## 🔌 Extensions
 
 ### 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
+// path: /admin/src/index.js
 
 module.exports = {
   // ...
@@ -657,6 +733,27 @@ module.exports = {
 };
 ```
 
+## 🧩 Examples
+
+Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
+
+## 💬 FAQ
+
+### GraphQL tricks
+
+**Q:** I would like to use GraphQL schemas but I'm not getting renderNavigation query or even proper types as Navigation, NavigationItem etc. What should I do?
+
+**A:** There is a one trick you might try. Strapi by default is ordering plugins by the way which takes `strapi-plugin-graphql` to initialize earlier than other plugins so types might not be injected. If you don't have it yet, please create `config/plugins.js` file and put there following lines (put `graphql` at the end):
+
+```js
+module.exports = {
+  'navigation': { enabled: true },
+  'graphql': { enabled: true },
+};
+```
+
+If you already got it, make sure that `navigation` plugin is inserted before `graphql`. That should do the job.
+
 ## 🤝 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

@@ -1,14 +1,15 @@
 import { MessageDescriptor } from "react-intl";
 import { NavigationItemCustomField } from "../../../../types";
-export declare type AdditionalFieldInputProps = {
+export type AdditionalFieldInputProps = {
     field: NavigationItemCustomField;
     isLoading: boolean;
     onChange: (name: string, value: string) => void;
     value: string | boolean | string[] | null;
+    disabled: boolean;
     error: MessageDescriptor | null;
 };
-export declare type TargetProp = "value" | "checked";
-export declare type Input = {
+export type TargetProp = "value" | "checked";
+export type Input = {
     prop: TargetProp;
 } & Pick<AdditionalFieldInputProps, "onChange" | "field">;
 //# sourceMappingURL=types.d.ts.map

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

@@ -13,16 +13,16 @@ declare function ConfirmationDialog({ isVisible, isActionAsync, children, onConf
 }): JSX.Element;
 declare namespace ConfirmationDialog {
     namespace propTypes {
-        const isVisible: PropTypes.Requireable<boolean>;
-        const isActionAsync: PropTypes.Requireable<boolean>;
-        const children: PropTypes.Requireable<any>;
-        const header: PropTypes.Requireable<string>;
-        const labelCancel: PropTypes.Requireable<string>;
-        const labelConfirm: PropTypes.Requireable<string>;
-        const iconConfirm: PropTypes.Requireable<object>;
-        const onConfirm: PropTypes.Validator<(...args: any[]) => any>;
-        const onCancel: PropTypes.Validator<(...args: any[]) => any>;
+        let isVisible: PropTypes.Requireable<boolean>;
+        let isActionAsync: PropTypes.Requireable<boolean>;
+        let children: PropTypes.Requireable<any>;
+        let header: PropTypes.Requireable<string>;
+        let labelCancel: PropTypes.Requireable<string>;
+        let labelConfirm: PropTypes.Requireable<string>;
+        let iconConfirm: PropTypes.Requireable<object>;
+        let onConfirm: PropTypes.Validator<(...args: any[]) => any>;
+        let onCancel: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("@strapi/design-system/Box");
+const Button_1 = require("@strapi/design-system/Button");
 const EmptyView = styled_components_1.default.div `
   display: flex;
   flex-grow: 1;

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.d.ts

@@ -2,30 +2,30 @@ export default Item;
 declare function Item(props: any): JSX.Element;
 declare namespace Item {
     namespace propTypes {
-        const item: PropTypes.Validator<PropTypes.InferProps<{
+        let item: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             uiRouterKey: PropTypes.Requireable<string>;
             path: PropTypes.Requireable<string>;
             externalPath: PropTypes.Requireable<string>;
-            related: PropTypes.Requireable<string | number>;
+            related: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
             menuAttached: PropTypes.Requireable<boolean>;
             collapsed: PropTypes.Requireable<boolean>;
-        }>>;
-        const relatedRef: PropTypes.Requireable<object>;
-        const level: PropTypes.Requireable<number>;
-        const levelPath: PropTypes.Requireable<string>;
-        const isParentAttachedToMenu: PropTypes.Requireable<boolean>;
-        const onItemRestore: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemLevelAdd: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemRemove: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemReOrder: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemToggleCollapse: PropTypes.Validator<(...args: any[]) => any>;
-        const config: PropTypes.Validator<PropTypes.InferProps<{
+        }>>>;
+        let relatedRef: PropTypes.Requireable<object>;
+        let level: PropTypes.Requireable<number>;
+        let levelPath: PropTypes.Requireable<string>;
+        let isParentAttachedToMenu: PropTypes.Requireable<boolean>;
+        let onItemRestore: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemLevelAdd: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemRemove: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemReOrder: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemToggleCollapse: PropTypes.Validator<(...args: any[]) => any>;
+        let config: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             contentTypes: PropTypes.Validator<any[]>;
             contentTypesNameFields: PropTypes.Validator<object>;
-        }>>;
+        }>>>;
     }
 }
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 //# sourceMappingURL=index.d.ts.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);
@@ -108,9 +109,10 @@ const Item = (props) => {
     const contentType = contentTypes.find(_ => _.uid === contentTypeUid) || {};
     const generatePreviewUrl = entity => {
         const { isSingle } = contentType;
-        return `/content-manager/${isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}`;
+        const entityLocale = entity?.locale ? `?plugins[i18n][locale]=${entity?.locale}` : '';
+        return `/content-manager/${isSingle ? 'singleType' : 'collectionType'}/${entity?.__collectionUid}${!isSingle ? '/' + entity?.id : ''}${entityLocale}`;
     };
-    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,22 +122,22 @@ 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' },
                                 relatedTypeLabel,
                                 "\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 })));
+                            react_1.default.createElement(Link_1.Link, { to: generatePreviewUrl(relatedRef), 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, 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,20 +15,21 @@ declare function List({ allowedLevels, error, isParentAttachedToMenu, items, lev
     displayFlat: any;
     contentTypes: any;
     contentTypesNameFields: any;
+    permissions: any;
 }): JSX.Element;
 declare namespace List {
     namespace propTypes {
-        const allowedLevels: PropTypes.Requireable<number>;
-        const isParentAttachedToMenu: PropTypes.Requireable<boolean>;
-        const items: PropTypes.Requireable<any[]>;
-        const level: PropTypes.Requireable<number>;
-        const onItemLevelAdd: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemRemove: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemRestore: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemReOrder: PropTypes.Validator<(...args: any[]) => any>;
-        const onItemToggleCollapse: PropTypes.Validator<(...args: any[]) => any>;
-        const contentTypes: PropTypes.Validator<any[]>;
-        const contentTypesNameFields: PropTypes.Validator<object>;
+        let allowedLevels: PropTypes.Requireable<number>;
+        let isParentAttachedToMenu: PropTypes.Requireable<boolean>;
+        let items: PropTypes.Requireable<any[]>;
+        let level: PropTypes.Requireable<number>;
+        let onItemLevelAdd: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemRemove: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemRestore: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemReOrder: PropTypes.Validator<(...args: any[]) => any>;
+        let onItemToggleCollapse: PropTypes.Validator<(...args: any[]) => any>;
+        let contentTypes: PropTypes.Validator<any[]>;
+        let contentTypesNameFields: PropTypes.Validator<object>;
     }
 }
 import PropTypes from "prop-types";

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.d.ts

@@ -1,14 +1,12 @@
 declare namespace _default {
     function register(app: any): void;
-    function register(app: any): void;
-    function bootstrap(): void;
     function bootstrap(): void;
     function registerTrads({ locales }: {
-        locales: any;
-    }): Promise<any[]>;
-    function registerTrads({ locales }: {
-        locales: any;
-    }): Promise<any[]>;
+        locales?: any[] | undefined;
+    }): {
+        data: any;
+        locale: any;
+    }[];
 }
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/admin/src/index.js

@@ -31,7 +31,8 @@ const package_json_1 = __importDefault(require("../../package.json"));
 const pluginId_1 = __importDefault(require("./pluginId"));
 const permissions_1 = __importDefault(require("./permissions"));
 const navigation_1 = __importDefault(require("./components/icons/navigation"));
-const translations_1 = require("./translations");
+const translations_1 = __importStar(require("./translations"));
+const lodash_1 = require("lodash");
 const name = package_json_1.default.strapi.name;
 exports.default = {
     register(app) {
@@ -50,7 +51,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({
@@ -72,22 +73,15 @@ exports.default = {
         });
     },
     bootstrap() { },
-    async registerTrads({ locales }) {
-        const importedTrads = await Promise.all(locales.map(locale => {
-            return Promise.resolve().then(() => __importStar(require(`./translations/${locale}.json`))).then(({ default: data }) => {
-                return {
-                    data: (0, helper_plugin_1.prefixPluginTranslations)(data, pluginId_1.default),
-                    locale,
-                };
-            })
-                .catch(() => {
-                return {
-                    data: {},
-                    locale,
-                };
-            });
-        }));
-        return Promise.resolve(importedTrads);
+    registerTrads({ locales = [] }) {
+        return locales
+            .filter((locale) => Object.keys(translations_1.default).includes(locale))
+            .map((locale) => {
+            return {
+                data: (0, helper_plugin_1.prefixPluginTranslations)((0, lodash_1.get)(translations_1.default, locale, translations_1.default.en), pluginId_1.default, {}),
+                locale,
+            };
+        });
     },
 };
 //# sourceMappingURL=index.js.map

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

@@ -3,7 +3,7 @@ declare const _default: React.MemoExoticComponent<{
         children: any;
     }): JSX.Element;
     propTypes: {
-        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     };
 }>;
 export default _default;