fix: Vendor review approval modal content edit and close button fix (#…

…1206)

* Address #1202 
* Address #1203

client/components/CandidateReview/CandidateModals/ThankYouModal/index.jsx → client/components/CandidateReview/CandidateModals/ApprovedModal/index.jsx

@@ -4,38 +4,41 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
 import '../common.css';
-import './ThankYouModal.css';
 
-const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
+const ApprovedModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
   return (
     <BasicModal
       show={true}
       centered={true}
       closeButton={false}
       content={
         <>
-          <p className="thank-you-content">Your Review has been submitted!</p>
-          <p className="thank-you-share">Do you have anything else to share?</p>
-          <p className="thank-you-issue">
+          <p className="review-confirmation-content">
+            Your Review has been submitted!
+          </p>
+          <p className="review-confirmation-share">
+            Do you have anything else to share?
+          </p>
+          <p className="review-confirmation-issue">
             <a href={githubUrl} target="_blank" rel="noreferrer">
               Open a GitHub issue
             </a>{' '}
             to leave more feedback{' '}
           </p>
         </>
       }
-      dialogClassName="thank-you"
+      dialogClassName="review-confirmation"
       actions={[
         {
           label: 'Close',
           onClick: handleAction
         }
       ]}
       title={
-        <div className="thank-you-title">
+        <div className="review-confirmation-title">
           <FontAwesomeIcon
             icon={faCheck}
-            className="thank-you-check"
+            className="review-confirmation-check"
             color="green"
           />
           <h1>Thank you!</h1>
@@ -45,9 +48,9 @@ const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
   );
 };
 
-ThankYouModal.propTypes = {
+ApprovedModal.propTypes = {
   handleAction: PropTypes.func,
   githubUrl: PropTypes.string
 };
 
-export default ThankYouModal;
+export default ApprovedModal;

client/components/CandidateReview/CandidateModals/NotApprovedModal/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import BasicModal from '../../../common/BasicModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+import '../common.css';
+
+const NotApprovedModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
+  return (
+    <BasicModal
+      show={true}
+      centered={true}
+      closeButton={false}
+      content={
+        <>
+          <p className="review-confirmation-content">Thank you for reviewing</p>
+          <p className="review-confirmation-share">
+            if you haven’t opened any issues yet, please{' '}
+            <a href={githubUrl} target="_blank" rel="noreferrer">
+              open an issue describing why this is not approved.
+            </a>
+          </p>
+        </>
+      }
+      dialogClassName="review-confirmation"
+      actions={[
+        {
+          label: 'Close',
+          onClick: handleAction
+        }
+      ]}
+      title={
+        <div className="review-confirmation-title">
+          <FontAwesomeIcon
+            icon={faExclamationTriangle}
+            className="review-confirmation-check"
+            color="orange"
+          />
+          <h1>Thank you!</h1>
+        </div>
+      }
+    />
+  );
+};
+
+NotApprovedModal.propTypes = {
+  handleAction: PropTypes.func,
+  githubUrl: PropTypes.string
+};
+
+export default NotApprovedModal;

client/components/CandidateReview/CandidateModals/ProvideFeedbackModal/index.jsx

