Merge branch 'master' of github.com:IBM/carbon-addons-iot-react into …

…tree-shake-build

jest.config.js

@@ -64,7 +64,7 @@ module.exports = {
       statements: 70,
       branches: 50,
       lines: 69,
-      functions: 77,
+      functions: 76.47,
     },
     './src/components/Page/EditPage.jsx': {
       statements: 63,
@@ -107,13 +107,6 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'jsx'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   moduleNameMapper: {
-    // this fixes an error present due to the esm import when updating to storybook 5.3.13
-    // https://github.com/storybookjs/storybook/issues/9470#issuecomment-576022225
-    // this has a fix in v6, but is currently in alpha, it's possible a patch for 5.3 could be released
-    // https://github.com/storybookjs/storybook/pull/9795#issuecomment-587808019
-    // either way, this can be removed in the future
-    'react-syntax-highlighter/dist/esm/(.*)': 'react-syntax-highlighter/dist/cjs/$1',
-
     // rewrite carbon-components(-react) es imports to lib/cjs imports because jest doesn't support es modules
     '@carbon/icons-react/es/(.*)': '@carbon/icons-react/lib/$1',
     'carbon-components-react/es/(.*)': 'carbon-components-react/lib/$1',

package.json

@@ -72,8 +72,8 @@
     ]
   },
   "dependencies": {
-    "@carbon/charts": "^0.29.0",
-    "@carbon/charts-react": "^0.29.0",
+    "@carbon/charts": "^0.30.5",
+    "@carbon/charts-react": "^0.30.5",
     "@carbon/colors": "10.7.0",
     "@carbon/icons": "10.6.1",
     "@carbon/icons-react": "10.6.1",
@@ -135,14 +135,14 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
     "@ibma/aat": "https://able.ibm.com/tools/dist/ibma-aat-2.0.8.tgz",
-    "@storybook/addon-a11y": "^5.3.13",
-    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-info": "^5.3.13",
-    "@storybook/addon-knobs": "^5.3.13",
-    "@storybook/addon-links": "^5.3.13",
-    "@storybook/addon-storyshots": "^5.3.13",
-    "@storybook/addons": "^5.3.13",
-    "@storybook/react": "^5.3.13",
+    "@storybook/addon-a11y": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-info": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-storyshots": "^5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
     "@testing-library/dom": "^6.10.1",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^9.3.2",

src/components/Table/Table.test.jsx

@@ -347,19 +347,27 @@ describe('Table', () => {
         view={{
           toolbar: {
             search: {
-              defaultValue: 'toyota',
+              defaultValue: '',
             },
           },
         }}
       />
     );
 
     expect(wrapper.find('.bx--search-input')).toHaveLength(1);
-    expect(wrapper.find('.bx--search-input').prop('value')).toEqual('toyota');
+    expect(wrapper.find('.bx--search-input').prop('value')).toEqual('');
+    expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="true"`);
 
     wrapper.setProps({ view: { toolbar: { search: { defaultValue: 'ferrari' } } } });
     wrapper.update();
 
     expect(wrapper.find('.bx--search-input').prop('value')).toEqual('ferrari');
+    expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="false"`);
+
+    wrapper.setProps({ view: { toolbar: { search: { defaultValue: '' } } } });
+    wrapper.update();
+
+    expect(wrapper.find('.bx--search-input').prop('value')).toEqual('');
+    expect(wrapper.find('.bx--search-input').html()).toContain(`aria-hidden="true"`);
   });
 });

src/components/Table/TableHead/ColumnHeaderRow/ColumnHeaderRow.test.jsx

