Add close button to job detail and test

__tests__/pages/Jobs/Jobs.test.jsx

@@ -10,7 +10,7 @@ describe('<Jobs />', () => {
     );
   });
 
-  test('should display correct breadcrumb heading', () => {
+  test('should display a breadcrumb heading', () => {
     const history = createMemoryHistory({
       initialEntries: ['/jobs'],
     });
@@ -30,7 +30,7 @@ describe('<Jobs />', () => {
         }
       }
     );
-    expect(wrapper.find('BreadcrumbHeading').text()).toEqual('Jobs');
+    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
     wrapper.unmount();
   });
 });

__tests__/pages/Jobs/screens/Job/JobDetail.test.jsx

@@ -12,4 +12,13 @@ describe('<JobDetail />', () => {
       <JobDetail job={ mockDetails } />
     );
   });
+
+  test('should display a Close button', () => {
+    const wrapper = mountWithContexts(
+      <JobDetail job={ mockDetails } />
+    );
+
+    expect(wrapper.find('Button[aria-label="close"]').length).toBe(1);
+    wrapper.unmount();
+  });
 });

src/pages/Jobs/JobDetail/JobDetail.jsx

@@ -1,7 +1,14 @@
 import React, { Component } from 'react';
-import { CardBody  } from '@patternfly/react-core';
+import { Link, withRouter } from 'react-router-dom';
-
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { CardBody, Button } from '@patternfly/react-core';
+import styled from 'styled-components';
 
+const ActionButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
 class JobDetail extends Component {
   constructor (props) {
     super(props);
@@ -9,15 +16,28 @@ class JobDetail extends Component {
 
   render () {
     const {
-      job
+      job,
+      i18n
     } = this.props;
 
+
     return (
       <CardBody>
         <b>{job.name}</b>
+
+        <ActionButtonWrapper>
+          <Button
+            variant='secondary'
+            aria-label="close"
+            component={Link}
+            to={`/jobs`}
+          >
+            {i18n._(t`Close`)}
+          </Button>
+        </ActionButtonWrapper>
       </CardBody>
     );
   }
 }
 
-export default JobDetail;
+export default withI18n()(withRouter(JobDetail));