fix(pageHeader): issues/305 apply locale product context (#371)

* locale, i18n, appName, product context strings * openshiftView, rhelView, apply appName, product context * pageHeader, appName param, product context * table, apply appName clean up
RedHatInsights · Aug 6, 2020 · aa88ec9 · aa88ec9
1 parent 981ac6a
commit aa88ec9
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 29 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -42,7 +42,7 @@
     "tooltipSummary": "Your subscription data facets. With one level of column and row headers."
   },
   "curiosity-inventory": {
-    "tableAriaLabel": "Subscription Watch systems inventory table.",
+    "tableAriaLabel": "{{appName}} systems inventory table.",
     "tableSummary": "A generated table with one level of column headers.",
     "tableEmptyInventoryTitle": "No results found",
     "tableEmptyInventoryMessage": "No results match the filter criteria. Remove filters or clear all filters to show results.",
@@ -87,9 +87,11 @@
     "tourDescription": "We'll walk you through each step, and include insight into how Red Hat collects and uses subscription data."
   },
   "curiosity-view": {
-    "OpenShiftTitle": "Red Hat OpenShift",
-    "OpenShiftSubtitle": "Monitor your Red Hat OpenShift usage by socket or core usage, based on your subscription terms. <0>Learn more about Subscription Watch reporting</0>",
-    "RHELTitle": "Red Hat Enterprise Linux",
-    "RHELSubtitle": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets. <0>Learn more about Subscription Watch reporting</0>"
+    "title": "{{appName}}",
+    "subtitle": "Monitor your usage based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
+    "title_OpenShift": "Red Hat OpenShift",
+    "subtitle_OpenShift": "Monitor your Red Hat OpenShift usage by socket or core usage, based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
+    "title_RHEL": "Red Hat Enterprise Linux",
+    "subtitle_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets. <0>Learn more about {{appName}} reporting</0>"
   }
 }
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -185,8 +185,8 @@ Array [
     "file": "./src/components/openshiftView/openshiftView.js",
     "keys": Array [
       Object {
-        "key": "",
-        "match": "t(\`curiosity-view.\${viewId}Title\`, helpers.UI_DISPLAY_CONFIG_NAME)",
+        "key": "curiosity-view.title",
+        "match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })",
       },
       Object {
         "key": "curiosity-graph.cardHeading",
@@ -275,17 +275,17 @@ Array [
     "file": "./src/components/pageLayout/pageHeader.js",
     "keys": Array [
       Object {
-        "key": "",
-        "match": "t(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
+        "key": "curiosity-view.subtitle",
+        "match": "t(\`curiosity-view.subtitle\`, { appName: helpers.UI_DISPLAY_NAME, context: viewId }, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkAltIcon />} iconPosition=\\"right\\" target=\\"_blank\\" href=\\"https://access.redhat.com/documentation/en-us/subscription_central/2020-04/html/getting_started_with_subscription_watch/con-how-does-subscriptionwatch-show-data_assembly-opening-subscriptionwatch-ctxt/\\" /> ])",
       },
     ],
   },
   Object {
     "file": "./src/components/rhelView/rhelView.js",
     "keys": Array [
       Object {
-        "key": "",
-        "match": "t(\`curiosity-view.\${viewId}Title\`, helpers.UI_DISPLAY_CONFIG_NAME)",
+        "key": "curiosity-view.title",
+        "match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })",
       },
       Object {
         "key": "curiosity-graph.socketsHeading",
@@ -310,7 +310,7 @@ Array [
       },
       Object {
         "key": "curiosity-inventory.tableAriaLabel",
-        "match": "t('curiosity-inventory.tableAriaLabel')",
+        "match": "t('curiosity-inventory.tableAriaLabel', { appName: helpers.UI_DISPLAY_NAME })",
       },
       Object {
         "key": "curiosity-inventory.tableSummary",

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -6,7 +6,7 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
     t={[Function]}
     viewId="OpenShift"
   >
-    t(curiosity-view.OpenShiftTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
@@ -80,7 +80,7 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
     t={[Function]}
     viewId="OpenShift"
   >
-    t(curiosity-view.OpenShiftTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
@@ -154,7 +154,7 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
     t={[Function]}
     viewId="OpenShift"
   >
-    t(curiosity-view.OpenShiftTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -79,7 +79,9 @@ class OpenshiftView extends React.Component {
 
     return (
       <PageLayout>
-        <PageHeader viewId={viewId}>{t(`curiosity-view.${viewId}Title`, helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
+        <PageHeader viewId={viewId}>
+          {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
+        </PageHeader>
         <PageToolbar>
           <Toolbar query={query} viewId={viewId} />
         </PageToolbar>

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap
@@ -111,7 +111,7 @@ exports[`PageHeader Component should render the subtitle when viewId is provided
         </Title>
       </PageHeaderTitle>
       <p>
-        t(curiosity-view.RHELSubtitle, [object Object], [object Object])
+        t(curiosity-view.subtitle, [object Object], [object Object])
       </p>
     </section>
   </PageHeader>

diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js
@@ -6,6 +6,7 @@ import {
 } from '@redhat-cloud-services/frontend-components/components/cjs/PageHeader';
 import { Button } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { helpers } from '../../common';
 import { translate } from '../i18n/i18n';
 
 /**
@@ -22,7 +23,7 @@ const PageHeader = ({ children, t, viewId }) => (
     <PageHeaderTitle title={children} className="pf-u-mb-sm" />
     {viewId && (
       <p>
-        {t(`curiosity-view.${viewId}Subtitle`, {}, [
+        {t(`curiosity-view.subtitle`, { appName: helpers.UI_DISPLAY_NAME, context: viewId }, [
           <Button
             isInline
             component="a"

diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -6,7 +6,7 @@ exports[`RhelView Component should display an alternate graph on query-string up
     t={[Function]}
     viewId="RHEL"
   >
-    t(curiosity-view.RHELTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
@@ -66,7 +66,7 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
     t={[Function]}
     viewId="RHEL"
   >
-    t(curiosity-view.RHELTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
@@ -126,7 +126,7 @@ exports[`RhelView Component should render a non-connected component: non-connect
     t={[Function]}
     viewId="RHEL"
   >
-    t(curiosity-view.RHELTitle, Subscription Watch)
+    t(curiosity-view.title, [object Object])
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -36,7 +36,9 @@ class RhelView extends React.Component {
 
     return (
       <PageLayout>
-        <PageHeader viewId={viewId}>{t(`curiosity-view.${viewId}Title`, helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
+        <PageHeader viewId={viewId}>
+          {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
+        </PageHeader>
         <PageToolbar>
           <Toolbar query={query} viewId={viewId} />
         </PageToolbar>

diff --git a/src/components/table/__tests__/__snapshots__/table.test.js.snap b/src/components/table/__tests__/__snapshots__/table.test.js.snap
@@ -9,7 +9,7 @@ exports[`Table Component should allow expandable content: expandable content 1`]
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={true}
       canSelectAll={true}
       cells={
@@ -76,7 +76,7 @@ exports[`Table Component should allow expandable content: expanded row 1`] = `
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={true}
       canSelectAll={true}
       cells={
@@ -198,7 +198,7 @@ exports[`Table Component should allow variations in table layout: borders and ta
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={false}
       canSelectAll={true}
       cells={
@@ -308,7 +308,7 @@ exports[`Table Component should allow variations in table layout: generated rows
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={true}
       canSelectAll={true}
       cells={
@@ -364,7 +364,7 @@ exports[`Table Component should pass child components, nodes when there are no r
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={true}
       canSelectAll={true}
       cells={
@@ -404,7 +404,7 @@ exports[`Table Component should render a non-connected component: non-connected
     span={12}
   >
     <Table
-      aria-label="t(curiosity-inventory.tableAriaLabel)"
+      aria-label="t(curiosity-inventory.tableAriaLabel, [object Object])"
       borders={true}
       canSelectAll={true}
       cells={

diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -5,6 +5,7 @@ import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { Table as PfTable, TableBody, TableHeader, TableVariant } from '@patternfly/react-table';
 import _isEqual from 'lodash/isEqual';
 import { TableEmpty } from './tableEmpty';
+import { helpers } from '../../common';
 import { translate } from '../i18n/i18n';
 
 /**
@@ -129,7 +130,7 @@ class Table extends React.Component {
         <PfTable
           className={`curiosity-table${(!borders && '-no-border') || ''} ${className || ''}`}
           borders={borders}
-          aria-label={ariaLabel || t('curiosity-inventory.tableAriaLabel')}
+          aria-label={ariaLabel || t('curiosity-inventory.tableAriaLabel', { appName: helpers.UI_DISPLAY_NAME })}
           summary={summary || t('curiosity-inventory.tableSummary')}
           variant={variant}
           onCollapse={(event, index, isOpen, data) => this.onCollapse({ event, index, isOpen, data })}