carbon-addons-iot-react 5.9.2 → 5.10.1

package/umd/carbon-addons-iot-react.js

@@ -264425,6 +264425,8 @@ ${formatRule(Codicon.menuSubmenu)}
       defaultFilterStringPlaceholdText: PropTypes.string,
       downloadIconDescription: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     cardVariables: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number, PropTypes.bool])),
     /** default date format pattern that follows the dayjs formatting patterns */
     defaultDateFormatPattern: PropTypes.string
@@ -267064,6 +267066,20 @@ ${formatRule(Codicon.menuSubmenu)}
     })) || ((_card$content2 = card.content) === null || _card$content2 === void 0 ? void 0 : _card$content2.type) === BAR_CHART_TYPES.SIMPLE && ((_card$content3 = card.content) === null || _card$content3 === void 0 ? void 0 : _card$content3.timeDataSourceId) || ((_card$content4 = card.content) === null || _card$content4 === void 0 ? void 0 : _card$content4.type) === BAR_CHART_TYPES.STACKED && ((_card$content5 = card.content) === null || _card$content5 === void 0 ? void 0 : _card$content5.timeDataSourceId);
   };
 
+  /**
+   * Get translated label or title from i18n object, fallback to original if not found
+   * @param {string} label - The label or title key to translate
+   * @param {boolean} shouldUseTranslatedLabels - Flag to determine if translation should be used
+   * @param {Object} i18n - The i18n object containing translations
+   * @returns {string} - The translated label or original label if translation not found
+   */
+  var getTranslatedLabel = function getTranslatedLabel(label, shouldUseTranslatedLabels, i18n) {
+    if (!isEmpty(label) && shouldUseTranslatedLabels && i18n && i18n[label]) {
+      return i18n[label];
+    }
+    return label;
+  };
+
   var REPLACE = wellKnownSymbol('replace');
   var $TypeError = TypeError;
   var indexOf = functionUncurryThis(''.indexOf);
@@ -268368,7 +268384,7 @@ ${formatRule(Codicon.menuSubmenu)}
   };
 
   var _excluded$F = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-    _excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent"];
+    _excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "shouldUseTranslatedLabels"];
   function ownKeys$1p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var prefix$l = settings.prefix,
@@ -268584,7 +268600,8 @@ ${formatRule(Codicon.menuSubmenu)}
     overrides: undefined,
     type: null,
     data: null,
-    content: null
+    content: null,
+    shouldUseTranslatedLabels: false
   };
 
   /** Dumb component that renders the card basics */
@@ -268592,7 +268609,7 @@ ${formatRule(Codicon.menuSubmenu)}
     var _overrides$errorMessa, _overrides$errorMessa2, _overrides$errorMessa3;
     var size = props.size,
       children = props.children,
-      title = props.title,
+      titleProp = props.title,
       subtitleProp = props.subtitle,
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
@@ -268606,7 +268623,7 @@ ${formatRule(Codicon.menuSubmenu)}
       error = props.error,
       hideHeader = props.hideHeader,
       id = props.id,
-      tooltip = props.tooltip,
+      tooltipProp = props.tooltip,
       titleTextTooltip = props.titleTextTooltip,
       timeRange = props.timeRange,
       timeRangeOptions = props.timeRangeOptions,
@@ -268631,8 +268648,13 @@ ${formatRule(Codicon.menuSubmenu)}
       data = props.data,
       content = props.content,
       extraHeaderContent = props.extraHeaderContent,
+      shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
       others = _objectWithoutProperties$3(props, _excluded2$4);
 
+    // Get translated title if shouldUseTranslatedLabels is true
+    var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+    var tooltip = getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n);
+
     // TODO: remove once final version of range prop is supported
     React$1.useEffect(function () {
       if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
@@ -269120,6 +269142,13 @@ ${formatRule(Codicon.menuSubmenu)}
           "computed": false
         },
         "required": false
+      },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "required": false
       }
     },
     "composes": ["../../constants/CardPropTypes"]
