@blaze-cms/plugin-data-ui 0.129.0-admin-updates.2 → 0.129.0-project-admin-customisations.0

package/src/components/EntityDataListing/EntityDataListing.js

@@ -6,31 +6,22 @@ import { getQuery } from '@blaze-cms/admin-ui-utils';
 import ListingTable from '../ListingTable/ListingTable';
 import { withContext } from '../../utils/hoc/withContext';
 
-const EntityDataListing = ({ match, menuItems }) => {
+const EntityDataListing = ({ match }) => {
   const {
     params: { entityIdentifier: identifier }
   } = match;
 
-  const [[selectedMenuItem]] = menuItems
-    .map(([_, { items }]) => {
-      const item = items.filter(({ uri }) => uri.endsWith(`/${identifier}`));
-
-      return item.length ? item : null;
-    })
-    .filter(Boolean);
-
   const { data: { getEntitySchemas = [] } = {} } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
     variables: { identifier }
   });
 
   if (!getEntitySchemas.length) return '';
 
-  return <ListingTable entitySchema={getEntitySchemas[0]} selectedMenuItem={selectedMenuItem} />;
+  return <ListingTable entitySchema={getEntitySchemas[0]} />;
 };
 
 EntityDataListing.propTypes = {
-  match: PropTypes.object.isRequired,
-  menuItems: PropTypes.array.isRequired
+  match: PropTypes.object.isRequired
 };
 
 export default withContext(EntityDataListing);

package/src/components/EntityManager/Entity/Entity.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { withRouter, Prompt } from 'react-router-dom';
 import { useApolloClient } from '@apollo/client';
 import PropTypes from 'prop-types';
+import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import { getQuery, GET_CURRENT_TAB_ID } from '@blaze-cms/admin-ui-utils';
 import { FormBuilder, parseFormValues } from '@blaze-cms/react-form-builder';
 import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
@@ -34,6 +35,7 @@ import {
   checkFulfilConditions
 } from '../utils/entity';
 import useToggle from '../../../utils/hooks/useToggle';
