@blaze-cms/plugin-admin-core-ui 0.132.0 → 0.133.0-project-admin-customisations.0

package/src/components/Layout/components/Grid/Grid.js

@@ -1,66 +1,27 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useApolloClient } from '@apollo/client';
-import { getQuery, MainContextProvider } from '@blaze-cms/admin-ui-utils';
 import SideBar from '../../../SideBar';
 
-const Grid = ({ children, isOpenMenu, onMenuClick, userData }) => {
-  const [menuItems, setMenuItems] = useState(null);
-  const client = useApolloClient();
-
-  useEffect(
-    () => {
-      (async () => {
-        const {
-          data: { getMenuItems }
-        } = await client.query({ query: getQuery('GET_MENU_ITEMS') });
-
-        const parsedMenuItems = getMenuItems.map(([key, { header, items }]) => [
-          key,
-          {
-            header,
-            items: items.map(item => ({ ...item, isDisplayedPrompt: true }))
-          }
-        ]);
-
-        if (!menuItems) {
-          setMenuItems(parsedMenuItems);
-        }
-      })();
-    },
-    [client, menuItems]
-  );
-
-  const updateItems = items => {
-    setMenuItems(items);
-  };
-
-  return menuItems ? (
-    <MainContextProvider value={{ menuItems, setMenuItems: items => updateItems(items) }}>
-      <div className="main-content grid grid--main-content">
-        <SideBar
-          isOpenMenu={isOpenMenu}
-          menuItems={menuItems}
-          onMenuClick={onMenuClick}
-          userData={userData}
-        />
-        {children}
-      </div>
-    </MainContextProvider>
-  ) : (
-    'loading'
-  );
-};
+const Grid = ({ children, isOpenMenu, onMenuClick, userData, simpleLayout }) => (
+  <div className="main-content grid grid--main-content">
+    {!simpleLayout && (
+      <SideBar isOpenMenu={isOpenMenu} onMenuClick={onMenuClick} userData={userData} />
+    )}
+    {children}
+  </div>
+);
 
 Grid.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   isOpenMenu: PropTypes.bool.isRequired,
   onMenuClick: PropTypes.func.isRequired,
-  userData: PropTypes.object
+  userData: PropTypes.object,
+  simpleLayout: PropTypes.bool
 };
 
 Grid.defaultProps = {
-  userData: {}
+  userData: {},
+  simpleLayout: false
 };
 
 export default Grid;

package/src/components/Menu/Icons/ChevronDown.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ChevronDown = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    width="20"
+    height="20"
+    stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  </svg>
+);
+
+export default ChevronDown;

package/src/components/Menu/Icons/ChevronUp.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const ChevronUp = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 22 22"
+    strokeWidth={1.5}
+    width="20"
+    height="20"
+    stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+  </svg>
+);
+
+export default ChevronUp;

package/src/components/Menu/Items/MenuActionItem.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const MenuActionItem = ({ item }) => {
+  const { label, icon: MenuSectionIcon, onClick, uri } = item;
+
+  const modifier = MenuSectionIcon ? '' : 'side-nav__list-link--noIcon';
+
+  return (
+    <li className="side-nav__list--item" key={item.label}>
+      <Link
+        to={uri}
+        className={`side-nav__list-link ${modifier}`}
+        onClick={() => {
+          if (onClick) {
+            onClick();
+          }
+        }}>
+        {MenuSectionIcon && (
+          <div className="side-nav__list-link--icon">
+            <MenuSectionIcon />
+          </div>
+        )}
+        <div className="side-nav__list-label">{label}</div>
+      </Link>
+    </li>
+  );
+};
+
+export default MenuActionItem;

