feat(manager): Refactor user action buttons to common component

Author: David Emory

lib/common/components/Sidebar.js

@@ -1,20 +1,18 @@
-import Icon from '@conveyal/woonerf/components/icon'
 import Pure from '@conveyal/woonerf/components/pure'
 import React, {PropTypes} from 'react'
-import {Navbar, Button, ButtonToolbar, Checkbox} from 'react-bootstrap'
+import {Navbar, Checkbox} from 'react-bootstrap'
 import {Link} from 'react-router'
 
 import SidebarNavItem from './SidebarNavItem'
 import SidebarPopover from './SidebarPopover'
 import JobMonitor from './JobMonitor'
-import {getConfigProperty} from '../util/config'
+import UserButtons from './UserButtons'
 
 export default class Sidebar extends Pure {
   static propTypes = {
     expanded: PropTypes.bool,
     jobMonitor: PropTypes.object,
-    username: PropTypes.string,
-    userPicture: PropTypes.string,
+    user: PropTypes.object,
     login: PropTypes.func,
     logout: PropTypes.func,
     resetPassword: PropTypes.func,
@@ -32,11 +30,6 @@ export default class Sidebar extends Pure {
     }
   }
 
-  _clickChangePassword = () => {
-    this.setState({visiblePopover: null})
-    this.props.resetPassword()
-  }
-
   _clickLogOut = () => {
     this.setState({visiblePopover: null})
     this.props.logout()
@@ -59,7 +52,7 @@ export default class Sidebar extends Pure {
   _toggleTutorial = () => this.props.setTutorialHidden(!this.props.hideTutorial)
 
   render () {
-    const {children, expanded, userPicture} = this.props
+    const {children, expanded, user, userPicture} = this.props
     const navbarStyle = {
       width: expanded ? 130 : 50,
       minHeight: '500px'
@@ -98,40 +91,28 @@ export default class Sidebar extends Pure {
               onClick={this._selectHelp} />
           </div>
         </Navbar>
+
+        {/* Job Monitor Popover */}
         <JobMonitor
           jobMonitor={this.props.jobMonitor}
           target={this.refs.jobNav}
           expanded={this.props.expanded}
           visible={this.state.visiblePopover === 'job'}
           close={this._closePopover}
           removeRetiredJob={this.props.removeRetiredJob} />
+
+        {/* User Popover */}
         <SidebarPopover
           target={this.refs.userNav}
-          title={this.props.username}
+          title={user.profile ? user.profile.email : null}
           expanded={this.props.expanded}
           visible={this.state.visiblePopover === 'user'}
-          close={this._closePopover}>
-          <ButtonToolbar>
-            <Button
-              bsSize='small'
-              bsStyle='info'
-              onClick={this._clickChangePassword}>Change password
-            </Button>
-            {getConfigProperty('application.dev')
-              ? <Button
-                bsSize='small'
-                bsStyle='info'
-                onClick={this._clickRevokeToken}><Icon type='sign-out' /> Revoke token
-              </Button>
-              : null
-            }
-            <Button
-              bsSize='small'
-              bsStyle='info'
-              onClick={this._clickLogOut}><Icon type='sign-out' /> Log out
-            </Button>
-          </ButtonToolbar>
+          close={this._closePopover}
+        >
+          <UserButtons user={user} logoutHandler={this._clickLogOut} />
         </SidebarPopover>
+
+        {/* Settings Popover */}
         <SidebarPopover
           target={this.refs.settingsNav}
           title='Settings'

lib/common/components/UserButtons.js

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react'
+import { Button } from 'react-bootstrap'
+import { LinkContainer } from 'react-router-bootstrap'
+import Icon from '@conveyal/woonerf/components/icon'
+
+/**
+ *  A common component containing buttons for standard user actions: "My
+ *  Account", "Site Admin", and "Logout"
+ */
+
+export default class UserButtons extends Component {
+  static propTypes = {
+    logoutHandler: PropTypes.func,
+    user: PropTypes.object
+  }
+
+  render () {
+    const { logoutHandler, user } = this.props
+    const buttonStyle = { margin: 2 }
+    return (
+      <div style={{ marginTop: 15, textAlign: 'center' }}>
+        <LinkContainer to='/settings/profile'>
+          <Button bsStyle='primary' bsSize='small' style={buttonStyle}>
+            <Icon type='user' /> My account
+          </Button>
+        </LinkContainer>
+        {user.permissions && user.permissions.isApplicationAdmin() &&
+          user.permissions.canAdministerAnOrganization() && (
+            <LinkContainer to='/admin/users'>
+              <Button
+                bsStyle='success'
+                bsSize='small'
+                style={buttonStyle}
+              >
+                <Icon type='cog' /> Site Admin
+              </Button>
+            </LinkContainer>
+          )
+        }
+        <Button
+          style={buttonStyle}
+          bsSize='small'
+          bsStyle='primary'
+          onClick={logoutHandler}>
+          <Icon type='sign-out' /> Logout
+        </Button>
+      </div>
+    )
+  }
+}

lib/common/containers/ActiveSidebar.js

@@ -10,10 +10,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     expanded: state.ui.sidebarExpanded,
     hideTutorial: state.ui.hideTutorial,
-    username: state.user.profile ? state.user.profile.email : null,
-    // userPicture: state.user.profile ? state.user.profile.picture : null,
-    userIsAdmin: state.user.profile && state.user.permissions.isApplicationAdmin(),
-    profile: state.user.profile,
+    user: state.user,
     projects: state.projects ? state.projects : null,
     languages: state.languages ? state.languages : ['English', 'Español', 'Français'],
     jobMonitor: state.status.jobMonitor

lib/manager/components/UserAccountInfoPanel.js

@@ -1,13 +1,14 @@
-import Icon from '@conveyal/woonerf/components/icon'
 import React, {Component, PropTypes} from 'react'
-import { Panel, Badge, Button, Row, Col, ButtonToolbar } from 'react-bootstrap'
-import { LinkContainer } from 'react-router-bootstrap'
+import { Panel, Badge, Row, Col } from 'react-bootstrap'
+
+import UserButtons from '../../common/components/UserButtons'
 
 export default class UserAccountInfoPanel extends Component {
   static propTypes = {
     user: PropTypes.object,
     logoutHandler: PropTypes.func
   }
+
   render () {
     const {
       user,
@@ -16,25 +17,15 @@ export default class UserAccountInfoPanel extends Component {
     // const userOrganization = user.permissions.getOrganizationId()
     return (
       <Panel>
-        <Row>
-          <Col xs={12}>
-            <h4 style={{marginTop: 0, marginBottom: 15}}>
-              <Button
-                className='pull-right'
-                bsSize='small'
-                onClick={logoutHandler}>
-                <Icon type='sign-out' /> Log out
-              </Button>
-              Hello, {user.profile.nickname}.
-            </h4>
-          </Col>
-        </Row>
         <Row>
           <Col xs={4}>
             <img alt='Profile' style={{ width: '100%', borderRadius: '50%' }} src={user.profile.picture} />
           </Col>
           <Col md={8}>
-            <div className='text-muted'><Icon type='user' /> {user.profile.email}</div>
+            <h4 style={{marginTop: 0, marginBottom: 15}}>
+              Hello, {user.profile.nickname}.
+            </h4>
+            <div className='text-muted'>{user.profile.email}</div>
             <div>
               <Badge className='text-muted'>
                 {user.permissions.isApplicationAdmin()
@@ -52,23 +43,11 @@ export default class UserAccountInfoPanel extends Component {
                 </Badge>
               */}
             </div>
-            <div style={{ marginTop: 15 }}>
-              <ButtonToolbar className='pull-right'>
-                <LinkContainer to='/settings/profile'>
-                  <Button bsStyle='primary' bsSize='small'>
-                    <Icon type='cog' /> Manage account
-                  </Button>
-                </LinkContainer>
-                {user.permissions.isApplicationAdmin() || user.permissions.canAdministerAnOrganization()
-                  ? <LinkContainer to='/admin/users'>
-                    <Button bsStyle='default' bsSize='small'>
-                      <Icon type='cog' /> Admin
-                    </Button>
-                  </LinkContainer>
-                  : null
-                }
-              </ButtonToolbar>
-            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <UserButtons user={user} logoutHandler={logoutHandler} />
           </Col>
         </Row>
       </Panel>