fix: issue #1046

Author: yoution

src/actions/auth.js

@@ -1,9 +1,17 @@
 import { configureConnector, decodeToken } from 'tc-auth-lib'
+import _ from 'lodash'
 import { fetchProfile } from '../services/user'
 import {
+  fetchResources,
+  fetchResourceRoles
+} from '../services/challenges'
+import {
+  CHECK_CHALLENGE_PERMISSON,
+  CHECK_CHALLENGE_PERMISSON_SUCCESS,
   LOAD_USER_SUCCESS,
   SAVE_AUTH_TOKEN
 } from '../config/constants'
+import { checkAdmin } from '../util/tc'
 
 const { ACCOUNTS_APP_CONNECTOR_URL } = process.env
 
@@ -52,3 +60,50 @@ export function saveToken (token) {
     dispatch(loadUser(handle))
   }
 }
+
+/**
+ * check edit permission
+ */
+export function checkChallengeEditPermission (challengeId) {
+  return (dispatch, getState) => {
+    const state = getState()
+    const token = state.auth.token
+    const loggedInUser = state.auth.user
+    const hasProjectAccess = state.projects.hasProjectAccess
+
+    const isAdmin = checkAdmin(token)
+    if (isAdmin) {
+      return dispatch({
+        type: CHECK_CHALLENGE_PERMISSON_SUCCESS,
+        hasPermission: true
+      })
+    }
+    if (!hasProjectAccess) {
+      return dispatch({
+        type: CHECK_CHALLENGE_PERMISSON_SUCCESS,
+        hasPermission: false
+      })
+    }
+
+    return dispatch({
+      type: CHECK_CHALLENGE_PERMISSON,
+      payload: Promise.all([
+        fetchResources(challengeId),
+        fetchResourceRoles()
+      ]).then(([challengeResources, resourceRoles]) => {
+        const userRoles = _.filter(
+          challengeResources,
+          cr => cr.memberId === `${loggedInUser.userId}`
+        )
+        const userResourceRoles = _.filter(resourceRoles, rr =>
+          _.some(userRoles, ur => ur.roleId === rr.id)
+        )
+        const hasPermission = _.some(
+          userResourceRoles,
+          urr => urr.fullWriteAccess && urr.isActive
+        )
+        return { hasPermission }
+      })
+    })
+  }
+}

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -28,6 +28,8 @@ const DRAFT_MSG = 'In Draft'
 const STALLED_TIME_LEFT_MSG = 'Challenge is currently on hold'
 const FF_TIME_LEFT_MSG = 'Winner is working on fixes'
 
