Read only fix

Author: jmgasper

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -12,7 +12,7 @@ import ChallengeStatus from '../ChallengeStatus'
 import ChallengeTag from '../ChallengeTag'
 import styles from './ChallengeCard.module.scss'
 import { formatDate } from '../../../util/date'
-import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../../config/constants'
+import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL, PROJECT_ROLES } from '../../../config/constants'
 import ConfirmationModal from '../../Modal/ConfirmationModal'
 import { checkChallengeEditPermission, checkReadOnlyRoles } from '../../../util/tc'
 import AlertModal from '../../Modal/AlertModal'
@@ -119,7 +119,8 @@ class ChallengeCard extends React.Component {
       isDeleteLaunch: false,
       isSaving: false,
       isCheckChalengePermission: false,
-      hasEditChallengePermission: false
+      hasEditChallengePermission: false,
+      loginUserRoleInProject: ''
     }
     this.onUpdateConfirm = this.onUpdateConfirm.bind(this)
     this.onUpdateLaunch = this.onUpdateLaunch.bind(this)
@@ -202,13 +203,13 @@ class ChallengeCard extends React.Component {
 
   render () {
     const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission } = this.state
-    const { setActiveProject, challenge, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText, challengeTypes } = this.props
+    const { setActiveProject, challenge, reloadChallengeList, isBillingAccountExpired, disableHover, getStatusText, challengeTypes, loginUserRoleInProject } = this.props
     const deleteMessage = isCheckChalengePermission
       ? 'Checking permissions...'
       : `Do you want to delete "${challenge.name}"?`
     const orUrl = `${ONLINE_REVIEW_URL}/review/actions/ViewProjectDetails?pid=${challenge.legacyId}`
     const communityAppUrl = `${COMMUNITY_APP_URL}/challenges/${challenge.id}`
-    const isReadOnly = checkReadOnlyRoles(this.props.auth.token)
+    const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
 
     return (
       <div className={styles.item}>
@@ -299,7 +300,8 @@ class ChallengeCard extends React.Component {
 ChallengeCard.defaultPrps = {
   reloadChallengeList: () => { },
   challengeTypes: [],
-  setActiveProject: () => {}
+  setActiveProject: () => {},
+  loginUserRoleInProject: ''
 }
 
 ChallengeCard.propTypes = {
@@ -312,7 +314,8 @@ ChallengeCard.propTypes = {
   disableHover: PropTypes.bool,
   getStatusText: PropTypes.func,
   challengeTypes: PropTypes.arrayOf(PropTypes.shape()),
-  auth: PropTypes.object.isRequired
+  auth: PropTypes.object.isRequired,
+  loginUserRoleInProject: PropTypes.string
 }
 
 export default withRouter(ChallengeCard)

src/components/ChallengesComponent/ChallengeList/index.js

@@ -43,7 +43,8 @@ class ChallengeList extends Component {
       challengeProjectOption: this.props.filterProjectOption,
       challengeStatus: this.props.status,
       challengeType: this.props.filterChallengeType,
-      challengeDate: this.props.filterDate
+      challengeDate: this.props.filterDate,
+      loginUserRoleInProject: ''
     }
     this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
     this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
@@ -57,6 +58,20 @@ class ChallengeList extends Component {
     this.resetFilter = this.resetFilter.bind(this)
   }
 
+  componentWillReceiveProps (nextProps) {
+    const { activeProject, auth } = nextProps
+    if (activeProject && auth && auth.user) {
+      const loggedInUser = auth.user
+      const projectMembers = activeProject.members
+      const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
+      if (loginUserProjectInfo && this.state.loginUserRoleInProject !== loginUserProjectInfo.role) {
+        this.setState({
+          loginUserRoleInProject: loginUserProjectInfo.role
+        })
+      }
+    }
+  }
+
   /**
    * Update filter for getting project
    * @param {String} searchText search text
@@ -346,7 +361,8 @@ class ChallengeList extends Component {
       challengeProjectOption,
       challengeStatus,
       challengeType,
-      challengeDate
+      challengeDate,
+      loginUserRoleInProject
     } = this.state
 
     const {
@@ -777,6 +793,7 @@ class ChallengeList extends Component {
                           disableHover
                           getStatusText={this.getStatusTextFunc(selfService)}
                           challengeTypes={challengeTypes}
+                          loginUserRoleInProject={loginUserRoleInProject}
                           auth={this.props.auth}
                         />
                       </li>

src/containers/ChallengeEditor/index.js

@@ -36,7 +36,7 @@ import { loadSubmissions } from '../../actions/challengeSubmissions'
 import { loadProject } from '../../actions/projects'
 
 import { connect } from 'react-redux'
-import { SUBMITTER_ROLE_UUID, MESSAGE } from '../../config/constants'
+import { SUBMITTER_ROLE_UUID, MESSAGE, PROJECT_ROLES } from '../../config/constants'
 import { patchChallenge } from '../../services/challenges'
 import ConfirmationModal from '../../components/Modal/ConfirmationModal'
 import AlertModal from '../../components/Modal/AlertModal'
@@ -59,7 +59,8 @@ class ChallengeEditor extends Component {
       showSuccessModal: false,
       showLaunchModal: false,
       showRejectModal: false,
-      cancelReason: null
+      cancelReason: null,
+      loginUserRoleInProject: ''
     }
 
     this.onLaunchChallenge = this.onLaunchChallenge.bind(this)
@@ -125,7 +126,7 @@ class ChallengeEditor extends Component {
 
   componentWillReceiveProps (nextProps) {
     const { match } = this.props
-    const { match: newMatch, loadChallengeDetails, loadResources, loadSubmissions } = nextProps
+    const { match: newMatch, loadChallengeDetails, loadResources, loadSubmissions, projectDetail, loggedInUser } = nextProps
     const projectId = _.get(newMatch.params, 'projectId', null)
     const challengeId = _.get(newMatch.params, 'challengeId', null)
     if (
@@ -136,6 +137,15 @@ class ChallengeEditor extends Component {
     } else {
       this.setState({ challengeDetails: nextProps.challengeDetails })
     }
+    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
+        })
+      }
+    }
   }
 
   async fetchProjectDetails (newMatch) {
@@ -175,6 +185,10 @@ class ChallengeEditor extends Component {
     if (isAdmin) {
       return true
     }
+    const { loginUserRoleInProject } = this.state
+    if (loginUserRoleInProject === PROJECT_ROLES.READ) {
+      return false
+    }
     const userRoles = _.filter(
       challengeResources,
       cr => cr.memberId === `${loggedInUser.userId}`
@@ -532,6 +546,7 @@ class ChallengeEditor extends Component {
               rejectChallenge={this.rejectChallenge}
               showRejectChallengeModal={showRejectChallengeModal}
               loggedInUser={loggedInUser}
+              enableEdit={enableEdit}
             />
           )}
         />
@@ -571,6 +586,7 @@ class ChallengeEditor extends Component {
                 loggedInUser={loggedInUser}
                 projectPhases={projectPhases}
                 assignYourselfCopilot={this.assignYourselfCopilot}
+                enableEdit={enableEdit}
               />
             )}
           />