@blaze-cms/plugin-data-ui 0.146.0-translations.8 → 0.147.0-rc-eagle.4

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

@@ -4,7 +4,7 @@ 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';
@@ -13,7 +13,6 @@ 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,7 +50,6 @@ const Entity = ({
   onViewUrl,
   refetchRecord
 }) => {
-  const [, setCurrentTabId] = useState(null);
   const [formValues, setFormValues] = useState(null);
   const [entitySchema, setEntitySchema] = useState(null);
   const [entityData, setEntityData] = useState(null);
@@ -109,50 +107,48 @@ const Entity = ({
     []
   ); // Using an empty dependency array ensures this only runs on unmount
 
-  useEffect(
-    () => {
-      if (shouldUpdateState) {
-        setSaveButtonText(SAVE_BUTTON_TEXTS.save);
-        setEntityData(entity);
-        setPageTitle(getPageName(schema.displayProperties, entity));
-        setEntityIsPublish(entity.status);
-        setEntitySchema(schema);
-        setEnablePublishButton(schema.actions.publish);
-        setEntityIdentifier(schema.identifier);
-        setEnablePreviewButton(!!schema.interfaces.includes(PREVIEW_INTERFACE));
-      }
+  useEffect(() => {
+    if (shouldUpdateState) {
+      setSaveButtonText(SAVE_BUTTON_TEXTS.save);
+      setEntityData(entity);
+      setPageTitle(getPageName(schema.displayProperties, entity));
+      setEntityIsPublish(entity.status);
+      setEntitySchema(schema);
+      setEnablePublishButton(schema.actions.publish);
+      setEntityIdentifier(schema.identifier);
+      setEnablePreviewButton(!!schema.interfaces.includes(PREVIEW_INTERFACE));
+    }
 
-      if (formData && pageBuilderTemplateStatus) {
-        const isPageBuilderTemplateSet = !!formData.values.pageBuilderTemplateId;
-        client.writeQuery({
-          query: getQuery('GET_PB_TEMPLATE_STATUS'),
-          data: {
-            pageBuilderTemplateSet: isPageBuilderTemplateSet,
-            pageBuilderTemplateId: formData.values.pageBuilderTemplateId || ''
-          }
-        });
-      }
-      if (schema) {
-        client.writeQuery({
-          query: getQuery('GET_CURRENT_ENTITY'),
-          data: {
-            currentEntity: schema.id
-          }
-        });
-      }
-    },
-    [
-      client,
-      entity,
-      entityData,
-      formData,
-      formValues,
-      pageBuilderTemplateStatus,
-      previousQuery,
-      schema,
-      shouldUpdateState
-    ]
-  );
+    if (formData && pageBuilderTemplateStatus) {
+      const isPageBuilderTemplateSet = !!formData.values.pageBuilderTemplateId;
+      client.writeQuery({
+        query: getQuery('GET_PB_TEMPLATE_STATUS'),
+        data: {
+          pageBuilderTemplateSet: isPageBuilderTemplateSet,
+          pageBuilderTemplateId: formData.values.pageBuilderTemplateId || ''
+        }
+      });
+    }
+    if (schema) {
+      client.writeQuery({
+        query: getQuery('GET_CURRENT_ENTITY'),
+        data: {
+          currentEntity: schema.id,
+          currentItemId: entity ? entity.id : null
+        }
+      });
+    }
+  }, [
+    client,
+    entity,
+    entityData,
+    formData,
+    formValues,
+    pageBuilderTemplateStatus,
+    previousQuery,
+    schema,
+    shouldUpdateState
+  ]);
 
   const getFullUrl = async () => {
     const query = getQuery('GET_ENTITY_URL');
@@ -420,9 +416,6 @@ const Entity = ({
   const hasToDisplayPrompt = isSaveButtonAvailable || hasNewFormValues;
 
   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 }}>
@@ -464,9 +457,8 @@ const Entity = ({
             )}
 
             <div
-              className={`page__content--fixed${
-                !isRightSidebarOpen ? ' right-sidebar-collapsed' : ''
-              }`}>
+              className={`page__content--fixed${!isRightSidebarOpen ? ' right-sidebar-collapsed' : ''
+                }`}>
               <div className="page__content">
                 <div className="content">
                   <RenderHook
@@ -475,28 +467,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}
@@ -508,9 +491,8 @@ const Entity = ({
           </div>
 
           <div
-            className={`column column--one-third page-sidebar page-sidebar--relations${
-              !isRightSidebarOpen ? ' sidebar--collapsed' : ''
-            }`}>
+            className={`column column--one-third page-sidebar page-sidebar--relations${!isRightSidebarOpen ? ' sidebar--collapsed' : ''
+              }`}>
             {showSideBarRelations && (
               <SideBarRelations
                 entity={entity}

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

@@ -30,8 +30,7 @@ const EntityHeader = ({
 
   const {
     displayProperties: { adminCrudActions: { delete: deleteAction = { active: true } } = {} } = {}
-  } =
-    entitySchema || {};
+  } = entitySchema || {};
 
   const showDeleteButton =
     deleteAction.active && formData && Object.keys(formData.values).length !== 0;

package/src/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js

@@ -21,17 +21,19 @@ const useCustomSidebarData = ({ id, schema, displayProperties }) => {
       }
     `;
 
-  const { data = {}, loading, error, refetch } = useQuery(customSidebarInfoQuery, {
+  const {
+    data = {},
+    loading,
+    error,
+    refetch
+  } = useQuery(customSidebarInfoQuery, {
     variables: { id },
     skip: !query
   });
 
-  useEffect(
-    () => {
-      refetch();
-    },
-    [externalUpdateTime, updated, refetch]
-  );
+  useEffect(() => {
+    refetch();
+  }, [externalUpdateTime, updated, refetch]);
 
   return { data: data.__typename !== 'Query' ? data : null, loading, error };
 };

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';
@@ -24,40 +25,37 @@ const SideBarRelations = ({ schema, onChange, formData, entity, isOpen, onToggle
 
   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;
 
@@ -92,24 +90,21 @@ const SideBarRelations = ({ schema, onChange, formData, entity, isOpen, onToggle
               )}
             </div>
           )}
-          {!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>
-                  )}
-                </>
-              </>
-            )}
+          {!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}
@@ -121,16 +116,26 @@ const SideBarRelations = ({ schema, onChange, formData, entity, isOpen, onToggle
         <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>
   );

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/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/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/ListingTable/ListingTable.js

@@ -144,7 +144,6 @@ const ListingTable = ({ match, entitySchema, history }) => {
     });
     history.push('?page=1');
   };
-
   if (!tableData || !tableData.rows) return 'loading';
 
   const {
@@ -160,27 +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>
-            </Fragment>
-          )}
+        {createAction.active && !showAddButton && (
+          <Link data-testid="addEntity" className="button button--small" to={`${match.url}/create`}>
+            Add
+          </Link>
+        )}
       </PageHeader>
       {showAddButton ? (
         <CardPrompt>

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

@@ -1,7 +1,6 @@
 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';
 
@@ -18,53 +17,48 @@ const ListingTableContent = ({
   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) {
-        const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
-        const firstRowCells = ref.current.querySelectorAll(
-          '.table-body .table-row:first-child .table-cell'
-        );
+  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);
+      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]
-  );
+        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 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>
-        </>
-      ) : (
-        <span className="table-no-results" data-testid="no-results">
-          No results
-        </span>
-      )}
-    </>
+    <span className="table-no-results" data-testid="no-results">
+      No results
+    </span>
   );
 };