Merge pull request #1671 from topcoder-platform/develop

[PROD] release - Minor navigation enhancement & search fix

Author: jmgasper

src/actions/projects.js

@@ -52,7 +52,7 @@ function _loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
       if (!isNaN(projectNameOrIdFilter)) { // if it is number
         filters['id'] = parseInt(projectNameOrIdFilter, 10)
       } else { // text search
-        filters['keyword'] = decodeURIComponent(projectNameOrIdFilter)
+        filters['keyword'] = `"${decodeURIComponent(projectNameOrIdFilter)}"`
       }
     }
 

src/actions/users.js

@@ -82,7 +82,7 @@ export function searchUserProjects (isAdmin = true, keyword) {
       sort: 'updatedAt desc',
       perPage: 20,
       page: 1,
-      keyword
+      keyword: `"${keyword}"`
     }
     if (!isAdmin) {
       filters['memberOnly'] = true

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,16 @@ const ChallengesComponent = ({
         </div>
         {activeProject && activeProject.id && !isReadOnly ? (
           <div className={styles.projectActionButtonWrapper}>
+            <OutlineButton
+              text={'Users'}
+              type='info'
+              submit
+              link={{
+                pathname: '/users',
+                state: { projectId: activeProjectId, projectName: activeProject.name }
+              }}
+              className={styles.btnOutline}
+            />
             {isAdminOrCopilot && (
               <OutlineButton
                 text={'Assets Library'}

src/components/Select/styles.js

@@ -55,6 +55,9 @@ export default {
     paddingRight: '6px',
     paddingLeft: '10px',
     border: 'none',
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: '1fr',
     input: {
       width: '100% !important',
       height: 'auto !important',

src/components/Users/Users.module.scss

@@ -52,8 +52,6 @@
   align-items: center;
 
   input {
-    max-width: 280px;
-
     @include upto-sm {
       display: block;
       padding-bottom: 10px;
@@ -413,7 +411,7 @@
   margin-bottom: 20px;
   gap: 8px;
   > * {
-    width: 125px;
+    width: max-content;
   }
 }
 

src/components/Users/index.js

@@ -44,6 +44,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 +173,8 @@ class Users extends Component {
       isLoadingProject
     } = this.props
     const {
-      searchKey
+      searchKey,
+      projectOption
     } = this.state
     const projectOptions = ((searchKey ? resultSearchUserProjects : projects) || []).map(p => {
       return {
@@ -204,20 +213,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 && (
+            <PrimaryButton
+              text={'Go To Project'}
+              type={'info'}
+              link={`/projects/${projectOption.value}/challenges`} />
+          )}
+        </div>
         {
           this.state.showAddUserModal && (
             <UserAddModalContent
@@ -318,6 +335,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/config/constants.js

@@ -59,7 +59,7 @@ export const FILE_PICKER_PROGRESS_INTERVAL = 100
 export const FILE_PICKER_UPLOAD_RETRY = 2
 export const FILE_PICKER_UPLOAD_TIMEOUT = 30 * 60 * 1000 // 30 minutes
 export const SPECIFICATION_ATTACHMENTS_FOLDER = 'SPECIFICATION_ATTACHMENTS'
-export const MEMBERS_API_URL = process.env.MEMBERS_API_URL
+export const MEMBERS_API_URL = process.env.MEMBER_API_URL
 
 export const getAWSContainerFileURL = (key) => `https://${FILE_PICKER_CONTAINER_NAME}.s3.amazonaws.com/${key}`
 

src/containers/Projects/styles.module.scss

@@ -51,6 +51,10 @@
     border-radius: 3px;
     border: 1px solid $light-gray;
     background-color: $lighter-gray;
+
+    > div {
+      width: 100%;
+    }
   }
 
   .tcCheckbox {

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))