Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(PXP-7097) Add optional alternate TopBar profile menu #759

Merged
merged 4 commits into from
Nov 16, 2020
Merged

(PXP-7097) Add optional alternate TopBar profile menu #759

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2452c0
Add optional alternate TopBar profile menu
olivarity Nov 13, 2020
23e1d65
Update portal_config.md
olivarity Nov 16, 2020
88cab35
correct placement prop
olivarity Nov 16, 2020
5891180
Merge branch 'master' into feat/midrc_profile
olivarity Nov 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/portal_config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@ Below is an example, with inline comments describing what each JSON block config
"link": "https://gen3.org/resources/user/",
"name": "Documentation"
}
]
],
"useProfileDropdown": false // optional; enables expiremental profile UI; defaults false, may change in future releases
},
"login": { // required; what is displayed on the login page (/login)
"title": "Gen3 Generic Data Commons", // optional; title for the login page
Expand Down
1 change: 1 addition & 0 deletions src/Layout/reduxer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const ReduxTopBar = (() => {
const mapStateToProps = state => ({
navTitle: components.navigation.title,
topItems: components.topBar.items,
useProfileDropdown: components.topBar.useProfileDropdown,
olivarity marked this conversation as resolved.
Show resolved Hide resolved
activeTab: state.bar.active,
user: state.user,
userAuthMapping: state.userAuthMapping,
Expand Down
31 changes: 30 additions & 1 deletion src/components/layout/TopBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Popover } from 'antd';
import PropTypes from 'prop-types';
import TopIconButton from './TopIconButton';
import './TopBar.less';
Expand Down Expand Up @@ -72,7 +73,7 @@ class TopBar extends Component {
)
}
{
this.props.user.username !== undefined
this.props.user.username !== undefined && this.props.useProfileDropdown !== true
&&
(
<React.Fragment>
Expand All @@ -93,6 +94,32 @@ class TopBar extends Component {
</React.Fragment>
)
}
{
this.props.user.username !== undefined && this.props.useProfileDropdown === true
&&
(
<Popover
title={this.props.user.username}
placement='bottomRight'
content={
<React.Fragment>
<Link to='/identity'>View Profile</Link>
<br/>
<Link to='#' onClick={this.props.onLogoutClick}>Logout</Link>
</React.Fragment>
}
>
<Link className='top-bar__link' to='#'>
<TopIconButton
icon='user-circle'
name=''
isActive={this.isActive('/identity')}
onActiveTab={() => this.props.onActiveTab('/identity')}
/>
</Link>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought for this part there were some inconsistence in the design. Have we made a dicision that whether we display only a single icon or icon + username after user has logged in

If we decide to keep only a single icon, can you adjust the placement of the popover so the arrow gets pointed to the icon?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Either option is feasible, we'll have to put that one up to the team. Pushing a commit with correct placement now, that was just a temporary change that slipped through during experimentation.

</Popover>
)
}
{
typeof this.props.user.username === 'undefined'
&&
Expand All @@ -116,6 +143,7 @@ class TopBar extends Component {

TopBar.propTypes = {
topItems: PropTypes.array.isRequired,
useProfileDropdown: PropTypes.bool,
user: PropTypes.shape({ username: PropTypes.string }).isRequired,
userAuthMapping: PropTypes.object.isRequired,
activeTab: PropTypes.string,
Expand All @@ -124,6 +152,7 @@ TopBar.propTypes = {
};

TopBar.defaultProps = {
useProfileDropdown: false,
activeTab: '',
onActiveTab: () => {},
};
Expand Down