feat(dashboardeditor): only allow xl, lg, md breakpoints

carbon-design-system · Nov 4, 2020 · 8c457a6 · 8c457a6
1 parent da84ca4
commit 8c457a6
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 35 deletions.
diff --git a/src/components/Dashboard/DashboardGrid.jsx b/src/components/Dashboard/DashboardGrid.jsx
@@ -4,6 +4,7 @@ import { Responsive, WidthProvider } from 'react-grid-layout';
 import styled from 'styled-components';
 import some from 'lodash/some';
 import find from 'lodash/find';
+import pick from 'lodash/pick';
 
 import { getLayout } from '../../utils/componentUtilityFunctions';
 import {
@@ -57,6 +58,10 @@ export const DashboardGridPropTypes = {
     sm: PropTypes.arrayOf(DashboardLayoutPropTypes),
     xs: PropTypes.arrayOf(DashboardLayoutPropTypes),
   }),
+  /** Array of layouts that are supported by this component. Defaults to all layouts */
+  supportedLayouts: PropTypes.arrayOf(
+    PropTypes.oneOf(['max', 'xl', 'lg', 'md', 'sm', 'xs'])
+  ),
   /**
    * Optionally listen to layout changes to update a dashboard template
    * Calls back with (currentLayout: Layout, allLayouts: {[key: $Keys<breakpoints>]: Layout}) => void,
@@ -74,6 +79,7 @@ const defaultProps = {
   breakpoint: 'lg',
   isEditable: false,
   layouts: {},
+  supportedLayouts: Object.keys(DASHBOARD_BREAKPOINTS),
   onLayoutChange: null,
   onBreakpointChange: null,
   onResizeStop: null,
@@ -141,12 +147,13 @@ export const getBreakPointSizes = (breakpoint, cardDimensions, cardSizes) => {
 
 /**
  * This function finds an existing layout for each dashboard breakpoint, validates it, and or generates a new one to return
- * @param {*} layouts an keyed object of each layout for each breakpoint
- * @param {*} cards an array of the card props for each card
+ * @param {Object} layouts an keyed object of each layout for each breakpoint
+ * @param {Array<Object>} cards an array of the card props for each card
+ * @param {Array<string>} supportedLayouts
  */
