strapi-plugin-navigation 1.1.2 → 2.0.0-beta.1

package/README.md

@@ -1,4 +1,4 @@
-# Strapi - Navigation plugin
+# Strapi v4 - Navigation plugin - BETA
 
 <p align="center">
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
@@ -21,7 +21,10 @@ A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provid
 - Tree (nested)
 - RFR (ready for handling by Redux First Router)
 
-<img src="public/assets/preview.png" alt="UI preview" />
+### 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)
 
 ### ⏳ Installation
 
@@ -55,10 +58,9 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v3.6.8 (recently tested)
-- Strapi v3.x
+- Strapi v4.0.2 (recently tested)
 
-(This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)
+(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.)
 
 **We recommend always using the latest version of Strapi to start your new projects**.
 
@@ -73,22 +75,40 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 ## Content Type model relation to Navigation Item
 
-We can define in `config/plugins.js`
-```js
-  navigation: {
-    ...
-    relatedContentTypes: [
-      'application::pages.pages'
-    ],
-    ...
-  },
+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/plugins.js` or `config/<env>/plugins.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+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.
 
 ```js
     ...
+    plugins: {
       navigation: {
         additionalFields: ['audience'],
         allowedLevels: 2,
@@ -98,6 +118,7 @@ To setup the plugin properly we recommend to put following snippet as part of `c
         },
         gql: { ... }
       },
+    },
     ...
 ```
 

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

@@ -1,7 +1,6 @@
 import styled from "styled-components";
-import { Button } from "@buffetjs/styles";
-
-import { colors } from "strapi-helper-plugin";
+import { Box } from '@strapi/design-system/Box';
+import { Button } from "@strapi/design-system/Button";
 
 const EmptyView = styled.div`
   display: flex;
@@ -11,24 +10,16 @@ const EmptyView = styled.div`
   justify-content: center;
   padding-left: 2rem;
   padding-right: 2rem;
-  padding-bottom: ${(props) => (props.fixPosition ? "8rem" : 0)};
+  padding-bottom: "8rem" };
 
   font-size: 2rem;
   font-weight: 600;
-  color: ${colors.leftMenu.grey};
+  color: ${({ theme }) => theme.colors.neutral600};
   text-align: center;
 
-  svg {
-    margin-bottom: 1rem;
-  }
-
-  ${Button} {
-    margin-top: 2rem;
-
-    svg {
-      margin-bottom: 0;
-    }
-  }
+	> {
+		margin: 1rem;
+	}
 `;
 
 export default EmptyView;

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Badge } from '@strapi/design-system/Badge';
+
+const ItemCardBadge = styled(Badge)`
+		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]}
+`;
+
+export default ItemCardBadge;

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

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { CardTitle } from '@strapi/design-system/Card';
+
+const CardItemTitle = styled(CardTitle)`
+	width: 100%;
+	
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	
+	color: ${({ theme }) => theme.colors.neutral800};
+	font-size: ${({ theme }) => theme.fontSizes[2]};
+	font-weight: ${({ theme }) => theme.fontWeights.bold};
+
+	> div > * {
+			margin: 0px ${({ theme }) => theme.spaces[1]};
+	}
+`;
+
+export default CardItemTitle;

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

@@ -0,0 +1,59 @@
+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 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 { formatMessage } = useIntl();
+
+	return (
+		<Wrapper>
+			<Flex alignItems="center">
+				{icon}
+				<Typography variant="omega" fontWeight="bold">
+					{title}
+				</Typography>
+				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
+					{path}
+				</Typography>
+			</Flex>
+			<Flex alignItems="center">
+				{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>
+				}
+
+				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<PencilIcon />} />
+				{removed ?
+					<IconButton onClick={onItemRestore} label="Restore" icon={<RefreshIcon />} /> :
+					<IconButton onClick={onItemRemove} label="Remove" icon={<TrashIcon />} />
+				}
+			</Flex>
+		</Wrapper>
+	);
+}
+
+export default ItemCardHeader;

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

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+position: relative;
+margin-top: ${({theme}) => theme.spaces[2]};
+margin-left: ${({ theme, level }) => level && theme.spaces[8]}};
+
+${({ level, theme, isLast }) => level && `
+	&::before {
+		${!isLast && 'content: "";'}
+		display: block;
+		top: ${theme.spaces[1]};
+		left: -24px;
+		position: absolute;
+		height: calc(100% + ${theme.spaces[2]});
+		width: 19px;
+		border: 0px solid transparent;
+		border-left: 4px solid ${theme.colors.neutral300};
+	}
+
+	&::after {
+		content: "";
+		display: block;
+		height: 22px;
+		width: 19px;
+		position: absolute;
+		top: ${theme.spaces[1]};
+		left: -${theme.spaces[6]};
+		
+		background: transparent;
+		border: 4px solid ${theme.colors.neutral300};
+		border-top: transparent;
+		border-right: transparent;
+		border-radius: 0 0 0 100%;
+	}
+`};
+`;
+
+export default Wrapper;

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

