Skip to content

Commit

Permalink
fix: Vendor review approval modal content edit and close button fix (#…
Browse files Browse the repository at this point in the history
…1206)

* Address #1202 
* Address #1203
  • Loading branch information
stalgiag authored Sep 11, 2024
1 parent c138558 commit 733f446
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 94 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -45,9 +48,9 @@ const ThankYouModal = ({ handleAction = () => {}, githubUrl = '#' }) => {
);
};

ThankYouModal.propTypes = {
ApprovedModal.propTypes = {
handleAction: PropTypes.func,
githubUrl: PropTypes.string
};

export default ThankYouModal;
export default ApprovedModal;
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const ProvideFeedbackModal = ({
show={true}
centered={true}
cancelButton={false}
useOnHide={true}
handleHide={handleHide}
content={
<div className="feedback-content">
Expand Down

This file was deleted.

53 changes: 53 additions & 0 deletions client/components/CandidateReview/CandidateModals/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
42 changes: 24 additions & 18 deletions client/components/CandidateReview/CandidateTestPlanRun/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -631,7 +650,7 @@ const CandidateTestPlanRun = () => {
</Row>
</Col>
</Row>
{feedbackModalShowing ? (
{feedbackModalShowing && (
<ProvideFeedbackModal
at={at}
show={true}
Expand All @@ -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>
);
};
Expand Down
14 changes: 0 additions & 14 deletions client/stories/ThankYouModal.stories.jsx

This file was deleted.

0 comments on commit 733f446

Please sign in to comment.