Merge pull request #1677 from carbon-design-system/dashboard-editor

[DashboardEditor] base functionality
carbon-design-system · Oct 20, 2020 · 7542a24 · 7542a24
2 parents 3851b8c + 6a309f6
commit 7542a24
Show file tree

Hide file tree

Showing 53 changed files with 8,591 additions and 1,074 deletions.
diff --git a/.storybook/__snapshots__/Welcome.story.storyshot b/.storybook/__snapshots__/Welcome.story.storyshot
@@ -3048,6 +3048,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                     DashboardGrid
                   </div>
                 </div>
+                <div
+                  className="bx--structured-list-row"
+                >
+                  <div
+                    className="bx--structured-list-td"
+                  />
+                  <div
+                    className="bx--structured-list-td"
+                  >
+                    DashboardEditor
+                  </div>
+                </div>
                 <div
                   className="bx--structured-list-row"
                 >

diff --git a/package.json b/package.json
@@ -198,6 +198,7 @@
     "@storybook/addon-storyshots": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
+    "@svgr/rollup": "^5.4.0",
     "@testing-library/dom": "^7.22.2",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",

diff --git a/rollup.config.js b/rollup.config.js
@@ -9,6 +9,7 @@ import copy from 'rollup-plugin-copy';
 import autoprefixer from 'autoprefixer';
 import json from 'rollup-plugin-json';
 import builtins from 'rollup-plugin-node-builtins';
+import svgr from '@svgr/rollup';
 
 const packageJson = require('./package.json');
 
@@ -72,6 +73,7 @@ const plugins = [
     // generate a named export for every property of the JSON object
     namedExports: true, // Default: true
   }),
+  svgr(),
 ];
 
 export default [
@@ -238,6 +240,7 @@ export default [
         ],
         verbose: env !== 'development', // logs the file copy list on production builds for easier debugging
       }),
