diff --git a/client/components/CandidateReview/CandidateModals/ThankYouModal/index.jsx b/client/components/CandidateReview/CandidateModals/ApprovedModal/index.jsx similarity index 63% rename from client/components/CandidateReview/CandidateModals/ThankYouModal/index.jsx rename to client/components/CandidateReview/CandidateModals/ApprovedModal/index.jsx index cbe48499f..82264b0c1 100644 --- a/client/components/CandidateReview/CandidateModals/ThankYouModal/index.jsx +++ b/client/components/CandidateReview/CandidateModals/ApprovedModal/index.jsx @@ -4,9 +4,8 @@ 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 ( {}, githubUrl = '#' }) => { closeButton={false} content={ <> -

Your Review has been submitted!

-

Do you have anything else to share?

-

+

+ Your Review has been submitted! +

+

+ Do you have anything else to share? +

+

Open a GitHub issue {' '} @@ -24,7 +27,7 @@ const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => {

} - dialogClassName="thank-you" + dialogClassName="review-confirmation" actions={[ { label: 'Close', @@ -32,10 +35,10 @@ const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => { } ]} title={ -
+

Thank you!

@@ -45,9 +48,9 @@ const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => { ); }; -ThankYouModal.propTypes = { +ApprovedModal.propTypes = { handleAction: PropTypes.func, githubUrl: PropTypes.string }; -export default ThankYouModal; +export default ApprovedModal; diff --git a/client/components/CandidateReview/CandidateModals/NotApprovedModal/index.jsx b/client/components/CandidateReview/CandidateModals/NotApprovedModal/index.jsx new file mode 100644 index 000000000..188120ba3 --- /dev/null +++ b/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 ( + +

Thank you for reviewing

+

+ if you haven’t opened any issues yet, please{' '} + + open an issue describing why this is not approved. + +

+ + } + dialogClassName="review-confirmation" + actions={[ + { + label: 'Close', + onClick: handleAction + } + ]} + title={ +
+ +

Thank you!

+
+ } + /> + ); +}; + +NotApprovedModal.propTypes = { + handleAction: PropTypes.func, + githubUrl: PropTypes.string +}; + +export default NotApprovedModal; diff --git a/client/components/CandidateReview/CandidateModals/ProvideFeedbackModal/index.jsx b/client/components/CandidateReview/CandidateModals/ProvideFeedbackModal/index.jsx index e62e2f4b5..eb3efdf90 100644 --- a/client/components/CandidateReview/CandidateModals/ProvideFeedbackModal/index.jsx +++ b/client/components/CandidateReview/CandidateModals/ProvideFeedbackModal/index.jsx @@ -25,6 +25,7 @@ const ProvideFeedbackModal = ({ show={true} centered={true} cancelButton={false} + useOnHide={true} handleHide={handleHide} content={
diff --git a/client/components/CandidateReview/CandidateModals/ThankYouModal/ThankYouModal.css b/client/components/CandidateReview/CandidateModals/ThankYouModal/ThankYouModal.css deleted file mode 100644 index 5f2cdd0fe..000000000 --- a/client/components/CandidateReview/CandidateModals/ThankYouModal/ThankYouModal.css +++ /dev/null @@ -1,52 +0,0 @@ -.thank-you { - justify-content: center; -} - -.thank-you .modal-content { - align-items: center; - width: 360px; - padding-top: 2em; - padding-bottom: 2em; -} - -.thank-you-check { - font-size: 100px; - margin-right: 0 !important; - margin-bottom: 20px; -} - -.thank-you-title { - text-align: center; -} - -.thank-you-title h1 { - border-bottom: none; - font-size: 1.5em; -} - -.thank-you-content { - font-weight: bold; - text-align: center; -} - -.thank-you-share { - margin-bottom: 0; -} - -.thank-you-issue { - text-align: center; - font-size: 12px; - margin-bottom: 0; -} - -.thank-you .modal-header { - padding-bottom: 0; -} - -.thank-you .modal-footer { - padding-bottom: 30px; -} - -.thank-you .modal-footer .btn { - width: 100px; -} diff --git a/client/components/CandidateReview/CandidateModals/common.css b/client/components/CandidateReview/CandidateModals/common.css index 3a92a1be8..0d67395df 100644 --- a/client/components/CandidateReview/CandidateModals/common.css +++ b/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; +} diff --git a/client/components/CandidateReview/CandidateTestPlanRun/index.jsx b/client/components/CandidateReview/CandidateTestPlanRun/index.jsx index 1e6c6dcbf..15ac03139 100644 --- a/client/components/CandidateReview/CandidateTestPlanRun/index.jsx +++ b/client/components/CandidateReview/CandidateTestPlanRun/index.jsx @@ -24,7 +24,7 @@ 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, { @@ -32,6 +32,7 @@ import createIssueLink, { } 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( + { + setConfirmationModal(null); + navigate('/candidate-review'); + }} + githubUrl={generalFeedbackUrl} + /> + ); + } else { + setConfirmationModal( + { + setConfirmationModal(null); + navigate('/candidate-review'); + }} + githubUrl={generalFeedbackUrl} + /> + ); } setFeedbackModalShowing(false); - setThankYouModalShowing(true); }; useEffect(() => { @@ -631,7 +650,7 @@ const CandidateTestPlanRun = () => { - {feedbackModalShowing ? ( + {feedbackModalShowing && ( { handleAction={submitApproval} handleHide={() => setFeedbackModalShowing(false)} /> - ) : ( - <> - )} - {thankYouModalShowing ? ( - { - setThankYouModalShowing(false); - navigate('/candidate-review'); - }} - githubUrl={generalFeedbackUrl} - /> - ) : ( - <> )} + {!!confirmationModal && confirmationModal} ); }; diff --git a/client/stories/ThankYouModal.stories.jsx b/client/stories/ThankYouModal.stories.jsx deleted file mode 100644 index c6ad4cd77..000000000 --- a/client/stories/ThankYouModal.stories.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import ThankYouModal from '../components/CandidateReview/CandidateModals/ThankYouModal/index.jsx'; - -export default { - component: ThankYouModal, - title: 'ThankYouModal' -}; - -const Template = args => ; - -export const Default = Template.bind({}); -Default.args = { - show: true -};