feat: basic modal to make a decision, request changes + shared modal CSS

app/components/ModalSharedStyles.tsx

@@ -0,0 +1,20 @@
+import css from 'styled-jsx/css';
+
+export default css`
+  :global(.modal-header h2) {
+    margin-bottom: 0;
+  }
+  :global(.modal-header) {
+    background: #036;
+    color: #fff;
+  }
+  :global(.modal-header button.close) {
+    color: #fff;
+  }
+  :global(.modal-body) {
+    padding: 2rem;
+  }
+  :global(.modal-body > :last-child) {
+    margin-bottom: 0;
+  }
+`;

app/containers/Admin/ApplicationReview/DecisionModal.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {graphql, createFragmentContainer, RelayProp} from 'react-relay';
+import {DecisionModal_applicationRevisionStatus} from '__generated__/DecisionModal_applicationRevisionStatus.graphql';
+import createApplicationRevisionStatusMutation from 'mutations/application/createApplicationRevisionStatusMutation';
+import {CiipApplicationRevisionStatus} from 'createApplicationRevisionStatusMutation.graphql';
+import {Modal, Button} from 'react-bootstrap';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faEnvelope, faCheck, faTimes} from '@fortawesome/free-solid-svg-icons';
+import ModalSharedStyles from 'components/ModalSharedStyles';
+
+interface Props {
+  show: boolean;
+  onHide: () => void;
+  onDecision: () => void;
+  relay: RelayProp;
+  applicationRevisionStatus: DecisionModal_applicationRevisionStatus;
+}
+
+export const DecisionModal: React.FunctionComponent<Props> = ({
+  show,
+  onHide,
+  onDecision,
+  relay,
+  applicationRevisionStatus
+}) => {
+  const {applicationId, versionNumber} = applicationRevisionStatus;
+
+  const saveDecision = async (decision) => {
+    onDecision();
+    const variables = {
+      input: {
+        applicationRevisionStatus: {
+          applicationId,
+          applicationRevisionStatus: decision as CiipApplicationRevisionStatus,
+          versionNumber
+        }
+      }
+    };
+    await createApplicationRevisionStatusMutation(relay.environment, variables);
+  };
+  const makeDecisionContent = (
+    <>
+      <Modal.Body>
+        <p>
+          Once a decision is made or changes are requested, general comments
+          will become visible to the applicant, who will be{' '}
+          <strong>immediately notified of the decision by email</strong>.
+        </p>
+        <p className="d-flex justify-content-center">
+          <Button
+            variant="outline-secondary"
+            size="lg"
+            onClick={() => saveDecision('REQUESTED_CHANGES')}
+          >
+            <FontAwesomeIcon icon={faEnvelope} style={{marginRight: '0.5em'}} />
+            Request Changes
+          </Button>
+        </p>
+      </Modal.Body>
+      <Modal.Footer className="d-flex justify-content-around">
+        <Button
+          variant="success"
+          size="lg"
+          onClick={() => saveDecision('APPROVED')}
+        >
+          <FontAwesomeIcon icon={faCheck} />
+          Approve
+        </Button>
+        <strong>OR</strong>
+        <Button
+          variant="danger"
+          size="lg"
+          onClick={() => saveDecision('REJECTED')}
+        >
+          <FontAwesomeIcon icon={faTimes} />
+          Reject
+        </Button>
+      </Modal.Footer>
+    </>
+  );
+  return (
+    <Modal show={show} centered size="lg" onHide={onHide}>
+      <Modal.Header closeButton>
+        <h2>Make a Decision or Request Changes</h2>
+      </Modal.Header>
+      {makeDecisionContent}
+      <style jsx>{ModalSharedStyles}</style>
+      <style jsx>{`
+        :global(.modal-body) {
+          padding: 2rem 2rem 1rem 2rem;
+        }
+        :global(.btn svg.svg-inline--fa) {
+          margin-right: 0.5em;
+        }
+      `}</style>
+    </Modal>
+  );
+};
+
+export default createFragmentContainer(DecisionModal, {
+  applicationRevisionStatus: graphql`
+    fragment DecisionModal_applicationRevisionStatus on ApplicationRevisionStatus {
+      applicationId
+      versionNumber
+    }
+  `
+});

app/pages/analyst/application-review.tsx

