diff --git a/public/locales/en-US.json b/public/locales/en-US.json index 9f9154498..b172403a0 100644 --- 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", + "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" } } diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap index 0e5c2ccf3..944fb050d 100644 --- 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:
} 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 index 718a593a5..365f2b05e 100644 --- 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`] = ` - + - + Subscription Watch - + Subscription Watch - - t(curiosity-view.openshift, Subscription Watch) + + t(curiosity-view.OpenShiftTitle, Subscription Watch) - - t(curiosity-view.openshift, Subscription Watch) + + t(curiosity-view.OpenShiftTitle, Subscription Watch) - - t(curiosity-view.openshift, Subscription Watch) + + t(curiosity-view.OpenShiftTitle, Subscription Watch) - {t('curiosity-view.openshift', helpers.UI_DISPLAY_CONFIG_NAME)} + {t(`curiosity-view.${viewId}Title`, helpers.UI_DISPLAY_CONFIG_NAME)} diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap index f92f83c1c..c61d94173 100644 --- 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`] = ` - +
+
`; + +exports[`PageHeader Component should render the subtitle when viewId is provided: with subtitle 1`] = ` + + +
+ + + <h1 + className="pf-c-title pf-m-2xl" + widget-type="InsightsPageHeaderTitle" + > + + lorem + + </h1> + + +

+ t(curiosity-view.RHELSubtitle, [object Object], [object Object]) +

+
+
+
+`; diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap index 9c08891f8..683c4019e 100644 --- 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
{ const component = mount(dolor sit); expect(component).toMatchSnapshot('string'); }); + + it('should render the subtitle when viewId is provided', () => { + const component = mount(lorem); + expect(component).toMatchSnapshot('with subtitle'); + }); }); diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js index 2ba54567c..2c4a2ecde 100644 --- 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 }) => ( + {viewId && ( +

+ {translate(`curiosity-view.${viewId}Subtitle`, {}, [ +