@@ -295936,6 +295965,9 @@ ${formatRule(Codicon.menuSubmenu)}
     isEditable: PropTypes.bool,
     layout: PropTypes.oneOf(Object.values(CARD_LAYOUTS)),
     locale: PropTypes.string,
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
+    i18n: PropTypes.objectOf(PropTypes.any),
     renderIconByName: PropTypes.func,
     /** Optional trend information */
     secondaryValue: PropTypes.shape({
@@ -295964,6 +295996,8 @@ ${formatRule(Codicon.menuSubmenu)}
     customFormatter: null,
     formatter: null,
     isEditable: false,
+    shouldUseTranslatedLabels: false,
+    i18n: {},
     testId: 'attribute',
     onValueClick: null
   };
@@ -295990,6 +296024,8 @@ ${formatRule(Codicon.menuSubmenu)}
       isEditable = _ref.isEditable,
       layout = _ref.layout,
       locale = _ref.locale,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      i18n = _ref.i18n,
       renderIconByName = _ref.renderIconByName,
       secondaryValue = _ref.secondaryValue,
       value = _ref.value,
@@ -296009,6 +296045,10 @@ ${formatRule(Codicon.menuSubmenu)}
     // need to reduce the width size to fit multiple attributes when card layout is horizontal
     var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
 
+    // Get translated label if shouldUseTranslatedLabels is true
+    var displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+    var displayUnitLabel = getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
+
     // Render threshold icon component
     var renderThresholdIcon = function renderThresholdIcon() {
       if (!(matchingThreshold !== null && matchingThreshold !== void 0 && matchingThreshold.icon)) return null;
@@ -296034,10 +296074,10 @@ ${formatRule(Codicon.menuSubmenu)}
     }, thresholdsIconPosition === 'label' && renderThresholdIcon(), tooltip ? /*#__PURE__*/React$1.createElement(Tooltip, {
       direction: "right",
       showIcon: false,
-      triggerText: label
+      triggerText: displayLabel
     }, /*#__PURE__*/React$1.createElement("p", null, tooltip)) : /*#__PURE__*/React$1.createElement("span", {
       "data-testid": "".concat(testId, "-threshold-label")
-    }, label)), /*#__PURE__*/React$1.createElement("div", {
+    }, displayLabel)), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(BEM_BASE)
     }, /*#__PURE__*/React$1.createElement(ValueRenderer$1, {
       value: value,
@@ -296057,7 +296097,7 @@ ${formatRule(Codicon.menuSubmenu)}
     }), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(BEM_BASE, "-unit-with-icon")
     }, thresholdsIconPosition === 'unit' && renderThresholdIcon(), /*#__PURE__*/React$1.createElement(UnitRenderer$1, {
-      unit: measurementUnitLabel || unit,
+      unit: measurementUnitLabel || displayUnitLabel,
       testId: "".concat(testId, "-unit")
     }))), !isNil(secondaryValue) ? /*#__PURE__*/React$1.createElement("div", {
       "data-testid": "".concat(testId, "-secondary-value"),
@@ -296228,6 +296268,31 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
+      "i18n": {
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        },
+        "description": "",
+        "type": {
+          "name": "objectOf",
+          "value": {
+            "name": "any"
+          }
+        },
+        "required": false
+      },
       "testId": {
         "defaultValue": {
           "value": "'attribute'",
@@ -296365,7 +296430,7 @@ ${formatRule(Codicon.menuSubmenu)}
   };
   var Attribute$1 = Attribute;
 
-  var _excluded$q = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "formatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
+  var _excluded$q = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "formatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
   function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var propTypes$15 = _objectSpread$Y({
@@ -296373,7 +296438,9 @@ ${formatRule(Codicon.menuSubmenu)}
     title: PropTypes.string,
     layout: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']),
     locale: PropTypes.string,
-    isEditable: PropTypes.bool
+    isEditable: PropTypes.bool,
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool
   }, ValueContentPropTypes);
   var defaultProps$18 = {
     id: 'valueContent-id',
@@ -296381,6 +296448,7 @@ ${formatRule(Codicon.menuSubmenu)}
     layout: 'VERTICAL',
     locale: 'en',
     isEditable: false,
+    shouldUseTranslatedLabels: false,
     dataState: null,
     values: null,
     fontSize: DEFAULT_FONT_SIZE,
@@ -296400,6 +296468,7 @@ ${formatRule(Codicon.menuSubmenu)}
       dataState = _ref.dataState,
       locale = _ref.locale,
       isEditable = _ref.isEditable,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       customFormatter = _ref.customFormatter,
       formatter = _ref.formatter,
       fontSize = _ref.fontSize,
@@ -296420,6 +296489,8 @@ ${formatRule(Codicon.menuSubmenu)}
         locale: locale,
         isEditable: isEditable,
         title: title,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
+        i18n: others.i18n,
         renderIconByName: others.renderIconByName,
         value: determineValue(attribute.dataSourceId, values, attribute.dataFilter),
         secondaryValue: attribute.secondaryValue && _objectSpread$Y(_objectSpread$Y({}, attribute.secondaryValue), {}, {
@@ -296510,6 +296581,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "dataState": {
         "defaultValue": {
           "value": "null",
@@ -296578,7 +296660,7 @@ ${formatRule(Codicon.menuSubmenu)}
   };
   var ValueContent$1 = ValueContent;
 
-  var _excluded$p = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "formatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className"];
+  var _excluded$p = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "formatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className", "shouldUseTranslatedLabels"];
   function ownKeys$Z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$Z(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$Z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -296608,6 +296690,7 @@ ${formatRule(Codicon.menuSubmenu)}
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
       className = _ref.className,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       others = _objectWithoutProperties$3(_ref, _excluded$p);
     var availableActions = _objectSpread$X({
       expand: false
@@ -296632,6 +296715,7 @@ ${formatRule(Codicon.menuSubmenu)}
       isResizable: isResizable,
       resizeHandles: resizeHandles,
       i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       locale: locale,
       id: id,
       className: classnames(className, _defineProperty$c(_defineProperty$c({}, "".concat(BASE_CLASS_NAME$2, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), "".concat(BASE_CLASS_NAME$2, "__vertical"), layout === CARD_LAYOUTS.VERTICAL))
@@ -296655,7 +296739,9 @@ ${formatRule(Codicon.menuSubmenu)}
       values: values,
       isEditable: isEditable,
       fontSize: fontSize,
-      isNumberValueCompact: isNumberValueCompact
+      isNumberValueCompact: isNumberValueCompact,
+      i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels
     }, others)), resizeHandles);
   };
   ValueCard.propTypes = _objectSpread$X(_objectSpread$X({}, CardPropTypes), ValueContentPropTypes);
@@ -296672,7 +296758,8 @@ ${formatRule(Codicon.menuSubmenu)}
     isNumberValueCompact: false,
     // TODO: fix this default in V3, so that cards are unique not inherited from the base Card
     testId: 'Card',
-    onAttributeClick: null
+    onAttributeClick: null,
+    shouldUseTranslatedLabels: false
   };
   ValueCard.__docgenInfo = {
     "description": "This components responsibilities include:\nRendering the attribute groups\nDetermining the layout\ndetermines the data to render",
@@ -296755,6 +296842,13 @@ ${formatRule(Codicon.menuSubmenu)}
           "computed": false
         },
         "required": false
+      },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "required": false
       }
     },
     "composes": ["../../constants/CardPropTypes"]
