Merge branch 'dashboard-editor' of github.com:carbon-design-system/ca…

…rbon-addons-iot-react into breakpoint-switcher

.github/CODEOWNERS

@@ -19,8 +19,25 @@
 
 * @bryancboyd @scottdickerson @davidicus @tay1orjones @leetosc @cgirani @stuckless @tomklapiscak @JoelArmendariz @jessieyan @blechner @sstone2423
 
+#####
+# Core admin team should be notified of changes to build/test/deploy
+
+# Core dependencies
+/package.json   @tay1orjones @davidicus @bryancboyd @scottdickerson
+/yarn.lock      @tay1orjones @davidicus @bryancboyd @scottdickerson
+
+# Configuration files
+**/*.config.js  @tay1orjones @davidicus @bryancboyd @scottdickerson
+**/config/      @tay1orjones @davidicus @bryancboyd @scottdickerson
+/.nvmrc         @tay1orjones @davidicus @bryancboyd @scottdickerson
+
+# Deploy configuration
+**/.storybook/  @tay1orjones @davidicus @bryancboyd @scottdickerson
+/.travis.yml    @tay1orjones @davidicus @bryancboyd @scottdickerson
+/netlify.toml   @tay1orjones @davidicus @bryancboyd @scottdickerson
+
 #####
 # Release team should be notified of Public API changes in the system
 
-**/publicAPI.test.js @tay1orjones @davidicus
+**/publicAPI.test.js      @tay1orjones @davidicus
 **/publicAPI.test.js.snap @tay1orjones @davidicus

.gitignore

@@ -40,3 +40,4 @@ package-lock.json
 .npmrc
 results
 
+.vscode

.kodiak.toml

@@ -0,0 +1,6 @@
+# .kodiak.toml
+version = 1
+
+[merge]
+automerge_label = "status: ready to merge 🎉"
+method = "merge"

.storybook/__snapshots__/Welcome.story.storyshot

@@ -658,7 +658,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                   </div>
                   <div
                     className="bx--structured-list-td"
-                  />
+                  >
+                    ErrorBoundary
+                  </div>
                 </div>
                 <div
                   className="bx--structured-list-row"
@@ -670,7 +672,9 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                   </div>
                   <div
                     className="bx--structured-list-td"
-                  />
+                  >
+                    ErrorBoundaryContext
+                  </div>
                 </div>
                 <div
                   className="bx--structured-list-row"
@@ -3028,6 +3032,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"
                 >
@@ -3052,6 +3068,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots 0/Getting Starte
                     Card
                   </div>
                 </div>
+                <div
+                  className="bx--structured-list-row"
+                >
+                  <div
+                    className="bx--structured-list-td"
+                  />
+                  <div
+                    className="bx--structured-list-td"
+                  >
+                    PieChartCard
+                  </div>
+                </div>
                 <div
                   className="bx--structured-list-row"
                 >

src/components/BarChartCard/BarChartCard.jsx

@@ -15,7 +15,11 @@ import {
 } from '../../constants/LayoutConstants';
 import Card from '../Card/Card';
 import { settings } from '../../constants/Settings';
-import { chartValueFormatter, handleCardVariables } from '../../utils/cardUtilityFunctions';
+import {
+  chartValueFormatter,
+  handleCardVariables,
+  increaseSmallCardSize,
+} from '../../utils/cardUtilityFunctions';
 import StatefulTable from '../Table/StatefulTable';
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions';
 
