fix(time-range): merge and fix time range bug

carbon-design-system · Nov 30, 2020 · f745f5c · f745f5c
2 parents a1be8a5 + 4575a5c
commit f745f5c
Show file tree

Hide file tree

Showing 46 changed files with 1,115 additions and 485 deletions.
diff --git a/__mocks__/@carbon/charts-react/bar-chart-grouped.js b/__mocks__/@carbon/charts-react/bar-chart-grouped.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-grouped' });
diff --git a/__mocks__/@carbon/charts-react/bar-chart-simple.js b/__mocks__/@carbon/charts-react/bar-chart-simple.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-simple' });
diff --git a/__mocks__/@carbon/charts-react/bar-chart-stacked.js b/__mocks__/@carbon/charts-react/bar-chart-stacked.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-stacked' });
diff --git a/__mocks__/@carbon/charts-react/line-chart.js b/__mocks__/@carbon/charts-react/line-chart.js
@@ -0,0 +1,3 @@
+const React = require('react');
+
+module.exports = () => React.createElement('div', { id: 'mock-line-chart' });
diff --git a/__mocks__/@carbon/charts-react/pie-chart.js b/__mocks__/@carbon/charts-react/pie-chart.js
@@ -0,0 +1,3 @@
+const React = require('react');
+
+module.exports = () => React.createElement('div', { id: 'mock-pie-chart' });
diff --git a/jest.config.js b/jest.config.js
@@ -135,7 +135,10 @@ module.exports = {
     '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   testPathIgnorePatterns: ['/config/', '/lib/'],
-  transformIgnorePatterns: ['/node_modules/(?!(@carbon/charts)).+(.jsx?)'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@carbon/charts)).+(.jsx?)',
+    '/__mocks__/.+(.jsx?)',
+  ],
   watchPathIgnorePatterns: ['/coverage/', '/results/', '/.git/'],
   moduleFileExtensions: ['js', 'json', 'jsx'],
   snapshotSerializers: ['enzyme-to-json/serializer'],

diff --git a/package.json b/package.json
@@ -126,8 +126,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@carbon/charts": "^0.41.1",
-    "@carbon/charts-react": "^0.40.13",
+    "@carbon/charts": "^0.41.6",
+    "@carbon/charts-react": "^0.41.6",
     "@carbon/colors": "10.15.0",
     "@carbon/icons-react": "10.17.0",
     "@carbon/layout": "10.12.0",
@@ -269,7 +269,7 @@
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-uglify": "^6.0.4",
     "sass-loader": "^7.1.0",
-    "semantic-release": "^17.2.1",
+    "semantic-release": "^17.2.3",
     "storybook-addon-rtl": "^0.2.2",
     "storybook-readme": "^5.0.8",
     "style-loader": "^0.23.1",

