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
This commit is contained in:
parent
16514bf462
commit
108d8be077
|
@ -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>
|
||||
<a
|
||||
href="#"
|
||||
onClick={this.logout.bind(this)}
|
||||
id="NavBar__logoutLink"
|
||||
>
|
||||
<FormattedMessage {...messages.logoutLink} />
|
||||
</a>
|
||||
</li>
|
||||
<UserDropdown
|
||||
name={this.props.user.get('name')}
|
||||
logout={this.logout.bind(this)}
|
||||
/>
|
||||
</ul>
|
||||
<ul className="nav navbar-nav navbar-primary">
|
||||
<NavTab to="/plans" id="NavBar__PlansTab">
|
||||
|
|
|
@ -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);
|
Loading…
Reference in New Issue