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

package/lib-es/utils/add-content-menu-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-content-menu-items.js","names":["getQuery","MENU_PERMISSIONS","require","getAddContentMenuItems","app","addConfig","client","getClient","data","getEntitySchemas","query","variables","canDoActions","length","menuItems","sectionMenuItems","content","forEach","id","displayName","displayProperties","adminMenu","sectionKey","sectionItems","label","uri","menuConfig","main","items","loadOpen","order","Object","entries","sectionConfig"],"sources":["../../src/utils/add-content-menu-items.js"],"sourcesContent":["import { getQuery } from '@blaze-cms/admin-ui-utils';\n\nconst { MENU_PERMISSIONS } = require('../constants');\n\nfunction getAddContentMenuItems(app) {\n  return async ({ addConfig }) => {\n    const client = app.getClient();\n    const {\n      data: { getEntitySchemas }\n    } = await client.query({\n      query: getQuery('GET_USER_EDITABLE_ENTITIES'),\n      variables: {\n        // only return entities that the current user can do the following actions on\n        canDoActions: MENU_PERMISSIONS\n      }\n    });\n\n    if (!getEntitySchemas || !getEntitySchemas.length) return; // no items so don't add section\n\n    const menuItems = {};\n    const sectionMenuItems = { content: {} };\n\n    getEntitySchemas.forEach(({ id, displayName, displayProperties }) => {\n      if (!displayProperties) return null;\n\n      const { adminMenu: { sectionKey = 'content' } = {} } = displayProperties;\n      const sectionItems = sectionMenuItems[sectionKey] || {};\n      sectionItems[id] = {\n        label: displayName,\n        uri: `/data-listing/${id}`\n      };\n      sectionMenuItems[sectionKey] = sectionItems;\n    });\n\n    const menuConfig = {\n      main: {\n        items: {\n          content: {\n            label: 'Content',\n            loadOpen: true,\n            order: 10,\n            items: menuItems\n          }\n        }\n      }\n    };\n\n    Object.entries(sectionMenuItems).forEach(([sectionKey, sectionItems]) => {\n      const sectionConfig = menuConfig.main.items[sectionKey] || {};\n      sectionConfig.items = sectionItems;\n      menuConfig.main.items[sectionKey] = sectionConfig;\n    });\n\n    getEntitySchemas.forEach(({ id, displayName }) => {\n      menuItems[id] = {\n        label: displayName,\n        uri: `/data-listing/${id}`\n      };\n    });\n\n    addConfig(menuConfig);\n  };\n}\n\nexport default getAddContentMenuItems;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,2BAA2B;AAEpD,MAAM;EAAEC;AAAiB,CAAC,GAAGC,OAAO,CAAC,cAAc,CAAC;AAEpD,SAASC,sBAAsBA,CAACC,GAAG,EAAE;EACnC,OAAO,OAAO;IAAEC;EAAU,CAAC,KAAK;IAC9B,MAAMC,MAAM,GAAGF,GAAG,CAACG,SAAS,CAAC,CAAC;IAC9B,MAAM;MACJC,IAAI,EAAE;QAAEC;MAAiB;IAC3B,CAAC,GAAG,MAAMH,MAAM,CAACI,KAAK,CAAC;MACrBA,KAAK,EAAEV,QAAQ,CAAC,4BAA4B,CAAC;MAC7CW,SAAS,EAAE;QACT;QACAC,YAAY,EAAEX;MAChB;IACF,CAAC,CAAC;IAEF,IAAI,CAACQ,gBAAgB,IAAI,CAACA,gBAAgB,CAACI,MAAM,EAAE,OAAO,CAAC;;IAE3D,MAAMC,SAAS,GAAG,CAAC,CAAC;IACpB,MAAMC,gBAAgB,GAAG;MAAEC,OAAO,EAAE,CAAC;IAAE,CAAC;IAExCP,gBAAgB,CAACQ,OAAO,CAAC,CAAC;MAAEC,EAAE;MAAEC,WAAW;MAAEC;IAAkB,CAAC,KAAK;MACnE,IAAI,CAACA,iBAAiB,EAAE,OAAO,IAAI;MAEnC,MAAM;QAAEC,SAAS,EAAE;UAAEC,UAAU,GAAG;QAAU,CAAC,GAAG,CAAC;MAAE,CAAC,GAAGF,iBAAiB;MACxE,MAAMG,YAAY,GAAGR,gBAAgB,CAACO,UAAU,CAAC,IAAI,CAAC,CAAC;MACvDC,YAAY,CAACL,EAAE,CAAC,GAAG;QACjBM,KAAK,EAAEL,WAAW;QAClBM,GAAG,EAAG,iBAAgBP,EAAG;MAC3B,CAAC;MACDH,gBAAgB,CAACO,UAAU,CAAC,GAAGC,YAAY;IAC7C,CAAC,CAAC;IAEF,MAAMG,UAAU,GAAG;MACjBC,IAAI,EAAE;QACJC,KAAK,EAAE;UACLZ,OAAO,EAAE;YACPQ,KAAK,EAAE,SAAS;YAChBK,QAAQ,EAAE,IAAI;YACdC,KAAK,EAAE,EAAE;YACTF,KAAK,EAAEd;UACT;QACF;MACF;IACF,CAAC;IAEDiB,MAAM,CAACC,OAAO,CAACjB,gBAAgB,CAAC,CAACE,OAAO,CAAC,CAAC,CAACK,UAAU,EAAEC,YAAY,CAAC,KAAK;MACvE,MAAMU,aAAa,GAAGP,UAAU,CAACC,IAAI,CAACC,KAAK,CAACN,UAAU,CAAC,IAAI,CAAC,CAAC;MAC7DW,aAAa,CAACL,KAAK,GAAGL,YAAY;MAClCG,UAAU,CAACC,IAAI,CAACC,KAAK,CAACN,UAAU,CAAC,GAAGW,aAAa;IACnD,CAAC,CAAC;IAEFxB,gBAAgB,CAACQ,OAAO,CAAC,CAAC;MAAEC,EAAE;MAAEC;IAAY,CAAC,KAAK;MAChDL,SAAS,CAACI,EAAE,CAAC,GAAG;QACdM,KAAK,EAAEL,WAAW;QAClBM,GAAG,EAAG,iBAAgBP,EAAG;MAC3B,CAAC;IACH,CAAC,CAAC;IAEFb,SAAS,CAACqB,UAAU,CAAC;EACvB,CAAC;AACH;AAEA,eAAevB,sBAAsB"}
+{"version":3,"file":"add-content-menu-items.js","names":["getQuery","MENU_PERMISSIONS","require","getAddContentMenuItems","app","sectionKey","addItem","client","getClient","data","getEntitySchemas","query","variables","canDoActions","forEach","id","displayName","name","uri"],"sources":["../../src/utils/add-content-menu-items.js"],"sourcesContent":["import { getQuery } from '@blaze-cms/admin-ui-utils';\n\nconst { MENU_PERMISSIONS } = require('../constants');\n\nfunction getAddContentMenuItems(app, sectionKey) {\n  return async addItem => {\n    const client = app.getClient();\n    const {\n      data: { getEntitySchemas }\n    } = await client.query({\n      query: getQuery('GET_USER_EDITABLE_ENTITIES'),\n      variables: {\n        // only return entities that the current user can do the following actions on\n        canDoActions: MENU_PERMISSIONS\n      }\n    });\n    getEntitySchemas.forEach(({ id, displayName }) => {\n      addItem({ name: displayName, uri: `/data-listing/${id}` }, sectionKey);\n    });\n  };\n}\n\nexport default getAddContentMenuItems;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,2BAA2B;AAEpD,MAAM;EAAEC;AAAiB,CAAC,GAAGC,OAAO,CAAC,cAAc,CAAC;AAEpD,SAASC,sBAAsBA,CAACC,GAAG,EAAEC,UAAU,EAAE;EAC/C,OAAO,MAAMC,OAAO,IAAI;IACtB,MAAMC,MAAM,GAAGH,GAAG,CAACI,SAAS,CAAC,CAAC;IAC9B,MAAM;MACJC,IAAI,EAAE;QAAEC;MAAiB;IAC3B,CAAC,GAAG,MAAMH,MAAM,CAACI,KAAK,CAAC;MACrBA,KAAK,EAAEX,QAAQ,CAAC,4BAA4B,CAAC;MAC7CY,SAAS,EAAE;QACT;QACAC,YAAY,EAAEZ;MAChB;IACF,CAAC,CAAC;IACFS,gBAAgB,CAACI,OAAO,CAAC,CAAC;MAAEC,EAAE;MAAEC;IAAY,CAAC,KAAK;MAChDV,OAAO,CAAC;QAAEW,IAAI,EAAED,WAAW;QAAEE,GAAG,EAAG,iBAAgBH,EAAG;MAAE,CAAC,EAAEV,UAAU,CAAC;IACxE,CAAC,CAAC;EACJ,CAAC;AACH;AAEA,eAAeF,sBAAsB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.129.0-project-admin-customisations.0",
+  "version": "0.129.0",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,13 +27,12 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/core-errors": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/plugin-render-hooks-ui": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/react-form-builder": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/react-page-builder": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/setup-ui": "0.129.0-project-admin-customisations.0",
-    "@blaze-cms/versioning-ui": "0.129.0-project-admin-customisations.0",
+    "@blaze-cms/admin-ui-utils": "^0.129.0",
+    "@blaze-cms/core-errors": "^0.127.0",
+    "@blaze-cms/react-form-builder": "^0.129.0",
+    "@blaze-cms/react-page-builder": "^0.129.0",
+    "@blaze-cms/setup-ui": "^0.128.1",
+    "@blaze-cms/versioning-ui": "^0.128.1",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/more": "0.5.19",
     "@blaze-react/multiselect": "0.6.6",
@@ -54,7 +53,7 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.129.0-project-admin-customisations.0"
+    "@blaze-cms/core-ui": "^0.129.0"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -66,5 +65,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "e277f858e06d9e30c22e355ea5b44132ef5e910c"
+  "gitHead": "43e8a5d929313c50f8edb27358da7278299ce6c6"
 }

package/src/components/EntityDataListing/EntityDataListing.js

@@ -6,22 +6,31 @@ import { getQuery } from '@blaze-cms/admin-ui-utils';
 import ListingTable from '../ListingTable/ListingTable';
 import { withContext } from '../../utils/hoc/withContext';
 
-const EntityDataListing = ({ match }) => {
+const EntityDataListing = ({ match, menuItems }) => {
   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]} />;
+  return <ListingTable entitySchema={getEntitySchemas[0]} selectedMenuItem={selectedMenuItem} />;
 };
 
 EntityDataListing.propTypes = {
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
+  menuItems: PropTypes.array.isRequired
 };
 
 export default withContext(EntityDataListing);

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

@@ -3,7 +3,6 @@ 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';
@@ -35,7 +34,6 @@ import {
   checkFulfilConditions
 } from '../utils/entity';
 import useToggle from '../../../utils/hooks/useToggle';
-import InfoBoxes from '../../InfoBoxes/InfoBoxes';
 
 const Entity = ({
   formData,
@@ -405,72 +403,68 @@ const Entity = ({
 
   return (
     <div className="page">
-      <EntityHeader
-        entityData={entityData}
-        entityIdentifier={entityIdentifier}
-        pageTitle={pageTitle}
-        pageName={pageName}
-        onSubmit={onSubmit}
-        handlePublishAndUnpublish={handlePublishAndUnpublish}
-        isSaveButtonAvailable={isSaveButtonAvailable}
-        isEnablePublishButton={isEnablePublishButton}
-        isEnablePreviewButton={isEnablePreviewButton}
-        toggleCopyModal={setCopyModalStatus}
-        toggleModal={setModalStatus}
-        formData={formData}
-        onViewUrl={onViewUrlHandler}
-        saveButtonText={saveButtonText}
-      />
-      <div className="page-wrapper__content">
-        <div className="tabs-wrapper tabs-wrapper__tab">
-          <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
-          {showModal && (
-            <DeleteAction
-              onClose={setModalStatus}
-              deleteAction={onDelete}
-              itemName={formData.values.name}
-            />
-          )}
-          {copyModalStatus && (
-            <CopyDataFromAction
-              onClose={handleCopyDataFromClose}
-              copyAction={onCopy}
-              getFormData={getFormData}
-            />
-          )}
-
-          <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 => {
-                    client.writeQuery({
-                      query: GET_CURRENT_TAB_ID,
-                      data: { currentTabId: tabId }
-                    });
-                    setCurrentTabId(tabId);
-                  }}>
-                  <FormBuilder
-                    getIsFormValid={setIsFormValid}
-                    getFormValues={getFormValues}
-                    schema={schema}
-                    data={clonedFormData}
-                    onChange={onChangeFormValues}
-                    shouldCopyData={shouldCopyData}
-                    updateCopyData={updateCopyData}
-                    formValues={formValues}
-                    isNewEntity={isNewEntity}
-                  />
-                </Tabs>
-              </div>
+      <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
+      {showModal && (
+        <DeleteAction
+          onClose={setModalStatus}
+          deleteAction={onDelete}
+          itemName={formData.values.name}
+        />
+      )}
+      {copyModalStatus && (
+        <CopyDataFromAction
+          onClose={handleCopyDataFromClose}
+          copyAction={onCopy}
+          getFormData={getFormData}
+        />
+      )}
+
+      <div className="row row--display-row">
+        <div className="column column--three-quarters">
+          <EntityHeader
+            entityData={entityData}
+            entityIdentifier={entityIdentifier}
+            pageTitle={pageTitle}
+            pageName={pageName}
+            onSubmit={onSubmit}
+            handlePublishAndUnpublish={handlePublishAndUnpublish}
+            isSaveButtonAvailable={isSaveButtonAvailable}
+            isEnablePublishButton={isEnablePublishButton}
+            isEnablePreviewButton={isEnablePreviewButton}
+            toggleCopyModal={setCopyModalStatus}
+            toggleModal={setModalStatus}
+            formData={formData}
+            onViewUrl={onViewUrlHandler}
+            saveButtonText={saveButtonText}
+          />
+
+          <div className="page__content">
+            <div className="content">
+              <Tabs
+                enabled={showPageBuilderTabs}
+                onTabChange={tabId => {
+                  client.writeQuery({
+                    query: GET_CURRENT_TAB_ID,
+                    data: { currentTabId: tabId }
+                  });
+                  setCurrentTabId(tabId);
+                }}>
+                <FormBuilder
+                  getIsFormValid={setIsFormValid}
+                  getFormValues={getFormValues}
+                  schema={schema}
+                  data={clonedFormData}
+                  onChange={onChangeFormValues}
+                  shouldCopyData={shouldCopyData}
+                  updateCopyData={updateCopyData}
+                  formValues={formValues}
+                  isNewEntity={isNewEntity}
+                />
+              </Tabs>
             </div>
           </div>
         </div>
-
-        <div className="column column--one-third page-sidebar">
+        <div className="column column--one-third">
           {showSideBarRelations && (
             <SideBarRelations
               entity={entity}

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

@@ -4,21 +4,16 @@ import uuidv1 from 'uuid/v1';
 import { useApolloClient } from '@apollo/client';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { formFieldTypes } from '@blaze-cms/react-form-builder';
-import classnames from 'classnames';
+import Badge from '@blaze-react/badge';
 import { VersionsList } from '@blaze-cms/versioning-ui';
-import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
+import { PUBLISHED } from '../../../../constants';
 
 const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   const { relation: RelationComponent } = formFieldTypes;
-  const {
-    formattedStatus,
-    formattedUpdated,
-    formattedCreated,
-    formattedPublished,
-    status
-  } = formData;
+  const { formattedStatus, formattedUpdated, formattedCreated, formattedPublished } = formData;
   const client = useApolloClient();
   const [relationsComponents, setRelationsComponents] = useState(null);
+
   useEffect(
     () => {
       (async () => {
@@ -56,26 +51,17 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   const { id: itemId } = entity;
   const { identifier: itemEntity, interfaces } = schema;
 
-  const statusClassName = classnames('sidebar__status__badge', {
-    'sidebar__status__badge--published': status === PUBLISHED,
-    'sidebar__status__badge--unpublished': status === UNPUBLISHED
-  });
-
   return (
     <div className="sidebar" data-testid="sideBarRelations-main-div">
       <div className="sidebar__content">
         {formattedCreated && (
           <div className="sidebar__status">
-            <div className="sidebar__status__wrapper">
-              <b>Status</b>
-              <span className={statusClassName}>{formattedStatus}</span>
-            </div>
-            {formattedStatus === PUBLISHED && (
-              <p>
-                {formattedStatus} on: <span> {formattedPublished}</span>
-              </p>
+            {formattedStatus && (
+              <Badge type="status" modifiers={formattedStatus}>
+                {formattedStatus}
+                {formattedStatus === PUBLISHED && `: ${formattedPublished}`}
+              </Badge>
             )}
-
             <p>
               Created: <span>{formattedCreated}</span>
             </p>

package/src/components/ListingTable/ListingTable.js

@@ -3,6 +3,7 @@ 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';
@@ -13,7 +14,7 @@ import { getDefaultQueryParams } from '../../utils/get-default-query-params';
 
 const OVER_SCAN_BUFFER = 10;
 
-const ListingTable = ({ match, entitySchema }) => {
+const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
   const [tableData, setTableData] = useState({});
   const [modalStatus, setModalStatus] = useState(false);
   const [itemToDelete, setItemToDelete] = useState({});
@@ -22,6 +23,7 @@ const ListingTable = ({ match, entitySchema }) => {
   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();
 
@@ -53,7 +55,17 @@ const ListingTable = ({ match, entitySchema }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const onCloseCardPrompt = () => null;
+  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 toggleModal = item => {
     setModalStatus(!!item);
@@ -150,7 +162,7 @@ const ListingTable = ({ match, entitySchema }) => {
         />
       )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {!!tableData.rows.length && (
+        {(!selectedMenuItem.isDisplayedPrompt || !!tableData.rows.length) && (
           <Fragment>
             <Link
               data-testid="addEntity"
@@ -175,6 +187,7 @@ const ListingTable = ({ match, entitySchema }) => {
         onRenderItems={handleRenderedItems}
         tableData={tableData}
         onCloseCardPrompt={onCloseCardPrompt}
+        selectedMenuItem={selectedMenuItem}
         scrollToIndex={scrollToIndex}
       />
     </div>
@@ -182,7 +195,8 @@ const ListingTable = ({ match, entitySchema }) => {
 };
 ListingTable.propTypes = {
   entitySchema: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
+  selectedMenuItem: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

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

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

package/src/index.js

@@ -12,7 +12,14 @@ const EntityManager = React.lazy(() =>
 );
 
 export default async function load(app) {
-  app.events.once('admin:menu:config:load', getAddContentMenuItems(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('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) {
-  return async ({ addConfig }) => {
+function getAddContentMenuItems(app, sectionKey) {
+  return async addItem => {
     const client = app.getClient();
     const {
       data: { getEntitySchemas }
@@ -14,51 +14,9 @@ function getAddContentMenuItems(app) {
         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 }) => {
-      menuItems[id] = {
-        label: displayName,
-        uri: `/data-listing/${id}`
-      };
+      addItem({ name: displayName, uri: `/data-listing/${id}` }, sectionKey);
     });
-
-    addConfig(menuConfig);
   };
 }
 

package/lib/components/InfoBoxes/InfoBoxes.js

@@ -1,36 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("core-js/modules/es.array.map.js");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _InfoBoxContainer = _interopRequireDefault(require("./container/InfoBoxContainer"));
-var InfoBoxes = function InfoBoxes(_ref) {
-  var id = _ref.id,
-    schema = _ref.schema;
-  var _schema$displayProper = schema.displayProperties.adminInfoBoxes,
-    adminInfoBoxes = _schema$displayProper === void 0 ? [] : _schema$displayProper;
-  if (adminInfoBoxes.length <= 0) {
-    return null;
-  }
-  return adminInfoBoxes.map(function (infoBox) {
-    return /*#__PURE__*/_react["default"].createElement(_InfoBoxContainer["default"], {
-      id: id,
-      schema: schema,
-      key: infoBox.key,
-      infoBox: infoBox
-    });
-  });
-};
-var _default = InfoBoxes;
-exports["default"] = _default;
-InfoBoxes.propTypes = {
-  id: _propTypes["default"].string.isRequired,
-  schema: _propTypes["default"].object.isRequired
-};
-//# sourceMappingURL=InfoBoxes.js.map

package/lib/components/InfoBoxes/InfoBoxes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBoxes.js","names":["_propTypes","_interopRequireDefault","require","_react","_InfoBoxContainer","InfoBoxes","_ref","id","schema","_schema$displayProper","displayProperties","adminInfoBoxes","length","map","infoBox","createElement","key","_default","exports","propTypes","PropTypes","string","isRequired","object"],"sources":["../../../src/components/InfoBoxes/InfoBoxes.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InfoBoxContainer from './container/InfoBoxContainer';\n\nconst InfoBoxes = ({ id, schema }) => {\n  const {\n    displayProperties: { adminInfoBoxes = [] }\n  } = schema;\n\n  if (adminInfoBoxes.length <= 0) {\n    return null;\n  }\n\n  return adminInfoBoxes.map(infoBox => (\n    <InfoBoxContainer id={id} schema={schema} key={infoBox.key} infoBox={infoBox} />\n  ));\n};\n\nexport default InfoBoxes;\n\nInfoBoxes.propTypes = {\n  id: PropTypes.string.isRequired,\n  schema: PropTypes.object.isRequired\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAAuB;EAAA,IAAjBC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EAC7B,IAAAC,qBAAA,GAEID,MAAM,CADRE,iBAAiB,CAAIC,cAAc;IAAdA,cAAc,GAAAF,qBAAA,cAAG,EAAE,GAAAA,qBAAA;EAG1C,IAAIE,cAAc,CAACC,MAAM,IAAI,CAAC,EAAE;IAC9B,OAAO,IAAI;EACb;EAEA,OAAOD,cAAc,CAACE,GAAG,CAAC,UAAAC,OAAO;IAAA,oBAC/BX,MAAA,YAAAY,aAAA,CAACX,iBAAA,WAAgB;MAACG,EAAE,EAAEA,EAAG;MAACC,MAAM,EAAEA,MAAO;MAACQ,GAAG,EAAEF,OAAO,CAACE,GAAI;MAACF,OAAO,EAAEA;IAAQ,CAAE,CAAC;EAAA,CACjF,CAAC;AACJ,CAAC;AAAC,IAAAG,QAAA,GAEaZ,SAAS;AAAAa,OAAA,cAAAD,QAAA;AAExBZ,SAAS,CAACc,SAAS,GAAG;EACpBZ,EAAE,EAAEa,qBAAS,CAACC,MAAM,CAACC,UAAU;EAC/Bd,MAAM,EAAEY,qBAAS,CAACG,MAAM,CAACD;AAC3B,CAAC"}

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

@@ -1,44 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.array.flat-map.js");
-require("core-js/modules/es.array.unscopables.flat-map.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.object.values.js");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _useData2 = _interopRequireDefault(require("../hooks/useData"));
-var _InfoBox = _interopRequireDefault(require("../presentational/InfoBox"));
-var InfoBoxContainer = function InfoBoxContainer(_ref) {
-  var id = _ref.id,
-    schema = _ref.schema,
-    infoBox = _ref.infoBox;
-  var _useData = (0, _useData2["default"])({
-      id: id,
-      schema: schema,
-      infoBox: infoBox
-    }),
-    data = _useData.data;
-  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
-  var items = Object.values(data).flatMap(function (item) {
-    return Object.values(item);
-  });
-  return /*#__PURE__*/_react["default"].createElement(_InfoBox["default"], {
-    items: items,
-    infoBoxKey: infoBox.key
-  });
-};
-var _default = InfoBoxContainer;
-exports["default"] = _default;
-InfoBoxContainer.propTypes = {
-  id: _propTypes["default"].string.isRequired,
-  infoBox: _propTypes["default"].object.isRequired,
-  schema: _propTypes["default"].object.isRequired
-};
-//# sourceMappingURL=InfoBoxContainer.js.map

package/lib/components/InfoBoxes/container/InfoBoxContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoBoxContainer.js","names":["_propTypes","_interopRequireDefault","require","_react","_useData2","_InfoBox","InfoBoxContainer","_ref","id","schema","infoBox","_useData","useData","data","Object","keys","length","items","values","flatMap","item","createElement","infoBoxKey","key","_default","exports","propTypes","PropTypes","string","isRequired","object"],"sources":["../../../../src/components/InfoBoxes/container/InfoBoxContainer.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport useData from '../hooks/useData';\nimport InfoBox from '../presentational/InfoBox';\n\nconst InfoBoxContainer = ({ id, schema, infoBox }) => {\n  const { data } = useData({ id, schema, infoBox });\n\n  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;\n\n  const items = Object.values(data).flatMap(item => Object.values(item));\n\n  return <InfoBox items={items} infoBoxKey={infoBox.key} />;\n};\n\nexport default InfoBoxContainer;\n\nInfoBoxContainer.propTypes = {\n  id: PropTypes.string.isRequired,\n  infoBox: PropTypes.object.isRequired,\n  schema: PropTypes.object.isRequired\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAgC;EAAA,IAA1BC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EAC7C,IAAAC,QAAA,GAAiB,IAAAC,oBAAO,EAAC;MAAEJ,EAAE,EAAFA,EAAE;MAAEC,MAAM,EAANA,MAAM;MAAEC,OAAO,EAAPA;IAAQ,CAAC,CAAC;IAAzCG,IAAI,GAAAF,QAAA,CAAJE,IAAI;EAEZ,IAAI,CAACA,IAAI,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,IAAIC,MAAM,CAACC,IAAI,CAACF,IAAI,CAAC,CAACG,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE9E,IAAMC,KAAK,GAAGH,MAAM,CAACI,MAAM,CAACL,IAAI,CAAC,CAACM,OAAO,CAAC,UAAAC,IAAI;IAAA,OAAIN,MAAM,CAACI,MAAM,CAACE,IAAI,CAAC;EAAA,EAAC;EAEtE,oBAAOjB,MAAA,YAAAkB,aAAA,CAAChB,QAAA,WAAO;IAACY,KAAK,EAAEA,KAAM;IAACK,UAAU,EAAEZ,OAAO,CAACa;EAAI,CAAE,CAAC;AAC3D,CAAC;AAAC,IAAAC,QAAA,GAEalB,gBAAgB;AAAAmB,OAAA,cAAAD,QAAA;AAE/BlB,gBAAgB,CAACoB,SAAS,GAAG;EAC3BlB,EAAE,EAAEmB,qBAAS,CAACC,MAAM,CAACC,UAAU;EAC/BnB,OAAO,EAAEiB,qBAAS,CAACG,MAAM,CAACD,UAAU;EACpCpB,MAAM,EAAEkB,qBAAS,CAACG,MAAM,CAACD;AAC3B,CAAC"}

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

@@ -1,25 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = buildDynamicQuery;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _client = require("@apollo/client");
-var _coreErrors = require("@blaze-cms/core-errors");
-var _templateObject;
-function buildDynamicQuery(_ref) {
-  var id = _ref.id,
-    schema = _ref.schema,
-    infoBox = _ref.infoBox;
-  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {
-    throw new _coreErrors.BlazeError('DataEntity query requires get action, properties and fields from entity schema');
-  }
-  var fields = "".concat(infoBox.property, " {\n      label\n      value\n    }");
-  return {
-    query: (0, _client.gql)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["query getInfoBoxData($id: String!){\n    ", "( id: $id ) {\n      id\n     ", "\n     __typename\n    }\n  }"])), schema.actions.get, fields)
-  };
-}
-//# sourceMappingURL=build-dynamic-query.js.map

package/lib/components/InfoBoxes/helpers/build-dynamic-query.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"build-dynamic-query.js","names":["_client","require","_coreErrors","_templateObject","buildDynamicQuery","_ref","id","schema","infoBox","actions","get","properties","BlazeError","fields","concat","property","query","gql","_taggedTemplateLiteral2"],"sources":["../../../../src/components/InfoBoxes/helpers/build-dynamic-query.js"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { BlazeError } from '@blaze-cms/core-errors';\n\nexport default function buildDynamicQuery({ id, schema, infoBox }) {\n  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {\n    throw new BlazeError(\n      'DataEntity query requires get action, properties and fields from entity schema'\n    );\n  }\n\n  const fields = `${infoBox.property} {\n      label\n      value\n    }`;\n\n  return {\n    query: gql`query getInfoBoxData($id: String!){\n    ${schema.actions.get}( id: $id ) {\n      id\n     ${fields}\n     __typename\n    }\n  }`\n  };\n}\n"],"mappings":";;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAAoD,IAAAE,eAAA;AAErC,SAASC,iBAAiBA,CAAAC,IAAA,EAA0B;EAAA,IAAvBC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EAC7D,IAAI,CAACD,MAAM,IAAI,CAACA,MAAM,CAACE,OAAO,IAAI,CAACF,MAAM,CAACE,OAAO,CAACC,GAAG,IAAI,CAACH,MAAM,CAACI,UAAU,EAAE;IAC3E,MAAM,IAAIC,sBAAU,CAClB,gFACF,CAAC;EACH;EAEA,IAAMC,MAAM,MAAAC,MAAA,CAAMN,OAAO,CAACO,QAAQ,wCAG9B;EAEJ,OAAO;IACLC,KAAK,MAAEC,WAAG,EAAAd,eAAA,KAAAA,eAAA,OAAAe,uBAAA,iIACRX,MAAM,CAACE,OAAO,CAACC,GAAG,EAEjBG,MAAM;EAIX,CAAC;AACH"}