diff --git a/locales/en.json b/locales/en.json index 7243187bc..acdbb8c43 100644 --- 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 read-only 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 index 498727a1b..d92b89cba 100644 --- 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 index cb01fd464..8f14dbb27 100644 --- 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)} diff --git a/src/Components/SmartComponents/LandingPage/LandingPage.js b/src/Components/SmartComponents/LandingPage/LandingPage.js index 461b36afc..f36f45f16 100644 --- 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 = ( + } + bodyContent={} + footerContent={ + + } + > + + + + + + ); + return ( -
+
- +
); diff --git a/src/Components/SmartComponents/LandingPage/LandingPage.test.js b/src/Components/SmartComponents/LandingPage/LandingPage.test.js index 5f0000711..7e83f670d 100644 --- 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(); + const wrapper = shallowWithIntl(); expect(toJson(wrapper)).toMatchSnapshot(); }) it('Should render Header with props showBreadcrumb = false', () => { - const wrapper = shallowWithIntl(); + const wrapper = shallowWithIntl(); expect(wrapper.find(Header)).toHaveLength(1); expect(wrapper.find(Header).prop('showBreadcrumb')).toBeFalsy(); }); it('Should render VulnerabilitiesCves', () => { - const wrapper = shallowWithIntl(); + const wrapper = shallowWithIntl(); expect(wrapper.find(VulnerabilitiesCves)).toHaveLength(1); }); }) \ No newline at end of file diff --git a/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap index f4e399cf5..58ab1c393 100644 --- 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`] = `
+ } + enableFlip={true} + footerContent={ + + + + + + } + headerContent={ + + } + position="right" + > + + + + + + } /> diff --git a/src/Messages.js b/src/Messages.js index 6237508a0..9f59f2797 100644 --- 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 read-only 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' },