Milestone Challenge Linking

Author: tasqat

src/actions/challenges.js

@@ -49,6 +49,7 @@ import {
   LOAD_CHALLENGE_RESOURCES
 } from '../config/constants'
 import { loadProject } from './projects'
+import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '../services/projects'
 
 /**
  * Member challenges related redux actions
@@ -203,16 +204,34 @@ export function loadGroupDetails (groupIds) {
  *
  * @param {String} challengeId      challenge id
  * @param {Object} challengeDetails challenge data
- *
+ * @param {String} projectId        project id
  * @returns {Promise<{ type: string, challengeDetails: object }>} action object
  */
-export function updateChallengeDetails (challengeId, challengeDetails) {
+export function updateChallengeDetails (challengeId, challengeDetails, projectId) {
   return async (dispatch) => {
     dispatch({
       type: UPDATE_CHALLENGE_DETAILS_PENDING
     })
 
-    return updateChallenge(challengeId, challengeDetails).then((challenge) => {
+    const milestoneId = challengeDetails.milestoneId
+    // Check if milestone is deleted or updated
+    const hasMilestone = _.has(challengeDetails, 'milestoneId')
+
+    if (hasMilestone) {
+      delete challengeDetails.milestoneId
+    }
+    return updateChallenge(challengeId, challengeDetails).then(async challenge => {
+      if (hasMilestone) {
+        if (milestoneId && milestoneId !== -1) {
+          await saveChallengeAsPhaseProduct(projectId, milestoneId, challengeId)
+          challenge.milestoneId = milestoneId
+        } else {
+          await removeChallengeFromPhaseProduct(projectId, challengeId)
+          challenge.milestoneId = milestoneId
+        }
+      }
+      return challenge
+    }).then((challenge) => {
       return dispatch({
         type: UPDATE_CHALLENGE_DETAILS_SUCCESS,
         challengeDetails: challenge
@@ -231,26 +250,39 @@ export function updateChallengeDetails (challengeId, challengeDetails) {
  * Create a new challenge
  *
  * @param {Object} challengeDetails challenge data
+ * @param {String} projectId        project id
  *
  * @returns {Promise<{ type: string, challengeDetails: object }>} action object
  */
-export function createChallenge (challengeDetails) {
+export function createChallenge (challengeDetails, projectId) {
+  console.log(challengeDetails)
   return async (dispatch) => {
     dispatch({
       type: CREATE_CHALLENGE_PENDING
     })
-
-    return createChallengeAPI(challengeDetails).then((challenge) => {
-      return dispatch({
-        type: CREATE_CHALLENGE_SUCCESS,
-        challengeDetails: challenge
+    const milestoneId = challengeDetails.milestoneId
+    if (milestoneId) {
+      delete challengeDetails.milestoneId
+    }
+    return createChallengeAPI(challengeDetails)
+      .then(async challenge => {
+        if (milestoneId && milestoneId !== -1) {
+          await saveChallengeAsPhaseProduct(projectId, milestoneId, challenge.id, true)
+          challenge.milestoneId = milestoneId
+        }
+        return challenge
       })
-    }).catch((e) => {
-      dispatch({
-        type: CREATE_CHALLENGE_FAILURE,
-        error: e
+      .then((challenge) => {
+        return dispatch({
+          type: CREATE_CHALLENGE_SUCCESS,
+          challengeDetails: challenge
+        })
+      }).catch((e) => {
+        dispatch({
+          type: CREATE_CHALLENGE_FAILURE,
+          error: e
+        })
       })
-    })
   }
 }
 
@@ -261,16 +293,32 @@ export function createChallenge (challengeDetails) {
  *
  * @param {String} challengeId             challenge id
  * @param {Object} partialChallengeDetails partial challenge data
- *
+ * @param {String} projectId               project id
  * @returns {Promise<{ type: string, challengeDetails: object }>} action object
  */
-export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDetails) {
+export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDetails, projectId) {
   return async (dispatch) => {
     dispatch({
       type: UPDATE_CHALLENGE_DETAILS_PENDING
     })
-
-    return patchChallenge(challengeId, partialChallengeDetails).then((challenge) => {
+    const milestoneId = partialChallengeDetails.milestoneId
+    // Check if milestone is deleted or updated
+    const hasMilestone = _.has(partialChallengeDetails, 'milestoneId')
+    if (hasMilestone) {
+      delete partialChallengeDetails.milestoneId
+    }
+    return patchChallenge(challengeId, partialChallengeDetails).then(async challenge => {
+      if (hasMilestone) {
+        if (milestoneId && milestoneId !== -1) {
+          await saveChallengeAsPhaseProduct(projectId, milestoneId, challenge.id)
+          challenge.milestoneId = milestoneId
+        } else {
+          await removeChallengeFromPhaseProduct(projectId, challengeId)
+          challenge.milestoneId = milestoneId
+        }
+      }
+      return challenge
+    }).then((challenge) => {
       return dispatch({
         type: UPDATE_CHALLENGE_DETAILS_SUCCESS,
         challengeDetails: challenge
@@ -284,13 +332,15 @@ export function partiallyUpdateChallengeDetails (challengeId, partialChallengeDe
   }
 }
 
-export function deleteChallenge (challengeId) {
+export function deleteChallenge (challengeId, projectId) {
   return async (dispatch) => {
     dispatch({
       type: DELETE_CHALLENGE_PENDING
     })
-
-    return deleteChallengeAPI(challengeId).then((challenge) => {
+    return deleteChallengeAPI(challengeId).then(async challenge => {
+      await removeChallengeFromPhaseProduct(projectId, challengeId)
+      return challenge
+    }).then((challenge) => {
       return dispatch({
         type: DELETE_CHALLENGE_SUCCESS,
         challengeDetails: challenge

src/actions/projects.js

@@ -1,9 +1,10 @@
 import {
   LOAD_PROJECT_BILLING_ACCOUNT,
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
-  LOAD_PROJECT_DETAILS
+  LOAD_PROJECT_DETAILS,
+  LOAD_PROJECT_PHASES
 } from '../config/constants'
-import { fetchProjectById, fetchBillingAccount } from '../services/projects'
+import { fetchProjectById, fetchBillingAccount, fetchProjectPhases } from '../services/projects'
 
 /**
  * Loads project details
@@ -27,6 +28,12 @@ export function loadProject (projectId) {
           payload: fetchBillingAccount(projectId)
         })
 
+        // Loads project phases
+        dispatch({
+          type: LOAD_PROJECT_PHASES,
+          payload: fetchProjectPhases(projectId)
+        })
+
         return project
       })
     })

src/components/Buttons/PrimaryButton/PrimaryButton.module.scss

@@ -57,6 +57,15 @@
     }
   }
 
+  &.successDark {
+    @include roboto-bold;
+    background-color: $tc-green-50;
+    &:disabled {
+      cursor: default;
+      background-color: $inactive;
+    }
+  }
+
   /* this style just visually simulates the disable status of the button */
   &.disabled {
     cursor: default;

src/components/ChallengeEditor/ChallengeView/index.js

@@ -21,7 +21,7 @@ import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
 import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
-import { REVIEW_TYPES } from '../../../config/constants'
+import { REVIEW_TYPES, CONNECT_APP_URL, PHASE_PRODUCT_CHALLENGE_ID_FIELD } from '../../../config/constants'
 
 const ChallengeView = ({
   projectDetail,
@@ -36,10 +36,17 @@ const ChallengeView = ({
   assignedMemberDetails,
   enableEdit,
   onLaunchChallenge,
-  onCloseTask
+  onCloseTask,
+  projectPhases
 }) => {
   const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
   const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
+  const selectedMilestone = challenge.milestoneId
+    ? _.find(projectPhases, phase => phase.id === challenge.milestoneId)
+    : _.find(projectPhases,
+      phase => _.find(_.get(phase, 'products', []),
+        product => _.get(product, PHASE_PRODUCT_CHALLENGE_ID_FIELD) === challengeId
+      ))
 
   const [openAdvanceSettings, setOpenAdvanceSettings] = useState(false)
   const [groups, setGroups] = useState('')
@@ -80,6 +87,7 @@ const ChallengeView = ({
   if (isLoading || _.isEmpty(metadata.challengePhases) || challenge.id !== challengeId) return <Loader />
   const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
   const isTask = _.get(challenge, 'task.isTask', false)
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -94,6 +102,16 @@ const ChallengeView = ({
                   }} />
                 </span>
               </div>
+              {selectedMilestone &&
+              <div className={styles.col}>
+                <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
+                  <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
+                    rel='noopener noreferrer'>
+                    {selectedMilestone.name}
+                  </a>
+                ) : ''}</span>
+              </div>
+              }
               <div className={styles.col}>
                 <span className={styles.fieldTitle}>Track:</span>
                 <Track disabled type={challengeTrack} isActive key={challenge.trackId} onUpdateOthers={() => {}} />
@@ -111,13 +129,15 @@ const ChallengeView = ({
                 <span><span className={styles.fieldTitle}>Challenge Name:</span> {challenge.name}</span>
               </div>
             </div>
-            {isTask && <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly /> }
+            {isTask &&
+            <AssignedMemberField challenge={challenge} assignedMemberDetails={assignedMemberDetails} readOnly />}
             <CopilotField challenge={{
               copilot
             }} copilots={metadata.members} readOnly />
             <div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
-                <span><span className={styles.fieldTitle}>Review Type:</span> {isCommunity ? 'Community' : 'Internal'}</span>
+                <span><span
+                  className={styles.fieldTitle}>Review Type:</span> {isCommunity ? 'Community' : 'Internal'}</span>
               </div>
             </div>
             {isInternal && reviewer && (<div className={cn(styles.row, styles.topRow)}>
@@ -175,7 +195,7 @@ const ChallengeView = ({
                 />
               </div>
             }
-            { showTimeline && (
+            {showTimeline && (
               <ChallengeScheduleField
                 templates={metadata.timelineTemplates}
                 challengePhases={metadata.challengePhases}
@@ -238,7 +258,8 @@ ChallengeView.propTypes = {
   assignedMemberDetails: PropTypes.shape(),
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
-  onCloseTask: PropTypes.func
+  onCloseTask: PropTypes.func,
+  projectPhases: PropTypes.arrayOf(PropTypes.object)
 }
 
 export default withRouter(ChallengeView)

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -41,7 +41,8 @@ const ChallengeViewTabs = ({
   enableEdit,
   onLaunchChallenge,
   cancelChallenge,
-  onCloseTask
+  onCloseTask,
+  projectPhases
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
 
@@ -203,6 +204,7 @@ const ChallengeViewTabs = ({
           enableEdit={enableEdit}
           onLaunchChallenge={onLaunchChallenge}
           onCloseTask={onCloseTask}
+          projectPhases={projectPhases}
         />
       )}
       {selectedTab === 1 && (
@@ -238,7 +240,8 @@ ChallengeViewTabs.propTypes = {
   enableEdit: PropTypes.bool,
   onLaunchChallenge: PropTypes.func,
   cancelChallenge: PropTypes.func.isRequired,
-  onCloseTask: PropTypes.func
+  onCloseTask: PropTypes.func,
+  projectPhases: PropTypes.arrayOf(PropTypes.object)
 }
 
 export default ChallengeViewTabs

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

@@ -0,0 +1,61 @@
+@import "../../../styles/includes";
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  margin: 30px 30px 0 30px;
+  align-content: space-between;
+  justify-content: flex-start;
+
+  .field {
+    @include upto-sm {
+      display: block;
+      padding-bottom: 10px;
+    }
+
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+    }
+
+    &.col1 {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2.error {
+      color: $tc-red;
+      margin-top: -25px;
+    }
+    &.col2 {
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      display: flex;
+      flex-direction: row;
+      max-width: 600px;
+      min-width: 600px;
+    }
+
+    &.manageLink {
+      margin: 2px 12px;
+      text-decoration: none;
+      font-size: 12px;
+    }
+  }
+}