From d2d6a76d92a05b5a5e147695cf2d4d037b0fecdf Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Sat, 24 Jul 2021 21:50:30 +0700
Subject: [PATCH 01/18] integrate with phase member api

---
 src/api/phaseMembers.js                       |  9 +++++++
 src/projects/actions/phaseMember.js           | 10 +++++++
 src/projects/actions/project.js               |  8 +++---
 .../ManageMilestones/ManageMilestones.jsx     |  1 +
 .../MilestoneHeaderRow/MilestoneHeaderRow.jsx |  2 +-
 .../components/MilestoneRow/MilestoneRow.jsx  | 25 +++++++++---------
 .../detail/containers/DashboardContainer.jsx  | 26 +++++++++++++------
 7 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 src/api/phaseMembers.js
 create mode 100644 src/projects/actions/phaseMember.js

diff --git a/src/api/phaseMembers.js b/src/api/phaseMembers.js
new file mode 100644
index 000000000..60782e834
--- /dev/null
+++ b/src/api/phaseMembers.js
@@ -0,0 +1,9 @@
+import { axiosInstance as axios } from './requestInterceptor'
+import { PROJECTS_API_URL } from '../config/constants'
+
+export function updatePhaseMembers(projectId, phaseId, userIds) {
+  const url = `${PROJECTS_API_URL}/v5/projects/${projectId}/phases/${phaseId}/members`
+  const data = { userIds }
+  return axios.post(url, data)
+    .then(res => res.data)
+}
diff --git a/src/projects/actions/phaseMember.js b/src/projects/actions/phaseMember.js
new file mode 100644
index 000000000..8cbb5ec42
--- /dev/null
+++ b/src/projects/actions/phaseMember.js
@@ -0,0 +1,10 @@
+import { updatePhaseMembers as updatePhaseMembersAPI } from '../../api/phaseMembers'
+
+export function updatePhaseMembers(projectId, phaseId, userIds) {
+  return (dispatch) => {
+    return dispatch({
+      type: 'UPDATE_PROJECT_PHASE_MEMBERS',
+      payload: updatePhaseMembersAPI(projectId, phaseId, userIds)
+    })
+  }
+}
diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js
index 51278d20c..0aef4b35a 100644
--- a/src/projects/actions/project.js
+++ b/src/projects/actions/project.js
@@ -187,6 +187,7 @@ function getProjectPhasesWithProducts(projectId) {
       'spentBudget',
       'startDate',
       'status',
+      'members',
       'updatedAt',
       'updatedBy',
     ].join(',')
@@ -286,14 +287,13 @@ function createProductsTimelineAndMilestone(project) {
  *
  * @return {Promise} project
  */
-export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true, budget, details) {
+export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true, budget) {
   const param = {
     status,
     name: productTemplate.name,
     description: productTemplate.description,
     productTemplateId: productTemplate.id,
     budget,
-    details,
   }
   if (startDate) {
     param['startDate'] = startDate.format('YYYY-MM-DD')
@@ -358,12 +358,12 @@ function createPhaseAndMilestonesRequest(project, productTemplate, status = PHAS
  * @param {*} startDate 
  * @param {*} endDate 
  */
-export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate, budget, details) {
+export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate, budget) {
   return (dispatch) => {
     console.log(CREATE_PROJECT_PHASE)
     return dispatch({
       type: CREATE_PROJECT_PHASE,
-      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false, budget, details)
+      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false, budget)
     })
   }
 }
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 241c378d4..894f4316c 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -130,6 +130,7 @@ class ManageMilestones extends React.Component {
                     isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
                     isUpdatable={isUpdatable}
                     members={members}
+                    phaseMembers={milestone.members}
                   />
                 ))}
               </tbody>
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
index 6822d19b1..813f4c795 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -46,7 +46,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
       <th>END DATE</th>
       <th>STATUS</th>
       <th>BUDGET</th>
-      {/* <th>COPILOTS</th> */}
+      <th>COPILOTS</th>
       {isUpdatable && (<th>ACTION</th>)}
     </tr>
   )
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index 4c7a5bd26..533f49961 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -9,7 +9,7 @@ import _ from 'lodash'
 import { components } from 'react-select'
 import { isValidStartEndDates } from '../../../../../../helpers/utils'
 import FormsySelect from '../../../../../../components/Select/FormsySelect'
-// import MilestoneCopilots from '../MilestoneCopilots'
+import MilestoneCopilots from '../MilestoneCopilots'
 import MilestoneStatus from '../MilestoneStatus'
 import MilestoneBudget from '../MilestoneBudget'
 import MilestoneDeleteButton from '../MilestoneDeleteButton'
