strapi-plugin-navigation 2.0.0-beta.5 → 2.0.2

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,17 +81,28 @@ 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**.
 
 ## 🔧 Configuration
-Config for this plugin is stored as a part of `config/plugins.js` or `config/<env>/plugins.js` file. You can use following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
+
+### In `v2.0.3` and newer
+
+Version `2.0.3` introduces the intuitive **Settings** page which you can easily access via `Strapi Settings -> Section: Navigation Plugin -> Configuration`. On the dedicated page, you will be able to set up all crucial properties which drive the plugin and customize each individual collection for which **Navigation plugin** should be enabled.
+
+> *Note*
+> The default configuration for your plugin is fetched from `config/plugins.js` or, if the file is not there, directly from the plugin itself. If you would like to customize the default state to which you might revert, please follow the next section.
+
+### In `v2.0.2` and older + default configuration state for `v2.0.3` and newer
+
+Config for this plugin is stored as a part of the `config/plugins.js` or `config/<env>/plugins.js` file. You can use the following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
+
+> *Note v2.0.3 and newer only*
+> Changing this file will not automatically change plugin configuration. To synchronize plugin's config with plugins.js file, it is necessary to restore configuration through the settings page 
 
 ```js
     module.exports = ({ env }) => ({
@@ -100,13 +124,16 @@ Config for this plugin is stored as a part of `config/plugins.js` or `config/<en
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
-- `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
+- `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`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#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 Configuration
+Using navigation with GraphQL requires both plugins to be installed and working. You can find installation 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:
+
+> **Important!**
+> If you're using `config/plugins.js` to configure your plugins , please put `navigation` property before `graphql`. Otherwise types are not going to be properly added to GraphQL Schema. That's because of dynamic types which base on plugin configuration which are added on `bootstrap` stage, not `register`. This is not valid if you're using `graphql` plugin without any custom configuration, so most of cases in real.
 
 ```gql
 master: Int
@@ -131,8 +158,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 +179,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 +231,7 @@ where `Page` and `UploadFile` are your type names for the **Content Types** you'
 }
 ```
 
-## Public API specification
+## 🕸️ Public API specification
 
 ### Render
 
@@ -378,16 +411,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,207 @@
+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: () => [],
+                }
+        }
+    },
+    store: ({ type, name }) => {
+        if (type === 'plugin' && name === 'navigation') {
+            return {
+                get: ({ key }) => key === 'config' ? {
+                    ...require('../server/config').default,
+                    contentTypes: ['api::pages.pages']
+                } : null,
+                set: () => null,
+            }
+        }
+    }
+});
+
+const setupStrapi = () => {
+    Object.defineProperty(global, 'strapi', { value: strapiFactory(plugins, contentTypes) });
+}
+
+module.exports = { setupStrapi };

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

@@ -0,0 +1,56 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system/Button';
+import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
+import { ExclamationMarkCircle, Check } from '@strapi/icons';
+import { getMessage } from '../../utils';
+
+const ConfirmationDialog = ({
+	isVisible = false,
+	isActionAsync = false,
+	children,
+	onConfirm,
+	onCancel,
+	header,
+	labelCancel,
+	labelConfirm,
+	iconConfirm
+}) => (
+	<Dialog onClose={onCancel} title={header || getMessage('components.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
+		<DialogBody icon={<ExclamationMarkCircle />}>
+			<Stack size={2}>
+				<Flex justifyContent="center">
+					<Typography id="dialog-confirm-description">{children || getMessage('components.confirmation.dialog.description')}</Typography>
+				</Flex>
+			</Stack>
+		</DialogBody>
+		<DialogFooter startAction={<Button onClick={onCancel} variant="tertiary" disabled={isActionAsync}>
+			{labelCancel || getMessage('components.confirmation.dialog.button.cancel', 'Cancel')}
+		</Button>} endAction={<Button onClick={onConfirm} variant="danger-light" startIcon={iconConfirm || <Check />} disabled={isActionAsync}>
+			{labelConfirm || getMessage('components.confirmation.dialog.button.confirm', 'Confirm')}
+		</Button>} />
+	</Dialog>
+);
+
+ConfirmationDialog.propTypes = {
+	isVisible: PropTypes.bool,
+	isActionAsync: PropTypes.bool,
+	children: PropTypes.string.isRequired,
+	header: PropTypes.string,
+	labelCancel: PropTypes.string,
+	labelConfirm: PropTypes.string,
+	iconConfirm: PropTypes.object,
+	onConfirm: PropTypes.func.isRequired,
+	onCancel: PropTypes.func.isRequired,
+};
+
+export default ConfirmationDialog;

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

@@ -1,25 +1,20 @@
 import React from 'react';
-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 PencilIcon from '@strapi/icons/Pencil';
-import TrashIcon from '@strapi/icons/Trash';
-import RefreshIcon from '@strapi/icons/Refresh';
+import { Icon } from '@strapi/design-system/Icon';
+import { Pencil, Trash, Refresh } from '@strapi/icons/';
 
 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 { formatMessage } = useIntl();
+import { getMessage } from '../../../utils';
 
+const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore }) => {
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				{icon}
+				<Icon as={icon} />
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
@@ -27,29 +22,21 @@ 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>
+						{getMessage("components.navigationItem.badge.removed")}
+					</ItemCardBadge>)
 				}
 
-				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<PencilIcon />} />
+				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<Pencil />} />
 				{removed ?
-					<IconButton onClick={onItemRestore} label="Restore" icon={<RefreshIcon />} /> :
-					<IconButton onClick={onItemRemove} label="Remove" icon={<TrashIcon />} />
+					<IconButton onClick={onItemRestore} label="Restore" icon={<Refresh />} /> :
+					<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
 				}
 			</Flex>
 		</Wrapper>

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);
+`;