diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index bcacc5273b..4beb592aec 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -17,33 +17,30 @@ # These users own any files in the following directory at the root of # the repository and any of its subdirectories. -* @davidicus @jessieyan @sls-ca +* @davidicus @jessieyan @sls-ca @herleraja ##### # Core admin team should be notified of changes to build/test/deploy # Core dependencies -/package.json @davidicus @jessieyan @sls-ca -/yarn.lock @davidicus @jessieyan @sls-ca +/package.json @davidicus @jessieyan @sls-ca @herleraja +/yarn.lock @davidicus @jessieyan @sls-ca @herleraja # Configuration files -**/*.config.js @davidicus @jessieyan @sls-ca -**/config/ @davidicus @jessieyan @sls-ca -/.nvmrc @davidicus @jessieyan @sls-ca +**/*.config.js @davidicus @jessieyan @sls-ca @herleraja +**/config/ @davidicus @jessieyan @sls-ca @herleraja +/.nvmrc @davidicus @jessieyan @sls-ca @herleraja # Deploy configuration -**/.storybook/ @davidicus @jessieyan @sls-ca -/.github/workflows/ @davidicus @jessieyan @sls-ca -/netlify.toml @davidicus @jessieyan @sls-ca +**/.storybook/ @davidicus @jessieyan @sls-ca @herleraja +/.github/workflows/ @davidicus @jessieyan @sls-ca @herleraja +/netlify.toml @davidicus @jessieyan @sls-ca @herleraja ##### # Release team should be notified of Public API changes in the system -**/publicAPI.test.js @davidicus @jessieyan @sls-ca -**/publicAPI.test.js.snap @davidicus @jessieyan @sls-ca +**/publicAPI.test.js @davidicus @jessieyan @sls-ca @herleraja +**/publicAPI.test.js.snap @davidicus @jessieyan @sls-ca @herleraja # Angular team should be required for Angular changes /packages/angular/ @carbon-design-system/angular-maintainers - -# Monitor still has use for this component -/packages/react/src/components/DashboardEditor/ @davidicus @jessieyan @sls-ca @herleraja diff --git a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx index 467a96221d..a5662d794c 100644 --- a/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx +++ b/packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx @@ -104,6 +104,7 @@ const propTypes = { value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]), }) ), + tooltip: PropTypes.string, }), setEditDataItem: PropTypes.func, /** an object where the keys are available dimensions and the values are the values available for those dimensions @@ -147,6 +148,14 @@ const propTypes = { * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default */ handleDataItemEdit: PropTypes.func, + + options: PropTypes.shape({ + hasColorDropdown: PropTypes.bool, + hasUnit: PropTypes.bool, + hasDecimalPlacesDropdown: PropTypes.bool, + hasThresholds: PropTypes.bool, + hasTooltip: PropTypes.bool, + }), }; const defaultProps = { @@ -170,6 +179,7 @@ const defaultProps = { dataItemEditorDataItemFilter: 'Data filter', dataItemEditorDataItemThresholds: 'Thresholds', dataItemEditorDataItemAddThreshold: 'Add threshold', + dataItemEditorDataItemTooltip: 'Tooltip', dataItemEditorBarColor: 'Bar color', dataItemEditorLineColor: 'Line color', dataItemEditorAddAggregationMethodLabel: 'Add aggregation method', @@ -208,6 +218,13 @@ const defaultProps = { }, }, handleDataItemEdit: handleDefaultDataItemEdit, + options: { + hasColorDropdown: false, + hasUnit: false, + hasDecimalPlacesDropdown: false, + hasThresholds: false, + hasTooltip: false, + }, }; const DATAITEM_COLORS_OPTIONS = [ @@ -243,10 +260,18 @@ const DataSeriesFormItemModal = ({ dataSeriesFormActions: { hasAggregationsDropDown, onAddAggregations, hasDataFilterDropdown }, }, handleDataItemEdit, + options, }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; const { id, type, content } = cardConfig; const baseClassName = `${iotPrefix}--card-edit-form`; + const { + hasColorDropdown, + hasUnit, + hasDecimalPlacesDropdown, + hasThresholds, + hasTooltip, + } = options; const isTimeBasedCard = type === CARD_TYPES.TIMESERIES || @@ -266,8 +291,6 @@ const DataSeriesFormItemModal = ({ decrementNumberText, } = mergedI18n; switch (idToTranslate) { - default: - return ''; case 'clear.all': return clearAllText || 'Clear all'; case 'clear.selection': @@ -280,6 +303,8 @@ const DataSeriesFormItemModal = ({ return incrementNumberText || 'Increment number'; case 'decrement.number': return decrementNumberText || 'Decrement number'; + default: + return ''; } }, [mergedI18n] @@ -427,7 +452,7 @@ const DataSeriesFormItemModal = ({ /> - {(type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR) && ( // show color selector + {hasColorDropdown && ( // show color selector
)} - - {(type === CARD_TYPES.VALUE || type === CARD_TYPES.IMAGE) && ( -
+ {hasTooltip && (
setEditDataItem({ ...editDataItem, - unit: evt.target.value, + tooltip: evt.target.value, }) } - value={editDataItem.unit} + value={editDataItem.tooltip} />
-
- { - const isSet = selectedItem !== mergedI18n.notSet; - if (isSet) { + )} +
+ + {(hasUnit || hasDecimalPlacesDropdown) && ( +
+ {hasUnit && ( +
+ setEditDataItem({ ...editDataItem, - precision: Number(selectedItem), - }); - } else { - setEditDataItem(omit(editDataItem, 'precision')); + unit: evt.target.value, + }) } - }} - /> -
+ value={editDataItem.unit} + /> +
+ )} + {hasDecimalPlacesDropdown && ( +
+ { + const isSet = selectedItem !== mergedI18n.notSet; + if (isSet) { + setEditDataItem({ + ...editDataItem, + precision: Number(selectedItem), + }); + } else { + setEditDataItem(omit(editDataItem, 'precision')); + } + }} + /> +
+ )}
)} @@ -560,7 +606,7 @@ const DataSeriesFormItemModal = ({ )} - {(type === CARD_TYPES.VALUE || type === CARD_TYPES.IMAGE || type === CARD_TYPES.TABLE) && ( + {hasThresholds && ( { onAddAggregations: jest.fn(), }, }, + options: { + hasColorDropdown: true, + hasUnit: true, + hasDecimalPlacesDropdown: true, + hasThresholds: true, + hasTooltip: true, + }, }; it('Renders for timeseries card data', () => { @@ -189,12 +196,38 @@ describe('DataSeriesFormItemModal', () => { expect(label).toBeInTheDocument(); expect(legendColorLabel).toBeInTheDocument(); + const tooltip = screen.getByText('Tooltip'); + expect(tooltip).toBeInTheDocument(); + const dataFilter = screen.getByRole('listbox', { name: 'Data filter' }); expect(dataFilter).toBeInTheDocument(); const aggregationDropdown = screen.getByRole('listbox', { name: 'Aggregation method' }); expect(aggregationDropdown).toBeInTheDocument(); }); + + it('Renders card data with out any options', () => { + render( + + ); + + const label = screen.queryByText('Custom label'); + expect(label).toBeInTheDocument(); + + const unit = screen.queryByText('Unit'); + expect(unit).not.toBeInTheDocument(); + + const tooltip = screen.queryByText('Tooltip'); + expect(tooltip).not.toBeInTheDocument(); + }); + it('Renders for timeseries card data without datafilter', () => { render(
) : null} - {label} + {tooltip ? ( + + {label} + + ) : ( + {label} + )}
diff --git a/packages/react/src/components/ValueCard/ValueCard.story.jsx b/packages/react/src/components/ValueCard/ValueCard.story.jsx index a4c908dbf1..c4e7e698b4 100644 --- a/packages/react/src/components/ValueCard/ValueCard.story.jsx +++ b/packages/react/src/components/ValueCard/ValueCard.story.jsx @@ -152,6 +152,7 @@ export const WithLinkAndMeasurementUnit = () => { { dataSourceId: 'peakUsage', label: text('content.attributes[0].label', 'Peak usage'), + tooltip: text('content.attributes[0].tooltip', 'Peak usage tooltip'), measurementUnitLabel: text('content.attributes[0].measurementUnitLabel', 'AppPoints'), thresholds: [ { diff --git a/packages/react/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot b/packages/react/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot index b4fe9aa283..95be06f549 100644 --- a/packages/react/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot +++ b/packages/react/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot @@ -1281,9 +1281,26 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/C - Peak usage + + + Peak usage tooltip +