strapi-plugin-navigation 2.0.0-beta.3 → 2.0.0

package/README.md

@@ -1,34 +1,52 @@
-# Strapi v4 - Navigation plugin - BETA
-
-<p align="center">
+<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</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/npm/v/strapi-plugin-navigation/latest.svg" 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/strapi-plugin-navigation.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=master" alt="codecov.io" />
   </a>
-</p>
+</div>
+
+---
+
+<div style="margin: 20px 0" align="center">
+  <img style="width: 100%; height: auto;" src="public/assets/preview.png" alt="UI preview" />
+</div>
 
-A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides navigation / menu builder feature with their possibility to control the audience and different output structure renderers:
+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
 - Tree (nested)
 - RFR (ready for handling by Redux First Router)
 
-### Versions
+## ✨ Features
+
+- **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
+- **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
+
 
-- **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)
+## ⚙️ Versions
 
-### ⏳ Installation
+- **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)
 
-(Use **yarn** to install this plugin within your Strapi project (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).)
+## ⏳ Installation
+
+It's recommended to use **yarn** to install this plugin within your Strapi project. [You can install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).
 
 ```bash
 yarn add strapi-plugin-navigation@latest
@@ -49,87 +67,51 @@ yarn develop --watch-admin
 
 The **UI Navigation** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-
 Enjoy 🎉
 
-### 🖐 Requirements
+## 🖐 Requirements
 
-Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met">Installation Requirements</a>.
+Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/installation/cli.html#preparing-the-installation">Installation Requirements</a>.
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
+- Strapi v4.0.7 (recently tested)
+- Strapi v4.x
 
-(This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but 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**.
 
-## Features
-
-- **Navigation Public API:** Simple and ready for use API endpoint for getting 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
-- **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
-
-
-## Content Type model relation to Navigation Item
-
-To enable Content Type to work with Navigation Item, you've to add following field to your model `*.settings.json`:
-
-```
-    "navigation": {
-      "model": "navigationitem",
-      "plugin": "navigation",
-      "via": "related",
-      "configurable": false,
-      "hidden": true
-    }
-```
-
-inside the `attributes` section like in example below:
-
-```
-    "attributes": {
-        ...,
-        "navigation": {
-            "model": "navigationitem",
-            "plugin": "navigation",
-            "via": "related",
-            "configurable": false,
-            "hidden": true
-        },
-        ...
-    },
-```
-
-## Configuration
-To setup the plugin properly we recommend to put following snippet as part of `config/custom.js` or `config/<env>/custom.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+## 🔧 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. 
 
 ```js
-    ...
-    plugins: {
-      navigation: {
-        additionalFields: ['audience'],
-        allowedLevels: 2,
-        contentTypesNameFields: {
-          'blog_posts': ['altTitle'],
-          'pages': ['title'],
-        },
-        gql: { ... }
-      },
-    },
-    ...
+    module.exports = ({ env }) => ({
+        // ...
+        navigation: {
+            enabled: true,
+            config: {
+                additionalFields: ['audience'],
+                contentTypes: ['api::page.page'],
+                contentTypesNameFields: {
+                    'api::page.page': ['title']
+                },
+                allowedLevels: 2,
+                gql: {...},
+            }
+        }
+    });
 ```
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
 - `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
-- `contentTypesNameFields` - Definition of content type title fields like `'content_type_name': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`
+- `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
-To properly configure GQL to work with navigation you should provide `gql` prop which should contain union types which will be used for 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 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
 master: Int
@@ -137,11 +119,11 @@ items: [NavigationItem]
 related: NavigationRelated
 ```
 
-as follows:   
+This prop should look as follows:   
 
 ```js
 gql: {
-    navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
+    navigationItemRelated: ['<your GQL related content types>'],
 },
 ```
 
@@ -149,13 +131,19 @@ for example:
 
 ```js
 gql: {
-        navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
+    navigationItemRelated: ['Page', 'UploadFile'],
 },
 ```
-where `Pages` and `UploadFile` are your types to the **Content Types** you're referring by navigation items relations. 
+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
 ```
@@ -169,8 +157,8 @@ where `Pages` and `UploadFile` are your types to the **Content Types** you're re
     "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": []
 }
@@ -221,17 +209,17 @@ where `Pages` and `UploadFile` are your types to the **Content Types** you're re
 }
 ```
 
-## Public API specification
+## 🕸️ Public API specification
 
 ### Render
 
-`GET <host>/navigation/render/<idOrSlug>?type=<type>`
+`GET <host>/api/navigation/render/<idOrSlug>?type=<type>`
 
 Return a rendered navigation structure depends on passed type (`tree`, `rfr` or nothing to render as `flat/raw`).
 
 *Note: The ID of navigation by default is `1`, that's for future extensions and multi-navigation feature.*
 
-**Example URL**: `https://localhost:1337/navigation/render/1`
+**Example URL**: `https://localhost:1337/api/navigation/render/1`
 
 **Example response body**
 
@@ -260,7 +248,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=tree`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=tree`
 
 **Example response body**
 
@@ -296,7 +284,7 @@ Return a rendered navigation structure depends on passed type (`tree`, `rfr` or
 ]
 ```
 
-**Example URL**: `https://localhost:1337/navigation/render/1?type=rfr`
+**Example URL**: `https://localhost:1337/api/navigation/render/1?type=rfr`
 
 **Example response body**
 
@@ -387,30 +375,11 @@ For collection types it will be read from content type's attribute name `templat
 
 For single types a global name of this content type will be used as a template name or it can be set manually with an option named `templateName`.
 
-## Audit log
-If you would like to use the [Strapi Molecules Audit Log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log) plugin you've to first install and then add in you `config/middleware.js` following section enable it:
-```js
-{
-    'audit-log': {
-          enabled: true,
-          exclude: [],
-          map: [
-            {
-              pluginName: 'navigation',
-              serviceName: 'navigation',
-              Class: Navigation,
-            },
-          ]
-        }
-}
-```
-As a last step you've to provide the Navigation class to let Audit Log use it. To not provide external & hard dependencies we've added the example of class code in the `examples/audit-log-integration.js` .
-
-## Examples
+## 🧩 Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-navigation) repository.
 
-## Q&A
+## 💬 Q&A
 
 ### Content Types
 
@@ -418,18 +387,19 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 **A:** As an authors of the plugin we're not supporting any editing of mentioned content types via built-in Strapi Content Manager. Plugin delivers highly customized & extended functionality which might be covered only by dedicated editor UI accessible via **Plugins Section > UI Navigation**. Only issues that has been recognized there, are in the scope of support we've providing.
 
-## Contributing
+## 🤝 Contributing
 
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
-## Community support
+## 👨‍💻 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
+## 📝 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: 0 4px;
+			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, 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, isPublished, onItemRemove,
 					{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>
-					: <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);
+`;