Allow for add / delete users on the Resources tab

https://topcoder.atlassian.net/browse/PROD-4270

Author: jmgasper

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,18 +663,41 @@ 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
     })
+
+    try {
+      const newResource = await createResourceAPI(resource)
+      let userEmail = email
+      if (!userEmail) {
+        const memberInfos = await searchProfilesByUserIds([userId])
+        if (memberInfos.length > 0) {
+          userEmail = memberInfos[0].email
+        }
+      }
+      dispatch({
+        type: CREATE_CHALLENGE_RESOURCE_SUCCESS,
+        payload: {
+          ...newResource,
+          email: userEmail
+        }
+      })
+    } catch (error) {
+      dispatch({
+        type: CREATE_CHALLENGE_RESOURCE_FAILURE
+      })
+    }
   }
 }
 

src/assets/images/ico-trash.svg

@@ -13,12 +13,13 @@ import LegacyLinks from '../../LegacyLinks'
 import ForumLink from '../../ForumLink'
 import ResourcesTab from '../Resources'
 import Submissions from '../Submissions'
-import { checkAdmin, checkReadOnlyRoles } 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,9 +48,13 @@ 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) {
@@ -60,7 +65,6 @@ const ChallengeViewTabs = ({
       if (loggedInUserResourceTmps.length > 0) {
         loggedInUserResourceTmp = loggedInUserResourceTmps[0]
         loggedInUserResourceTmp.resources = loggedInUserResourceTmps
-        const { resourceRoles } = metadata
         if (resourceRoles) {
           let roles = []
           _.forEach(loggedInUserResourceTmps, resource => {
@@ -74,12 +78,21 @@ const ChallengeViewTabs = ({
     },
     [loggedInUser, challengeResources, metadata]
   )
+  const canEditResource = useMemo(
+    () =>
+      ((loggedInUserResource &&
+        checkEditResourceRoles(loggedInUserResource.roles)) ||
+        checkAdmin(token)) &&
+      selectedTab === 1,
+    [loggedInUserResource, token, selectedTab]
+  )
 
   const allResources = useMemo(() => {
-    const { resourceRoles } = metadata
     return challengeResources.map(rs => {
-      const roleInfo = _.find(resourceRoles, { id: rs.roleId })
-      rs.role = roleInfo ? roleInfo.name : ''
+      if (!rs.role) {
+        const roleInfo = _.find(resourceRoles, { id: rs.roleId })
+        rs.role = roleInfo ? roleInfo.name : ''
+      }
       return rs
     })
   }, [metadata, challengeResources])
@@ -180,9 +193,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
@@ -192,7 +210,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']}>
@@ -264,7 +282,12 @@ const ChallengeViewTabs = ({
         />
       )}
       {selectedTab === 1 && (
-        <ResourcesTab challenge={challenge} resources={allResources} />
+        <ResourcesTab
+          challenge={challenge}
+          resources={allResources}
+          canEditResource={canEditResource}
+          deleteResource={deleteResource}
+        />
       )}
       {selectedTab === 2 && (
         <Submissions
@@ -274,6 +297,13 @@ const ChallengeViewTabs = ({
           loggedInUserResource={loggedInUserResource}
         />
       )}
+      {showAddResourceModal ? (<ResourcesAdd
+        onClose={() => setShowAddResourceModal(false)}
+        challenge={challenge}
+        loggedInUser={loggedInUser}
+        resourceRoles={resourceRoles}
+        createResource={createResource}
+      />) : null}
     </div>
   )
 }
@@ -304,6 +334,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

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -12,9 +12,11 @@ import { getTCMemberURL } from '../../../config/constants'
 import ReactSVG from 'react-svg'
 import { getRatingLevel, sortList } from '../../../util/tc'
 import styles from './styles.module.scss'
+import ResourcesDeleteModal from '../ResourcesDeleteModal'
 
 const assets = require.context('../../../assets/images', false, /svg/)
 const ArrowDown = './arrow-down.svg'
+const Trash = './ico-trash.svg'
 
 function getSelectorStyle (selectedView, currentView) {
   return cn(styles['challenge-selector-common'], {
@@ -59,7 +61,8 @@ export default class Resources extends React.Component {
         field: '',
         sort: ''
       },
-      selectedTab: 0
+      selectedTab: 0,
+      showDeleteResourceModal: null
     }
 
     this.sortResources = this.sortResources.bind(this)
@@ -180,10 +183,10 @@ export default class Resources extends React.Component {
   }
 
   render () {
-    const { challenge } = this.props
+    const { challenge, canEditResource, deleteResource } = this.props
     const { track } = challenge
 
-    const { sortedResources, selectedTab } = this.state
+    const { sortedResources, selectedTab, showDeleteResourceModal } = this.state
 
     const { field, sort } = this.getResourcesSortParam()
     const revertSort = sort === 'desc' ? 'asc' : 'desc'
@@ -312,6 +315,12 @@ export default class Resources extends React.Component {
                     </div>
                   </button>
                 </th>
+
+                {canEditResource ? (<th
+                  className={cn(styles['col-8Table'])}
+                >
+                  <span>Actions</span>
+                </th>) : null}
               </tr>
             </thead>
             <tbody role='rowgroup'>
@@ -343,12 +352,29 @@ export default class Resources extends React.Component {
                     <td className={styles['col-4']}>
                       <span role='cell'>{formatDate(r.created)}</span>
                     </td>
+
+                    {canEditResource ? (<td className={cn(styles['col-8Table'], styles['col-bodyTable'])}>
+                      <button
+                        onClick={() => {
+                          this.setState({
+                            showDeleteResourceModal: r
+                          })
+                        }}
+                      >
+                        <ReactSVG path={assets(`${Trash}`)} />
+                      </button>
+                    </td>) : null}
                   </tr>
                 )
               })}
             </tbody>
           </table>
         </div>
+        {showDeleteResourceModal ? (<ResourcesDeleteModal
+          onClose={() => this.setState({ showDeleteResourceModal: null })}
+          resource={showDeleteResourceModal}
+          deleteResource={deleteResource}
+        />) : null}
       </div>
     )
   }
@@ -382,5 +408,7 @@ Resources.propTypes = {
   resourcesSort: PT.shape({
     field: PT.string,
     sort: PT.string
-  })
+  }),
+  canEditResource: PT.bool.isRequired,
+  deleteResource: PT.func.isRequired
 }

src/components/ChallengeEditor/Resources/index.js

@@ -66,6 +66,13 @@ $tc-white: #FFFFFF;
       white-space: nowrap;
       overflow: hidden;
     }
+
+    button {
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      outline: none;
+    }
   }
 }