5 files changed, 63 insertions, 18 deletions

diff --git a/web-ui/src/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js
index f3bdb2b5..bb5ffbea 100644
--- a/web-ui/src/common/back_link/back_link.js
+++ b/web-ui/src/common/back_link/back_link.js
@@ -19,12 +19,19 @@ import React from 'react';
 
 import './back_link.scss';
 
+const icon = <i className='fa fa-angle-left' aria-hidden='true' />;
+
+const button = (text, options) => (
+  <button className='link' {...options}>{icon}<span>{text}</span></button>
+);
+
+const link = (text, options) => (
+  <a className='link' {...options}>{icon}<span>{text}</span></a>
+);
+
 const BackLink = ({ text, ...other }) => (
   <div className='link-content'>
-    <a className='link' tabIndex='0' {...other}>
-      <i className='fa fa-angle-left' aria-hidden='true' />
-      <span>{text}</span>
-    </a>
+    { other.href ? link(text, other) : button(text, other) }
   </div>
 );
 
diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss
index a799a710..5541d9d9 100644
--- a/web-ui/src/common/back_link/back_link.scss
+++ b/web-ui/src/common/back_link/back_link.scss
@@ -21,6 +21,10 @@
   color: $dark_blue;
   font-style: italic;
   font-size: 0.8em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
 
   .fa {
     font-size: 1.6em;
diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js
index ee659267..5f49a6f9 100644
--- a/web-ui/src/common/back_link/back_link.spec.js
+++ b/web-ui/src/common/back_link/back_link.spec.js
@@ -4,17 +4,38 @@ import React from 'react';
 import BackLink from 'src/common/back_link/back_link';
 
 describe('BackLink', () => {
-  let backLink;
+  context('as link', () => {
+    let backLink;
 
-  beforeEach(() => {
-    backLink = shallow(<BackLink text='Back to inbox' href='/' />);
-  });
+    beforeEach(() => {
+      backLink = shallow(<BackLink text='Back to inbox' href='/' />);
+    });
+
+    it('renders link with text', () => {
+      expect(backLink.find('a').text()).toEqual('Back to inbox');
+    });
 
-  it('renders link with text', () => {
-    expect(backLink.find('a').text()).toEqual('Back to inbox');
+    it('adds link action', () => {
+      expect(backLink.find('a').props().href).toEqual('/');
+    });
   });
 
-  it('adds link action', () => {
-    expect(backLink.find('a').props().href).toEqual('/');
+  context('as button', () => {
+    let backLink;
+    let mockClick;
+
+    beforeEach(() => {
+      mockClick = expect.createSpy();
+      backLink = shallow(<BackLink text='Back to inbox' onClick={mockClick} />);
+    });
+
+    it('renders button with text', () => {
+      expect(backLink.find('button').text()).toEqual('Back to inbox');
+    });
+
+    it('adds button click event', () => {
+      backLink.find('button').simulate('click');
+      expect(mockClick).toHaveBeenCalled();
+    });
   });
 });
diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js
index 715d54c6..3ad924c0 100644
--- a/web-ui/src/common/header/header.js
+++ b/web-ui/src/common/header/header.js
@@ -19,7 +19,7 @@ import React from 'react';
 import Logout from 'src/common/logout/logout';
 import './header.scss';
 
-export const Header = () => (
+export const Header = ({ renderLogout }) => (
   <header className='header-wrapper'>
     <div className='header-content'>
       <a href='/'>
@@ -30,10 +30,18 @@ export const Header = () => (
         />
       </a>
       <div className='header-icons'>
-        <Logout />
+        { renderLogout ? <Logout /> : <div /> }
       </div>
     </div>
   </header>
 );
 
+Header.propTypes = {
+  renderLogout: React.PropTypes.bool
+};
+
+Header.defaultProps = {
+  renderLogout: false
+};
+
 export default Header;
diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js
index 81a952c7..0c11713b 100644
--- a/web-ui/src/common/header/header.spec.js
+++ b/web-ui/src/common/header/header.spec.js
@@ -11,11 +11,16 @@ describe('Header', () => {
     header = shallow(<Header />);
   });
 
-  it('renders the header containing the logout button', () => {
-    expect(header.find('header').find(Logout)).toExist();
-  });
-
   it('renders the header pixelated logo', () => {
     expect(header.find('header').find('img').props().alt).toEqual('Pixelated');
   });
+
+  it('renders the header containing the logout button when renderLogout is true', () => {
+    header = shallow(<Header renderLogout />);
+    expect(header.find('header').find(Logout).length).toEqual(1);
+  });
+
+  it('hides logout button when renderLogout is false', () => {
+    expect(header.find('header').find(Logout).length).toEqual(0);
+  });
 });