+import InfoBoxes from '../../InfoBoxes/InfoBoxes';
 
 const Entity = ({
   formData,
@@ -440,6 +442,8 @@ const Entity = ({
           <div className="page__content--fixed">
             <div className="page__content">
               <div className="content">
+                <RenderHook hookKey={`entity:${action}:main:top`} entity={entity} schema={schema} />
+                <InfoBoxes id={entity.id} schema={schema} />
                 <Tabs
                   enabled={showPageBuilderTabs}
                   onTabChange={tabId => {

package/src/components/InfoBoxes/InfoBoxes.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InfoBoxContainer from './container/InfoBoxContainer';
+
+const InfoBoxes = ({ id, schema }) => {
+  const {
+    displayProperties: { adminInfoBoxes = [] }
+  } = schema;
+
+  if (adminInfoBoxes.length <= 0) {
+    return null;
+  }
+
+  return adminInfoBoxes.map(infoBox => (
+    <InfoBoxContainer id={id} schema={schema} key={infoBox.key} infoBox={infoBox} />
+  ));
+};
+
+export default InfoBoxes;
+
+InfoBoxes.propTypes = {
+  id: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired
+};

package/src/components/InfoBoxes/container/InfoBoxContainer.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import useData from '../hooks/useData';
+import InfoBox from '../presentational/InfoBox';
+
+const InfoBoxContainer = ({ id, schema, infoBox }) => {
+  const { data } = useData({ id, schema, infoBox });
+
+  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
+
+  const items = Object.values(data).flatMap(item => Object.values(item));
+
+  return <InfoBox items={items} infoBoxKey={infoBox.key} />;
+};
+
+export default InfoBoxContainer;
+
+InfoBoxContainer.propTypes = {
+  id: PropTypes.string.isRequired,
+  infoBox: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired
+};

package/src/components/InfoBoxes/helpers/build-dynamic-query.js

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+import { BlazeError } from '@blaze-cms/core-errors';
+
+export default function buildDynamicQuery({ id, schema, infoBox }) {
+  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {
+    throw new BlazeError(
+      'DataEntity query requires get action, properties and fields from entity schema'
+    );
+  }
+
+  const fields = `${infoBox.property} {
+      label
+      value
+    }`;
+
+  return {
+    query: gql`query getInfoBoxData($id: String!){
+    ${schema.actions.get}( id: $id ) {
+      id
+     ${fields}
+     __typename
+    }
+  }`
+  };
+}

package/src/components/InfoBoxes/hooks/useData.js

@@ -0,0 +1,20 @@
+import { useQuery, gql } from '@apollo/client';
+import useInfoBoxData from './useInfoBox';
+
+function useData({ id, schema, infoBox }) {
+  const { query } = useInfoBoxData({ id, schema, infoBox });
+
+  const infoBoxQuery =
+    query ||
+    gql`
+      query {
+        __typename
+      }
+    `;
+
+  const { data = {}, loading, error } = useQuery(infoBoxQuery, { variables: { id }, skip: !query });
+
+  return { data: data.__typename !== 'Query' ? data : null, loading, error };
+}
+
+export default useData;

package/src/components/InfoBoxes/hooks/useInfoBox.js

@@ -0,0 +1,13 @@
+import buildDynamicQuery from '../helpers/build-dynamic-query';
+
+function useInfoBox({ id, schema, infoBox }) {
+  const { query } = buildDynamicQuery({
+    id,
+    schema,
+    infoBox
+  });
+
+  return { query: query || null };
+}
+
+export default useInfoBox;

package/src/components/InfoBoxes/index.js

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

package/src/components/InfoBoxes/presentational/InfoBox.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const InfoBox = ({ items, infoBoxKey }) => {
+  if (!items) return null;
+
+  const infoBoxItems = items.map(item =>
+    Object.values(item)
+      .map(info => {
+        if (!info.label || !info.value) return null;
+
+        return (
+          <div className="info-box--item" key={`${infoBoxKey}-${info.label.toLowerCase()}`}>
+            <div className="info-box--label">{info.label}: </div>
+            <div className="info-box--value">{info.value}</div>
+          </div>
+        );
+      })
+      .filter(Boolean)
+  );
+
+  return (
+    <div className="info-box" key={infoBoxKey}>
+      <div className="info-box--container">{infoBoxItems}</div>
+    </div>
+  );
+};
+
+export default InfoBox;
+
+InfoBox.propTypes = {
+  infoBoxKey: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired
+};

package/src/components/ListingTable/ListingTable.js

@@ -3,7 +3,6 @@ import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, Link } from 'react-router-dom';
 import More from '@blaze-react/more';
-import { MainContext, useMainContext } from '@blaze-cms/admin-ui-utils';
 import { PageHeader, DeleteAction } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import ListingTableContent from './ListingTableContent';
@@ -14,7 +13,7 @@ import { getDefaultQueryParams } from '../../utils/get-default-query-params';
 
 const OVER_SCAN_BUFFER = 10;
 
-const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
+const ListingTable = ({ match, entitySchema }) => {
   const [tableData, setTableData] = useState({});
   const [modalStatus, setModalStatus] = useState(false);
   const [itemToDelete, setItemToDelete] = useState({});
@@ -23,7 +22,6 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
   const [verifiedRanges, setVerifiedRanges] = useState([]);
   const queryParamsDefault = getDefaultQueryParams({ schema: entitySchema });
   const [queryParams, setQueryParams] = useState(queryParamsDefault);
-  const { menuItems, setMenuItems } = useMainContext(MainContext);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -55,17 +53,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const onCloseCardPrompt = () => {
-    const updatedSelectedMenuItem = {
-      ...selectedMenuItem,
-      isDisplayedPrompt: false
-    };
-    const [{ header, items }] = menuItems;
-    const updatedItems = items.map(
-      item => (item.name === selectedMenuItem.name ? updatedSelectedMenuItem : item)
-    );
-    setMenuItems([{ header, items: updatedItems }]);
-  };
+  const onCloseCardPrompt = () => null;
 
   const toggleModal = item => {
     setModalStatus(!!item);
@@ -162,7 +150,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         />
       )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {(!selectedMenuItem.isDisplayedPrompt || !!tableData.rows.length) && (
+        {!!tableData.rows.length && (
           <Fragment>
             <Link
               data-testid="addEntity"
@@ -187,7 +175,6 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         onRenderItems={handleRenderedItems}
         tableData={tableData}
         onCloseCardPrompt={onCloseCardPrompt}
-        selectedMenuItem={selectedMenuItem}
         scrollToIndex={scrollToIndex}
       />
     </div>
@@ -195,8 +182,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
 };
 ListingTable.propTypes = {
   entitySchema: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

package/src/components/ListingTable/ListingTableContent/ListingTableContent.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import Table from '@blaze-react/table';
 import PropTypes from 'prop-types';
-import { CardPrompt } from '@blaze-cms/admin';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 const ListingTableContent = ({
   tableData,
@@ -20,7 +19,7 @@ const ListingTableContent = ({
 
   return (
     <>
-      {displayTable ? (
+      {displayTable && (
         <>
           <div className="page__content">
             <Table
@@ -36,17 +35,6 @@ const ListingTableContent = ({
             />
           </div>
         </>
-      ) : (
-        selectedMenuItem.isDisplayedPrompt && (
-          <CardPrompt onClose={onCloseCardPrompt} data-testid="card-prompt">
-            <Link
-              className="button button--rounded button--cta"
-              to={`${match.url}/create`}
-              data-testid="add-button">
-              Add
-            </Link>
-          </CardPrompt>
-        )
       )}
     </>
   );
@@ -55,7 +43,7 @@ const ListingTableContent = ({
 ListingTableContent.propTypes = {
   tableData: PropTypes.object.isRequired,
   onCloseCardPrompt: PropTypes.func.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired,
+  selectedMenuItem: PropTypes.object,
   match: PropTypes.shape({
     url: PropTypes.string
   }).isRequired,
@@ -73,7 +61,8 @@ ListingTableContent.defaultProps = {
   onClickRow: () => {},
   overScanBuffer: 0,
   scrollToIndex: 0,
-  onRenderItems: () => {}
+  onRenderItems: () => {},
+  selectedMenuItem: null
 };
 
 export default withRouter(ListingTableContent);

package/src/index.js

@@ -12,14 +12,7 @@ const EntityManager = React.lazy(() =>
 );
 
 export default async function load(app) {
-  // To load different plugin information into menu
-  const sectionKey = 'content';
-
-  app.events.once('load:menu-section', addSection => {
-    addSection(sectionKey, { header: 'content', order: 100 });
-  });
-
-  app.events.once('load:menu-items', getAddContentMenuItems(app, sectionKey));
+  app.events.once('admin:menu:config:load', getAddContentMenuItems(app));
 
   app.events.once('load:custom:field:type', addFieldType => {
     Object.keys(formFieldTypes).forEach(type => {

package/src/utils/add-content-menu-items.js

@@ -2,8 +2,8 @@ import { getQuery } from '@blaze-cms/admin-ui-utils';
 
 const { MENU_PERMISSIONS } = require('../constants');
 
-function getAddContentMenuItems(app, sectionKey) {
-  return async addItem => {
+function getAddContentMenuItems(app) {
+  return async ({ addConfig }) => {
     const client = app.getClient();
     const {
       data: { getEntitySchemas }
@@ -14,9 +14,51 @@ function getAddContentMenuItems(app, sectionKey) {
         canDoActions: MENU_PERMISSIONS
       }
     });
+
+    if (!getEntitySchemas || !getEntitySchemas.length) return; // no items so don't add section
+
+    const menuItems = {};
+    const sectionMenuItems = { content: {} };
+
+    getEntitySchemas.forEach(({ id, displayName, displayProperties }) => {
+      if (!displayProperties) return null;
+
+      const { adminMenu: { sectionKey = 'content' } = {} } = displayProperties;
+      const sectionItems = sectionMenuItems[sectionKey] || {};
+      sectionItems[id] = {
+        label: displayName,
+        uri: `/data-listing/${id}`
+      };
+      sectionMenuItems[sectionKey] = sectionItems;
+    });
+
+    const menuConfig = {
+      main: {
+        items: {
+          content: {
+            label: 'Content',
+            loadOpen: true,
+            order: 10,
+            items: menuItems
+          }
+        }
+      }
+    };
+
+    Object.entries(sectionMenuItems).forEach(([sectionKey, sectionItems]) => {
+      const sectionConfig = menuConfig.main.items[sectionKey] || {};
+      sectionConfig.items = sectionItems;
+      menuConfig.main.items[sectionKey] = sectionConfig;
+    });
+
     getEntitySchemas.forEach(({ id, displayName }) => {
-      addItem({ name: displayName, uri: `/data-listing/${id}` }, sectionKey);
+      menuItems[id] = {
+        label: displayName,
+        uri: `/data-listing/${id}`
+      };
     });
+
+    addConfig(menuConfig);
   };
 }