+const PERMISSION_DELETE_MESSAGE_ERROR = "You don't have permission to delete this challenge"
+
 /**
  * Format the remaining time of a challenge phase
  * @param phase Challenge phase
@@ -208,7 +210,12 @@ class ChallengeCard extends React.Component {
   }
 
   deleteModalLaunch () {
+    const {
+      challenge,
+      checkEditPermission
+    } = this.props
     if (!this.state.isDeleteLaunch) {
+      checkEditPermission(challenge.id)
       this.setState({ isDeleteLaunch: true })
     }
   }
@@ -255,18 +262,24 @@ class ChallengeCard extends React.Component {
 
   render () {
     const { isLaunch, isConfirm, isSaving, isDeleteLaunch } = this.state
-    const { challenge, shouldShowCurrentPhase, reloadChallengeList } = this.props
+    const { challenge, shouldShowCurrentPhase, reloadChallengeList,
+      isCheckChalengePermission,
+      hasEditChallengePermission
+    } = this.props
     const { phaseMessage, endTime } = getPhaseInfo(challenge)
+    const deleteMessage = isCheckChalengePermission ? 'Checking permissions...' : `Do you want to delete "${challenge.name}"?`
+
     return (
       <div className={styles.item}>
         {
           isDeleteLaunch && !isConfirm && (
             <ConfirmationModal
               title='Confirm Delete'
-              message={`Do you want to delete "${challenge.name}"?`}
+              message={deleteMessage}
               theme={theme}
               isProcessing={isSaving}
-              errorMessage={this.state.error}
+              disableConfirmButton={!hasEditChallengePermission}
+              errorMessage={!isCheckChalengePermission && !hasEditChallengePermission ? PERMISSION_DELETE_MESSAGE_ERROR : this.state.error}
               onCancel={this.resetModal}
               onConfirm={this.onDeleteChallenge}
             />
@@ -338,8 +351,11 @@ ChallengeCard.defaultPrps = {
 ChallengeCard.propTypes = {
   challenge: PropTypes.object,
   shouldShowCurrentPhase: PropTypes.bool,
+  isCheckChalengePermission: PropTypes.bool,
+  hasEditChallengePermission: PropTypes.bool,
   reloadChallengeList: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  checkEditPermission: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired
 }
 

src/components/ChallengesComponent/ChallengeList/index.js

@@ -96,13 +96,16 @@ class ChallengeList extends Component {
     const { searchText, errorMessage } = this.state
     const {
       activeProject,
+      isCheckChalengePermission,
+      hasEditChallengePermission,
       warnMessage,
       challenges,
       status,
       page,
       perPage,
       totalChallenges,
       partiallyUpdateChallengeDetails,
+      checkEditPermission,
       deleteChallenge
     } = this.props
     if (warnMessage) {
@@ -212,8 +215,11 @@ class ChallengeList extends Component {
                       <ChallengeCard
                         shouldShowCurrentPhase={selectedTab === 0}
                         challenge={c}
+                        isCheckChalengePermission={isCheckChalengePermission}
+                        hasEditChallengePermission={hasEditChallengePermission}
                         reloadChallengeList={this.reloadChallengeList}
                         partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+                        checkEditPermission={checkEditPermission}
                         deleteChallenge={deleteChallenge}
                       />
                     </li>
@@ -251,14 +257,17 @@ ChallengeList.propTypes = {
   }),
   warnMessage: PropTypes.string,
   filterChallengeName: PropTypes.string,
+  isCheckChalengePermission: PropTypes.bool,
+  hasEditChallengePermission: PropTypes.bool,
   status: PropTypes.string,
   activeProjectId: PropTypes.number,
   loadChallengesByPage: PropTypes.func.isRequired,
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
-  deleteChallenge: PropTypes.func.isRequired
+  deleteChallenge: PropTypes.func.isRequired,
+  checkEditPermission: PropTypes.func.isRequired
 }
 
 export default ChallengeList

src/components/ChallengesComponent/index.js

@@ -17,6 +17,8 @@ import xss from 'xss'
 const ChallengesComponent = ({
   challenges,
   isLoading,
+  isCheckChalengePermission,
+  hasEditChallengePermission,
   warnMessage,
   filterChallengeName,
   activeProject,
@@ -27,6 +29,7 @@ const ChallengesComponent = ({
   perPage,
   totalChallenges,
   partiallyUpdateChallengeDetails,
+  checkEditPermission,
   deleteChallenge
 }) => {
   return (
@@ -77,6 +80,8 @@ const ChallengesComponent = ({
           ) : (
             <ChallengeList
               challenges={challenges}
+              isCheckChalengePermission={isCheckChalengePermission}
+              hasEditChallengePermission={hasEditChallengePermission}
               warnMessage={warnMessage}
               activeProject={activeProject}
               filterChallengeName={filterChallengeName}
@@ -87,6 +92,7 @@ const ChallengesComponent = ({
               perPage={perPage}
               totalChallenges={totalChallenges}
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
+              checkEditPermission={checkEditPermission}
               deleteChallenge={deleteChallenge}
             />
           )}
@@ -103,6 +109,8 @@ ChallengesComponent.propTypes = {
     name: PropTypes.string
   }),
   isLoading: PropTypes.bool,
+  isCheckChalengePermission: PropTypes.bool,
+  hasEditChallengePermission: PropTypes.bool,
   warnMessage: PropTypes.string,
   filterChallengeName: PropTypes.string,
   status: PropTypes.string,
@@ -112,7 +120,8 @@ ChallengesComponent.propTypes = {
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
-  deleteChallenge: PropTypes.func.isRequired
+  deleteChallenge: PropTypes.func.isRequired,
+  checkEditPermission: PropTypes.func.isRequired
 }
 
 ChallengesComponent.defaultProps = {

src/components/Modal/ConfirmationModal.js

@@ -6,7 +6,7 @@ import styles from './ConfirmationModal.module.scss'
 import OutlineButton from '../Buttons/OutlineButton'
 import PrimaryButton from '../Buttons/PrimaryButton'
 
-const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, onCancel, onConfirm }) => (
+const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, onCancel, onConfirm, disableConfirmButton }) => (
   <Modal theme={theme} onCancel={onCancel}>
     <div className={styles.contentContainer}>
       <div className={styles.title}>{title}</div>
@@ -23,6 +23,7 @@ const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing,
         <div className={styles.button}>
           <PrimaryButton
             text={isProcessing ? 'Processing...' : 'Confirm'}
+            disabled={disableConfirmButton}
             type={'info'}
             onClick={onConfirm}
           />
@@ -39,6 +40,7 @@ ConfirmationModal.propTypes = {
   errorMessage: PropTypes.string,
   theme: PropTypes.shape(),
   isProcessing: PropTypes.bool,
+  disableConfirmButton: PropTypes.bool,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func
 }

src/config/constants.js

@@ -43,6 +43,12 @@ export const LOAD_PROJECTS_SUCCESS = 'LOAD_PROJECTS_SUCCESS'
 export const LOAD_PROJECTS_PENDING = 'LOAD_PROJECTS_PENDING'
 export const LOAD_PROJECTS_FAILURE = 'LOAD_PROJECTS_FAILURE'
 
+// check challenge permission
+export const CHECK_CHALLENGE_PERMISSON = 'CHECK_CHALLENGE_PERMISSON'
+export const CHECK_CHALLENGE_PERMISSON_SUCCESS = 'CHECK_CHALLENGE_PERMISSON_SUCCESS'
+export const CHECK_CHALLENGE_PERMISSON_PENDING = 'CHECK_CHALLENGE_PERMISSON_PENDING'
+export const CHECK_CHALLENGE_PERMISSON_FAILURE = 'CHECK_CHALLENGE_PERMISSON_FAILURE'
+
 export const SET_ACTIVE_PROJECT = 'SET_ACTIVE_PROJECT'
 
 export const LOAD_USER_SUCCESS = 'LOAD_USER_SUCCESS'

src/containers/Challenges/index.js

@@ -11,6 +11,7 @@ import ChallengesComponent from '../../components/ChallengesComponent'
 import ProjectCard from '../../components/ProjectCard'
 import Loader from '../../components/Loader'
 import { loadChallengesByPage, partiallyUpdateChallengeDetails, deleteChallenge } from '../../actions/challenges'
+import { checkChallengeEditPermission } from '../../actions/auth'
 import { loadProject } from '../../actions/projects'
 import { loadProjects, setActiveProject, resetSidebarActiveParams } from '../../actions/sidebar'
 import {
@@ -27,6 +28,7 @@ class Challenges extends Component {
     }
 
     this.updateProjectName = this.updateProjectName.bind(this)
+    this.checkEditPermission = this.checkEditPermission.bind(this)
     this.toggleMyProjects = this.toggleMyProjects.bind(this)
   }
 
@@ -48,6 +50,10 @@ class Challenges extends Component {
     }
   }
 
+  checkEditPermission (challengeId) {
+    this.props.checkChallengeEditPermission(challengeId)
+  }
+
   reloadChallenges (props) {
     const { activeProjectId, projectDetail: reduxProjectInfo, projectId, challengeProjectId, loadProject } = props
     if (activeProjectId !== challengeProjectId) {
@@ -75,6 +81,8 @@ class Challenges extends Component {
     const {
       challenges,
       isLoading,
+      isCheckChalengePermission,
+      hasEditChallengePermission,
       warnMessage,
       filterChallengeName,
       projects,
@@ -144,11 +152,14 @@ class Challenges extends Component {
           status={status}
           activeProjectId={activeProjectId}
           loadChallengesByPage={loadChallengesByPage}
+          isCheckChalengePermission={isCheckChalengePermission}
+          hasEditChallengePermission={hasEditChallengePermission}
           page={page}
           perPage={perPage}
           totalChallenges={totalChallenges}
           partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
           deleteChallenge={deleteChallenge}
+          checkEditPermission={this.checkEditPermission}
         />
         }
       </Fragment>
@@ -162,6 +173,8 @@ Challenges.propTypes = {
   challenges: PropTypes.arrayOf(PropTypes.object),
   projectDetail: PropTypes.object,
   isLoading: PropTypes.bool,
+  isCheckChalengePermission: PropTypes.bool,
+  hasEditChallengePermission: PropTypes.bool,
   loadChallengesByPage: PropTypes.func,
   loadProject: PropTypes.func.isRequired,
   projectId: PropTypes.string,
@@ -176,11 +189,14 @@ Challenges.propTypes = {
   loadProjects: PropTypes.func.isRequired,
   setActiveProject: PropTypes.func.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
+  checkChallengeEditPermission: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired
 }
 
-const mapStateToProps = ({ challenges, sidebar, projects }) => ({
+const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
   ..._.omit(challenges, ['projectId']),
+  isCheckChalengePermission: auth.isCheckChalengePermission,
+  hasEditChallengePermission: auth.hasEditChallengePermission,
   challengeProjectId: challenges.projectId,
   activeProjectId: sidebar.activeProjectId,
   projects: sidebar.projects,
@@ -192,6 +208,7 @@ const mapDispatchToProps = {
   loadChallengesByPage,
   resetSidebarActiveParams,
   loadProject,
+  checkChallengeEditPermission,
   loadProjects,
   setActiveProject,
   partiallyUpdateChallengeDetails,

src/reducers/auth.js

@@ -1,13 +1,19 @@
 /**
  * Reducer to process authentication actions
  */
