fix: hide checkbox when edit and new row

Author: yoution

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

@@ -247,6 +247,7 @@ class ManageMilestones extends React.Component {
       isUpdatable,
     } = this.props
 
+    const isEditingMilestone = !!_.find(milestones, m => m.edit)
     const canEdit = isUpdatable && this.getSelectCount() > 0
     return (
       <div>
@@ -286,6 +287,7 @@ class ManageMilestones extends React.Component {
             <table styleName="milestones-table">
               <thead>
                 <MilestoneHeaderRow
+                  isEditingMilestone={isEditingMilestone}
                   milestones={milestones}
                   onChangeMilestones={onChangeMilestones}
                   isUpdatable={isUpdatable}
@@ -295,6 +297,7 @@ class ManageMilestones extends React.Component {
                 {milestones.map((milestone) => (
                   [
                     <MilestoneRow
+                      isEditingMilestone={isEditingMilestone}
                       milestone={milestone}
                       key={milestone.id}
                       rowId={`${milestone.id}`}

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

@@ -9,7 +9,7 @@ import './MilestoneHeaderRow.scss'
 
 const TCFormFields = FormsyForm.Fields
 
-function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
+function MilestoneHeaderRow ({ isEditingMilestone, milestones, onChangeMilestones, isUpdatable }) {
   const checked = milestones.reduce(
     (selected, milestone) => selected = selected && milestone.selected,
     milestones.length > 0
@@ -32,15 +32,15 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
   return (
     <tr styleName="milestone-row">
       {isUpdatable ? <th />: null}
-      <th>
+      {isEditingMilestone? <th /> :<th>
         <TCFormFields.Checkbox
           name="select-all"
           value={checked}
           onChange={(_, value) => {
             value ? selectAll() : unselectAll()
           }}
         />
-      </th>
+      </th>}
       <th>MILESTONE</th>
       <th>DESCRIPTION</th>
       <th>START DATE</th>
@@ -54,6 +54,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
 
 MilestoneHeaderRow.propTypes = {
   onChangeMilestones: PT.func,
+  isEditingMilestone: PT.bool,
 }
 
 export default MilestoneHeaderRow

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

@@ -26,6 +26,7 @@ const TCFormFields = FormsyForm.Fields
 
 function MilestoneRow({
   isExpand,
+  isEditingMilestone,
   milestone,
   rowId,
   onExpand,
@@ -51,15 +52,15 @@ function MilestoneRow({
   return edit ? (
     <tr styleName="milestone-row" className="edit-milestone-row">
       {isUpdatable ? <td /> : null}
-      <td styleName="checkbox">
+      {isEditingMilestone ? <td/ >: <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
           value={milestone.selected}
           onChange={(_, value) => {
             onChange({ ...milestone, selected: value })
           }}
         />
-      </td>
+      </td>}
       <td styleName="milestone">
         <TCFormFields.TextInput
           validations={{
@@ -252,15 +253,15 @@ function MilestoneRow({
   ) : (
     <tr styleName="milestone-row">
       {isUpdatable ? <td styleName="expand" onClick={() => onExpand(!isExpand, milestone)}>{isExpand ? <IconClose />: <IconExpand />}</td>: null}
-      <td styleName="checkbox">
+      {isEditingMilestone ? <td/> : <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
           value={milestone.selected}
           onChange={(_, value) => {
             onChange({ ...milestone, selected: value })
           }}
         />
-      </td>
+      </td>}
       <td styleName="milestone">
         {milestone.name}
       </td>
@@ -309,6 +310,7 @@ function MilestoneRow({
 
 MilestoneRow.propTypes = {
   milestone: PT.shape(),
+  isEditingMilestone: PT.bool,
   rowId: PT.string,
   onChange: PT.func,
   onSave: PT.func,