fix(locale): ent-4045 threshold graph legend strings (#733)

* locale, threshold strings * graphCardChartLegend, context, string refs * graphCardChartTooltip, context, string refs * productViewOpenShiftContainer, productLabel to product group
RedHatInsights · Jul 26, 2021 · f5cd3a7 · f5cd3a7
1 parent ca59ea8
commit f5cd3a7
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 27 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -55,11 +55,11 @@
     "physicalSocketsLabel": "Physical {{product}}",
     "physicalSocketsLegendTooltip": "{{product}} CPU socket usage, per socket pair.",
     "physicalSocketsLegendTooltip_RHEL": "Physical {{product}} CPU usage, per socket pair. Each system's socket count is rounded upwards to the next even number.",
-    "thresholdLabel": "Subscription threshold",
-    "thresholdLegendTooltip": "Maximum capacity, based on total {{product}} subscriptions in this account.",
-    "thresholdLegendTooltip_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
-    "thresholdCoresLegendTooltip_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} subscriptions in this account.",
-    "thresholdSocketsLegendTooltip_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
+    "label_threshold": "Subscription threshold",
+    "legendTooltip_threshold": "Maximum capacity, based on total {{product}} subscriptions in this account.",
+    "legendTooltip_threshold_thresholdSockets_RHEL": "Maximum capacity, as CPU sockets, based on total {{product}} subscriptions in this account.",
+    "legendTooltip_threshold_thresholdCores_OpenShift Container Platform": "Maximum capacity, as CPU cores, based on total {{product}} Annual subscriptions in this account.",
+    "legendTooltip_threshold_thresholdSockets_OpenShift Container Platform": "Maximum capacity, as CPU sockets, based on total {{product}} Annual subscriptions in this account.",
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
   "curiosity-inventory": {

diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap
@@ -282,7 +282,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.dolorSitLegendTooltip,curiosity-graph.thresholdLegendTooltip, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_threshold, {"product":"test","context":"dolorSit_test"})
       </p>
     }
     distance={5}
@@ -313,13 +313,13 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.dolorSitLabel,curiosity-graph.thresholdLabel, {"product":"test","context":"test"})
+      t(curiosity-graph.label_threshold, {"product":"test","context":"dolorSit_test"})
     </Button>
   </Tooltip>
   <Tooltip
     content={
       <p>
-        t(curiosity-graph.nonCursusLegendTooltip,curiosity-graph.thresholdLegendTooltip, {"product":"test","context":"test"})
+        t(curiosity-graph.legendTooltip_threshold, {"product":"test","context":"nonCursus_test"})
       </p>
     }
     distance={5}
