Candidate test run page (#461)

* thank you modal

* Thank you modal in new dir

* Upgrade storybook

* Setting up stories for ThankYouModal and ProvideFeedbackModal

* Adding ProvideFeedbackModal infra

* ProvideFeedbackModal with Bootstrap Form Controls

* ProvideFeedbackModal labels with icons

* Adding css file for ProvideFeedbackModal

* Remove ThankYouModal from TestRun

* form input group with button selection

* Adding common css and more css for ProvideFeedbackModal

* Button css

* CSS padding changes

* Adding radio change effect

* changing disabled to use states

* CSS

* Centering ThankYou modal

* Addressing feedback

* Addressing feedback

* Screen reader only for h1

* Storybook documentation

* Separating feedback items into own component

* Styling for mobile

* thank you modal

* Thank you modal in new dir

* Upgrade storybook

* Setting up stories for ThankYouModal and ProvideFeedbackModal

* Adding ProvideFeedbackModal infra

* ProvideFeedbackModal with Bootstrap Form Controls

* ProvideFeedbackModal labels with icons

* Adding css file for ProvideFeedbackModal

* Remove ThankYouModal from TestRun

* form input group with button selection

* Adding common css and more css for ProvideFeedbackModal

* Button css

* CSS padding changes

* Adding radio change effect

* changing disabled to use states

* CSS

* Centering ThankYou modal

* Addressing feedback

* Addressing feedback

* Screen reader only for h1

* Storybook documentation

* Adding test instructions to submitted content without styling

* Building out UI

* Test navigation

* handling github issues

* Vendors support and access

* useParams working on main component and storybook

* Recursive function for getting all issues through GitHub API

* add issuesResolver for testPlanReport; add phaseTargetDateResolver for testPlanReport; add migration file to add phaseChangeUpdate column to TestPlanReport

* Add caching around issues response; add testNumber to issue object in resolver

* Mocking github issues

* TestNavigator styling and TestRenderer(s) conditional

* Start to do indicators on feedback items

* Accordions

* Support for adding viewers to a test

* Move from GraphQL to REST based implementation to get repository's issues data

* Update tests

* Rename attribute

* Fix filter logic for issues response

* Fix link

* Address PR feedback; add candidate status change date, recommended status change date and recommended status target date to the database

* Previously viewed

* Fix storybook and target completion date

* Previously viewed badge

* Responsive

* Layout

* Update tests

* Fix basic auth config not being properly passed to GET function

* fixing runnable tests bug

* Feedback section styling

* Set default open for accordions

* Test Results container styling

* Vendor review status support

* Update cache for vendor review status only

* Adding href links to page

* Address test failures

* Updating auth test

* Updating imported tests and populate file

* Lock in aria-at commit for testing environment

* Cleaning up repeated code

* Adding loading and error pages

* Add viewers migration

* Marking last test

* Updating renderer for test instructions

* Removing hardcoded index

* Update css

* Publicize candidate test run pages

* separating vendor roles

* updating feedbacktype to new api

* sync issuesResolver

* Fixing queries to use Finalized results

* viewers performance

* Previously viewed

* Fix previously viewed

* Fix promote vendor status

* Test result pass or fail

* Integrate modals partially

* Styling on Results Accordion, Testing Instructions, and misc

* Fixing test indexing bug

* Github feedback backend

* Revert test renderer

* Test fixes

* Revert client/resources/aria-at-test-io-format.mjs

* Remove story for candidate test run page as it is too data intesive to add value

* Feedback list item styling

* Fixing review status promotion

* Add additional filters for testPlanReportsResolver.js; used filtered testPlanReports for CandidateTestPlanRun page

* Updating modals and visibility of change requests

* Fixing tests

* Revert storybook configs

* Reverting tests and removing dead code

* Adding missing field

* Setting default checked value for ProvideFeedbackModal

* Removing unused files and fixing test

* Fixing next test showing on finish bug

* Adjust review indicators on Candidate Test Queue page

* Update client/components/CandidateTestPlanRun/index.jsx

Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

* Revert feedbackType to IssueFeedbackType

* Removing TODOs in TestPlans component

* Add submit button styling

* Update client width in client/components/common/FeedbackListItem/FeedbackListItem.css

Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

* Update server/resolvers/addViewerResolver.js

Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

* Moving CandidateTestRun component and CandidateModals under CandidateTests tree

* Adjusting margin bottom for lines in issue container

* consistent timezone management between client & server

* Github issue links

* Fix auth

* Adding file AT bug links to specific AT issue trackers

* Update created issue title based on #466 (comment)

* Update Review Status Summary evaluation (feedback/candidate review numbers were getting duplicated across the columns for each AT)

* Add Test Plan Management page (#470)

* Start to test plan management page

* Add new Disclosure Component

* Update Test Plan Management page; update DisclosureComponent

* Add bulk update status resolver for TestPlanReport

* Split Summary Status Row into its own component to maintain focus and row update advantages; updating error message when bulk updating test plan report statuses to make it easier to find what report in the group prevents the update

* Update tests

* Update tests

* add additional test plan report status (RECOMMENDED); change FINALIZED -> CANDIDATE

* Change width at which navigation menu collapses due to more navigation options

* Make updates to reports related pages to account for Recommended Reports being shown

* Adjust vendorReviewStatus being changed in updateStatusResolver based on PR feedback

* Update content copy for Test Management and Reports page

* Update vendor review status being inferred for updateStatusResolver.js

* Remove unnecessary comment

* Temp removal of Test Management

* Remove unused reference

* Adjust logic for overall report approval status when CANDIDATE reports still exist

* Candidate Test Run Page - Disclosure Component and Screen Reader Announcement (#472)

* Using disclosure component and adding accessbility fixes

* Address console warning

* Update announcement when navigating through tests on Candidate Run Page

Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

client/.storybook/main.js

@@ -1,3 +1,4 @@
 module.exports = {
-    addons: ['@storybook/addon-actions/register']
+    stories: ['../stories/*.stories.jsx'],
+    addons: ['@storybook/addon-a11y', '@storybook/addon-controls']
 };

client/.storybook/preview.js

@@ -0,0 +1,4 @@
+import '../../node_modules/bootstrap/dist/css/bootstrap.css';
+import '../../node_modules/@fortawesome/fontawesome-svg-core/styles.css';
+import '!style-loader!css-loader!sass-loader!../scss/custom.scss'; // using inline webpack loaders for scss
+import '../static/index.css';

client/components/App/App.jsx

@@ -20,7 +20,7 @@ const App = () => {
     const [isNavbarExpanded, setIsNavbarExpanded] = useState(false);
 
     const auth = evaluateAuth(data && data.me ? data.me : {});
-    const { username, isSignedIn, /*isAdmin,*/ isVendor } = auth;
+    const { username, isSignedIn, isAdmin, isVendor } = auth;
 
     const signOut = async () => {
         await fetch('/api/auth/signout', { method: 'POST' });
@@ -69,6 +69,20 @@ const App = () => {
                                     Test Reports
                                 </Nav.Link>
                             </li>
+                            {/*{isSignedIn && isAdmin && (*/}
+                            {/*    <li>*/}
+                            {/*        <Nav.Link*/}
+                            {/*            as={Link}*/}
+                            {/*            to="/test-management"*/}
+                            {/*            aria-current={*/}
+                            {/*                location.pathname ===*/}
+                            {/*                '/test-management'*/}
+                            {/*            }*/}
+                            {/*        >*/}
+                            {/*            Test Management*/}
+                            {/*        </Nav.Link>*/}
+                            {/*    </li>*/}
+                            {/*)}*/}
                             <li>
                                 <Nav.Link
                                     as={Link}
@@ -80,20 +94,19 @@ const App = () => {
                                     Test Queue
                                 </Nav.Link>
                             </li>
-                            {/*{isSignedIn && (isAdmin || isVendor) && (*/}
-                            {/*    <li>*/}
-                            {/*        <Nav.Link*/}
-                            {/*            as={Link}*/}
-                            {/*            to="/candidate-tests"*/}
-                            {/*            aria-current={*/}
-                            {/*                location.pathname ===*/}
-                            {/*                '/candidate-tests'*/}
-                            {/*            }*/}
-                            {/*        >*/}
-                            {/*            Candidate Tests*/}
-                            {/*        </Nav.Link>*/}
-                            {/*    </li>*/}
-                            {/*)}*/}
+                            {isSignedIn && (isAdmin || isVendor) && (
+                                <li>
+                                    <Nav.Link
+                                        as={Link}
+                                        to="/candidate-tests"
+                                        aria-current={location.pathname.startsWith(
+                                            '/candidate-test'
+                                        )}
+                                    >
+                                        Candidate Tests
+                                    </Nav.Link>
+                                </li>
+                            )}
                             {isSignedIn && (
                                 <>
                                     {!isVendor && (

client/components/CandidateTests/CandidateModals/ProvideFeedbackModal/ProvideFeedbackModal.css

@@ -0,0 +1,71 @@
+.submit-button {
+    padding: 5px 25px;
+    width: auto;
+}
+
+.close {
+    position: relative;
+    bottom: 15px;
+    left: 10px;
+}
+
+.feedback {
+    min-width: 60%;
+}
+
+.feedback .modal-content {
+    padding-left: 1em;
+    padding-bottom: 1em;
+}
+
+.feedback .modal-header {
+    padding: 30px 30px 10px 40px;
+    text-align: left;
+}
+
+.feedback .modal-body {
+    padding: 0px 30px 0px 40px;
+}
+
+.feedback .modal-footer {
+    padding-right: 30px;
+}
+
+.feedback-bold {
+    font-weight: 600;
+}
+
+.feedback-title {
+    font-size: 24px;
+    font-weight: normal;
+    border-bottom: solid #e5e5e5 1px;
+    margin-bottom: 3px;
+}
+
+.feedback-content h2 {
+    font-size: 16px;
+    padding-bottom: 5px;
+}
+
+.feedback-content p {
+    padding: 10px 0px;
+}
+
+.feedback-text {
+    height: 150px;
+    background-color: #f7f7f7;
+}
+
+.radio-text {
+    padding-bottom: 10px;
+    color: #656565;
+}
+
+.sr-only {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap;
+}

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

@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import BasicModal from '../../../common/BasicModal';
+import PropTypes from 'prop-types';
+import { Form, FormCheck } from 'react-bootstrap';
+import '../common.css';
+import './ProvideFeedbackModal.css';
+import FeedbackListItem from '../../FeedbackListItem';
+
+const ProvideFeedbackModal = ({
+    at = '',
+    handleAction = () => {},
+    handleHide = () => {},
+    feedbackIssues = [],
+    feedbackGithubUrl = '',
+    changesRequestedIssues = [],
+    changesRequestedGithubUrl = '',
+    testPlan = '',
+    username = ''
+}) => {
+    const [selectedRadio, setSelectedRadio] = useState('not-approved-input');
+
+    return (
+        <BasicModal
+            show={true}
+            actionLabel={'Submit Review'}
+            actionButtonClassName={'submit-button'}
+            centered={true}
+            cancelButton={false}
+            handleHide={handleHide}
+            content={
+                <div className="feedback-content">
+                    {changesRequestedIssues.length > 0 && (
+                        <FeedbackListItem
+                            type="changes-requested"
+                            differentAuthors={false}
+                            issues={changesRequestedIssues}
+                            githubUrl={changesRequestedGithubUrl}
+                        ></FeedbackListItem>
+                    )}
+                    {feedbackIssues.length > 0 && (
+                        <FeedbackListItem
+                            type="feedback"
+                            differentAuthors={false}
+                            issues={feedbackIssues}
+                            githubUrl={feedbackGithubUrl}
+                        ></FeedbackListItem>
+                    )}
+
+                    <h2 className="feedback-h2">Finish Your Review</h2>
+                    <Form>
+                        <Form.Group
+                            onChange={e => setSelectedRadio(e.target.id)}
+                        >
+                            <FormCheck>
+                                <FormCheck.Input
+                                    id="not-approved-input"
+                                    name="radio-feedback"
+                                    type="radio"
+                                    defaultChecked={
+                                        selectedRadio === 'not-approved-input'
+                                    }
+                                />
+                                <FormCheck.Label htmlFor="not-approved-input">
+                                    Not Approved Yet
+                                </FormCheck.Label>
+                                <Form.Text className="radio-text">
+                                    Submit your Review without explicit approval
+                                </Form.Text>
+                            </FormCheck>
+                            <FormCheck>
+                                <FormCheck.Input
+                                    name="radio-feedback"
+                                    id="approve-input"
+                                    type="radio"
+                                />
+                                <FormCheck.Label htmlFor="approve-input">
+                                    Approve
+                                </FormCheck.Label>
+                                <Form.Text className="radio-text">
+                                    {' '}
+                                    Submit feedback and approve this Test Plan
+                                </Form.Text>
+                            </FormCheck>
+                        </Form.Group>
+                    </Form>
+                </div>
+            }
+            dialogClassName="feedback"
+            handleAction={() => {
+                handleAction(
+                    selectedRadio === 'approve-input' ? 'APPROVED' : ''
+                );
+            }}
+            title={
+                <>
+                    <p className="sr-only">
+                        Great {username}! You have reviewed every test in the{' '}
+                        {testPlan} with {at}
+                    </p>
+                    <div className="feedback-title" aria-hidden="true">
+                        <span className="feedback-bold">
+                            Great, {username}!
+                        </span>{' '}
+                        You have reviewed every test in the{' '}
+                        <span className="feedback-bold">{testPlan}</span> with{' '}
+                        <span className="feedback-bold">{at}</span>
+                    </div>
+                </>
+            }
+        />
+    );
+};
+
+ProvideFeedbackModal.propTypes = {
+    at: PropTypes.string,
+    handleAction: PropTypes.func,
+    handleHide: PropTypes.func,
+    changesRequestedIssues: PropTypes.array,
+    changesRequestedGithubUrl: PropTypes.string,
+    feedbackIssues: PropTypes.array,
+    feedbackGithubUrl: PropTypes.string,
+    show: PropTypes.bool,
+    testPlan: PropTypes.string,
+    username: PropTypes.string
+};
+
+export default ProvideFeedbackModal;

client/components/CandidateTests/CandidateModals/ThankYouModal/ThankYouModal.css

@@ -0,0 +1,52 @@
+.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;
+}

client/components/CandidateTests/CandidateModals/ThankYouModal/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import BasicModal from '../../../common/BasicModal';
+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 = '#' }) => {
+    return (
+        <BasicModal
+            show={true}
+            actionLabel={'Close'}
+            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">
+                        <a href={githubUrl} target="_blank" rel="noreferrer">
+                            Open a GitHub issue
+                        </a>{' '}
+                        to leave more feedback{' '}
+                    </p>
+                </>
+            }
+            dialogClassName="thank-you"
+            handleAction={handleAction}
+            title={
+                <div className="thank-you-title">
+                    <FontAwesomeIcon
+                        icon={faCheck}
+                        className="thank-you-check"
+                        color="green"
+                    />
+                    <h1>Thank you!</h1>
+                </div>
+            }
+        />
+    );
+};
+
+ThankYouModal.propTypes = {
+    handleAction: PropTypes.func,
+    githubUrl: PropTypes.string
+};
+
+export default ThankYouModal;