fix:issue-986

src/actions/challenges.js

@@ -13,6 +13,7 @@ import {
   fetchResourceRoles,
   fetchChallengeTimelines,
   fetchChallengeTracks,
+  fetchGroupDetail,
   updateChallenge,
   patchChallenge,
   createChallenge as createChallengeAPI,
@@ -182,6 +183,14 @@ export function loadChallengeDetails (projectId, challengeId) {
   }
 }
 
+/**
+ * Loads group details
+ */
+export function loadGroupDetails (groupIds) {
+  const promiseAll = groupIds.map(id => fetchGroupDetail(id))
+  return Promise.all(promiseAll)
+}
+
 /**
  * Update challenge details
  *

src/components/ChallengeEditor/ChallengeView/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import _ from 'lodash'
 import { Helmet } from 'react-helmet'
 import PropTypes from 'prop-types'
@@ -21,6 +21,7 @@ import PhaseInput from '../../PhaseInput'
 import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
+import { loadGroupDetails } from '../../../actions/challenges'
 import Tooltip from '../../Tooltip'
 import { MESSAGE, REVIEW_TYPES } from '../../../config/constants'
 
@@ -40,6 +41,18 @@ const ChallengeView = ({
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
 
   const [openAdvanceSettings, setOpenAdvanceSettings] = useState(false)
+  const [groups, setGroups] = useState('')
+
+  useEffect(() => {
+    if (challenge.groups && challenge.groups.length > 0) {
+      loadGroupDetails(challenge.groups).then(res => {
+        const groups = _.map(res, 'name').join(', ')
+        setGroups(groups)
+      })
+    } else {
+      setGroups('')
+    }
+  }, [challenge.groups])
 
   const getResourceFromProps = (name) => {
     const { resourceRoles } = metadata
@@ -167,7 +180,7 @@ const ChallengeView = ({
             </div>
             {openAdvanceSettings && (<div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Groups:</span> {challenge.groups ? challenge.groups.join(', ') : ''}</span>
+                <span><span className={styles.fieldTitle}>Groups:</span> {groups}</span>
               </div>
             </div>)}
             {

src/services/challenges.js

@@ -65,6 +65,17 @@ export async function fetchGroups (filters) {
   return _.get(response, 'data', [])
 }
 
+/**
+ * Api request for fetching Group Detail
+ *
+ * @param groupId
+ * @returns {Promise<*>}
+ */
+export async function fetchGroupDetail (id) {
+  const response = await axiosInstance.get(`${GROUPS_API_URL}/${id}`)
+  return _.get(response, 'data', [])
+}
+
 /**
  * Api request for fetching timeline templates
  * @returns {Promise<*>}