Merge pull request #4489 from appirio-tech/hotfix/milestone-message-rewording

[HOTFIX][PROD] Milestone Approval Additional Fixes

Author: RishiRajSahu

.eslintignore

@@ -1,2 +1,4 @@
 # ignore dist directory to speed up linting after we build project
 dist/*
+# ignore test automation folder as it uses TypeScript with its own Eslint config
+connect-automation/*

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

@@ -35,7 +35,7 @@ class MilestoneApprovalButton extends React.Component {
           onClick={() => {
             if(type === 'reject') {
               this.setState({open: true})
-            } else {
+            } else if(onClick) {
               onClick()
             }
           }}

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

@@ -6,7 +6,6 @@ import PT from 'prop-types'
 import {
   PHASE_APPROVAL_APPROVE,
   PHASE_APPROVAL_REJECT,
-  PHASE_STATUS_IN_REVIEW,
   PHASE_STATUS_REVIEWED,
 } from '../../../../../../config/constants'
 import IconCollapse from '../../../../../../assets/icons/icon-ui-collapse.svg'
@@ -50,16 +49,13 @@ class MilestonesApprovalNotification extends React.Component {
     const { milestones } = this.props
 
     console.log('milestones', milestones)
-    
-    const inReviews = milestones.find(
-      (ms) => ms.status === PHASE_STATUS_IN_REVIEW
-    )
+
     const revieweds = milestones.filter(
       (ms) => ms.status === PHASE_STATUS_REVIEWED
     ).map( ms => {ms.currentApproval = this.findLatest(ms.approvals); return ms})
 
     const showAllApproved =
-      !inReviews && revieweds.length > 0 &&
+      revieweds.length > 0 &&
       !revieweds.find(
         (rd) =>
           !!(
@@ -114,17 +110,45 @@ class MilestonesApprovalNotification extends React.Component {
 
     if (showAllApproved && this.state.show) {
       return (
-        <div styleName="milestones-notifications">
-          <div styleName="milestones-notifications-left">
-            <MilestoneApprovalButton
-              type="approve"
-              global
-            />
-            The following milestone(s) has been approved:  
+        <div styleName="approved-notifications">
+          <div styleName="milestones-notifications">
+            <div styleName="milestones-notifications-left">
+              <button
+                type="submit"
+                className="tc-btn"
+                styleName="tranparent-button"
+                onClick={() => {
+                  this.setState({ open: !this.state.open })
+                }}
+              >
+                <IconCollapse
+                  styleName={`icon-expand ${this.state.open ? 'open' : ''}`}
+                />
+              </button>
+              The following milestone(s) has been approved&nbsp;
+              <MilestoneApprovalButton
+                type="approve"
+              />
+            </div>
+            {renderDismissButton(() => {
+              this.setState({ show: false })
+            })}
           </div>
-          {renderDismissButton(() => {
-            this.setState({ show: false })
-          })}
+          {this.state.open && (
+            <div styleName="body">
+              {revieweds.map((item, key) => (
+                <div
+                  className="flex middle"
+                  styleName="accordion-body-item"
+                  key={key}
+                >
+                  <div styleName="body-item-one">
+                    <p styleName="bullet">{item.name}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       )
     }

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

@@ -51,6 +51,47 @@
     }
 }
 
+.approved-notifications {
+    .milestones-notifications-left {
+        display: flex;
+        align-items: center;
+        
+        button {
+            padding: 0;
+        }
+    }
+
+    .body {
+        padding: 20px calc(35px + 20px);
+        border-top: none;
+        background-color: white;
+
+        .accordion-body-item {
+            font-size: 90%;
+                 
+            .body-item-one {
+                flex: 20;
+            }
+        
+            .body-item-two {
+                flex: 45;
+            }
+        
+            &:first-child {
+                font-weight: normal;
+            }
+            
+            .body-item-one {
+                .bullet {
+                    display: list-item;
+                    list-style-type: disc;
+                    list-style-position: inside;            
+                }
+            }
+        }
+    }
+}
+
 .reject-notifications {
 
     .trigger {