@@ -25,6 +25,7 @@ const ProvideFeedbackModal = ({
       show={true}
       centered={true}
       cancelButton={false}
+      useOnHide={true}
       handleHide={handleHide}
       content={
         <div className="feedback-content">

client/components/CandidateReview/CandidateModals/common.css

@@ -9,3 +9,56 @@
 .modal-header {
   border-bottom: none;
 }
+
+.review-confirmation {
+  justify-content: center;
+}
+
+.review-confirmation .modal-content {
+  align-items: center;
+  width: 360px;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.review-confirmation-check {
+  font-size: 100px;
+  margin-right: 0 !important;
+  margin-bottom: 20px;
+}
+
+.review-confirmation-title {
+  text-align: center;
+}
+
+.review-confirmation-title h1 {
+  border-bottom: none;
+  font-size: 1.5em;
+}
+
+.review-confirmation-content {
+  font-weight: bold;
+  text-align: center;
+}
+
+.review-confirmation-share {
+  margin-bottom: 0;
+}
+
+.review-confirmation-issue {
+  text-align: center;
+  font-size: 12px;
+  margin-bottom: 0;
+}
+
+.review-confirmation .modal-header {
+  padding-bottom: 0;
+}
+
+.review-confirmation .modal-footer {
+  padding-bottom: 30px;
+}
+
+.review-confirmation .modal-footer .btn {
+  width: 100px;
+}

client/components/CandidateReview/CandidateTestPlanRun/index.jsx

@@ -24,14 +24,15 @@ import '../../App/App.css';
 import { useMediaQuery } from 'react-responsive';
 import TestPlanResultsTable from '../../common/TestPlanResultsTable';
 import ProvideFeedbackModal from '../CandidateModals/ProvideFeedbackModal';
-import ThankYouModal from '../CandidateModals/ThankYouModal';
+import ApprovedModal from '../CandidateModals/ApprovedModal';
 import FeedbackListItem from '../FeedbackListItem';
 import DisclosureComponent from '../../common/DisclosureComponent';
 import createIssueLink, {
   getIssueSearchLink
 } from '../../../utils/createIssueLink';
 import RunHistory from '../../common/RunHistory';
 import { useUrlTestIndex } from '../../../hooks/useUrlTestIndex';
+import NotApprovedModal from '../CandidateModals/NotApprovedModal';
 
 const CandidateTestPlanRun = () => {
   const { atId, testPlanVersionId } = useParams();
@@ -63,7 +64,7 @@ const CandidateTestPlanRun = () => {
   const [isFirstTest, setIsFirstTest] = useState(true);
   const [isLastTest, setIsLastTest] = useState(false);
   const [feedbackModalShowing, setFeedbackModalShowing] = useState(false);
-  const [thankYouModalShowing, setThankYouModalShowing] = useState(false);
+  const [confirmationModal, setConfirmationModal] = useState(null);
   const [showInstructions, setShowInstructions] = useState(false);
   const [showBrowserBools, setShowBrowserBools] = useState([]);
   const [showRunHistory, setShowRunHistory] = useState(false);
@@ -151,9 +152,27 @@ const CandidateTestPlanRun = () => {
   const submitApproval = async (status = '') => {
     if (status === 'APPROVED') {
       updateVendorStatus(true);
+      setConfirmationModal(
+        <ApprovedModal
+          handleAction={async () => {
+            setConfirmationModal(null);
+            navigate('/candidate-review');
+          }}
+          githubUrl={generalFeedbackUrl}
+        />
+      );
+    } else {
+      setConfirmationModal(
+        <NotApprovedModal
+          handleAction={async () => {
+            setConfirmationModal(null);
+            navigate('/candidate-review');
+          }}
+          githubUrl={generalFeedbackUrl}
+        />
+      );
     }
     setFeedbackModalShowing(false);
-    setThankYouModalShowing(true);
   };
 
   useEffect(() => {
@@ -631,7 +650,7 @@ const CandidateTestPlanRun = () => {
           </Row>
         </Col>
       </Row>
-      {feedbackModalShowing ? (
+      {feedbackModalShowing && (
         <ProvideFeedbackModal
           at={at}
           show={true}
@@ -654,21 +673,8 @@ const CandidateTestPlanRun = () => {
           handleAction={submitApproval}
           handleHide={() => setFeedbackModalShowing(false)}
         />
-      ) : (
-        <></>
-      )}
-      {thankYouModalShowing ? (
-        <ThankYouModal
-          show={true}
-          handleAction={async () => {
-            setThankYouModalShowing(false);
-            navigate('/candidate-review');
-          }}
-          githubUrl={generalFeedbackUrl}
-        />
-      ) : (
-        <></>
       )}
+      {!!confirmationModal && confirmationModal}
     </Container>
   );
 };