Move Logout under User Name Dropdown

This patch cleans up the navigation a bit and tucks the logout
action under a new dropdown that shows the username. This will
help reduce any errant logouts and follow the PatternFly logout
pattern. This change fixes one bug and partially fixes another.

Change-Id: I525af00f4c121fcae7f186d1a4d61ade8d8b33f6
Closes-Bug: #1727501
Partial-Bug: #1691113

src/js/components/NavBar.js

@@ -27,6 +27,7 @@ import LoginActions from '../actions/LoginActions';
 import NavTab from './ui/NavTab';
 import I18nDropdown from './i18n/I18nDropdown';
 import StatusDropdown from './StatusDropdown';
+import UserDropdown from './UserDropdown';
 import ValidationsActions from '../actions/ValidationsActions';
 import ValidationsList from './validations/ValidationsList';
 import ValidationsToggle from './validations/ValidationsToggle';
@@ -38,10 +39,6 @@ const messages = defineMessages({
     id: 'NavBar.toggleNavigation',
     defaultMessage: 'Toggle navigation'
   },
-  logoutLink: {
-    id: 'NavBar.logoutLink',
-    defaultMessage: 'Logout'
-  },
   plansTab: {
     id: 'NavBar.plansTab',
     defaultMessage: 'Plans'
@@ -118,12 +115,6 @@ class NavBar extends React.Component {
             id="tripleo-navbar-collapse"
           >
             <ul className="nav navbar-nav navbar-utility">
-              <li>
-                <a id="NavBar__username">
-                  <span className="pficon pficon-user" />
-                  {this.props.user.get('name')}
-                </a>
-              </li>
               {this._renderLanguageDropdown()}
               {this._renderHelpDropdown()}
               <ValidationsToggle
@@ -133,15 +124,10 @@ class NavBar extends React.Component {
                 validationStatusCounts={validationStatusCounts}
                 validationsLoaded={validationsLoaded}
               />
-              <li>
+              <UserDropdown
-                <a
+                name={this.props.user.get('name')}
-                  href="#"
+                logout={this.logout.bind(this)}
-                  onClick={this.logout.bind(this)}
+              />
-                  id="NavBar__logoutLink"
-                >
-                  <FormattedMessage {...messages.logoutLink} />
-                </a>
-              </li>
             </ul>
             <ul className="nav navbar-nav navbar-primary">
               <NavTab to="/plans" id="NavBar__PlansTab">

src/js/components/UserDropdown.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright 2018 Red Hat Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License. You may obtain
+ * a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+
+import Dropdown from '../components/ui/dropdown/Dropdown';
+import DropdownToggle from '../components/ui/dropdown/DropdownToggle';
+import DropdownItem from '../components/ui/dropdown/DropdownItem';
+
+import PropTypes from 'prop-types';
+
+const messages = defineMessages({
+  logout: {
+    id: 'UserDropdown.logout',
+    defaultMessage: 'Log Out'
+  }
+});
+
+class UserDropdown extends React.Component {
+  render() {
+    return (
+      <li>
+        <Dropdown>
+          <DropdownToggle>
+            <span className="pficon pficon-user" /> {this.props.name}
+            <b className="caret" />
+          </DropdownToggle>
+          <DropdownItem onClick={this.props.logout}>
+            <FormattedMessage {...messages.logout} />
+          </DropdownItem>
+        </Dropdown>
+      </li>
+    );
+  }
+}
+
+UserDropdown.propTypes = {
+  logout: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired
+};
+
+export default injectIntl(UserDropdown);