fix(dashboardeditor): add loading state

carbon-design-system · Nov 10, 2020 · 0f34ba3 · 0f34ba3
1 parent e64a314
commit 0f34ba3
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 3 deletions.
diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -8,7 +8,12 @@ import {
   DASHBOARD_EDITOR_CARD_TYPES,
   CARD_ACTIONS,
 } from '../../constants/LayoutConstants';
-import { DashboardGrid, CardEditor, ErrorBoundary } from '../../index';
+import {
+  DashboardGrid,
+  CardEditor,
+  ErrorBoundary,
+  SkeletonText,
+} from '../../index';
 
 import DashboardEditorHeader from './DashboardEditorHeader/DashboardEditorHeader';
 import {
@@ -108,6 +113,8 @@ const propTypes = {
    * @returns Array<string> error strings. return empty array if there is no errors
    */
   onValidateCardJson: PropTypes.func,
+  /** optional loading prop to render the PageTitleBar loading state */
+  isLoading: PropTypes.bool,
   /** internationalization strings */
   i18n: PropTypes.shape({
     headerImportButton: PropTypes.string,
@@ -158,6 +165,7 @@ const defaultProps = {
   onSubmit: null,
   submitDisabled: false,
   onValidateCardJson: null,
+  isLoading: false,
   i18n: {
     headerEditTitleButton: 'Edit title',
     headerImportButton: 'Import',
@@ -212,6 +220,7 @@ const DashboardEditor = ({
   onSubmit,
   submitDisabled,
   onValidateCardJson,
+  isLoading,
   i18n,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -308,7 +317,9 @@ const DashboardEditor = ({
     isSelected,
   });
 
-  return (
+  return isLoading ? (
+    <SkeletonText />
+  ) : (
     <div className={baseClassName}>
       <div
         className={classnames(`${baseClassName}--content`, {
@@ -334,6 +345,7 @@ const DashboardEditor = ({
             selectedBreakpointIndex={selectedBreakpointIndex}
             setSelectedBreakpointIndex={setSelectedBreakpointIndex}
             breakpointSwitcher={breakpointSwitcher}
+            isLoading={isLoading}
           />
         )}
         {notification}

diff --git a/src/components/DashboardEditor/DashboardEditor.story.jsx b/src/components/DashboardEditor/DashboardEditor.story.jsx
@@ -57,6 +57,7 @@ export const Default = () => (
         <Link href="www.ibm.com">Dashboard library</Link>,
         <Link href="www.ibm.com">Favorites</Link>,
       ]}
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -223,6 +224,7 @@ export const WithInitialValue = () => (
         <Link href="www.ibm.com">Dashboard library</Link>,
         <Link href="www.ibm.com">Favorites</Link>,
       ]}
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -293,6 +295,7 @@ export const WithCustomOnCardChange = () => (
         <Link href="www.ibm.com">Dashboard library</Link>,
         <Link href="www.ibm.com">Favorites</Link>,
       ]}
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -347,6 +350,7 @@ export const WithNotifications = () => (
           />
         </>
       }
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -381,6 +385,7 @@ export const WithBreakpointSwitcher = () => (
         <Link href="www.ibm.com">Favorites</Link>,
       ]}
       breakpointSwitcher={{ enabled: true }}
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -474,6 +479,7 @@ export const CustomCardPreviewRenderer = () => (
           </Card>
         ) : undefined;
       }}
+      isLoading={boolean('isLoading', false)}
     />
   </div>
 );
@@ -484,10 +490,23 @@ CustomCardPreviewRenderer.story = {
 
 export const CustomHeaderRenderer = () => (
   <div style={{ height: 'calc(100vh - 3rem)', marginRight: '-3rem' }}>
-    <DashboardEditor renderHeader={() => <h1>Custom Header</h1>} />
+    <DashboardEditor
+      renderHeader={() => <h1>Custom Header</h1>}
+      isLoading={boolean('isLoading', false)}
+    />
   </div>
 );
 
 CustomHeaderRenderer.story = {
   name: 'custom header renderer',
 };
+
+export const isLoading = () => (
+  <div style={{ height: 'calc(100vh - 3rem)', marginRight: '-3rem' }}>
+    <DashboardEditor isLoading={boolean('isLoading', true)} />
+  </div>
+);
+
+isLoading.story = {
+  name: 'isLoading',
+};
diff --git a/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx b/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx
@@ -72,6 +72,8 @@ const propTypes = {
     enabled: PropTypes.bool,
     allowedBreakpoints: PropTypes.arrayOf(PropTypes.string),
   }),
+  /** optional loading prop to render the PageTitleBar loading state */
+  isLoading: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -99,6 +101,7 @@ const defaultProps = {
   selectedBreakpointIndex: null,
   setSelectedBreakpointIndex: null,
   breakpointSwitcher: null,
+  isLoading: false,
 };
 
 const DashboardEditorHeader = ({
@@ -116,6 +119,7 @@ const DashboardEditorHeader = ({
   selectedBreakpointIndex,
   setSelectedBreakpointIndex,
   breakpointSwitcher,
+  isLoading,
 }) => {
   const mergedI18n = { ...defaultProps.i18n, i18n };
   const baseClassName = `${iotPrefix}--dashboard-editor-header`;
@@ -223,6 +227,7 @@ const DashboardEditorHeader = ({
       title={title}
       editable={!!onEditTitle}
       onEdit={onEditTitle}
+      isLoading={isLoading}
       i18n={{ editIconDescription: mergedI18n.headerEditTitleButton }}
     />
   );

diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -3033,6 +3033,62 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
 </div>
 `;
 
+exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Experimental/DashboardEditor isLoading 1`] = `
+<div
+  className="storybook-container"
+>
+  <div
+    style={
+      Object {
+        "position": "relative",
+        "zIndex": 0,
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "height": "calc(100vh - 3rem)",
+          "marginRight": "-3rem",
+        }
+      }
+    >
+      <p
+        className="bx--skeleton__text"
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+  </div>
+  <button
+    className="info__show-button"
+    onClick={[Function]}
+    style={
+      Object {
+        "background": "#027ac5",
+        "border": "none",
+        "borderRadius": "0 0 0 5px",
+        "color": "#fff",
+        "cursor": "pointer",
+        "display": "block",
+        "fontFamily": "sans-serif",
+        "fontSize": 12,
+        "padding": "5px 15px",
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+    type="button"
+  >
+    Show Info
+  </button>
+</div>
+`;
+
 exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Experimental/DashboardEditor with breakpoint switcher 1`] = `
 <div
   className="storybook-container"

diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -8139,6 +8139,7 @@ Map {
         "cards": Array [],
         "layouts": Object {},
       },
+      "isLoading": false,
       "notification": null,
       "onCancel": null,
       "onCardChange": null,
@@ -8289,6 +8290,9 @@ Map {
         ],
         "type": "shape",
       },
+      "isLoading": Object {
+        "type": "bool",
+      },
       "notification": Object {
         "type": "node",
       },