fix(dashboardeditor): merged default i18n with i18n prop

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

Hide file tree

Showing 9 changed files with 139 additions and 87 deletions.
diff --git a/src/components/Dashboard/DashboardGrid.test.jsx b/src/components/Dashboard/DashboardGrid.test.jsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import { CARD_DIMENSIONS, CARD_SIZES } from '../../constants/LayoutConstants';
+import {
+  CARD_DIMENSIONS,
+  CARD_SIZES,
+  DASHBOARD_BREAKPOINTS,
+} from '../../constants/LayoutConstants';
 import Card from '../Card/Card';
 import ValueCard from '../ValueCard/ValueCard';
 import GaugeCard from '../GaugeCard/GaugeCard';
@@ -20,7 +24,7 @@ import DashboardGrid, {
 } from './DashboardGrid';
 
 describe('DashboardGrid', () => {
-  it('findLayoutOrGenerate', () => {
+  describe('findLayoutOrGenerate', () => {
     const layouts = {
       max: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
       xl: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
@@ -29,52 +33,69 @@ describe('DashboardGrid', () => {
       sm: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
       xs: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
     };
+    it('if no layouts exist they should be generated', () => {
+      const generated = findLayoutOrGenerate(
+        {},
+        [{ id: 'mycard', size: CARD_SIZES.MEDIUM }],
+        Object.keys(DASHBOARD_BREAKPOINTS)
+      );
 
-    // if no layouts exist they should be generated
-    const generated = findLayoutOrGenerate({}, [
-      { id: 'mycard', size: CARD_SIZES.MEDIUM },
-    ]);
-
-    expect(generated).toEqual(layouts);
-
-    // if layout is missing card it should be regenerated
-    const regenerated = findLayoutOrGenerate(
-      { max: [], xl: [], lg: [], md: [], sm: [], xs: [] },
-      [{ id: 'mycard', size: CARD_SIZES.MEDIUM }]
-    );
-    expect(regenerated).toEqual(layouts);
-
-    // if every layout already exists, the card should have dimensions added
-    const addedDimensions = findLayoutOrGenerate(
-      {
-        max: [{ i: 'mycard', x: 0, y: 0 }],
-        xl: [{ i: 'mycard', x: 0, y: 0 }],
-        lg: [{ i: 'mycard', x: 0, y: 0 }],
-        md: [{ i: 'mycard', x: 0, y: 0 }],
-        sm: [{ i: 'mycard', x: 0, y: 0 }],
-        xs: [{ i: 'mycard', x: 0, y: 0 }],
-      },
-      [{ id: 'mycard', size: CARD_SIZES.MEDIUM }]
-    );
-    expect(addedDimensions).toEqual(layouts);
-
-    // handle old layouts with bogus cards
-    const emptyLayouts = findLayoutOrGenerate(
-      {
-        max: [
-          { i: 'boguscard', x: 0, y: 0 },
-          { i: 'mycard', x: 0, y: 0 },
-        ],
-        xl: [{ i: 'boguscard', x: 0, y: 0 }],
-        lg: [{ i: 'boguscard', x: 0, y: 0 }],
-        md: [{ i: 'boguscard', x: 0, y: 0 }],
-        sm: [{ i: 'boguscard', x: 0, y: 0 }],
-        xs: [{ i: 'boguscard', x: 0, y: 0 }],
-      },
-      [{ id: 'mycard', size: CARD_SIZES.MEDIUM }]
-    );
-    // the bogus card was quietly removed from the layout
-    expect(emptyLayouts.max).toHaveLength(1);
+      expect(generated).toEqual(layouts);
+    });
+    it('if layout is missing card it should be regenerated', () => {
+      const regenerated = findLayoutOrGenerate(
+        { max: [], xl: [], lg: [], md: [], sm: [], xs: [] },
+        [{ id: 'mycard', size: CARD_SIZES.MEDIUM }],
+        Object.keys(DASHBOARD_BREAKPOINTS)
+      );
+      expect(regenerated).toEqual(layouts);
+    });
+    it('if every layout already exists, the card should have dimensions added', () => {
+      const addedDimensions = findLayoutOrGenerate(
+        {
+          max: [{ i: 'mycard', x: 0, y: 0 }],
+          xl: [{ i: 'mycard', x: 0, y: 0 }],
+          lg: [{ i: 'mycard', x: 0, y: 0 }],
+          md: [{ i: 'mycard', x: 0, y: 0 }],
+          sm: [{ i: 'mycard', x: 0, y: 0 }],
+          xs: [{ i: 'mycard', x: 0, y: 0 }],
+        },
+        [{ id: 'mycard', size: CARD_SIZES.MEDIUM }],
+        Object.keys(DASHBOARD_BREAKPOINTS)
+      );
+      expect(addedDimensions).toEqual(layouts);
+    });
+    it('handle old layouts with bogus cards', () => {
+      const emptyLayouts = findLayoutOrGenerate(
+        {
+          max: [
+            { i: 'boguscard', x: 0, y: 0 },
+            { i: 'mycard', x: 0, y: 0 },
+          ],
+          xl: [{ i: 'boguscard', x: 0, y: 0 }],
+          lg: [{ i: 'boguscard', x: 0, y: 0 }],
+          md: [{ i: 'boguscard', x: 0, y: 0 }],
+          sm: [{ i: 'boguscard', x: 0, y: 0 }],
+          xs: [{ i: 'boguscard', x: 0, y: 0 }],
+        },
+        [{ id: 'mycard', size: CARD_SIZES.MEDIUM }],
+        Object.keys(DASHBOARD_BREAKPOINTS)
+      );
+      // the bogus card was quietly removed from the layout
+      expect(emptyLayouts.max).toHaveLength(1);
+    });
+    it('should only find supported layouts', () => {
+      const regenerated = findLayoutOrGenerate(
+        { max: [], xl: [], lg: [], md: [], sm: [], xs: [] },
+        [{ id: 'mycard', size: CARD_SIZES.MEDIUM }],
+        ['xl', 'lg', 'md']
+      );
+      expect(regenerated).toEqual({
+        xl: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
+        lg: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
+        md: [{ i: 'mycard', x: 0, y: 0, w: 4, h: 2 }],
+      });
+    });
   });
 
   describe('resizing', () => {

diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -95,6 +95,10 @@ const propTypes = {
     headerCancelButton: PropTypes.string,
     headerSubmitButton: PropTypes.string,
     headerDeleteButton: PropTypes.string,
+    headerFitToScreenButton: PropTypes.string,
+    headerXlargeButton: PropTypes.string,
+    headerLargeButton: PropTypes.string,
+    headerMediumButton: PropTypes.string,
     noDataLabel: PropTypes.string,
     defaultCardTitle: PropTypes.string,
     headerEditTitleButton: PropTypes.string,
@@ -141,6 +145,10 @@ const defaultProps = {
     headerDeleteButton: 'Delete',
     headerCancelButton: 'Cancel',
     headerSubmitButton: 'Save and close',
+    headerFitToScreenButton: 'Fit to screen',
+    headerXlargeButton: 'X-large view',
+    headerLargeButton: 'Large view',
+    headerMediumButton: 'Medium view',
     galleryHeader: 'Gallery',
     openGalleryButton: 'Open gallery',
     closeGalleryButton: 'Back',
@@ -155,10 +163,10 @@ const defaultProps = {
 };
 
 const LAYOUTS = {
-  FIT_TO_SCREEN: { breakpoint: 'max', index: 0 },
+  FIT_TO_SCREEN: { breakpoint: 'xl', index: 0 },
   MEDIUM: { breakpoint: 'md', index: 3 },
   LARGE: { breakpoint: 'lg', index: 2 },
-  XLARGE: { breakpoint: 'xk', index: 1 },
+  XLARGE: { breakpoint: 'xl', index: 1 },
 };
 export const baseClassName = `${iotPrefix}--dashboard-editor`;
 

diff --git a/src/components/DashboardEditor/DashboardEditor.test.jsx b/src/components/DashboardEditor/DashboardEditor.test.jsx
@@ -241,11 +241,8 @@ describe('DashboardEditor', () => {
       cards: [],
       layouts: {
         lg: [],
-        max: [],
         md: [],
-        sm: [],
         xl: [],
-        xs: [],
       },
     });
   });
@@ -289,4 +286,23 @@ describe('DashboardEditor', () => {
     });
     expect(screen.getByTitle('My new card title')).toBeInTheDocument();
   });
+
+  it('selecting medium breakpoint should render breakpoint info', () => {
+    render(
+      <DashboardEditor
+        {...commonProps}
+        breakpointSwitcher={{ enabled: true }}
+      />
+    );
+    // there should be no breakpoint text on initial render
+    expect(screen.queryByText('Edit dashboard at')).not.toBeInTheDocument();
+    // find and click medium button
+    const mediumBtn = screen.getByText('Medium view');
+    expect(mediumBtn).toBeInTheDocument();
+    fireEvent.click(mediumBtn);
+    // there should now be breakpoint text
+    expect(
+      screen.getByText('Edit dashboard at medium layout (480 - 672px)')
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx b/src/components/DashboardEditor/DashboardEditorHeader/DashboardEditorHeader.jsx
@@ -54,6 +54,10 @@ const propTypes = {
     headerDeleteButton: PropTypes.string,
     headerCancelButton: PropTypes.string,
     headerSubmitButton: PropTypes.string,
+    headerFitToScreenButton: PropTypes.string,
+    headerXlargeButton: PropTypes.string,
+    headerLargeButton: PropTypes.string,
+    headerMediumButton: PropTypes.string,
   }),
   /** The current dashboard's JSON */
   dashboardJson: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
@@ -86,7 +90,11 @@ const defaultProps = {
     headerExportButton: 'Export',
     headerDeleteButton: 'Delete',
     headerCancelButton: 'Cancel',
-    headerSubmitButton: 'Submit',
+    headerSubmitButton: 'Save and close',
+    headerFitToScreenButton: 'Fit to screen',
+    headerXlargeButton: 'X-large view',
+    headerLargeButton: 'Large view',
+    headerMediumButton: 'Medium view',
   },
   selectedBreakpointIndex: null,
   setSelectedBreakpointIndex: null,
@@ -109,6 +117,7 @@ const DashboardEditorHeader = ({
   setSelectedBreakpointIndex,
   breakpointSwitcher,
 }) => {
+  const mergedI18n = { ...defaultProps.i18n, i18n };
   const baseClassName = `${iotPrefix}--dashboard-editor-header`;
   const extraContent = (
     <div className={`${baseClassName}--right`}>
@@ -121,25 +130,25 @@ const DashboardEditorHeader = ({
             className={`${baseClassName}--bottom__switcher`}>
             <IconSwitch
               name="fit-to-screen"
-              text="Fit to screen"
+              text={mergedI18n.headerFitToScreenButton}
               renderIcon={Maximize16}
               index={0}
             />
             <IconSwitch
               name="xlarge"
-              text="X-large View"
+              text={mergedI18n.headerXlargeButton}
               renderIcon={Screen16}
               index={1}
             />
             <IconSwitch
               name="large"
-              text="Large View"
+              text={mergedI18n.headerLargeButton}
               renderIcon={Laptop16}
               index={2}
             />
             <IconSwitch
               name="medium"
-              text="Medium view"
+              text={mergedI18n.headerMediumButton}
               renderIcon={Tablet16}
               index={3}
             />
@@ -152,7 +161,7 @@ const DashboardEditorHeader = ({
             <TooltipIcon
               align="center"
               direction="bottom"
-              tooltipText={i18n.headerImportButton}
+              tooltipText={mergedI18n.headerImportButton}
               className={`${baseClassName}--bottom__import`}>
               <FileUploaderButton
                 buttonKind="ghost"
@@ -168,7 +177,7 @@ const DashboardEditorHeader = ({
           <Button
             kind="ghost"
             size="field"
-            iconDescription={i18n.headerExportButton}
+            iconDescription={mergedI18n.headerExportButton}
             tooltipPosition="bottom"
             tooltipAlignment="center"
             hasIconOnly
@@ -180,7 +189,7 @@ const DashboardEditorHeader = ({
           <Button
             kind="ghost"
             size="field"
-            iconDescription={i18n.headerDeleteButton}
+            iconDescription={mergedI18n.headerDeleteButton}
             tooltipPosition="bottom"
             tooltipAlignment="center"
             hasIconOnly
@@ -190,15 +199,15 @@ const DashboardEditorHeader = ({
         )}
         {onCancel && (
           <Button kind="tertiary" size="field" onClick={onCancel}>
-            {i18n.headerCancelButton}
+            {mergedI18n.headerCancelButton}
           </Button>
         )}
         {onSubmit && (
           <Button
             size="field"
             disabled={submitDisabled}
             onClick={() => onSubmit(dashboardJson)}>
-            {i18n.headerSubmitButton}
+            {mergedI18n.headerSubmitButton}
           </Button>
         )}
       </div>
@@ -212,7 +221,7 @@ const DashboardEditorHeader = ({
       title={title}
       editable={!!onEditTitle}
       onEdit={onEditTitle}
-      i18n={{ editIconDescription: i18n.headerEditTitleButton }}
+      i18n={{ editIconDescription: mergedI18n.headerEditTitleButton }}
     />
   );
 };

diff --git a/...DashboardEditor/DashboardEditorHeader/__snapshots__/DashboardEditorHeader.story.storyshot b/...DashboardEditor/DashboardEditorHeader/__snapshots__/DashboardEditorHeader.story.storyshot
@@ -219,7 +219,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   tabIndex={0}
                   type="button"
                 >
-                  Submit
+                  Save and close
                 </button>
               </div>
             </div>
@@ -384,7 +384,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                   tabIndex={0}
                   type="button"
                 >
-                  Submit
+                  Save and close
                 </button>
               </div>
             </div>

diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -3190,11 +3190,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                         <span
                           className="bx--assistive-text"
                         >
-                          X-large View
+                          X-large view
                         </span>
                         <svg
                           aria-hidden="true"
-                          aria-label="X-large View"
+                          aria-label="X-large view"
                           className="bx--btn__icon"
                           fill="currentColor"
                           focusable="false"
@@ -3221,11 +3221,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
                         <span
                           className="bx--assistive-text"
                         >
-                          Large View
+                          Large view
                         </span>
                         <svg
                           aria-hidden="true"
-                          aria-label="Large View"
+                          aria-label="Large view"
                           className="bx--btn__icon"
                           fill="currentColor"
                           focusable="false"

diff --git a/src/components/DashboardEditor/editorUtils.jsx b/src/components/DashboardEditor/editorUtils.jsx
@@ -387,18 +387,12 @@ export const getCardPreview = (cardConfig, commonProps) => {
  */
 export const renderBreakpointInfo = (breakpoint, i18n) => {
   switch (breakpoint) {
-    case 'max':
-      return i18n.layoutInfoMax;
     case 'xl':
       return i18n.layoutInfoXl;
     case 'lg':
       return i18n.layoutInfoLg;
     case 'md':
       return i18n.layoutInfoMd;
-    case 'sm':
-      return i18n.layoutInfoSm;
-    case 'xs':
-      return i18n.layoutInfoXs;
     default:
       return i18n.layoutInfoXl;
   }