@@ -45,7 +45,7 @@ describe('TableHead', () => {
     const dropTarget = wrapper.find("DropTarget(ColumnHeaderSelect)[columnId='col2']").instance();
     backend.simulateBeginDrag([dragSource.getHandlerId()]);
     backend.simulateHover([dropTarget.getHandlerId()]);
-    backend.simulateEndDrag();
+    backend.simulateDrop();
     expect(commonTableHeadProps.onChangeOrdering).toHaveBeenCalled();
   });
   it('does not reorder columns when placed upon themselves', () => {
@@ -55,7 +55,7 @@ describe('TableHead', () => {
     const dropTarget = wrapper.find("DropTarget(ColumnHeaderSelect)[columnId='col1']").instance();
     backend.simulateBeginDrag([dragSource.getHandlerId()]);
     backend.simulateHover([dropTarget.getHandlerId()]);
-    backend.simulateEndDrag();
+    backend.simulateDrop();
     expect(commonTableHeadProps.onChangeOrdering).toHaveBeenCalledWith([
       { columnId: 'col2', isHidden: false },
       { columnId: 'col1', isHidden: false },

src/components/Table/TableHead/ColumnHeaderSelect/ColumnHeaderSelect.jsx

@@ -12,11 +12,13 @@ const ColumnHeaderSelect = ({
   isHidden,
   children,
   onClick,
+  isOver,
 }) => {
   return (
     <Button
       className={classNames('column-header__btn', 'column-header__select', {
         'column-header__select--hidden': isHidden,
+        'column-header__select--isOver': isOver,
       })}
       kind="secondary"
       key={columnId}
@@ -66,7 +68,7 @@ const cardSource = {
 };
 
 const cardTarget = {
-  hover(props, monitor) {
+  drop(props, monitor) {
     const dragIndex = monitor.getItem().index;
     const hoverIndex = props.index;
     // Don't replace items with themselves

src/components/Table/TableHead/_table-head.scss

@@ -25,6 +25,11 @@
     opacity: 0.5;
   }
 
+  .column-header__select--isOver {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 1px $gray-10;
+  }
+
   .lightweight {
     tr:last-of-type {
       th {

src/components/Table/TableToolbarSearch/TableToolbarSearch.jsx

@@ -61,6 +61,13 @@ const TableToolbarSearch = ({
     [focusTarget]
   );
 
+  useEffect(
+    () => {
+      setExpanded(defaultValue && defaultValue !== '');
+    },
+    [defaultValue]
+  );
+
   const handleExpand = (event, val) => {
     setExpanded(val);
     if (onExpand) {

src/components/TableCard/TableCard.jsx

@@ -212,6 +212,7 @@ export const findMatchingThresholds = (thresholds, item, columnId) => {
       const currentThresholdIndex = highestSeverityThreshold.findIndex(
         currentThreshold => currentThreshold.dataSourceId === threshold.dataSourceId
       );
+
       if (
         // If I don't have a threshold currently for this column
         currentThresholdIndex < 0
@@ -374,15 +375,15 @@ const TableCard = ({
    */
   const generateThresholdColumn = columnId => {
     // Need to find the index of the dataSource regardless of uniqueThresholds ordering
-    const thresholdIndex = uniqueThresholds.findIndex(
+    const uniqueThresholdIndex = uniqueThresholds.findIndex(
       threshold => threshold.dataSourceId === columnId
     );
     return {
       id: `iconColumn-${columnId}`,
-      label: uniqueThresholds[thresholdIndex].label
-        ? uniqueThresholds[thresholdIndex].label
+      label: uniqueThresholds[uniqueThresholdIndex].label
+        ? uniqueThresholds[uniqueThresholdIndex].label
         : `${capitalize(columnId)} ${strings.severityLabel}`,
-      width: uniqueThresholds[thresholdIndex].width,
+      width: uniqueThresholds[uniqueThresholdIndex].width,
       isSortable: true,
       renderDataFunction: renderThresholdIcon,
       priority: 1,
@@ -408,25 +409,32 @@ const TableCard = ({
 
   // Don't add the icon column in sample mode
   if (!isEditable) {
-    const indexes = columns
-      .map((column, index) =>
-        uniqueThresholds.filter(item => item.dataSourceId === column.dataSourceId)[0]
-          ? { i: index, columnId: column.dataSourceId } // Find the column and put the threshold next to it
-          : null
-      )
-      .filter(i => !isNil(i));
-    indexes.forEach(({ i, columnId }, index) => {
-      columnsUpdated.splice(index !== 0 ? i + 1 : i, 0, generateThresholdColumn(columnId));
+    // Add the new threshold columns to the existing columns
+    uniqueThresholds.forEach(threshold => {
+      const columnIndex = columnsUpdated.findIndex(
+        column => column.dataSourceId === threshold.dataSourceId
+      );
+      // If columnIndex is not -1, there was a match so add the column. Otherwise, skip the column as it will be added
+      // in the next call
+      if (columnIndex !== -1) {
+        columnsUpdated.splice(columnIndex, 0, generateThresholdColumn(threshold.dataSourceId));
+      }
     });
+
     // Check for any threshold columns that weren't matched (if the column was hidden) and add to the end of the array
-    const missingThresholdColumns = uniqueThresholds.filter(
-      threshold => !find(columnsUpdated, column => threshold.dataSourceId === column.dataSourceId)
-    );
-    columnsUpdated.splice(
-      columnsUpdated.length,
-      0,
-      ...missingThresholdColumns.map(({ dataSourceId }) => generateThresholdColumn(dataSourceId))
-    );
+    const missingThresholdColumns = uniqueThresholds.filter(threshold => {
+      return !find(columnsUpdated, column => {
+        return threshold.dataSourceId === column.dataSourceId;
+      });
+    });
+
+    if (missingThresholdColumns.length > 0) {
+      columnsUpdated.splice(
+        columnsUpdated.length,
+        0,
+        ...missingThresholdColumns.map(({ dataSourceId }) => generateThresholdColumn(dataSourceId))
+      );
+    }
   }
 
   const newColumns = thresholds ? columnsUpdated : columns;

src/components/TableCard/TableCard.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { render, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { CARD_SIZES } from '../../constants/LayoutConstants';
@@ -188,7 +188,7 @@ describe('TableCard', () => {
     );
     expect(wrapper2.find('TableCell .myCustomRenderedCell').length).toBe(0);
   });
-  test('threshold colums should render in correct column regardless of order', () => {
+  test('threshold columns should render in correct column regardless of order', () => {
     // The pressure header comes after the count header, but the ordering should not matter when
     // it comes to rendering the threshold columns
     const customThresholds = [
@@ -238,6 +238,70 @@ describe('TableCard', () => {
     expect(queryByTitle('Pressure Severity')).not.toBeInTheDocument();
     expect(getByTitle('Pressure Sev')).toBeInTheDocument();
   });
+  test('threshold columns should render in correct column regardless of quantity', () => {
+    // If there are more than 2 thresholds, they should still render to the left of the datasource column
+    const customThresholds = [
+      {
+        dataSourceId: 'pressure',
+        comparison: '>=',
+        value: 10,
+        severity: 1,
+      },
+      {
+        dataSourceId: 'count',
+        comparison: '<',
+        value: 5,
+        severity: 3,
+      },
+      {
+        dataSourceId: 'count',
+        comparison: '>=',
+        value: 10,
+        severity: 1,
+      },
+      {
+        dataSourceId: 'count',
+        comparison: '=',
+        value: 7,
+        severity: 2,
+      },
+      {
+        dataSourceId: 'hour',
+        comparison: '<',
+        value: 1563877570000,
+        severity: 1, // High threshold, medium, or low used for sorting and defined filtration
+      },
+    ];
+    // First the component needs to be rendered. getByTitle doesn't need to be used
+    // eslint-disable-next-line no-unused-vars
+    const { getByTitle } = render(
+      <TableCard
+        id="table-list"
+        title="Open Alerts"
+        content={{
+          columns: tableColumns,
+          thresholds: customThresholds,
+        }}
+        values={tableData}
+        size={CARD_SIZES.LARGEWIDE}
+      />
+    );
+
+    // Then get all of the th elements. This is how the ordering will be determined
+    const tableHeader = document.getElementsByTagName('th');
+    // The within function comes in SUPER handy here
+    const countSeverityIndex = 1;
+    const { getByText } = within(tableHeader[countSeverityIndex]);
+    expect(getByText('Count Severity')).toBeTruthy();
+
+    const hourSeverityIndex = 3;
+    const { getByText: getByTextHour } = within(tableHeader[hourSeverityIndex]);
+    expect(getByTextHour('Hour Severity')).toBeTruthy();
+
+    const pressureSeverityIndex = 5;
+    const { getByText: getByTextPressure } = within(tableHeader[pressureSeverityIndex]);
+    expect(getByTextPressure('Pressure Severity')).toBeTruthy();
+  });
   test('threshold icon labels should not display when showSeverityLabel is false', () => {
     const customThresholds = [
       {