Merge pull request #4456 from appirio-tech/feature/new-milestone-concept

[DEV] Additional Fixes for Milestone Management

Author: elkhawajah

src/assets/icons/icon-calendar2.svg

@@ -181,7 +181,7 @@ class ManageMilestones extends React.Component {
     const {
       isUpdatable
     } = this.props
-    if (!this.isExpandChallengeList(milestone)) {
+    if (!isUpdatable ||!this.isExpandChallengeList(milestone)) {
       return <tr />
     }
 
@@ -258,8 +258,8 @@ class ManageMilestones extends React.Component {
             <IconGnattView />
           </button>
           <div styleName="separator" /> */}
-          {canEdit ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
-            <IconUnselect /> {this.getSelectCount()} PROJECTS SELECTED
+          {this.getSelectCount() > 0 ? <div styleName="unselect-bottom" onClick={this.onUnselectAll}>
+            <IconUnselect /> {this.getSelectCount()} PROJECT(S) SELECTED
           </div>: null }
           {canEdit ? <div styleName="line"/>: null}
           { canEdit ? <div styleName="delete-button">
@@ -284,17 +284,6 @@ class ManageMilestones extends React.Component {
         <div styleName="table-container">
           <Formsy.Form>
             <table styleName="milestones-table">
-              <colgroup>
-                <col style={{ width: '20px' }} />
-                <col style={{ width: '20px' }} />{/* CHECKBOX */}
-                <col style={{ width: '8%' }} />{/* MILESTONE */}
-                <col />{/* DESCRIPTION */}
-                <col style={{ width: '12%' }} />{/* START DATE */}
-                <col style={{ width: '11%' }} />{/* END DATE */}
-                <col style={{ width: '10%' }} />{/* STATUS */}
-                <col style={{ width: '13%' }} />{/* COPILOTS */}
-                {isUpdatable && (<col style={{ width: '64px' }} />)}{/* ACTION */}
-              </colgroup>
               <thead>
                 <MilestoneHeaderRow
                   milestones={milestones}

src/assets/icons/icon-copilot.svg

@@ -26,6 +26,7 @@
     margin-bottom: 10px;
     >input {
       height: 26px;
+      line-height: 26px;
       width: 80px;
       margin: 0 10px 0 0;
     }

src/assets/icons/icon-ui-pencil.svg

@@ -31,7 +31,7 @@ function MilestoneHeaderRow ({ milestones, onChangeMilestones, isUpdatable }) {
 
   return (
     <tr styleName="milestone-row">
-      <th />
+      {isUpdatable ? <th />: null}
       <th>
         <TCFormFields.Checkbox
           name="select-all"

src/assets/icons/icon-ui-trash-simple.svg

@@ -3,6 +3,7 @@
   height: 14px;
   padding: 0;
   border: 0;
+  margin: 0 8px;
   cursor: pointer;
 
   svg {

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

@@ -50,7 +50,7 @@ function MilestoneRow({
 
   return edit ? (
     <tr styleName="milestone-row" className="edit-milestone-row">
-      <td />
+      {isUpdatable ? <td /> : null}
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}
@@ -251,7 +251,7 @@ function MilestoneRow({
     </tr>
   ) : (
     <tr styleName="milestone-row">
-      <td styleName="expand" onClick={() => onExpand(!isExpand, milestone)}>{isExpand ? <IconClose />: <IconExpand />}</td>
+      {isUpdatable ? <td styleName="expand" onClick={() => onExpand(!isExpand, milestone)}>{isExpand ? <IconClose />: <IconExpand />}</td>: null}
       <td styleName="checkbox">
         <TCFormFields.Checkbox
           name={`select-${rowId}`}

src/projects/detail/components/SimplePlan/components/ConfirmMoveMilestoneDate/ConfirmMoveMilestoneDate.scss

@@ -153,5 +153,9 @@
     > *:not(:last-child) {
       margin-right: 10px;
     }
+    svg {
+      width: 14px;
+      height: 14px;
+    }
   }
 }