Prod deploy - v20.11

src/actions/challenges.js

@@ -35,7 +35,9 @@ import {
   REMOVE_ATTACHMENT_FAILURE,
   REMOVE_ATTACHMENT_PENDING,
   REMOVE_ATTACHMENT_SUCCESS,
-  CREATE_CHALLENGE_RESOURCE,
+  CREATE_CHALLENGE_RESOURCE_PENDING,
+  CREATE_CHALLENGE_RESOURCE_SUCCESS,
+  CREATE_CHALLENGE_RESOURCE_FAILURE,
   DELETE_CHALLENGE_RESOURCE,
   PAGE_SIZE,
   UPDATE_CHALLENGE_DETAILS_PENDING,
@@ -661,17 +663,50 @@ export function deleteResource (challengeId, roleId, memberHandle) {
  * @param {UUID} challengeId id of the challenge for which resource is to be created
  * @param {UUID} roleId id of the role, the resource should be in
  * @param {String} memberHandle handle of the resource
+ * @param {String} email email of member
+ * @param {String} userId id of member
  */
-export function createResource (challengeId, roleId, memberHandle) {
+export function createResource (challengeId, roleId, memberHandle, email, userId) {
   const resource = {
     challengeId,
     roleId,
     memberHandle
   }
-  return (dispatch, getState) => {
-    return dispatch({
-      type: CREATE_CHALLENGE_RESOURCE,
-      payload: createResourceAPI(resource)
+  return async (dispatch, getState) => {
+    dispatch({
+      type: CREATE_CHALLENGE_RESOURCE_PENDING
+    })
+
+    let newResource
+    try {
+      newResource = await createResourceAPI(resource)
+    } catch (error) {
+      const errorMessage = _.get(error, 'response.data.message', 'Create resource fail.')
+      dispatch({
+        type: CREATE_CHALLENGE_RESOURCE_FAILURE
+      })
+      return {
+        success: false,
+        errorMessage
+      }
+    }
+
+    let userEmail = email
+    if (!userEmail && userId) {
+      try {
+        const memberInfos = await searchProfilesByUserIds([userId])
+        if (memberInfos.length > 0) {
+          userEmail = memberInfos[0].email
+        }
+      } catch (error) {
+      }
+    }
+    dispatch({
+      type: CREATE_CHALLENGE_RESOURCE_SUCCESS,
+      payload: {
+        ...newResource,
+        email: userEmail
+      }
     })
   }
 }

src/components/ChallengeEditor/AssignedMember-Field/AssignedMember-Field.module.scss

@@ -24,12 +24,15 @@
     }
 
     &.col1 {
-      max-width: 185px;
-      min-width: 185px;
+      width: 100px;
       margin-right: 14px;
       white-space: nowrap;
       display: flex;
       align-items: center;
+
+      &.showAssignToMe {
+        width: 185px;
+      }
     }
 
     &.col2 {

src/components/ChallengeEditor/AssignedMember-Field/index.js

@@ -7,7 +7,15 @@ import cn from 'classnames'
 import styles from './AssignedMember-Field.module.scss'
 import SelectUserAutocomplete from '../../SelectUserAutocomplete'
 
-const AssignedMemberField = ({ challenge, onAssignSelf, onChange, assignedMemberDetails, readOnly }) => {
+const AssignedMemberField = ({
+  challenge,
+  onAssignSelf,
+  onChange,
+  assignedMemberDetails,
+  readOnly,
+  showAssignToMe,
+  label
+}) => {
   const value = assignedMemberDetails ? {
     // if we know assigned member details, then show user `handle`, otherwise fallback to `userId`
     label: assignedMemberDetails.handle,
@@ -16,8 +24,14 @@ const AssignedMemberField = ({ challenge, onAssignSelf, onChange, assignedMember
 
   return (
     <div className={styles.row}>
-      <div className={cn(styles.field, styles.col1)}>
-        <label htmlFor='assignedMember'>Assigned Member :</label>
+      <div className={cn(
+        styles.field,
+        styles.col1,
+        {
+          [styles.showAssignToMe]: showAssignToMe
+        }
+      )}>
+        <label htmlFor='assignedMember'>{label} :</label>
       </div>
       <div className={cn(styles.field, styles.col2)}>
         {readOnly ? (
@@ -30,29 +44,33 @@ const AssignedMemberField = ({ challenge, onAssignSelf, onChange, assignedMember
         )}
       </div>
       {
-        !readOnly &&
-          <div className={styles.assignSelfField}>
+        (!readOnly && showAssignToMe)
+          ? (<div className={styles.assignSelfField}>
             <a href='#' onClick={(e) => {
               e.preventDefault()
               onAssignSelf()
             }}>Assign to me</a>
-          </div>
+          </div>) : null
       }
     </div>
   )
 }
 
 AssignedMemberField.defaultProps = {
   assignedMemberDetails: null,
-  readOnly: false
+  readOnly: false,
+  showAssignToMe: true,
+  label: 'Assigned Member'
 }
 
 AssignedMemberField.propTypes = {
   challenge: PropTypes.shape().isRequired,
   onChange: PropTypes.func,
   assignedMemberDetails: PropTypes.shape(),
   readOnly: PropTypes.bool,
-  onAssignSelf: PropTypes.func
+  showAssignToMe: PropTypes.bool,
+  onAssignSelf: PropTypes.func,
+  label: PropTypes.string
 }
 
 export default AssignedMemberField

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -11,14 +11,15 @@ import ChallengeViewComponent from '../ChallengeView'
 import { PrimaryButton } from '../../Buttons'
 import LegacyLinks from '../../LegacyLinks'
 import ForumLink from '../../ForumLink'
-import Registrants from '../Registrants'
+import ResourcesTab from '../Resources'
 import Submissions from '../Submissions'
-import { checkAdmin, checkReadOnlyRoles, getResourceRoleByName } from '../../../util/tc'
+import { checkAdmin, checkEditResourceRoles, checkReadOnlyRoles } from '../../../util/tc'
 import { CHALLENGE_STATUS, MESSAGE } from '../../../config/constants'
 import Tooltip from '../../Tooltip'
 import CancelDropDown from '../Cancel-Dropdown'
 import 'react-tabs/style/react-tabs.css'
 import styles from './ChallengeViewTabs.module.scss'
+import ResourcesAdd from '../ResourcesAdd'
 
 function getSelectorStyle (selectedView, currentView) {
   return cn(styles['challenge-selector-common'], {
@@ -47,20 +48,23 @@ const ChallengeViewTabs = ({
   assignYourselfCopilot,
   showRejectChallengeModal,
   loggedInUser,
-  onApproveChallenge
+  onApproveChallenge,
+  createResource,
+  deleteResource
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
+  const [showAddResourceModal, setShowAddResourceModal] = useState(false)
+  const { resourceRoles } = metadata
   const loggedInUserResource = useMemo(
     () => {
       if (!loggedInUser) {
         return null
       }
-      const loggedInUserResourceTmps = _.filter(challengeResources, { memberId: `${loggedInUser.userId}` })
+      const loggedInUserResourceTmps = _.cloneDeep(_.filter(challengeResources, { memberId: `${loggedInUser.userId}` }))
       let loggedInUserResourceTmp = null
       if (loggedInUserResourceTmps.length > 0) {
         loggedInUserResourceTmp = loggedInUserResourceTmps[0]
         loggedInUserResourceTmp.resources = loggedInUserResourceTmps
-        const { resourceRoles } = metadata
         if (resourceRoles) {
           let roles = []
           _.forEach(loggedInUserResourceTmps, resource => {
@@ -74,37 +78,38 @@ const ChallengeViewTabs = ({
     },
     [loggedInUser, challengeResources, metadata]
   )
-
-  const registrants = useMemo(() => {
-    const { resourceRoles } = metadata
-    const role = getResourceRoleByName(resourceRoles, 'Submitter')
-    if (role && challengeResources) {
-      const registrantList = challengeResources.filter(
-        resource => resource.roleId === role.id
+  const canEditResource = useMemo(
+    () => {
+      return selectedTab === 1 &&
+      (
+        (
+          loggedInUserResource &&
+          checkEditResourceRoles(loggedInUserResource.roles)
+        ) ||
+        checkAdmin(token)
       )
-      // Add submission date to registrants
-      registrantList.forEach((r, i) => {
-        const submission = (challengeSubmissions || []).find(s => {
-          return '' + s.memberId === '' + r.memberId
-        })
-        if (submission) {
-          registrantList[i].submissionDate = submission.created
-        }
-      })
-      return registrantList
-    } else {
-      return []
-    }
-  }, [metadata, challengeResources, challengeSubmissions])
+    },
+    [loggedInUserResource, token, selectedTab]
+  )
+
+  const allResources = useMemo(() => {
+    return challengeResources.map(rs => {
+      if (!rs.role) {
+        const roleInfo = _.find(resourceRoles, { id: rs.roleId })
+        rs.role = roleInfo ? roleInfo.name : ''
+      }
+      return rs
+    })
+  }, [metadata, challengeResources])
 
   const submissions = useMemo(() => {
     return _.map(challengeSubmissions, s => {
-      s.registrant = _.find(registrants, r => {
+      s.registrant = _.find(allResources, r => {
         return +r.memberId === s.memberId
       })
       return s
     })
-  }, [challengeSubmissions, registrants])
+  }, [challengeSubmissions, allResources])
 
   const isTask = _.get(challenge, 'task.isTask', false)
 
@@ -193,9 +198,14 @@ const ChallengeViewTabs = ({
               )}
             </div>
           )}
-          {enableEdit && (
+          {enableEdit && !canEditResource && (
             <PrimaryButton text={'Edit'} type={'info'} submit link={`./edit`} />
           )}
+          {canEditResource && (
+            <PrimaryButton text={'Add'} type={'info'} onClick={() => {
+              setShowAddResourceModal(true)
+            }} />
+          )}
           {isSelfService && isDraft && (isAdmin || isSelfServiceCopilot || enableEdit) && (
             <div className={styles.button}>
               <PrimaryButton
@@ -205,7 +215,7 @@ const ChallengeViewTabs = ({
               />
             </div>
           )}
-          <PrimaryButton text={'Back'} type={'info'} submit link={`..`} />
+          {!canEditResource ? (<PrimaryButton text={'Back'} type={'info'} submit link={`..`} />) : null}
         </div>
       </div>
       <div className={styles['challenge-view-selector']}>
@@ -223,22 +233,20 @@ const ChallengeViewTabs = ({
         >
           DETAILS
         </a>
-        {registrants.length ? (
-          <a
-            tabIndex='1'
-            role='tab'
-            aria-selected={selectedTab === 1}
-            onClick={e => {
-              setSelectedTab(1)
-            }}
-            onKeyPress={e => {
-              setSelectedTab(1)
-            }}
-            className={getSelectorStyle(selectedTab, 1)}
-          >
-            REGISTRANTS ({registrants.length})
-          </a>
-        ) : null}
+        <a
+          tabIndex='1'
+          role='tab'
+          aria-selected={selectedTab === 1}
+          onClick={e => {
+            setSelectedTab(1)
+          }}
+          onKeyPress={e => {
+            setSelectedTab(1)
+          }}
+          className={getSelectorStyle(selectedTab, 1)}
+        >
+          RESOURCES
+        </a>
         {challengeSubmissions.length ? (
           <a
             tabIndex='2'
@@ -279,7 +287,14 @@ const ChallengeViewTabs = ({
         />
       )}
       {selectedTab === 1 && (
-        <Registrants challenge={challenge} registrants={registrants} />
+        <ResourcesTab
+          challenge={challenge}
+          resources={allResources}
+          canEditResource={canEditResource}
+          deleteResource={deleteResource}
+          submissions={submissions}
+          loggedInUserResource={loggedInUserResource}
+        />
       )}
       {selectedTab === 2 && (
         <Submissions
@@ -289,6 +304,13 @@ const ChallengeViewTabs = ({
           loggedInUserResource={loggedInUserResource}
         />
       )}
+      {showAddResourceModal ? (<ResourcesAdd
+        onClose={() => setShowAddResourceModal(false)}
+        challenge={challenge}
+        loggedInUser={loggedInUser}
+        resourceRoles={resourceRoles}
+        createResource={createResource}
+      />) : null}
     </div>
   )
 }
@@ -319,6 +341,8 @@ ChallengeViewTabs.propTypes = {
   onCloseTask: PropTypes.func,
   projectPhases: PropTypes.arrayOf(PropTypes.object),
   assignYourselfCopilot: PropTypes.func.isRequired,
+  createResource: PropTypes.func.isRequired,
+  deleteResource: PropTypes.func.isRequired,
   showRejectChallengeModal: PropTypes.func.isRequired,
   loggedInUser: PropTypes.object.isRequired,
   onApproveChallenge: PropTypes.func