@@ -68,13 +72,7 @@ const BarChartCard = ({
     values: valuesProp,
   } = handleCardVariables(titleProp, content, initialValues, others);
 
-  // Charts render incorrectly if size is too small, so change their size to MEDIUM
-  let size = sizeProp;
-  if (sizeProp === CARD_SIZES.SMALL) {
-    size = CARD_SIZES.MEDIUM;
-  } else if (sizeProp === CARD_SIZES.SMALLWIDE) {
-    size = CARD_SIZES.MEDIUMWIDE;
-  }
+  const size = increaseSmallCardSize(sizeProp, 'BarChartCard');
 
   // If editable, show sample presentation data
   const values = isEditable

src/components/Card/Card.jsx

@@ -305,6 +305,7 @@ const Card = props => {
             return (
               <CardWrapper
                 {...others} // you need all of these to support dynamic positioning during edit
+                testID={testID}
                 id={id}
                 dimensions={dimensions}
                 isExpanded={isExpanded}

src/components/CardCodeEditor/CardCodeEditor.jsx

@@ -16,10 +16,10 @@ import { settings } from '../../constants/Settings';
 const { iotPrefix } = settings;
 
 const propTypes = {
-  ...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 */
@@ -86,15 +86,16 @@ const CardCodeEditor = ({
   };
 
   const handleOnSubmit = () => {
-    onSubmit(editorValue.current.getValue(), setError);
+    onSubmit(editorValue?.current?.getValue(), setError);
   };
 
   const handleOnExpand = () => {
     setIsExpanded(expandedState => !expandedState);
   };
 
   const handleOnCopy = () => {
-    return onCopy && onCopy(editorValue.current.getValue());
+    const value = editorValue?.current?.getValue() || initialValue;
+    return onCopy && onCopy(value);
   };
 
   return (

src/components/CardCodeEditor/CardCodeEditor.story.jsx

@@ -6,11 +6,11 @@ import CardCodeEditor from './CardCodeEditor';
 
 const pkgjson = require('../../../package.json');
 
-const isValidCallback = (val, setError) => {
+export const isValidCallback = (val, setError) => {
   try {
     setError(false);
     // comments are not valid JSON so remove before check
-    const _value = val.replace('// write your code here', '');
+    const _value = val.replace('/* write your code here */', '');
 
     if (_value === '') {
       setError('JSON value must not be an empty string');

src/components/CardCodeEditor/CardCodeEditor.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import CardCodeEditor from './CardCodeEditor';
+import { isValidCallback } from './CardCodeEditor.story';
+
+describe('CardEditor', () => {
+  it('should show error notification editor value is invalid', async () => {
+    const handleOnCopy = jest.fn();
+    const { container } = render(
+      <CardCodeEditor
+        onSubmit={isValidCallback}
+        onCopy={handleOnCopy}
+        initialValue="/* write your code here */"
+        onClose={() => {}}
+      />
+    );
+    const save = screen.queryByText('Save');
+    userEvent.click(save);
+    await waitFor(() => expect(screen.queryByRole('alert')).toBeTruthy());
+    userEvent.click(container.querySelector('.bx--inline-notification__close-button'));
+    await waitFor(() => expect(screen.queryByRole('alert')).toBeFalsy());
+  });
+
+  it('should expand when expand icon is clicked', async () => {
+    const handleOnCopy = jest.fn();
+    const { container } = render(
+      <CardCodeEditor
+        onSubmit={isValidCallback}
+        onCopy={handleOnCopy}
+        initialValue="/* write your code here */"
+        onClose={() => {}}
+      />
+    );
+    const expand = screen.queryByText('Expand');
+    userEvent.click(expand);
+    await waitFor(() =>
+      expect(container.querySelector('.iot--editor__expanded')).toBeInTheDocument()
+    );
+  });
+
+  it('should copy editor value when copy icon is clicked', async () => {
+    const handleOnCopy = jest.fn();
+    const { container } = render(
+      <CardCodeEditor
+        onSubmit={isValidCallback}
+        onCopy={handleOnCopy}
+        initialValue="/* write your code here */"
+        onClose={() => {}}
+      />
+    );
+    const copy = container.querySelector('.iot--editor-copy');
+    userEvent.click(copy);
+    expect(handleOnCopy).toHaveBeenCalledWith('/* write your code here */');
+  });
+});