@blaze-cms/plugin-data-ui 0.139.0 → 0.139.1-core-styles.0

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

@@ -36,6 +36,7 @@ import {
 } from '../utils/entity';
 import useToggle from '../../../utils/hooks/useToggle';
 import InfoBoxes from '../../InfoBoxes/InfoBoxes';
+import { RecordEditContextProvider } from '../utils/RecordEditContext';
 
 const Entity = ({
   formData,
@@ -68,6 +69,7 @@ const Entity = ({
   const [formDataFromCopy, setFormDataFromCopy] = useState(null);
   const [newUpdatedDate, setNewUpdatedDate] = useState(null);
   const [saveButtonText, setSaveButtonText] = useState(SAVE_BUTTON_TEXTS.save);
+  const [externalUpdateTime, setExternalUpdateTime] = useState(null);
 
   const isCreatePage = history.location.pathname.includes('create');
   const [isNewEntity, setIsNewEntity] = useState(isCreatePage);
@@ -238,6 +240,7 @@ const Entity = ({
     if (componentIsMounted.current) {
       setIsFormValid(isValid);
     }
+
     if (isValidAndNewValueSet && componentIsMounted.current) {
       setIsSaveButtonAvailable(true);
       setSaveButtonText(SAVE_BUTTON_TEXTS.save);
@@ -404,89 +407,97 @@ const Entity = ({
     schema?.interfaces?.includes('page-builder/page-builder');
 
   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}
+    <RecordEditContextProvider value={{ externalUpdateTime }}>
+      <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}
+                      onExternalUpdate={setExternalUpdateTime}
+                      dataUpdatedDateTime={newUpdatedDate}
+                    />
+                  </Tabs>
+                  <RenderHook
+                    hookKey={`entity:${action}:main:bottom`}
+                    entity={entity}
                     schema={schema}
-                    data={clonedFormData}
-                    onChange={onChangeFormValues}
-                    shouldCopyData={shouldCopyData}
-                    updateCopyData={updateCopyData}
-                    formValues={formValues}
-                    isNewEntity={isNewEntity}
                   />
-                </Tabs>
-                <RenderHook
-                  hookKey={`entity:${action}:main:bottom`}
-                  entity={entity}
-                  schema={schema}
-                />
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div className="column column--one-third page-sidebar page-sidebar--relations">
-          {showSideBarRelations && (
-            <SideBarRelations
-              entity={entity}
-              formData={formData.values}
-              schema={schema}
-              onChange={onChangeSideBarRelations}
-            />
-          )}
+          <div className="column column--one-third page-sidebar page-sidebar--relations">
+            {showSideBarRelations && (
+              <SideBarRelations
+                entity={entity}
+                formData={formData.values}
+                schema={schema}
+                onChange={onChangeSideBarRelations}
+              />
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </RecordEditContextProvider>
   );
 };
 

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

@@ -1,8 +1,12 @@
+import { useContext, useEffect } from 'react';
 import ProptTypes from 'prop-types';
 import { useQuery, gql } from '@apollo/client';
 import buildDynamicQuery from '../helpers/build-dynamic-query';
+import { RecordEditContext } from '../../../utils/RecordEditContext';
 
 const useCustomSidebarData = ({ id, schema, displayProperties }) => {
+  const { externalUpdateTime } = useContext(RecordEditContext);
+
   const query = buildDynamicQuery({ id, schema, displayProperties });
 
   const customSidebarInfoQuery =
@@ -13,11 +17,18 @@ const useCustomSidebarData = ({ id, schema, displayProperties }) => {
       }
     `;
 
-  const { data = {}, loading, error } = useQuery(customSidebarInfoQuery, {
+  const { data = {}, loading, error, refetch } = useQuery(customSidebarInfoQuery, {
     variables: { id },
     skip: !query
   });
 
+  useEffect(
+    () => {
+      refetch();
+    },
+    [externalUpdateTime, refetch]
+  );
+
   return { data: data.__typename !== 'Query' ? data : null, loading, error };
 };
 

package/src/components/EntityManager/utils/RecordEditContext/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const RecordEditContext = React.createContext();
+const RecordEditContextProvider = RecordEditContext.Provider;
+const RecordEditContextConsumer = RecordEditContext.Consumer;
+
+export { RecordEditContext, RecordEditContextProvider, RecordEditContextConsumer };

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

@@ -1,10 +1,20 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import useData from '../hooks/useData';
 import InfoBox from '../presentational/InfoBox';
+import { RecordEditContext } from '../../EntityManager/utils/RecordEditContext';
 
 const InfoBoxContainer = ({ id, schema, infoBox }) => {
-  const { data } = useData({ id, schema, infoBox });
+  const { externalUpdateTime } = useContext(RecordEditContext);
+
+  const { data, refetch } = useData({ id, schema, infoBox });
+
+  useEffect(
+    () => {
+      refetch();
+    },
+    [externalUpdateTime, refetch]
+  );
 
   if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
 

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

@@ -12,9 +12,12 @@ function useData({ id, schema, infoBox }) {
       }
     `;
 
-  const { data = {}, loading, error } = useQuery(infoBoxQuery, { variables: { id }, skip: !query });
+  const { data = {}, loading, error, refetch } = useQuery(infoBoxQuery, {
+    variables: { id },
+    skip: !query
+  });
 
-  return { data: data.__typename !== 'Query' ? data : null, loading, error };
+  return { data: data.__typename !== 'Query' ? data : null, loading, error, refetch };
 }
 
 export default useData;

package/src/components/ListingTable/ListingTable.js

@@ -24,7 +24,6 @@ const ListingTable = ({ match, entitySchema }) => {
   const queryParamsDefault = getDefaultQueryParams(entitySchema);
   const [queryParams, setQueryParams] = useState(queryParamsDefault);
   const [listFilters, setListFilters] = useState([]);
-  const [displayCardPrompt, setDisplayCardPrompt] = useState(true);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -167,7 +166,7 @@ const ListingTable = ({ match, entitySchema }) => {
   };
 
   if (!tableData || !tableData.rows) return 'loading';
-  const showAddButton = !!tableData.rows.length && !tableData.isEnquiry;
+  const showAddButton = !!tableData.rows.length;
 
   return (
     <div className="page">
@@ -198,20 +197,16 @@ const ListingTable = ({ match, entitySchema }) => {
           </Fragment>
         )}
       </PageHeader>
-      {displayCardPrompt &&
-        !showAddButton && (
-          <CardPrompt
-            onClose={() => {
-              setDisplayCardPrompt(false);
-            }}>
-            <Link
-              className="button button--rounded button--cta"
-              to={`${match.url}/create`}
-              data-testid="add-button">
-              Add
-            </Link>
-          </CardPrompt>
-        )}
+      {!showAddButton && (
+        <CardPrompt>
+          <Link
+            className="button button--rounded button--cta"
+            to={`${match.url}/create`}
+            data-testid="add-button">
+            Add
+          </Link>
+        </CardPrompt>
+      )}
       <RenderHook
         hookKey="entity:listing:main:top"
         schema={entitySchema}