@blaze-cms/plugin-data-ui 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/lib/utils/hooks/useToggle.js

@@ -1,22 +1,14 @@
 "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;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 var _react = require("react");
 function useToggle(initialValue) {
-  var _useState = (0, _react.useState)(initialValue),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    toggleValue = _useState2[0],
-    setToggleValue = _useState2[1];
-  var toggler = (0, _react.useCallback)(function () {
-    return setToggleValue(!toggleValue);
-  }, [toggleValue]);
+  const [toggleValue, setToggleValue] = (0, _react.useState)(initialValue);
+  const toggler = (0, _react.useCallback)(() => setToggleValue(!toggleValue), [toggleValue]);
   return [toggleValue, toggler];
 }
-var _default = exports["default"] = useToggle;
+var _default = exports.default = useToggle;
 //# sourceMappingURL=useToggle.js.map

package/lib/utils/hooks/useToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggle.js","names":["_react","require","useToggle","initialValue","_useState","useState","_useState2","_slicedToArray2","toggleValue","setToggleValue","toggler","useCallback","_default","exports"],"sources":["../../../src/utils/hooks/useToggle.js"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nfunction useToggle(initialValue) {\n  const [toggleValue, setToggleValue] = useState(initialValue);\n  const toggler = useCallback(() => setToggleValue(!toggleValue), [toggleValue]);\n\n  return [toggleValue, toggler];\n}\n\nexport default useToggle;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,SAASC,SAASA,CAACC,YAAY,EAAE;EAC/B,IAAAC,SAAA,GAAsC,IAAAC,eAAQ,EAACF,YAAY,CAAC;IAAAG,UAAA,OAAAC,eAAA,aAAAH,SAAA;IAArDI,WAAW,GAAAF,UAAA;IAAEG,cAAc,GAAAH,UAAA;EAClC,IAAMI,OAAO,GAAG,IAAAC,kBAAW,EAAC;IAAA,OAAMF,cAAc,CAAC,CAACD,WAAW,CAAC;EAAA,GAAE,CAACA,WAAW,CAAC,CAAC;EAE9E,OAAO,CAACA,WAAW,EAAEE,OAAO,CAAC;AAC/B;AAAC,IAAAE,QAAA,GAAAC,OAAA,cAEcX,SAAS","ignoreList":[]}
+{"version":3,"file":"useToggle.js","names":["_react","require","useToggle","initialValue","toggleValue","setToggleValue","useState","toggler","useCallback","_default","exports","default"],"sources":["../../../src/utils/hooks/useToggle.js"],"sourcesContent":["import { useState, useCallback } from 'react';\n\nfunction useToggle(initialValue) {\n  const [toggleValue, setToggleValue] = useState(initialValue);\n  const toggler = useCallback(() => setToggleValue(!toggleValue), [toggleValue]);\n\n  return [toggleValue, toggler];\n}\n\nexport default useToggle;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,SAASC,SAASA,CAACC,YAAY,EAAE;EAC/B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAACH,YAAY,CAAC;EAC5D,MAAMI,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAMH,cAAc,CAAC,CAACD,WAAW,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAE9E,OAAO,CAACA,WAAW,EAAEG,OAAO,CAAC;AAC/B;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcT,SAAS","ignoreList":[]}

package/lib/utils/index.js

@@ -1,14 +1,13 @@
 "use strict";
 
-require("core-js/modules/es.object.define-property.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "buildUpdatePublishUnpublishMutation", {
   enumerable: true,
-  get: function get() {
-    return _buildUpdatePublishUnpublishMutation["default"];
+  get: function () {
+    return _buildUpdatePublishUnpublishMutation.default;
   }
 });
 var _buildUpdatePublishUnpublishMutation = _interopRequireDefault(require("./build-update-publish-unpublish-mutation"));

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_buildUpdatePublishUnpublishMutation","_interopRequireDefault","require"],"sources":["../../src/utils/index.js"],"sourcesContent":["import buildUpdatePublishUnpublishMutation from './build-update-publish-unpublish-mutation';\n\nexport { buildUpdatePublishUnpublishMutation };\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,oCAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_buildUpdatePublishUnpublishMutation","_interopRequireDefault","require"],"sources":["../../src/utils/index.js"],"sourcesContent":["import buildUpdatePublishUnpublishMutation from './build-update-publish-unpublish-mutation';\n\nexport { buildUpdatePublishUnpublishMutation };\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,oCAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.146.0-node18.1",
+  "version": "0.146.0-rc-eagle.0",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
-  "sideEffects": false,
+  "source": "src/index.js",
   "directories": {
     "src": "src/"
   },
@@ -27,28 +27,28 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.146.0-node18.0",
-    "@blaze-cms/core-errors": "0.146.0-node18.0",
-    "@blaze-cms/plugin-render-hooks-ui": "0.146.0-node18.1",
-    "@blaze-cms/react-form-builder": "0.146.0-node18.0",
-    "@blaze-cms/react-page-builder": "0.146.0-node18.1",
-    "@blaze-cms/setup-ui": "0.146.0-node18.0",
-    "@blaze-cms/versioning-ui": "0.146.0-node18.0",
+    "@blaze-cms/admin-ui-utils": "0.146.0-rc-eagle.0",
+    "@blaze-cms/core-errors": "0.146.0-rc-eagle.0",
+    "@blaze-cms/plugin-render-hooks-ui": "0.146.0-rc-eagle.0",
+    "@blaze-cms/react-form-builder": "0.146.0-rc-eagle.0",
+    "@blaze-cms/react-page-builder": "0.146.0-rc-eagle.0",
+    "@blaze-cms/setup-ui": "0.146.0-rc-eagle.0",
+    "@blaze-cms/versioning-ui": "0.146.0-rc-eagle.0",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/more": "0.5.19",
-    "@blaze-react/multiselect": "0.8.0-alpha.78",
+    "@blaze-react/multiselect": "0.8.0-alpha.103",
     "@blaze-react/pagination": "0.8.0-alpha.76",
-    "@blaze-react/select": "0.8.0-alpha.80",
+    "@blaze-react/select": "0.8.0-alpha.100",
     "@blaze-react/tab": "^0.7.0",
     "@blaze-react/table": "0.8.0-alpha.74",
     "@blaze-react/toaster": "^0.7.0",
+    "@blaze-react/tooltip": "0.8.0-alpha.100",
     "@blaze-react/utils": "0.5.15",
-    "core-js": "^3.2.1",
     "lodash.differencewith": "^4.5.0",
     "lodash.has": "^4.5.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
-    "lodash.omit": "^4.5.0",
+    "lodash.omit": "^4.18.0",
     "lodash.unionby": "^4.8.0",
     "lodash.upperfirst": "^4.3.1",
     "react-helmet": "^6.1.0",
@@ -56,17 +56,17 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.146.0-node18.1"
+    "@blaze-cms/core-ui": "0.146.0-rc-eagle.0"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
+    "react": ">= 18",
     "react-router-dom": "^5.0.1"
   },
   "eslintIgnore": [
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "1b5ba49d185e912846cec402d39a44ef2623ca1c"
+  "gitHead": "ddfab9ac3d59438939268c106917b092e4071071"
 }

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