@@ -1,42 +1,35 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { isEmpty, isNil, isNumber } from 'lodash';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@buffetjs/core';
-import CardWrapper from './CardWrapper';
-import CardItem from './CardItem';
-import ItemFooter from '../ItemFooter';
-import { navigationItemType } from '../../containers/View/utils/enums';
-import CardItemPath from './CardItemPath';
-import CardItemTitle from './CardItemTitle';
-import CardItemLevelAdd from './CardItemLevelAdd';
-import List from '../List';
-import CardItemLevelWrapper from './CardItemLevelWrapper';
-import CardItemRestore from './CardItemRestore';
-import ItemOrdering from '../ItemOrdering';
+import React from 'react';
+import { isEmpty, isNumber } from 'lodash';
+import { useIntl } from "react-intl";
+
+import { Card, CardBody } from '@strapi/design-system/Card';
+import { Divider } from '@strapi/design-system/Divider';
+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 { 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 '../../containers/View/utils/parsers';
 
 const Item = (props) => {
-  const { formatMessage } = useIntl();
-
   const {
     item,
+    isLast = false,
     level = 0,
     levelPath = '',
     allowedLevels,
-    contentTypesNameFields,
-    contentTypes,
     relatedRef,
-    isFirst = false,
-    isLast = false,
     isParentAttachedToMenu,
-    onItemClick,
-    onItemReOrder,
-    onItemRestoreClick,
-    onItemLevelAddClick,
+    onItemLevelAdd,
+    onItemRemove,
+    onItemRestore,
+    onItemEdit,
     error,
   } = props;
 
@@ -45,108 +38,71 @@ const Item = (props) => {
     title,
     type,
     path,
-    relatedType,
     removed,
     externalPath,
     menuAttached,
   } = item;
 
-  const isRelationDefined = !isNil(relatedRef);
-
-  const formatRelationName = () =>
-    isRelationDefined ? extractRelatedItemLabel(relatedRef, contentTypesNameFields) : '';
-
-  const footerProps = {
-    contentTypes,
-    type: type || navigationItemType.INTERNAL,
-    removed,
-    menuAttached,
-    relatedRef,
-    relatedType,
-    attachButtons: !(isFirst && isLast),
-    formatRelationName,
-  };
-
-  const cardTitle = isRelationDefined && !title ? formatRelationName() : title;
+  const { formatMessage } = useIntl();
+  const isExternal = type === navigationItemType.EXTERNAL;
+  const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
-  const isExternal = item.type === navigationItemType.EXTERNAL;
-  const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
   const hasChildren = !isEmpty(item.items) && !isExternal;
-
-  const handleReOrder = (e, moveBy = 0) => onItemReOrder(e, {
-    ...item,
-    relatedRef,
-  }, moveBy);
-
-  const hasError = error?.parentId === item.parent && error?.errorTitles.includes(cardTitle);
+  const absolutePath = isExternal ? undefined : `${levelPath === '/' ? '' : levelPath}/${path === '/' ? '' : path}`;
 
   return (
-    <CardWrapper
-      level={level}
-      error={hasError}
-    >
-      <CardItem
-        hasChildren={hasChildren}
-        removed={removed}
-        hasError={hasError}
-        onClick={(e) =>
-          removed ? null : onItemClick(e, {
-            ...item,
-            isMenuAllowedLevel,
-            isParentAttachedToMenu,
-          }, levelPath)
-        }
-      >
-        {removed && (<CardItemRestore>
-          <Button
-            onClick={e => onItemRestoreClick(e, item)}
-            color="secondary"
-            label={formatMessage(getTrad('popup.item.form.button.restore'))}
+    <Wrapper level={level} isLast={isLast}>
+      <Card style={{ width: "728px", zIndex: 1, position: "relative" }}>
+        <CardBody>
+          <ItemCardHeader
+            title={title}
+            path={isExternal ? externalPath : absolutePath}
+            icon={isExternal ? <EarthIcon /> : <LinkIcon />}
+            isPublished={isPublished}
+            onItemRemove={() => onItemRemove(item)}
+            onItemEdit={() => onItemEdit({
+              ...item,
+              isMenuAllowedLevel,
+              isParentAttachedToMenu,
+            }, levelPath, isParentAttachedToMenu)}
+            onItemRestore={() => onItemRestore(item)}
+            removed={removed}
           />
-        </CardItemRestore>)}
-        <CardItemTitle>{cardTitle}</CardItemTitle>
-        <CardItemPath>
-          {isExternal ? externalPath : absolutePath}
-        </CardItemPath>
-        <ItemFooter {...footerProps} />
-        <ItemOrdering
-          isFirst={isFirst}
-          isLast={isLast}
-          onChangeOrder={handleReOrder}
-        />
-      </CardItem>
-      {!(isExternal || removed) && (
-        <CardItemLevelAdd
-          color={isNextMenuAllowedLevel ? 'primary' : 'secondary'}
-          icon={<FontAwesomeIcon icon={faPlus} size="3x" />}
-          onClick={(e) => onItemLevelAddClick(e, viewId, isNextMenuAllowedLevel, levelPath, menuAttached)}
-          menuLevel={isNextMenuAllowedLevel}
-        />
-      )}
-      {hasChildren && !removed && (
-        <List
-          items={item.items}
-          onItemClick={onItemClick}
-          onItemReOrder={onItemReOrder}
-          onItemRestoreClick={onItemRestoreClick}
-          onItemLevelAddClick={onItemLevelAddClick}
-          as={CardItemLevelWrapper}
-          level={level + 1}
-          levelPath={absolutePath}
-          allowedLevels={allowedLevels}
-          isParentAttachedToMenu={menuAttached}
-          contentTypesNameFields={contentTypesNameFields}
-          contentTypes={contentTypes}
-          error={error}
-        />
-      )}
-    </CardWrapper>
+        </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>
+      </Card>
+      {hasChildren && !removed && <List
+        onItemLevelAdd={onItemLevelAdd}
+        onItemRemove={onItemRemove}
+        onItemEdit={onItemEdit}
+        onItemRestore={onItemRestore}
+        error={error}
+        allowedLevels={allowedLevels}
+        isParentAttachedToMenu={true}
+        items={item.items}
+        level={level + 1}
+        levelPath={absolutePath}
+      />
+      }
+    </Wrapper>
+
   );
 };
 
 Item.propTypes = {
-  item: PropTypes.objectOf({
+  item: PropTypes.shape({
     title: PropTypes.string,
     type: PropTypes.string,
     uiRouterKey: PropTypes.string,
@@ -154,19 +110,15 @@ Item.propTypes = {
     externalPath: PropTypes.string,
     audience: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
     related: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    menuAttached: PropTypes.bool,
+    menuAttached: PropTypes.bool
   }).isRequired,
   relatedRef: PropTypes.object,
-  contentTypes: PropTypes.array,
-  contentTypesNameFields: PropTypes.object.isRequired,
   level: PropTypes.number,
   levelPath: PropTypes.string,
-  isFirst: PropTypes.bool,
-  isLast: PropTypes.bool,
   isParentAttachedToMenu: PropTypes.bool,
-  onItemClick: PropTypes.func.isRequired,
-  onItemRestoreClick: PropTypes.func.isRequired,
-  onItemLevelAddClick: PropTypes.func.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
+  onItemLevelAdd: PropTypes.func.isRequired,
+  onItemRemove: PropTypes.func.isRequired,
 };
 
-export default Item;
+export default Item;

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

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: relative;
+  ${({ level, theme }) => level && `
+    &::before {
+      content: "";
+      display: block;
+      height: ${theme.spaces[3]};
+      width: 19px;
+
+      position: absolute;
+      top: -${theme.spaces[2]};
+      left: ${theme.spaces[4]};
+      
+      border: 0px solid transparent;
+      border-left: 4px solid ${theme.colors.neutral300};
+    }
+  `};
+`;
+
+export default Wrapper;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+import Item from "../Item";
+import Wrapper from "./Wrapper";
+
+const List = ({
+  allowedLevels,
+  error,
+  isParentAttachedToMenu = false,
+  items,
+  level = 0,
+  levelPath = '',
+  onItemEdit,
+  onItemLevelAdd,
+  onItemRemove,
+  onItemRestore,
+}) => (
+  <Wrapper level={level}>
+    {items.map((item, n) => {
+      const { relatedRef, ...itemProps } = item
+      return (
+        <Item
+          key={`list-item-${item.viewId || n}`}
+          item={itemProps}
+          isLast={n === items.length - 1}
+          relatedRef={relatedRef}
+          level={level}
+          levelPath={levelPath}
+          isParentAttachedToMenu={isParentAttachedToMenu}
+          allowedLevels={allowedLevels}
+          onItemRestore={onItemRestore}
+          onItemLevelAdd={onItemLevelAdd}
+          onItemRemove={onItemRemove}
+          onItemEdit={onItemEdit}
+          error={error}
+        />
+      );
+    })}
+  </Wrapper>
+);
+
+List.propTypes = {
+  allowedLevels: PropTypes.number,
+  isParentAttachedToMenu: PropTypes.bool,
+  items: PropTypes.array,
+  level: PropTypes.number,
+  onItemLevelAdd: PropTypes.func.isRequired,
+  onItemRemove: PropTypes.func.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
+  onItemRestore: PropTypes.func.isRequired,
+};
+
+export default List;

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

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