feat: add tooltip to the tablecard column

fixes: https://jsw.ibm.com/browse/MASMON-1704
carbon-design-system · Jun 24, 2024 · 3f4f934 · 3f4f934
1 parent 5800802
commit 3f4f934
Show file tree

Hide file tree

Showing 10 changed files with 268 additions and 55 deletions.
diff --git a/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx b/...eact/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 = ({
             />
           </div>
 
-          {(type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR) && ( // show color selector
+          {hasColorDropdown && ( // show color selector
             <div className={`${baseClassName}--input-group--item`}>
               <ColorDropdown
                 id={`${id}_color-dropdown`}
@@ -449,47 +474,68 @@ const DataSeriesFormItemModal = ({
               />
             </div>
           )}
-        </div>
 
-        {(type === CARD_TYPES.VALUE || type === CARD_TYPES.IMAGE) && (
-          <div className={`${baseClassName}--input-group`}>
+          {hasTooltip && (
             <div className={`${baseClassName}--input-group--item`}>
               <TextInput
-                id={`${id}_attribute-unit`}
-                labelText={mergedI18n.dataItemEditorDataItemUnit}
+                id={`${id}_attribute-tooltip`}
+                labelText={mergedI18n.dataItemEditorDataItemTooltip}
                 light
-                placeholder={`${mergedI18n.example}: %`}
                 onChange={(evt) =>
                   setEditDataItem({
                     ...editDataItem,
-                    unit: evt.target.value,
+                    tooltip: evt.target.value,
                   })
                 }
-                value={editDataItem.unit}
+                value={editDataItem.tooltip}
               />
             </div>
-            <div className={`${baseClassName}--input-group--item-end`}>
-              <Dropdown
-                id={`${id}_value-card-decimal-place`}
-                titleText={mergedI18n.decimalPlacesLabel}
-                direction="bottom"
-                label=""
-                items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
-                light
-                selectedItem={editDataItem.precision?.toString() || mergedI18n.notSet}
-                onChange={({ selectedItem }) => {
-                  const isSet = selectedItem !== mergedI18n.notSet;
-                  if (isSet) {
+          )}
+        </div>
+
+        {(hasUnit || hasDecimalPlacesDropdown) && (
+          <div className={`${baseClassName}--input-group`}>
+            {hasUnit && (
+              <div className={`${baseClassName}--input-group--item`}>
+                <TextInput
+                  id={`${id}_attribute-unit`}
+                  labelText={mergedI18n.dataItemEditorDataItemUnit}
+                  light
+                  placeholder={`${mergedI18n.example}: %`}
+                  onChange={(evt) =>
                     setEditDataItem({
                       ...editDataItem,
-                      precision: Number(selectedItem),
-                    });
-                  } else {
-                    setEditDataItem(omit(editDataItem, 'precision'));
+                      unit: evt.target.value,
+                    })
                   }
-                }}
-              />
-            </div>
+                  value={editDataItem.unit}
+                />
+              </div>
+            )}
+            {hasDecimalPlacesDropdown && (
+              <div className={`${baseClassName}--input-group--item-end`}>
+                <Dropdown
+                  id={`${id}_value-card-decimal-place`}
+                  titleText={mergedI18n.decimalPlacesLabel}
+                  direction="bottom"
+                  label=""
+                  items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
+                  light
+                  selectedItem={editDataItem.precision?.toString() || mergedI18n.notSet}
+                  onChange={({ selectedItem }) => {
+                    const isSet = selectedItem !== mergedI18n.notSet;
+                    if (isSet) {
+                      setEditDataItem({
+                        ...editDataItem,
+                        precision: Number(selectedItem),
+                      });
+                    } else {
+                      setEditDataItem(omit(editDataItem, 'precision'));
+                    }
+                  }}
+                />
+              </div>
+            )}
           </div>
         )}
 
@@ -560,7 +606,7 @@ const DataSeriesFormItemModal = ({
             </div>
           )}
 
-        {(type === CARD_TYPES.VALUE || type === CARD_TYPES.IMAGE || type === CARD_TYPES.TABLE) && (
+        {hasThresholds && (
           <ThresholdsFormItem
             id={`${id}_thresholds`}
             i18n={mergedI18n}
@@ -586,7 +632,12 @@ const DataSeriesFormItemModal = ({
       editDataItem,
       handleTranslation,
       hasAggregationsDropDown,
+      hasColorDropdown,
       hasDataFilterDropdown,
+      hasDecimalPlacesDropdown,
+      hasThresholds,
+      hasTooltip,
+      hasUnit,
       id,
       initialAggregation,
       initialGrain,

diff --git a/...src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.test.jsx b/...src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.test.jsx
@@ -171,6 +171,13 @@ describe('DataSeriesFormItemModal', () => {
         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(
+      <DataSeriesFormItemModal
+        {...commonProps}
+        showEditor
+        cardConfig={valueCardConfig}
+        editDataItem={editTimeseriesDataItem}
+        editDataSeries={editDataSeriesTimeSeries}
+        options={undefined}
+      />
+    );
+
+    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(
       <DataSeriesFormItemModal

diff --git a/...s/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/...s/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx
@@ -275,6 +275,7 @@ const DataSeriesFormItem = ({
   const [removedDataItems, setRemovedDataItems] = useState([]);
 
   const canMultiSelectDataItems = cardConfig.content?.type !== BAR_CHART_TYPES.SIMPLE;
+  const { type } = cardConfig;
 
   // determine which content section to look at
   const dataSection =
@@ -467,6 +468,13 @@ const DataSeriesFormItem = ({
         onChange={onChange}
         i18n={mergedI18n}
         actions={actions}
+        options={{
+          hasColorDropdown: type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR,
+          hasUnit: type === CARD_TYPES.VALUE,
+          hasDecimalPlacesDropdown: type === CARD_TYPES.VALUE,
+          hasThresholds: type === CARD_TYPES.VALUE,
+          hasTooltip: type === CARD_TYPES.VALUE,
+        }}
       />
       <ContentFormItemTitle
         title={mergedI18n.dataItemEditorSectionTitle}

diff --git a/...nts/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx b/...nts/CardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.jsx
@@ -386,6 +386,13 @@ const TableCardFormContent = ({
         onChange={handleDataItemModalChanges}
         i18n={mergedI18n}
         actions={actions}
+        options={{
+          hasColorDropdown: false,
+          hasUnit: false,
+          hasDecimalPlacesDropdown: false,
+          hasThresholds: true,
+          hasTooltip: true,
+        }}
       />
       <ContentFormItemTitle
         title={mergedI18n.tableColumnEditorSectionTitle}

diff --git a/...c/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx b/...c/components/HotspotEditorModal/HotspotEditorDataSourceTab/HotspotEditorDataSourceTab.jsx
@@ -203,6 +203,13 @@ const HotspotEditorDataSourceTab = ({
         onChange={onChange}
         i18n={mergedI18n}
         actions={actions}
+        options={{
+          hasColorDropdown: false,
+          hasUnit: true,
+          hasDecimalPlacesDropdown: true,
+          hasThresholds: true,
+          hasTooltip: false,
+        }}
       />
       <div className={`${baseClassName}--input`}>
         <MultiSelect