PM-1609 - add navigation for user management

src/components/Buttons/OutlineButton/index.js

@@ -22,7 +22,7 @@ const OutlineButton = ({ type, text, link, onClick, url, className, submit, disa
 
   if (!_.isEmpty(link)) {
     return (
-      <Link className={cn(styles.container, styles[type], className)} to={`${link}`}>
+      <Link className={cn(styles.container, styles[type], className)} to={link}>
         <span>{text}</span>
       </Link>
     )
@@ -38,7 +38,7 @@ const OutlineButton = ({ type, text, link, onClick, url, className, submit, disa
 OutlineButton.propTypes = {
   type: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
-  link: PropTypes.string,
+  link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   url: PropTypes.string,
   className: PropTypes.string,
   onClick: PropTypes.func,

src/components/ChallengesComponent/index.js

@@ -91,6 +91,18 @@ const ChallengesComponent = ({
         </div>
         {activeProject && activeProject.id && !isReadOnly ? (
           <div className={styles.projectActionButtonWrapper}>
+            {(checkAdmin(auth.token) || checkManager(auth.token)) && (
+              <OutlineButton
+                text={'Users'}
+                type='danger'
+                submit
+                link={{
+                  pathname: '/users',
+                  state: { projectId: activeProjectId, projectName: activeProject.name }
+                }}
+                className={styles.btnOutline}
+              />
+            )}
             {isAdminOrCopilot && (
               <OutlineButton
                 text={'Assets Library'}

src/components/Users/index.js

@@ -14,6 +14,7 @@ import ConfirmationModal from '../Modal/ConfirmationModal'
 import UserAddModalContent from './user-add.modal'
 import InviteUserModalContent from './invite-user.modal' // Import the new component
 import Loader from '../Loader'
+import { OutlineButton } from '../Buttons'
 
 const theme = {
   container: styles.modalContainer
@@ -44,6 +45,14 @@ class Users extends Component {
 
     this.debouncedOnInputChange = _.debounce(this.onInputChange, AUTOCOMPLETE_DEBOUNCE_TIME_MS)
   }
+  componentDidMount () {
+    if (this.props.initialProject && this.props.initialProject.id) {
+      this.setProjectOption({
+        value: this.props.initialProject.id,
+        label: this.props.initialProject.name
+      })
+    }
+  }
 
   setProjectOption (projectOption) {
     this.setState({ projectOption })
@@ -165,7 +174,8 @@ class Users extends Component {
       isLoadingProject
     } = this.props
     const {
-      searchKey
+      searchKey,
+      projectOption
     } = this.state
     const projectOptions = ((searchKey ? resultSearchUserProjects : projects) || []).map(p => {
       return {
@@ -204,20 +214,28 @@ class Users extends Component {
           </div>
         </div>
 
-        {
-          showAddUser && (
-            <div className={styles.addButtonContainer}>
-              <PrimaryButton
-                text={'Add User'}
-                type={'info'}
-                onClick={() => this.onAddUserClick()} />
-              <PrimaryButton
-                text={'Invite User'}
-                type={'info'}
-                onClick={() => this.onInviteUserClick()} />
-            </div>
-          )
-        }
+        <div className={styles.addButtonContainer}>
+          {
+            showAddUser && (
+              <>
+                <PrimaryButton
+                  text={'Add User'}
+                  type={'info'}
+                  onClick={() => this.onAddUserClick()} />
+                <PrimaryButton
+                  text={'Invite User'}
+                  type={'info'}
+                  onClick={() => this.onInviteUserClick()} />
+              </>
+            )
+          }
+          {projectOption && (
+            <OutlineButton
+              text={'Go To Project'}
+              type={'danger'}
+              link={`/projects/${projectOption.value}/challenges`} />
+          )}
+        </div>
         {
           this.state.showAddUserModal && (
             <UserAddModalContent
@@ -318,6 +336,10 @@ class Users extends Component {
 }
 
 Users.propTypes = {
+  initialProject: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string
+  }),
   loadProject: PropTypes.func.isRequired,
   updateProjectMember: PropTypes.func.isRequired,
   removeProjectMember: PropTypes.func.isRequired,

src/containers/Users/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 import PT from 'prop-types'
+import { withRouter } from 'react-router-dom'
 import UsersComponent from '../../components/Users'
 import { PROJECT_ROLES } from '../../config/constants'
 import { fetchInviteMembers, fetchProjectById } from '../../services/projects'
@@ -22,7 +23,11 @@ class Users extends Component {
       projectMembers: null,
       invitedMembers: null,
       isAdmin: false,
-      isLoadingProject: false
+      isLoadingProject: false,
+      project: props.location.state && props.location.state.projectId ? {
+        id: props.location.state && props.location.state.projectId,
+        name: props.location.state && props.location.state.projectName
+      } : null
     }
     this.loadProject = this.loadProject.bind(this)
     this.updateProjectMember = this.updateProjectMember.bind(this)
@@ -33,7 +38,7 @@ class Users extends Component {
   }
 
   componentDidMount () {
-    const { token, isLoading, loadAllUserProjects, page } = this.props
+    const { token, isLoading, loadAllUserProjects, page, location } = this.props
     if (!isLoading) {
       const isAdmin = checkAdmin(token)
       const isManager = checkManager(token)
@@ -44,6 +49,10 @@ class Users extends Component {
       this.setState({
         isAdmin
       })
+
+      if (location.state && location.state.projectId) {
+        this.loadProject(location.state.projectId)
+      }
     }
   }
 
@@ -157,13 +166,15 @@ class Users extends Component {
       isSearchingUserProjects
     } = this.props
     const {
+      project,
       projectMembers,
       invitedMembers,
       isAdmin,
       isLoadingProject
     } = this.state
     return (
       <UsersComponent
+        initialProject={project}
         projects={projects}
         loadProject={this.loadProject}
         updateProjectMember={this.updateProjectMember}
@@ -201,6 +212,7 @@ const mapStateToProps = ({ users, auth }) => {
 }
 
 Users.propTypes = {
+  location: PT.object.isRequired,
   projects: PT.arrayOf(PT.object),
   resultSearchUserProjects: PT.arrayOf(PT.object),
   auth: PT.object,
@@ -220,4 +232,4 @@ const mapDispatchToProps = {
   loadNextProjects
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Users)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Users))