Merge pull request #186 from ansible/add-username-to-top-header-bar

Add logged in username to top level header bar.

src/App.jsx

@@ -64,24 +64,22 @@ class App extends Component {
   }
 
   render () {
-    const {
+    const { isAboutModalOpen, isNavOpen } = this.state;
-      isAboutModalOpen,
-      isNavOpen
-    } = this.state;
 
-    const {
+    const { render, routeGroups = [], navLabel = '' } = this.props;
-      render,
-      routeGroups = [],
-      navLabel = '',
-    } = this.props;
 
     return (
       <Config>
-        {({ ansible_version, version }) => (
+        {({ ansible_version, version, me }) => (
           <I18n>
             {({ i18n }) => (
               <RootDialog>
-                {({ title, bodyText, variant = 'info', clearRootDialogMessage }) => (
+                {({
+                  title,
+                  bodyText,
+                  variant = 'info',
+                  clearRootDialogMessage
+                }) => (
                   <Fragment>
                     {(title || bodyText) && (
                       <AlertModal
@@ -90,7 +88,13 @@ class App extends Component {
                         onClose={clearRootDialogMessage}
                         title={title}
                         actions={[
-                          <Button key="close" variant="secondary" onClick={clearRootDialogMessage}>{i18n._(t`Close`)}</Button>
+                          <Button
+                            key="close"
+                            variant="secondary"
+                            onClick={clearRootDialogMessage}
+                          >
+                            {i18n._(t`Close`)}
+                          </Button>
                         ]}
                       >
                         {bodyText}
@@ -105,6 +109,7 @@ class App extends Component {
                           logo={<TowerLogo linkTo="/" />}
                           toolbar={(
                             <PageHeaderToolbar
+                              loggedInUser={me}
                               isAboutDisabled={!version}
                               onAboutClick={this.onAboutModalOpen}
                               onLogoutClick={this.onLogout}
@@ -118,14 +123,16 @@ class App extends Component {
                           nav={(
                             <Nav aria-label={navLabel}>
                               <NavList>
-                                {routeGroups.map(({ groupId, groupTitle, routes }) => (
+                                {routeGroups.map(
-                                  <NavExpandableGroup
+                                  ({ groupId, groupTitle, routes }) => (
-                                    key={groupId}
+                                    <NavExpandableGroup
-                                    groupId={groupId}
+                                      key={groupId}
-                                    groupTitle={groupTitle}
+                                      groupId={groupId}
-                                    routes={routes}
+                                      groupTitle={groupTitle}
-                                  />
+                                      routes={routes}
-                                ))}
+                                    />
+                                  )
+                                )}
                               </NavList>
                             </Nav>
                           )}

src/app.scss

@@ -25,9 +25,21 @@
 }
 
 .pf-c-page__header-tools .pf-c-dropdown__toggle:before {
-  --pf-c-dropdown__toggle--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-dropdown__toggle--BorderBottomColor: var(
-  --pf-c-dropdown__toggle--hover--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
+    --pf-global--BackgroundColor--light-100
-  --pf-c-dropdown__toggle--expanded--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);
+  );
+  --pf-c-dropdown__toggle--hover--BorderBottomColor: var(
+    --pf-global--BackgroundColor--light-100
+  );
+  --pf-c-dropdown__toggle--expanded--BorderBottomColor: var(
+    --pf-global--BackgroundColor--light-100
+  );
+}
+
+.pf-c-page__header {
+  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-icon {
+    --pf-c-dropdown__toggle-icon--MarginLeft: 10px;
+  }
 }
 
 //
@@ -83,7 +95,8 @@
   --pf-global--target-size--MinWidth: 32px;
   --pf-global--FontSize--md: 14px;
 
-  .pf-c-badge:not(:last-child), .pf-c-switch:not(:last-child) {
+  .pf-c-badge:not(:last-child),
+  .pf-c-switch:not(:last-child) {
     margin-right: 18px;
   }
 }

src/components/PageHeaderToolbar.jsx

@@ -13,10 +13,7 @@ import {
   ToolbarItem,
   Tooltip
 } from '@patternfly/react-core';
-import {
+import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
-  QuestionCircleIcon,
-  UserIcon,
-} from '@patternfly/react-icons';
 
 const DOCLINK = 'https://docs.ansible.com/ansible-tower/latest/html/userguide/index.html';
 
@@ -25,7 +22,7 @@ class PageHeaderToolbar extends Component {
     super(props);
     this.state = {
       isHelpOpen: false,
-      isUserOpen: false,
+      isUserOpen: false
     };
 
     this.handleHelpSelect = this.handleHelpSelect.bind(this);
@@ -56,19 +53,19 @@ class PageHeaderToolbar extends Component {
 
   render () {
     const { isHelpOpen, isUserOpen } = this.state;
-    const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
+    const {
+      isAboutDisabled,
+      onAboutClick,
+      onLogoutClick,
+      loggedInUser
+    } = this.props;
 
     return (
       <I18n>
         {({ i18n }) => (
           <Toolbar>
             <ToolbarGroup>
-              <Tooltip
+              <Tooltip position="left" content={<div>{i18n._(t`Info`)}</div>}>
-                position="left"
-                content={
-                  <div>Help</div>
-                }
-              >
                 <ToolbarItem>
                   <Dropdown
                     isPlain
@@ -76,18 +73,12 @@ class PageHeaderToolbar extends Component {
                     position={DropdownPosition.right}
                     onSelect={this.handleHelpSelect}
                     toggle={(
-                      <DropdownToggle
+                      <DropdownToggle onToggle={this.handleHelpToggle}>
-                        onToggle={this.handleHelpToggle}
-                      >
                         <QuestionCircleIcon />
                       </DropdownToggle>
                     )}
                     dropdownItems={[
-                      <DropdownItem
+                      <DropdownItem key="help" target="_blank" href={DOCLINK}>
-                        key="help"
-                        target="_blank"
-                        href={DOCLINK}
-                      >
                         {i18n._(t`Help`)}
                       </DropdownItem>,
                       <DropdownItem
@@ -102,12 +93,7 @@ class PageHeaderToolbar extends Component {
                   />
                 </ToolbarItem>
               </Tooltip>
-              <Tooltip
+              <Tooltip position="left" content={<div>User</div>}>
-                position="left"
-                content={
-                  <div>User</div>
-                }
-              >
                 <ToolbarItem>
                   <Dropdown
                     isPlain
@@ -115,18 +101,17 @@ class PageHeaderToolbar extends Component {
                     position={DropdownPosition.right}
                     onSelect={this.handleUserSelect}
                     toggle={(
-                      <DropdownToggle
+                      <DropdownToggle onToggle={this.handleUserToggle}>
-                        onToggle={this.handleUserToggle}
-                      >
                         <UserIcon />
-                        &nbsp; User Name
+                        {loggedInUser && (
+                          <span style={{ marginLeft: '10px' }}>
+                            {loggedInUser.username}
+                          </span>
+                        )}
                       </DropdownToggle>
                     )}
                     dropdownItems={[
-                      <DropdownItem
+                      <DropdownItem key="user" href="#/home">
-                        key="user"
-                        href="#/home"
-                      >
                         {i18n._(t`User Details`)}
                       </DropdownItem>,
                       <DropdownItem
@@ -151,11 +136,11 @@ class PageHeaderToolbar extends Component {
 PageHeaderToolbar.propTypes = {
   isAboutDisabled: PropTypes.bool,
   onAboutClick: PropTypes.func.isRequired,
-  onLogoutClick: PropTypes.func.isRequired,
+  onLogoutClick: PropTypes.func.isRequired
 };
 
 PageHeaderToolbar.defaultProps = {
-  isAboutDisabled: false,
+  isAboutDisabled: false
 };
 
 export default PageHeaderToolbar;

src/contexts/Config.jsx

@@ -1,4 +1,3 @@
-
 import React, { Component } from 'react';
 
 import { withNetwork } from './Network';
@@ -33,12 +32,8 @@ class Provider extends Component {
     }
   }
 
-  updateConfig = (config) => {
+  updateConfig = config => {
-    const {
+    const { ansible_version, custom_virtualenvs, version } = config;
-      ansible_version,
-      custom_virtualenvs,
-      version
-    } = config;
 
     this.setState(prevState => ({
       value: {
@@ -46,31 +41,36 @@ class Provider extends Component {
         ansible_version,
         custom_virtualenvs,
         version
-      },
+      }
     }));
-  }
+  };
 
   async fetchMe () {
     const { api, handleHttpError } = this.props;
     try {
-      const { data: { results: [me] } } = await api.getMe();
+      const {
+        data: {
+          results: [me]
+        }
+      } = await api.getMe();
       this.setState(prevState => ({
         value: {
           ...prevState.value,
           me
-        },
+        }
       }));
     } catch (err) {
-      handleHttpError(err) || this.setState({
+      handleHttpError(err)
-        value: {
+        || this.setState({
-          ansible_version: null,
+          value: {
-          custom_virtualenvs: null,
+            ansible_version: null,
-          version: null,
+            custom_virtualenvs: null,
-          custom_logo: null,
+            version: null,
-          custom_login_info: null,
+            custom_logo: null,
-          me: {}
+            custom_login_info: null,
-        }
+            me: {}
-      });
+          }
+        });
     }
   }
 
@@ -90,20 +90,21 @@ class Provider extends Component {
           version: configRes.data.version,
           custom_logo: rootRes.data.custom_logo,
           custom_login_info: rootRes.data.custom_login_info,
-          me: meRes.data.results
+          me: meRes.data.results[0]
         }
       });
     } catch (err) {
-      handleHttpError(err) || this.setState({
+      handleHttpError(err)
-        value: {
+        || this.setState({
-          ansible_version: null,
+          value: {
-          custom_virtualenvs: null,
+            ansible_version: null,
-          version: null,
+            custom_virtualenvs: null,
-          custom_logo: null,
+            version: null,
-          custom_login_info: null,
+            custom_logo: null,
-          me: {}
+            custom_login_info: null,
-        }
+            me: {}
-      });
+          }
+        });
     }
   }
 
@@ -129,7 +130,5 @@ class Provider extends Component {
 export const ConfigProvider = withNetwork(Provider);
 
 export const Config = ({ children }) => (
-  <ConfigContext.Consumer>
+  <ConfigContext.Consumer>{value => children(value)}</ConfigContext.Consumer>
-    {value => children(value)}
-  </ConfigContext.Consumer>
 );