@blaze-cms/plugin-data-ui 0.146.0-translations.6 → 0.147.0-rc-eagle.2

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,53 +11,51 @@ 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,
+    updatedBy,
     status
   } = formData;
   const client = useApolloClient();
 
   const [relationsComponents, setRelationsComponents] = useState(null);
 
-  useEffect(
-    () => {
-      (async () => {
-        const fetchRelationSchema = async ({ entityIdentifier }) => {
-          if (!entityIdentifier) return null;
+  useEffect(() => {
+    (async () => {
+      const fetchRelationSchema = async ({ entityIdentifier }) => {
+        if (!entityIdentifier) return null;
 
-          const {
-            data: {
-              getEntitySchemas: [relationSchema]
-            }
-          } = await client.query({
-            query: getQuery('GET_ENTITY_SCHEMA'),
-            variables: { identifier: entityIdentifier }
-          });
-          return relationSchema;
-        };
+        const {
+          data: {
+            getEntitySchemas: [relationSchema]
+          }
+        } = await client.query({
+          query: getQuery('GET_ENTITY_SCHEMA'),
+          variables: { identifier: entityIdentifier }
+        });
+        return relationSchema;
+      };
 
-        if (!relationsComponents && schema) {
-          const allRelationComponents = await Promise.all(
-            schema.relations
-              .filter(({ showInForm, foreignKey }) => showInForm && schema.properties[foreignKey])
-              .map(async relation => ({
-                id: uuidv1(),
-                staticData: relation,
-                schema: await fetchRelationSchema(relation)
-              }))
-          );
+      if (!relationsComponents && schema) {
+        const allRelationComponents = await Promise.all(
+          schema.relations
+            .filter(({ showInForm, foreignKey }) => showInForm && schema.properties[foreignKey])
+            .map(async relation => ({
+              id: uuidv1(),
+              staticData: relation,
+              schema: await fetchRelationSchema(relation)
+            }))
+        );
 
-          setRelationsComponents(allRelationComponents);
-        }
-      })();
-    },
-    [client, relationsComponents, schema, schema.relations]
-  );
+        setRelationsComponents(allRelationComponents);
+      }
+    })();
+  }, [client, relationsComponents, schema, schema.relations]);
   const { id: itemId } = entity;
   const { identifier: itemEntity, interfaces } = schema;
 
@@ -66,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,19 +90,21 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
               )}
             </div>
           )}
-          {!schema.displayProperties.disableDefaultAdminInfo &&
-            formattedCreated && (
-              <>
-                <>
-                  <p>
-                    Created: <span>{formattedCreated}</span>
-                  </p>
-                  <p>
-                    Updated: <span>{formattedUpdated}</span>
-                  </p>
-                </>
-              </>
-            )}
+          {!schema.displayProperties.disableDefaultAdminInfo && formattedCreated && (
+            <>
+              <p>
+                Created: <span>{formattedCreated}</span>
+              </p>
+              <p>
+                Updated: <span>{formattedUpdated}</span>
+              </p>
+              {updatedBy && (
+                <p>
+                  Updated by: <span>{updatedBy.name}</span>
+                </p>
+              )}
+            </>
+          )}
 
           <CustomSidebarInfoContainer
             id={itemId}
@@ -106,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>
   );
@@ -125,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/EntityManager.js