@@ -310014,6 +310108,8 @@ ${formatRule(Codicon.menuSubmenu)}
       thisQuarterLabel: PropTypes.string,
       thisYearLabel: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the timeRanges to be allowed
      * on each card
      * getValidTimeRanges(card, selectedDataItems)
@@ -310047,6 +310143,7 @@ ${formatRule(Codicon.menuSubmenu)}
       thisQuarterLabel: 'This quarter',
       thisYearLabel: 'This year'
     },
+    shouldUseTranslatedLabels: false,
     selectedDataItems: [],
     getValidTimeRanges: null,
     currentBreakpoint: 'xl',
@@ -310070,6 +310167,7 @@ ${formatRule(Codicon.menuSubmenu)}
     var cardConfig = _ref.cardConfig,
       _onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       getValidTimeRanges = _ref.getValidTimeRanges,
       currentBreakpoint = _ref.currentBreakpoint,
       selectedDataItems = _ref.selectedDataItems,
@@ -310100,7 +310198,7 @@ ${formatRule(Codicon.menuSubmenu)}
           title: evt.target.value
         }));
       },
-      value: title
+      value: getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
     })), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(baseClassName, "--input")
     }, /*#__PURE__*/React$1.createElement(react.TextArea, {
@@ -310112,7 +310210,7 @@ ${formatRule(Codicon.menuSubmenu)}
           description: evt.target.value
         }));
       },
