From 852e2832dd12ee06cea4dbcc5fe38e0f9c9cfc0b Mon Sep 17 00:00:00 2001
From: Ahmad Alkhawaja <ahmad@tasqat.com>
Date: Fri, 20 Aug 2021 16:19:27 +0400
Subject: [PATCH] Fixes for issues 4427, 4460 and 4415

---
 .../ManageMilestones/ManageMilestones.jsx     |   8 +-
 .../AddCopilotsSidebar/AddCopilotsSidebar.jsx | 199 ++++++++++--------
 .../MilestoneChallengeFooter.jsx              |   2 +-
 .../MilestoneChallengeRow.jsx                 |  12 +-
 .../MilestoneDeleteButton.jsx                 |   4 +-
 .../components/MilestoneRow/MilestoneRow.jsx  |   3 +
 .../components/MilestoneRow/MilestoneRow.scss |   8 +
 7 files changed, 141 insertions(+), 95 deletions(-)

diff --git a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
index 8ee6eee33..4837591eb 100644
--- a/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
+++ b/src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx
@@ -191,7 +191,7 @@ class ManageMilestones extends React.Component {
     if (!challengeIds.length) {
       return [
         <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isEmpty key="row" isUpdatable={isUpdatable}/>
+        <MilestoneChallengeRow milestone={milestone} isEmpty key="row" isUpdatable={isUpdatable}/>
       ]
     }
 
@@ -199,13 +199,13 @@ class ManageMilestones extends React.Component {
     if (milestone.isLoadingChallenges) {
       return [
         <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
-        <MilestoneChallengeRow isLoading key="row" isUpdatable={isUpdatable}/>,
+        <MilestoneChallengeRow milestone={milestone} isLoading key="row" isUpdatable={isUpdatable}/>,
         <MilestoneChallengeFooter isLoading key="footer" onLoadChallengesByPage={this.onLoadChallengesByPage} isUpdatable={isUpdatable}/>
       ]
     }
 
     const rows = _.map(milestone.challenges, (c) => {
-      return <MilestoneChallengeRow key={c.id} challenge={c} isUpdatable={isUpdatable}/>
+      return <MilestoneChallengeRow milestone={milestone} key={c.id} challenge={c} isUpdatable={isUpdatable}/>
     })
     return [
       <MilestoneChallengeHeader key="header" isUpdatable={isUpdatable}/>,
@@ -248,6 +248,7 @@ class ManageMilestones extends React.Component {
     } = this.props
 
     const canEdit = isUpdatable && this.getSelectCount() > 0
+    const disableDeleteAction = this.getSelectCount() > 1
     return (
       <div>
         <div styleName="toolbar">
@@ -309,6 +310,7 @@ class ManageMilestones extends React.Component {
                       allMilestones={milestones}
                       isCreatingRow={`${milestone.id}`.startsWith('new-milestone')}
                       isUpdatable={isUpdatable}
+                      disableDeleteAction={disableDeleteAction}
                       phaseMembers={milestone.members}
                     />,
                     ...this.renderChallengeTable(milestone)
diff --git a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
index 39f5b8c24..1b12cf1f7 100644
--- a/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
+++ b/src/projects/detail/components/SimplePlan/components/AddCopilotsSidebar/AddCopilotsSidebar.jsx
@@ -11,95 +11,124 @@ import IconXMark from '../../../../../../assets/icons/x-mark-thin.svg'
 
 import './AddCopilotsSidebar.scss'
 
-function AddCopilotsSidebar({
-  memberToAdd,
-  setMemberToAdd,
-  copilots,
-  projectMembers,
-  onClose,
-  onAdd,
-  onRemove
-})  {
-  const canManageCopilots = hasPermission(PERMISSIONS.MANAGE_COPILOTS)
-  const canRemoveCopilots = hasPermission(PERMISSIONS.REMOVE_COPILOTS)
+class AddCopilotsSidebar extends React.Component {
+  constructor(props) {
+    super(props)
 
-  const projectMemberOptions = projectMembers.map(projectMember => ({
-    label: projectMember.handle,
-    value: projectMember
-  })).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
-  )
+    this.state = {
+    }
 
-  return (
-    <aside styleName="add-copilots-sidebar">
-      <h2 styleName="title">
-        Copilot
-        <button type="button" className="tc-btn tc-btn-link" styleName="button-close" onClick={onClose}>
-          <IconXMark />
-        </button>
-      </h2>
-      <div styleName="select-copilot">
-        <span styleName="label">Add New Copilot</span>
-        <Select
-          options={projectMemberOptions}
-          onChange={(selectedOption) => {
-            if (!selectedOption) {
-              return
-            }
+    this.onClickOutside = this.onClickOutside.bind(this)
+  }
 
-            setMemberToAdd(selectedOption.value)
-          }}
-          value={projectMemberOptions.find(option => option.value === memberToAdd) || null}
-          placeholder="- Select -"
-          isClearable={false}
-        />
-        <button
-          className="tc-btn tc-btn-primary tc-btn-sm"
-          onClick={() => {
-            onAdd(memberToAdd)
-            setMemberToAdd(null)
-          }}
-          disabled={!memberToAdd}
-          styleName="add-button"
-        >
-          ADD
-        </button>
-      </div>
-      <ul styleName="copilot-list">
-        {copilots.map((member, index) => (
-          <li key={`${member.handle}-${index}`}>
-            <div styleName="member-details">
-              <Avatar
-                userName={getFullNameWithFallback(member)}
-                avatarUrl={getAvatarResized(_.get(member, 'photoURL') || '', 80)}
-                size={40}
-              />
-              <div styleName="name-and-handle">
-                <span styleName="fullname">{getFullNameWithFallback(member)}</span>
-                <span styleName="handle">
-                  @{member.handle || 'ConnectUser'}
-                </span>
+  onClickOutside(event) {
+    const {onClose} = this.props
+    if(this.ref.contains(event.target)) {
+      return
+    }
+
+    onClose()    
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.onClickOutside)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onClickOutside)
+  }
+
+  render() {
+    const {
+      memberToAdd,
+      setMemberToAdd,
+      copilots,
+      projectMembers,
+      onClose,
+      onAdd,
+      onRemove
+    } = this.props
+    const canManageCopilots = hasPermission(PERMISSIONS.MANAGE_COPILOTS)
+    const canRemoveCopilots = hasPermission(PERMISSIONS.REMOVE_COPILOTS)
+
+    const projectMemberOptions = projectMembers.map(projectMember => ({
+      label: projectMember.handle,
+      value: projectMember
+    })).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" ref={ ref => this.ref = ref}>
+        <h2 styleName="title">
+          Copilot
+          <button type="button" className="tc-btn tc-btn-link" styleName="button-close" onClick={onClose}>
+            <IconXMark />
+          </button>
+        </h2>
+        <div styleName="select-copilot">
+          <span styleName="label">Add New Copilot</span>
+          <Select
+            options={projectMemberOptions}
+            onChange={(selectedOption) => {
+              if (!selectedOption) {
+                return
+              }
+
+              setMemberToAdd(selectedOption.value)
+            }}
+            value={projectMemberOptions.find(option => option.value === memberToAdd) || null}
+            placeholder="- Select -"
+            isClearable={false}
+          />
+          <button
+            className="tc-btn tc-btn-primary tc-btn-sm"
+            onClick={() => {
+              onAdd(memberToAdd)
+              setMemberToAdd(null)
+            }}
+            disabled={!memberToAdd}
+            styleName="add-button"
+          >
+            ADD
+          </button>
+        </div>
+        <ul styleName="copilot-list">
+          {copilots.map((member, index) => (
+            <li key={`${member.handle}-${index}`}>
+              <div styleName="member-details">
+                <Avatar
+                  userName={getFullNameWithFallback(member)}
+                  avatarUrl={getAvatarResized(_.get(member, 'photoURL') || '', 80)}
+                  size={40}
+                />
+                <div styleName="name-and-handle">
+                  <span styleName="fullname">{getFullNameWithFallback(member)}</span>
+                  <span styleName="handle">
+                    @{member.handle || 'ConnectUser'}
+                  </span>
+                </div>
+                {(canManageCopilots || canRemoveCopilots) && (
+                  <button
+                    className="tc-btn tc-btn-link"
+                    styleName="close-button"
+                    onClick={() => {
+                      onRemove(member)
+                    }}
+                  >
+                    &times;
+                  </button>
+                )}
               </div>
-              {(canManageCopilots || canRemoveCopilots) && (
-                <button
-                  className="tc-btn tc-btn-link"
-                  styleName="close-button"
-                  onClick={() => {
-                    onRemove(member)
-                  }}
-                >
-                  &times;
-                </button>
-              )}
-            </div>
-          </li>
-        ))}
-      </ul>
-    </aside>
-  )
+            </li>
+          ))}
+        </ul>
+      </aside>
+    )
+  }
 }
 
 AddCopilotsSidebar.propTypes = {
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
index 08f263da1..f31f5444a 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeFooter/MilestoneChallengeFooter.jsx
@@ -75,7 +75,7 @@ class MilestoneChallengeFooter extends React.Component {
         <td colSpan={isUpdatable? '9': '8'}>
           <div styleName="challenge-table-row">
             <div styleName="view-button">
-              <a href={url}>
+              <a href={url} target="_blank">
                 VIEW CHALLENGES
               </a>
             </div>
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
index 4b2513126..7ee3a579c 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneChallengeRow/MilestoneChallengeRow.jsx
@@ -5,12 +5,12 @@ import React from 'react'
 import PT from 'prop-types'
 import moment from 'moment'
 import {
-  CHALLENGE_DETAIL_APP
+  WORK_MANAGER_APP
 } from '../../../../../../../src/config/constants'
 
 import './MilestoneChallengeRow.scss'
 
-function MilestoneChallengeRow({challenge, isEmpty, isLoading, isUpdatable}) {
+function MilestoneChallengeRow({challenge, milestone, isEmpty, isLoading, isUpdatable}) {
 
   if (isEmpty) {
     return (
@@ -41,16 +41,17 @@ function MilestoneChallengeRow({challenge, isEmpty, isLoading, isUpdatable}) {
     status,
     track,
     startDate,
-    endDate
+    endDate,
   } = challenge
 
   const statusLabel = status.indexOf('Cancelled') === 0 ? 'Cancelled': status
+  const url = `${WORK_MANAGER_APP}/${milestone.projectId}/challenges/${id}/view`
 
   return (
     <tr styleName="challenge-table-row-wrap">
       <td colSpan={isUpdatable? '9': '8'}>
         <div styleName="challenge-table-row">
-          <div styleName="title"><a href={`${CHALLENGE_DETAIL_APP}/${id}`}>{name}</a></div>
+          <div styleName="title"><a href={`${url}`} target="_blank">{name}</a></div>
           <div styleName="status"><div styleName={statusLabel}>{statusLabel}</div></div>
           <div styleName="type"><div styleName={track.split(' ').join('')}>{track}</div></div>
           <div styleName="start-date">{moment(startDate).format('MM-DD-YYYY')}</div>
@@ -65,7 +66,8 @@ MilestoneChallengeRow.propTypes = {
   challenge: PT.shape(),
   isUpdatable: PT.bool,
   isEmpty: PT.bool,
-  isLoading: PT.bool
+  isLoading: PT.bool,
+  milestone: PT.shape()
 }
 
 export default MilestoneChallengeRow
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx
index 42f32ff59..6598972f5 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneDeleteButton/MilestoneDeleteButton.jsx
@@ -36,7 +36,7 @@ class MilestoneDeleteButton extends React.Component {
   }
 
   render() {
-    const { onDelete } = this.props
+    const { onDelete, disabled } = this.props
     const { open } = this.state
 
     return (
@@ -45,6 +45,7 @@ class MilestoneDeleteButton extends React.Component {
           type="button"
           className="tc-btn tc-btn-link"
           styleName="icon-button"
+          disabled={disabled}
           onClick={(event) => {
             event.stopPropagation()
 
@@ -84,6 +85,7 @@ class MilestoneDeleteButton extends React.Component {
 
 MilestoneDeleteButton.propTypes = {
   onDelete: PT.func,
+  disabled: PT.bool
 }
 
 export default MilestoneDeleteButton
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
index c598245a9..097f7acad 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx
@@ -39,6 +39,7 @@ function MilestoneRow({
   isCreatingRow,
   isUpdatable,
   phaseMembers,
+  disableDeleteAction
 }) {
   const phaseStatusOptions = PHASE_STATUS_OPTIONS
   const edit = milestone.edit
@@ -294,6 +295,7 @@ function MilestoneRow({
               <IconPencil />
             </button>
             <MilestoneDeleteButton
+              disabled={disableDeleteAction}
               onDelete={() => {
                 onRemove(milestone.id)
               }}
@@ -322,6 +324,7 @@ MilestoneRow.propTypes = {
   allMilestones: PT.arrayOf(PT.shape()),
   isCreatingRow: PT.bool,
   isUpdatable: PT.bool,
+  disableDeleteAction: PT.bool,
   members: PT.object,
 }
 
diff --git a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
index f6a997f9c..a692b787a 100644
--- a/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
+++ b/src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.scss
@@ -153,9 +153,17 @@
     > *:not(:last-child) {
       margin-right: 10px;
     }
+
+    button {
+      color: black;
+    }
     svg {
       width: 14px;
       height: 14px;
+
+      path {
+        fill: currentColor
+      }
     }
   }
 }