LandingPage: add documentation to header

The header now includes the proper title of Image Builder and a popover
including a description and link to documentation.

src/SmartComponents/LandingPage/LandingPage.js

@@ -3,7 +3,11 @@ import { withRouter } from 'react-router-dom';
 
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
 
+import { Button, Popover, TextContent, Text } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, HelpIcon } from '@patternfly/react-icons';
+
 import ImagesTable from '../ImagesTable/ImagesTable';
+import './LandingPage.scss';
 
 class LandingPage extends Component {
     constructor(props) {
@@ -14,7 +18,32 @@ class LandingPage extends Component {
         return (
             <React.Fragment>
                 <PageHeader>
-                    <PageHeaderTitle title='Images' />
+                    <PageHeaderTitle className="title" title="Image Builder" />
+                    <Popover
+                        headerContent={ 'About Image Builder' }
+                        bodyContent={ <TextContent>
+                            <Text>
+                                        Image Builder is a service that allows you to create RHEL images
+                                        and push them to cloud environments.
+                            </Text>
+                            <Button
+                                component="a"
+                                target="_blank"
+                                variant="link"
+                                icon={ <ExternalLinkAltIcon /> }
+                                iconPosition="right"
+                                isInline
+                                href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8-beta/">
+                                    Documentation
+                            </Button>
+                        </TextContent> }>
+                        <button
+                            type="button"
+                            aria-label="About image builder"
+                            className="pf-c-form__group-label-help">
+                            <HelpIcon />
+                        </button>
+                    </Popover>
                 </PageHeader>
                 <section className="pf-l-page__main-section pf-c-page__main-section">
                     <ImagesTable />

src/SmartComponents/LandingPage/LandingPage.scss

@@ -0,0 +1,11 @@
+.title {
+    display: inline;
+}
+
+.pf-c-form__group-label-help {
+    color: var(--pf-global--icon--Color--light);
+}
+
+.pf-c-form__group-label-help:active {
+    color: var(--pf-global--icon--Color--dark);
+}

src/test/SmartComponents/LandingPage/LandingPage.test.js

@@ -12,7 +12,7 @@ describe('Landing Page', () => {
         const composeImage = jest.spyOn(api, 'getVersion');
         composeImage.mockResolvedValue({ version: '1.0' });
         // check heading
-        screen.getByRole('heading', { name: /images/i });
+        screen.getByRole('heading', { name: /Image Builder/i });
     });
     test('renders EmptyState child component', async () => {
         // check action loads