-      value: description
+      value: getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)
     })), /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(baseClassName, "--input")
     }, /*#__PURE__*/React$1.createElement(react.Dropdown, {
@@ -310393,6 +310491,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "selectedDataItems": {
         "defaultValue": {
           "value": "[]",
@@ -311675,6 +311784,8 @@ ${formatRule(Codicon.menuSubmenu)}
       primaryButtonLabelText: PropTypes.string,
       secondaryButtonLabelText: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     actions: DashboardEditorActionsPropTypes,
     /**
      * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
@@ -311728,6 +311839,7 @@ ${formatRule(Codicon.menuSubmenu)}
       secondaryButtonLabelText: 'Cancel',
       decimalPlacesLabel: 'Decimal places'
     },
+    shouldUseTranslatedLabels: false,
     editDataSeries: [],
     showEditor: false,
     setShowEditor: null,
@@ -311798,6 +311910,7 @@ ${formatRule(Codicon.menuSubmenu)}
       availableDimensions = _ref.availableDimensions,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       isLarge = _ref.isLarge,
       _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
       hasAggregationsDropDown = _ref$actions$dataSeri.hasAggregationsDropDown,
@@ -311954,7 +312067,7 @@ ${formatRule(Codicon.menuSubmenu)}
             label: evt.target.value
           }));
         },
-        value: editDataItem.label,
+        value: getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
         helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
       })), hasColorDropdown &&
       /*#__PURE__*/
@@ -312001,7 +312114,7 @@ ${formatRule(Codicon.menuSubmenu)}
             unit: evt.target.value
           }));
         },
-        value: editDataItem.unit
+        value: getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)
       })), /*#__PURE__*/React$1.createElement("div", {
         className: "".concat(baseClassName, "--input-group--item")
       }, hasDecimalPlacesDropdown && /*#__PURE__*/React$1.createElement(react.Dropdown, {
@@ -312099,7 +312212,7 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         columnType: editDataItem.columnType || editDataItem.type
       }));
