carbon-addons-iot-react 2.155.13 → 2.156.1

package/lib/components/DashboardEditor/DashboardEditor.js

@@ -29,6 +29,7 @@ var LayoutConstants = require('../../constants/LayoutConstants.js');
 var DashboardGrid = require('../Dashboard/DashboardGrid.js');
 var CardEditor = require('../CardEditor/CardEditor.js');
 var ImageGalleryModal = require('../ImageGalleryModal/ImageGalleryModal.js');
+var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var DashboardEditorHeader = require('./DashboardEditorHeader/DashboardEditorHeader.js');
 var DashboardEditorCardRenderer = require('./DashboardEditorCardRenderer.js');
 var editorUtils = require('./editorUtils.js');
@@ -346,6 +347,9 @@ var propTypes = {
     editDataItems: PropTypes__default["default"].string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
   /** locale data */
   locale: PropTypes__default["default"].string,
 
@@ -439,6 +443,7 @@ var defaultProps = {
     saveTitleButton: 'Save title',
     editDataItems: 'Edit data items'
   },
+  shouldUseTranslatedLabels: false,
   locale: 'en',
   dataSeriesItemLinks: null,
   onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -517,6 +522,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       isSummaryDashboard = _ref.isSummaryDashboard,
       isLoading = _ref.isLoading,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       locale = _ref.locale,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       isTitleEditable = _ref.isTitleEditable,
@@ -783,7 +789,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     className: classnames__default["default"]("".concat(baseClassName, "--content"), _defineProperty__default["default"]({}, "".concat(baseClassName, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
     ref: scrollContainerRef
   }, renderHeader ? renderHeader() : /*#__PURE__*/React__default["default"].createElement(DashboardEditorHeader, {
-    title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+    title: cardUtilityFunctions.getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
     breadcrumbs: headerBreadcrumbs,
     onImport: onImport,
     onExport: function onExport() {
@@ -867,6 +873,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       key: cardConfig.id,
       isResizable: isCardResizable,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       isSelected: isSelected,
       availableDimensions: availableDimensions,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -911,6 +918,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     getValidDimensions: getValidDimensions,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -1834,6 +1842,17 @@ DashboardEditor.__docgenInfo = {
       "required": false,
       "description": "internationalization strings"
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "locale": {
       "defaultValue": {
         "value": "'en'",

package/lib/components/DashboardEditor/DashboardEditorCardRenderer.js

@@ -113,7 +113,8 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default["default"].memo(fu
       baseClassName = _ref2.baseClassName,
       renderCardPreview = _ref2.renderCardPreview,
       style = _ref2.style,
-      cardConfig = _objectWithoutProperties__default["default"](_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"]);
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
+      cardConfig = _objectWithoutProperties__default["default"](_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"]);
 
   // We have to keep track of our dynamic hotspots here
   var _useState5 = React.useState([]),
@@ -148,6 +149,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default["default"].memo(fu
       key: cardConfig.id,
       tooltip: cardConfig.description,
       i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       availableActions: availableActions,
       onCardAction: handleOnCardAction,
       renderIconByName: renderIconByName,
@@ -160,7 +162,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default["default"].memo(fu
       onBrowseClick: cardConfig.type === LayoutConstants.CARD_TYPES.IMAGE && isNil((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.src) ? onShowImageGallery : undefined,
       validateUploadedImage: cardConfig.type === LayoutConstants.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.useEffect(function () {
     var _cardProps$values, _cardProps$values$hot;
 

package/lib/components/ValueCard/Attribute.js

@@ -13,6 +13,7 @@ var carbonComponentsReact = require('carbon-components-react');
 var LayoutConstants = require('../../constants/LayoutConstants.js');
 var CardIcon = require('../ImageCard/CardIcon.js');
 var useMatchingThreshold = require('../../hooks/useMatchingThreshold.js');
+var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var ValueRenderer = require('./ValueRenderer.js');
 var UnitRenderer = require('./UnitRenderer.js');
 var valueCardUtils = require('./valueCardUtils.js');
@@ -44,6 +45,10 @@ var propTypes = {
   isEditable: PropTypes__default["default"].bool,
   layout: PropTypes__default["default"].oneOf(Object.values(LayoutConstants.CARD_LAYOUTS)),
   locale: PropTypes__default["default"].string,
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+  i18n: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
   renderIconByName: PropTypes__default["default"].func,
 
   /** Optional trend information */
@@ -75,6 +80,8 @@ var defaultProps = {
   locale: 'en',
   customFormatter: null,
   isEditable: false,
+  shouldUseTranslatedLabels: false,
+  i18n: {},
   testId: 'attribute',
   onValueClick: null
 };
@@ -100,6 +107,8 @@ var Attribute = function Attribute(_ref) {
       isEditable = _ref.isEditable,
       layout = _ref.layout,
       locale = _ref.locale,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      i18n = _ref.i18n,
       renderIconByName = _ref.renderIconByName,
       secondaryValue = _ref.secondaryValue,
       value = _ref.value,
@@ -115,7 +124,10 @@ var Attribute = function Attribute(_ref) {
   var matchingThreshold = thresholds ? isEditable ? thresholds[0] : matchedThreshold : null;
   var valueColor = matchingThreshold && matchingThreshold.icon === undefined ? matchingThreshold.color : null; // need to reduce the width size to fit multiple attributes when card layout is horizontal
 
-  var attributeWidthPercentage = layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
+  var attributeWidthPercentage = layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100; // Get translated label if shouldUseTranslatedLabels is true
+
+  var displayLabel = cardUtilityFunctions.getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+  var displayUnitLabel = cardUtilityFunctions.getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("".concat(BEM_BASE, "-wrapper"), (_classnames = {}, _defineProperty__default["default"](_classnames, "".concat(BEM_BASE, "-wrapper--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL), _defineProperty__default["default"](_classnames, "".concat(BEM_BASE, "-wrapper--horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL), _classnames)),
     style: {
@@ -135,9 +147,9 @@ var Attribute = function Attribute(_ref) {
   }) : null, tooltip ? /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.TooltipDefinition, {
     direction: "right",
     tooltipText: tooltip
-  }, label) : /*#__PURE__*/React__default["default"].createElement("span", {
+  }, displayLabel) : /*#__PURE__*/React__default["default"].createElement("span", {
     "data-testid": "".concat(testId, "-threshold-label")
-  }, label)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, displayLabel)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(BEM_BASE)
   }, /*#__PURE__*/React__default["default"].createElement(ValueRenderer, {
     value: value,
@@ -153,7 +165,7 @@ var Attribute = function Attribute(_ref) {
     measurementUnitLabel: measurementUnitLabel,
     onClick: onValueClick
   }), /*#__PURE__*/React__default["default"].createElement(UnitRenderer, {
-    unit: unit,
+    unit: displayUnitLabel,
     testId: "".concat(testId, "-unit")
   })), !isNil(secondaryValue) ? /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "".concat(testId, "-secondary-value"),
@@ -314,6 +326,31 @@ Attribute.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
+    "i18n": {
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      },
+      "type": {
+        "name": "objectOf",
+        "value": {
+          "name": "any"
+        }
+      },
+      "required": false,
+      "description": ""
+    },
     "testId": {
       "defaultValue": {
         "value": "'attribute'",

package/lib/components/ValueCard/ValueCard.js

@@ -60,7 +60,8 @@ var ValueCard = function ValueCard(_ref) {
       testID = _ref.testID,
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
-      others = _objectWithoutProperties__default["default"](_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick"]);
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      others = _objectWithoutProperties__default["default"](_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "shouldUseTranslatedLabels"]);
 
   var availableActions = _objectSpread({
     expand: false
@@ -86,6 +87,7 @@ var ValueCard = function ValueCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     locale: locale,
     id: id,
     className: classnames__default["default"]((_classnames = {}, _defineProperty__default["default"](_classnames, "".concat(valueCardUtils.BASE_CLASS_NAME, "__horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL), _defineProperty__default["default"](_classnames, "".concat(valueCardUtils.BASE_CLASS_NAME, "__vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL), _classnames)) // TODO: remove deprecated 'testID' in v3.
@@ -105,7 +107,9 @@ var ValueCard = function ValueCard(_ref) {
     values: values,
     isEditable: isEditable,
     fontSize: fontSize,
-    isNumberValueCompact: isNumberValueCompact
+    isNumberValueCompact: isNumberValueCompact,
+    i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels
   }, others)), resizeHandles);
 };
 
@@ -122,7 +126,8 @@ ValueCard.defaultProps = {
   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",
@@ -198,6 +203,13 @@ ValueCard.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/lib/components/ValueCard/ValueContent.js

@@ -39,7 +39,10 @@ var propTypes = _objectSpread({
   title: PropTypes__default["default"].string,
   layout: PropTypes__default["default"].oneOf(['HORIZONTAL', 'VERTICAL']),
   locale: PropTypes__default["default"].string,
-  isEditable: PropTypes__default["default"].bool
+  isEditable: PropTypes__default["default"].bool,
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool
 }, CardPropTypes.ValueContentPropTypes);
 
 var defaultProps = {
@@ -48,6 +51,7 @@ var defaultProps = {
   layout: 'VERTICAL',
   locale: 'en',
   isEditable: false,
+  shouldUseTranslatedLabels: false,
   dataState: null,
   values: null,
   fontSize: valueCardUtils.DEFAULT_FONT_SIZE,
@@ -67,13 +71,14 @@ var ValueContent = function ValueContent(_ref) {
       dataState = _ref.dataState,
       locale = _ref.locale,
       isEditable = _ref.isEditable,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       customFormatter = _ref.customFormatter,
       fontSize = _ref.fontSize,
       isNumberValueCompact = _ref.isNumberValueCompact,
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
       size = _ref.size,
-      others = _objectWithoutProperties__default["default"](_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
+      others = _objectWithoutProperties__default["default"](_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
 
   var attributeCount = content.attributes.length;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -87,6 +92,8 @@ var ValueContent = function ValueContent(_ref) {
       locale: locale,
       isEditable: isEditable,
       title: title,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
+      i18n: others.i18n,
       renderIconByName: others.renderIconByName,
       value: valueCardUtils.determineValue(attribute.dataSourceId, values, attribute.dataFilter),
       secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
@@ -175,6 +182,17 @@ ValueContent.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "dataState": {
       "defaultValue": {
         "value": "null",

package/lib/constants/CardPropTypes.js

@@ -193,6 +193,9 @@ var TableCardPropTypes = {
     defaultFilterStringPlaceholdText: PropTypes__default["default"].string,
     downloadIconDescription: PropTypes__default["default"].string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
   cardVariables: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].func, PropTypes__default["default"].number, PropTypes__default["default"].bool])),
 
   /** default date format pattern that follows the dayjs formatting patterns */

package/lib/utils/cardUtilityFunctions.js

@@ -11,6 +11,7 @@ var _typeof = require('@babel/runtime/helpers/typeof');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var mapValues = require('../node_modules/lodash-es/mapValues.js');
 var isNil = require('../node_modules/lodash-es/isNil.js');
+var isEmpty = require('../node_modules/lodash-es/isEmpty.js');
 require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.array.concat.js');
@@ -624,6 +625,21 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
   });
   return defaultTooltipDOM.innerHTML;
 };
+/**
+ * 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;
+};
 
 exports.chartValueFormatter = chartValueFormatter;
 exports.compareGrains = compareGrains;
@@ -635,6 +651,7 @@ exports.findMatchingThresholds = findMatchingThresholds;
 exports.formatNumberWithPrecision = formatNumberWithPrecision;
 exports.getCardVariables = getCardVariables;
 exports.getResizeHandles = getResizeHandles;
+exports.getTranslatedLabel = getTranslatedLabel;
 exports.getUpdatedCardSize = getUpdatedCardSize;
 exports.getVariables = getVariables;
 exports.handleCardVariables = handleCardVariables;

package/package.json

@@ -341,11 +341,11 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.155.13",
+  "version": "2.156.1",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",
     "got": "11.8.5"
   },
-  "gitHead": "6637669c306b37812d820a4593366fc422bcbe8d"
+  "gitHead": "7a3b178053896da403e40467ef6f9af352f27202"
 }