@@ -4,16 +4,14 @@ 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 { getQuery } from '@blaze-cms/admin-ui-utils';
 import { FormBuilder, parseFormValues } from '@blaze-cms/react-form-builder';
 import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import cloneDeep from 'lodash.clonedeep';
 import { getPageName } from '../utils/data-mappers';
-import isFormEmpty from '../utils/is-form-empty';
 import availableActions from './actions-handlers';
 import SideBarRelations from './SideBarRelations';
-import Tabs from '../../Tabs';
 import useCallbackDebounce from '../../hooks/useCallbackDebounce';
 
 import {
@@ -51,8 +49,6 @@ const Entity = ({
   onViewUrl,
   refetchRecord
 }) => {
-  const client = useApolloClient();
-  const [, setCurrentTabId] = useState(null);
   const [formValues, setFormValues] = useState(null);
   const [entitySchema, setEntitySchema] = useState(null);
   const [entityData, setEntityData] = useState(null);
@@ -73,10 +69,14 @@ const Entity = ({
   const [newUpdatedDate, setNewUpdatedDate] = useState(null);
   const [saveButtonText, setSaveButtonText] = useState(SAVE_BUTTON_TEXTS.save);
   const [externalUpdateTime, setExternalUpdateTime] = useState(null);
+  const [suppressPrompt, setSuppressPrompt] = useState(false);
+  const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
+  const handleToggleRightSidebar = () => setIsRightSidebarOpen(!isRightSidebarOpen);
 
   const isCreatePage = history.location.pathname.includes('create');
   const [isNewEntity, setIsNewEntity] = useState(isCreatePage);
 
+  const client = useApolloClient();
   const shouldUpdateState =
     !entityIdentifier ||
     checkFulfilConditions(entity, schema, previousQuery, !entityData) ||
@@ -133,7 +133,8 @@ const Entity = ({
       client.writeQuery({
         query: getQuery('GET_CURRENT_ENTITY'),
         data: {
-          currentEntity: schema.id
+          currentEntity: schema.id,
+          currentItemId: entity ? entity.id : null
         }
       });
     }
@@ -248,13 +249,12 @@ const Entity = ({
     const [updatedEntity = null] = fields.filter(({ id }) => id === 'name');
     updatedEntity && setPageTitle(updatedEntity.value);
 
-    const isValidAndNewValueSet = isValid && isNewValueSet;
     const isNotValidOrNotNewValueSet = !isValid || !isNewValueSet;
     if (componentIsMounted.current) {
       setIsFormValid(isValid);
     }
 
-    if (isValidAndNewValueSet && componentIsMounted.current) {
+    if (isValid && isNewValueSet && componentIsMounted.current) {
       setIsSaveButtonAvailable(true);
       setSaveButtonText(SAVE_BUTTON_TEXTS.save);
     }
@@ -270,10 +270,12 @@ const Entity = ({
 
   const onSubmit = event => {
     event && event.preventDefault();
-
     if (!isSaveButtonAvailable) return null;
-    const parsedFormValues = parseFormValues(formValues);
 
+    if (isCreatePage) {
+      setSuppressPrompt(true);
+    }
+    const parsedFormValues = parseFormValues(formValues);
     const updatedFormValues = newUpdatedDate
       ? { ...formData.values, update: newUpdatedDate }
       : { ...formData.values };
@@ -411,13 +413,9 @@ const Entity = ({
 
   const pageName = formData && formData.values && formData.values.name;
 
-  const hasNewFormValues = checkFulfilConditions(isNewEntity, !isFormEmpty(formValues));
-  const hasToDisplayPrompt = isSaveButtonAvailable || hasNewFormValues;
+  const hasToDisplayPrompt = isSaveButtonAvailable && !suppressPrompt;
 
   const showSideBarRelations = checkFulfilConditions(schema, formData);
-  const showPageBuilderTabs =
-    schema?.interfaces?.includes('page-builder/page-builder-template') ||
-    schema?.interfaces?.includes('page-builder/page-builder');
 
   return (
     <RecordEditContextProvider value={{ externalUpdateTime, updated: formData?.values?.updated }}>
@@ -458,7 +456,8 @@ const Entity = ({
               />
             )}
 
-            <div className="page__content--fixed">
+            <div
+              className={`page__content${!isRightSidebarOpen ? ' right-sidebar-collapsed' : ''}`}>
               <div className="page__content">
                 <div className="content">
                   <RenderHook
@@ -467,28 +466,19 @@ const 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}
-                      onExternalUpdate={setExternalUpdateTime}
-                    />
-                  </Tabs>
+                  <FormBuilder
+                    getIsFormValid={setIsFormValid}
+                    getFormValues={getFormValues}
+                    schema={schema}
+                    data={clonedFormData}
+                    onChange={onChangeFormValues}
+                    shouldCopyData={shouldCopyData}
+                    updateCopyData={updateCopyData}
+                    formValues={formValues}
+                    isNewEntity={isNewEntity}
+                    onExternalUpdate={setExternalUpdateTime}
+                    mode={isNewEntity ? 'create' : 'update'}
+                  />
                   <RenderHook
                     hookKey={`entity:${action}:main:bottom`}
                     entity={entity}
@@ -499,13 +489,18 @@ const Entity = ({
             </div>
           </div>
 
-          <div className="column column--one-third page-sidebar page-sidebar--relations">
+          <div
+            className={`column column--one-third page-sidebar page-sidebar--relations${
+              !isRightSidebarOpen ? ' sidebar--collapsed' : ''
+            }`}>
             {showSideBarRelations && (
               <SideBarRelations
                 entity={entity}
                 formData={formData.values}
                 schema={schema}
                 onChange={onChangeSideBarRelations}
+                isOpen={isRightSidebarOpen}
+                onToggle={handleToggleRightSidebar}
               />
             )}
           </div>

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '@blaze-react/button';
 import { useMutation } from '@apollo/client';
 import { getMutation } from '@blaze-cms/admin-ui-utils';
+import { DEBUG_PARAM } from '../../../../../constants';
 
 const HeaderPreviewButton = ({ itemId, itemEntity }) => {
   const [createPreviewToken] = useMutation(getMutation('PREVIEW_TOKEN_MUTATION'));
@@ -23,7 +24,13 @@ const HeaderPreviewButton = ({ itemId, itemEntity }) => {
         }
       });
 
-      if (url) window.open(url, '_blank');
+      if (url) {
+        const delimiter = url.includes('?') ? '&' : '?';
+        const debugParam = process.env.BLAZE_DISABLE_URL_DEBUG_PARAM
+          ? ''
+          : `${delimiter}${DEBUG_PARAM}`;
+        window.open(`${url}${debugParam}`, '_blank');
+      }
       // eslint-disable-next-line no-empty
     } catch (err) {}
   };

package/src/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js

@@ -18,6 +18,8 @@ export default function buildDynamicQuery({ id, schema, displayProperties }) {
         label
         value
         showLabel
+        tooltipIcon
+        tooltipContent
       }`
     );
 

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import uuidv1 from 'uuid/v1';
+import Accordion from '@blaze-react/accordion';
 import { useApolloClient } from '@apollo/client';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { formFieldTypes } from '@blaze-cms/react-form-builder';
@@ -10,10 +11,16 @@ import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
 import CustomSidebarInfoContainer from './container/CustomSidebarInfoContainer';
 import EntityNavLinks from '../EntitiyNavLinks';
 
-const SideBarRelations = ({ schema, onChange, formData, entity }) => {
+const SideBarRelations = ({ schema, onChange, formData, entity, isOpen, onToggle }) => {
   const { relation: RelationComponent } = formFieldTypes;
-  const { formattedStatus, formattedUpdated, formattedCreated, formattedPublished, status } =
-    formData;
+  const {
+    formattedStatus,
+    formattedUpdated,
+    formattedCreated,
+    formattedPublished,
+    updatedBy,
+    status
+  } = formData;
   const client = useApolloClient();
 
   const [relationsComponents, setRelationsComponents] = useState(null);
@@ -58,7 +65,16 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   });
 
   return (
-    <div className="sidebar" data-testid="sideBarRelations-main-div">
+    <div
+      className={classnames('sidebar', { 'sidebar--collapsed': !isOpen })}
+      data-testid="sideBarRelations-main-div">
+      <div
+        className="sidebar__toggle-button"
+        onClick={onToggle}
+        role="button"
+        aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}>
+        <i className="material-icons">{isOpen ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}</i>
+      </div>
       <div className="sidebar__content">
         <div className="sidebar__status">
           {formattedCreated && (
@@ -82,6 +98,11 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
               <p>
                 Updated: <span>{formattedUpdated}</span>
               </p>
+              {updatedBy && (
+                <p>
+                  Updated by: <span>{updatedBy.name}</span>
+                </p>
+              )}
             </>
           )}
 
@@ -95,16 +116,26 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
         <VersionsList itemEntity={itemEntity} itemId={itemId} interfaces={interfaces} />
         <EntityNavLinks schema={schema} />
 
-        {relationsComponents &&
-          relationsComponents.map(({ id, staticData, schema: entitySchema }) => (
-            <RelationComponent
-              formData={formData}
-              schema={entitySchema}
-              key={id}
-              staticData={staticData}
-              onSelect={onChange}
-            />
-          ))}
+        {relationsComponents && (
+          <Accordion isOpen>
+            <Accordion.Header>
+              <b>Classification</b>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Accordion.ContentDetails>
+                {relationsComponents.map(({ id, staticData, schema: entitySchema }) => (
+                  <RelationComponent
+                    formData={formData}
+                    schema={entitySchema}
+                    key={id}
+                    staticData={staticData}
+                    onSelect={onChange}
+                  />
+                ))}
+              </Accordion.ContentDetails>
+            </Accordion.Content>
+          </Accordion>
+        )}
       </div>
     </div>
   );
@@ -114,11 +145,14 @@ SideBarRelations.propTypes = {
   schema: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
   formData: PropTypes.object.isRequired,
-  entity: PropTypes.object
+  entity: PropTypes.object,
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func
 };
-
 SideBarRelations.defaultProps = {
-  entity: {}
+  entity: {},
+  isOpen: true,
+  onToggle: () => {}
 };
 
 export default SideBarRelations;

package/src/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InfoBoxValue from '../../../../InfoBoxes/presentational/InfoBoxValue';
 import InfoBoxLabel from '../../../../InfoBoxes/presentational/InfoBoxLabel';
+import InfoBoxTooltip from '../../../../InfoBoxes/InfoBoxTooltip';
 
 const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
   if (!items) return null;
@@ -12,10 +13,11 @@ const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
         if (!info.label || !info.value) return null;
 
         return (
-          <p>
+          <p key={`${customSidebarInfoKey}-${info.label.toLowerCase()}`}>
             <InfoBoxLabel item={info} />
             <span>
               <InfoBoxValue item={info} />
+              <InfoBoxTooltip info={info} position="left" />
             </span>
           </p>
         );
@@ -30,9 +32,9 @@ const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
   );
 };
 
-export default CustomSidebarInfo;
-
 CustomSidebarInfo.propTypes = {
   customSidebarInfoKey: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired
 };
+
+export default CustomSidebarInfo;

package/src/components/EntityManager/utils/entity.js

@@ -1,5 +1,10 @@
 import has from 'lodash.has';
-import { ENTITY_PUBLISHED, KEY_TO_CHECK, SELECT_DEFAULT_VALUE } from '../../../constants';
+import {
+  DEBUG_PARAM,
+  ENTITY_PUBLISHED,
+  KEY_TO_CHECK,
+  SELECT_DEFAULT_VALUE
+} from '../../../constants';
 
 function canViewPage(formData, entity, schema, entityIsPublished) {
   return (
@@ -28,7 +33,13 @@ function validateSideBarRelations(updatedFormValues, requiredChildField) {
 
 async function onViewUrlClick(getFullUrl) {
   const fullUrl = await getFullUrl();
-  if (fullUrl) window.open(fullUrl, '_blank');
+  if (fullUrl) {
+    const delimiter = fullUrl.includes('?') ? '&' : '?';
+    const debugParam = process.env.BLAZE_DISABLE_URL_DEBUG_PARAM
+      ? ''
+      : `${delimiter}${DEBUG_PARAM}`;
+    window.open(`${fullUrl}${debugParam}`, '_blank');
+  }
 }
 
 function getUpdatedFormValues({ id, value, requiredChildField, formValues }) {

package/src/components/InfoBoxes/InfoBoxTooltip.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '@blaze-react/tooltip';
+
+const InfoBoxTooltip = ({ info, ...tooltipProps }) => {
+  const { tooltipContent, tooltipIcon } = info;
+  if (!tooltipContent) return null;
+
+  const renderTooltipIcon = icon => {
+    if (!icon) return null;
+    return <i className={`${icon} info-box--icon`} />;
+  };
+
+  return (
+    <Tooltip
+      tooltipContent={tooltipContent}
+      trigger="click"
+      className="info-box--tooltip"
+      {...tooltipProps}>
+      {renderTooltipIcon(tooltipIcon)}
+    </Tooltip>
+  );
+};
+
+InfoBoxTooltip.propTypes = {
+  info: PropTypes.shape({
+    tooltipContent: PropTypes.node,
+    tooltipIcon: PropTypes.string
+  }).isRequired
+};
+
+export default InfoBoxTooltip;

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

@@ -17,6 +17,8 @@ export default function buildDynamicQuery({ id, schema, properties }) {
       value
       showLabel
       url
+      tooltipIcon
+      tooltipContent
     }`
   );
 

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import InfoBoxValue from './InfoBoxValue';
 import InfoBoxLabel from './InfoBoxLabel';
+import InfoBoxTooltip from '../InfoBoxTooltip';
 
 const InfoBox = ({ items, infoBoxKey }) => {
   if (!items) return null;
@@ -18,6 +19,7 @@ const InfoBox = ({ items, infoBoxKey }) => {
             </div>
             <div className="info-box--value">
               <InfoBoxValue item={info} />
+              <InfoBoxTooltip info={info} />
             </div>
           </div>
         );
@@ -32,9 +34,9 @@ const InfoBox = ({ items, infoBoxKey }) => {
   );
 };
 
-export default InfoBox;
-
 InfoBox.propTypes = {
   infoBoxKey: PropTypes.string.isRequired,
   items: PropTypes.array.isRequired
 };
+
+export default InfoBox;

package/src/components/ListingTable/ListingTable.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import More from '@blaze-react/more';
 import { useApolloClient } from '@apollo/client';
 import { withRouter, Link, useLocation } from 'react-router-dom';
 import { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import ListingTableContent from './ListingTableContent';
+import SearchFilter from './SearchFilter/SearchFilter';
 import availableActions from '../EntityManager/Entity/actions-handlers';
 import { fetchData } from './service';
 import { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';
@@ -38,7 +38,7 @@ const ListingTable = ({ match, entitySchema, history }) => {
             ...queryParams,
             offset: currentPage * queryParamsDefault.limit - queryParamsDefault.limit
           };
-          await doQuery(listFilters, updatedQueryParams);
+          await doQuery([], updatedQueryParams);
           setPreviousSchema({ id: entitySchema.id });
         }
       })();
@@ -169,22 +169,9 @@ const ListingTable = ({ match, entitySchema, history }) => {
       )}
       <PageHeader title={entitySchema.displayName} subtitle="">
         {createAction.active && !showAddButton && (
-          <>
-            <Link
-              data-testid="addEntity"
-              className="button button--small"
-              to={`${match.url}/create`}>
-              Add
-            </Link>
-            <PageHeader.Actions>
-              <More>
-                <More.Avatar isMoreMenu>
-                  <span className="material-icons">more_vert</span>
-                </More.Avatar>
-                <More.Content isMoreMenu />
-              </More>
-            </PageHeader.Actions>
-          </>
+          <Link data-testid="addEntity" className="button button--small" to={`${match.url}/create`}>
+            Add
+          </Link>
         )}
       </PageHeader>
       {showAddButton ? (
@@ -204,6 +191,11 @@ const ListingTable = ({ match, entitySchema, history }) => {
             listFilters={listFilters}
             setListFilters={updateListingFilters}
           />
+          <SearchFilter
+            schema={entitySchema}
+            listFilters={listFilters}
+            setListFilters={updateListingFilters}
+          />
           <ListingTableContent
             totalItems={totalItems}
             currentPage={currentPage}
@@ -211,6 +203,9 @@ const ListingTable = ({ match, entitySchema, history }) => {
             handleOnPageChange={handleOnPageChange}
             tableData={tableData}
             onCloseCardPrompt={onCloseCardPrompt}
+            schema={entitySchema}
+            listFilters={listFilters}
+            setListFilters={updateListingFilters}
           />
         </>
       )}