carbon-addons-iot-react 4.3.5 → 4.4.0

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');
@@ -306,6 +307,8 @@ var propTypes = {
     abbreviateNumbersTooltip: PropTypes__default.default.string,
     editDataItems: PropTypes__default.default.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default.default.bool,
   /** locale data */
   locale: PropTypes__default.default.string,
   /** optional link href's for each card type that will appear in a tooltip */
@@ -396,6 +399,7 @@ var defaultProps = {
     saveTitleButton: 'Save title',
     editDataItems: 'Edit data items'
   },
+  shouldUseTranslatedLabels: false,
   locale: 'en',
   dataSeriesItemLinks: null,
   onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -465,6 +469,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,
@@ -721,7 +726,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() {
@@ -805,6 +810,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       key: cardConfig.id,
       isResizable: isCardResizable,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       isSelected: isSelected,
       availableDimensions: availableDimensions,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -849,6 +855,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     getValidDimensions: getValidDimensions,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -1771,6 +1778,17 @@ DashboardEditor.__docgenInfo = {
       },
       "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'",

package/lib/components/DashboardEditor/DashboardEditorCardRenderer.js

@@ -37,7 +37,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var update__default = /*#__PURE__*/_interopDefault(update);
 
 var _excluded = ["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(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(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__default.default(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; }
 
@@ -109,6 +109,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.default.memo(funct
     baseClassName = _ref2.baseClassName,
     renderCardPreview = _ref2.renderCardPreview,
     style = _ref2.style,
+    shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
     cardConfig = _objectWithoutProperties__default.default(_ref2, _excluded2);
   // We have to keep track of our dynamic hotspots here
   var _useState5 = React.useState([]),
@@ -142,6 +143,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.default.memo(funct
       key: cardConfig.id,
       tooltip: cardConfig.description,
       i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       availableActions: availableActions,
       onCardAction: handleOnCardAction,
       renderIconByName: renderIconByName,
@@ -154,7 +156,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.default.memo(funct
       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;
     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) {

package/lib/components/ValueCard/Attribute.js

@@ -13,6 +13,7 @@ var LayoutConstants = require('../../constants/LayoutConstants.js');
 var CardIcon = require('../ImageCard/CardIcon.js');
 var useMatchingThreshold = require('../../hooks/useMatchingThreshold.js');
 var index = require('../Tooltip/index.js');
+var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
 var ValueRenderer = require('./ValueRenderer.js');
 var UnitRenderer = require('./UnitRenderer.js');
 var valueCardUtils = require('./valueCardUtils.js');
@@ -45,6 +46,9 @@ 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 */
   secondaryValue: PropTypes__default.default.shape({
@@ -72,6 +76,8 @@ var defaultProps = {
   locale: 'en',
   customFormatter: null,
   isEditable: false,
+  shouldUseTranslatedLabels: false,
+  i18n: {},
   testId: 'attribute',
   onValueClick: null
 };
@@ -95,6 +101,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,
@@ -113,6 +121,9 @@ var Attribute = function Attribute(_ref) {
 
   // 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;
+
+  // Get translated label if shouldUseTranslatedLabels is true
+  var displayLabel = cardUtilityFunctions.getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: classnames__default.default("".concat(BEM_BASE, "-wrapper"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(BEM_BASE, "-wrapper--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL), "".concat(BEM_BASE, "-wrapper--horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL)),
     style: {
@@ -132,10 +143,10 @@ var Attribute = function Attribute(_ref) {
   }) : null, tooltip ? /*#__PURE__*/React__default.default.createElement(index.Tooltip, {
     direction: "right",
     showIcon: false,
-    triggerText: label
+    triggerText: displayLabel
   }, /*#__PURE__*/React__default.default.createElement("p", null, tooltip)) : /*#__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,
@@ -311,6 +322,31 @@ Attribute.__docgenInfo = {
       },
       "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'",

package/lib/components/ValueCard/ValueCard.js

@@ -30,7 +30,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className"];
+var _excluded = ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "className", "shouldUseTranslatedLabels"];
 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(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__default.default(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; }
 
@@ -59,6 +59,7 @@ var ValueCard = function ValueCard(_ref) {
     testId = _ref.testId,
     onAttributeClick = _ref.onAttributeClick,
     className = _ref.className,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     others = _objectWithoutProperties__default.default(_ref, _excluded);
   var availableActions = _objectSpread({
     expand: false
@@ -83,6 +84,7 @@ var ValueCard = function ValueCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     locale: locale,
     id: id,
     className: classnames__default.default(className, _defineProperty__default.default(_defineProperty__default.default({}, "".concat(valueCardUtils.BASE_CLASS_NAME, "__horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL), "".concat(valueCardUtils.BASE_CLASS_NAME, "__vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL))
@@ -103,7 +105,9 @@ var ValueCard = function ValueCard(_ref) {
     values: values,
     isEditable: isEditable,
     fontSize: fontSize,
-    isNumberValueCompact: isNumberValueCompact
+    isNumberValueCompact: isNumberValueCompact,
+    i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels
   }, others)), resizeHandles);
 };
 ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes.CardPropTypes), CardPropTypes.ValueContentPropTypes);
@@ -119,7 +123,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",
@@ -195,6 +200,13 @@ ValueCard.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/lib/components/ValueCard/ValueContent.js

@@ -30,7 +30,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-var _excluded = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"];
+var _excluded = ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "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(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__default.default(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 = _objectSpread({
@@ -38,7 +38,9 @@ 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 = {
   id: 'valueContent-id',
@@ -46,6 +48,7 @@ var defaultProps = {
   layout: 'VERTICAL',
   locale: 'en',
   isEditable: false,
+  shouldUseTranslatedLabels: false,
   dataState: null,
   values: null,
   fontSize: valueCardUtils.DEFAULT_FONT_SIZE,
@@ -64,6 +67,7 @@ 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,
@@ -83,6 +87,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), {}, {
@@ -170,6 +176,17 @@ ValueContent.__docgenInfo = {
       },
       "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",

package/lib/constants/CardPropTypes.js

@@ -172,6 +172,8 @@ 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 */
   defaultDateFormatPattern: PropTypes__default.default.string

package/lib/utils/cardUtilityFunctions.js

@@ -6,6 +6,7 @@ var _typeof = require('@babel/runtime/helpers/typeof');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var mapValues = require('../packages/react/node_modules/lodash-es/mapValues.js');
 var isNil = require('../packages/react/node_modules/lodash-es/isNil.js');
+var isEmpty = require('../packages/react/node_modules/lodash-es/isEmpty.js');
 require('core-js/modules/es.symbol.js');
 require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.filter.js');
@@ -584,6 +585,20 @@ var isTimeBasedCard = function isTimeBasedCard(card) {
   })) || ((_card$content2 = card.content) === null || _card$content2 === void 0 ? void 0 : _card$content2.type) === LayoutConstants.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) === LayoutConstants.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;
+};
+
 exports.chartValueFormatter = chartValueFormatter;
 exports.compareGrains = compareGrains;
 exports.determineCardRange = determineCardRange;
@@ -594,6 +609,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

@@ -344,7 +344,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "4.3.5",
+  "version": "4.4.0",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",