-import { LOAD_USER_SUCCESS, SAVE_AUTH_TOKEN } from '../config/constants'
+import { LOAD_USER_SUCCESS, SAVE_AUTH_TOKEN,
+  CHECK_CHALLENGE_PERMISSON_PENDING,
+  CHECK_CHALLENGE_PERMISSON_SUCCESS,
+  CHECK_CHALLENGE_PERMISSON_FAILURE
+} from '../config/constants'
 
 const initialState = {
   isLoading: true,
   isLoggedIn: false,
   user: null,
-  token: null
+  token: null,
+  isCheckChalengePermission: false,
+  hasEditChallengePermission: false
 }
 
 export default function (state = initialState, action) {
@@ -24,6 +30,12 @@ export default function (state = initialState, action) {
       return { ...state, user: action.user, isLoading: false, isLoggedIn: true }
     case SAVE_AUTH_TOKEN:
       return { ...state, token: action.token }
+    case CHECK_CHALLENGE_PERMISSON_PENDING:
+      return { ...state, hasEditChallengePermission: false, isCheckChalengePermission: true }
+    case CHECK_CHALLENGE_PERMISSON_SUCCESS:
+      return { ...state, isCheckChalengePermission: false, hasEditChallengePermission: action.hasPermission }
+    case CHECK_CHALLENGE_PERMISSON_FAILURE:
+      return { ...state, isCheckChalengePermission: false }
     default:
       return state
   }