Fix table layout

Author: nursoltan-s

src/projects/detail/components/SimplePlan/ManageMilestones/ManageMilestones.jsx

@@ -16,7 +16,7 @@ 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 { CHALLENGE_ID_MAPPING, PHASE_STATUS_IN_REVIEW } from '../../../../../config/constants'
+import { CHALLENGE_ID_MAPPING, PHASE_STATUS_IN_REVIEW, PROJECT_STATUS_CANCELLED, PROJECT_STATUS_COMPLETED } from '../../../../../config/constants'
 
 import './ManageMilestones.scss'
 import MilestoneApprovalButton from '../components/MilestoneApprovalButton'
@@ -256,8 +256,11 @@ class ManageMilestones extends React.Component {
       onChangeMilestones,
       isUpdatable,
       isCustomer,
+      project,
     } = this.props
 
+    const hideCheckbox = project.status === PROJECT_STATUS_CANCELLED || project.status === PROJECT_STATUS_COMPLETED
+
     // const isNeedApproval = project.status === PROJECT_STATUS_IN_REVIEW
     const isNeedApproval = !milestones.filter(ms => ms.selected === true).find(ms => !(ms.status === PHASE_STATUS_IN_REVIEW))
     const canShowApproval = isCustomer && isNeedApproval
@@ -325,7 +328,7 @@ class ManageMilestones extends React.Component {
             <table styleName="milestones-table">
               <colgroup>
                 <col style={{ width: '20px' }} />
-                <col style={{ width: '20px' }} />{/* CHECKBOX */}
+                {hideCheckbox ? null : <col style={{ width: '20px' }} />}{/* CHECKBOX */}
                 <col style={{ width: '8%' }} />{/* MILESTONE */}
                 <col />{/* DESCRIPTION */}
                 <col style={{ width: '12%' }} />{/* START DATE */}
@@ -339,6 +342,7 @@ class ManageMilestones extends React.Component {
                   milestones={milestones}
                   onChangeMilestones={onChangeMilestones}
                   isUpdatable={isUpdatable || isCustomer}
+                  hideCheckbox={hideCheckbox}
                 />
               </thead>
               <tbody>
@@ -365,6 +369,7 @@ class ManageMilestones extends React.Component {
                       onApprove={this.onApprove}
                       phaseMembers={milestone.members}
                       isApproving={milestonesInApproval.indexOf(milestone.id) !== -1}
+                      hideCheckbox={hideCheckbox}
                     />,
                     ...this.renderChallengeTable(milestone)
                   ]

src/projects/detail/components/SimplePlan/components/MilestoneRow/MilestoneRow.jsx

@@ -45,7 +45,8 @@ function MilestoneRow({
   phaseMembers,
   disableDeleteAction,
   isCustomer,
-  isApproving
+  isApproving,
+  hideCheckbox
 }) {
   const isNeedApproval = milestone.status === PHASE_STATUS_IN_REVIEW
   const showApproval = isCustomer && isNeedApproval
@@ -58,11 +59,12 @@ function MilestoneRow({
   let milestoneRef
   let startDateRef
   let endDateRef
+  const tdEl = hideCheckbox ? null : <td/>
 
   return edit ? (
     <tr styleName="milestone-row" className="edit-milestone-row">
       {isUpdatable ? <td /> : null}
-      {isEditingMilestone ? <td/ >: <td styleName="checkbox">
+      {(isEditingMilestone || hideCheckbox) ? <td/ >: <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
           value={milestone.selected}
@@ -301,7 +303,7 @@ function MilestoneRow({
   ) : (
     <tr styleName="milestone-row">
       {isUpdatable ? <td styleName="expand" onClick={() => onExpand(!isExpand, milestone)}>{isExpand ? <IconClose />: <IconExpand />}</td>: <td />}
-      {isEditingMilestone ? <td/> : <td styleName="checkbox">
+      {(isEditingMilestone || hideCheckbox) ? tdEl : <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
           value={milestone.selected}
@@ -402,6 +404,7 @@ MilestoneRow.propTypes = {
   disableDeleteAction: PT.bool,
   isCustomer: PT.bool,
   members: PT.object,
+  hideCheckbox: PT.bool,
 }
 
 export default MilestoneRow