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

package/README.md

@@ -1,22 +1,35 @@
+<div align="center" width="150px">
+  <img style="width: 150px; height: auto;" src="public/assets/logo.png" alt="Logo - Strapi Navigation plugin" />
+</div>
 <div align="center">
-  <h1>Strapi v4 - Navigation plugin - BETA</h1>
-  <p>Create consumable navigation with a simple and straigthforward visual builder.</p>
+  <h1>Strapi v4 - Navigation plugin</h1>
+  <p>Create consumable navigation with a simple and straightforward 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>
+  <a href="https://sharing.clickup.com/tl/xhcmx-43/strapiv-4-navigation-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-43%2Fstrapiv-4-navigation-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/6-169004201-2/strapiv-4-navigation-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2F6-169004201-2%2Fstrapiv-4-navigation-board" />
   </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
@@ -28,14 +41,14 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
 - **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
 - **Visual builder:** Elegant and easy to use visual builder
 - **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Multiple navigations:** Create as many Navigation containers as you want, setup them and use in the consumer application
 - **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
 - **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record
 
-
 ## ⚙️ 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
 
@@ -68,12 +81,10 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.5 (recently tested)
+- Strapi v4.0.7 (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 +116,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 +142,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 +163,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 +215,7 @@ where `Page` and `UploadFile` are your type names for the **Content Types** you'
 }
 ```
 
-## Public API specification
+## 🕸️ Public API specification
 
 ### Render
 
@@ -378,16 +395,26 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 ## 🤝 Contributing
 
+<div>
+  <a href="https://sharing.clickup.com/tl/xhcmx-43/strapiv-4-navigation-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-43%2Fstrapiv-4-navigation-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/6-169004201-2/strapiv-4-navigation-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2F6-169004201-2%2Fstrapiv-4-navigation-board" />
+  </a>
+</div>
+
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
 ## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
-- [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @cyp3r and DM.
+- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Find us by `[VirtusLab]` prefix 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/__mocks__/pages.settings.json

@@ -0,0 +1,25 @@
+{
+  "kind": "collectionType",
+  "collectionName": "pages",
+  "info": {
+    "singularName": "page",
+    "pluralName": "pages",
+    "displayName": "Page",
+    "name": "page"
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "searchable": true,
+    "previewable": true,
+    "draftAndPublish": false
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "title": {
+      "type": "string",
+      "required": true
+    }
+  }
+}
+

package/__mocks__/strapi.js

@@ -0,0 +1,196 @@
+const { isMatch } = require('lodash');
+
+const masterModelMock = {
+    findOne: () => ({
+        id: 1,
+        name: "Main navigation",
+        slug: "main-navigation",
+        visible: true,
+        createdAt: "2021-12-30T14:05:50.276Z",
+        updatedAt: "2021-12-30T14:05:50.276Z",
+    }),
+    findMany: () => [{
+        id: 1,
+        name: "Main navigation",
+        slug: "main-navigation",
+        visible: true,
+        createdAt: "2021-12-30T14:05:50.276Z",
+        updatedAt: "2021-12-30T14:05:50.276Z",
+    }],
+};
+
+const itemModelMock = {
+    findOne: async () => ({
+        id: 1,
+        title: "home",
+        type: "INTERNAL",
+        path: "home1",
+        externalPath: null,
+        uiRouterKey: "home",
+        menuAttached: true,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.812Z",
+        updatedAt: "2022-01-14T13:36:29.430Z",
+        related: {
+            id: 1,
+            related_id: "1",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.800Z",
+            updatedAt: "2021-12-31T10:04:54.800Z",
+            navigationItemId: 56,
+        },
+        parent: null,
+    }),
+    findMany: async ({where}) => [{
+        id: 1,
+        title: "home",
+        type: "INTERNAL",
+        path: "home1",
+        externalPath: null,
+        uiRouterKey: "home",
+        menuAttached: true,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.812Z",
+        updatedAt: "2022-01-14T13:36:29.430Z",
+        master: 1, 
+        related: {
+            id: 1,
+            related_id: "1",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.800Z",
+            updatedAt: "2021-12-31T10:04:54.800Z",
+            navigationItemId: 56,
+        },
+        parent: null,
+    }, {
+        id: 2,
+        title: "side",
+        type: "INTERNAL",
+        path: "side",
+        externalPath: null,
+        uiRouterKey: "side",
+        menuAttached: false,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.824Z",
+        updatedAt: "2021-12-31T12:47:20.508Z",
+        master: 1,
+        related: {
+            id: 2,
+            related_id: "2",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.823Z",
+            updatedAt: "2021-12-31T10:04:54.823Z",
+            navigationItemId: 57,
+        },
+        parent: {
+            id: 1,
+            title: "home",
+            type: "INTERNAL",
+            path: "home1",
+            externalPath: null,
+            uiRouterKey: "home",
+            menuAttached: true,
+            order: 1,
+            createdAt: "2021-12-31T10:04:54.812Z",
+            updatedAt: "2022-01-14T13:36:29.430Z",
+        },
+    }].filter(item => isMatch(item, where)),
+};
+
+const pageModelMock = {
+    findOne: async ({ where }) => ({
+        "id": 1,
+        "attributes": {
+            "title": "Page nr 1",
+            "createdAt": "2022-01-19T08:22:31.244Z",
+            "updatedAt": "2022-01-19T08:22:31.244Z",
+            "publishedAt": null
+        }
+    }),
+    findMany: async ({ where }) => [{
+            "id": 1,
+            "attributes": {
+                "title": "Page nr 1",
+                "createdAt": "2022-01-19T08:22:31.244Z",
+                "updatedAt": "2022-01-19T08:22:31.244Z",
+                "publishedAt": null
+            }
+        }, {
+            "id": 2,
+            "attributes": {
+                "title": "Page nr 2",
+                "createdAt": "2022-01-19T08:22:50.821Z",
+                "updatedAt": "2022-01-19T08:22:50.821Z",
+                "publishedAt": null
+            }
+        }]
+
+};
+
+const plugins = (strapi) => ({
+    navigation: {
+        get services() { return require('../server/services') },
+        service: (key) => (require('../server/services'))[key]({ strapi }),
+        get contentTypes() { return require('../server/content-types') },
+        contentType: (key) => preparePluginContentType(require('../server/content-types')[key].schema, 'navigation'),
+        config: (key) => ({
+            ...require('../server/config').default,
+            contentTypes: ['api::pages.pages'],
+        })[key],
+    }
+});
+
+const contentTypes = {
+    'api::pages.pages': {
+        ...require('./pages.settings.json'),
+        uid: 'api::pages.pages',
+        modelName: 'page',
+    },
+};
+
+const preparePluginContentType = (schema, plugin) => {
+    const { name } = schema.info;
+
+    return {
+        ...schema,
+        uid: `plugin::${plugin}.${name}`,
+        modelName: name,
+    }
+}
+
+const strapiFactory = (plugins, contentTypes) => ({
+    get plugins() { return plugins(strapi) },
+    plugin: (name) => plugins(strapi)[name],
+    get contentTypes() { return contentTypes },
+    contentType: (key) => contentTypes[key],
+    query: (model) => {
+        switch (model) {
+            case 'plugin::navigation.navigation':
+                return masterModelMock;
+            case 'plugin::navigation.navigation-item':
+                return itemModelMock;
+            case 'api::pages.pages':
+                return pageModelMock;
+            default:
+                return {
+                    findOne: () => ({}),
+                    findMany: () => [],
+                }
+        }
+    }
+});
+
+const setupStrapi = () => {
+    Object.defineProperty(global, 'strapi', { value: strapiFactory(plugins, contentTypes) });
+}
+
+module.exports = { setupStrapi };

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,21 @@ 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: ${props.theme.spaces[1]};
+			margin: 0px ${props.theme.spaces[3]};
+			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

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Typography } from '@strapi/design-system/Typography';
+import { Icon } from '@strapi/design-system/Icon';
 import PencilIcon from '@strapi/icons/Pencil';
 import TrashIcon from '@strapi/icons/Trash';
 import RefreshIcon from '@strapi/icons/Refresh';
@@ -12,14 +13,14 @@ 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 (
 		<Wrapper>
 			<Flex alignItems="center">
-				{icon}
+				<Icon as={icon} />
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
@@ -27,23 +28,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,69 @@ 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
+                  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}
@@ -92,10 +130,12 @@ const Item = (props) => {
         onItemRestore={onItemRestore}
         error={error}
         allowedLevels={allowedLevels}
-        isParentAttachedToMenu={true}
+        isParentAttachedToMenu={menuAttached}
         items={item.items}
         level={level + 1}
         levelPath={absolutePath}
+        contentTypes={contentTypes}
+        contentTypesNameFields={contentTypesNameFields}
       />
       }
     </Wrapper>
@@ -110,7 +150,6 @@ Item.propTypes = {
     uiRouterKey: PropTypes.string,
     path: PropTypes.string,
     externalPath: PropTypes.string,
-    audience: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
     related: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     menuAttached: PropTypes.bool
   }).isRequired,
@@ -121,6 +160,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;