@blaze-cms/plugin-data-ui 0.139.0-project-admin-customisations.0 → 0.139.1-alpha.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}

package/src/icons/ContentIcon.js

@@ -1,68 +1,79 @@
 import React from 'react';
-import { ICON_SIZE } from '../constants';
+import { ICON_COLOR } from '../constants';
 
-function ContentIcon({ width = ICON_SIZE.WIDTH, height = ICON_SIZE.HEIGHT }) {
+function ContentIcon({ fill = ICON_COLOR.FILL, stroke = ICON_COLOR.STROKE }) {
   return (
     <svg
-      width={width}
-      height={height}
-      viewBox="0 0 20 20"
+      width="19px"
+      height="19px"
+      viewBox="0 0 21 21"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink">
-      <title>icons/content</title>
-      <g id="Symbols" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-        <g id="main-menu/collapsed" transform="translate(-15, -201)">
-          <g id="Group-4" transform="translate(9, 19)">
-            <g id="Group-3" transform="translate(0, 176)">
-              <g id="photograph" transform="translate(7, 7)">
-                <g id="Group">
-                  <path
-                    d="M0,8.25 L5.15925,3.09075 C6.03787467,2.21239064 7.46212533,2.21239064 8.34075,3.09075 L13.5,8.25 M11.25,6 L13.03425,4.21575 C13.9128747,3.33739064 15.3371253,3.33739064 16.21575,4.21575 L18,6 M2.25,18 L15.75,18 C16.9926407,18 18,16.9926407 18,15.75 L18,2.25 C18,1.00735931 16.9926407,0 15.75,0 L2.25,0 C1.00735931,0 0,1.00735931 0,2.25 L0,15.75 C0,16.9926407 1.00735931,18 2.25,18 Z"
-                    id="Shape"
-                    stroke="#63779C"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <circle id="Oval" fill="#63779C" cx="10.875" cy="2.625" r="1.125" />
-                </g>
-                <line
-                  x1={0}
-                  y1="8.75"
-                  x2={18}
-                  y2="8.75"
-                  id="Path"
-                  stroke="#63779C"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <line
-                  x1="3.75"
-                  y1="11.75"
-                  x2="14.4999997"
-                  y2="11.75"
-                  id="Path"
-                  stroke="#63779C"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-                <line
-                  x1="3.75"
-                  y1="14.75"
-                  x2="11.4999997"
-                  y2="14.75"
-                  id="Path"
-                  stroke="#63779C"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </g>
-            </g>
+      <title>content</title>
+      <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+        <g id="content" transform="translate(1, 1)">
+          <g id="Group">
+            <path
+              d="M0,8.70833334 L5.445875,3.26245834 C6.37331215,2.33530123 7.87668785,2.33530123 8.804125,3.26245834 L14.25,8.70833334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M11.875,6.33333334 L13.758375,4.44995834 C14.6858122,3.52280123 16.1891878,3.52280123 17.116625,4.44995834 L19,6.33333334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M2.375,19 L16.625,19 C17.9366763,19 19,17.9366763 19,16.625 L19,2.375 C19,1.06332371 17.9366763,0 16.625,0 L2.375,0 C1.06332371,0 0,1.06332371 0,2.375 L0,16.625 C0,17.9366763 1.06332371,19 2.375,19 Z"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <circle
+              id="Oval"
+              fill={fill}
+              fillRule="nonzero"
+              cx="11.4791666"
+              cy="2.77083334"
+              r="1.1875"
+            />
           </g>
+          <line
+            x1={0}
+            y1="9.23611111"
+            x2={19}
+            y2="9.23611111"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="12.4027778"
+            x2="15.3055553"
+            y2="12.4027778"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="15.5694445"
+            x2="12.1388885"
+            y2="15.5694445"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
         </g>
       </g>
     </svg>

package/src/icons/SettingsIcon.js

@@ -1,7 +1,11 @@
 import React from 'react';
-import { ICON_SIZE } from '../constants';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
 
-function SettingsIcon({ width = ICON_SIZE.WIDTH, height = ICON_SIZE.HEIGHT }) {
+function SettingsIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
   return (
     <svg
       width={width}
@@ -10,40 +14,24 @@ function SettingsIcon({ width = ICON_SIZE.WIDTH, height = ICON_SIZE.HEIGHT }) {
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink">
-      <title>icons/setting</title>
-      <g id="Symbols" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-        <g id="main-menu/collapsed" transform="translate(-14, -494)">
-          <g id="Group-4" transform="translate(9, 19)">
-            <g id="settings" transform="translate(0, 470)">
-              <g id="icons/setting" transform="translate(6, 6)">
-                <g
-                  id="Group"
-                  stroke="#63779C"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="1.5">
-                  <path
-                    d="M8.13888889,1.46333333 C8.61222222,-0.487777778 11.3877778,-0.487777778 11.8611111,1.46333333 C12.0051589,2.05784356 12.4244819,2.54780471 12.9896128,2.78193979 C13.5547438,3.01607487 14.1977123,2.96622362 14.72,2.64777778 C16.4344444,1.60333333 18.3977778,3.56555556 17.3533333,5.28111111 C17.0353472,5.803171 16.9856162,6.44564563 17.2194755,7.0104213 C17.4533348,7.57519696 17.9426987,7.99444609 18.5366667,8.13888889 C20.4877778,8.61222222 20.4877778,11.3877778 18.5366667,11.8611111 C17.9421564,12.0051589 17.4521953,12.4244819 17.2180602,12.9896128 C16.9839251,13.5547438 17.0337764,14.1977123 17.3522222,14.72 C18.3966667,16.4344444 16.4344444,18.3977778 14.7188889,17.3533333 C14.196829,17.0353472 13.5543544,16.9856162 12.9895787,17.2194755 C12.424803,17.4533348 12.0055539,17.9426987 11.8611111,18.5366667 C11.3877778,20.4877778 8.61222222,20.4877778 8.13888889,18.5366667 C7.99484107,17.9421564 7.57551807,17.4521953 7.01038716,17.2180602 C6.44525624,16.9839251 5.80228769,17.0337764 5.28,17.3522222 C3.56555556,18.3966667 1.60222222,16.4344444 2.64666667,14.7188889 C2.96465281,14.196829 3.01438377,13.5543544 2.78052448,12.9895787 C2.5466652,12.424803 2.05730134,12.0055539 1.46333333,11.8611111 C-0.487777778,11.3877778 -0.487777778,8.61222222 1.46333333,8.13888889 C2.05784356,7.99484107 2.54780471,7.57551807 2.78193979,7.01038716 C3.01607487,6.44525624 2.96622362,5.80228769 2.64777778,5.28 C1.60333333,3.56555556 3.56555556,1.60222222 5.28111111,2.64666667 C6.38777778,3.32222222 7.83222222,2.72444444 8.13888889,1.46333333 Z"
-                    id="Path"
-                  />
-                  <path
-                    d="M13.3333333,10 C13.3333333,11.8409492 11.8409492,13.3333333 10,13.3333333 C8.15905083,13.3333333 6.66666667,11.8409492 6.66666667,10 C6.66666667,8.15905083 8.15905083,6.66666667 10,6.66666667 C11.8409492,6.66666667 13.3333333,8.15905083 13.3333333,10 L13.3333333,10 Z"
-                    id="Path"
-                  />
-                </g>
-                <rect
-                  id="Rectangle"
-                  fillOpacity={0}
-                  fill="#000000"
-                  fillRule="nonzero"
-                  x={0}
-                  y={0}
-                  width={20}
-                  height={20}
-                />
-              </g>
-            </g>
-          </g>
+      <title>setting</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth={1}
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 1)" stroke={stroke}>
+          <path
+            d="M8.13888889,1.46333333 C8.61222222,-0.487777777 11.3877778,-0.487777777 11.8611111,1.46333333 C12.0051589,2.05784356 12.4244819,2.54780471 12.9896128,2.78193979 C13.5547438,3.01607487 14.1977123,2.96622362 14.72,2.64777778 C16.4344444,1.60333333 18.3977778,3.56555556 17.3533333,5.28111111 C17.0353472,5.803171 16.9856162,6.44564563 17.2194755,7.0104213 C17.4533348,7.57519696 17.9426987,7.99444609 18.5366667,8.13888889 C20.4877778,8.61222222 20.4877778,11.3877778 18.5366667,11.8611111 C17.9421564,12.0051589 17.4521953,12.4244819 17.2180602,12.9896128 C16.9839251,13.5547438 17.0337764,14.1977123 17.3522222,14.72 C18.3966667,16.4344444 16.4344444,18.3977778 14.7188889,17.3533333 C14.196829,17.0353472 13.5543544,16.9856162 12.9895787,17.2194755 C12.424803,17.4533348 12.0055539,17.9426987 11.8611111,18.5366667 C11.3877778,20.4877778 8.61222222,20.4877778 8.13888889,18.5366667 C7.99484107,17.9421564 7.57551807,17.4521953 7.01038716,17.2180602 C6.44525624,16.9839251 5.80228769,17.0337764 5.28,17.3522222 C3.56555556,18.3966667 1.60222222,16.4344444 2.64666667,14.7188889 C2.96465281,14.196829 3.01438377,13.5543544 2.78052448,12.9895787 C2.5466652,12.424803 2.05730134,12.0055539 1.46333333,11.8611111 C-0.487777777,11.3877778 -0.487777777,8.61222222 1.46333333,8.13888889 C2.05784356,7.99484107 2.54780471,7.57551807 2.78193979,7.01038716 C3.01607487,6.44525624 2.96622362,5.80228769 2.64777778,5.28 C1.60333333,3.56555556 3.56555556,1.60222222 5.28111111,2.64666667 C6.38777778,3.32222222 7.83222222,2.72444444 8.13888889,1.46333333 Z"
+            id="Path"
+          />
+          <path
+            d="M13.6666666,10.3333333 C13.6666666,12.1742825 12.1742825,13.6666666 10.3333333,13.6666666 C8.49238416,13.6666666 7,12.1742825 7,10.3333333 C7,8.49238416 8.49238416,7 10.3333333,7 C12.1742825,7 13.6666666,8.49238416 13.6666666,10.3333333 L13.6666666,10.3333333 Z"
+            id="Path"
+          />
         </g>
       </g>
     </svg>