strapi-plugin-navigation 2.0.0-beta.5 → 2.0.0-rc.1

package/README.md

@@ -1,22 +1,27 @@
 <div align="center">
-  <h1>Strapi v4 - Navigation plugin - BETA</h1>
-  <p>Create consumable navigation with a simple and straigthforward visual builder.</p>
+  <img style="width: 150px; height: auto;" src="public/assets/logo.png" alt="Logo - Strapi Navigation plugin" />
+  <h1>Strapi v4 - Navigation plugin</h1>
+  <p>Create consumable navigation with a simple and straighthforward visual builder</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
-    <img src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation/feat%252Fstrapi-v4-support?label=npm" alt="NPM Version" />
+    <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation?label=npm&logo=npm">
   </a>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
     <img src="https://img.shields.io/npm/dm/strapi-plugin-navigation.svg" alt="Monthly download on NPM" />
   </a>
   <a href="https://circleci.com/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat%2Fstrapi-v4-support.svg?style=shield" alt="CircleCI" />
+    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-navigation.svg?style=shield" alt="CircleCI" />
   </a>
   <a href="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation">
-    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=feat%2Fstrapi-v4-support" alt="codecov.io" />
+    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-navigation/coverage.svg?branch=master" alt="codecov.io" />
   </a>
 </div>
 
 ---
 
+<div style="margin: 20px 0" align="center">
+  <img style="width: 100%; height: auto;" src="public/assets/preview.png" alt="UI preview" />
+</div>
+
 Strapi Navigation Plugin provides a website navigation / menu builder feature for [Strapi Headless CMS](https://github.com/strapi/strapi) admin panel. Navigation has the possibility to control the audience and can be consumed by the website with different output structure renderers:
 
 - Flat
@@ -34,8 +39,8 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
 
 ## ⚙️ Versions
 
-- **Stable** - [v1.1.2](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation)
-- **Beta** - v4 support - [v2.0.0-beta.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/feat/strapi-v4-support)
+- **Strapi v4** - (current) - [v2.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation)
+- **Strapi v3** - [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3)
 
 ## ⏳ Installation
 
@@ -71,9 +76,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 - Strapi v4.0.5 (recently tested)
 - Strapi v4.x
 
-_This plugin is not working with v3.x._
-
-It may or may not work with the older Strapi v4 versions, these are not tested nor officially supported at this time.
+> 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).
 
 **We recommend always using the latest version of Strapi to start your new projects**.
 
@@ -105,7 +108,7 @@ Config for this plugin is stored as a part of `config/plugins.js` or `config/<en
 - `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`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 
-## GQL Configuration
+## 🔧 GQL Configuration
 Using navigation with GraphQL requires both plugins to be installed and working. You can find instalation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
 
 ```gql
@@ -131,8 +134,14 @@ gql: {
 ```
 where `Page` and `UploadFile` are your type names for the **Content Types** you're referring by navigation items relations. 
 
+## 👤 RBAC
+Plugin provides granular permissions based on Strapi RBAC functionality.
+
+### Mandatory permissions
+For any role different than **Super Admin**, to access the **Navigation panel** you must set following permissions:
+- _Plugins_ -> _Navigation_ -> _Read_ - gives you the access to **Navigation Panel**
 
-## Public API Navigation Item model
+## Base Navigation Item model
 
 ### Flat
 ```
@@ -146,8 +155,8 @@ where `Page` and `UploadFile` are your type names for the **Content Types** you'
     "menuAttached": false,
     "parent": 8, // Parent Navigation Item 'id', null in case of root level
     "master": 1, // Navigation 'id'
-    "created_at": "2020-09-29T13:29:19.086Z",
-    "updated_at": "2020-09-29T13:29:19.128Z",
+    "createdAt": "2020-09-29T13:29:19.086Z",
+    "updatedAt": "2020-09-29T13:29:19.128Z",
     "related": [ <Content Type model > ],
     "audience": []
 }