@@ -19,56 +19,63 @@ const EntityManager = ({ match, history }) => {
 
   const { action, entityIdentifier, id = null, onViewUrl } = match.params;
 
-  useEffect(
-    () => {
-      (async () => {
-        try {
-          const [entitySchema, data = {}, requestedQuery] = await entityAvailableActions[action]({
-            client,
-            identifier: entityIdentifier,
-            id
-          });
-
-          if (!data) {
-            addToast(PAGE_NOT_FOUND, {
-              appearance: ERROR,
-              autoDismiss: true
-            });
-
-            history.push(`/data-listing/${entityIdentifier}`);
-          }
-
-          let localData = data;
-
-          if (isPageBuilderTemplateSet(data)) {
-            const pageBuilderComponents = await getPageBuilderComponents({
-              entitySchema,
-              client,
-              id
-            });
-
-            localData = {
-              ...localData,
-              pageBuilder: pageBuilderComponents || localData.pageBuilder
-            };
-          }
-
-          setFormData({ values: localData });
-          setEntity(data);
-          setSchema(entitySchema);
-          setPreviousQuery(requestedQuery);
-          setShouldRefetch(false);
-        } catch (error) {
-          addToast(error.message, {
+  useEffect(() => {
+    (async () => {
+      try {
+        const [entitySchema, data = {}, requestedQuery] = await entityAvailableActions[action]({
+          client,
+          identifier: entityIdentifier,
+          id
+        });
+
+        if (!data) {
+          addToast(PAGE_NOT_FOUND, {
             appearance: ERROR,
             autoDismiss: true
           });
+
           history.push(`/data-listing/${entityIdentifier}`);
         }
-      })();
-    },
-    [action, addToast, client, entityIdentifier, history, history.push, id, schema, shouldRefetch]
-  );
+
+        let localData = data;
+
+        if (isPageBuilderTemplateSet(data)) {
+          const pageBuilderComponents = await getPageBuilderComponents({
+            entitySchema,
+            client,
+            id
+          });
+
+          localData = {
+            ...localData,
+            pageBuilder: pageBuilderComponents || localData.pageBuilder
+          };
+        }
+
+        setFormData({ values: localData });
+        setEntity(data);
+        setSchema(entitySchema);
+        setPreviousQuery(requestedQuery);
+        setShouldRefetch(false);
+      } catch (error) {
+        addToast(error.message, {
+          appearance: ERROR,
+          autoDismiss: true
+        });
+        history.push(`/data-listing/${entityIdentifier}`);
+      }
+    })();
+  }, [
+    action,
+    addToast,
+    client,
+    entityIdentifier,
+    history,
+    history.push,
+    id,
+    schema,
+    shouldRefetch
+  ]);
 
   const updateFormData = (updatedFormData, shouldRefresh) => {
     if (shouldRefresh) setShouldRefetch(true);

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/container/InfoBoxContainer.js

@@ -9,12 +9,9 @@ const InfoBoxContainer = ({ id, schema, infoBox }) => {
 
   const { data, refetch } = useData({ id, schema, infoBox });
 
-  useEffect(
-    () => {
-      refetch();
-    },
-    [externalUpdateTime, refetch]
-  );
+  useEffect(() => {
+    refetch();
+  }, [externalUpdateTime, refetch]);
 
   if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
 

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/hooks/useData.js

@@ -12,7 +12,12 @@ function useData({ id, schema, infoBox }) {
       }
     `;
 
-  const { data = {}, loading, error, refetch } = useQuery(infoBoxQuery, {
+  const {
+    data = {},
+    loading,
+    error,
+    refetch
+  } = useQuery(infoBoxQuery, {
     variables: { id },
     skip: !query
   });

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 });
         }
       })();
@@ -144,7 +144,6 @@ const ListingTable = ({ match, entitySchema, history }) => {
     });
     history.push('?page=1');
   };
-
   if (!tableData || !tableData.rows) return 'loading';
 
   const {
@@ -160,35 +159,20 @@ const ListingTable = ({ match, entitySchema, history }) => {
 
   return (
     <div className="page">
-      {modalStatus &&
-        _deleteAction.active && (
-          <DeleteAction
-            data-testid="deleteEntity"
-            onClose={toggleModal}
-            deleteAction={deleteAction}
-            itemName={itemToDelete.name}
-          />
-        )}
+      {modalStatus && _deleteAction.active && (
+        <DeleteAction
+          data-testid="deleteEntity"
+          onClose={toggleModal}
+          deleteAction={deleteAction}
+          itemName={itemToDelete.name}
+        />
+      )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {createAction.active &&
-          !showAddButton && (
-            <Fragment>
-              <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>
-            </Fragment>
-          )}
+        {createAction.active && !showAddButton && (
+          <Link data-testid="addEntity" className="button button--small" to={`${match.url}/create`}>
+            Add
+          </Link>
+        )}
       </PageHeader>
       {showAddButton ? (
         <CardPrompt>
@@ -207,6 +191,11 @@ const ListingTable = ({ match, entitySchema, history }) => {
             listFilters={listFilters}
             setListFilters={updateListingFilters}
           />
+          <SearchFilter
+            schema={entitySchema}
+            listFilters={listFilters}
+            setListFilters={updateListingFilters}
+          />
           <ListingTableContent
             totalItems={totalItems}
             currentPage={currentPage}
@@ -214,6 +203,9 @@ const ListingTable = ({ match, entitySchema, history }) => {
             handleOnPageChange={handleOnPageChange}
             tableData={tableData}
             onCloseCardPrompt={onCloseCardPrompt}
+            schema={entitySchema}
+            listFilters={listFilters}
+            setListFilters={updateListingFilters}
           />
         </>
       )}

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

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Table from '@blaze-react/table';
 import Pagination from '@blaze-react/pagination';
-
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
@@ -13,36 +12,53 @@ const ListingTableContent = ({
   currentPage,
   totalItems
 }) => {
+  const ref = useRef(null);
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
   const { isEnquiry } = tableData;
   const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
+  useEffect(() => {
+    // set table head to match body column widths to handle dynamic content
+    if (ref.current && displayTable) {
+      const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
+      const firstRowCells = ref.current.querySelectorAll(
+        '.table-body .table-row:first-child .table-cell'
+      );
+
+      firstRowCells.forEach((element, i) => {
+        const styles = window.getComputedStyle(element);
+
+        if (tableHeadCells[i]) {
+          tableHeadCells[i].style.flex = styles.flex;
+          tableHeadCells[i].style['justify-content'] = styles['justify-content'];
+        }
+      });
+    }
+  }, [tableData, displayTable]);
+
+  if (displayTable) {
+    return (
+      <div ref={ref} className={className}>
+        <Table
+          onSort={onSort}
+          data={tableData}
+          onSelect={handleSelect}
+          data-testid="listing-table-content"
+        />
+        <Pagination
+          visiblePages={10}
+          totalItems={totalItems}
+          currentPage={currentPage}
+          onPageChange={handleOnPageChange}
+        />
+      </div>
+    );
+  }
+
   return (
-    <>
-      {displayTable ? (
-        <>
-          <div className={className}>
-            <Table
-              onSort={onSort}
-              data={tableData}
-              checkboxes={!isEnquiry}
-              onSelect={handleSelect}
-              data-testid="listing-table-content"
-            />
-            <Pagination
-              visiblePages={10}
-              totalItems={totalItems}
-              currentPage={currentPage}
-              onPageChange={handleOnPageChange}
-            />
-          </div>
-        </>
-      ) : (
-        <span className="table-no-results" data-testid="no-results">
-          No results
-        </span>
-      )}
-    </>
+    <span className="table-no-results" data-testid="no-results">
+      No results
+    </span>
   );
 };