@@ -36,10 +36,11 @@ function MilestoneRow({
   isCreatingRow,
   isUpdatable,
   members,
+  phaseMembers,
 }) {
   const phaseStatusOptions = PHASE_STATUS_OPTIONS
   const edit = milestone.edit
-  const copilotIds = _.get(milestone, 'details.copilots', [])
+  const copilotIds = (phaseMembers || []).map(i => i.userId)
   let copilots = copilotIds.map(userId => projectMembers.find(member => member.userId === userId)).filter(Boolean)
 
   if (copilots.length !== copilotIds.length) {
@@ -221,7 +222,7 @@ function MilestoneRow({
           innerRef={ref => budgetRef = ref}
         />
       </td>
-      {/* <td styleName="copilots">
+      <td styleName="copilots">
         <MilestoneCopilots
           edit
           copilots={copilots}
@@ -230,20 +231,20 @@ function MilestoneRow({
             if (!milestone.origin) {
               milestone.origin = {...milestone}
             }
-            const details = milestone.details
-            const copilotIdsUpdated = copilots.map(copilot => copilot.userId).concat(member.userId)
-            onChange({...milestone, details: { ...details, copilots: copilotIdsUpdated } })
+            const copilotsUpdated = copilots
+              .concat(member)
+            onChange({...milestone, members: copilotsUpdated })
           }}
           onRemove={(member) => {
             if (!milestone.origin) {
               milestone.origin = {...milestone}
             }
-            const details = milestone.details
-            const copilotIdsUpdated = copilots.filter(copilot => copilot.userId !== member.userId).map(copilot => copilot.userId)
-            onChange({...milestone, details: { ...details, copilots: copilotIdsUpdated } })
+            const copilotsUpdated = copilots
+              .filter(copilot => copilot.userId !== member.userId)
+            onChange({...milestone, members: copilotsUpdated })
           }}
         />
-      </td> */}
+      </td>
       <td styleName="action">
         <div styleName="inline-menu">
           <button
@@ -310,9 +311,9 @@ function MilestoneRow({
       <td styleName="budget">
         <MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} />
       </td>
-      {/* <td styleName="copilots">
+      <td styleName="copilots">
         <MilestoneCopilots copilots={copilots} />
-      </td> */}
+      </td>
       {isUpdatable && (
         <td styleName="action">
           <div styleName="inline-menu">
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 17b7a8c68..293bd4855 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -52,6 +52,7 @@ import { addProjectAttachment, updateProjectAttachment, removeProjectAttachment
 import { loadMembers } from '../../../actions/members'
 import ProjectEstimation from '../../create/components/ProjectEstimation'
 import CreateSimplePlan from '../components/SimplePlan/CreateSimplePlan'
+import { updatePhaseMembers } from '../../actions/phaseMember'
 
 import {
   PHASE_STATUS_ACTIVE,
@@ -341,6 +342,19 @@ class DashboardContainer extends React.Component {
                           const index = createGameplanPhases.findIndex(phase => phase.id === id)
                           const phase = createGameplanPhases[index]
 
+                          const updatePhaseMembers = () => {
+                            const phaseMembers = _.get(phase, 'members', [])
+                            const oldPhaseMembers = _.get(phase, 'origin.members', [])
+                            if (phaseMembers.length !== oldPhaseMembers.length ||
+                              _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
+                              this.props.updatePhaseMembers(
+                                phase.projectId,
+                                phase.id,
+                                phaseMembers.map(member => member.userId)
+                              )
+                            }
+                          }
+
                           if (`${phase.id}`.startsWith('new-milestone')) {
                             const productTemplate = {
                               name: phase.name,
@@ -357,8 +371,7 @@ class DashboardContainer extends React.Component {
                               phase.status,
                               moment.utc(phase.startDate),
                               moment.utc(phase.endDate),
-                              phase.budget,
-                              phase.details
+                              phase.budget
                             ).then(({ action }) => {
                               // reload phase
                               const updatedCreateGameplanPhases = [...createGameplanPhases]
@@ -367,7 +380,7 @@ class DashboardContainer extends React.Component {
                                 selected: phase.selected
                               })
                               this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            })
+                            }).then(() => updatePhaseMembers())
                           } else {
                             const updateParam =  {
                               name: phase.name,
@@ -381,10 +394,6 @@ class DashboardContainer extends React.Component {
                               updateParam.description = phase.description.trim()
                             }
 
-                            if (phase.details) {
-                              updateParam.details = phase.details
-                            }
-
                             this.props.updatePhase(
                               phase.projectId,
                               phase.id,
@@ -400,7 +409,7 @@ class DashboardContainer extends React.Component {
                                 selected: this.state.createGameplanPhases[idx].selected,
                               })
                               this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            })
+                            }).then(() => updatePhaseMembers())
 
                             // toggle edit
                             const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
@@ -501,6 +510,7 @@ const mapDispatchToProps = {
   removeProjectAttachment,
   updatePhase,
   loadMembers,
+  updatePhaseMembers,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(DashboardContainer))

From 5e572b2ba81ae738f42d5007276d004376f75e61 Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Sat, 24 Jul 2021 22:22:28 +0700
Subject: [PATCH 02/18] fix alert message typo

---
 src/reducers/alerts.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 8f0355b7b..9997dfe23 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -97,7 +97,11 @@ export default function(state = {}, action) {
   }
 
   case DELETE_PROJECT_PHASE_SUCCESS: {
-    Alert.success('Project phase deleted.')
+    if (state.project.version === 'v4') {
+      Alert.success('Project milestone deleted.')
+    } else {
+      Alert.success('Project phase deleted.')
+    }
 
     return state
   }

From fba54041bf19b1af982bd52ec28b019eb518fbba Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Mon, 26 Jul 2021 19:07:17 +0700
Subject: [PATCH 03/18] fix issue 4428

---
 .../SimplePlan/ManageMilestones/ManageMilestones.jsx       | 2 +-
 src/projects/detail/containers/DashboardContainer.jsx      | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 241c378d4..fbaea6e1e 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -105,7 +105,7 @@ class ManageMilestones extends React.Component {
                 <col style={{ width: '11%' }} />{/* END DATE */}
                 <col style={{ width: '10%' }} />{/* STATUS */}
                 <col style={{ width: '12%' }} />{/* BUDGET */}
-                <col style={{ width: '13%' }} />{/* COPILOTS */}
+                {/* <col style={{ width: '13%' }} /> */}{/* COPILOTS */}
                 {isUpdatable && (<col style={{ width: '80px' }} />)}{/* ACTION */}
               </colgroup>
               <thead>
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 17b7a8c68..90d4ecbb9 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -304,9 +304,10 @@ class DashboardContainer extends React.Component {
                 </div>
               ) : (
                 <div styleName="simple-plan">
-                  {((!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) && (!visiblePhases || visiblePhases.length === 0))
+                  {/* check if visiblePhases/phases is non-null and empty */}
+                  {((!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) && (visiblePhases && visiblePhases.length === 0))
                     || (hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN) &&
-                      (!phases || phases.length === 0) &&
+                      (phases && phases.length === 0) &&
                       (!this.state.createGameplanPhases || this.state.createGameplanPhases.length === 0))
                   ) && (
                     <div styleName="welcome-message">
@@ -332,7 +333,7 @@ class DashboardContainer extends React.Component {
                         isCustomer={!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN)}
                         project={project}
                         phases={phases}
-                        milestones={this.state.createGameplanPhases || phases}
+                        milestones={this.state.createGameplanPhases || visiblePhases || []}
                         onChangeMilestones={(milestones) => {
                           this.setState({createGameplanPhases: milestones})
                         }}

From e2ce1ba827515fb24721d0999f2f50a270711a56 Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Mon, 26 Jul 2021 20:17:44 +0700
Subject: [PATCH 04/18] fix phaseId when updating phase members of a newly
 created phase

---
 .../detail/containers/DashboardContainer.jsx        | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 293bd4855..8e0baff38 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -342,14 +342,14 @@ class DashboardContainer extends React.Component {
                           const index = createGameplanPhases.findIndex(phase => phase.id === id)
                           const phase = createGameplanPhases[index]
 
-                          const updatePhaseMembers = () => {
+                          const updatePhaseMembers = (projectId, phaseId) => {
                             const phaseMembers = _.get(phase, 'members', [])
                             const oldPhaseMembers = _.get(phase, 'origin.members', [])
                             if (phaseMembers.length !== oldPhaseMembers.length ||
                               _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
                               this.props.updatePhaseMembers(
-                                phase.projectId,
-                                phase.id,
+                                projectId,
+                                phaseId,
                                 phaseMembers.map(member => member.userId)
                               )
                             }
@@ -365,6 +365,8 @@ class DashboardContainer extends React.Component {
                               productTemplate.description = phase.description.trim()
                             }
 
+                            const projectId = project.id
+                            let phaseId
                             this.props.createPhaseWithoutTimeline(
                               project,
                               productTemplate,
@@ -373,6 +375,7 @@ class DashboardContainer extends React.Component {
                               moment.utc(phase.endDate),
                               phase.budget
                             ).then(({ action }) => {
+                              phaseId = action.payload.phase.id
                               // reload phase
                               const updatedCreateGameplanPhases = [...createGameplanPhases]
                               updatedCreateGameplanPhases.splice(index, 1, {
@@ -380,7 +383,7 @@ class DashboardContainer extends React.Component {
                                 selected: phase.selected
                               })
                               this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            }).then(() => updatePhaseMembers())
+                            }).then(() => updatePhaseMembers(projectId, phaseId))
                           } else {
                             const updateParam =  {
                               name: phase.name,
@@ -409,7 +412,7 @@ class DashboardContainer extends React.Component {
                                 selected: this.state.createGameplanPhases[idx].selected,
                               })
                               this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            }).then(() => updatePhaseMembers())
+                            }).then(() => updatePhaseMembers(phase.projectId, phase.id))
 
                             // toggle edit
                             const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]

From 223a4115dcad70786122b6e612ee3fcd5a7b3611 Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Wed, 28 Jul 2021 22:36:48 +0300
Subject: [PATCH 05/18] Updated width of copilots entry

---
 .circleci/config.yml                                            | 2 +-
 .../components/SimplePlan/ManageMilestones/ManageMilestones.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 96358b924..fb3293fd1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -188,7 +188,7 @@ workflows:
             - build-dev
           filters: &filters-dev
             branches:
-              only: ['dev']
+              only: ['dev', 'feature/new-milestone-concept']
 
       - deployTest01:
           context : org-global
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index d9d6cbc0b..894f4316c 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -105,7 +105,7 @@ class ManageMilestones extends React.Component {
                 <col style={{ width: '11%' }} />{/* END DATE */}
                 <col style={{ width: '10%' }} />{/* STATUS */}
                 <col style={{ width: '12%' }} />{/* BUDGET */}
-                {/* <col style={{ width: '13%' }} /> */}{/* COPILOTS */}
+                <col style={{ width: '13%' }} />{/* COPILOTS */}
                 {isUpdatable && (<col style={{ width: '80px' }} />)}{/* ACTION */}
               </colgroup>
               <thead>

From a49bfe09000d9513a7acf297d0988d2bbbbae3a5 Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Thu, 29 Jul 2021 13:16:34 +0700
Subject: [PATCH 06/18] fix issue 4439

---
 .../CreateSimplePlan/CreateSimplePlan.jsx       | 17 -----------------
 .../ManageMilestones/ManageMilestones.jsx       |  3 ---
 .../components/MilestoneRow/MilestoneRow.jsx    | 12 ++----------
 .../detail/containers/DashboardContainer.jsx    |  9 +--------
 4 files changed, 3 insertions(+), 38 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
index b059b4503..f10edbe11 100644
--- a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
+++ b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
@@ -3,7 +3,6 @@
  */
 import React from 'react'
 import PT from 'prop-types'
-import _ from 'lodash'
 import GenericMenu from '../../../../../components/GenericMenu'
 // import ProjectDetailsWidget from '../ProjectDetailsWidget'
 import ManageMilestones from '../ManageMilestones'
@@ -21,19 +20,6 @@ const createTabs = ({ onClick } ) => ([
 
 class CreateSimplePlan extends React.Component {
   componentDidMount() {
-    const { project, milestones, loadMembers } = this.props
-
-    let copilotIds = []
-    milestones.forEach((milestone) => {
-      copilotIds = copilotIds.concat(_.get(milestone, 'details.copilots', []))
-    })
-
-    const projectMemberIds = project.members.map(member => member.userId)
-    const missingMemberIds = _.difference(copilotIds, projectMemberIds)
-    if (missingMemberIds.length) {
-      loadMembers(missingMemberIds)
-    }
-
     const contentInnerElement = document.querySelector('.twoColsLayout-contentInner')
     contentInnerElement.classList.add(styles['twoColsLayout-contentInner'])
   }
@@ -52,7 +38,6 @@ class CreateSimplePlan extends React.Component {
       onSaveMilestone,
       onRemoveMilestone,
       isProjectLive,
-      members,
       isCustomer,
     } = this.props
     const onClickMilestonesTab = () => {}
@@ -88,7 +73,6 @@ class CreateSimplePlan extends React.Component {
             onRemoveMilestone={onRemoveMilestone}
             projectMembers={project.members}
             isUpdatable={isProjectLive && !isCustomer}
-            members={members}
           />
         </div>
       </div>
@@ -103,7 +87,6 @@ CreateSimplePlan.propTypes = {
   onChangeMilestones: PT.func,
   onSaveMilestone: PT.func,
   onRemoveMilestone: PT.func,
-  members: PT.object,
   isCustomer: PT.bool,
 }
 
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 894f4316c..9039ec55b 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -69,7 +69,6 @@ class ManageMilestones extends React.Component {
       projectMembers,
       onChangeMilestones,
       isUpdatable,
-      members,
     } = this.props
 
     return (
@@ -129,7 +128,6 @@ class ManageMilestones extends React.Component {
                     allMilestones={milestones}
                     isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
                     isUpdatable={isUpdatable}
-                    members={members}
                     phaseMembers={milestone.members}
                   />
                 ))}
@@ -148,7 +146,6 @@ ManageMilestones.propTypes = {
   onSaveMilestone: PT.func,
   onRemoveMilestone: PT.func,
   projectMembers: PT.arrayOf(PT.shape()),
-  members: PT.object,
   isUpdatable: PT.bool,
 }
 
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index 533f49961..1f64e409f 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -5,7 +5,6 @@ import React from 'react'
 import PT from 'prop-types'
 import moment from 'moment'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
-import _ from 'lodash'
 import { components } from 'react-select'
 import { isValidStartEndDates } from '../../../../../../helpers/utils'
 import FormsySelect from '../../../../../../components/Select/FormsySelect'
@@ -35,19 +34,12 @@ function MilestoneRow({
   allMilestones,
   isCreatingRow,
   isUpdatable,
-  members,
   phaseMembers,
 }) {
   const phaseStatusOptions = PHASE_STATUS_OPTIONS
   const edit = milestone.edit
-  const copilotIds = (phaseMembers || []).map(i => i.userId)
-  let copilots = copilotIds.map(userId => projectMembers.find(member => member.userId === userId)).filter(Boolean)
-
-  if (copilots.length !== copilotIds.length) {
-    const missingCopilotIds = _.difference(copilotIds, projectMembers.map(member => member.userId))
-    const missingCopilots = missingCopilotIds.map(userId => members[userId])
-    copilots = copilots.concat(missingCopilots)
-  }
+  // hide email
+  const copilots = (phaseMembers || []).map(member => ({ ...member, email: undefined }))
 
   let milestoneRef
   let startDateRef
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 152e8e16d..bf943f674 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -49,7 +49,6 @@ import { getProjectTemplateById } from '../../../helpers/templates'
 import { PERMISSIONS } from '../../../config/permissions'
 import { updateProject, fireProjectDirty, fireProjectDirtyUndo, updatePhase } from '../../actions/project'
 import { addProjectAttachment, updateProjectAttachment, removeProjectAttachment } from '../../actions/projectAttachment'
-import { loadMembers } from '../../../actions/members'
 import ProjectEstimation from '../../create/components/ProjectEstimation'
 import CreateSimplePlan from '../components/SimplePlan/CreateSimplePlan'
 import { updatePhaseMembers } from '../../actions/phaseMember'
@@ -163,8 +162,6 @@ class DashboardContainer extends React.Component {
       removeProjectAttachment,
       location,
       estimationQuestion,
-      loadMembers,
-      members,
     } = this.props
     const projectTemplate = project && project.templateId && projectTemplates ? (getProjectTemplateById(projectTemplates, project.templateId)) : null
 
@@ -328,8 +325,6 @@ class DashboardContainer extends React.Component {
 
                     return (
                       <CreateSimplePlan
-                        members={members}
-                        loadMembers={loadMembers}
                         isProjectLive={isProjectLive}
                         isCustomer={!hasPermission(PERMISSIONS.MANAGE_PROJECT_PLAN)}
                         project={project}
@@ -466,7 +461,7 @@ class DashboardContainer extends React.Component {
   }
 }
 
-const mapStateToProps = ({ notifications, projectState, projectTopics, templates, topics, members }) => {
+const mapStateToProps = ({ notifications, projectState, projectTopics, templates, topics }) => {
   // all feeds includes primary as well as private topics if user has access to private topics
   let allFeed = projectTopics.feeds[PROJECT_FEED_TYPE_PRIMARY].topics
   if (hasPermission(PERMISSIONS.ACCESS_PRIVATE_POST)) {
@@ -487,7 +482,6 @@ const mapStateToProps = ({ notifications, projectState, projectTopics, templates
     isFeedsLoading: projectTopics.isLoading,
     phasesStates: projectState.phasesStates,
     phasesTopics: topics,
-    members: members.members
   }
 }
 
@@ -513,7 +507,6 @@ const mapDispatchToProps = {
   updateProjectAttachment,
   removeProjectAttachment,
   updatePhase,
-  loadMembers,
   updatePhaseMembers,
 }
 

From 2c11f5fdbc7fd51955fb7a6e67be653996ebdff6 Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Thu, 29 Jul 2021 19:56:20 +0700
Subject: [PATCH 07/18] fix issue 4433

---
 src/projects/actions/project.js               |  7 ++--
 .../ManageMilestones/ManageMilestones.jsx     |  3 +-
 .../ManageMilestones/ManageMilestones.scss    | 22 ++----------
 .../MilestoneBudget/MilestoneBudget.jsx       | 25 -------------
 .../MilestoneBudget/MilestoneBudget.scss      | 35 -------------------
 .../components/MilestoneBudget/index.js       |  2 --
 .../MilestoneHeaderRow/MilestoneHeaderRow.jsx |  1 -
 .../components/MilestoneRow/MilestoneRow.jsx  | 33 -----------------
 .../components/MilestoneRow/MilestoneRow.scss | 26 +++-----------
 .../detail/containers/DashboardContainer.jsx  |  4 +--
 10 files changed, 11 insertions(+), 147 deletions(-)
 delete mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx
 delete mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
 delete mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js

diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js
index 0aef4b35a..b39175391 100644
--- a/src/projects/actions/project.js
+++ b/src/projects/actions/project.js
@@ -287,13 +287,12 @@ function createProductsTimelineAndMilestone(project) {
  *
  * @return {Promise} project
  */
-export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true, budget) {
+export function createProjectPhaseAndProduct(project, productTemplate, status = PHASE_STATUS_DRAFT, startDate, endDate, createTimeline = true) {
   const param = {
     status,
     name: productTemplate.name,
     description: productTemplate.description,
     productTemplateId: productTemplate.id,
-    budget,
   }
   if (startDate) {
     param['startDate'] = startDate.format('YYYY-MM-DD')
@@ -358,12 +357,12 @@ function createPhaseAndMilestonesRequest(project, productTemplate, status = PHAS
  * @param {*} startDate 
  * @param {*} endDate 
  */
-export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate, budget) {
+export function createPhaseWithoutTimeline(project, productTemplate, status, startDate, endDate) {
   return (dispatch) => {
     console.log(CREATE_PROJECT_PHASE)
     return dispatch({
       type: CREATE_PROJECT_PHASE,
-      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false, budget)
+      payload: createProjectPhaseAndProduct(project, productTemplate, status, startDate, endDate, false)
     })
   }
 }
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 9039ec55b..c4ebc5da5 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -103,9 +103,8 @@ class ManageMilestones extends React.Component {
                 <col style={{ width: '12%' }} />{/* START DATE */}
                 <col style={{ width: '11%' }} />{/* END DATE */}
                 <col style={{ width: '10%' }} />{/* STATUS */}
-                <col style={{ width: '12%' }} />{/* BUDGET */}
                 <col style={{ width: '13%' }} />{/* COPILOTS */}
-                {isUpdatable && (<col style={{ width: '80px' }} />)}{/* ACTION */}
+                {isUpdatable && (<col style={{ width: '64px' }} />)}{/* ACTION */}
               </colgroup>
               <thead>
                 <MilestoneHeaderRow
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
index 3edd9d897..4ae62282d 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -59,13 +59,8 @@
     &:nth-child(5) { padding-left: 15px; }
     // status
     &:nth-child(6) { padding-left: 20px; }
-    // budget
-    &:nth-child(7) {
-      padding-left: 20px;
-      :global(.milestone-budget-prefix-icon) { left: 25px; }
-    }
     // copilot
-    &:nth-child(8) { padding-left: 25px; }
+    &:nth-child(7) { padding-left: 25px; }
   }
 
   :global(.edit-milestone-row) {
@@ -89,21 +84,8 @@
       &:nth-child(5) { padding-left: 5px; }
       // status
       &:nth-child(6) { padding-left: 10px; }
-      // budget
-      &:nth-child(7) {
-        padding-left: 10px;
-        :global {
-          .milestone-budget-prefix-icon {
-            left: 15px;
-          }
-          .tc-file-field__inputs {
-            min-width: 64px;
-            padding-left: 10px;
-          }
-        }
-      }
       // copilot
-      &:nth-child(8) { padding-left: 15px; }
+      &:nth-child(7) { padding-left: 15px; }
     }
 
     :global(.edit-milestone-row) {
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx
deleted file mode 100644
index 64bea9532..000000000
--- a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Milestone budget
- */
-import React from 'react'
-import PT from 'prop-types'
-
-import './MilestoneBudget.scss'
-
-function MilestoneBudget({ spent, budget }) {
-  return (
-    <div styleName="progress-bar">
-      <div styleName="text">{budget > 0 ? `$${spent} of $${budget}` : `$${budget}`}</div>
-      <div styleName="background"/>
-      <div styleName="progress" style={{transform: `scaleX(${budget > 0 ? spent/budget : 0})`}}/>
-    </div>
-  )
-}
-
-
-MilestoneBudget.propTypes = {
-  spent: PT.number,
-  budget: PT.number,
-}
-
-export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
deleted file mode 100644
index 308256d79..000000000
--- a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/MilestoneBudget.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import '~styles/variables';
-
-.progress-bar {
-  position: relative;
-  padding-bottom: 6px;
-
-  .text {
-    @include roboto;
-    font-size: 9px;
-    line-height: 12px;
-    color: $tc-gray-20;
-  }
-
-  .background,
-  .progress {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    border-width: 3px;
-    border-style: solid;
-    border-radius: 6px;
-  }
-
-  .background {
-    background-color: $tc-gray-20;
-    border-color:  $tc-gray-20;
-  }
-
-  .progress {
-    background-color: $tc-green-110;
-    border-color: $tc-green-110;
-    transform-origin: left;
-  }
-}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
deleted file mode 100644
index d76b13aa7..000000000
--- a/src/projects/detail/components/SimplePlan/components/MilestoneBudget/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import MilestoneBudget from './MilestoneBudget'
-export default MilestoneBudget
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
index 813f4c795..ddbded24f 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -45,7 +45,6 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
       <th>START DATE</th>
       <th>END DATE</th>
       <th>STATUS</th>
-      <th>BUDGET</th>
       <th>COPILOTS</th>
       {isUpdatable && (<th>ACTION</th>)}
     </tr>
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index 1f64e409f..abccfb59b 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -10,7 +10,6 @@ import { isValidStartEndDates } from '../../../../../../helpers/utils'
 import FormsySelect from '../../../../../../components/Select/FormsySelect'
 import MilestoneCopilots from '../MilestoneCopilots'
 import MilestoneStatus from '../MilestoneStatus'
-import MilestoneBudget from '../MilestoneBudget'
 import MilestoneDeleteButton from '../MilestoneDeleteButton'
 import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
 import IconCheck from '../../../../../../assets/icons/icon-check-thin.svg'
@@ -44,7 +43,6 @@ function MilestoneRow({
   let milestoneRef
   let startDateRef
   let endDateRef
-  let budgetRef
 
   return edit ? (
     <tr styleName="milestone-row" className="edit-milestone-row">
@@ -187,33 +185,6 @@ function MilestoneRow({
           }}
         />
       </td>
-      <td styleName="budget">
-        <span styleName="prefix-icon" className="milestone-budget-prefix-icon">$</span>
-        <TCFormFields.TextInput
-          validations={{
-            isRequired: true,
-            isPositive(values) {
-              return !(values[`budget-${rowId}`] < 0)
-            }
-          }}
-          validationError={'Please, enter budget'}
-          validationErrors={{
-            isPositive: 'Budget cannot be negative'
-          }}
-          required
-          type="number"
-          name={`budget-${rowId}`}
-          value={milestone.budget || 0}
-          onChange={(_, value) => {
-            if (!milestone.origin) {
-              milestone.origin = {...milestone}
-            }
-            onChange({...milestone, budget: value })
-          }}
-          wrapperClass={styles.textInput}
-          innerRef={ref => budgetRef = ref}
-        />
-      </td>
       <td styleName="copilots">
         <MilestoneCopilots
           edit
@@ -249,7 +220,6 @@ function MilestoneRow({
               if (milestoneRef.props.isValid()
                 && startDateRef.props.isValid()
                 && endDateRef.props.isValid()
-                && budgetRef.props.isValid()
               ) {
                 onSave(milestone.id)
               }
@@ -300,9 +270,6 @@ function MilestoneRow({
       <td styleName="status">
         <MilestoneStatus status={milestone.status} />
       </td>
-      <td styleName="budget">
-        <MilestoneBudget spent={milestone.spentBudget} budget={milestone.budget} />
-      </td>
       <td styleName="copilots">
         <MilestoneCopilots copilots={copilots} />
       </td>
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
index ce1e1f152..de75484a0 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -30,12 +30,12 @@
     white-space: nowrap;
   }
 
-  .budget {
-    padding-right: 10px;
+  .copilots {
+    &:not(:last-child) {
+      padding-right: 10px;
+    }
   }
 
-  .copilots {}
-
   .action {}
 }
 
@@ -141,24 +141,6 @@
   }
 }
 
-.budget {
-  position: relative;
-
-  .prefix-icon {
-    position: absolute;
-    left: 0;
-    top: calc(50% - 6px);
-    z-index: 1;
-  }
-
-  :global {
-    .tc-file-field__inputs {
-      padding-right: 0;
-      padding-left: 20px;
-    }
-  }
-}
-
 .action {
   .inline-menu {
     display: flex;
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index bf943f674..03f332847 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -368,8 +368,7 @@ class DashboardContainer extends React.Component {
                               productTemplate,
                               phase.status,
                               moment.utc(phase.startDate),
-                              moment.utc(phase.endDate),
-                              phase.budget
+                              moment.utc(phase.endDate)
                             ).then(({ action }) => {
                               phaseId = action.payload.phase.id
                               // reload phase
@@ -386,7 +385,6 @@ class DashboardContainer extends React.Component {
                               startDate: moment.utc(phase.startDate),
                               endDate: moment.utc(phase.endDate),
                               status: phase.status,
-                              budget: phase.budget,
                             }
 
                             if (phase.description && phase.description.trim()) {

From 91143f0724acc1c52b9c379d5acc3e6f02f0985e Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Thu, 29 Jul 2021 19:59:21 +0700
Subject: [PATCH 08/18] fix avatar disappeared after updating phase

---
 .../AddCopilotsSidebar/AddCopilotsSidebar.jsx |   8 +-
 .../detail/containers/DashboardContainer.jsx  | 264 ++++++++++--------
 2 files changed, 154 insertions(+), 118 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
index 5720b20fe..39f5b8c24 100644
--- a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
+++ b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
@@ -26,8 +26,12 @@ function AddCopilotsSidebar({
   const projectMemberOptions = projectMembers.map(projectMember => ({
     label: projectMember.handle,
     value: projectMember
-  })).filter(option => copilots.indexOf(option.value) === -1 && option.value.role === PROJECT_ROLE_COPILOT)
-
+  })).filter(
+    // check if project member was not added
+    option => copilots.findIndex(copilot => copilot.userId === option.value.userId) === -1 &&
+    // check if project member role is copilot
+    option.value.role === PROJECT_ROLE_COPILOT
+  )
 
   return (
     <aside styleName="add-copilots-sidebar">
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 03f332847..2ac46759d 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -87,6 +87,9 @@ class DashboardContainer extends React.Component {
     this.onNotificationRead = this.onNotificationRead.bind(this)
     this.toggleDrawer = this.toggleDrawer.bind(this)
     this.onFormSubmit = this.onFormSubmit.bind(this)
+    this.onChangeMilestones = this.onChangeMilestones.bind(this)
+    this.onSaveMilestone = this.onSaveMilestone.bind(this)
+    this.onRemoveMilestone = this.onRemoveMilestone.bind(this)
   }
 
   onNotificationRead(notification) {
@@ -137,6 +140,148 @@ class DashboardContainer extends React.Component {
     }
   }
 
+  onChangeMilestones(milestones) {
+    this.setState({createGameplanPhases: milestones})
+  }
+
+  onSaveMilestone(id) {
+    const { project, createPhaseWithoutTimeline, updatePhase } = this.props
+    const { createGameplanPhases } = this.state
+    const index = createGameplanPhases.findIndex(phase => phase.id === id)
+    const phase = createGameplanPhases[index]
+
+    /*
+     * @return {Promise} The updated phase members
+     */
+    const updatePhaseMembers = (projectId, phaseId) => {
+      const phaseMembers = _.get(phase, 'members', [])
+      const oldPhaseMembers = _.get(phase, 'origin.members', [])
+      if (phaseMembers.length !== oldPhaseMembers.length ||
+        _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
+        return this.props.updatePhaseMembers(
+          projectId,
+          phaseId,
+          phaseMembers.map(member => member.userId)
+        ).then(() => phaseMembers) // ignore the result from backend
+      }
+
+      return Promise.resolve([])
+    }
+
+    if (`${phase.id}`.startsWith('new-milestone')) {
+      const productTemplate = {
+        name: phase.name,
+        id: PHASE_PRODUCT_TEMPLATE_ID,
+      }
+
+      if (phase.description && phase.description.trim()) {
+        productTemplate.description = phase.description.trim()
+      }
+
+      const projectId = project.id
+      let phaseId
+      createPhaseWithoutTimeline(
+        project,
+        productTemplate,
+        phase.status,
+        moment.utc(phase.startDate),
+        moment.utc(phase.endDate)
+      ).then(({ action }) => {
+        phaseId = action.payload.phase.id
+        // reload phase
+        const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+        updatedCreateGameplanPhases.splice(index, 1, {
+          ...action.payload.phase,
+          selected: phase.selected,
+        })
+        this.setState({ createGameplanPhases: updatedCreateGameplanPhases }, () => {
+          updatePhaseMembers(projectId, phaseId)
+            .then((members) => {
+              // reload members
+              const updatedPhases = [...this.state.createGameplanPhases]
+              updatedPhases.splice(index, 1, {
+                ...updatedPhases[index],
+                members
+              })
+              this.setState({ createGameplanPhases: updatedPhases })
+            })
+        })
+
+      })
+    } else {
+      const updateParam =  {
+        name: phase.name,
+        startDate: moment.utc(phase.startDate),
+        endDate: moment.utc(phase.endDate),
+        status: phase.status,
+      }
+
+      if (phase.description && phase.description.trim()) {
+        updateParam.description = phase.description.trim()
+      }
+
+      Promise.all([
+        updatePhase(
+          phase.projectId,
+          phase.id,
+          updateParam
+        ),
+        updatePhaseMembers(phase.projectId, phase.id)
+      ]).then(([{ action }, members]) => {
+        const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+        const idx = updatedCreateGameplanPhases.findIndex(phase => phase.id === action.payload.id)
+
+        // reload phase
+        updatedCreateGameplanPhases.splice(idx, 1, {
+          ...action.payload,
+          edit: this.state.createGameplanPhases[idx].edit,
+          selected: this.state.createGameplanPhases[idx].selected,
+          members
+        })
+        this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+      })
+
+      // toggle edit
+      const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
+      updatedCreateGameplanPhases.splice(index, 1, {
+        ...phase,
+        edit: false,
+        selected: phase.selected
+      })
+      this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
+    }
+  }
+
+  onRemoveMilestone(id) {
+    const { phases } = this.props
+    const { createGameplanPhases } = this.state
+    let index
+    let projectId
+
+    if (createGameplanPhases) {
+      index = createGameplanPhases.findIndex(phase => phase.id === id)
+      projectId = createGameplanPhases[index].projectId
+    } else {
+      index = phases.findIndex(phase => phase.id === id)
+      projectId = phases[index].projectId
+    }
+
+    this.props.deleteProjectPhase(
+      projectId,
+      id
+    ).then(() => {
+      if (!this.state.createGameplanPhases) {
+        return
+      }
+
+      // remove phase
+      const index = this.state.createGameplanPhases.findIndex(phase => phase.id === id)
+      const newGameplanPhases = [...this.state.createGameplanPhases]
+      newGameplanPhases.splice(index, 1)
+      this.setState({createGameplanPhases: newGameplanPhases})
+    })
+  }
+
 
   render() {
     const {
@@ -330,122 +475,9 @@ class DashboardContainer extends React.Component {
                         project={project}
                         phases={phases}
                         milestones={this.state.createGameplanPhases || visiblePhases || []}
-                        onChangeMilestones={(milestones) => {
-                          this.setState({createGameplanPhases: milestones})
-                        }}
-                        onSaveMilestone={(id) => {
-                          const { createGameplanPhases } = this.state
-                          const index = createGameplanPhases.findIndex(phase => phase.id === id)
-                          const phase = createGameplanPhases[index]
-
-                          const updatePhaseMembers = (projectId, phaseId) => {
-                            const phaseMembers = _.get(phase, 'members', [])
-                            const oldPhaseMembers = _.get(phase, 'origin.members', [])
-                            if (phaseMembers.length !== oldPhaseMembers.length ||
-                              _.differenceBy(phaseMembers, oldPhaseMembers, member => member.userId).length !== 0) {
-                              this.props.updatePhaseMembers(
-                                projectId,
-                                phaseId,
-                                phaseMembers.map(member => member.userId)
-                              )
-                            }
-                          }
-
-                          if (`${phase.id}`.startsWith('new-milestone')) {
-                            const productTemplate = {
-                              name: phase.name,
-                              id: PHASE_PRODUCT_TEMPLATE_ID,
-                            }
-
-                            if (phase.description && phase.description.trim()) {
-                              productTemplate.description = phase.description.trim()
-                            }
-
-                            const projectId = project.id
-                            let phaseId
-                            this.props.createPhaseWithoutTimeline(
-                              project,
-                              productTemplate,
-                              phase.status,
-                              moment.utc(phase.startDate),
-                              moment.utc(phase.endDate)
-                            ).then(({ action }) => {
-                              phaseId = action.payload.phase.id
-                              // reload phase
-                              const updatedCreateGameplanPhases = [...createGameplanPhases]
-                              updatedCreateGameplanPhases.splice(index, 1, {
-                                ...action.payload.phase,
-                                selected: phase.selected
-                              })
-                              this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            }).then(() => updatePhaseMembers(projectId, phaseId))
-                          } else {
-                            const updateParam =  {
-                              name: phase.name,
-                              startDate: moment.utc(phase.startDate),
-                              endDate: moment.utc(phase.endDate),
-                              status: phase.status,
-                            }
-
-                            if (phase.description && phase.description.trim()) {
-                              updateParam.description = phase.description.trim()
-                            }
-
-                            this.props.updatePhase(
-                              phase.projectId,
-                              phase.id,
-                              updateParam
-                            ).then(({ action }) => {
-                              const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
-                              const idx = updatedCreateGameplanPhases.findIndex(phase => phase.id === action.payload.id)
-
-                              // reload phase
-                              updatedCreateGameplanPhases.splice(idx, 1, {
-                                ...action.payload,
-                                edit: this.state.createGameplanPhases[idx].edit,
-                                selected: this.state.createGameplanPhases[idx].selected,
-                              })
-                              this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                            }).then(() => updatePhaseMembers(phase.projectId, phase.id))
-
-                            // toggle edit
-                            const updatedCreateGameplanPhases = [...this.state.createGameplanPhases]
-                            updatedCreateGameplanPhases.splice(index, 1, {
-                              ...phase,
-                              edit: false,
-                              selected: phase.selected
-                            })
-                            this.setState({ createGameplanPhases: updatedCreateGameplanPhases })
-                          }
-                        }}
-                        onRemoveMilestone={(id) => {
-                          const { createGameplanPhases } = this.state
-                          let index
-                          let projectId
-
-                          if (createGameplanPhases) {
-                            index = createGameplanPhases.findIndex(phase => phase.id === id)
-                            projectId = createGameplanPhases[index].projectId
-                          } else {
-                            index = phases.findIndex(phase => phase.id === id)
-                            projectId = phases[index].projectId
-                          }
-
-                          this.props.deleteProjectPhase(
-                            projectId,
-                            id
-                          ).then(() => {
-                            if (!this.state.createGameplanPhases) {
-                              return
-                            }
-
-                            // remove phase
-                            const index = this.state.createGameplanPhases.findIndex(phase => phase.id === id)
-                            const newGameplanPhases = [...this.state.createGameplanPhases]
-                            newGameplanPhases.splice(index, 1)
-                            this.setState({createGameplanPhases: newGameplanPhases})
-                          })
-                        }}
+                        onChangeMilestones={this.onChangeMilestones}
+                        onSaveMilestone={this.onSaveMilestone}
+                        onRemoveMilestone={this.onRemoveMilestone}
                       />
                     )
                   })()}

From e284491ae56a3982db04cc84af14ed84579242bf Mon Sep 17 00:00:00 2001
From: Nguyen Viet <nqvietit@gmail.com>
Date: Fri, 30 Jul 2021 14:39:03 +0700
Subject: [PATCH 09/18] fix avatars disappeared when saving

---
 src/projects/detail/containers/DashboardContainer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 2ac46759d..509c15368 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -165,7 +165,7 @@ class DashboardContainer extends React.Component {
         ).then(() => phaseMembers) // ignore the result from backend
       }
 
-      return Promise.resolve([])
+      return Promise.resolve(phaseMembers)
     }
 
     if (`${phase.id}`.startsWith('new-milestone')) {

From 5d979d9f8f1ae5a3d18387138077cd887e8e8f8d Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Tue, 3 Aug 2021 10:39:19 +0300
Subject: [PATCH 10/18] Milestone Challenges Listing - Initial submission

---
 src/api/projects.js                           |  13 ++
 src/assets/icons/calendar.svg                 |  36 ++++
 src/assets/icons/icon-calendar.svg            |   1 +
 src/assets/icons/icon-copilot.svg             |   6 +
 src/assets/icons/icon-delete.svg              |   1 +
 src/assets/icons/icon-disselect.svg           |   7 +
 src/assets/icons/icon-save2.svg               |   1 +
 src/assets/icons/icon-trash2.svg              |   6 +
 src/config/constants.js                       |   6 +
 src/projects/actions/project.js               |  30 ++++
 .../CreateSimplePlan/CreateSimplePlan.jsx     |   3 +
 .../ManageMilestones/ManageMilestones.jsx     | 166 ++++++++++++++++--
 .../ManageMilestones/ManageMilestones.scss    |  29 +++
 .../MilestoneChallengeFooter.jsx              |  85 +++++++++
 .../MilestoneChallengeFooter.scss             |  38 ++++
 .../MilestoneChallengeFooter/index.js         |   2 +
 .../MilestoneChallengeHeader.jsx              |  25 +++
 .../MilestoneChallengeHeader.scss             |  49 ++++++
 .../MilestoneChallengeHeader/index.js         |   2 +
 .../MilestoneChallengeRow.jsx                 |  61 +++++++
 .../MilestoneChallengeRow.scss                |  67 +++++++
 .../components/MilestoneChallengeRow/index.js |   2 +
 .../MilestoneCopilots/MilestoneCopilots.jsx   |   8 +-
 .../MilestoneHeaderRow/MilestoneHeaderRow.jsx |   1 +
 .../components/MilestoneRow/MilestoneRow.jsx  |  12 +-
 .../components/MilestoneRow/MilestoneRow.scss |   5 +
 .../detail/containers/DashboardContainer.jsx  |   7 +
 src/projects/reducers/project.js              |  24 +++
 28 files changed, 674 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/calendar.svg
 create mode 100644 src/assets/icons/icon-calendar.svg
 create mode 100644 src/assets/icons/icon-copilot.svg
 create mode 100644 src/assets/icons/icon-delete.svg
 create mode 100644 src/assets/icons/icon-disselect.svg
 create mode 100644 src/assets/icons/icon-save2.svg
 create mode 100644 src/assets/icons/icon-trash2.svg
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/index.js
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/index.js
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/index.js

diff --git a/src/api/projects.js b/src/api/projects.js
index 41b3366d2..5198f572b 100644
--- a/src/api/projects.js
+++ b/src/api/projects.js
@@ -34,6 +34,19 @@ export function getProjectSuggestions() {
   // TODO
 }
 
+/**
+ * Get a challenge detail based on it's id
+ * @param  {integer} challenId challenge id
+ * @return {object}           challenge detail returned by api
+ */
+export function getChallengeById(challengeId) {
+  return axios.get(`${PROJECTS_API_URL}/v5/challenges/${challengeId}/`)
+    .then(resp => {
+      const res = resp.data
+      return res
+    })
+}
+
 
 /**
  * Get a project based on it's id
diff --git a/src/assets/icons/calendar.svg b/src/assets/icons/calendar.svg
new file mode 100644
index 000000000..e0823911f
--- /dev/null
+++ b/src/assets/icons/calendar.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-1" x="0" y="0" width="1240" height="240" rx="6"></rect>
+        <filter x="-1.2%" y="-5.2%" width="102.3%" height="112.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.149019608   0 0 0 0 0.149019608   0 0 0 0 0.156862745  0 0 0 0.06 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M12.6666667,2 L11.3333333,2 L11.3333333,1.33333333 C11.3333333,0.933333333 11.0666667,0.666666667 10.6666667,0.666666667 C10.2666667,0.666666667 10,0.933333333 10,1.33333333 L10,2 L6,2 L6,1.33333333 C6,0.933333333 5.73333333,0.666666667 5.33333333,0.666666667 C4.93333333,0.666666667 4.66666667,0.933333333 4.66666667,1.33333333 L4.66666667,2 L3.33333333,2 C2.2,2 1.33333333,2.86666667 1.33333333,4 L1.33333333,13.3333333 C1.33333333,14.4666667 2.2,15.3333333 3.33333333,15.3333333 L12.6666667,15.3333333 C13.8,15.3333333 14.6666667,14.4666667 14.6666667,13.3333333 L14.6666667,4 C14.6666667,2.86666667 13.8,2 12.6666667,2 Z M3.33333333,3.33333333 L4.66666667,3.33333333 L4.66666667,4 C4.66666667,4.4 4.93333333,4.66666667 5.33333333,4.66666667 C5.73333333,4.66666667 6,4.4 6,4 L6,3.33333333 L10,3.33333333 L10,4 C10,4.4 10.2666667,4.66666667 10.6666667,4.66666667 C11.0666667,4.66666667 11.3333333,4.4 11.3333333,4 L11.3333333,3.33333333 L12.6666667,3.33333333 C13.0666667,3.33333333 13.3333333,3.6 13.3333333,4 L13.3333333,6 L2.66666667,6 L2.66666667,4 C2.66666667,3.6 2.93333333,3.33333333 3.33333333,3.33333333 Z M12.6666667,14 L3.33333333,14 C2.93333333,14 2.66666667,13.7333333 2.66666667,13.3333333 L2.66666667,7.33333333 L13.3333333,7.33333333 L13.3333333,13.3333333 C13.3333333,13.7333333 13.0666667,14 12.6666667,14 Z" id="path-3"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="FF_TCChallengeDetails-tagging" transform="translate(-515.000000, -3268.000000)">
+            <rect fill="#EBEBEB" x="0" y="0" width="1367" height="3700"></rect>
+            <g id="related-thrive" transform="translate(64.000000, 3111.000000)">
+                <g id="background-copy">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+                <g id="article-copy" transform="translate(430.000000, 72.000000)">
+                    <rect id="Rectangle" fill="#D8D8D8" opacity="0.400000006" x="6.0254024e-12" y="4.54747351e-13" width="380" height="140" rx="10"></rect>
+                    <path d="M10,-2.27373675e-13 L242.216797,-2.27373675e-13 L242.216797,-2.27373675e-13 C247.890625,19.9257813 245.710938,42.2942708 235.677734,67.1054688 C220.62793,104.322266 242.216797,115.402344 242.216797,140 C164.811198,140 87.405599,140 10,140 C4.4771525,140 2.45271059e-15,135.522847 0,130 L0,10 C1.10000309e-15,4.4771525 4.4771525,-2.33464572e-13 10,-2.27373675e-13 Z" id="Rectangle-Copy-2" fill="#F4F4F4" opacity="0.400000006"></path>
+                    <g id="icon-/-calendar" transform="translate(20.000000, 85.000000)">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
+                        <g id="color-/-black" mask="url(#mask-4)" fill="#000000" fill-rule="evenodd">
+                            <rect id="Shape" x="0" y="0" width="16" height="16"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/icons/icon-calendar.svg b/src/assets/icons/icon-calendar.svg
new file mode 100644
index 000000000..aadc80a0e
--- /dev/null
+++ b/src/assets/icons/icon-calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34.573" height="34.573"><path d="M24.489 4.322V1.441a1.441 1.441 0 012.881 0v2.881a1.441 1.441 0 01-2.881 0zM7.2 5.762a1.44 1.44 0 001.443-1.44V1.441a1.441 1.441 0 00-2.881 0v2.881A1.44 1.44 0 007.2 5.762zm18.73 18.727v-4.321h-1.441v5.762h4.322v-1.441zm-7.2.72a6.482 6.482 0 106.482-6.482 6.49 6.49 0 00-6.485 6.483zm15.846 0a9.364 9.364 0 11-9.364-9.364 9.363 9.363 0 019.361 9.365zm-20.512 5.043H2.881V11.524h27.37v2.54a12.281 12.281 0 012.881 1.827V2.881h-4.321v1.441a2.892 2.892 0 01-3.829 2.728 2.959 2.959 0 01-1.933-2.858V2.881H10.084v1.441A2.892 2.892 0 016.255 7.05a2.959 2.959 0 01-1.933-2.858V2.881H0v30.252h15.891a12.281 12.281 0 01-1.827-2.881z" fill="#333"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-copilot.svg b/src/assets/icons/icon-copilot.svg
new file mode 100644
index 000000000..7cfcab478
--- /dev/null
+++ b/src/assets/icons/icon-copilot.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="15pt" viewBox="0 0 15 15" version="1.1">
+<g id="surface1">
+<path style="fill-rule:nonzero;fill:rgb(20%,20%,20%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(20%,20%,20%);stroke-opacity:1;stroke-miterlimit:4;" d="M 12.230469 5.3 C 10.65625 7.816667 11.366667 12.083333 14.167969 17.008333 C 9.477604 16.225 6.304948 11.783333 7.088021 7.083333 C 7.871094 2.391667 12.311198 -0.783333 17.009635 0 C 15.669531 2.825 12.004427 3.633333 8.113281 4.483333 C 5.433073 5.075 5.602604 5.616667 5.602604 9.683333 L 0.508594 9.683333 L 0.500521 30.033333 C 0.500521 26.766667 0.775 24.875 4.835677 23.983333 C 9.421094 22.975 13.95 22.075 11.778385 18.25 C 5.320052 6.925 9.93776 0.5 16.864323 0.5 C 21.393229 0.5 25.001823 3.25 25.001823 8.5 C 25.001823 13.116667 22.345833 17.366667 21.748437 18.666667 L 18.874479 18.666667 C 19.407292 16.675 22.28125 13 22.28125 8.491667 C 22.28125 1.8 14.28099 2.016667 12.230469 5.3 Z M 30.499479 25.158333 L 26.40651 25.158333 L 26.40651 21.266667 L 23.685937 21.266667 L 23.685937 25.158333 L 19.592969 25.158333 L 19.592969 27.758333 L 23.685937 27.758333 L 23.685937 31.65 L 26.40651 31.65 L 26.40651 27.75 L 30.499479 27.75 Z M 30.499479 25.158333 " transform="matrix(0.483871,0,0,0.46875,0,0)"/>
+</g>
+</svg>
diff --git a/src/assets/icons/icon-delete.svg b/src/assets/icons/icon-delete.svg
new file mode 100644
index 000000000..870e9145e
--- /dev/null
+++ b/src/assets/icons/icon-delete.svg
@@ -0,0 +1 @@
+<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-247 370.9 100 100"><path d="M-162.2 386c-19.2-19.2-50.5-19.2-69.7 0-19.2 19.3-19.1 50.5.1 69.7 19.2 19.2 50.4 19.3 69.7.1 19.2-19.3 19.2-50.5-.1-69.8zm-3.5 66.2c-17.3 17.3-45.3 17.2-62.6-.1s-17.3-45.3 0-62.5 45.3-17.3 62.6-.1 17.2 45.5 0 62.7z"/><path d="M-171.4 395.3c-1-1-2.6-1-3.5 0l-22 22-22-22c-1-1-2.6-1-3.5 0s-1 2.6 0 3.5l22 22-22 22c-1 1-1 2.6 0 3.5s2.6 1 3.5 0l22-22 22 22c1 1 2.6 1 3.5 0s1-2.6 0-3.5l-22-22 22-22c.9-.9.9-2.5 0-3.5z"/></svg>
diff --git a/src/assets/icons/icon-disselect.svg b/src/assets/icons/icon-disselect.svg
new file mode 100644
index 000000000..ba6201051
--- /dev/null
+++ b/src/assets/icons/icon-disselect.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13pt" height="13pt" viewBox="0 0 13 13" version="1.1">
+<g id="surface1">
+<path style="fill:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 25.499099 13.5 C 25.499099 20.128305 20.128305 25.499099 13.5 25.499099 C 6.871695 25.499099 1.500901 20.128305 1.500901 13.5 C 1.500901 6.871695 6.871695 1.500901 13.5 1.500901 C 20.128305 1.500901 25.499099 6.871695 25.499099 13.5 Z M 25.499099 13.5 " transform="matrix(0.481481,0,0,0.481481,0,0)"/>
+<path style="fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 8.502404 13.5 L 17.4997 13.5 " transform="matrix(0.481481,0,0,0.481481,0,0)"/>
+</g>
+</svg>
diff --git a/src/assets/icons/icon-save2.svg b/src/assets/icons/icon-save2.svg
new file mode 100644
index 000000000..264fda2ec
--- /dev/null
+++ b/src/assets/icons/icon-save2.svg
@@ -0,0 +1 @@
+<svg fill="#127D60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M509.27 105.194L398.715 2.401C396.815.637 394.59 0 392 0H31.77C14.84 0 0 13.103 0 30.047v450.53C0 497.522 14.85 512 31.8 512h450.53c16.94 0 29.67-14.462 29.67-31.397V112.688c0-2.844-.65-5.56-2.73-7.494zM112.64 20.48H358.4v194.56H112.64V20.48zm378.88 460.123c0 5.641-3.54 10.917-9.19 10.917H31.8c-5.66 0-11.32-5.287-11.32-10.942V30.047c0-5.655 5.65-9.568 11.29-9.568h60.39v204.112c0 5.656 5.64 10.928 11.3 10.928H369.7c5.66 0 9.18-5.271 9.18-10.928V20.48h9.09l103.55 96.667v363.456z"/><path d="M296.96 51.2h20.48v133.12h-20.48zM369.9 327.68H103.46c-5.66 0-10.24 4.585-10.24 10.24s4.58 10.24 10.24 10.24H369.9c5.66 0 10.24-4.585 10.24-10.24s-4.58-10.24-10.24-10.24zM369.9 378.88H103.46c-5.66 0-10.24 4.585-10.24 10.24s4.58 10.24 10.24 10.24H369.9c5.66 0 10.24-4.585 10.24-10.24s-4.58-10.24-10.24-10.24zM369.9 430.08H103.46c-5.66 0-10.24 4.585-10.24 10.24s4.58 10.24 10.24 10.24H369.9c5.66 0 10.24-4.585 10.24-10.24s-4.58-10.24-10.24-10.24z"/></svg>
diff --git a/src/assets/icons/icon-trash2.svg b/src/assets/icons/icon-trash2.svg
new file mode 100644
index 000000000..e95e0abae
--- /dev/null
+++ b/src/assets/icons/icon-trash2.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="14pt" viewBox="0 0 15 14" version="1.1">
+<g id="surface1">
+<path style="fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 1.5 6.840402 L 28.898438 6.840402 M 4.289062 7.503348 L 4.289062 25.500837 M 25.289062 25.500837 L 4.289062 25.500837 M 26.289062 7.503348 L 26.289062 25.500837 M 10.289062 6.501395 L 10.289062 1.499163 M 20.289062 1.499163 L 10.289062 1.499163 M 20.289062 6.501395 L 20.289062 1.499163 M 11.289062 12.498047 L 11.289062 20.498605 M 19.289062 12.498047 L 19.289062 20.498605 " transform="matrix(0.5,0,0,0.518519,0,0)"/>
+</g>
+</svg>
diff --git a/src/config/constants.js b/src/config/constants.js
index dcd197114..cf277a8ff 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -12,6 +12,11 @@ export const LOAD_USER_CREDENTIAL_PENDING     = 'LOAD_USER_CREDENTIAL_PENDING'
 export const LOAD_USER_CREDENTIAL_SUCCESS     = 'LOAD_USER_CREDENTIAL_SUCCESS'
 export const LOAD_USER_CREDENTIAL_FAILURE     = 'LOAD_USER_CREDENTIAL_FAILURE'
 
+// Load_CHALLEGNES
+export const LOAD_CHALLEGNES = 'LOAD_CHALLEGNES'
+export const LOAD_CHALLEGNES_PENDING = 'LOAD_CHALLEGNES_PENDING'
+export const LOAD_CHALLEGNES_SUCCESS = 'LOAD_CHALLEGNES_SUCCESS'
+export const LOAD_CHALLEGNES_FAILURE = 'Load_CHALLEGNES_FAILURE'
 
 // Load organization configs
 export const LOAD_ORG_CONFIG_SUCCESS     = 'LOAD_ORG_CONFIG_SUCCESS'
@@ -766,6 +771,7 @@ export const ACCOUNTS_APP_REGISTER_URL = process.env.ACCOUNTS_APP_REGISTER_URL |
 export const TC_API_URL = `https://api.${DOMAIN}`
 export const DIRECT_PROJECT_URL = `https://www.${DOMAIN}/direct/projectOverview?formData.projectId=`
 export const WORK_MANAGER_APP = `https://challenges.${DOMAIN}/projects`
+export const CHALLENGE_DETAIL_APP = `https://www.${DOMAIN}/challenges`
 export const SALESFORCE_PROJECT_LEAD_LINK = process.env.SALESFORCE_PROJECT_LEAD_LINK
 export const SALESFORCE_BILLING_ACCOUNT_LINK = process.env.SALESFORCE_BILLING_ACCOUNT_LINK
 export const TC_NOTIFICATION_URL = process.env.TC_NOTIFICATION_URL || `${TC_API_URL}/v5/notifications`
diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js
index b39175391..23cd461ee 100644
--- a/src/projects/actions/project.js
+++ b/src/projects/actions/project.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import moment from 'moment'
 import { flatten, unflatten } from 'flat'
 import { getProjectById,
+  getChallengeById,
   createProject as createProjectAPI,
   updateProject as updateProjectAPI,
   deleteProject as deleteProjectAPI,
@@ -36,6 +37,7 @@ import {
   DELETE_PROJECT,
   PROJECT_DIRTY,
   PROJECT_DIRTY_UNDO,
+  LOAD_CHALLEGNES,
   LOAD_PROJECT_PHASES,
   UPDATE_PRODUCT,
   PROJECT_STATUS_DRAFT,
@@ -161,6 +163,7 @@ export function loadProjectInvite(projectId) {
   }*/
 }
 
+
 /**
  * Get project phases together with products
  *
@@ -194,6 +197,33 @@ function getProjectPhasesWithProducts(projectId) {
   })
 }
 
+/**
+ * Get challenges by challenge ids
+ *
+ * @param {Number} milestoneId milestone id
+ * @param {Array} challengeIds challenge ids
+ *
+ * @returns {Promise<[]>} resolves to the list of challenge
+ */
+export function getChallengesByIds(milestoneId, challengeIds) {
+
+  const requests = _.map(challengeIds, id => getChallengeById(id))
+  const challengesAPIs = Promise.all(requests)
+
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_CHALLEGNES,
+      payload: challengesAPIs,
+      meta: {
+        milestoneId 
+      }
+    })
+  }
+
+}
+
+
+
 /**
  * Load project phases with populated products
  *
diff --git a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
index f10edbe11..e329aa0dc 100644
--- a/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
+++ b/src/projects/detail/components/SimplePlan/CreateSimplePlan/CreateSimplePlan.jsx
@@ -37,6 +37,7 @@ class CreateSimplePlan extends React.Component {
       onChangeMilestones,
       onSaveMilestone,
       onRemoveMilestone,
+      onGetChallenges,
       isProjectLive,
       isCustomer,
     } = this.props
@@ -68,6 +69,7 @@ class CreateSimplePlan extends React.Component {
           </div>
           <ManageMilestones
             milestones={milestones}
+            onGetChallenges={onGetChallenges}
             onChangeMilestones={onChangeMilestones}
             onSaveMilestone={onSaveMilestone}
             onRemoveMilestone={onRemoveMilestone}
@@ -87,6 +89,7 @@ CreateSimplePlan.propTypes = {
   onChangeMilestones: PT.func,
   onSaveMilestone: PT.func,
   onRemoveMilestone: PT.func,
+  onGetChallenges: PT.func,
   isCustomer: PT.bool,
 }
 
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index c4ebc5da5..31e1ca641 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -5,8 +5,16 @@ import React from 'react'
 import PT from 'prop-types'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
 import MilestoneRow from '../components/MilestoneRow'
+import MilestoneChallengeHeader from '../components/MilestoneChallengeHeader'
+import MilestoneChallengeRow from '../components/MilestoneChallengeRow'
+import MilestoneChallengeFooter from '../components/MilestoneChallengeFooter'
 import MilestoneHeaderRow from '../components/MilestoneHeaderRow'
+import MilestoneDeleteButton from '../components/MilestoneDeleteButton'
+import MilestoneCopilots from '../components/MilestoneCopilots'
 import * as milestoneHelper from '../components/helpers/milestone'
+import IconUnselect from '../../../../../assets/icons/icon-disselect.svg'
+import IconCopilot from '../../../../../assets/icons/icon-copilot.svg'
+import IconCalendar from '../../../../../assets/icons/calendar.svg'
 // import IconGridView from '../../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
 // import IconGnattView from '../../../../../assets/icons/icon-gnatt-gray.svg'
 
@@ -18,11 +26,79 @@ class ManageMilestones extends React.Component {
   constructor(props) {
     super(props)
 
+    this.state = {
+      expandList: []
+    }
     this.onSave = this.onSave.bind(this)
     this.onChange = this.onChange.bind(this)
     this.onAdd = this.onAdd.bind(this)
     this.onRemove = this.onRemove.bind(this)
     this.onDiscard = this.onDiscard.bind(this)
+    this.onExpandChallenges = this.onExpandChallenges.bind(this)
+    this.onUnselectAll = this.onUnselectAll.bind(this)
+    this.onDeleteAll = this.onDeleteAll.bind(this)
+    this.onAddCopilotAll = this.onAddCopilotAll.bind(this)
+  }
+
+  onAddCopilotAll(member, isAdd) {
+    const { milestones, onSaveMilestone } = this.props
+    const seletedMilestones = _.filter(milestones, m => m.selected)
+    _.forEach(seletedMilestones, m => {
+      if (!m.origin) {
+        m.origin = {...m}
+      }
+      if (isAdd) {
+        const isExist = _.find(m.members, o => o.userId === member.userId)
+        if (!isExist) {
+          // ignore
+          m.members = [...m.members, member]
+          this.onChange(m)
+          onSaveMilestone(m.id)
+        }
+      } else {
+        m.members = _.filter(m.members, o => o.userId !== member.userId)
+        if (m.members.length !== m.origin.members.length) {
+          this.onChange(m)
+          onSaveMilestone(m.id)
+        }
+      }
+    })
+  }
+
+  onDeleteAll() {
+    const { milestones, onRemoveMilestone } = this.props
+    const seletedMilestones = _.filter(milestones, m => m.selected)
+    _.forEach(seletedMilestones, m => {
+      onRemoveMilestone(m.id)
+    })
+  }
+
+  onUnselectAll() {
+    const { milestones, onChangeMilestones } = this.props
+    const milestonesUnselected = milestones.map(milestone => ({
+      ...milestone,
+      selected: false
+    }))
+    onChangeMilestones(milestonesUnselected)
+  }
+  onExpandChallenges(isExpand, milestone) {
+    let expandList = this.state.expandList
+    const { onGetChallenges } = this.props
+
+    let challengeIds = _.map(milestone.products, 'details.challengeId').slice(0, 6)
+    challengeIds = _.filter(challengeIds)
+    if (!challengeIds.length) {
+      return
+    }
+
+    if (isExpand) {
+      onGetChallenges(milestone.id, challengeIds)
+      expandList.push(milestone.id)
+      this.setState({expandList})
+    } else {
+      expandList = _.filter(expandList, e => milestone.id !== e)
+      this.setState({expandList})
+    }
   }
 
   onChange(updatedMilestone) {
@@ -63,6 +139,50 @@ class ManageMilestones extends React.Component {
     onRemoveMilestone(id)
   }
 
+  isExpandChallengeList(milestone) {
+    const isExpand = _.find(this.state.expandList, (i) => i === milestone.id)
+    if (isExpand && milestone.challenges) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  renderChallengeTable(milestone) {
+    if (!this.isExpandChallengeList(milestone)) {
+      return <tr />
+    }
+    const rows = _.map(milestone.challenges, (c) => {
+      return <MilestoneChallengeRow challenge={c}/>
+    })
+    return [
+      <MilestoneChallengeHeader />,
+      ...rows,
+      <MilestoneChallengeFooter milestone={milestone}/>
+    ]
+  }
+  getSelectCount() {
+    const { milestones } = this.props
+    const seletedMilestones = _.filter(milestones, m => m.selected)
+    return seletedMilestones.length
+  }
+
+  renderAddCopilot() {
+    const {
+      projectMembers,
+    } = this.props
+
+    return (
+      <MilestoneCopilots 
+        edit 
+        customButton={<IconCopilot />} 
+        copilots={[]} 
+        projectMembers={projectMembers} 
+        onAdd={(member) => this.onAddCopilotAll(member, true)}  
+        onRemove={(member) => this.onAddCopilotAll(member, false)}  
+      />
+    )
+  }
   render() {
     const {
       milestones,
@@ -81,6 +201,18 @@ class ManageMilestones extends React.Component {
             <IconGnattView />
           </button>
           <div styleName="separator" /> */}
+          <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
+            <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
+          </div>
+          <div styleName="delete-button">
+            <MilestoneDeleteButton onDelete={this.onDeleteAll}/>
+          </div>
+          <div styleName="icon">
+            {this.renderAddCopilot()}
+          </div>
+          <div styleName="icon">
+            <IconCalendar />
+          </div>
           {isUpdatable && (
             <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button" onClick={this.onAdd}>
               ADD
@@ -115,20 +247,25 @@ class ManageMilestones extends React.Component {
               </thead>
               <tbody>
                 {milestones.map((milestone) => (
-                  <MilestoneRow
-                    milestone={milestone}
-                    key={milestone.id}
-                    rowId={`${milestone.id}`}
-                    onChange={this.onChange}
-                    onSave={this.onSave}
-                    onRemove={this.onRemove}
-                    onDiscard={this.onDiscard}
-                    projectMembers={projectMembers}
-                    allMilestones={milestones}
-                    isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
-                    isUpdatable={isUpdatable}
-                    phaseMembers={milestone.members}
-                  />
+                  [
+                    <MilestoneRow
+                      milestone={milestone}
+                      key={milestone.id}
+                      rowId={`${milestone.id}`}
+                      isExpand={this.isExpandChallengeList(milestone)}
+                      onExpand={this.onExpandChallenges}
+                      onChange={this.onChange}
+                      onSave={this.onSave}
+                      onRemove={this.onRemove}
+                      onDiscard={this.onDiscard}
+                      projectMembers={projectMembers}
+                      allMilestones={milestones}
+                      isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
+                      isUpdatable={isUpdatable}
+                      phaseMembers={milestone.members}
+                    />,
+                    ...this.renderChallengeTable(milestone)
+                  ]
                 ))}
               </tbody>
             </table>
@@ -144,6 +281,7 @@ ManageMilestones.propTypes = {
   onChangeMilestones: PT.func,
   onSaveMilestone: PT.func,
   onRemoveMilestone: PT.func,
+  onGetChallenges: PT.func,
   projectMembers: PT.arrayOf(PT.shape()),
   isUpdatable: PT.bool,
 }
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
index 4ae62282d..35ca1c3bc 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -7,6 +7,35 @@
   padding: 15px 0 20px;
   min-height: 65px;
 
+  .unselect-bottom {
+    height: 24px;
+    background-color: #00B7F8;
+    border-radius: 24px;
+    color: #FFF;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 0 5px;
+    cursor: pointer;
+        
+    svg {
+      margin-right: 4px;
+      height: 13px;
+      width: 13px;
+    }
+    margin-right: 20px;
+  }
+  .delete-button {
+    cursor: pointer;
+
+  }
+  .icon {
+    cursor: pointer;
+    svg {
+      margin: 0 8px;
+    }
+  }
+
   .primary-button {
     margin-left: 12px;
   }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
new file mode 100644
index 000000000..120bb8eb4
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -0,0 +1,85 @@
+/**
+ * milestoneChallenge footer
+ */
+import React from 'react'
+import _ from 'lodash'
+import PT from 'prop-types'
+import {
+  WORK_MANAGER_APP 
+} from '../../../../../../../src/config/constants'
+import './MilestoneChallengeFooter.scss'
+
+
+class MilestoneChallengeFooter extends React.Component {
+  constructor(props) {
+    super(props)
+
+  }
+
+  renderPagination() {
+    const {
+      milestone
+    } = this.props
+    let challengeIds = _.map(milestone.products, 'details.challengeId')
+    challengeIds = _.filter(challengeIds)
+    const length = Math.ceil(challengeIds.length/6) 
+
+    if (length === 0) {
+      return null
+      
+    }
+
+    return (
+      <div styleName="pagination">
+        {
+          _.map(_.range(length), i => {
+            return <div>{i+1}</div>
+          })
+        }
+      </div>
+    )
+
+  }
+
+  render() {
+    const {
+      milestone
+    } = this.props
+    const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
+
+
+    return (
+      <tr styleName="challenge-table-row-wrap">
+        <td colSpan="9">
+          <div styleName="challenge-table-row">
+            <div styleName="view-button">
+              <a href={url}>
+                VIEW CHALLENGES
+              </a>
+            </div>
+            <div>
+              {this.renderPagination()}
+            </div>
+          </div>
+        </td>
+      </tr>
+    )
+
+  }
+}
+
+MilestoneChallengeFooter.propTypes = {
+  milestone: PT.shape(),
+  rowId: PT.string,
+  onChange: PT.func,
+  onSave: PT.func,
+  onRemove: PT.func,
+  onDiscard: PT.func,
+  projectMembers: PT.arrayOf(PT.shape()),
+  allMilestones: PT.arrayOf(PT.shape()),
+  isCreatingRow: PT.bool,
+  isUpdatable: PT.bool,
+  members: PT.object,
+}
+
+export default MilestoneChallengeFooter
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
new file mode 100644
index 000000000..00ac4baa5
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
@@ -0,0 +1,38 @@
+@import '~styles/variables';
+
+.challenge-table-row-wrap {
+    @include roboto;
+
+    font-size: $tc-label-sm;
+    color: $tc-gray-60;
+    line-height: 15px;
+}
+
+.challenge-table-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .view-button {
+    margin-left: 30px;
+    background-color: #127D60;
+    padding: 4px 10px;
+    border-radius: 20px;
+    color: #fff;
+  }
+  .pagination {
+    display: flex;
+    div {
+      color: #127D60;
+      border: 1px solid #127D60;
+      margin: 0 3px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 18px;
+    }
+  }
+}
+
+
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/index.js
new file mode 100644
index 000000000..3c78f59e3
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/index.js
@@ -0,0 +1,2 @@
+import MilestoneChallengeFooter from './MilestoneChallengeFooter'
+export default MilestoneChallengeFooter
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
new file mode 100644
index 000000000..fa8e3cce6
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
@@ -0,0 +1,25 @@
+/**
+ * milestoneChallenge header
+ */
+import React from 'react'
+import './MilestoneChallengeHeader.scss'
+
+function MilestoneChallengeHeader() {
+
+  return (
+    <tr styleName="challenge-table-row-wrap">
+      <td colSpan="9">
+
+        <div styleName="challenge-table-row">
+          <div styleName="title">TITLE</div>
+          <div styleName="status">STATUS</div>
+          <div styleName="type">TYPE</div>
+          <div styleName="start-date">START DATE</div>
+          <div styleName="end-date">END DATE</div>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+export default MilestoneChallengeHeader
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
new file mode 100644
index 000000000..80e2f5c14
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
@@ -0,0 +1,49 @@
+@import '~styles/variables';
+
+.challenge-table-row-wrap {
+    @include roboto-bold;
+
+    font-size: $tc-label-sm;
+    color: $tc-gray-60;
+    line-height: 15px;
+}
+
+.challenge-table-row {
+  display: flex;
+  align-items: center;
+  .title {
+    flex: 1;
+    max-width: 43%;
+    margin-left: 30px;
+    margin-right: 10px;
+  }
+  .status {
+    width: 100px;
+    margin-right: 10px;
+  }
+  .type {
+    width: 100px;
+    margin-right: 10px;
+    div {
+      border-radius: 20px;
+      padding: 4px 0;
+      text-align: center;
+      color: #fff;
+      &.Design { background-color: $tc-light-blue-100; }
+      &.Development { background-color: $tc-green-100; }
+      &.DataScience { background-color: $tc-red-100; }
+      &.QualityAssurance { background-color: $tc-green-100; }
+    }
+  }
+
+  .start-date {
+    width: 90px;
+    margin-right: 10px;
+  }
+
+  .end-date {
+    width: 90px;
+  }
+
+}
+
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/index.js
new file mode 100644
index 000000000..f9ab97fd9
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/index.js
@@ -0,0 +1,2 @@
+import MilestoneChallengeHeader from './MilestoneChallengeHeader'
+export default MilestoneChallengeHeader
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
new file mode 100644
index 000000000..4f5e0d191
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
@@ -0,0 +1,61 @@
+/**
+ * milestoneChallenge row 
+ */
+import React from 'react'
+import PT from 'prop-types'
+import moment from 'moment'
+import {
+  CHALLENGE_DETAIL_APP
+} from '../../../../../../../src/config/constants'
+
+import './MilestoneChallengeRow.scss'
+
+const STALLED_MSG = 'Stalled'
+const DRAFT_MSG = 'Draft'
+
+function MilestoneChallengeRow({challenge: {
+  id,
+  name,
+  status,
+  track,
+  type,
+  startDate,
+  phases: allPhases,
+  endDate
+}}) {
+
+
+  let statusPhase = allPhases
+    .filter(p => p.name !== 'Registration' && p.isOpen)
+    .sort((a, b) => moment(a.scheduledEndDate).diff(b.scheduledEndDate))[0]
+
+  if (!statusPhase && type === 'First2Finish' && allPhases.length) {
+    statusPhase = _.clone(allPhases[0])
+    statusPhase.name = 'Submission'
+  }
+
+  let phaseMessage = STALLED_MSG
+  if (statusPhase) phaseMessage = statusPhase.name
+  else if (status === 'Draft') phaseMessage = DRAFT_MSG
+
+
+  return (
+    <tr styleName="challenge-table-row-wrap">
+      <td colSpan="9">
+        <div styleName="challenge-table-row">
+          <div styleName="title"><a href={`${CHALLENGE_DETAIL_APP}/${id}`}>{name}</a></div>
+          <div styleName="status"><div styleName={phaseMessage.split(' ').join('')}>{phaseMessage}</div></div>
+          <div styleName="type"><div styleName={track.split(' ').join('')}>{track}</div></div>
+          <div styleName="start-date">{moment(startDate).format('MM-DD-YYYY')}</div>
+          <div styleName="end-date">{moment(endDate).format('MM-DD-YYYY')}</div>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+MilestoneChallengeRow.propTypes = {
+  challenge: PT.shape(),
+}
+
+export default MilestoneChallengeRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
new file mode 100644
index 000000000..5b7b37662
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
@@ -0,0 +1,67 @@
+@import '~styles/variables';
+
+.challenge-table-row-wrap {
+    font-weight: 400;
+    font-size: 13px;
+    color: #6b6b6b;
+}
+
+.challenge-table-row {
+  display: flex;
+  align-items: center;
+  .title {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 30px;
+    max-width: 43%;
+    margin-right: 10px;
+    color: #0A81FF
+  }
+  .status {
+    width: 100px;
+    margin-right: 10px;
+    div {
+      border-radius: 20px;
+      padding: 4px 0;
+      text-align: center;
+      color: #fff;
+      &.Submission { background-color: $tc-light-blue-100; }
+      &.IterativeReview { background-color: $tc-green-100; }
+      &.Registration { background-color: $tc-orange-100; }
+      &.Appeals { background-color: $tc-orange-100; }
+      &.AppealsResponse { background-color: $tc-orange-100; }
+      &.Draft { background-color: $tc-gray-20; }
+      &.Stalled { background-color: $tc-gray-20; }
+      &.Completed { background-color: $tc-green-100; }
+      &.Review { background-color: $tc-orange-100; }
+      &.CheckpointReview { background-color: $tc-orange-100; }
+    }
+
+  }
+  .type {
+    width: 100px;
+    margin-right: 10px;
+    div {
+      border-radius: 20px;
+      padding: 4px 0;
+      text-align: center;
+      color: #fff;
+      &.Design { background-color: $tc-light-blue-100; }
+      &.Development { background-color: $tc-green-100; }
+      &.DataScience { background-color: $tc-orange-100; }
+      &.QualityAssurance { background-color: $tc-green-100; }
+    }
+  }
+
+  .start-date {
+    width: 90px;
+    margin-right: 10px;
+  }
+
+  .end-date {
+    width: 90px;
+  }
+
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/index.js b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/index.js
new file mode 100644
index 000000000..92968585d
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/index.js
@@ -0,0 +1,2 @@
+import MilestoneChallengeRow from './MilestoneChallengeRow'
+export default MilestoneChallengeRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx
index 30d39b0f4..f78e26b49 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneCopilots/MilestoneCopilots.jsx
@@ -19,7 +19,8 @@ function MilestoneCopilots({
   copilots,
   projectMembers,
   onAdd,
-  onRemove
+  onRemove, 
+  customButton
 }) {
   const ScrollLock = React.createClass ({
     componentDidMount() {
@@ -40,9 +41,9 @@ function MilestoneCopilots({
 
   return edit ? (
     <span styleName="milestone-copilots">
-      <button type="button" className="tc-btn tc-btn-default" styleName="edit-copilots-button" onClick={() => setOpen(!open)}>
+      {customButton ? React.cloneElement(customButton, {onClick: () => {setOpen(!open)}}) : <button type="button" className="tc-btn tc-btn-default" styleName="edit-copilots-button" onClick={() => setOpen(!open)}>
         <IconDots />
-      </button>
+      </button> }
       {open  && (
         <Gateway into="right-sidebar">
           <ScrollLock />
@@ -66,6 +67,7 @@ MilestoneCopilots.propTypes = {
   edit: PT.bool,
   copilots: PT.arrayOf(PT.shape()),
   projectMembers: PT.arrayOf(PT.shape()),
+  customButton: PT.element,
   onAdd: PT.func,
   onRemove: PT.func,
 }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
index ddbded24f..b49df0870 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneHeaderRow/MilestoneHeaderRow.jsx
@@ -31,6 +31,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
 
   return (
     <tr styleName="milestone-row">
+      <th />
       <th>
         <TCFormFields.Checkbox
           name="select-all"
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index abccfb59b..c8a2df999 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -12,19 +12,23 @@ import MilestoneCopilots from '../MilestoneCopilots'
 import MilestoneStatus from '../MilestoneStatus'
 import MilestoneDeleteButton from '../MilestoneDeleteButton'
 import { PHASE_STATUS_OPTIONS } from '../../../../../../config/constants'
-import IconCheck from '../../../../../../assets/icons/icon-check-thin.svg'
-import IconXMark from '../../../../../../assets/icons/icon-x-mark-thin.svg'
+import IconCheck from '../../../../../../assets/icons/icon-save2.svg'
+import IconXMark from '../../../../../../assets/icons/icon-delete.svg'
 import IconPencil from '../../../../../../assets/icons/icon-ui-pencil.svg'
 import IconDots from '../../../../../../assets/icons/icon-dots.svg'
 import IconArrowDown from '../../../../../../assets/icons/arrow-6px-carret-down-normal.svg'
+import IconExpand from '../../../../../../assets/icons/arrows-16px-1_minimal-right.svg'
+import IconClose from '../../../../../../assets/icons/arrows-16px-1_minimal-down.svg'
 
 import styles from './MilestoneRow.scss'
 
 const TCFormFields = FormsyForm.Fields
 
 function MilestoneRow({
+  isExpand,
   milestone,
   rowId,
+  onExpand,
   onChange,
   onSave,
   onRemove,
@@ -46,6 +50,7 @@ function MilestoneRow({
 
   return edit ? (
     <tr styleName="milestone-row" className="edit-milestone-row">
+      <td />
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
@@ -246,6 +251,7 @@ function MilestoneRow({
     </tr>
   ) : (
     <tr styleName="milestone-row">
+      <td styleName="expand" onClick={() => onExpand(!isExpand, milestone)}>{isExpand ? <IconClose />: <IconExpand />}</td>
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
@@ -308,6 +314,8 @@ MilestoneRow.propTypes = {
   onSave: PT.func,
   onRemove: PT.func,
   onDiscard: PT.func,
+  onExpand: PT.func,
+  isExpand: PT.bool,
   projectMembers: PT.arrayOf(PT.shape()),
   allMilestones: PT.arrayOf(PT.shape()),
   isCreatingRow: PT.bool,
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
index de75484a0..e8499cb1d 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -11,6 +11,11 @@
     padding: 0;
     border: 0;
   }
+  .expand {
+    > svg {
+      height: 13px;
+    }
+  }
 
   .checkbox {}
 
diff --git a/src/projects/detail/containers/DashboardContainer.jsx b/src/projects/detail/containers/DashboardContainer.jsx
index 509c15368..dc5e8f402 100644
--- a/src/projects/detail/containers/DashboardContainer.jsx
+++ b/src/projects/detail/containers/DashboardContainer.jsx
@@ -31,6 +31,7 @@ import {
   collapseAllProjectPhases,
   createPhaseAndMilestones,
   createPhaseWithoutTimeline,
+  getChallengesByIds,
 } from '../../actions/project'
 import { addProductAttachment, updateProductAttachment, removeProductAttachment } from '../../actions/projectAttachment'
 
@@ -90,6 +91,10 @@ class DashboardContainer extends React.Component {
     this.onChangeMilestones = this.onChangeMilestones.bind(this)
     this.onSaveMilestone = this.onSaveMilestone.bind(this)
     this.onRemoveMilestone = this.onRemoveMilestone.bind(this)
+    this.onGetChallenges = this.onGetChallenges.bind(this)
+  }
+  onGetChallenges(milestoneId, challengeIds) {
+    this.props.getChallengesByIds(milestoneId, challengeIds)
   }
 
   onNotificationRead(notification) {
@@ -477,6 +482,7 @@ class DashboardContainer extends React.Component {
                         milestones={this.state.createGameplanPhases || visiblePhases || []}
                         onChangeMilestones={this.onChangeMilestones}
                         onSaveMilestone={this.onSaveMilestone}
+                        onGetChallenges={this.onGetChallenges}
                         onRemoveMilestone={this.onRemoveMilestone}
                       />
                     )
@@ -521,6 +527,7 @@ const mapDispatchToProps = {
   updateProduct,
   createPhaseAndMilestones,
   createPhaseWithoutTimeline,
+  getChallengesByIds,
   fireProductDirty,
   fireProductDirtyUndo,
   addProductAttachment,
diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js
index a877ce308..e7cf932ec 100644
--- a/src/projects/reducers/project.js
+++ b/src/projects/reducers/project.js
@@ -9,6 +9,7 @@ import {
   UPDATE_PROJECT_ATTACHMENT_PENDING, UPDATE_PROJECT_ATTACHMENT_SUCCESS, UPDATE_PROJECT_ATTACHMENT_FAILURE,
   REMOVE_PROJECT_ATTACHMENT_PENDING, REMOVE_PROJECT_ATTACHMENT_SUCCESS, REMOVE_PROJECT_ATTACHMENT_FAILURE,
   REMOVE_PENDING_ATTACHMENT, UPDATE_PENDING_ATTACHMENT,
+  LOAD_CHALLEGNES_PENDING, LOAD_CHALLEGNES_SUCCESS,
   ADD_PRODUCT_ATTACHMENT_PENDING, ADD_PRODUCT_ATTACHMENT_SUCCESS, ADD_PRODUCT_ATTACHMENT_FAILURE,
   UPDATE_PRODUCT_ATTACHMENT_PENDING, UPDATE_PRODUCT_ATTACHMENT_SUCCESS, UPDATE_PRODUCT_ATTACHMENT_FAILURE,
   REMOVE_PRODUCT_ATTACHMENT_PENDING, REMOVE_PRODUCT_ATTACHMENT_SUCCESS, REMOVE_PRODUCT_ATTACHMENT_FAILURE,
@@ -163,6 +164,29 @@ export const projectState = function (state=initialState, action) {
       ...state,
       isBillingAccountExpired: false,
     }
+  case LOAD_CHALLEGNES_PENDING: {
+
+    const phaseIndex = _.findIndex(state.phases, { id: action.meta.milestoneId })
+
+    const phase = {
+      ...state.phases[phaseIndex],
+      isLoadingChallenges: true
+    }
+    return update(state, {
+      phases: { $splice: [[phaseIndex, 1, phase]] },
+    })
+  }
+  case LOAD_CHALLEGNES_SUCCESS: {
+    const phaseIndex = _.findIndex(state.phases, { id: action.meta.milestoneId })
+    const phase = {
+      ...state.phases[phaseIndex],
+      challenges: action.payload,
+      isLoadingChallenges: false
+    }
+    return update(state, {
+      phases: { $splice: [[phaseIndex, 1, phase]] },
+    })
+  }
   case CREATE_PROJECT_PHASE_TIMELINE_MILESTONES_SUCCESS:
   case CREATE_PROJECT_PHASE_SUCCESS: {
     const { phase, product } = action.payload

From 9ba9f6c953a9a0b5d48a9ea43ad1febfabc8a13a Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Wed, 4 Aug 2021 23:33:28 +0800
Subject: [PATCH 11/18] fix: fix issues

---
 config/constants/dev.js                       |  1 +
 config/constants/master.js                    |  1 +
 src/assets/icons/icon-calendar2.svg           |  1 +
 src/assets/icons/icon-copilot.svg             |  7 +-
 src/assets/icons/icon-trash2.svg              |  7 +-
 src/config/constants.js                       |  2 +
 .../ManageMilestones/ManageMilestones.jsx     | 90 +++++++++++++++----
 .../ManageMilestones/ManageMilestones.scss    | 16 +++-
 .../ConfirmMoveMilestoneDate.jsx              | 50 +++++++++++
 .../ConfirmMoveMilestoneDate.scss             | 59 ++++++++++++
 .../ConfirmMoveMilestoneDate/index.js         |  2 +
 .../MilestoneChallengeFooter.jsx              | 35 +++++---
 .../MilestoneChallengeFooter.scss             |  6 ++
 .../MilestoneChallengeHeader.jsx              | 10 ++-
 .../MilestoneChallengeHeader.scss             |  1 -
 .../MilestoneChallengeRow.jsx                 | 49 +++++++---
 .../MilestoneChallengeRow.scss                | 14 +--
 .../MilestoneMoveDateButton.jsx               | 87 ++++++++++++++++++
 .../MilestoneMoveDateButton.scss              | 21 +++++
 .../MilestoneMoveDateButton/index.jsx         |  2 +
 src/projects/reducers/project.js              | 14 ++-
 21 files changed, 408 insertions(+), 67 deletions(-)
 create mode 100644 src/assets/icons/icon-calendar2.svg
 create mode 100644 src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.jsx
 create mode 100644 src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.scss
 create mode 100644 src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/index.js
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.jsx
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.scss
 create mode 100644 src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/index.jsx

diff --git a/config/constants/dev.js b/config/constants/dev.js
index e2f2ba1d6..1972ccea5 100644
--- a/config/constants/dev.js
+++ b/config/constants/dev.js
@@ -57,6 +57,7 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
   DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
diff --git a/config/constants/master.js b/config/constants/master.js
index ec979e937..79c1594ea 100644
--- a/config/constants/master.js
+++ b/config/constants/master.js
@@ -57,6 +57,7 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder.com/taas',
   DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490'
diff --git a/src/assets/icons/icon-calendar2.svg b/src/assets/icons/icon-calendar2.svg
new file mode 100644
index 000000000..b2ebdd5ba
--- /dev/null
+++ b/src/assets/icons/icon-calendar2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34.573" height="34.573" viewBox="0 0 34.573 34.573"><defs><style>.a{fill:#333;}</style></defs><path class="a" d="M24.489,4.322V1.441a1.441,1.441,0,0,1,2.881,0V4.322a1.441,1.441,0,0,1-2.881,0ZM7.2,5.762A1.44,1.44,0,0,0,8.643,4.322V1.441a1.441,1.441,0,0,0-2.881,0V4.322A1.44,1.44,0,0,0,7.2,5.762ZM25.93,24.489V20.168H24.489V25.93h4.322V24.489Zm-7.2.72a6.482,6.482,0,1,0,6.482-6.482A6.49,6.49,0,0,0,18.727,25.21Zm15.846,0a9.364,9.364,0,1,1-9.364-9.364A9.363,9.363,0,0,1,34.573,25.21ZM14.064,30.252H2.881V11.524h27.37v2.54a12.281,12.281,0,0,1,2.881,1.827V2.881H28.811V4.322A2.892,2.892,0,0,1,24.982,7.05a2.959,2.959,0,0,1-1.933-2.858V2.881H10.084V4.322A2.892,2.892,0,0,1,6.255,7.05,2.959,2.959,0,0,1,4.322,4.192V2.881H0V33.133H15.891A12.281,12.281,0,0,1,14.064,30.252Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-copilot.svg b/src/assets/icons/icon-copilot.svg
index 7cfcab478..3ed5897d0 100644
--- a/src/assets/icons/icon-copilot.svg
+++ b/src/assets/icons/icon-copilot.svg
@@ -1,6 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="15pt" viewBox="0 0 15 15" version="1.1">
-<g id="surface1">
-<path style="fill-rule:nonzero;fill:rgb(20%,20%,20%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(20%,20%,20%);stroke-opacity:1;stroke-miterlimit:4;" d="M 12.230469 5.3 C 10.65625 7.816667 11.366667 12.083333 14.167969 17.008333 C 9.477604 16.225 6.304948 11.783333 7.088021 7.083333 C 7.871094 2.391667 12.311198 -0.783333 17.009635 0 C 15.669531 2.825 12.004427 3.633333 8.113281 4.483333 C 5.433073 5.075 5.602604 5.616667 5.602604 9.683333 L 0.508594 9.683333 L 0.500521 30.033333 C 0.500521 26.766667 0.775 24.875 4.835677 23.983333 C 9.421094 22.975 13.95 22.075 11.778385 18.25 C 5.320052 6.925 9.93776 0.5 16.864323 0.5 C 21.393229 0.5 25.001823 3.25 25.001823 8.5 C 25.001823 13.116667 22.345833 17.366667 21.748437 18.666667 L 18.874479 18.666667 C 19.407292 16.675 22.28125 13 22.28125 8.491667 C 22.28125 1.8 14.28099 2.016667 12.230469 5.3 Z M 30.499479 25.158333 L 26.40651 25.158333 L 26.40651 21.266667 L 23.685937 21.266667 L 23.685937 25.158333 L 19.592969 25.158333 L 19.592969 27.758333 L 23.685937 27.758333 L 23.685937 31.65 L 26.40651 31.65 L 26.40651 27.75 L 30.499479 27.75 Z M 30.499479 25.158333 " transform="matrix(0.483871,0,0,0.46875,0,0)"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="31" height="32.146" viewBox="0 0 31 32.146"><defs><style>.a{fill:#333;stroke:#333;}</style></defs><path class="a" d="M12.73,4.8c-1.574,2.514-.866,6.783,1.942,11.712a5.15,5.15,0,0,1,.461,4.951c-1.339,2.826-5.011,3.632-8.9,4.485-2.678.589-2.508,1.129-2.508,5.2H1.007L1,29.535c0-3.27.271-5.159,4.334-6.051,4.589-1.008,9.12-1.912,6.941-5.733C5.82,6.423,10.434,0,17.364,0,21.892,0,25.5,2.747,25.5,8c0,4.613-2.658,8.867-3.25,10.165H19.371c.535-1.993,3.408-5.666,3.408-10.177,0-6.687-8-6.469-10.049-3.19ZM31,24.657H26.909V20.764H24.182v3.893H20.091v2.6h4.091v3.893h2.727V27.253H31Z" transform="translate(-0.5 0.5)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-trash2.svg b/src/assets/icons/icon-trash2.svg
index e95e0abae..b6088e145 100644
--- a/src/assets/icons/icon-trash2.svg
+++ b/src/assets/icons/icon-trash2.svg
@@ -1,6 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15pt" height="14pt" viewBox="0 0 15 14" version="1.1">
-<g id="surface1">
-<path style="fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 1.5 6.840402 L 28.898438 6.840402 M 4.289062 7.503348 L 4.289062 25.500837 M 25.289062 25.500837 L 4.289062 25.500837 M 26.289062 7.503348 L 26.289062 25.500837 M 10.289062 6.501395 L 10.289062 1.499163 M 20.289062 1.499163 L 10.289062 1.499163 M 20.289062 6.501395 L 20.289062 1.499163 M 11.289062 12.498047 L 11.289062 20.498605 M 19.289062 12.498047 L 19.289062 20.498605 " transform="matrix(0.5,0,0,0.518519,0,0)"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="30.395" height="27" viewBox="0 0 30.395 27"><defs><style>.a{fill:none;stroke:#000;stroke-linecap:round;stroke-width:3px;}</style></defs><g transform="translate(1.5 1.5)"><path class="a" d="M2490.713,870.839h27.395" transform="translate(-2490.713 -865.5)"/><line class="a" y2="18" transform="translate(2.787 6)"/><line class="a" x1="21" transform="translate(2.787 24)"/><line class="a" y2="18" transform="translate(24.787 6)"/><line class="a" y1="5" transform="translate(8.787)"/><line class="a" x1="10" transform="translate(8.787)"/><line class="a" y1="5" transform="translate(18.787)"/><line class="a" y2="8" transform="translate(9.787 11)"/><line class="a" y2="8" transform="translate(17.787 11)"/></g></svg>
\ No newline at end of file
diff --git a/src/config/constants.js b/src/config/constants.js
index cf277a8ff..68a267a3e 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -758,6 +758,8 @@ export const PROJECT_ATTACHMENTS_FOLDER = process.env.PROJECT_ATTACHMENTS_FOLDER
 export const FILE_PICKER_ACCEPT = process.env.FILE_PICKER_ACCEPT || ['.bmp', '.gif', '.jpg', '.tex', '.xls', '.xlsx', '.doc', '.docx', '.zip', '.txt', '.pdf', '.png', '.ppt', '.pptx', '.rtf', '.csv']
 
 export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
+
+export const CHALLENGE_ID_MAPPING = process.env.CHALLENGE_ID_MAPPING || 'challengeId'
 /*
  * URLs
  */
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 31e1ca641..4e0bcc0b1 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -3,6 +3,7 @@
  */
 import React from 'react'
 import PT from 'prop-types'
+import moment from 'moment'
 import FormsyForm from 'appirio-tech-react-components/components/Formsy'
 import MilestoneRow from '../components/MilestoneRow'
 import MilestoneChallengeHeader from '../components/MilestoneChallengeHeader'
@@ -11,10 +12,12 @@ import MilestoneChallengeFooter from '../components/MilestoneChallengeFooter'
 import MilestoneHeaderRow from '../components/MilestoneHeaderRow'
 import MilestoneDeleteButton from '../components/MilestoneDeleteButton'
 import MilestoneCopilots from '../components/MilestoneCopilots'
+import MilestoneMoveDateButton from '../components/MilestoneMoveDateButton'
+
 import * as milestoneHelper from '../components/helpers/milestone'
 import IconUnselect from '../../../../../assets/icons/icon-disselect.svg'
 import IconCopilot from '../../../../../assets/icons/icon-copilot.svg'
-import IconCalendar from '../../../../../assets/icons/calendar.svg'
+import { CHALLENGE_ID_MAPPING } from '../../../../../config/constants'
 // import IconGridView from '../../../../../assets/icons/ui-16px-2_grid-45-gray.svg'
 // import IconGnattView from '../../../../../assets/icons/icon-gnatt-gray.svg'
 
@@ -38,8 +41,26 @@ class ManageMilestones extends React.Component {
     this.onUnselectAll = this.onUnselectAll.bind(this)
     this.onDeleteAll = this.onDeleteAll.bind(this)
     this.onAddCopilotAll = this.onAddCopilotAll.bind(this)
+    this.onMoveMilestoneDates = this.onMoveMilestoneDates.bind(this)
+    this.onLoadChallengesByPage = this.onLoadChallengesByPage.bind(this)
   }
+  onMoveMilestoneDates(days) {
+    const {
+      milestones,
+      onSaveMilestone
+    } = this.props
 
+    
+    if (days > 0) {
+      const seletedMilestones = _.filter(milestones, m => m.selected)
+      _.forEach(seletedMilestones, m => {
+        m.startDate = moment(m.startDate).add(days, 'days')
+        m.endDate = moment(m.endDate).add(days, 'days')
+        this.onChange(m)
+        onSaveMilestone(m.id)
+      })
+    }
+  }
   onAddCopilotAll(member, isAdd) {
     const { milestones, onSaveMilestone } = this.props
     const seletedMilestones = _.filter(milestones, m => m.selected)
@@ -81,11 +102,21 @@ class ManageMilestones extends React.Component {
     }))
     onChangeMilestones(milestonesUnselected)
   }
+
+  onLoadChallengesByPage(index, milestone) {
+    const { onGetChallenges } = this.props
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(6 * index, 7 * (index+1))
+    challengeIds = _.filter(challengeIds)
+    if (!challengeIds.length) {
+      return
+    }
+    onGetChallenges(milestone.id, challengeIds)
+  }
   onExpandChallenges(isExpand, milestone) {
     let expandList = this.state.expandList
     const { onGetChallenges } = this.props
 
-    let challengeIds = _.map(milestone.products, 'details.challengeId').slice(0, 6)
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
     challengeIds = _.filter(challengeIds)
     if (!challengeIds.length) {
       return
@@ -141,7 +172,7 @@ class ManageMilestones extends React.Component {
 
   isExpandChallengeList(milestone) {
     const isExpand = _.find(this.state.expandList, (i) => i === milestone.id)
-    if (isExpand && milestone.challenges) {
+    if (isExpand) {
       return true
     } else {
       return false
@@ -149,16 +180,38 @@ class ManageMilestones extends React.Component {
   }
 
   renderChallengeTable(milestone) {
+    const {
+      isUpdatable
+    } = this.props
     if (!this.isExpandChallengeList(milestone)) {
       return <tr />
     }
+
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
+    challengeIds = _.filter(challengeIds)
+    // no challenges
+    if (!challengeIds.length) {
+      return [
+        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isEmpty isUpdatable={isUpdatable}/>
+      ]
+    }
+
+    // loading challenges
+    if (milestone.isLoadingChallenges) {
+      return [
+        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isLoading isUpdatable={isUpdatable}/>
+      ]
+    }
+
     const rows = _.map(milestone.challenges, (c) => {
-      return <MilestoneChallengeRow challenge={c}/>
+      return <MilestoneChallengeRow challenge={c} isUpdatable={isUpdatable}/>
     })
     return [
-      <MilestoneChallengeHeader />,
+      <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
       ...rows,
-      <MilestoneChallengeFooter milestone={milestone}/>
+      <MilestoneChallengeFooter milestone={milestone} onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
     ]
   }
   getSelectCount() {
@@ -170,19 +223,23 @@ class ManageMilestones extends React.Component {
   renderAddCopilot() {
     const {
       projectMembers,
+      milestones,
     } = this.props
 
+    const seletedMilestones = _.filter(milestones, m => m.selected)
+    const copilots = _.intersectionBy(..._.map(seletedMilestones, 'members'), 'userId')
     return (
       <MilestoneCopilots 
         edit 
-        customButton={<IconCopilot />} 
-        copilots={[]} 
+        customButton={<IconCopilot styleName="copilot-icon"/>} 
+        copilots={copilots} 
         projectMembers={projectMembers} 
         onAdd={(member) => this.onAddCopilotAll(member, true)}  
         onRemove={(member) => this.onAddCopilotAll(member, false)}  
       />
     )
   }
+
   render() {
     const {
       milestones,
@@ -191,6 +248,7 @@ class ManageMilestones extends React.Component {
       isUpdatable,
     } = this.props
 
+    const canEdit = isUpdatable && this.getSelectCount() > 0
     return (
       <div>
         <div styleName="toolbar">
@@ -201,18 +259,16 @@ class ManageMilestones extends React.Component {
             <IconGnattView />
           </button>
           <div styleName="separator" /> */}
-          <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
+          {canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
             <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
-          </div>
-          <div styleName="delete-button">
+          </div>: null }
+          { canEdit ? <div styleName="delete-button">
             <MilestoneDeleteButton onDelete={this.onDeleteAll}/>
-          </div>
-          <div styleName="icon">
+          </div>: null }
+          { canEdit ? <div styleName="icon">
             {this.renderAddCopilot()}
-          </div>
-          <div styleName="icon">
-            <IconCalendar />
-          </div>
+          </div>: null }
+          { canEdit ? <MilestoneMoveDateButton onMove={this.onMoveMilestoneDates}/>: null}
           {isUpdatable && (
             <button className="tc-btn tc-btn-primary tc-btn-sm" styleName="primary-button" onClick={this.onAdd}>
               ADD
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
index 35ca1c3bc..62bae05a1 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -27,9 +27,19 @@
   }
   .delete-button {
     cursor: pointer;
-
+    margin: 0 10px;
+
+    > span > button {
+      height: 20px;
+      width: 20px;
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+    }
   }
   .icon {
+    margin: 0 10px;
     cursor: pointer;
     svg {
       margin: 0 8px;
@@ -53,6 +63,10 @@
   }
 }
 
+.copilot-icon {
+  width: 20px;
+}
+
 .view-mode {
   &.active {
     svg path {
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.jsx b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.jsx
new file mode 100644
index 000000000..8b9a89765
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.jsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import PT from 'prop-types'
+import IconHelp from '../../../../../../assets/icons/help-me.svg'
+import './ConfirmMoveMilestoneDate.scss'
+
+
+class ConfirmMoveMilestoneDate extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      value: 0
+    }
+    this.onInputChange = this.onInputChange.bind(this)
+  }
+  onInputChange(e) {
+    this.setState({
+      value: e.target.value
+    })
+  }
+  render() {
+    const {
+      onClose
+    } = this.props
+    return (
+      <div styleName="confirm-delete-milestone">
+        <h3 styleName="title">
+          <IconHelp styleName="icon" />
+        Move Milestone Dates
+        </h3>
+        <p styleName="text">
+        Move selected milestone dates
+        </p>
+        <div styleName="input-row">
+          <input type="number" min={0} value={this.state.value} onChange={this.onInputChange}/> days
+        </div>
+        <div styleName="footer">
+          <button type="button" className="tc-btn tc-btn-primary tc-btn-sm" onClick={() => onClose(true, this.state.value)}>MOVE</button>
+          <button type="button" className="tc-btn tc-btn-warning tc-btn-sm" onClick={() => onClose()}>CANCEL</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ConfirmMoveMilestoneDate.propTypes = {
+  onClose: PT.func,
+}
+
+export default ConfirmMoveMilestoneDate
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.scss b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.scss
new file mode 100644
index 000000000..2b1b94aeb
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.scss
@@ -0,0 +1,59 @@
+@import '~styles/variables';
+
+.confirm-delete-milestone {
+  width: 204px;
+  padding: 15px 8px 12px 12px;
+  color: $tc-black;
+  background-color: $tc-white;
+  border: 1px solid $tc-gray-50;
+  border-radius: 3 * $corner-radius;
+  box-shadow: 0 3px 6px rbga(#000, .16);
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    color: red;
+    stroke: currentColor;
+
+    * {
+      stroke: inherit;
+    }
+  }
+  .input-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    >input {
+      height: 26px;
+      width: 80px;
+      margin: 0 10px 0 0;
+    }
+  }
+
+
+  .title {
+    @include roboto-bold;
+
+    display: flex;
+    margin-bottom: 8px;
+    font-size: $tc-body-xs;
+    line-height: 15px;
+  }
+
+  .text {
+    @include roboto;
+
+    margin-bottom: 12px;
+    font-size: $tc-body-sm;
+    line-height: 16px;
+  }
+
+  .footer {
+    button + button {
+      margin-left: 10px;
+    }
+  }
+}
+
+
diff --git a/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/index.js b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/index.js
new file mode 100644
index 000000000..5f07433c0
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/index.js
@@ -0,0 +1,2 @@
+import ConfirmMoveMilestoneDate from './ConfirmMoveMilestoneDate'
+export default ConfirmMoveMilestoneDate 
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index 120bb8eb4..16ba9bb47 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -3,6 +3,7 @@
  */
 import React from 'react'
 import _ from 'lodash'
+import cn from 'classnames'
 import PT from 'prop-types'
 import {
   WORK_MANAGER_APP 
@@ -13,9 +14,22 @@ import './MilestoneChallengeFooter.scss'
 class MilestoneChallengeFooter extends React.Component {
   constructor(props) {
     super(props)
-
+    this.state = {
+      curPage: 0
+    }
+    this.loadChallengeBypage = this.loadChallengeBypage.bind(this)
   }
 
+  loadChallengeBypage(page) {
+    const {
+      milestone,
+      onLoadChallengesByPage 
+    } = this.props
+    if (this.state.curPage === page) {
+      return
+    }
+    onLoadChallengesByPage(page, milestone)
+  }
   renderPagination() {
     const {
       milestone
@@ -32,8 +46,8 @@ class MilestoneChallengeFooter extends React.Component {
     return (
       <div styleName="pagination">
         {
-          _.map(_.range(length), i => {
-            return <div>{i+1}</div>
+          _.map(_.range(length), (i, index) => {
+            return <div styleName={cn({selected: index === this.state.curPage})} onClick={() => {this.loadChallengeBypage(index)}}>{i+1}</div>
           })
         }
       </div>
@@ -43,6 +57,7 @@ class MilestoneChallengeFooter extends React.Component {
 
   render() {
     const {
+      isUpdatable,
       milestone
     } = this.props
     const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
@@ -50,7 +65,7 @@ class MilestoneChallengeFooter extends React.Component {
 
     return (
       <tr styleName="challenge-table-row-wrap">
-        <td colSpan="9">
+        <td colSpan={isUpdatable? '9': '8'}>
           <div styleName="challenge-table-row">
             <div styleName="view-button">
               <a href={url}>
@@ -69,17 +84,9 @@ class MilestoneChallengeFooter extends React.Component {
 }
 
 MilestoneChallengeFooter.propTypes = {
+  onLoadChallengesByPage: PT.func,
   milestone: PT.shape(),
-  rowId: PT.string,
-  onChange: PT.func,
-  onSave: PT.func,
-  onRemove: PT.func,
-  onDiscard: PT.func,
-  projectMembers: PT.arrayOf(PT.shape()),
-  allMilestones: PT.arrayOf(PT.shape()),
-  isCreatingRow: PT.bool,
-  isUpdatable: PT.bool,
-  members: PT.object,
+  isUpdatable: PT.bool
 }
 
 export default MilestoneChallengeFooter
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
index 00ac4baa5..5c2809a8c 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.scss
@@ -22,6 +22,7 @@
   }
   .pagination {
     display: flex;
+    margin-right: 20px;
     div {
       color: #127D60;
       border: 1px solid #127D60;
@@ -31,6 +32,11 @@
       border-radius: 50%;
       text-align: center;
       line-height: 18px;
+      cursor: pointer;
+      &.selected {
+        color: #000;
+        border-color: #000;
+      }
     }
   }
 }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
index fa8e3cce6..17a42de2c 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.jsx
@@ -2,14 +2,14 @@
  * milestoneChallenge header
  */
 import React from 'react'
+import PT from 'prop-types'
 import './MilestoneChallengeHeader.scss'
 
-function MilestoneChallengeHeader() {
+function MilestoneChallengeHeader({isUpdatable}) {
 
   return (
     <tr styleName="challenge-table-row-wrap">
-      <td colSpan="9">
-
+      <td colSpan={isUpdatable? '9': '8'}>
         <div styleName="challenge-table-row">
           <div styleName="title">TITLE</div>
           <div styleName="status">STATUS</div>
@@ -22,4 +22,8 @@ function MilestoneChallengeHeader() {
   )
 }
 
+MilestoneChallengeHeader.propTypes = {
+  isUpdatable: PT.bool
+}
+
 export default MilestoneChallengeHeader
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
index 80e2f5c14..b094a6941 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeHeader/MilestoneChallengeHeader.scss
@@ -13,7 +13,6 @@
   align-items: center;
   .title {
     flex: 1;
-    max-width: 43%;
     margin-left: 30px;
     margin-right: 10px;
   }
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
index 4f5e0d191..17671da7b 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
@@ -13,17 +13,41 @@ import './MilestoneChallengeRow.scss'
 const STALLED_MSG = 'Stalled'
 const DRAFT_MSG = 'Draft'
 
-function MilestoneChallengeRow({challenge: {
-  id,
-  name,
-  status,
-  track,
-  type,
-  startDate,
-  phases: allPhases,
-  endDate
-}}) {
+function MilestoneChallengeRow({challenge, isEmpty, isLoading, isUpdatable}) {
 
+  if (isEmpty) {
+    return (
+      <tr styleName="challenge-table-row-wrap">
+        <td colSpan="9">
+          <div styleName="challenge-empty-row">
+              no challenges found
+          </div>
+        </td>
+      </tr>
+    )
+  }
+
+  if (isLoading) {
+    return (
+      <tr styleName="challenge-table-row-wrap">
+        <td colSpan="9">
+          <div styleName="challenge-empty-row">
+              loading challenges...
+          </div>
+        </td>
+      </tr>
+    )
+  }
+  const {
+    id,
+    name,
+    status,
+    track,
+    type,
+    startDate,
+    phases: allPhases,
+    endDate
+  } = challenge
 
   let statusPhase = allPhases
     .filter(p => p.name !== 'Registration' && p.isOpen)
@@ -41,7 +65,7 @@ function MilestoneChallengeRow({challenge: {
 
   return (
     <tr styleName="challenge-table-row-wrap">
-      <td colSpan="9">
+      <td colSpan={isUpdatable? '9': '8'}>
         <div styleName="challenge-table-row">
           <div styleName="title"><a href={`${CHALLENGE_DETAIL_APP}/${id}`}>{name}</a></div>
           <div styleName="status"><div styleName={phaseMessage.split(' ').join('')}>{phaseMessage}</div></div>
@@ -56,6 +80,9 @@ function MilestoneChallengeRow({challenge: {
 
 MilestoneChallengeRow.propTypes = {
   challenge: PT.shape(),
+  isUpdatable: PT.bool,
+  isEmpty: PT.bool,
+  isLoading: PT.bool
 }
 
 export default MilestoneChallengeRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
index 5b7b37662..77123f943 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
@@ -6,16 +6,18 @@
     color: #6b6b6b;
 }
 
+.challenge-empty-row {
+  text-align: center;
+}
+
 .challenge-table-row {
   display: flex;
   align-items: center;
   .title {
     flex: 1;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-left: 30px;
-    max-width: 43%;
     margin-right: 10px;
     color: #0A81FF
   }
@@ -48,10 +50,10 @@
       padding: 4px 0;
       text-align: center;
       color: #fff;
-      &.Design { background-color: $tc-light-blue-100; }
-      &.Development { background-color: $tc-green-100; }
-      &.DataScience { background-color: $tc-orange-100; }
-      &.QualityAssurance { background-color: $tc-green-100; }
+      &.Design { background-color: #0076A5; }
+      &.Development { background-color: #328732; }
+      &.DataScience { background-color: #BA4C00; }
+      &.QualityAssurance { background-color: #8231A9 }
     }
   }
 
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.jsx
new file mode 100644
index 000000000..cc3d89c48
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.jsx
@@ -0,0 +1,87 @@
+import React from 'react'
+import PT from 'prop-types'
+import { Popper, Manager } from 'react-popper'
+import ConfirmMoveMilestoneDate from '../ConfirmMoveMilestoneDate'
+import IconCalendar from '../../../../../../assets/icons/icon-calendar2.svg'
+
+import './MilestoneMoveDateButton.scss'
+
+class MilestoneMoveDateButton extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      open: false
+    }
+
+    this.onClickOutside = this.onClickOutside.bind(this)
+  }
+
+  componentDidUpdate() {
+    const { open } = this.state
+
+    if (open) {
+      document.addEventListener('click', this.onClickOutside)
+    } else {
+      document.removeEventListener('click', this.onClickOutside)
+    }
+  }
+
+  onClickOutside(event) {
+    if (this.confirmRef.contains(event.target)) {
+      return
+    }
+
+    this.setState({ open: false })
+  }
+
+  render() {
+    const { onMove } = this.props
+    const { open } = this.state
+
+    return (
+      <span>
+        <span
+          styleName="icon-button"
+          onClick={(event) => {
+            event.stopPropagation()
+
+            this.setState({
+              open: !open
+            })
+          }}
+          ref={ref => this.btnRef = ref}
+        >
+          <IconCalendar />
+        </span>
+        {open &&
+          <Manager>
+            <Popper placement="bottom-end" referenceElement={this.btnRef}>
+              {({ ref, style, placement, arrowProps }) => (
+                <div ref={ref} style={style} data-placement={placement} styleName="pane">
+                  <div ref={ref2 => this.confirmRef = ref2}>
+                    <ConfirmMoveMilestoneDate
+                      onClose={(yes, value) => {
+                        if (yes) {
+                          onMove(value)
+                        }
+                        this.setState({ open: false })
+                      }}
+                    />
+                    <div ref={arrowProps.ref} style={arrowProps.style} styleName="arrow" />
+                  </div>
+                </div>
+              )}
+            </Popper>
+          </Manager>
+        }
+      </span>
+    )
+  }
+}
+
+MilestoneMoveDateButton.propTypes = {
+  onMove: PT.func,
+}
+
+export default MilestoneMoveDateButton
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.scss b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.scss
new file mode 100644
index 000000000..4674861de
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/MilestoneMoveDateButton.scss
@@ -0,0 +1,21 @@
+.icon-button{
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+
+  svg {
+    width: 20px;
+  }
+}
+
+.pane {
+  margin-top: 10px;
+  z-index: 1;
+}
+
+.arrow {
+  width: 0;
+  height: 0;
+}
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/index.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/index.jsx
new file mode 100644
index 000000000..9ee70caf0
--- /dev/null
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneMoveDateButton/index.jsx
@@ -0,0 +1,2 @@
+import MilestoneMoveDateButton from './MilestoneMoveDateButton'
+export default MilestoneMoveDateButton
diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js
index e7cf932ec..17ab6f622 100644
--- a/src/projects/reducers/project.js
+++ b/src/projects/reducers/project.js
@@ -9,7 +9,7 @@ import {
   UPDATE_PROJECT_ATTACHMENT_PENDING, UPDATE_PROJECT_ATTACHMENT_SUCCESS, UPDATE_PROJECT_ATTACHMENT_FAILURE,
   REMOVE_PROJECT_ATTACHMENT_PENDING, REMOVE_PROJECT_ATTACHMENT_SUCCESS, REMOVE_PROJECT_ATTACHMENT_FAILURE,
   REMOVE_PENDING_ATTACHMENT, UPDATE_PENDING_ATTACHMENT,
-  LOAD_CHALLEGNES_PENDING, LOAD_CHALLEGNES_SUCCESS,
+  LOAD_CHALLEGNES_PENDING, LOAD_CHALLEGNES_SUCCESS, LOAD_CHALLEGNES_FAILURE,
   ADD_PRODUCT_ATTACHMENT_PENDING, ADD_PRODUCT_ATTACHMENT_SUCCESS, ADD_PRODUCT_ATTACHMENT_FAILURE,
   UPDATE_PRODUCT_ATTACHMENT_PENDING, UPDATE_PRODUCT_ATTACHMENT_SUCCESS, UPDATE_PRODUCT_ATTACHMENT_FAILURE,
   REMOVE_PRODUCT_ATTACHMENT_PENDING, REMOVE_PRODUCT_ATTACHMENT_SUCCESS, REMOVE_PRODUCT_ATTACHMENT_FAILURE,
@@ -26,7 +26,7 @@ import {
   ACCEPT_OR_REFUSE_INVITE_SUCCESS, ACCEPT_OR_REFUSE_INVITE_FAILURE, ACCEPT_OR_REFUSE_INVITE_PENDING,
   UPLOAD_PROJECT_ATTACHMENT_FILES, DISCARD_PROJECT_ATTACHMENT, CHANGE_ATTACHMENT_PERMISSION,
   CREATE_SCOPE_CHANGE_REQUEST_SUCCESS, APPROVE_SCOPE_CHANGE_SUCCESS, REJECT_SCOPE_CHANGE_SUCCESS, CANCEL_SCOPE_CHANGE_SUCCESS, ACTIVATE_SCOPE_CHANGE_SUCCESS,
-  LOAD_PROJECT_MEMBERS_SUCCESS, LOAD_PROJECT_MEMBER_INVITES_SUCCESS, LOAD_PROJECT_MEMBER_SUCCESS, CREATE_PROJECT_PHASE_PENDING, CREATE_PROJECT_PHASE_SUCCESS
+  LOAD_PROJECT_MEMBERS_SUCCESS, LOAD_PROJECT_MEMBER_INVITES_SUCCESS, LOAD_PROJECT_MEMBER_SUCCESS, CREATE_PROJECT_PHASE_PENDING, CREATE_PROJECT_PHASE_SUCCESS,
 } from '../../config/constants'
 import _ from 'lodash'
 import update from 'react-addons-update'
@@ -187,6 +187,16 @@ export const projectState = function (state=initialState, action) {
       phases: { $splice: [[phaseIndex, 1, phase]] },
     })
   }
+  case LOAD_CHALLEGNES_FAILURE: {
+    const phaseIndex = _.findIndex(state.phases, { id: action.meta.milestoneId })
+    const phase = {
+      ...state.phases[phaseIndex],
+      isLoadingChallenges: false,
+    }
+    return update(state, {
+      phases: { $splice: [[phaseIndex, 1, phase]] },
+    })
+  }
   case CREATE_PROJECT_PHASE_TIMELINE_MILESTONES_SUCCESS:
   case CREATE_PROJECT_PHASE_SUCCESS: {
     const { phase, product } = action.payload

From b9661ef6bede710364f1f955af080181c507ed5e Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Wed, 4 Aug 2021 22:28:14 +0300
Subject: [PATCH 12/18] moved details.challengeId to configurable string

---
 .../MilestoneChallengeFooter/MilestoneChallengeFooter.jsx    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index 16ba9bb47..73a26107e 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -6,7 +6,8 @@ import _ from 'lodash'
 import cn from 'classnames'
 import PT from 'prop-types'
 import {
-  WORK_MANAGER_APP 
+  WORK_MANAGER_APP,
+  CHALLENGE_ID_MAPPING
 } from '../../../../../../../src/config/constants'
 import './MilestoneChallengeFooter.scss'
 
@@ -34,7 +35,7 @@ class MilestoneChallengeFooter extends React.Component {
     const {
       milestone
     } = this.props
-    let challengeIds = _.map(milestone.products, 'details.challengeId')
+    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`)
     challengeIds = _.filter(challengeIds)
     const length = Math.ceil(challengeIds.length/6) 
 

From abf4795c379d3fe2b88afbb1247235e4ecf77b0b Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Wed, 4 Aug 2021 22:39:15 +0300
Subject: [PATCH 13/18] attempt to fix pagination

---
 .../MilestoneChallengeFooter/MilestoneChallengeFooter.jsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index 73a26107e..3658bda83 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -29,6 +29,7 @@ class MilestoneChallengeFooter extends React.Component {
     if (this.state.curPage === page) {
       return
     }
+    this.state.curPage = page;
     onLoadChallengesByPage(page, milestone)
   }
   renderPagination() {

From a432b2c54a0bf16116d5168b13928e63d12084ea Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Wed, 4 Aug 2021 22:53:33 +0300
Subject: [PATCH 14/18] fixed lint

---
 .../MilestoneChallengeFooter/MilestoneChallengeFooter.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index 3658bda83..bf81dd81f 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -29,7 +29,7 @@ class MilestoneChallengeFooter extends React.Component {
     if (this.state.curPage === page) {
       return
     }
-    this.state.curPage = page;
+    this.state.curPage = page
     onLoadChallengesByPage(page, milestone)
   }
   renderPagination() {

From 56ae5f1270796ee5407feac1510acdb1c9a29d75 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 5 Aug 2021 17:31:21 +0800
Subject: [PATCH 15/18] fix: issue about pagination and gap line

---
 .../ManageMilestones/ManageMilestones.jsx        | 16 +++++++++-------
 .../ManageMilestones/ManageMilestones.scss       |  8 +++++++-
 .../MilestoneChallengeFooter.jsx                 | 14 ++++++++++----
 .../MilestoneChallengeRow.scss                   |  1 +
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 3df98c290..aa53f2651 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -192,26 +192,27 @@ class ManageMilestones extends React.Component {
     // no challenges
     if (!challengeIds.length) {
       return [
-        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isEmpty isUpdatable={isUpdatable}/>
+        <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isEmpty key="row" isUpdatable={isUpdatable}/>
       ]
     }
 
     // loading challenges
     if (milestone.isLoadingChallenges) {
       return [
-        <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isLoading isUpdatable={isUpdatable}/>
+        <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow isLoading key="row" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeFooter isLoading key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
       ]
     }
 
     const rows = _.map(milestone.challenges, (c) => {
-      return <MilestoneChallengeRow challenge={c} isUpdatable={isUpdatable}/>
+      return <MilestoneChallengeRow key={c.id} challenge={c} isUpdatable={isUpdatable}/>
     })
     return [
-      <MilestoneChallengeHeader isUpdatable={isUpdatable}/>,
+      <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
       ...rows,
-      <MilestoneChallengeFooter milestone={milestone} onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
+      <MilestoneChallengeFooter milestone={milestone} key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
     ]
   }
   getSelectCount() {
@@ -262,6 +263,7 @@ class ManageMilestones extends React.Component {
           {canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
             <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
           </div>: null }
+          {canEdit ? <div styleName="line"/>: null}
           { canEdit ? <div styleName="delete-button">
             <MilestoneDeleteButton onDelete={this.onDeleteAll}/>
           </div>: null }
diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
index ec653d049..97e31227e 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.scss
@@ -17,7 +17,6 @@
     font-size: 12px;
     padding: 0 5px;
     cursor: pointer;
-        
     svg {
       margin-right: 4px;
       height: 13px;
@@ -25,6 +24,13 @@
     }
     margin-right: 20px;
   }
+  .line {
+    width: 1px;
+    height: 20px;
+    display: inline-block;
+    border: 1px solid #C4C4C4;
+    margin-right: 10px;
+  }
   .delete-button {
     cursor: pointer;
     margin: 0 10px;
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index bf81dd81f..08f263da1 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -29,7 +29,7 @@ class MilestoneChallengeFooter extends React.Component {
     if (this.state.curPage === page) {
       return
     }
-    this.state.curPage = page
+    this.setState({curPage: page})
     onLoadChallengesByPage(page, milestone)
   }
   renderPagination() {
@@ -60,10 +60,15 @@ class MilestoneChallengeFooter extends React.Component {
   render() {
     const {
       isUpdatable,
-      milestone
+      milestone,
+      isLoading,
     } = this.props
-    const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
 
+    if (isLoading) {
+      return null
+    }
+
+    const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges`
 
     return (
       <tr styleName="challenge-table-row-wrap">
@@ -88,7 +93,8 @@ class MilestoneChallengeFooter extends React.Component {
 MilestoneChallengeFooter.propTypes = {
   onLoadChallengesByPage: PT.func,
   milestone: PT.shape(),
-  isUpdatable: PT.bool
+  isUpdatable: PT.bool,
+  isLoading: PT.bool
 }
 
 export default MilestoneChallengeFooter
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
index 77123f943..5e7462dfa 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.scss
@@ -34,6 +34,7 @@
       &.Registration { background-color: $tc-orange-100; }
       &.Appeals { background-color: $tc-orange-100; }
       &.AppealsResponse { background-color: $tc-orange-100; }
+      &.Post-Mortem { background-color: $tc-orange-100; }
       &.Draft { background-color: $tc-gray-20; }
       &.Stalled { background-color: $tc-gray-20; }
       &.Completed { background-color: $tc-green-100; }

From 88dbdb5f410ed08e20fb6d2f043e3c889490ce19 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Thu, 5 Aug 2021 18:46:10 +0800
Subject: [PATCH 16/18] fix: issue about no challenges

---
 .../SimplePlan/ManageMilestones/ManageMilestones.jsx       | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index aa53f2651..8185026c8 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -118,12 +118,11 @@ class ManageMilestones extends React.Component {
 
     let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
     challengeIds = _.filter(challengeIds)
-    if (!challengeIds.length) {
-      return
-    }
 
     if (isExpand) {
-      onGetChallenges(milestone.id, challengeIds)
+      if (challengeIds.length) {
+        onGetChallenges(milestone.id, challengeIds)
+      }
       expandList.push(milestone.id)
       this.setState({expandList})
     } else {

From 26bb1ff451da40a2205699c8641a800e30e6f7fd Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Thu, 5 Aug 2021 18:28:15 +0300
Subject: [PATCH 17/18] Revert challenge id config map, put it as constant in
 constants

---
 config/constants/dev.js    | 1 -
 config/constants/master.js | 1 -
 src/config/constants.js    | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/config/constants/dev.js b/config/constants/dev.js
index 1972ccea5..e2f2ba1d6 100644
--- a/config/constants/dev.js
+++ b/config/constants/dev.js
@@ -57,7 +57,6 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
-  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
   DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
diff --git a/config/constants/master.js b/config/constants/master.js
index 79c1594ea..ec979e937 100644
--- a/config/constants/master.js
+++ b/config/constants/master.js
@@ -57,7 +57,6 @@ module.exports = {
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
   CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
-  CHALLENGE_ID_MAPPING: process.env.CHALLENGE_ID_MAPPING,
 
   TAAS_APP_URL: 'https://platform.topcoder.com/taas',
   DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490'
diff --git a/src/config/constants.js b/src/config/constants.js
index 68a267a3e..1203c00ab 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -759,7 +759,7 @@ export const FILE_PICKER_ACCEPT = process.env.FILE_PICKER_ACCEPT || ['.bmp', '.g
 
 export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
 
-export const CHALLENGE_ID_MAPPING = process.env.CHALLENGE_ID_MAPPING || 'challengeId'
+export const CHALLENGE_ID_MAPPING = 'challengeGuid'
 /*
  * URLs
  */

From 6f75f09caac2bd72205e0fdc8736081208f9ff54 Mon Sep 17 00:00:00 2001
From: yoution <zhuyan207@gmail.com>
Date: Sat, 7 Aug 2021 07:47:56 +0800
Subject: [PATCH 18/18] fix: issue about milestone challenge count

---
 .../SimplePlan/ManageMilestones/ManageMilestones.jsx           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 8185026c8..e63f2aaad 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -116,8 +116,7 @@ class ManageMilestones extends React.Component {
     let expandList = this.state.expandList
     const { onGetChallenges } = this.props
 
-    let challengeIds = _.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`).slice(0, 6)
-    challengeIds = _.filter(challengeIds)
+    const challengeIds = _.filter(_.map(milestone.products, `details.${CHALLENGE_ID_MAPPING}`)).slice(0, 6)
 
     if (isExpand) {
       if (challengeIds.length) {