fix: apply translation to unit and description fields (#4086)

Co-authored-by: Vivek Domadiya <Vivek.Domadiya@ibm.com>

Author: vivekdomadiya

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

@@ -488,7 +488,7 @@ const DataSeriesFormItemModal = ({
                       unit: evt.target.value,
                     })
                   }
-                  value={editDataItem.unit}
+                  value={getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)}
                 />
               </div>
             )}

packages/react/src/components/CardEditor/CardEditForm/CommonCardEditFormFields.jsx

@@ -185,7 +185,7 @@ const CommonCardEditFormFields = ({
           labelText={mergedI18n.description}
           light
           onChange={(evt) => onChange({ ...cardConfig, description: evt.target.value })}
-          value={description}
+          value={getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)}
         />
       </div>
       <div className={`${baseClassName}--input`}>

packages/react/src/components/ValueCard/Attribute.jsx

@@ -125,6 +125,7 @@ const Attribute = ({
 
   // Get translated label if shouldUseTranslatedLabels is true
   const displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+  const displayUnitLabel = getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
 
   // Render threshold icon component
   const renderThresholdIcon = () => {
@@ -192,7 +193,7 @@ const Attribute = ({
         />
         <div className={`${BEM_BASE}-unit-with-icon`}>
           {thresholdsIconPosition === 'unit' && renderThresholdIcon()}
-          <UnitRenderer unit={measurementUnitLabel || unit} testId={`${testId}-unit`} />
+          <UnitRenderer unit={measurementUnitLabel || displayUnitLabel} testId={`${testId}-unit`} />
         </div>
       </div>
       {!isNil(secondaryValue) ? (