@blaze-cms/plugin-admin-core-ui 0.131.0-admin-updates.0 → 0.131.0-project-admin-customisations.0

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

@@ -4,9 +4,9 @@ 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;
@@ -34,9 +34,7 @@ const SideBar = ({ menuItems, isOpenMenu, onMenuClick, userData }) => {
         Dashboard
       </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">
@@ -62,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-98-148.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/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;