package/src/components/Menu/Items/MenuItem.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import MenuLinkItem from './MenuLinkItem';
+
+const MenuItem = ({ item, RenderItems }) => {
+  const location = useLocation();
+  const { label, items, uri } = item;
+
+  if (label && uri) {
+    const isActive = location.pathname === uri;
+    return <MenuLinkItem item={item} isActive={isActive} root />;
+  }
+
+  if (label && items && Object.values(items).length > 0) {
+    const childrenMenu = Object.keys(items).map(key => items[key]);
+
+    const childrenComponents = childrenMenu.map(child => {
+      const { label: childLabel, uri: childUri } = child;
+      const isActive = location.pathname === childUri;
+
+      if (childLabel && childUri) {
+        return <MenuLinkItem item={child} isActive={isActive} root={false} />;
+      }
+
+      return null;
+    });
+
+    return <RenderItems item={item}>{childrenComponents}</RenderItems>;
+  }
+
+  if (!label && items) {
+    const childrenMenu = Object.keys(items).map(key => items[key]);
+
+    return childrenMenu.map(child => {
+      const { label: childLabel, uri: childUri } = child;
+      const isActive = location.pathname === childUri;
+
+      if (childLabel && childUri) {
+        return <MenuLinkItem item={child} isActive={isActive} root />;
+      }
+
+      return null;
+    });
+  }
+
+  return null;
+};
+
+export default MenuItem;

package/src/components/Menu/Items/MenuLinkItem.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const MenuLinkItem = ({ item, isActive, root = true }) => {
+  const { label, icon: MenuSectionIcon, uri } = item;
+
+  const modifier = MenuSectionIcon ? '' : 'side-nav__list-link--noIcon';
+
+  const activeModifier = isActive ? 'side-nav__list-link--active' : '';
+
+  return (
+    <li className="side-nav__list--item" key={item.label}>
+      <Link to={uri} className={`side-nav__list-link ${modifier} ${activeModifier}`}>
+        {MenuSectionIcon && (
+          <div className="side-nav__list-link--icon">
+            <MenuSectionIcon />
+          </div>
+        )}
+        <div className="side-nav__list-link--label">{label}</div>
+      </Link>
+    </li>
+  );
+};
+
+export default MenuLinkItem;

package/src/components/Menu/Menu.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import menuHandler from '../../utils/menu-handler-singleton';
+import MenuSection from './Section/MenuSection';
+
+const Menu = ({ children }) => {
+  const [config, setConfig] = useState();
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      await menuHandler.loadConfig();
+    };
+
+    loadConfig().then(() => setConfig(menuHandler.getAll()));
+  }, []);
+
+  const MenuSections = () => {
+    if (!config) return null;
+
+    return config.map(sections => {
+      if (!sections || !Array.isArray(sections) || !sections.length) {
+        return null;
+      }
+
+      const menuSections = sections.filter(section => section.items);
+
+      return menuSections.map(menuSection => <MenuSection items={menuSection} />);
+    });
+  };
+
+  return (
+    <div className="side-nav__block">
+      <ul className="side-nav__list">
+        <MenuSections />
+      </ul>
+    </div>
+  );
+};
+
+Menu.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+Menu.defaultProps = {
+  children: null
+};
+
+export default Menu;

package/src/components/Menu/Section/MenuSection.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MenuSectionItems from './MenuSectionItems';
+
+const MenuSection = ({ items, children }) => <MenuSectionItems sectionItems={items} />;
+
+MenuSection.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+};
+
+MenuSection.defaultProps = {
+  children: null
+};
+
+export default MenuSection;