-    }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
+    }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, type]);
     return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, showEditor && /*#__PURE__*/React$1.createElement("div", {
       className: "".concat(baseClassName, "--modal-wrapper")
     }, /*#__PURE__*/React$1.createElement(ComposedModal$1, {
@@ -312329,6 +312442,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "editDataSeries": {
         "defaultValue": {
           "value": "[]",
@@ -313286,6 +313410,8 @@ ${formatRule(Codicon.menuSubmenu)}
       incrementNumberText: PropTypes.string,
       decrementNumberText: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     translateWithId: PropTypes.func.isRequired,
     actions: DashboardEditorActionsPropTypes
   };
@@ -313319,6 +313445,7 @@ ${formatRule(Codicon.menuSubmenu)}
       incrementNumberText: 'Increment number',
       decrementNumberText: 'Decrement number'
     },
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     dataItems: [],
     selectedDataItems: [],
@@ -313406,6 +313533,7 @@ ${formatRule(Codicon.menuSubmenu)}
       selectedTimeRange = _ref2.selectedTimeRange,
       availableDimensions = _ref2.availableDimensions,
       i18n = _ref2.i18n,
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
       dataSeriesItemLinks = _ref2.dataSeriesItemLinks,
       translateWithId = _ref2.translateWithId,
       actions = _ref2.actions;
@@ -313551,7 +313679,7 @@ ${formatRule(Codicon.menuSubmenu)}
         return {
           id: dataItem.dataSourceId,
           content: {
-            value: dataItem.label || dataItem.dataItemId,
+            value: getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
             icon: cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? /*#__PURE__*/React$1.createElement("div", {
               className: "".concat(baseClassName$3, "--data-item-list--item-color-icon"),
               style: {
@@ -313588,7 +313716,7 @@ ${formatRule(Codicon.menuSubmenu)}
           }
         };
       })) || [];
-    }, [cardConfig.type, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+    }, [cardConfig.type, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
     var dataItemListItems = React$1.useMemo(function () {
       return generateListItems(dataSection);
     }, [dataSection, generateListItems]);
@@ -313609,6 +313737,7 @@ ${formatRule(Codicon.menuSubmenu)}
       dataSection: dataSection,
       onChange: _onChange,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       actions: actions,
       options: {
         hasColorDropdown: type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR,
@@ -313930,6 +314059,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -319425,6 +319565,8 @@ ${formatRule(Codicon.menuSubmenu)}
       thisQuarterLabel: PropTypes.string,
       thisYearLabel: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the timeRanges to be allowed
      * on each card
      * getValidTimeRanges(card, selectedDataItems)
@@ -319461,6 +319603,7 @@ ${formatRule(Codicon.menuSubmenu)}
   var defaultProps$G = {
     cardConfig: {},
     i18n: {},
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     getValidTimeRanges: null,
     dataItems: [],
@@ -319490,6 +319633,7 @@ ${formatRule(Codicon.menuSubmenu)}
       isSummaryDashboard = _ref.isSummaryDashboard,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       dataItems = _ref.dataItems,
       getValidDataItems = _ref.getValidDataItems,
       getValidTimeRanges = _ref.getValidTimeRanges,
@@ -319524,6 +319668,7 @@ ${formatRule(Codicon.menuSubmenu)}
       ,
       onChange: onChange,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       getValidTimeRanges: getValidTimeRanges,
       currentBreakpoint: currentBreakpoint,
       selectedDataItems: selectedDataItems,
@@ -319570,6 +319715,7 @@ ${formatRule(Codicon.menuSubmenu)}
       getValidDataItems: getValidDataItems,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       dataSeriesItemLinks: dataSeriesItemLinks,
       translateWithId: handleTranslation,
       actions: actions
@@ -319808,6 +319954,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -321799,6 +321956,8 @@ ${formatRule(Codicon.menuSubmenu)}
       modalHelpText: PropTypes.string,
       modalIconDescription: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** if provided, returns an array of strings which are the dataItems to be allowed
      * on each card
      * getValidDataItems(card, selectedTimeRange)
@@ -321860,6 +322019,7 @@ ${formatRule(Codicon.menuSubmenu)}
       modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
       modalIconDescription: 'Close'
     },
+    shouldUseTranslatedLabels: false,
     getValidDataItems: null,
     getValidTimeRanges: null,
     dataItems: [],
@@ -321881,6 +322041,7 @@ ${formatRule(Codicon.menuSubmenu)}
       availableDimensions = _ref.availableDimensions,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       actions = _ref.actions;
     var mergedI18n = React$1.useMemo(function () {
       return _objectSpread$p(_objectSpread$p({}, defaultProps$z.i18n), i18n);
@@ -321897,6 +322058,7 @@ ${formatRule(Codicon.menuSubmenu)}
       onChange: onChange,
       isSummaryDashboard: isSummaryDashboard,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       dataItems: dataItems,
       availableDimensions: availableDimensions,
       getValidDataItems: getValidDataItems,
@@ -322044,6 +322206,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDataItems": {
         "defaultValue": {
           "value": "null",
@@ -322287,6 +322460,8 @@ ${formatRule(Codicon.menuSubmenu)}
       searchPlaceHolderText: PropTypes.string,
       editDataItems: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     currentBreakpoint: PropTypes.string,
     isSummaryDashboard: PropTypes.bool,
     /** Id that can be used for testing */
@@ -322320,6 +322495,7 @@ ${formatRule(Codicon.menuSubmenu)}
       modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
       modalIconDescription: 'Close'
     },
+    shouldUseTranslatedLabels: false,
     getValidDimensions: null,
     getValidDataItems: null,
     getValidTimeRanges: null,
@@ -322465,6 +322641,7 @@ ${formatRule(Codicon.menuSubmenu)}
       onRenderCardEditForm = _ref.onRenderCardEditForm,
       icons = _ref.icons,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       currentBreakpoint = _ref.currentBreakpoint,
       testId = _ref.testId,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
@@ -322530,6 +322707,7 @@ ${formatRule(Codicon.menuSubmenu)}
       getValidTimeRanges: getValidTimeRanges,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       currentBreakpoint: currentBreakpoint,
       dataSeriesItemLinks: dataSeriesItemLinks,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -322695,6 +322873,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "getValidDimensions": {
         "defaultValue": {
           "value": "null",
@@ -323618,7 +323807,7 @@ ${formatRule(Codicon.menuSubmenu)}
   var DashboardEditorDefaultCardRenderer$1 = DashboardEditorDefaultCardRenderer;
 
   var _excluded$c = ["style", "children"],
-    _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"];
+    _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"];
   function ownKeys$m(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty$c(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -323690,6 +323879,7 @@ ${formatRule(Codicon.menuSubmenu)}
       baseClassName = _ref2.baseClassName,
       renderCardPreview = _ref2.renderCardPreview,
       style = _ref2.style,
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
       cardConfig = _objectWithoutProperties$3(_ref2, _excluded2);
     // We have to keep track of our dynamic hotspots here
     var _useState5 = React$1.useState([]),
@@ -323723,6 +323913,7 @@ ${formatRule(Codicon.menuSubmenu)}
         key: cardConfig.id,
         tooltip: cardConfig.description,
         i18n: i18n,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
         availableActions: availableActions,
         onCardAction: handleOnCardAction,
         renderIconByName: renderIconByName,
@@ -323735,7 +323926,7 @@ ${formatRule(Codicon.menuSubmenu)}
         onBrowseClick: cardConfig.type === CARD_TYPES.IMAGE && isNil((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.src) ? onShowImageGallery : undefined,
         validateUploadedImage: cardConfig.type === CARD_TYPES.IMAGE ? onValidateUploadedImage : undefined
       });
-    }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, style]);
+    }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, shouldUseTranslatedLabels, style]);
     React$1.useEffect(function () {
       var _cardProps$values;
       var originalDynamicHotspot = (_cardProps$values = cardProps.values) === null || _cardProps$values === void 0 || (_cardProps$values = _cardProps$values.hotspots) === null || _cardProps$values === void 0 ? void 0 : _cardProps$values.find(function (hotspot) {
@@ -324053,6 +324244,8 @@ ${formatRule(Codicon.menuSubmenu)}
       abbreviateNumbersTooltip: PropTypes.string,
       editDataItems: PropTypes.string
     }),
+    /** whether to use translated labels in cards */
+    shouldUseTranslatedLabels: PropTypes.bool,
     /** locale data */
     locale: PropTypes.string,
     /** optional link href's for each card type that will appear in a tooltip */
@@ -324143,6 +324336,7 @@ ${formatRule(Codicon.menuSubmenu)}
       saveTitleButton: 'Save title',
       editDataItems: 'Edit data items'
     },
+    shouldUseTranslatedLabels: false,
     locale: 'en',
     dataSeriesItemLinks: null,
     onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -324212,6 +324406,7 @@ ${formatRule(Codicon.menuSubmenu)}
       isSummaryDashboard = _ref.isSummaryDashboard,
       isLoading = _ref.isLoading,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       locale = _ref.locale,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       isTitleEditable = _ref.isTitleEditable,
@@ -324468,7 +324663,7 @@ ${formatRule(Codicon.menuSubmenu)}
       className: classnames("".concat(baseClassName$1, "--content"), _defineProperty$c({}, "".concat(baseClassName$1, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
       ref: scrollContainerRef
     }, renderHeader ? renderHeader() : /*#__PURE__*/React$1.createElement(DashboardEditorHeader$1, {
-      title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+      title: getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
       breadcrumbs: headerBreadcrumbs,
       onImport: onImport,
       onExport: function onExport() {
@@ -324552,6 +324747,7 @@ ${formatRule(Codicon.menuSubmenu)}
         key: cardConfig.id,
         isResizable: isCardResizable,
         i18n: mergedI18n,
+        shouldUseTranslatedLabels: shouldUseTranslatedLabels,
         isSelected: isSelected,
         availableDimensions: availableDimensions,
         onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -324596,6 +324792,7 @@ ${formatRule(Codicon.menuSubmenu)}
       getValidDimensions: getValidDimensions,
       availableDimensions: availableDimensions,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       currentBreakpoint: currentBreakpoint,
       dataSeriesItemLinks: dataSeriesItemLinks,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -325518,6 +325715,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "shouldUseTranslatedLabels": {
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        },
+        "description": "whether to use translated labels in cards",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "locale": {
         "defaultValue": {
           "value": "'en'",