@@ -198,7 +207,7 @@ where `Page` and `UploadFile` are your type names for the **Content Types** you'
 }
 ```
 
-## Public API specification
+## 🕸️ Public API specification
 
 ### Render
 
@@ -387,7 +396,8 @@ For general help using Strapi, please refer to [the official Strapi documentatio
 - [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @cyp3r and DM.
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab/strapi-plugin-navigation/issues) (Bug reports, Contributions, Questions and Discussions)
+- [E-mail](mailto:strapi@virtuslab.com) - we will respond back as soon as possible
 
 ## 📝 License
 
-[MIT License](LICENSE.md) Copyright (c) 2021 [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).
+[MIT License](LICENSE.md) Copyright (c) [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).

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

@@ -10,7 +10,8 @@ const EmptyView = styled.div`
   justify-content: center;
   padding-left: 2rem;
   padding-right: 2rem;
-  padding-bottom: "8rem" };
+  padding-bottom: 8rem;
+
 
   font-size: 2rem;
   font-weight: 600;

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

@@ -2,7 +2,20 @@ import styled from "styled-components";
 import { Badge } from '@strapi/design-system/Badge';
 
 const ItemCardBadge = styled(Badge)`
-		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]}
+		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
+
+		${ props => props.small && `
+			padding: 0 4px;
+			vertical-align: middle;
+
+			cursor: default;
+
+			span {
+				font-size: .55rem;
+				line-height: 1;
+				vertical-align: middle;
+			}
+		`}
 `;
 
 export default ItemCardBadge;

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

@@ -12,8 +12,8 @@ import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getTrad } from "../../../translations";
 
