fix(VULN-1913): Add popover for OVAL (#1300)

* fix(VULN-1913): Add popover for OVAL * Update styling a bit to match mockups Co-authored-by: leSamo <[email protected]>
RedHatInsights · Oct 28, 2021 · b13ada8 · b13ada8
1 parent c1c8b35
commit b13ada8
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 11 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -204,17 +204,19 @@
   "options.all": "All",
   "osFilterLabel": "Operating system",
   "osFilterPlaceholder": "Filter by OS",
+  "ovalPopoverBody": "The Vulnerability service identifies CVEs with errata that may effect your Insights-connected RHEL systems",
+  "ovalPopoverHeader": "About CVEs in Red Hat Insights",
   "pageTitleSuffix": "Vulnerability | Red Hat Insights",
   "pdf.reportName": "Insights Vulnerability CVE report",
   "pdf.systemName": "Insights Vulnerability Systems report",
   "playbook": "Playbook",
   "readLess": "Read less",
   "readMore": "Read more",
-  "readOnlyBanner.link": "Learn more",
   "readOnlyBanner.text": "Application is in <b>read-only</b> mode",
   "readOnlyNotification.body": "The application is temporarily in read-only mode due to normal system maintenance. Please try again later.",
   "readOnlyNotification.link": "Visit status.redhat.com for more information",
   "readOnlyNotification.title": "Changes not saved",
+  "rearn more": "Learn more",
   "rebootRequired": "System reboot required",
   "remediate": "Remediate",
   "remediation": "Remediation",

diff --git a/src/App.scss b/src/App.scss
@@ -122,6 +122,10 @@
     font-size: var(--pf-global--FontSize--sm);
 }
 
+.cves-header-questionmark {
+    font-size: var(--pf-global--FontSize--md);
+}
+
 .pointer {
     cursor: pointer;
 }