package/src/components/Menu/Section/MenuSectionCollapsible.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import ChevronDown from '../Icons/ChevronDown';
+import ChevronUp from '../Icons/ChevronUp';
+
+const capitalise = s => {
+  if (typeof s !== 'string') return '';
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+const MenuSectionCollapsible = ({ name, item, children }) => {
+  const { label, loadOpen, icon: MenuSectionIcon, items } = item;
+  const [collapsed, setCollapsed] = useState(!loadOpen);
+
+  const CollapseIcon = () => (collapsed ? <ChevronDown /> : <ChevronUp />);
+
+  const handleClick = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const modifier = collapsed ? 'side-nav__list--item' : 'side-nav__list--item__selected';
+
+  const buttonModifier = collapsed ? 'side-nav__list-link' : 'side-nav__list-link--selected';
+
+  if (name) {
+    return (
+      <li className={modifier}>
+        <button type="button" className={buttonModifier} onClick={handleClick}>
+          <div className="side-nav__list-link--icon">{MenuSectionIcon && <MenuSectionIcon />}</div>
+          <div className="side-nav__list-link--wrapper">
+            <div className="side-nav__list-link--label">{capitalise(name)}</div>
+            <div className="side-nav__list-link--toggleCollapseIcon" role="button">
+              <CollapseIcon />
+            </div>
+          </div>
+        </button>
+        <div className="side-nav__list-link--children">{collapsed ? null : children}</div>
+      </li>
+    );
+  }
+
+  if (label && items && Object.keys(items).length > 0) {
+    return <li className={modifier}>{children}</li>;
+  }
+
+  if (label && items && Object.keys(items).length === 0) {
+    return (
+      <li className={modifier}>
+        <button type="button" className="side-nav__list-link" onClick={handleClick}>
+          <div className="side-nav__list-link--icon">{MenuSectionIcon && <MenuSectionIcon />}</div>
+          <div className="side-nav__list-label">{label}</div>
+        </button>
+      </li>
+    );
+  }
+
+  return null;
+};
+
+export default MenuSectionCollapsible;

package/src/components/Menu/Section/MenuSectionItem.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '../Items/MenuItem';
+import MenuSectionCollapsible from './MenuSectionCollapsible';
+
+const MenuSectionItem = ({ name, item }) => {
+  if (!item) return null;
+
+  if (item.uri) {
+    return <MenuItem item={item} RenderItems={MenuSectionCollapsible} />;
+  }
+
+  if (Object.values(item.items).length === 0) return null;
+
+  return (
+    <MenuSectionCollapsible name={name} item={item}>
+      <MenuItem item={item} RenderItems={MenuSectionCollapsible} />
+    </MenuSectionCollapsible>
+  );
+};
+
+export default MenuSectionItem;
+
+MenuSectionItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  item: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.object])
+    .isRequired
+};

package/src/components/Menu/Section/MenuSectionItems.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MenuSectionItem from './MenuSectionItem';
+
+const MenuSectionItems = ({ sectionItems }) => {
+  const { items } = sectionItems;
+
+  const menuSections = Object.entries(items).sort((a, b) => a[1].order - b[1].order);
+
+  return menuSections.map(menuItem => <MenuSectionItem name={menuItem[0]} item={menuItem[1]} />);
+};
+
+export default MenuSectionItems;
+
+MenuSectionItems.propTypes = {
+  sectionItems: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+};

package/src/components/Menu/index.js

@@ -0,0 +1,3 @@
+import Menu from './Menu';
+
+export default Menu;

package/src/components/SideBar/SideBar.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useApolloClient } from '@apollo/client';
 import Avatar from '@blaze-react/avatar';
 import { handleLogout } from '@blaze-cms/core-auth-ui';
-import { SideBlock } from './components';
+import Menu from '../Menu';
 