@@ -350,7 +350,7 @@ exports[`GraphCardChartLegend Component should render basic data: data 1`] = `
       tabIndex={0}
       variant="link"
     >
-      t(curiosity-graph.nonCursusLabel,curiosity-graph.thresholdLabel, {"product":"test","context":"test"})
+      t(curiosity-graph.label_threshold, {"product":"test","context":"nonCursus_test"})
     </Button>
   </Tooltip>
 </Fragment>

diff --git a/src/components/graphCard/__tests__/graphCardChartLegend.test.js b/src/components/graphCard/__tests__/graphCardChartLegend.test.js
@@ -51,6 +51,7 @@ describe('GraphCardChartLegend Component', () => {
           }
         ]
       },
+      productId: 'test id',
       productLabel: 'test'
     };
 
@@ -79,6 +80,7 @@ describe('GraphCardChartLegend Component', () => {
       legend: {
         'test-dolorSit': true
       },
+      productId: 'test id',
       productLabel: 'test',
       viewId: 'test'
     };
@@ -119,6 +121,7 @@ describe('GraphCardChartLegend Component', () => {
           }
         ]
       },
+      productId: 'test id',
       productLabel: 'test'
     };
 

diff --git a/src/components/graphCard/graphCardChartLegend.js b/src/components/graphCard/graphCardChartLegend.js
@@ -115,9 +115,9 @@ class GraphCardChartLegend extends React.Component {
 
           const labelContent =
             (isThreshold &&
-              t([`curiosity-graph.${id}Label`, `curiosity-graph.thresholdLabel`], {
+              t('curiosity-graph.label_threshold', {
                 product: productLabel,
-                context: productLabel
+                context: [id, productLabel]
               })) ||
             t([`curiosity-graph.${id}Label`, `curiosity-graph.noLabel`], {
               product: productLabel,
@@ -126,9 +126,9 @@ class GraphCardChartLegend extends React.Component {
 
           const tooltipContent =
             (isThreshold &&
-              t([`curiosity-graph.${id}LegendTooltip`, `curiosity-graph.thresholdLegendTooltip`], {
+              t('curiosity-graph.legendTooltip_threshold', {
                 product: productLabel,
-                context: productLabel
+                context: [id, productLabel]
               })) ||
             t(`curiosity-graph.${id}LegendTooltip`, { product: productLabel, context: productLabel });
 
@@ -149,7 +149,8 @@ class GraphCardChartLegend extends React.Component {
 /**
  * Prop types.
  *
- * @type {{datum, productLabel: string, t: Function, legend: object, chart: object}}
+ * @type {{datum: object, productLabel: string, viewId: string, t: Function, legend: object,
+ *     chart: object}}
  */
 GraphCardChartLegend.propTypes = {
   chart: PropTypes.shape({
@@ -175,8 +176,8 @@ GraphCardChartLegend.propTypes = {
 /**
  * Default props.
  *
- * @type {{datum: {dataSets: Array}, productLabel: string, viewId: string, t: translate, legend: object,
- *     chart: {hide: Function, toggle: Function, isToggled: Function}}}
+ * @type {{datum: object, productLabel: string, viewId: string, t: translate, legend: object,
+ *     chart: object}}
  */
 GraphCardChartLegend.defaultProps = {
   chart: {

diff --git a/src/components/graphCard/graphCardChartTooltip.js b/src/components/graphCard/graphCardChartTooltip.js
@@ -46,7 +46,7 @@ const GraphCardChartTooltip = ({ datum, granularity, productLabel, t }) => {
           }
         }
 
-        tempDataFacet.label = t(`curiosity-graph.thresholdLabel`);
+        tempDataFacet.label = t('curiosity-graph.label', { context: 'threshold' });
         tempDataFacet.value = thresholdStringValue;
       } else {
         const dataFactsValue =

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -57,16 +57,16 @@ Array [
     "file": "./src/components/graphCard/graphCardChartLegend.js",
     "keys": Array [
       Object {
-        "key": "",
-        "match": "t([\`curiosity-graph.\${id}Label\`, \`curiosity-graph.thresholdLabel\`], { product: productLabel, context: productLabel })",
+        "key": "curiosity-graph.label_threshold",
+        "match": "t('curiosity-graph.label_threshold', { product: productLabel, context: [id, productLabel] })",
       },
       Object {
         "key": "",
         "match": "t([\`curiosity-graph.\${id}Label\`, \`curiosity-graph.noLabel\`], { product: productLabel, context: productLabel })",
       },
       Object {
-        "key": "",
-        "match": "t([\`curiosity-graph.\${id}LegendTooltip\`, \`curiosity-graph.thresholdLegendTooltip\`], { product: productLabel, context: productLabel })",
+        "key": "curiosity-graph.legendTooltip_threshold",
+        "match": "t('curiosity-graph.legendTooltip_threshold', { product: productLabel, context: [id, productLabel] })",
       },
       Object {
         "key": "",
@@ -90,8 +90,8 @@ Array [
         "match": "t('curiosity-graph.infiniteThresholdLabel')",
       },
       Object {
-        "key": "curiosity-graph.thresholdLabel",
-        "match": "t(\`curiosity-graph.thresholdLabel\`)",
+        "key": "curiosity-graph.label",
+        "match": "t('curiosity-graph.label', { context: 'threshold' })",
       },
       Object {
         "key": "curiosity-graph.noDataLabel",
@@ -585,6 +585,10 @@ Array [
 
 exports[`I18n Component should have locale keys that exist in the default language JSON: missing locale keys 1`] = `
 Array [
+  Object {
+    "file": "./src/components/graphCard/graphCardChartTooltip.js",
+    "key": "curiosity-graph.label",
+  },
   Object {
     "file": "./src/components/inventoryList/inventoryList.js",
     "key": "curiosity-inventory.tab",

diff --git a/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap b/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap
@@ -85,7 +85,7 @@ exports[`ProductViewOpenShiftContainer Component should render a non-connected c
         }
         key="graph_OpenShift Container Platform"
         productId="OpenShift Container Platform"
-        productLabel="OpenShift"
+        productLabel="OpenShift Container Platform"
         query={
           Object {
             "beginning": "2019-06-20T00:00:00.000Z",
@@ -306,7 +306,7 @@ exports[`ProductViewOpenShiftContainer Component should render a non-connected c
         }
         key="graph_OpenShift-metrics"
         productId="OpenShift-metrics"
-        productLabel="OpenShift Metric"
+        productLabel="OpenShift-metrics"
         query={
           Object {
             "beginning": "2019-07-01T00:00:00.000Z",

diff --git a/src/components/productView/productViewOpenShiftContainer.js b/src/components/productView/productViewOpenShiftContainer.js
@@ -413,7 +413,7 @@ ProductViewOpenShiftContainer.defaultProps = {
           id: RHSM_API_QUERY_TYPES.SLA
         }
       ],
-      productLabel: 'OpenShift',
+      productLabel: RHSM_API_PATH_ID_TYPES.OPENSHIFT,
       productId: RHSM_API_PATH_ID_TYPES.OPENSHIFT,
       viewId: 'viewOpenShift'
     },
@@ -501,7 +501,7 @@ ProductViewOpenShiftContainer.defaultProps = {
         }
       ],
       initialToolbarFilters: undefined,
-      productLabel: 'OpenShift Metric',
+      productLabel: RHSM_API_PATH_ID_TYPES.OPENSHIFT_METRICS,
       productId: RHSM_API_PATH_ID_TYPES.OPENSHIFT_METRICS,
       viewId: 'viewOpenShiftMetric'
     }