diff --git a/src/components/BarChartCard/BarChartCard.test.jsx b/src/components/BarChartCard/BarChartCard.test.jsx
@@ -50,7 +50,7 @@ describe('BarChartCard', () => {
 
   it('does not show bar chart when loading', () => {
     const wrapper = mount(<BarChartCard {...barChartCardProps} isLoading />);
-    expect(wrapper.find('SimpleBarChart')).toHaveLength(0);
+    expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0);
   });
 
   it('does not show bar chart when empty data', () => {
@@ -60,7 +60,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((q) => q.quarter === 'NOT_VALID')}
       />
     );
-    expect(wrapper.find('SimpleBarChart')).toHaveLength(0);
+    expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0);
   });
 
   it('shows table when isExpanded', () => {
@@ -103,7 +103,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')}
       />
     );
-    expect(wrapper.find('GroupedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1);
   });
 
   it('shows stackedBarChart', () => {
@@ -130,7 +130,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q3')}
       />
     );
-    expect(wrapper.find('StackedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1);
   });
 
   it('shows a timeSeries chart', () => {
@@ -152,7 +152,7 @@ describe('BarChartCard', () => {
         values={barChartData.timestamps.filter((t) => t.city === 'Amsterdam')}
       />
     );
-    expect(wrapper.find('StackedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1);
   });
 
   it('shows a horizontal chart', () => {
@@ -180,7 +180,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')}
       />
     );
-    expect(wrapper.find('GroupedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1);
   });
 
   it('i18n string test', () => {

diff --git a/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot b/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot
@@ -90,7 +90,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -213,7 +213,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -507,7 +507,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -675,7 +675,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -798,7 +798,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -921,7 +921,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1089,7 +1089,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1257,7 +1257,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1380,7 +1380,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1470,7 +1470,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container iot--bar-chart-container--editable"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -1641,7 +1641,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
               className="iot--bar-chart-container iot--bar-chart-container--expanded"
             >
               <div
-                className="chart-holder"
+                id="mock-bar-chart-stacked"
               />
               <div
                 className="iot--bar-chart-card--stateful-table iot--table-container bx--data-table-container"
@@ -2839,7 +2839,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>

diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx
@@ -12,8 +12,8 @@ import { TextArea, TextInput, Dropdown } from '../../../index';
 import { timeRangeToJSON } from '../../DashboardEditor/editorUtils';
 import { DataItemsPropTypes } from '../../DashboardEditor/DashboardEditor';
 
-import DataSeriesFormItem from './CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem';
-import ImageCardFormItem from './CardEditFormItems/ImageCardFormItem/ImageCardFormItem';
+import DataSeriesFormContent from './CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent';
+import ImageCardFormContent from './CardEditFormItems/ImageCardFormItems/ImageCardFormContent';
 
 const { iotPrefix } = settings;
 
@@ -39,15 +39,14 @@ const propTypes = {
         includeZeroOnXaxis: PropTypes.bool,
         includeZeroOnYaxis: PropTypes.bool,
         timeDataSourceId: PropTypes.string,
+        showLegend: PropTypes.bool,
       }),
       PropTypes.shape({
         id: PropTypes.string,
         src: PropTypes.string,
         zoomMax: PropTypes.number,
       }),
     ]),
-    interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when form data changes */
   onChange: PropTypes.func.isRequired,
@@ -129,15 +128,15 @@ const defaultProps = {
     selectASize: 'Select a size',
     timeRange: 'Time range',
     selectATimeRange: 'Select a time range',
-    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',
+    last24HoursLabel: 'Last 24 hours',
+    last7DaysLabel: 'Last 7 days',
+    lastMonthLabel: 'Last month',
+    lastQuarterLabel: 'Last quarter',
+    lastYearLabel: 'Last year',
+    thisWeekLabel: 'This week',
+    thisMonthLabel: 'This month',
+    thisQuarterLabel: 'This quarter',
+    thisYearLabel: 'This year',
   },
   getValidDataItems: null,
   getValidTimeRanges: null,
@@ -178,16 +177,24 @@ const CardEditFormContent = ({
   getValidTimeRanges,
   availableDimensions,
 }) => {
-  const { title, description, size, type, id } = cardConfig;
+  const { title, description, size, type, id, timeRange } = cardConfig;
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
   const [selectedDataItems, setSelectedDataItems] = useState([]);
-  const [selectedTimeRange, setSelectedTimeRange] = useState('');
+  const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange || '');
 
   const baseClassName = `${iotPrefix}--card-edit-form`;
 
   const validTimeRanges = getValidTimeRanges
     ? getValidTimeRanges(cardConfig, selectedDataItems)
     : defaultTimeRangeOptions;
+
+  const validTimeRangeOptions = validTimeRanges
+    ? validTimeRanges.map((range) => ({
+        id: range,
+        text: mergedI18n[`${range}Label`] || range,
+      }))
+    : [];
+
   return (
     <>
       <div className={`${baseClassName}--input`}>
@@ -242,27 +249,27 @@ const CardEditFormContent = ({
               label={mergedI18n.selectATimeRange}
               direction="bottom"
               itemToString={(item) => item.text}
-              items={
-                validTimeRanges
-                  ? validTimeRanges.map((range) => ({
-                      id: range,
-                      text: mergedI18n[range] || range,
-                    }))
-                  : []
-              }
+              items={validTimeRangeOptions}
+              selectedItem={validTimeRangeOptions.find(
+                // This is a hacky workaround for a carbon issue
+                (validTimeRangeOption) =>
+                  validTimeRangeOption.id === selectedTimeRange
+              )}
               light
               onChange={({ selectedItem }) => {
-                const { range } = timeRangeToJSON[selectedItem.id];
-                setSelectedTimeRange(selectedItem.id);
+                const timeRangeInterval = selectedItem.id;
+                const { range } = timeRangeToJSON[timeRangeInterval];
+                setSelectedTimeRange(timeRangeInterval);
                 onChange({
                   ...cardConfig,
+                  timeRange: timeRangeInterval,
                   dataSource: { ...cardConfig.dataSource, range },
                 });
               }}
               titleText={mergedI18n.timeRange}
             />
           </div>
-          <DataSeriesFormItem
+          <DataSeriesFormContent
             cardConfig={cardConfig}
             onChange={onChange}
             dataItems={dataItems}
@@ -275,7 +282,7 @@ const CardEditFormContent = ({
         </>
       ) : null}
       {type === CARD_TYPES.IMAGE && (
-        <ImageCardFormItem cardConfig={cardConfig} i18n={mergedI18n} />
+        <ImageCardFormContent cardConfig={cardConfig} i18n={mergedI18n} />
       )}
     </>
   );

diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx
@@ -33,7 +33,7 @@ const cardConfig = {
 };
 
 const mockOnChange = jest.fn();
-const mockGetValidTimeRanges = jest.fn();
+const mockGetValidTimeRanges = jest.fn(() => ['last2Hours']);
 
 afterEach(() => {
   jest.clearAllMocks();
@@ -54,6 +54,24 @@ describe('CardEditFormContent', () => {
       );
       expect(mockOnChange).toHaveBeenCalled();
       expect(mockGetValidTimeRanges).toHaveBeenCalled();
+      // Time range selector should start unselected
+      const timeRangeSelector = screen.getAllByLabelText('Time range');
+      expect(timeRangeSelector[0].innerHTML).not.toEqual(
+        expect.stringContaining('last2Hours')
+      );
+    });
+    it('Should select timeRange if passed', () => {
+      render(
+        <CardEditFormContent
+          cardConfig={{ ...cardConfig, timeRange: 'last2Hours' }}
+          onChange={mockOnChange}
+          getValidTimeRanges={mockGetValidTimeRanges}
+        />
+      );
+      const timeRangeSelector = screen.getAllByLabelText('Time range');
+      expect(timeRangeSelector[0].innerHTML).toEqual(
+        expect.stringContaining('last2Hours')
+      );
     });
   });
 });
diff --git a/...DataSeriesFormItem/DataSeriesFormItem.jsx → ...SeriesFormItems/DataSeriesFormContent.jsx b/...DataSeriesFormItem/DataSeriesFormItem.jsx → ...SeriesFormItems/DataSeriesFormContent.jsx
@@ -36,9 +36,9 @@ const propTypes = {
       includeZeroOnXaxis: PropTypes.bool,
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
+      showLegend: PropTypes.bool,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /* callback when image input value changes (File object) */
   onChange: PropTypes.func.isRequired,

diff --git a/...eriesFormItem/DataSeriesFormItem.test.jsx → ...sFormItems/DataSeriesFormContent.test.jsx b/...eriesFormItem/DataSeriesFormItem.test.jsx → ...sFormItems/DataSeriesFormContent.test.jsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import DataSeriesFormItem, {
   formatDataItemsForDropdown,
-} from './DataSeriesFormItem';
+} from './DataSeriesFormContent';
 
 const cardConfig = {
   id: 'Timeseries',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const React = require('react');

		module.exports = () => React.createElement('div', { id: 'mock-line-chart' });