+      svgr(),
       ...prodSettings,
     ],
   },

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -124,6 +124,7 @@ CardWrapper.propTypes = {
   onScroll: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
+  /** Optionally sets a keyboard tab index for the container */
   tabIndex: PropTypes.number,
 };
 CardWrapper.defaultProps = {

diff --git a/src/components/Card/Card.test.jsx b/src/components/Card/Card.test.jsx
@@ -205,16 +205,6 @@ describe('Card', () => {
       />
     );
     fireEvent.click(screen.getByTitle('Open and close list of options'));
-    // Click on the first overflow menu item
-    const firstMenuItem = await screen.findByText('Edit card');
-    fireEvent.click(firstMenuItem);
-    expect(mockOnCardAction).toHaveBeenCalledWith(
-      cardProps.id,
-      CARD_ACTIONS.EDIT_CARD
-    );
-    mockOnCardAction.mockClear();
-    // Reopen menu
-    fireEvent.click(screen.getByTitle('Open and close list of options'));
     const secondElement = await screen.findByText('Clone card');
     fireEvent.click(secondElement);
     expect(mockOnCardAction).toHaveBeenCalledWith(

diff --git a/src/components/Card/CardToolbar.jsx b/src/components/Card/CardToolbar.jsx
@@ -49,6 +49,22 @@ const propTypes = {
    * i.e. { thisWeek: 'This week', lastWeek: 'Last week'}
    */
   timeRangeOptions: TimeRangeOptionsPropTypes, // eslint-disable-line react/require-default-props
+  i18n: PropTypes.shape({
+    last24Hours: PropTypes.string,
+    last7Days: PropTypes.string,
+    lastMonth: PropTypes.string,
+    lastQuarter: PropTypes.string,
+    lastYear: PropTypes.string,
+    thisWeek: PropTypes.string,
+    thisMonth: PropTypes.string,
+    thisQuarter: PropTypes.string,
+    thisYear: PropTypes.string,
+    overflowMenuDescription: PropTypes.string,
+    cloneCardLabel: PropTypes.string,
+    deleteCardLabel: PropTypes.string,
+    closeLabel: PropTypes.string,
+    expandLabel: PropTypes.string,
+  }),
 };
 
 const defaultProps = {
@@ -57,6 +73,22 @@ const defaultProps = {
   renderExpandIcon: Popup16,
   className: null,
   timeRangeOptions: null,
+  i18n: {
+    last24Hours: 'Last 24 hours',
+    last7Days: 'Last 7 days',
+    lastMonth: 'Last month',
+    lastQuarter: 'Last quarter',
+    lastYear: 'Last year',
+    thisWeek: 'This week',
+    thisMonth: 'This month',
+    thisQuarter: 'This quarter',
+    thisYear: 'This year',
+    overflowMenuDescription: 'Card actions menu',
+    cloneCardLabel: 'Clone card',
+    deleteCardLabel: 'Delete card',
+    closeLabel: 'Close',
+    expandLabel: 'Expand',
+  },
 };
 
 const CardToolbar = ({
@@ -71,56 +103,47 @@ const CardToolbar = ({
   onCardAction,
   className,
 }) => {
+  const mergedI18n = { ...defaultProps.i18n, ...i18n };
   // maps the timebox internal label to a translated string
   // Need the default here in case that the CardToolbar is used by multiple different components
   // Also needs to reassign itself if i18n changes
   const timeRangeOptions = useMemo(
     () =>
       timeRangeOptionsProp || {
-        last24Hours: i18n.last24HoursLabel,
-        last7Days: i18n.last7DaysLabel,
-        lastMonth: i18n.lastMonthLabel,
-        lastQuarter: i18n.lastQuarterLabel,
-        lastYear: i18n.lastYearLabel,
-        thisWeek: i18n.thisWeekLabel,
-        thisMonth: i18n.thisMonthLabel,
-        thisQuarter: i18n.thisQuarterLabel,
-        thisYear: i18n.thisYearLabel,
+        last24Hours: mergedI18n.last24HoursLabel,
+        last7Days: mergedI18n.last7DaysLabel,
+        lastMonth: mergedI18n.lastMonthLabel,
+        lastQuarter: mergedI18n.lastQuarterLabel,
+        lastYear: mergedI18n.lastYearLabel,
+        thisWeek: mergedI18n.thisWeekLabel,
+        thisMonth: mergedI18n.thisMonthLabel,
+        thisQuarter: mergedI18n.thisQuarterLabel,
+        thisYear: mergedI18n.thisYearLabel,
       },
     [
-      i18n.last24HoursLabel,
-      i18n.last7DaysLabel,
-      i18n.lastMonthLabel,
-      i18n.lastQuarterLabel,
-      i18n.lastYearLabel,
-      i18n.thisMonthLabel,
-      i18n.thisQuarterLabel,
-      i18n.thisWeekLabel,
-      i18n.thisYearLabel,
+      mergedI18n.last24HoursLabel,
+      mergedI18n.last7DaysLabel,
+      mergedI18n.lastMonthLabel,
+      mergedI18n.lastQuarterLabel,
+      mergedI18n.lastYearLabel,
+      mergedI18n.thisMonthLabel,
+      mergedI18n.thisQuarterLabel,
+      mergedI18n.thisWeekLabel,
+      mergedI18n.thisYearLabel,
       timeRangeOptionsProp,
     ]
   );
 
   return isEditable ? (
     <div className={classnames(className, `${iotPrefix}--card--toolbar`)}>
-      {(availableActions.edit ||
-        availableActions.clone ||
-        availableActions.delete) && (
-        <OverflowMenu flipped title={i18n.overflowMenuDescription}>
-          {availableActions.edit && (
-            <OverflowMenuItem
-              onClick={() => {
-                onCardAction(CARD_ACTIONS.EDIT_CARD);
-              }}
-              itemText={i18n.editCardLabel}
-            />
-          )}
+      {(availableActions.clone || availableActions.delete) && (
+        <OverflowMenu flipped title={mergedI18n.overflowMenuDescription}>
           {availableActions.clone && (
             <OverflowMenuItem
               onClick={() => {
                 onCardAction(CARD_ACTIONS.CLONE_CARD);
               }}
-              itemText={i18n.cloneCardLabel}
+              itemText={mergedI18n.cloneCardLabel}
             />
           )}
           {availableActions.delete && (
@@ -129,7 +152,7 @@ const CardToolbar = ({
               onClick={() => {
                 onCardAction(CARD_ACTIONS.DELETE_CARD);
               }}
-              itemText={i18n.deleteCardLabel}
+              itemText={mergedI18n.deleteCardLabel}
             />
           )}
         </OverflowMenu>
@@ -140,7 +163,7 @@ const CardToolbar = ({
       {availableActions.range ? (
         <CardRangePicker
           width={width}
-          i18n={i18n}
+          i18n={mergedI18n}
           timeRange={timeRange}
           timeRangeOptions={timeRangeOptions}
           onCardAction={onCardAction}
@@ -151,18 +174,18 @@ const CardToolbar = ({
         <>
           {isExpanded ? (
             <ToolbarSVGWrapper
-              title={i18n.closeLabel}
+              title={mergedI18n.closeLabel}
               onClick={() => onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)}
-              iconDescription={i18n.closeLabel}
+              iconDescription={mergedI18n.closeLabel}
               renderIcon={Close16}
             />
           ) : (
             <ToolbarSVGWrapper
-              title={i18n.expandLabel}
+              title={mergedI18n.expandLabel}
               onClick={() => {
                 onCardAction(CARD_ACTIONS.OPEN_EXPANDED_CARD);
               }}
-              iconDescription={i18n.expandLabel}
+              iconDescription={mergedI18n.expandLabel}
               renderIcon={renderExpandIcon}
             />
           )}

diff --git a/src/components/CardCodeEditor/CardCodeEditor.jsx b/src/components/CardCodeEditor/CardCodeEditor.jsx
@@ -16,11 +16,10 @@ import { settings } from '../../constants/Settings';
 const { iotPrefix } = settings;
 
 const propTypes = {
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  ...ComposedModal.propTypes,
+  ...ComposedModal.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
   /*
    * On submit callback. It's called with editor value, and a callback to set an error messages
-   * onSumbit(value, setError)
+   * onSubmit(value, setError)
    */
   onSubmit: PropTypes.func.isRequired,
   /** Callback called when modal close icon or cancel button is pressed */