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

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

@@ -1,43 +1,37 @@
-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,
+    displayChildren,
   } = props;
 
   const {
@@ -45,108 +39,72 @@ 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 hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
   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);
 
   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}
+            isExternal={isExternal}
+            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 +112,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,56 @@
+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,
+  displayFlat,
+}) => (
+  <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}
+          displayChildren={displayFlat}
+        />
+      );
+    })}
+  </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/components/Search/index.js

@@ -1,86 +1,49 @@
-/*
- *
- * Search
- *
- */
-
-import React, { memo } from "react";
-import { isEmpty, upperFirst } from "lodash";
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import { HeaderSearch } from "strapi-helper-plugin";
-import getTrad from "../../utils/getTrad";
-
-const WAIT = 400;
-
-class Search extends React.Component {
-  state = { value: this.props.initValue };
-
-  timer = null;
-
-  componentDidUpdate(prevProps) {
-    const { model, value } = this.props;
-
-    if (
-      prevProps.model !== model ||
-      (!isEmpty(prevProps.value) && isEmpty(value))
-    ) {
-      this.resetState();
+import React, { useRef, useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+import SearchIcon from "@strapi/icons/Search";
+import { getTradId } from '../../translations';
+
+const Search = ({ value, setValue }) => {
+	const [isOpen, setIsOpen] = useState(!!value);
+	const wrapperRef = useRef(null);
+	const { formatMessage } = useIntl();
+
+	useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        wrapperRef.current.querySelector('input').focus();
+      }, 0);
     }
-  }
-
-  resetState = () => this.setState({ value: "" });
-
-  handleChange = ({ target }) => {
-    clearTimeout(this.timer);
-    this.setState({ value: target.value });
-    this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
-  };
-
-  handleClick = () => {
-    this.setState({ value: "" });
-    this.triggerChange("");
-  };
-
-  triggerChange = (value) =>
-    this.props.changeParams({
-      target: {
-        name: "_q",
-        value,
-      },
-    });
-
-  render() {
-    const { model } = this.props;
-    const { value } = this.state;
-
-    return (
-      <FormattedMessage id={getTrad("components.Search.placeholder")}>
-        {(placeholder) => (
-          <HeaderSearch
-            label={upperFirst(model)}
-            onChange={this.handleChange}
-            onClear={this.handleClick}
-            placeholder={placeholder}
-            value={value}
-          />
-        )}
-      </FormattedMessage>
-    );
-  }
+	}, [isOpen]);
+	
+	if (isOpen) {
+		return (
+			<div ref={wrapperRef}>
+				<SearchForm>
+					<Searchbar
+						name="searchbar"
+						onClear={() => setValue('')}
+						value={value}
+						size="S"
+						onChange={(e) => setValue(e.target.value)}
+						clearLabel="Clearing the search"
+						placeholder={formatMessage({
+							id: getTradId('popup.item.form.audience.placeholder'),
+							defaultMessage: 'Type to start searching...',
+						})}
+					>
+						Search for navigation items
+					</Searchbar>
+				</SearchForm>
+			</div>
+		);
+	} else {
+		return (
+			<IconButton icon={<SearchIcon />} onClick={() => setIsOpen(!isOpen)} />
+		);
+	}
 }
 
-Search.defaultProps = {
-  changeParams: () => {},
-  model: "",
-  value: "",
-};
-
-Search.propTypes = {
-  changeParams: PropTypes.func,
-  initValue: PropTypes.string.isRequired,
-  model: PropTypes.string,
-  value: PropTypes.string,
-};
-
-export default memo(Search);
+export default Search;

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