strapi-plugin-navigation 1.1.0 → 2.0.0-beta.2

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**.
 

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;

package/admin/src/index.js

@@ -1,49 +1,53 @@
-import pluginPkg from "../../package.json";
-import pluginId from "./pluginId";
-import App from "./containers/App";
-import Initializer from "./containers/Initializer";
-import lifecycles from "./lifecycles";
-import trads from "./translations";
-import pluginPermissions from "./permissions";
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import PluginIcon from './components/PluginIcon';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
 
-export default (strapi) => {
-  const pluginDescription =
-    pluginPkg.strapi.description || pluginPkg.description;
-  const { icon, name } = pluginPkg.strapi;
+const name = pluginPkg.strapi.name;
 
-  const plugin = {
-    blockerComponent: null,
-    blockerComponentProps: {},
-    description: pluginDescription,
-    icon,
-    id: pluginId,
-    initializer: Initializer,
-    injectedComponents: [],
-    isReady: false,
-    isRequired: pluginPkg.strapi.required || false,
-    layout: null,
-    lifecycles,
-    leftMenuLinks: [],
-    leftMenuSections: [],
-    mainComponent: App,
-    name,
-    preventComponentRendering: false,
-    trads,
-    menu: {
-      pluginsSectionLinks: [
-        {
-          destination: `/plugins/${pluginId}`,
-          icon,
-          name,
-          label: {
-            id: `${pluginId}.plugin.name`,
-            defaultMessage: "NAVIGATION",
-          },
-          permissions: pluginPermissions.main,
-        },
-      ],
-    },
-  };
+export default {
+  register(app) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: 'Navigation',
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App');
 
-  return strapi.registerPlugin(plugin);
+        return component;
+      },
+      permissions: [],
+    });
+    app.registerPlugin({
+      id: pluginId,
+      name,
+    });
+  },
+  bootstrap() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -0,0 +1,31 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+ import React, { Suspense, lazy } from "react";
+ import { Switch, Route } from "react-router-dom";
+ import { NotFound, LoadingIndicatorPage } from "@strapi/helper-plugin";
+ // Utils
+ import DataManagerProvider from "../DataManagerProvider";
+ import pluginId from "../../pluginId";
+ // Containers
+ const View = lazy(() => import("../View"));
+ 
+ const App = () => {
+   return (
+     <DataManagerProvider>
+       <Suspense fallback={<LoadingIndicatorPage />}>
+         <Switch>
+           <Route path={`/plugins/${pluginId}`} component={View} exact />
+           <Route component={NotFound} />
+         </Switch>
+       </Suspense>
+     </DataManagerProvider>
+   );
+ };
+ 
+ export default App;
+