diff --git a/src/Components/PresentationalComponents/ReadOnlyBanner/ReadOnlyBanner.js b/src/Components/PresentationalComponents/ReadOnlyBanner/ReadOnlyBanner.js
@@ -17,7 +17,7 @@ const ReadOnlyBanner = () => {
                     style={{ color: 'var(--pf-global--link--Color--light)' }}
                     className="pf-u-ml-sm"
                 >
-                    {intl.formatMessage(messages.readOnlyBannerLink)}
+                    {intl.formatMessage(messages.learnMore)}
                 </a>
             </Bullseye>
         </Banner>

diff --git a/src/Components/SmartComponents/LandingPage/LandingPage.js b/src/Components/SmartComponents/LandingPage/LandingPage.js
@@ -1,14 +1,42 @@
 import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
+import messages from '../../../Messages';
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
 import Header from '../../PresentationalComponents/Header/Header';
 import CVEs from '../CVEs/CVEs';
 
 const LandingPage = () => {
+    // eslint-disable-next-line max-len
+    const PRODUCT_DOC = 'https://access.redhat.com/documentation/en-us/red_hat_insights/2021/html/assessing_and_monitoring_security_vulnerabilities_on_rhel_systems/index';
+
+    const title = (
+        <Popover
+            enableFlip
+            position={'right'}
+            headerContent={<FormattedMessage {...messages.ovalPopoverHeader} />}
+            bodyContent={<FormattedMessage {...messages.ovalPopoverBody} />}
+            footerContent={<a href={PRODUCT_DOC} target="__blank" rel="noopener noreferrer">
+                <FormattedMessage {...messages.learnMore} /> <ExternalLinkAltIcon />
+            </a>}
+        >
+            <span>
+                <FormattedMessage {...messages.cvesHeader} />
+                <OutlinedQuestionCircleIcon
+                    color={'var(--pf-global--secondary-color--100)'}
+                    className="pf-u-ml-sm pointer cves-header-questionmark"
+                    style={{ verticalAlign: '0' }}
+                />
+            </span>
+        </Popover>
+    );
+
     return (
         <Fragment>
-            <Header showBreadcrumb={false} />
+            <Header title={title} showBreadcrumb={false} />
             <Main>
-                <CVEs/>
+                <CVEs />
             </Main>
         </Fragment>
     );

diff --git a/src/Components/SmartComponents/LandingPage/LandingPage.test.js b/src/Components/SmartComponents/LandingPage/LandingPage.test.js
@@ -12,17 +12,17 @@ jest.mock("react-redux", () => ({
 
 describe('CVEs: ', () => {
     it('Should match the snapshot', () => {
-        const wrapper =  shallowWithIntl(<LandingPage />);
+        const wrapper = shallowWithIntl(<LandingPage />);
         expect(toJson(wrapper)).toMatchSnapshot();
     })
     it('Should render Header with props showBreadcrumb = false', () => {
-        const wrapper =  shallowWithIntl(<LandingPage />);
+        const wrapper = shallowWithIntl(<LandingPage />);
         expect(wrapper.find(Header)).toHaveLength(1);
         expect(wrapper.find(Header).prop('showBreadcrumb')).toBeFalsy();
     });
 
     it('Should render VulnerabilitiesCves', () => {
-        const wrapper =  shallowWithIntl(<LandingPage />);
+        const wrapper = shallowWithIntl(<LandingPage />);
         expect(wrapper.find(VulnerabilitiesCves)).toHaveLength(1);
     });
 })
diff --git a/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap
@@ -5,7 +5,64 @@ exports[`CVEs:  Should match the snapshot 1`] = `
   <Header
     actions={Array []}
     showBreadcrumb={false}
-    title="CVEs"
+    title={
+      <Popover
+        bodyContent={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="The Vulnerability service identifies CVEs with errata that may effect your Insights-connected RHEL systems"
+            description="CVEs oval body popover"
+            id="ovalPopoverBody"
+          />
+        }
+        enableFlip={true}
+        footerContent={
+          <a
+            href="https://access.redhat.com/documentation/en-us/red_hat_insights/2021/html/assessing_and_monitoring_security_vulnerabilities_on_rhel_systems/index"
+            rel="noopener noreferrer"
+            target="__blank"
+          >
+            <Memo(MemoizedFormattedMessage)
+              defaultMessage="Learn more"
+              description="Learn more general usage"
+              id="rearn more"
+            />
+             
+            <ExternalLinkAltIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+            />
+          </a>
+        }
+        headerContent={
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="About CVEs in Red Hat Insights"
+            description="CVEs oval header popover"
+            id="ovalPopoverHeader"
+          />
+        }
+        position="right"
+      >
+        <span>
+          <Memo(MemoizedFormattedMessage)
+            defaultMessage="CVEs"
+            description="General header title for CVEs"
+            id="cveTable.header"
+          />
+          <OutlinedQuestionCircleIcon
+            className="pf-u-ml-sm pointer cves-header-questionmark"
+            color="var(--pf-global--secondary-color--100)"
+            noVerticalAlign={false}
+            size="sm"
+            style={
+              Object {
+                "verticalAlign": "0",
+              }
+            }
+          />
+        </span>
+      </Popover>
+    }
   />
   <Connect(Main)>
     <CVEs />

diff --git a/src/Messages.js b/src/Messages.js
@@ -147,6 +147,16 @@ export default defineMessages({
         description: 'Used as the header in the landing page',
         defaultMessage: 'Vulnerabilities'
     },
+    ovalPopoverHeader: {
+        id: 'ovalPopoverHeader',
+        description: 'CVEs oval header popover',
+        defaultMessage: 'About CVEs in Red Hat Insights'
+    },
+    ovalPopoverBody: {
+        id: 'ovalPopoverBody',
+        description: 'CVEs oval body popover',
+        defaultMessage: 'The Vulnerability service identifies CVEs with errata that may effect your Insights-connected RHEL systems'
+    },
     playbook: {
         id: 'playbook',
         description: 'Generic playbook label',
@@ -761,9 +771,9 @@ export default defineMessages({
         description: 'Text for banner shown when application is in read-only mode and user tries to do write action',
         defaultMessage: 'Application is in <b>read-only</b> mode'
     },
-    readOnlyBannerLink: {
-        id: 'readOnlyBanner.link',
-        description: 'Learn more link for banner when application is in read-only mode and user tries to do write action',
+    learnMore: {
+        id: 'rearn more',
+        description: 'Learn more general usage',
         defaultMessage: 'Learn more'
     },