Merge pull request #1929 from carbon-design-system/value-card-precision-editor

fix(editor): value cards need to set precision at the attribute level

Author: kodiakhq[bot]

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx

@@ -115,6 +115,8 @@ const defaultProps = {
     source: 'Source data item',
     primaryButtonLabelText: 'Save',
     secondaryButtonLabelText: 'Cancel',
+    example: 'Example',
+    decimalPlaces: 'Decimal places',
   },
   editDataSeries: [],
   showEditor: false,
@@ -273,11 +275,14 @@ const DataSeriesFormItemModal = ({
             value={editDataItem.label}
           />
         </div>
-        <div className={`${baseClassName}--input-group--item-end`}>
+      </div>
+      <div className={`${baseClassName}--input-group`}>
+        <div className={`${baseClassName}--input-group--item`}>
           <TextInput
             id={`${id}_attribute-unit`}
             labelText={mergedI18n.dataItemEditorDataItemUnit}
             light
+            placeholder={`${mergedI18n.example}: %`}
             onChange={(evt) =>
               setEditDataItem({
                 ...editDataItem,
@@ -287,6 +292,33 @@ const DataSeriesFormItemModal = ({
             value={editDataItem.unit}
           />
         </div>
+        {cardConfig.type === CARD_TYPES.VALUE && (
+          <div className={`${baseClassName}--input-group--item-end`}>
+            <Dropdown
+              id={`${id}_value-card-decimal-place`}
+              titleText={mergedI18n.decimalPlaces}
+              direction="bottom"
+              label=""
+              items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
+              light
+              translateWithId={handleTranslation}
+              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>
       <div className={`${baseClassName}--input-group`}>
         <div

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.test.jsx

@@ -48,12 +48,14 @@ describe('DataSeriesFormItemModal', () => {
         {
           dataSourceId: 'key1',
           unit: '%',
+          precision: 3,
           label: 'Key 1',
         },
         {
           dataSourceId: 'key2',
           unit: 'lb',
           label: 'Key 2',
+          precision: 3,
         },
       ],
     },
@@ -76,6 +78,7 @@ describe('DataSeriesFormItemModal', () => {
   const editValueDataItem = {
     dataSourceId: 'key1',
     unit: '%',
+    precision: 3,
     label: 'Key 1',
   };
 
@@ -144,6 +147,7 @@ describe('DataSeriesFormItemModal', () => {
     expect(mockSetEditDataItem).toHaveBeenCalledWith({
       dataSourceId: 'key1',
       label: 'newLabel',
+      precision: 3,
       unit: '%',
     });
   });
@@ -166,9 +170,36 @@ describe('DataSeriesFormItemModal', () => {
     expect(mockSetEditDataItem).toHaveBeenCalledWith({
       dataSourceId: 'key1',
       label: 'Key 1',
+      precision: 3,
       unit: 'PSI',
     });
   });
+  it('changes precision in a valueCard', () => {
+    render(
+      <DataSeriesFormItemModal
+        {...commonProps}
+        showEditor
+        cardConfig={valueCardConfig}
+        editDataItem={editValueDataItem}
+      />
+    );
+
+    const precisionInput = screen.getByText('3');
+    expect(precisionInput).toBeInTheDocument();
+    fireEvent.click(precisionInput);
+
+    const precisionOption = screen.getByText('4');
+    expect(precisionOption).toBeInTheDocument();
+
+    fireEvent.click(precisionOption);
+
+    expect(mockSetEditDataItem).toHaveBeenCalledWith({
+      dataSourceId: 'key1',
+      unit: '%',
+      precision: 4,
+      label: 'Key 1',
+    });
+  });
   it('Changes dataFilter in a ValueCard', () => {
     render(
       <DataSeriesFormItemModal
@@ -195,6 +226,7 @@ describe('DataSeriesFormItemModal', () => {
       },
       dataSourceId: 'key1',
       label: 'Key 1',
+      precision: 3,
       unit: '%',
     });
   });
@@ -210,6 +242,7 @@ describe('DataSeriesFormItemModal', () => {
           },
           dataSourceId: 'key1',
           label: 'Key 1',
+          precision: 3,
           unit: '%',
         }}
       />
@@ -231,6 +264,7 @@ describe('DataSeriesFormItemModal', () => {
       },
       dataSourceId: 'key1',
       label: 'Key 1',
+      precision: 3,
       unit: '%',
     });
   });

src/components/CardEditor/CardEditForm/CardEditFormItems/ValueCardFormItems/ValueCardFormSettings.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 
 import { settings } from '../../../../../constants/Settings';
-import { NumberInput, Dropdown } from '../../../../../index';
+import { NumberInput } from '../../../../../index';
 
 const { iotPrefix } = settings;
 
@@ -39,8 +38,6 @@ const propTypes = {
     precisionLabel: PropTypes.string,
     notSet: PropTypes.string,
   }),
-  /** Callback function to translate common ids */
-  translateWithId: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -52,12 +49,7 @@ const defaultProps = {
   },
 };
 
-const ValueCardFormSettings = ({
-  cardConfig,
-  onChange,
-  i18n,
-  translateWithId,
-}) => {
+const ValueCardFormSettings = ({ cardConfig, onChange, i18n }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
   const { content, id } = cardConfig;
 
@@ -85,37 +77,6 @@ const ValueCardFormSettings = ({
           }
         />
       </div>
-      <div className={`${baseClassName}--input`}>
-        <Dropdown
-          id={`${id}_value-card-decimal-place`}
-          titleText={mergedI18n.precisionLabel}
-          direction="bottom"
-          label=""
-          items={[mergedI18n.notSet, '0', '1', '2', '3', '4']}
-          light
-          translateWithId={translateWithId}
-          selectedItem={content?.precision?.toString() || mergedI18n.notSet}
-          onChange={({ selectedItem }) => {
-            const isSet = selectedItem !== mergedI18n.notSet;
-            if (isSet) {
-              onChange({
-                ...cardConfig,
-                content: {
-                  ...content,
-                  precision: Number(selectedItem),
-                },
-              });
-            } else {
-              onChange({
-                ...cardConfig,
-                content: {
-                  ...omit(content, 'precision'),
-                },
-              });
-            }
-          }}
-        />
-      </div>
     </>
   );
 };

src/components/CardEditor/CardEditForm/CardEditFormItems/ValueCardFormItems/ValueCardFormSettings.test.jsx

@@ -22,7 +22,6 @@ const valueCardConfig = {
       },
     ],
     fontSize: 16,
-    precision: 5,
   },
 };
 
@@ -60,7 +59,6 @@ describe('Value form fields', () => {
           },
         ],
         fontSize: 30,
-        precision: 5,
       },
       id: 'Standard',
       size: 'MEDIUM',
@@ -85,45 +83,6 @@ describe('Value form fields', () => {
     const invalidText = screen.getByText('Provide invalidText');
     expect(invalidText).toBeInTheDocument();
   });
-  it('should update JSON for the precision', () => {
-    render(
-      <ValueCardFormSettings
-        cardConfig={valueCardConfig}
-        onChange={mockOnChange}
-      />
-    );
-    const precisionInput = screen.getByText('5');
-    expect(precisionInput).toBeInTheDocument();
-
-    fireEvent.click(precisionInput);
-    const precisionOption = screen.getByText('3');
-    expect(precisionOption).toBeInTheDocument();
-
-    fireEvent.click(precisionOption);
-
-    expect(mockOnChange).toHaveBeenCalledWith({
-      content: {
-        attributes: [
-          {
-            dataSourceId: 'key1',
-            label: 'Key 1',
-            unit: '%',
-          },
-          {
-            dataSourceId: 'key2',
-            label: 'Key 2',
-            unit: 'lb',
-          },
-        ],
-        fontSize: 16,
-        precision: 3,
-      },
-      id: 'Standard',
-      size: 'MEDIUM',
-      title: 'value card',
-      type: 'VALUE',
-    });
-  });
   it('should handle undefined content', () => {
     render(
       <ValueCardFormSettings
@@ -138,7 +97,5 @@ describe('Value form fields', () => {
     );
     const fontSizeInput = screen.getByText('Font size');
     expect(fontSizeInput).toBeInTheDocument();
-    const precisionInput = screen.getByText('Precision');
-    expect(precisionInput).toBeInTheDocument();
   });
 });