-const SideBar = ({ menuItems, isOpenMenu, onMenuClick, userData }) => {
+const SideBar = ({ isOpenMenu, onMenuClick, userData }) => {
   const client = useApolloClient();
 
   const { firstname, lastname } = userData;
@@ -31,13 +30,11 @@ const SideBar = ({ menuItems, isOpenMenu, onMenuClick, userData }) => {
         onClick={onMenuClick}>
         <i className="material-icons">keyboard_arrow_left</i>
       </div>
-      <Link to="/" className="side-nav__block-home">
+      {/* <Link to="/" className="side-nav__block-home">
         Dashboard
-      </Link>
+      </Link> */}
       <div className={sideNavWrapperClassname} data-testid="sidenav" id="side-nav__wrapper">
-        {menuItems.length
-          ? menuItems.map(([, data]) => <SideBlock key={data.header} {...data} />)
-          : 'Not available content types'}
+        <Menu />
       </div>
       <div className="side-nav__user">
         <div className="side-nav__user--info">
@@ -63,7 +60,6 @@ const SideBar = ({ menuItems, isOpenMenu, onMenuClick, userData }) => {
 };
 
 SideBar.propTypes = {
-  menuItems: PropTypes.array.isRequired,
   isOpenMenu: PropTypes.bool.isRequired,
   onMenuClick: PropTypes.func.isRequired,
   userData: PropTypes.object.isRequired

package/src/constants.js

@@ -1,5 +1,7 @@
 const PLUGIN_NAME = 'admin-core-ui';
-const LOGO_PROPS = { src: 'https://images.thisisblaze.com/logo-85-30.png' };
+const LOGO_PROPS = {
+  src: process.env.BLAZE_ADMIN_HEAD_LOGO_URL || 'https://images.thisisblaze.com/logo-98-148.png'
+};
 
 const DEFAULT_LABEL = {
   text: 'See more',

package/src/containers/Home/Home.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Home = () => <div>Home</div>;
+const Home = () => <div />;
 
 Home.displayName = 'Home';
 

package/src/index.js

@@ -2,26 +2,27 @@ import React from 'react';
 import { Layout } from './components';
 import pkg from '../package.json';
 import { PLUGIN_NAME } from './constants';
-import getMenuItemsResolver from './utils/get-menu-items-resolver';
+import menuHandler from './utils/menu-handler-singleton';
 
 const Home = React.lazy(() => import(/* webpackChunkName: 'Home' */ './containers'));
 
-async function load(app) {
+async function load(app, options = {}) {
   const home = {
     path: '/',
     exact: true,
     key: 'home',
     component: Home
   };
+
   app.addRoute(home);
 
-  app.addQueryResolver('getMenuItems', getMenuItemsResolver(app));
+  menuHandler.setApp(app);
 
   app.setLayout(Layout);
 
-  app.events.once('load:menu-section', addSection => {
-    addSection('plugins', { header: 'plugins', order: 200 });
-  });
+  const { menuConfig = {} } = options;
+
+  app.events.once('admin:menu:config:load:after', ({ addConfig }) => addConfig(menuConfig));
 
   return {
     name: PLUGIN_NAME,

package/src/utils/menu-handler-singleton.js

@@ -0,0 +1,64 @@
+import merge from 'lodash.merge';
+
+let instance;
+
+export class MenuHandler {
+  menuSections = new Map();
+
+  menuConfig;
+
+  app;
+
+  constructor(app) {
+    if (instance) {
+      throw new Error('You can only create one instance!');
+    }
+    instance = this;
+    this.menuConfig = {};
+    this.app = null;
+  }
+
+  setApp(app) {
+    this.app = app;
+  }
+
+  get app() {
+    return this.app;
+  }
+
+  get menuConfig() {
+    return this.menuConfig;
+  }
+
+  addConfig(newConfig) {
+    this.menuConfig = merge(this.menuConfig, newConfig);
+  }
+
+  async loadConfig() {
+    const addConfig = newConfig => {
+      this.addConfig(newConfig);
+    };
+
+    const { menuConfig } = this;
+
+    if (this.app && this.app.events) {
+      await this.app.events.emitAsync('admin:menu:config:load', { addConfig });
+      await this.app.events.emitAsync('admin:menu:config:load:after', { addConfig, menuConfig });
+    }
+  }
+
+  getInstance() {
+    return this;
+  }
+
+  getAll() {
+    const sortedByOrder = Object.entries(this.menuConfig).sort(
+      (a, b) => (a.order > b.order ? 1 : -1)
+    );
+
+    return sortedByOrder;
+  }
+}
+
+const menuHandler = new MenuHandler();
+export default menuHandler;