@@ -12,6 +12,7 @@ import getConfig from 'next/config';
 import {INCENTIVE_ANALYST, ADMIN_GROUP} from 'data/group-constants';
 import ApplicationReviewStepSelector from 'containers/Admin/ApplicationReview/ApplicationReviewStepSelector';
 import ReviewSidebar from 'containers/Admin/ApplicationReview/ReviewSidebar';
+import DecisionModal from 'containers/Admin/ApplicationReview/DecisionModal';
 import HelpButton from 'components/helpers/HelpButton';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faArrowUp} from '@fortawesome/free-solid-svg-icons';
@@ -48,6 +49,7 @@ class ApplicationReview extends Component<Props, State> {
             versionNumberInput: $version
           ) {
             applicationRevisionStatus
+            ...DecisionModal_applicationRevisionStatus
             ...ApplicationRevisionStatusContainer_applicationRevisionStatus
           }
           applicationReviewStepsByApplicationId {
@@ -72,14 +74,30 @@ class ApplicationReview extends Component<Props, State> {
       }
     }
   `;
-  state = {isSidebarOpened: false, selectedReviewStepId: null};
+  state = {
+    isSidebarOpened: false,
+    selectedReviewStepId: null,
+    showDecisionModal: false
+  };
 
   constructor(props) {
     super(props);
+    this.openDecisionModal = this.openDecisionModal.bind(this);
     this.closeSidebar = this.closeSidebar.bind(this);
+    this.closeDecisionModal = this.closeDecisionModal.bind(this);
     this.selectReviewStep = this.selectReviewStep.bind(this);
     this.findStepById = this.findStepById.bind(this);
   }
+  openDecisionModal() {
+    this.setState((state) => {
+      return {...state, showDecisionModal: true};
+    });
+  }
+  closeDecisionModal() {
+    this.setState((state) => {
+      return {...state, showDecisionModal: false};
+    });
+  }
   closeSidebar() {
     this.setState((state) => {
       return {
@@ -157,15 +175,13 @@ class ApplicationReview extends Component<Props, State> {
                 query.application.applicationReviewStepsByApplicationId
               }
               decisionOrChangeRequestStatus={applicationRevisionStatus}
-              onDecisionOrChangeRequestAction={() =>
-                console.log('implement me in 2294')
-              }
+              onDecisionOrChangeRequestAction={this.openDecisionModal}
               selectedStep={this.state.selectedReviewStepId}
               onSelectStep={this.selectReviewStep}
               newerDraftExists={!isCurrentVersion}
               changeDecision={
                 isUserAdmin && currentReviewIsFinalized
-                  ? handleChangeDecision
+                  ? this.openDecisionModal
                   : undefined
               }
             />
@@ -228,6 +244,12 @@ class ApplicationReview extends Component<Props, State> {
             />
           )}
           {!this.state.isSidebarOpened && <HelpButton isInternalUser />}
+          <DecisionModal
+            applicationRevisionStatus={query.application.reviewRevisionStatus}
+            show={this.state.showDecisionModal}
+            onDecision={this.closeDecisionModal}
+            onHide={this.closeDecisionModal}
+          />
         </Row>
         <style jsx global>{`
           h1 {

app/tests/unit/pages/analyst/__snapshots__/application-review.test.tsx.snap

@@ -279,6 +279,19 @@ exports[`The application-review page matches the last snapshot (with review side
     <HelpButton
       isInternalUser={true}
     />
+    <Relay(DecisionModal)
+      applicationRevisionStatus={
+        Object {
+          " $fragmentRefs": Object {
+            "ApplicationRevisionStatusContainer_applicationRevisionStatus": true,
+          },
+          "applicationRevisionStatus": "SUBMITTED",
+        }
+      }
+      onDecision={[Function]}
+      onHide={[Function]}
+      show={false}
+    />
   </Row>
   <JSXStyle
     id="2536304384"
@@ -568,6 +581,19 @@ exports[`The application-review page matches the last snapshot (with review side
       isFinalized={false}
       onClose={[Function]}
     />
+    <Relay(DecisionModal)
+      applicationRevisionStatus={
+        Object {
+          " $fragmentRefs": Object {
+            "ApplicationRevisionStatusContainer_applicationRevisionStatus": true,
+          },
+          "applicationRevisionStatus": "SUBMITTED",
+        }
+      }
+      onDecision={[Function]}
+      onHide={[Function]}
+      show={false}
+    />
   </Row>
   <JSXStyle
     id="2536304384"