Skip to content

Commit 7918eee

Browse files
author
David Emory
committed
feat(manager): Refactor user action buttons to common component
1 parent 12e7fac commit 7918eee

File tree

4 files changed

+78
-71
lines changed

4 files changed

+78
-71
lines changed

lib/common/components/Sidebar.js

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import Icon from '@conveyal/woonerf/components/icon'
21
import Pure from '@conveyal/woonerf/components/pure'
32
import React, {PropTypes} from 'react'
4-
import {Navbar, Button, ButtonToolbar, Checkbox} from 'react-bootstrap'
3+
import {Navbar, Checkbox} from 'react-bootstrap'
54
import {Link} from 'react-router'
65

76
import SidebarNavItem from './SidebarNavItem'
87
import SidebarPopover from './SidebarPopover'
98
import JobMonitor from './JobMonitor'
10-
import {getConfigProperty} from '../util/config'
9+
import UserButtons from './UserButtons'
1110

1211
export default class Sidebar extends Pure {
1312
static propTypes = {
1413
expanded: PropTypes.bool,
1514
jobMonitor: PropTypes.object,
16-
username: PropTypes.string,
17-
userPicture: PropTypes.string,
15+
user: PropTypes.object,
1816
login: PropTypes.func,
1917
logout: PropTypes.func,
2018
resetPassword: PropTypes.func,
@@ -32,11 +30,6 @@ export default class Sidebar extends Pure {
3230
}
3331
}
3432

35-
_clickChangePassword = () => {
36-
this.setState({visiblePopover: null})
37-
this.props.resetPassword()
38-
}
39-
4033
_clickLogOut = () => {
4134
this.setState({visiblePopover: null})
4235
this.props.logout()
@@ -59,7 +52,7 @@ export default class Sidebar extends Pure {
5952
_toggleTutorial = () => this.props.setTutorialHidden(!this.props.hideTutorial)
6053

6154
render () {
62-
const {children, expanded, userPicture} = this.props
55+
const {children, expanded, user, userPicture} = this.props
6356
const navbarStyle = {
6457
width: expanded ? 130 : 50,
6558
minHeight: '500px'
@@ -98,40 +91,28 @@ export default class Sidebar extends Pure {
9891
onClick={this._selectHelp} />
9992
</div>
10093
</Navbar>
94+
95+
{/* Job Monitor Popover */}
10196
<JobMonitor
10297
jobMonitor={this.props.jobMonitor}
10398
target={this.refs.jobNav}
10499
expanded={this.props.expanded}
105100
visible={this.state.visiblePopover === 'job'}
106101
close={this._closePopover}
107102
removeRetiredJob={this.props.removeRetiredJob} />
103+
104+
{/* User Popover */}
108105
<SidebarPopover
109106
target={this.refs.userNav}
110-
title={this.props.username}
107+
title={user.profile ? user.profile.email : null}
111108
expanded={this.props.expanded}
112109
visible={this.state.visiblePopover === 'user'}
113-
close={this._closePopover}>
114-
<ButtonToolbar>
115-
<Button
116-
bsSize='small'
117-
bsStyle='info'
118-
onClick={this._clickChangePassword}>Change password
119-
</Button>
120-
{getConfigProperty('application.dev')
121-
? <Button
122-
bsSize='small'
123-
bsStyle='info'
124-
onClick={this._clickRevokeToken}><Icon type='sign-out' /> Revoke token
125-
</Button>
126-
: null
127-
}
128-
<Button
129-
bsSize='small'
130-
bsStyle='info'
131-
onClick={this._clickLogOut}><Icon type='sign-out' /> Log out
132-
</Button>
133-
</ButtonToolbar>
110+
close={this._closePopover}
111+
>
112+
<UserButtons user={user} logoutHandler={this._clickLogOut} />
134113
</SidebarPopover>
114+
115+
{/* Settings Popover */}
135116
<SidebarPopover
136117
target={this.refs.settingsNav}
137118
title='Settings'

lib/common/components/UserButtons.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { Component, PropTypes } from 'react'
2+
import { Button } from 'react-bootstrap'
3+
import { LinkContainer } from 'react-router-bootstrap'
4+
import Icon from '@conveyal/woonerf/components/icon'
5+
6+
/**
7+
* A common component containing buttons for standard user actions: "My
8+
* Account", "Site Admin", and "Logout"
9+
*/
10+
11+
export default class UserButtons extends Component {
12+
static propTypes = {
13+
logoutHandler: PropTypes.func,
14+
user: PropTypes.object
15+
}
16+
17+
render () {
18+
const { logoutHandler, user } = this.props
19+
const buttonStyle = { margin: 2 }
20+
return (
21+
<div style={{ marginTop: 15, textAlign: 'center' }}>
22+
<LinkContainer to='/settings/profile'>
23+
<Button bsStyle='primary' bsSize='small' style={buttonStyle}>
24+
<Icon type='user' /> My account
25+
</Button>
26+
</LinkContainer>
27+
{user.permissions && user.permissions.isApplicationAdmin() &&
28+
user.permissions.canAdministerAnOrganization() && (
29+
<LinkContainer to='/admin/users'>
30+
<Button
31+
bsStyle='success'
32+
bsSize='small'
33+
style={buttonStyle}
34+
>
35+
<Icon type='cog' /> Site Admin
36+
</Button>
37+
</LinkContainer>
38+
)
39+
}
40+
<Button
41+
style={buttonStyle}
42+
bsSize='small'
43+
bsStyle='primary'
44+
onClick={logoutHandler}>
45+
<Icon type='sign-out' /> Logout
46+
</Button>
47+
</div>
48+
)
49+
}
50+
}

lib/common/containers/ActiveSidebar.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ const mapStateToProps = (state, ownProps) => {
1010
return {
1111
expanded: state.ui.sidebarExpanded,
1212
hideTutorial: state.ui.hideTutorial,
13-
username: state.user.profile ? state.user.profile.email : null,
14-
// userPicture: state.user.profile ? state.user.profile.picture : null,
15-
userIsAdmin: state.user.profile && state.user.permissions.isApplicationAdmin(),
16-
profile: state.user.profile,
13+
user: state.user,
1714
projects: state.projects ? state.projects : null,
1815
languages: state.languages ? state.languages : ['English', 'Español', 'Français'],
1916
jobMonitor: state.status.jobMonitor

lib/manager/components/UserAccountInfoPanel.js

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import Icon from '@conveyal/woonerf/components/icon'
21
import React, {Component, PropTypes} from 'react'
3-
import { Panel, Badge, Button, Row, Col, ButtonToolbar } from 'react-bootstrap'
4-
import { LinkContainer } from 'react-router-bootstrap'
2+
import { Panel, Badge, Row, Col } from 'react-bootstrap'
3+
4+
import UserButtons from '../../common/components/UserButtons'
55

66
export default class UserAccountInfoPanel extends Component {
77
static propTypes = {
88
user: PropTypes.object,
99
logoutHandler: PropTypes.func
1010
}
11+
1112
render () {
1213
const {
1314
user,
@@ -16,25 +17,15 @@ export default class UserAccountInfoPanel extends Component {
1617
// const userOrganization = user.permissions.getOrganizationId()
1718
return (
1819
<Panel>
19-
<Row>
20-
<Col xs={12}>
21-
<h4 style={{marginTop: 0, marginBottom: 15}}>
22-
<Button
23-
className='pull-right'
24-
bsSize='small'
25-
onClick={logoutHandler}>
26-
<Icon type='sign-out' /> Log out
27-
</Button>
28-
Hello, {user.profile.nickname}.
29-
</h4>
30-
</Col>
31-
</Row>
3220
<Row>
3321
<Col xs={4}>
3422
<img alt='Profile' style={{ width: '100%', borderRadius: '50%' }} src={user.profile.picture} />
3523
</Col>
3624
<Col md={8}>
37-
<div className='text-muted'><Icon type='user' /> {user.profile.email}</div>
25+
<h4 style={{marginTop: 0, marginBottom: 15}}>
26+
Hello, {user.profile.nickname}.
27+
</h4>
28+
<div className='text-muted'>{user.profile.email}</div>
3829
<div>
3930
<Badge className='text-muted'>
4031
{user.permissions.isApplicationAdmin()
@@ -52,23 +43,11 @@ export default class UserAccountInfoPanel extends Component {
5243
</Badge>
5344
*/}
5445
</div>
55-
<div style={{ marginTop: 15 }}>
56-
<ButtonToolbar className='pull-right'>
57-
<LinkContainer to='/settings/profile'>
58-
<Button bsStyle='primary' bsSize='small'>
59-
<Icon type='cog' /> Manage account
60-
</Button>
61-
</LinkContainer>
62-
{user.permissions.isApplicationAdmin() || user.permissions.canAdministerAnOrganization()
63-
? <LinkContainer to='/admin/users'>
64-
<Button bsStyle='default' bsSize='small'>
65-
<Icon type='cog' /> Admin
66-
</Button>
67-
</LinkContainer>
68-
: null
69-
}
70-
</ButtonToolbar>
71-
</div>
46+
</Col>
47+
</Row>
48+
<Row>
49+
<Col>
50+
<UserButtons user={user} logoutHandler={logoutHandler} />
7251
</Col>
7352
</Row>
7453
</Panel>

0 commit comments

Comments
 (0)