add header toolbar component and move About modal control to App

src/components/About.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { I18n } from '@lingui/react';
 import { Trans, t } from '@lingui/macro';
 import {
@@ -13,10 +12,8 @@ import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
 import brandImg from '../../images/tower-logo-white.svg';
 import logoImg from '../../images/tower-logo-login.svg';
 
-import { ConfigContext } from '../context';
-
-class About extends React.Component {
-  createSpeechBubble = (version) => {
+class About extends Component {
+  static createSpeechBubble (version) {
     let text = `Tower ${version}`;
     let top = '';
     let bottom = '';
@@ -33,61 +30,60 @@ class About extends React.Component {
     return top + text + bottom;
   }
 
-  handleModalToggle = () => {
-    const { onAboutModalClose } = this.props;
-    onAboutModalClose();
-  };
+  constructor (props) {
+    super(props);
+
+    this.createSpeechBubble = this.constructor.createSpeechBubble.bind(this);
+  }
 
   render () {
-    const { isOpen } = this.props;
+    const {
+      ansible_version,
+      version,
+      isOpen,
+      onClose
+    } = this.props;
+
+    const speechBubble = this.createSpeechBubble(version);
+
     return (
       <I18n>
         {({ i18n }) => (
-          <ConfigContext.Consumer>
-            {({ ansible_version, version }) => (
-              <AboutModal
-                isOpen={isOpen}
-                onClose={this.handleModalToggle}
-                productName="Ansible Tower"
-                trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
-                brandImageSrc={brandImg}
-                brandImageAlt={i18n._(t`Brand Image`)}
-                logoImageSrc={logoImg}
-                logoImageAlt={i18n._(t`AboutModal Logo`)}
-                heroImageSrc={heroImg}
-              >
-                <pre>
-                  {this.createSpeechBubble(version)}
-                  {`
+          <AboutModal
+            isOpen={isOpen}
+            onClose={onClose}
+            productName="Ansible Tower"
+            trademark={i18n._(t`Copyright 2018 Red Hat, Inc.`)}
+            brandImageSrc={brandImg}
+            brandImageAlt={i18n._(t`Brand Image`)}
+            logoImageSrc={logoImg}
+            logoImageAlt={i18n._(t`AboutModal Logo`)}
+            heroImageSrc={heroImg}
+          >
+            <pre>
+              { speechBubble }
+              {`
               \\
-              \\  ^__^
+              \\   ^__^
                   (oo)\\_______
                   (__)      A )\\
                       ||----w |
                       ||     ||
                         `}
-                </pre>
-
-                <TextContent>
-                  <TextList component="dl">
-                    <TextListItem component="dt">
-                      <Trans>Ansible Version</Trans>
-                    </TextListItem>
-                    <TextListItem component="dd">{ansible_version}</TextListItem>
-                  </TextList>
-                </TextContent>
-              </AboutModal>
-            )}
-          </ConfigContext.Consumer>
+            </pre>
+            <TextContent>
+              <TextList component="dl">
+                <TextListItem component="dt">
+                  <Trans>Ansible Version</Trans>
+                </TextListItem>
+                <TextListItem component="dd">{ ansible_version }</TextListItem>
+              </TextList>
+            </TextContent>
+          </AboutModal>
         )}
       </I18n>
     );
   }
 }
 
-About.contextTypes = {
-  ansible_version: PropTypes.string,
-  version: PropTypes.string,
-};
-
 export default About;

src/components/HelpDropdown.jsx

@@ -1,62 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import { Trans } from '@lingui/macro';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
-  DropdownPosition,
-} from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
-import AboutModal from './About';
-
-class HelpDropdown extends Component {
-  state = {
-    isOpen: false,
-    showAboutModal: false
-  };
-
-  render () {
-    const { isOpen, showAboutModal } = this.state;
-    const dropdownItems = [
-      <DropdownItem
-        href="https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html"
-        target="_blank"
-        key="help"
-      >
-        <Trans>Help</Trans>
-      </DropdownItem>,
-      <DropdownItem
-        onClick={() => this.setState({ showAboutModal: true })}
-        key="about"
-      >
-        <Trans>About</Trans>
-      </DropdownItem>
-    ];
-
-    return (
-      <Fragment>
-        <Dropdown
-          onSelect={() => this.setState({ isOpen: !isOpen })}
-          toggle={(
-            <DropdownToggle onToggle={(isToggleOpen) => this.setState({ isOpen: isToggleOpen })}>
-              <QuestionCircleIcon />
-            </DropdownToggle>
-          )}
-          isOpen={isOpen}
-          dropdownItems={dropdownItems}
-          position={DropdownPosition.right}
-        />
-        {showAboutModal
-          ? (
-            <AboutModal
-              isOpen={showAboutModal}
-              onAboutModalClose={() => this.setState({ showAboutModal: !showAboutModal })}
-            />
-          )
-          : null }
-      </Fragment>
-    );
-  }
-}
-
-export default HelpDropdown;

src/components/LogoutButton.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { I18n } from '@lingui/react';
-import { t } from '@lingui/macro';
-
-import {
-  Button,
-  ButtonVariant
-} from '@patternfly/react-core';
-
-import { UserIcon } from '@patternfly/react-icons';
-
-const LogoutButton = ({ onDevLogout }) => (
-  <I18n>
-    {({ i18n }) => (
-      <Button
-        id="button-logout"
-        aria-label={i18n._(t`Logout`)}
-        variant={ButtonVariant.plain}
-        onClick={onDevLogout}
-        onKeyDown={event => {
-          if (event.keyCode === 13) {
-            onDevLogout();
-          }
-        }}
-      >
-        <UserIcon />
-      </Button>
-    )}
-  </I18n>
-);
-
-export default LogoutButton;

src/components/PageHeaderToolbar.jsx

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+import { t } from '@lingui/macro';
+import { I18n } from '@lingui/react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownPosition,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import {
+  QuestionCircleIcon,
+  UserIcon,
+} from '@patternfly/react-icons';
+
+const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
+const KEY_ENTER = 13;
+
+class PageHeaderToolbar extends Component {
+  constructor (props) {
+    super(props);
+    this.state = { isHelpOpen: false, isUserOpen: false };
+
+    this.onHelpSelect = this.onHelpSelect.bind(this);
+    this.onHelpToggle = this.onHelpToggle.bind(this);
+    this.onLogoutKeyDown = this.onLogoutKeyDown.bind(this);
+    this.onUserSelect = this.onUserSelect.bind(this);
+    this.onUserToggle = this.onUserToggle.bind(this);
+  }
+
+  onLogoutKeyDown ({ keyCode }) {
+    const { onLogoutClick } = this.props;
+
+    if (keyCode === KEY_ENTER) {
+      onLogoutClick();
+    }
+  }
+
+  onHelpSelect () {
+    const { isHelpOpen } = this.state;
+
+    this.setState({ isHelpOpen: !isHelpOpen });
+  }
+
+  onUserSelect () {
+    const { isUserOpen } = this.state;
+
+    this.setState({ isUserOpen: !isUserOpen });
+  }
+
+  onHelpToggle (isOpen) {
+    this.setState({ isHelpOpen: isOpen });
+  }
+
+  onUserToggle (isOpen) {
+    this.setState({ isUserOpen: isOpen });
+  }
+
+  render () {
+    const { isHelpOpen, isUserOpen } = this.state;
+    const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
+
+    return (
+      <I18n>
+        {({ i18n }) => (
+          <Toolbar>
+            <ToolbarGroup>
+              <ToolbarItem>
+                <Dropdown
+                  isOpen={isHelpOpen}
+                  position={DropdownPosition.right}
+                  onSelect={this.onHelpSelect}
+                  toggle={(
+                    <DropdownToggle
+                      onToggle={this.onHelpToggle}
+                    >
+                      <QuestionCircleIcon />
+                    </DropdownToggle>
+                  )}
+                  dropdownItems={[
+                    <DropdownItem
+                      key="help"
+                      target="_blank"
+                      href={DOCLINK}
+                    >
+                      {i18n._(t`Help`)}
+                    </DropdownItem>,
+                    <DropdownItem
+                      key="about"
+                      component="button"
+                      isDisabled={isAboutDisabled}
+                      onClick={onAboutClick}
+                    >
+                      {i18n._(t`About`)}
+                    </DropdownItem>
+                  ]}
+                />
+              </ToolbarItem>
+              <ToolbarItem>
+                <Dropdown
+                  isOpen={isUserOpen}
+                  position={DropdownPosition.right}
+                  onSelect={this.onUserSelect}
+                  toggle={(
+                    <DropdownToggle
+                      onToggle={this.onUserToggle}
+                    >
+                      <UserIcon />
+                    </DropdownToggle>
+                  )}
+                  dropdownItems={[
+                    <DropdownItem key="user">
+                      <Link to="/home">
+                        {i18n._(t`User Details`)}
+                      </Link>
+                    </DropdownItem>,
+                    <DropdownItem
+                      key="logout"
+                      component="button"
+                      onClick={onLogoutClick}
+                      onKeyDown={this.onLogoutKeyDown}
+                    >
+                      {i18n._(t`Logout`)}
+                    </DropdownItem>
+                  ]}
+                />
+              </ToolbarItem>
+            </ToolbarGroup>
+          </Toolbar>
+        )}
+      </I18n>
+    );
+  }
+}
+
+export default PageHeaderToolbar;