Browse Source

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
tags/9.0.0
Liz Blanchard 1 year ago
parent
commit
108d8be077
2 changed files with 61 additions and 19 deletions
  1. 5
    19
      src/js/components/NavBar.js
  2. 56
    0
      src/js/components/UserDropdown.js

+ 5
- 19
src/js/components/NavBar.js View File

@@ -27,6 +27,7 @@ import LoginActions from '../actions/LoginActions';
27 27
 import NavTab from './ui/NavTab';
28 28
 import I18nDropdown from './i18n/I18nDropdown';
29 29
 import StatusDropdown from './StatusDropdown';
30
+import UserDropdown from './UserDropdown';
30 31
 import ValidationsActions from '../actions/ValidationsActions';
31 32
 import ValidationsList from './validations/ValidationsList';
32 33
 import ValidationsToggle from './validations/ValidationsToggle';
@@ -38,10 +39,6 @@ const messages = defineMessages({
38 39
     id: 'NavBar.toggleNavigation',
39 40
     defaultMessage: 'Toggle navigation'
40 41
   },
41
-  logoutLink: {
42
-    id: 'NavBar.logoutLink',
43
-    defaultMessage: 'Logout'
44
-  },
45 42
   plansTab: {
46 43
     id: 'NavBar.plansTab',
47 44
     defaultMessage: 'Plans'
@@ -118,12 +115,6 @@ class NavBar extends React.Component {
118 115
             id="tripleo-navbar-collapse"
119 116
           >
120 117
             <ul className="nav navbar-nav navbar-utility">
121
-              <li>
122
-                <a id="NavBar__username">
123
-                  <span className="pficon pficon-user" />
124
-                  {this.props.user.get('name')}
125
-                </a>
126
-              </li>
127 118
               {this._renderLanguageDropdown()}
128 119
               {this._renderHelpDropdown()}
129 120
               <ValidationsToggle
@@ -133,15 +124,10 @@ class NavBar extends React.Component {
133 124
                 validationStatusCounts={validationStatusCounts}
134 125
                 validationsLoaded={validationsLoaded}
135 126
               />
136
-              <li>
137
-                <a
138
-                  href="#"
139
-                  onClick={this.logout.bind(this)}
140
-                  id="NavBar__logoutLink"
141
-                >
142
-                  <FormattedMessage {...messages.logoutLink} />
143
-                </a>
144
-              </li>
127
+              <UserDropdown
128
+                name={this.props.user.get('name')}
129
+                logout={this.logout.bind(this)}
130
+              />
145 131
             </ul>
146 132
             <ul className="nav navbar-nav navbar-primary">
147 133
               <NavTab to="/plans" id="NavBar__PlansTab">

+ 56
- 0
src/js/components/UserDropdown.js View File

@@ -0,0 +1,56 @@
1
+/**
2
+ * Copyright 2018 Red Hat Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may
5
+ * not use this file except in compliance with the License. You may obtain
6
+ * a copy of the License at
7
+ *
8
+ *    http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13
+ * License for the specific language governing permissions and limitations
14
+ * under the License.
15
+ */
16
+
17
+import React from 'react';
18
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
19
+
20
+import Dropdown from '../components/ui/dropdown/Dropdown';
21
+import DropdownToggle from '../components/ui/dropdown/DropdownToggle';
22
+import DropdownItem from '../components/ui/dropdown/DropdownItem';
23
+
24
+import PropTypes from 'prop-types';
25
+
26
+const messages = defineMessages({
27
+  logout: {
28
+    id: 'UserDropdown.logout',
29
+    defaultMessage: 'Log Out'
30
+  }
31
+});
32
+
33
+class UserDropdown extends React.Component {
34
+  render() {
35
+    return (
36
+      <li>
37
+        <Dropdown>
38
+          <DropdownToggle>
39
+            <span className="pficon pficon-user" /> {this.props.name}
40
+            <b className="caret" />
41
+          </DropdownToggle>
42
+          <DropdownItem onClick={this.props.logout}>
43
+            <FormattedMessage {...messages.logout} />
44
+          </DropdownItem>
45
+        </Dropdown>
46
+      </li>
47
+    );
48
+  }
49
+}
50
+
51
+UserDropdown.propTypes = {
52
+  logout: PropTypes.func.isRequired,
53
+  name: PropTypes.string.isRequired
54
+};
55
+
56
+export default injectIntl(UserDropdown);

Loading…
Cancel
Save