Read only user fix - don’t allow them to remove users

Author: jmgasper

src/components/UserCard/UserCard.module.scss

@@ -40,6 +40,10 @@
     display: none;
   }
 
+  .isDisabled {
+    pointer-events: none;
+  }
+
   label {
     @include roboto-light();
 

src/components/UserCard/index.js

@@ -60,7 +60,7 @@ class UserCard extends Component {
   }
 
   render () {
-    const { user, onRemoveClick } = this.props
+    const { user, onRemoveClick, isEditable } = this.props
     const showRadioButtons = _.includes(_.values(PROJECT_ROLES), user.role)
     return (
       <div>
@@ -103,7 +103,7 @@ class UserCard extends Component {
                 checked={user.role === PROJECT_ROLES.READ}
                 onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.READ)}
               />
-              <label htmlFor={`read-${user.id}`}>
+              <label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`read-${user.id}`}>
                 <div>
                   Read
                 </div>
@@ -120,7 +120,7 @@ class UserCard extends Component {
                 checked={user.role === PROJECT_ROLES.WRITE}
                 onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.WRITE)}
               />
-              <label htmlFor={`write-${user.id}`}>
+              <label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`write-${user.id}`}>
                 <div>
                   Write
                 </div>
@@ -137,7 +137,7 @@ class UserCard extends Component {
                 checked={user.role === PROJECT_ROLES.MANAGER}
                 onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.MANAGER)}
               />
-              <label htmlFor={`full-access-${user.id}`}>
+              <label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`full-access-${user.id}`}>
                 <div>
                   Full Access
                 </div>
@@ -154,20 +154,20 @@ class UserCard extends Component {
                 checked={user.role === PROJECT_ROLES.COPILOT}
                 onChange={(e) => e.target.checked && this.updatePermission(PROJECT_ROLES.COPILOT)}
               />
-              <label htmlFor={`copilot-${user.id}`}>
+              <label className={cn({ [styles.isDisabled]: !isEditable })} htmlFor={`copilot-${user.id}`}>
                 <div>
                   Copilot
                 </div>
                 <input type='hidden' />
               </label>
             </div>)}
           </div>
-          <div className={cn(styles.col5)}>
+          {isEditable ? (<div className={cn(styles.col5)}>
             <PrimaryButton
               text={'Remove'}
               type={'danger'}
               onClick={() => { onRemoveClick(user) }} />
-          </div>
+          </div>) : null}
         </div>
       </div>
     )
@@ -177,7 +177,8 @@ class UserCard extends Component {
 UserCard.propTypes = {
   user: PropTypes.object,
   reloadProjectMembers: PropTypes.func.isRequired,
-  onRemoveClick: PropTypes.func.isRequired
+  onRemoveClick: PropTypes.func.isRequired,
+  isEditable: PropTypes.bool
 }
 
 export default UserCard

src/components/Users/index.js

@@ -196,7 +196,7 @@ class Users extends Component {
   }
 
   render () {
-    const { projects, projectMembers, reloadProjectMembers } = this.props
+    const { projects, projectMembers, reloadProjectMembers, isEditable } = this.props
     const projectOptions = projects.map(p => {
       return {
         label: p.name,
@@ -207,7 +207,7 @@ class Users extends Component {
     const membersExist = projectMembers && projectMembers.length > 0
     const isCopilotOrManager = this.checkIsCopilotOrManager(projectMembers, loggedInHandle)
     const isAdmin = checkAdmin(this.props.auth.token)
-    const showAddUser = this.state.projectOption && (isCopilotOrManager || isAdmin)
+    const showAddUser = isEditable && this.state.projectOption && (isCopilotOrManager || isAdmin)
 
     return (
       <div className={styles.contentContainer}>
@@ -402,7 +402,7 @@ class Users extends Component {
                   _.map(projectMembers, (member) => {
                     return (
                       <li className={styles.userItem} key={`user-card-${member.id}`}>
-                        <UserCard user={member} onRemoveClick={this.onRemoveClick} reloadProjectMembers={reloadProjectMembers} />
+                        <UserCard user={member} onRemoveClick={this.onRemoveClick} reloadProjectMembers={reloadProjectMembers} isEditable={isEditable} />
                       </li>
                     )
                   })
@@ -421,6 +421,7 @@ Users.propTypes = {
   loadProject: PropTypes.func.isRequired,
   reloadProjectMembers: PropTypes.func.isRequired,
   auth: PropTypes.object,
+  isEditable: PropTypes.bool,
   projects: PropTypes.arrayOf(PropTypes.object),
   projectMembers: PropTypes.arrayOf(PropTypes.object)
 }

src/containers/Users/index.js

@@ -4,27 +4,73 @@ import _ from 'lodash'
 import PT from 'prop-types'
 import UsersComponent from '../../components/Users'
 import { loadProjects } from '../../actions/sidebar'
-import {
-  loadProject,
-  reloadProjectMembers
-} from '../../actions/projects'
+import { loadProject, reloadProjectMembers } from '../../actions/projects'
+import { PROJECT_ROLES } from '../../config/constants'
 
 class Users extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      loginUserRoleInProject: ''
+    }
+  }
+
   componentDidMount () {
     this.props.loadProjects()
   }
 
+  isEditable () {
+    const { loginUserRoleInProject } = this.state
+    if (loginUserRoleInProject === PROJECT_ROLES.READ) {
+      return false
+    }
+    return true
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { projectDetail, loggedInUser } = nextProps
+    if (projectDetail && loggedInUser) {
+      const projectMembers = projectDetail.members
+      const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
+      if (loginUserProjectInfo && this.state.loginUserRoleInProject !== loginUserProjectInfo.role) {
+        this.setState({
+          loginUserRoleInProject: loginUserProjectInfo.role
+        })
+      }
+    }
+  }
+
   render () {
-    const { projects, loadProject, projectMembers, auth, reloadProjectMembers } = this.props
-    return <UsersComponent projects={projects} loadProject={loadProject} projectMembers={projectMembers} auth={auth} reloadProjectMembers={reloadProjectMembers} />
+    const {
+      projects,
+      loadProject,
+      projectMembers,
+      auth,
+      reloadProjectMembers,
+      projectDetail
+    } = this.props
+    return (
+      <UsersComponent
+        projectDetail={projectDetail}
+        projects={projects}
+        loadProject={loadProject}
+        projectMembers={projectMembers}
+        auth={auth}
+        reloadProjectMembers={reloadProjectMembers}
+        isEditable={this.isEditable()}
+      />
+    )
   }
 }
 
-const mapStateToProps = ({ sidebar, challenges, auth }) => {
+const mapStateToProps = ({ sidebar, challenges, auth, projects }) => {
   return {
     projects: sidebar.projects,
     projectMembers: _.get(challenges, 'metadata.members'),
-    auth
+    projectDetail: projects.projectDetail,
+    auth,
+    loggedInUser: auth.user
   }
 }
 
@@ -40,7 +86,9 @@ Users.propTypes = {
   reloadProjectMembers: PT.func.isRequired,
   projects: PT.arrayOf(PT.object),
   projectMembers: PT.arrayOf(PT.object),
-  auth: PT.object
+  auth: PT.object,
+  projectDetail: PT.object,
+  loggedInUser: PT.object
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Users)