-const ItemCardHeader = ({ title, path, icon, removed, isExternal, isPublished, onItemRemove, onItemEdit, onItemRestore }) => {
-	const badgeColor = isPublished ? 'success' : 'secondary';
+const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore }) => {
+
 	const { formatMessage } = useIntl();
 
 	return (
@@ -27,23 +27,15 @@ const ItemCardHeader = ({ title, path, icon, removed, isExternal, isPublished, o
 					{path}
 				</Typography>
 			</Flex>
-			<Flex alignItems="center">
-				{removed ?
-					<ItemCardBadge
+			<Flex alignItems="center" style={{ zIndex: 2 }}>
+				{removed && 
+					(<ItemCardBadge
 						borderColor={`danger200`}
 						backgroundColor={`danger100`}
 						textColor={`danger600`}
 					>
 						{formatMessage(getTrad("navigation.item.badge.removed"))}
-					</ItemCardBadge>
-					: !isExternal && <ItemCardBadge
-						borderColor={`${badgeColor}200`}
-						backgroundColor={`${badgeColor}100`}
-						textColor={`${badgeColor}600`}
-						className="action"
-					>
-						{formatMessage(getTrad(`navigation.item.badge.${isPublished ? 'published' : 'draft'}`))}
-					</ItemCardBadge>
+					</ItemCardBadge>)
 				}
 
 				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<PencilIcon />} />

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const ItemCardRemovedOverlay = styled.div`
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+
+    background: rgba(255,255,255,.75);
+`;

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

@@ -1,21 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { isEmpty, isNumber } from 'lodash';
+import { isEmpty, isNumber, get } from 'lodash';
 import { useIntl } from "react-intl";
 
+import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
 import { Divider } from '@strapi/design-system/Divider';
+import { Flex } from '@strapi/design-system/Flex';
+import { Link } from '@strapi/design-system/Link';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Typography } from '@strapi/design-system/Typography';
-import PlusIcon from '@strapi/icons/Plus';
-import EarthIcon from '@strapi/icons/Earth';
-import LinkIcon from '@strapi/icons/Link';
+
+import { ArrowRight, Link as LinkIcon, Earth, Plus } from '@strapi/icons';
 
 import { navigationItemType } from '../../pages/View/utils/enums';
 import ItemCardHeader from './ItemCardHeader';
 import List from '../NavigationItemList';
 import Wrapper from './Wrapper';
 import { getTrad } from '../../translations';
+import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
+import ItemCardBadge from './ItemCardBadge';
+import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
 
 const Item = (props) => {
   const {
@@ -32,6 +37,7 @@ const Item = (props) => {
     onItemEdit,
     error,
     displayChildren,
+    config = {},
   } = props;
 
   const {
@@ -45,6 +51,7 @@ const Item = (props) => {
   } = item;
 
   const { formatMessage } = useIntl();
+  const { contentTypes, contentTypesNameFields } = config;
   const isExternal = type === navigationItemType.EXTERNAL;
   const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
@@ -52,38 +59,70 @@ const Item = (props) => {
   const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
   const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
 
+  const relatedItemLabel = !isExternal ? extractRelatedItemLabel(relatedRef, contentTypesNameFields, { contentTypes }) : '';
+  const relatedTypeLabel = relatedRef?.labelSingular;
+  const relatedBadgeColor = isPublished ? 'success' : 'secondary';
+
   return (
     <Wrapper level={level} isLast={isLast}>
-      <Card style={{ width: "728px", zIndex: 1, position: "relative" }}>
+      <Card style={{ width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' }}>
+        { removed && (<ItemCardRemovedOverlay />) }
         <CardBody>
           <ItemCardHeader
             title={title}
             path={isExternal ? externalPath : absolutePath}
-            icon={isExternal ? <EarthIcon /> : <LinkIcon />}
-            isPublished={isPublished}
-            isExternal={isExternal}
-            onItemRemove={() => onItemRemove(item)}
+            icon={isExternal ? <Earth /> : <LinkIcon />}
+            onItemRemove={() => onItemRemove({
+              ...item,
+              relatedRef,
+            })}
             onItemEdit={() => onItemEdit({
               ...item,
               isMenuAllowedLevel,
               isParentAttachedToMenu,
             }, levelPath, isParentAttachedToMenu)}
-            onItemRestore={() => onItemRestore(item)}
+            onItemRestore={() => onItemRestore({
+              ...item,
+              relatedRef,
+            })}
             removed={removed}
           />
         </CardBody>
         <Divider />
-        <CardBody style={{ margin: '8px' }}>
-          <TextButton
-            disabled={removed}
-            startIcon={<PlusIcon />}
-            onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
-          >
-            <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
-              {formatMessage(getTrad("navigation.item.action.newItem"))}
-            </Typography>
-          </TextButton>
-        </CardBody>
+        { !isExternal && (<CardBody style={{ margin: '8px' }}>
+          <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
+            <TextButton
+              disabled={removed}
+              startIcon={<Plus />}
+              onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
+            >
+              <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
+                {formatMessage(getTrad("navigation.item.action.newItem"))}
+              </Typography>
+            </TextButton>
+            { relatedItemLabel && (<Box>
+                <ItemCardBadge
+                  style={{ marginRight: 4 }}
+                  borderColor={`${relatedBadgeColor}200`}
+                  backgroundColor={`${relatedBadgeColor}100`}
+                  textColor={`${relatedBadgeColor}600`}
+                  className="action"
+                  small
+                  >
+                    {formatMessage(getTrad(`navigation.item.badge.${isPublished ? 'published' : 'draft'}`), {
+                      type: relatedTypeLabel
+                    })}
+                </ItemCardBadge>
+                <Typography variant="pi" fontWeight="bold" textColor="neutral600">
+                  { relatedItemLabel }
+                  <Link 
+                    to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`} 
+                    endIcon={<ArrowRight />}>&nbsp;</Link>
+                </Typography>
+              </Box>)
+            }
+          </Flex>
+        </CardBody>)}
       </Card>
       {hasChildren && !removed && <List
         onItemLevelAdd={onItemLevelAdd}
@@ -96,6 +135,8 @@ const Item = (props) => {
         items={item.items}
         level={level + 1}
         levelPath={absolutePath}
+        contentTypes={contentTypes}
+        contentTypesNameFields={contentTypesNameFields}
       />
       }
     </Wrapper>
@@ -121,6 +162,10 @@ Item.propTypes = {
   onItemRestore: PropTypes.func.isRequired,
   onItemLevelAdd: PropTypes.func.isRequired,
   onItemRemove: PropTypes.func.isRequired,
+  config: PropTypes.shape({
+    contentTypes: PropTypes.array.isRequired, 
+    contentTypesNameFields: PropTypes.object.isRequired, 
+  }).isRequired
 };
 
 export default Item;

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

@@ -16,6 +16,8 @@ const List = ({
   onItemRemove,
   onItemRestore,
   displayFlat,
+  contentTypes,
+  contentTypesNameFields,
 }) => (
   <Wrapper level={level}>
     {items.map((item, n) => {
@@ -36,6 +38,10 @@ const List = ({
           onItemEdit={onItemEdit}
           error={error}
           displayChildren={displayFlat}
+          config={{
+            contentTypes,
+            contentTypesNameFields
+          }}
         />
       );
     })}
@@ -51,6 +57,8 @@ List.propTypes = {
   onItemRemove: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
+  contentTypes: PropTypes.array.isRequired,
+  contentTypesNameFields: PropTypes.object.isRequired
 };
 
 export default List;

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,25 +3,15 @@ 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]};
+import { MoreButton } from './styles';
 
-  svg {
-    width: ${18 / 16}rem;
-    height: ${18 / 16}rem;
-  }
-`;
 
 const NavigationHeader = ({
   structureHasErrors,
+  structureHAsChanged,
   handleSave,
 }) => {
   const { formatMessage } = useIntl();
@@ -33,16 +23,16 @@ const NavigationHeader = ({
             <Button
               onClick={handleSave}
               startIcon={<Check />}
-              disabled={structureHasErrors}
+              disabled={structureHasErrors || !structureHAsChanged}
               type="submit"
             >
               {formatMessage(getTrad('submit.cta.save'))}
             </Button>
-            <MoreButton
+            {/* <MoreButton
               id="more"
               label="More"
               icon={<More />}
-            />
+            /> */}
           </Stack>
         }
         title={formatMessage({

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

@@ -58,9 +58,11 @@ const NavigationItemForm = ({
 
   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;

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

@@ -11,6 +11,7 @@ import { isEmpty, get } from "lodash";
 // Design System
 import { Main } from '@strapi/design-system/Main';
 import { ContentLayout } from '@strapi/design-system/Layout';
+import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { LoadingIndicatorPage } from "@strapi/helper-plugin";
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
@@ -55,6 +56,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 +106,7 @@ const View = () => {
       items: transformItemToViewPayload(payload, changedActiveNavigation.items, config),
     };
     handleChangeNavigationData(changedStructure, true);
+    setStructureChanged(true);
   };
 
   const filteredListFactory = (items, filterFunction) => items.reduce((acc, item) => {
@@ -151,6 +154,7 @@ const View = () => {
     <Main labelledBy="title" aria-busy={isLoadingForSubmit}>
       <NavigationHeader
         structureHasErrors={structureHasErrors}
+        structureHAsChanged={structureChanged}
         handleSave={handleSave}
       />
       <ContentLayout>
@@ -168,21 +172,22 @@ const View = () => {
                 {formatMessage(getTrad('header.action.newItem'))}
               </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'))}
-              />
+            {isEmpty(changedActiveNavigation.items || []) && (<Box paddingTop={4} >
+                <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'))}
+                />
+              </Box>
             )}
             {
               !isEmpty(changedActiveNavigation.items || [])

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

@@ -118,6 +118,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 +137,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,
@@ -253,7 +255,7 @@ export const extractRelatedItemLabel = (item = {}, fields = {}, 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

@@ -22,6 +22,7 @@
 	"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.relatedSection.label": "Relation to",
@@ -42,7 +43,7 @@
 	"notification.navigation.item.relation.status.published": "published",
 	"navigation.item.action.newItem": "New 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,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-rc.1",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",

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",
     },
   ];

package/server/graphql/types/navigation-related.js

@@ -1,5 +1,5 @@
 module.exports = ({ strapi, nexus }) => {
-	const related = strapi.plugin('navigation').config('gql').navigationItemRelated;
+	const related = strapi.plugin('navigation').config('gql')?.navigationItemRelated;
 	const name = "NavigationRelated";
 
 	if (related?.length) {

package/server/services/navigation.js

@@ -700,7 +700,7 @@ module.exports = ({ strapi }) => {
     },
 
     removeRelated(relatedItems, master) {
-      return Promise.all(relatedItems.map(relatedItem => {
+      return Promise.all((relatedItems || []).map(relatedItem => {
         const model = strapi.query('plugin::navigation.navigations-items-related');
         const entityToRemove = {
           master,

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import Puzzle from '@strapi/icons/Puzzle';
-
-const PluginIcon = () => <Puzzle />;
-
-export default PluginIcon;