RedHatInsights · cdcabrera · Jul 28, 2020 · Jul 24, 2020
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -79,7 +79,9 @@
     "tourDescription": "We'll walk you through each step, and include insight into how Red Hat collects and uses subscription data."
   },
   "curiosity-view": {
-    "openshift": "Red Hat OpenShift",
-    "rhel": "Red Hat Enterprise Linux"
+    "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>"
   }
 }
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -67,6 +67,7 @@ exports[`Authentication Component should render a non-connected component error:
     <PageLayout>
       <PageHeader
         key=".0"
+        viewId={null}
       >
         <PageHeader>
           <section

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": "curiosity-view.openshift",
-        "match": "t('curiosity-view.openshift', helpers.UI_DISPLAY_CONFIG_NAME)",
+        "key": "",
+        "match": "t(\`curiosity-view.\${viewId}Title\`, helpers.UI_DISPLAY_CONFIG_NAME)",
       },
       Object {
         "key": "curiosity-graph.cardHeading",
@@ -271,12 +271,21 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/pageLayout/pageHeader.js",
+    "keys": Array [
+      Object {
+        "key": "",
+        "match": "translate(\`curiosity-view.\${viewId}Subtitle\`, {}, [ <Button isInline component=\\"a\\" variant=\\"link\\" icon={<ExternalLinkSquareAltIcon />} 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": "curiosity-view.rhel",
-        "match": "t('curiosity-view.rhel', helpers.UI_DISPLAY_CONFIG_NAME)",
+        "key": "",
+        "match": "t(\`curiosity-view.\${viewId}Title\`, helpers.UI_DISPLAY_CONFIG_NAME)",
       },
       Object {
         "key": "curiosity-graph.socketsHeading",

diff --git a/src/components/loader/__tests__/__snapshots__/loader.test.js.snap b/src/components/loader/__tests__/__snapshots__/loader.test.js.snap
@@ -78,7 +78,9 @@ exports[`Loader Component should handle variant loader components: variant: tabl
 
 exports[`Loader Component should handle variant loader components: variant: title 1`] = `
 <PageLayout>
-  <PageHeader>
+  <PageHeader
+    viewId={null}
+  >
     <Skeleton
       isDark={false}
       size="sm"

diff --git a/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap b/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`MessageView Component should have fallback conditions for all props: fallback display 1`] = `
 <PageLayout>
-  <PageHeader>
+  <PageHeader
+    viewId={null}
+  >
     Subscription Watch
   </PageHeader>
   <EmptyState
@@ -14,7 +16,9 @@ exports[`MessageView Component should have fallback conditions for all props: fa
 
 exports[`MessageView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
-  <PageHeader>
+  <PageHeader
+    viewId={null}
+  >
     Subscription Watch
   </PageHeader>
   <EmptyState

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -2,8 +2,10 @@
 
 exports[`OpenshiftView Component should display an alternate graph on query-string update: alternate graph 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.openshift, Subscription Watch)
+  <PageHeader
+    viewId="OpenShift"
+  >
+    t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)
@@ -71,8 +73,10 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
 
 exports[`OpenshiftView Component should have a fallback title: title 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.openshift, Subscription Watch)
+  <PageHeader
+    viewId="OpenShift"
+  >
+    t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)
@@ -140,8 +144,10 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
 
 exports[`OpenshiftView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.openshift, Subscription Watch)
+  <PageHeader
+    viewId="OpenShift"
+  >
+    t(curiosity-view.OpenShiftTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)

diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
@@ -78,7 +78,7 @@ class OpenshiftView extends React.Component {
 
     return (
       <PageLayout>
-        <PageHeader>{t('curiosity-view.openshift', helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
+        <PageHeader viewId={viewId}>{t(`curiosity-view.${viewId}Title`, helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
         <PageToolbar>
           <Toolbar graphQuery={graphQuery} 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
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageHeader Component should render a basic component: basic 1`] = `
-<PageHeader>
+<PageHeader
+  viewId={null}
+>
   <PageHeader>
     <section
       className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
@@ -42,7 +44,9 @@ exports[`PageHeader Component should render a basic component: basic 1`] = `
 `;
 
 exports[`PageHeader Component should render string node types: string 1`] = `
-<PageHeader>
+<PageHeader
+  viewId={null}
+>
   <PageHeader>
     <section
       className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
@@ -71,3 +75,39 @@ exports[`PageHeader Component should render string node types: string 1`] = `
   </PageHeader>
 </PageHeader>
 `;
+
+exports[`PageHeader Component should render the subtitle when viewId is provided: with subtitle 1`] = `
+<PageHeader
+  viewId="RHEL"
+>
+  <PageHeader>
+    <section
+      className="pf-l-page-header pf-c-page-header pf-l-page__main-section pf-c-page__main-section pf-m-light"
+      widget-type="InsightsPageHeader"
+    >
+      <PageHeaderTitle
+        title="lorem"
+      >
+        <Title
+          className=""
+          headingLevel="h1"
+          size="2xl"
+          widget-type="InsightsPageHeaderTitle"
+        >
+          <h1
+            className="pf-c-title pf-m-2xl"
+            widget-type="InsightsPageHeaderTitle"
+          >
+
+            lorem
+
+          </h1>
+        </Title>
+      </PageHeaderTitle>
+      <p>
+        t(curiosity-view.RHELSubtitle, [object Object], [object Object])
+      </p>
+    </section>
+  </PageHeader>
+</PageHeader>
+`;
diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
@@ -23,6 +23,7 @@ exports[`PageLayout Component should render header and section children: multipl
 <PageLayout>
   <PageHeader
     key=".1"
+    viewId={null}
   >
     <PageHeader>
       <section

diff --git a/src/components/pageLayout/__tests__/pageHeader.test.js b/src/components/pageLayout/__tests__/pageHeader.test.js
@@ -17,4 +17,9 @@ describe('PageHeader Component', () => {
     const component = mount(<PageHeader>dolor sit</PageHeader>);
     expect(component).toMatchSnapshot('string');
   });
+
+  it('should render the subtitle when viewId is provided', () => {
+    const component = mount(<PageHeader viewId="RHEL">lorem</PageHeader>);
+    expect(component).toMatchSnapshot('with subtitle');
+  });
 });
diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js
@@ -4,32 +4,54 @@ import {
   PageHeader as RcsPageHeader,
   PageHeaderTitle
 } from '@redhat-cloud-services/frontend-components/components/cjs/PageHeader';
+import { Button } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { translate } from '../i18n/i18n';
 
 /**
  * Render a platform page header.
  *
  * @param {object} props
  * @param {Node} props.children
+ * @param {string} props.viewId
  * @returns {Node}
  */
-const PageHeader = ({ children }) => (
+const PageHeader = ({ children, viewId }) => (
   <RcsPageHeader>
     <PageHeaderTitle title={children} />
+    {viewId && (
+      <p>
+        {translate(`curiosity-view.${viewId}Subtitle`, {}, [
+          <Button
+            isInline
+            component="a"
+            variant="link"
+            icon={<ExternalLinkSquareAltIcon />}
+            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/"
+          />
+        ])}
+      </p>
+    )}
   </RcsPageHeader>
 );
 
 /**
  * Prop types.
  *
- * @type {{children: Node}}
+ * @type {{children: Node, viewId: string}}
  */
 PageHeader.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  viewId: PropTypes.string
 };
 
 /**
  * Default props.
  */
-PageHeader.defaultProps = {};
+PageHeader.defaultProps = {
+  viewId: null
+};
 
 export { PageHeader as default, PageHeader };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -2,8 +2,10 @@
 
 exports[`RhelView Component should display an alternate graph on query-string update: alternate graph 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.rhel, Subscription Watch)
+  <PageHeader
+    viewId="RHEL"
+  >
+    t(curiosity-view.RHELTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)
@@ -59,8 +61,10 @@ exports[`RhelView Component should display an alternate graph on query-string up
 
 exports[`RhelView Component should have a fallback title: title 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.rhel, Subscription Watch)
+  <PageHeader
+    viewId="RHEL"
+  >
+    t(curiosity-view.RHELTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)
@@ -116,8 +120,10 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
 
 exports[`RhelView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
-  <PageHeader>
-    t(curiosity-view.rhel, Subscription Watch)
+  <PageHeader
+    viewId="RHEL"
+  >
+    t(curiosity-view.RHELTitle, Subscription Watch)
   </PageHeader>
   <PageToolbar>
     <withI18nextTranslation(Toolbar)

diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
@@ -35,7 +35,7 @@ class RhelView extends React.Component {
 
     return (
       <PageLayout>
-        <PageHeader>{t('curiosity-view.rhel', helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
+        <PageHeader viewId={viewId}>{t(`curiosity-view.${viewId}Title`, helpers.UI_DISPLAY_CONFIG_NAME)}</PageHeader>
         <PageToolbar>
           <Toolbar graphQuery={graphQuery} viewId={viewId} />
         </PageToolbar>