strapi-plugin-navigation 2.0.0-beta.4 → 2.0.1

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+import { Searchbar } from '@strapi/design-system/Searchbar';
 import SearchIcon from "@strapi/icons/Search";
 import { getTradId } from '../../translations';
 
@@ -11,32 +11,30 @@ const Search = ({ value, setValue }) => {
 	const { formatMessage } = useIntl();
 
 	useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        wrapperRef.current.querySelector('input').focus();
-      }, 0);
-    }
+		if (isOpen) {
+			setTimeout(() => {
+				wrapperRef.current.querySelector('input').focus();
+			}, 0);
+		}
 	}, [isOpen]);
-	
+
 	if (isOpen) {
 		return (
 			<div ref={wrapperRef}>
-				<SearchForm>
-					<Searchbar
-						name="searchbar"
-						onClear={() => setValue('')}
-						value={value}
-						size="S"
-						onChange={(e) => setValue(e.target.value)}
-						clearLabel="Clearing the search"
-						placeholder={formatMessage({
-							id: getTradId('popup.item.form.audience.placeholder'),
-							defaultMessage: 'Type to start searching...',
-						})}
-					>
-						Search for navigation items
-					</Searchbar>
-				</SearchForm>
+				<Searchbar
+					name="searchbar"
+					onClear={() => { setValue(''); setIsOpen(false); }}
+					value={value}
+					size="S"
+					onChange={(e) => setValue(e.target.value)}
+					clearLabel="Clearing the search"
+					placeholder={formatMessage({
+						id: getTradId('popup.item.form.audience.placeholder'),
+						defaultMessage: 'Type to start searching...',
+					})}
+				>
+					Search for navigation items
+				</Searchbar>
 			</div>
 		);
 	} else {

package/admin/src/components/icons/navigation.js

@@ -0,0 +1,14 @@
+
+import React from 'react';
+
+const initSize = 92;
+
+const NavigationIcon = ({ width = 24, height = 24 }) =>     
+    <svg viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg"><g style={ {transform: `scale(${width/initSize})` } }>
+      <path d="M78,23.5H14c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5h64c3.6,0,6.5,2.9,6.5,6.5S81.6,23.5,78,23.5z M84.5,46
+        c0-3.6-2.9-6.5-6.5-6.5H14c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5h64C81.6,52.5,84.5,49.6,84.5,46z M84.5,75c0-3.6-2.9-6.5-6.5-6.5
+        H14c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5h64C81.6,81.5,84.5,78.6,84.5,75z"/>
+      </g>
+    </svg>;
+
+  export default NavigationIcon;

package/admin/src/index.js

@@ -1,7 +1,8 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
-import PluginIcon from './components/PluginIcon';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
+import pluginPermissions from './permissions';
+import NavigationIcon from './components/icons/navigation';
 
 const name = pluginPkg.strapi.name;
 
@@ -9,7 +10,7 @@ export default {
   register(app) {
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
-      icon: PluginIcon,
+      icon: NavigationIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
         defaultMessage: 'Navigation',
@@ -19,7 +20,7 @@ export default {
 
         return component;
       },
-      permissions: [],
+      permissions: pluginPermissions.access,
     });
     app.registerPlugin({
       id: pluginId,

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

@@ -3,57 +3,63 @@ import { useIntl } from 'react-intl';
 import { HeaderLayout } from '@strapi/design-system/Layout';
 import { Stack } from '@strapi/design-system/Stack';
 import { Button } from '@strapi/design-system/Button';
-import { IconButton } from '@strapi/design-system/IconButton';
 import Check from '@strapi/icons/Check';
 import More from '@strapi/icons/More';
-import Plus from '@strapi/icons/Plus';
-import styled from 'styled-components';
 import { getTrad } from '../../../../translations';
-import { transformToRESTPayload } from '../../utils/parsers';
-const MoreButton = styled(IconButton)`
-  margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  padding: ${({ theme }) => theme.spaces[2]};
-
-  svg {
-    width: ${18 / 16}rem;
-    height: ${18 / 16}rem;
-  }
-`;
+import { MoreButton } from './styles';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Box } from '@strapi/design-system/Box'
 
 const NavigationHeader = ({
+  activeNavigation,
+  availableNavigations,
   structureHasErrors,
+  structureHasChanged,
+  handleChangeSelection,
   handleSave,
 }) => {
   const { formatMessage } = useIntl();
-
   return (
     <HeaderLayout
-        primaryAction={
+      primaryAction={
         <Stack horizontal size={2}>
-            <Button
-              onClick={handleSave}
-              startIcon={<Check />}
-              disabled={structureHasErrors}
-              type="submit"
+          <Box width="10vw">
+            <Select
+              type="select"
+              placeholder={'Change navigation'}
+              name={`navigationSelect`}
+              onChange={handleChangeSelection}
+              value={activeNavigation?.id}
+              size="S"
+              style={null}
             >
-              {formatMessage(getTrad('submit.cta.save'))}
-            </Button>
-            <MoreButton
+              {availableNavigations.map(({ id, name }) => <Option key={id} value={id}>{name}</Option>)}
+            </Select >
+          </Box>
+          <Button
+            onClick={handleSave}
+            startIcon={<Check />}
+            disabled={structureHasErrors || !structureHasChanged}
+            type="submit"
+          >
+            {formatMessage(getTrad('submit.cta.save'))}
+          </Button>
+          {/* <MoreButton
               id="more"
               label="More"
               icon={<More />}
-            />
-          </Stack>
-        }
-        title={formatMessage({
-          id: getTrad('header.title'),
-          defaultMessage: 'UI Navigation',
-        })}
-        subtitle={formatMessage({
-          id: getTrad('header.description'),
-          defaultMessage: 'Define your portal navigation',
-        })}
-      />
+            /> */}
+        </Stack>
+      }
+      title={formatMessage({
+        id: getTrad('header.title'),
+        defaultMessage: 'UI Navigation',
+      })}
+      subtitle={formatMessage({
+        id: getTrad('header.description'),
+        defaultMessage: 'Define your portal navigation',
+      })}
+    />
   );
 };
 

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { IconButton } from '@strapi/design-system/IconButton';
+
+export const MoreButton = styled(IconButton)`
+    margin: ${({ theme }) => `0 ${theme.spaces[2]}`};
+    padding: ${({ theme }) => theme.spaces[2]};
+
+    svg {
+        width: ${18 / 16}rem;
+        height: ${18 / 16}rem;
+    }
+`;
+

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

@@ -6,18 +6,19 @@ import { Formik } from 'formik'
 
 // Design System
 import { ModalBody } from '@strapi/design-system/ModalLayout';
+import { Select, Option } from '@strapi/design-system/Select';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Form, GenericInput } from '@strapi/helper-plugin';
 
 import { NavigationItemPopupFooter } from '../NavigationItemPopup/NavigationItemPopupFooter';
 
 
-import { navigationItemType } from '../../utils/enums';
+import { navigationItemAdditionalFields, navigationItemType } from '../../utils/enums';
 import slugify from 'slugify';
 import { extractRelatedItemLabel } from '../../utils/parsers';
 import { form as formDefinition } from './utils/form';
 import { checkFormValidity } from '../../utils/form';
-import { getTradId } from '../../../../translations';
+import { getTradId, getTrad } from '../../../../translations';
 
 const NavigationItemForm = ({
   isLoading,
@@ -52,20 +53,29 @@ const NavigationItemForm = ({
       ...data,
       type: data.type || navigationItemType.INTERNAL,
       related: data.related?.value,
-      relatedType: data.relatedType?.value
+      relatedType: data.relatedType?.value,
+      audience: data.audience?.map(item => item.id),
     });
   }
 
+  const audience = get(form, `${inputsPrefix}audience`, []);
+  const audienceOptions = availableAudience.map((item) => ({
+    value: get(item, 'id', " "),
+    label: get(item, 'name', " "),
+  }));
+
   const generatePreviewPath = () => {
     if (!isExternal) {
+      const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path !== '/' ? form.path || '' : ''}`;
       return {
-        id: `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path || ''}`,
-        defaultMessage: `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path || ''}`
+        id: getTradId('popup.item.form.type.external.description'),
+        defaultMessage: '',
+        values: { value }
       }
     }
     return null;
   };
-  
+
   const sanitizePayload = (payload = {}) => {
     const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
     const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
@@ -101,6 +111,10 @@ const NavigationItemForm = ({
   const onTypeChange = ({ target: { name, value } }) =>
     onChange({ target: { name, value: value ? navigationItemType.INTERNAL : navigationItemType.EXTERNAL } });
 
+  const onAudienceChange = (value) => {
+    onChange({target: {name: `${inputsPrefix}audience`, value}});
+  }
+
   const onChange = ({ target: { name, value } }) => {
     setFormState(prevState => ({
       ...prevState,
@@ -137,7 +151,7 @@ const NavigationItemForm = ({
     .filter((item) => {
       const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
         .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
-      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related)); 
+      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related));
     })
     .map((item) => {
       const label = appendLabelPublicationStatus(
@@ -257,6 +271,10 @@ const NavigationItemForm = ({
                   }}
                   name={`${inputsPrefix}title`}
                   placeholder={{
+                    id: "e.g. Blog",
+                    defaultMessage: 'e.g. Blog',
+                  }}
+                  description={{
                     id: getTradId('popup.item.form.title.placeholder'),
                     defaultMessage: 'e.g. Blog',
                   }}
@@ -329,6 +347,15 @@ const NavigationItemForm = ({
                       onChange={onChangeRelatedType}
                       options={relatedTypeSelectOptions}
                       value={relatedTypeSelectValue}
+                      disabled={isLoading || isEmpty(relatedTypeSelectOptions)}
+                      description={
+                        !isLoading && isEmpty(relatedTypeSelectOptions)
+                          ? {
+                            id: getTradId('popup.item.form.relatedType.empty'),
+                            defaultMessage: 'There are no more content types',
+                          }
+                          : undefined
+                      }
                     />
                   </GridItem>
                   {relatedTypeSelectValue && !isSingleSelected && (
@@ -365,6 +392,22 @@ const NavigationItemForm = ({
                   )}
                 </>
               )}
+
+              {additionalFields.includes(navigationItemAdditionalFields.AUDIENCE) && (
+                <GridItem key={`${inputsPrefix}audience`} col={6} lg={12}>
+                  <Select
+                    id={`${inputsPrefix}audience`}
+                    placeholder={formatMessage(getTrad('popup.item.form.audience.placeholder'))}
+                    label={formatMessage(getTrad('popup.item.form.audience.label'))}
+                    onChange={onAudienceChange}
+                    value={audience}
+                    multi
+                    withTags
+                  >
+                    {audienceOptions.map(({ value, label }) => <Option key={value} value={value}>{label}</Option>)}
+                  </Select>
+                </GridItem>
+              )}
             </Grid>
           </ModalBody>
         </Form>

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

@@ -6,14 +6,12 @@ import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../../../translations';
 
-export const NavigationItemPopupHeader = () => {
+export const NavigationItemPopupHeader = ({isNewItem}) => {
 	const { formatMessage } = useIntl();
 	return (
 		<ModalHeader>
 			<ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
-				{formatMessage(
-					getTrad('popup.item.header'),
-				)}
+				{formatMessage(getTrad(`popup.item.header.${isNewItem ? 'new' : 'edit'}`))}
 			</ButtonText>
 		</ModalHeader>
 	);

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

@@ -80,7 +80,7 @@ const NavigationItemPopUp = ({
 
   return (
     <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClose} isOpen={isOpen}>
-      <NavigationItemPopupHeader />
+      <NavigationItemPopupHeader isNewItem={!data.viewId}/>
       <NavigationItemForm
         data={prepareFormData(data)}
         isLoading={isLoading}

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

@@ -10,10 +10,13 @@ import { isEmpty, get } from "lodash";
 
 // Design System
 import { Main } from '@strapi/design-system/Main';
+import { Flex } from '@strapi/design-system/Flex';
 import { ContentLayout } from '@strapi/design-system/Layout';
+import { Typography } from '@strapi/design-system/Typography';
+import { Box } from '@strapi/design-system/Box';
+import { Icon } from '@strapi/design-system/Icon';
 import { Button } from '@strapi/design-system/Button';
 import { LoadingIndicatorPage } from "@strapi/helper-plugin";
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
 import EmptyDocumentsIcon from '@strapi/icons/EmptyDocuments';
 import PlusIcon from "@strapi/icons/Plus";
 
@@ -22,6 +25,7 @@ import List from '../../components/NavigationItemList';
 import NavigationContentHeader from './components/NavigationContentHeader';
 import NavigationHeader from './components/NavigationHeader';
 import NavigationItemPopUp from "./components/NavigationItemPopup";
+import Search from '../../components/Search';
 import useDataManager from "../../hooks/useDataManager";
 import { getTrad } from '../../translations';
 import {
@@ -30,7 +34,6 @@ import {
   usedContentTypes,
   validateNavigationStructure,
 } from './utils/parsers';
-import Search from '../../components/Search';
 
 const View = () => {
   const {
@@ -55,6 +58,7 @@ const View = () => {
   const { formatMessage } = useIntl();
 
   const [searchValue, setSearchValue] = useState('');
+  const [structureChanged, setStructureChanged] = useState(false);
   const isSearchEmpty = isEmpty(searchValue);
 
   const structureHasErrors = !validateNavigationStructure((changedActiveNavigation || {}).items);
@@ -104,6 +108,7 @@ const View = () => {
       items: transformItemToViewPayload(payload, changedActiveNavigation.items, config),
     };
     handleChangeNavigationData(changedStructure, true);
+    setStructureChanged(true);
   };
 
   const filteredListFactory = (items, filterFunction) => items.reduce((acc, item) => {
@@ -147,10 +152,19 @@ const View = () => {
     changeNavigationItemPopupState(false);
   };
 
+  const handleChangeNavigationSelection = (...args) => {
+    handleChangeSelection(...args);
+    setSearchValue('');
+  }
+
   return (
     <Main labelledBy="title" aria-busy={isLoadingForSubmit}>
       <NavigationHeader
         structureHasErrors={structureHasErrors}
+        structureHasChanged={structureChanged}
+        availableNavigations={availableNavigations}
+        activeNavigation={activeNavigation}
+        handleChangeSelection={handleChangeNavigationSelection}
         handleSave={handleSave}
       />
       <ContentLayout>
@@ -158,7 +172,7 @@ const View = () => {
         {changedActiveNavigation && (
           <>
             <NavigationContentHeader
-              startActions={<Search value={searchValue} setValue={setSearchValue}/>}
+              startActions={<Search value={searchValue} setValue={setSearchValue} />}
               endActions={<Button
                 onClick={addNewNavigationItem}
                 startIcon={<PlusIcon />}
@@ -169,20 +183,20 @@ const View = () => {
               </Button>}
             />
             {isEmpty(changedActiveNavigation.items || []) && (
-              <EmptyStateLayout
-                action={
-                  <Button
-                    variant='secondary'
-                    startIcon={<PlusIcon />}
-                    label={formatMessage(getTrad('empty.cta'))}
-                    onClick={addNewNavigationItem}
-                  >
-                    {formatMessage(getTrad('empty.cta'))}
-                  </Button>
-                }
-                icon={<EmptyDocumentsIcon width='10rem' />}
-                content={formatMessage(getTrad('empty'))}
-              />
+              <Flex direction="column" minHeight="400px" justifyContent="center">
+                <Icon as={EmptyDocumentsIcon} width="160px" height="88px" color=""/>
+                <Box padding={4}>
+                  <Typography variant="beta" textColor="neutral600">{formatMessage(getTrad('empty'))}</Typography>
+                </Box>
+                <Button
+                  variant='secondary'
+                  startIcon={<PlusIcon />}
+                  label={formatMessage(getTrad('empty.cta'))}
+                  onClick={addNewNavigationItem}
+                >
+                  {formatMessage(getTrad('empty.cta'))}
+                </Button>
+              </Flex>
             )}
             {
               !isEmpty(changedActiveNavigation.items || [])

package/admin/src/pages/View/utils/parsers.js

@@ -7,6 +7,7 @@ export const transformItemToRESTPayload = (
   parent = undefined,
   master = undefined,
   config = {},
+  parentAttachedToMenu = true,
 ) => {
   const {
     id,
@@ -34,7 +35,7 @@ export const transformItemToRESTPayload = (
     find(contentTypes,
       ct => ct.uid === relatedType) :
     undefined;
-
+  const itemAttachedToMenu = menuAttached && parentAttachedToMenu
   return {
     id,
     parent,
@@ -45,7 +46,7 @@ export const transformItemToRESTPayload = (
     removed,
     order,
     uiRouterKey,
-    menuAttached,
+    menuAttached: itemAttachedToMenu,
     audience: audience.map((audienceItem) =>
       isObject(audienceItem) ? audienceItem.value : audienceItem,
     ),
@@ -60,7 +61,7 @@ export const transformItemToRESTPayload = (
           field: relatedContentType && relatedContentType.relatedField ? relatedContentType.relatedField : 'navigation',
         },
       ],
-    items: items.map((iItem) => transformItemToRESTPayload(iItem, id, master, config)),
+    items: items.map((iItem) => transformItemToRESTPayload(iItem, id, master, config, itemAttachedToMenu)),
   };
 };
 
@@ -118,6 +119,7 @@ const linkRelations = (item, config) => {
 
   const shouldFindRelated = (isNumber(related) || isUuid(related) || isString(related)) && !relatedRef;
   const shouldBuildRelated = !relatedRef || (relatedRef && (relatedRef.id !== relatedId));
+  
   if (shouldBuildRelated && !shouldFindRelated) {
     const relatedContentType = find(contentTypes,
       ct => ct.uid === relatedItem.__contentType, {});
@@ -136,6 +138,7 @@ const linkRelations = (item, config) => {
     const relatedRef = find(contentTypeItems, cti => cti.id === relatedId);
     const relatedContentType = find(contentTypes, ct => ct.uid === relatedType);
     const { uid, contentTypeName, labelSingular, isSingle } = relatedContentType;
+
     relation = {
       relatedRef: {
         ...relatedRef,
@@ -249,11 +252,14 @@ export const prepareItemToViewPayload = (items = [], viewParentId = null, config
   }));
 
 export const extractRelatedItemLabel = (item = {}, fields = {}, config = {}) => {
+  if (get(item, 'isSingle', false)) {
+    return get(item, 'labelSingular', '');
+  }
   const { contentTypes = [] } = config;
   const { __collectionUid } = item;
   const contentType = contentTypes.find(_ => _.uid === __collectionUid)
   const { default: defaultFields = [] } = fields;
-  return get(fields, `${contentType ? contentType.collectionName : ''}`, defaultFields).map((_) => item[_]).filter((_) => _)[0] || '';
+  return get(fields, `${contentType ? contentType.uid : __collectionUid}`, defaultFields).map((_) => item[_]).filter((_) => _)[0] || '';
 };
 
 export const usedContentTypes = (items = []) => items.flatMap(

package/admin/src/permissions.js

@@ -0,0 +1,8 @@
+const permissions = require('./../../permissions');
+
+const pluginPermissions = {
+    access: [{ action: permissions.render(permissions.navigation.read), subject: null }],
+    update: [{ action: permissions.render(permissions.navigation.update), subject: null }],
+  };
+  
+  export default pluginPermissions;

package/admin/src/translations/en.json

@@ -5,9 +5,10 @@
 	"header.action.newItem": "New Item",
 	"submit.cta.cancel": "Cancel",
 	"submit.cta.save": "Save",
-	"empty": "Navigation container is empty",
+	"empty": "Your navigation is empty",
 	"empty.cta": "Create first item",
-	"popup.item.header": "Manage navigation item",
+	"popup.item.header.edit": "Edit navigation item",
+	"popup.item.header.new": "New navigation item",
 	"popup.item.form.title.label": "Title",
 	"popup.item.form.title.placeholder": "Enter the item title or leave blank to pull from related entity",
 	"popup.item.form.uiRouterKey.label": "UI router key",
@@ -22,11 +23,13 @@
 	"popup.item.form.type.label": "Internal link",
 	"popup.item.form.type.internal.label": "Internal source",
 	"popup.item.form.type.external.label": "External source",
+	"popup.item.form.type.external.description": "Output path: {value}",
 	"popup.item.form.audience.label": "Audience",
-	"popup.item.form.audience.placeholder": "Type to start searching...",
+	"popup.item.form.audience.placeholder": "Select audience...",
 	"popup.item.form.relatedSection.label": "Relation to",
 	"popup.item.form.relatedType.label": "Content Type",
 	"popup.item.form.relatedType.placeholder": "Select content type...",
+	"popup.item.form.relatedType.empty": "There are no content types to select",
 	"popup.item.form.related.label": "Entity",
 	"popup.item.form.related.empty": "There are no more entities of \"{ contentTypeName }\" to select",
 	"popup.item.form.button.create": "Create item",
@@ -40,9 +43,9 @@
 	"notification.navigation.item.relation": "Entity relation does not exist!",
 	"notification.navigation.item.relation.status.draft": "draft",
 	"notification.navigation.item.relation.status.published": "published",
-	"navigation.item.action.newItem": "New nested item",
+	"navigation.item.action.newItem": "Add nested item",
 	"navigation.item.badge.removed": "Removed",
-	"navigation.item.badge.draft": "Draft",
-	"navigation.item.badge.published": "Published"
+	"navigation.item.badge.draft": "{type}: Draft",
+	"navigation.item.badge.published": "{type}: Published"
   }
   

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.1",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
-    "icon": "hamburger",
-    "description": "UI navigation management",
+    "displayName": "Navigation",
+    "description": "Create consumable navigation with a simple and straightforward visual builder",
     "kind": "plugin"
   },
   "repository": {
@@ -13,9 +13,11 @@
     "url": "https://github.com/VirtusLab/strapi-plugin-navigation"
   },
   "scripts": {
+    "publish": "npm publish --tag latest",
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
+    "@strapi/utils": "^4.0.7",
     "uuid": "^8.3.0",
     "bad-words": "^3.0.3",
     "lodash": "^4.17.11",

package/permissions.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+    render: function(uid) {
+        return `plugin::navigation.${uid}`;
+    },
+    navigation: {
+        read: 'read',
+        update: 'update',
+    },
+};

package/server/bootstrap.js

@@ -1,4 +1,5 @@
 const { isEmpty } = require("lodash");
+const permissions = require('./../permissions');
 
 module.exports = async ({ strapi }) => {
   // Check if the plugin users-permissions is installed because the navigation needs it
@@ -11,14 +12,14 @@ module.exports = async ({ strapi }) => {
   const actions = [
     {
       section: "plugins",
-      displayName: "Access the Navigation",
-      uid: "read",
+      displayName: "Read",
+      uid: permissions.navigation.read,
       pluginName: "navigation",
     },
     {
       section: "plugins",
-      displayName: "Ability to change the Navigation",
-      uid: "update",
+      displayName: "Update",
+      uid: permissions.navigation.update,
       pluginName: "navigation",
     },
   ];