-export const findLayoutOrGenerate = (layouts, cards) => {
+export const findLayoutOrGenerate = (layouts, cards, supportedLayouts) => {
   // iterate through each breakpoint
-  return Object.keys(DASHBOARD_BREAKPOINTS).reduce((acc, layoutName) => {
+  return supportedLayouts.reduce((acc, layoutName) => {
     let layout = layouts && layouts[layoutName];
     // If layout exists for this breakpoint, make sure it contains all the cards
     if (layout) {
@@ -217,6 +224,7 @@ const DashboardGrid = ({
   breakpoint,
   isEditable,
   layouts,
+  supportedLayouts,
   onLayoutChange,
   onBreakpointChange,
   onCardSizeChange,
@@ -232,9 +240,10 @@ const DashboardGrid = ({
     () =>
       findLayoutOrGenerate(
         layouts,
-        childrenArray.map((card) => card.props)
+        childrenArray.map((card) => card.props),
+        supportedLayouts
       ),
-    [childrenArray, layouts]
+    [childrenArray, layouts, supportedLayouts]
   );
   const cachedMargin = useMemo(() => [GUTTER, GUTTER], []);
 
@@ -330,7 +339,7 @@ const DashboardGrid = ({
         layouts={generatedLayouts}
         compactType="vertical"
         cols={DASHBOARD_COLUMNS}
-        breakpoints={DASHBOARD_BREAKPOINTS}
+        breakpoints={pick(DASHBOARD_BREAKPOINTS, supportedLayouts)}
         margin={cachedMargin}
         containerPadding={DASHBOARD_CONTAINER_PADDING}
         rowHeight={ROW_HEIGHT[breakpoint]}

diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -147,12 +147,9 @@ const defaultProps = {
     openJSONButton: 'Open JSON editor',
     noDataLabel: 'No data source is defined',
     defaultCardTitle: 'Untitled',
-    layoutInfoMax: 'Edit dashboard at maximum layout (1312 - 1800px)',
     layoutInfoXl: 'Edit dashboard at extra large layout (1056 - 1312px)',
     layoutInfoLg: 'Edit dashboard at large layout (672 - 1056px)',
     layoutInfoMd: 'Edit dashboard at medium layout (480 - 672px)',
-    layoutInfoSm: 'Edit dashboard at small layout (320 - 480px)',
-    layoutInfoXs: 'Edit dashboard at extra small layout (0 - 320px)',
     searchPlaceholderText: 'Enter a value',
   },
 };
@@ -202,6 +199,7 @@ const DashboardEditor = ({
       : LAYOUTS.FIT_TO_SCREEN.breakpoint
   );
 
+  // force a window resize so that react-grid-layout will trigger its reorder / resize
   useEffect(() => {
     window.dispatchEvent(new Event('resize'));
   }, [selectedBreakpointIndex]);
@@ -296,19 +294,23 @@ const DashboardEditor = ({
         {notification}
         <div className={`${baseClassName}--preview`}>
           <div
-            className={classnames(`${baseClassName}--preview__outline`, {
+            className={classnames({
+              [`${baseClassName}--preview__outline`]:
+                selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index,
               [`${baseClassName}--preview__md`]:
                 selectedBreakpointIndex === LAYOUTS.MEDIUM.index,
               [`${baseClassName}--preview__lg`]:
                 selectedBreakpointIndex === LAYOUTS.LARGE.index,
               [`${baseClassName}--preview__xl`]:
                 selectedBreakpointIndex === LAYOUTS.XLARGE.index,
             })}>
-            {breakpointSwitcher?.enabled && (
-              <div className={`${baseClassName}--preview__breakpoint-info`}>
-                {renderBreakpointInfo(currentBreakpoint, i18n)}
-              </div>
-            )}
+            {breakpointSwitcher?.enabled &&
+              // only show breakpoint info if fit to screen is not selected
+              selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index && (
+                <div className={`${baseClassName}--preview__breakpoint-info`}>
+                  {renderBreakpointInfo(currentBreakpoint, mergedI18n)}
+                </div>
+              )}
             <div className={`${baseClassName}--preview__grid-container`}>
               <ErrorBoundary
                 fallback={
@@ -330,7 +332,8 @@ const DashboardEditor = ({
                       ...dashboardJson,
                       layouts: newLayouts,
                     })
-                  }>
+                  }
+                  supportedLayouts={['xl', 'lg', 'md']}>
                   {dashboardJson.cards.map((cardConfig) => {
                     const isSelected = cardConfig.id === selectedCardId;
                     const cardProps = commonCardProps(cardConfig, isSelected);

diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -266,7 +266,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
               <div
                 className="iot--dashboard-editor--preview__grid-container"
@@ -1347,7 +1347,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
               <div
                 className="iot--dashboard-editor--preview__grid-container"
@@ -2289,7 +2289,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
               <div
                 className="iot--dashboard-editor--preview__grid-container"
@@ -3427,13 +3427,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
-              <div
-                className="iot--dashboard-editor--preview__breakpoint-info"
-              >
-                Edit dashboard at maximum layout (1312 - 1800px)
-              </div>
               <div
                 className="iot--dashboard-editor--preview__grid-container"
               >
@@ -4374,7 +4369,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
               <div
                 className="iot--dashboard-editor--preview__grid-container"
@@ -6026,7 +6021,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
             className="iot--dashboard-editor--preview"
           >
             <div
-              className="iot--dashboard-editor--preview__outline"
+              className=""
             >
               <div
                 className="iot--dashboard-editor--preview__grid-container"

diff --git a/src/components/IconSwitch/IconSwitch.jsx b/src/components/IconSwitch/IconSwitch.jsx
@@ -148,8 +148,8 @@ IconSwitch.defaultProps = {
   name: '',
   size: 'default',
   light: false,
-  onClick: () => {},
-  onKeyDown: () => {},
+  onClick: undefined,
+  onKeyDown: undefined,
 };
 
 export default IconSwitch;
diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -7536,6 +7536,24 @@ Map {
       "sidebar": Object {
         "type": "node",
       },
+      "supportedLayouts": Object {
+        "args": Array [
+          Object {
+            "args": Array [
+              Array [
+                "max",
+                "xl",
+                "lg",
+                "md",
+                "sm",
+                "xs",
+              ],
+            ],
+            "type": "oneOf",
+          },
+        ],
+        "type": "arrayOf",
+      },
       "timeGrain": Object {
         "type": "string",
       },
@@ -7662,6 +7680,14 @@ Map {
       "onCardSizeChange": null,
       "onLayoutChange": null,
       "onResizeStop": null,
+      "supportedLayouts": Array [
+        "max",
+        "xl",
+        "lg",
+        "md",
+        "sm",
+        "xs",
+      ],
     },
     "propTypes": Object {
       "breakpoint": Object {
@@ -7870,6 +7896,24 @@ Map {
       "onResizeStop": Object {
         "type": "func",
       },
+      "supportedLayouts": Object {
+        "args": Array [
+          Object {
+            "args": Array [
+              Array [
+                "max",
+                "xl",
+                "lg",
+                "md",
+                "sm",
+                "xs",
+              ],
+            ],
+            "type": "oneOf",
+          },
+        ],
+        "type": "arrayOf",
+      },
     },
   },
   "DashboardEditor" => Object {
@@ -7889,11 +7933,8 @@ Map {
         "headerImportButton": "Import",
         "headerSubmitButton": "Save and close",
         "layoutInfoLg": "Edit dashboard at large layout (672 - 1056px)",
-        "layoutInfoMax": "Edit dashboard at maximum layout (1312 - 1800px)",
         "layoutInfoMd": "Edit dashboard at medium layout (480 - 672px)",
-        "layoutInfoSm": "Edit dashboard at small layout (320 - 480px)",
         "layoutInfoXl": "Edit dashboard at extra large layout (1056 - 1312px)",
-        "layoutInfoXs": "Edit dashboard at extra small layout (0 - 320px)",
         "noDataLabel": "No data source is defined",
         "openGalleryButton": "Open gallery",
         "openJSONButton": "Open JSON editor",
@@ -16949,8 +16990,8 @@ Map {
       "className": undefined,
       "light": false,
       "name": "",
-      "onClick": [Function],
-      "onKeyDown": [Function],
+      "onClick": undefined,
+      "onKeyDown": undefined,
       "selected": false,
       "size": "default",
     },