feat: multiple statuses reviewable

src/pages/ExamsPage/__snapshots__/index.test.jsx.snap

@@ -442,7 +442,11 @@ Object {
                               <td
                                 class="pgn__data-table-cell-wrap"
                                 role="cell"
-                              />
+                              >
+                                <div
+                                  class="d-flex text-danger"
+                                />
+                              </td>
                             </tr>
                           </tbody>
                         </table>
@@ -989,7 +993,11 @@ Object {
                             <td
                               class="pgn__data-table-cell-wrap"
                               role="cell"
-                            />
+                            >
+                              <div
+                                class="d-flex text-danger"
+                              />
+                            </td>
                           </tr>
                         </tbody>
                       </table>

src/pages/ExamsPage/components/AttemptList.jsx

@@ -6,13 +6,15 @@ import ResetExamAttemptButton from './ResetExamAttemptButton';
 import ReviewExamAttemptButton from './ReviewExamAttemptButton';
 import messages from '../messages';
 
+// TODO: these should be updated to use intl messages
 const ExamTypes = {
   proctored: 'Proctored',
   timed: 'Timed',
   practice: 'Practice',
   onboarding: 'Onboarding',
 };
 
+// TODO: these should be updated to use intl messages
 const ExamAttemptStatusUILabels = {
   created: 'Created',
   download_software_clicked: 'Download Software Clicked',
@@ -93,6 +95,7 @@ const ReviewButton = (row) => (
     username={row.original.username}
     examName={row.original.exam_name}
     attemptId={row.original.attempt_id}
+    attemptStatus={row.original.status}
     severity={row.original.severity}
     submissionReason={row.original.submission_reason}
   />
@@ -122,7 +125,7 @@ const AttemptList = ({ attempts }) => {
           {
             id: 'review',
             Header: formatMessage(messages.examAttemptsTableHeaderReview),
-            Cell: ({ row }) => (row.original.status === 'second_review_required' ? ReviewButton(row) : null),
+            Cell: ({ row }) => ReviewButton(row),
           },
         ]}
         data={attempts}

src/pages/ExamsPage/components/ExternalReviewDashboard.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { getExamsBaseUrl } from '../data/api';
-
-const getLaunchUrlByExamId = (id) => `${getExamsBaseUrl()}/lti/exam/${id}/instructor_tool`;
+import { getLaunchUrlByExamId } from '../utils';
 
 const ExternalReviewDashboard = ({ exam }) => (
   <div data-testid="review_dash">

src/pages/ExamsPage/components/ResetExamAttemptButton.test.jsx

@@ -31,7 +31,7 @@ describe('ResetExamAttemptButton', () => {
   it('Clicking the No button closes the modal', () => {
     render(resetButton);
     screen.getByText('Reset').click();
-    screen.getByText('No (Cancel)').click();
+    screen.getByText('Cancel').click();
     // Using queryByText here allows the function to throw
     expect(screen.queryByText('Please confirm your choice.')).not.toBeInTheDocument();
   });

src/pages/ExamsPage/components/ReviewExamAttemptButton.jsx

@@ -4,25 +4,72 @@ import {
   Button, useToggle, ModalDialog, ActionRow,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Warning } from '@edx/paragon/icons';
+import { Info, Warning } from '@edx/paragon/icons';
 import * as constants from 'data/constants';
 import { useModifyExamAttempt } from '../hooks';
 import messages from '../messages';
+import { getLaunchUrlByExamId, getMessageLabelForStatus } from '../utils';
+
+const ReviewableStatuses = [
+  constants.ExamAttemptStatus.error,
+  constants.ExamAttemptStatus.rejected,
+  constants.ExamAttemptStatus.second_review_required,
+  constants.ExamAttemptStatus.verified,
+];
+
+const ReviewRequiredStatuses = [
+  constants.ExamAttemptStatus.error,
+  constants.ExamAttemptStatus.second_review_required,
+];
 
 const ReviewExamAttemptButton = ({
-  username, examName, attemptId, severity, submissionReason,
+  username, examName, attemptId, attemptStatus, severity, submissionReason,
 }) => {
   const [isOpen, open, close] = useToggle(false);
   const modifyExamAttempt = useModifyExamAttempt();
   const { formatMessage } = useIntl();
 
-  return (
-    <>
-      <div className="d-flex text-danger">
+  const getButton = (status) => {
+    if (ReviewRequiredStatuses.includes(status)) {
+      return (
         <Button variant="link" size="sm" className="text-danger" onClick={open}>
           <Warning />
-          {formatMessage(messages.ReviewExamAttemptButtonTitle)}
+          {formatMessage(messages.ReviewRequiredButtonTitle)}
         </Button>
+      );
+    }
+    if (ReviewableStatuses.includes(status)) {
+      return (
+        <Button variant="link" size="sm" className="text-info" onClick={open}>
+          <Info />
+          {formatMessage(messages.ReviewableButtonTitle)}
+        </Button>
+      );
+    }
+
+    // attempt is not reviewable, don't render a button
+    return null;
+  };
+
+  const getBodyText = (status) => {
+    if (status === constants.ExamAttemptStatus.error) {
+      return formatMessage(messages.ReviewExamAttemptModalBodyError);
+    }
+    if (ReviewRequiredStatuses.includes(status)) {
+      return formatMessage(messages.ReviewExamAttemptModalBodyReviewRequried);
+    }
+    if (ReviewableStatuses.includes(status)) {
+      return formatMessage(messages.ReviewExamAttemptModalBodyManageReview, {
+        statusLabel: formatMessage(getMessageLabelForStatus(status)),
+      });
+    }
+    return null; // we should not get here
+  };
+
+  return (
+    <>
+      <div className="d-flex text-danger">
+        { getButton(attemptStatus) }
       </div>
       <ModalDialog
         title="my dialog"
@@ -40,36 +87,48 @@ const ReviewExamAttemptButton = ({
         </ModalDialog.Header>
 
         <ModalDialog.Body>
-          <p>{formatMessage(messages.ReviewExamAttemptButtonModalBody)}</p>
+          <p>{getBodyText(attemptStatus)}</p>
           <ul>
             <li>{formatMessage(messages.Username)}{username}</li>
             <li>{formatMessage(messages.ExamName)}{examName}</li>
             <li>{formatMessage(messages.SuspicionLevel)}{severity}</li>
             <li>{formatMessage(messages.SubmissionReason)}{submissionReason}</li>
           </ul>
+          <p>{formatMessage(messages.ReviewExamAttemptModalBodySessionInfo)}</p>
+          <ActionRow>
+            <Button as="a" href={getLaunchUrlByExamId(attemptId)} variant="link">
+              {formatMessage(messages.reviewDashboardTabTitle)}
+            </Button>
+          </ActionRow>
         </ModalDialog.Body>
 
         <ModalDialog.Footer>
           <ActionRow>
             <ModalDialog.CloseButton variant="tertiary">
               {formatMessage(messages.ReviewExamAttemptButtonCancel)}
             </ModalDialog.CloseButton>
-            <Button
-              variant="primary"
-              onClick={e => { // eslint-disable-line no-unused-vars
-                modifyExamAttempt(attemptId, constants.ExamAttemptActions.verify);
-              }}
-            >
-              {formatMessage(messages.ReviewExamAttemptButtonVerify)}
-            </Button>
-            <Button
-              variant="primary"
-              onClick={e => { // eslint-disable-line no-unused-vars
-                modifyExamAttempt(attemptId, constants.ExamAttemptActions.reject);
-              }}
-            >
-              {formatMessage(messages.ReviewExamAttemptButtonReject)}
-            </Button>
+            { attemptStatus !== constants.ExamAttemptStatus.verified
+              && (
+              <Button
+                variant="success"
+                onClick={e => { // eslint-disable-line no-unused-vars
+                  modifyExamAttempt(attemptId, constants.ExamAttemptActions.verify);
+                }}
+              >
+                {formatMessage(messages.ReviewExamAttemptButtonVerify)}
+              </Button>
+              )}
+            { attemptStatus !== constants.ExamAttemptStatus.rejected
+              && (
+              <Button
+                variant="danger"
+                onClick={e => { // eslint-disable-line no-unused-vars
+                  modifyExamAttempt(attemptId, constants.ExamAttemptActions.reject);
+                }}
+              >
+                {formatMessage(messages.ReviewExamAttemptButtonReject)}
+              </Button>
+              )}
           </ActionRow>
         </ModalDialog.Footer>
       </ModalDialog>
@@ -81,8 +140,14 @@ ReviewExamAttemptButton.propTypes = {
   username: PropTypes.string.isRequired,
   examName: PropTypes.string.isRequired,
   attemptId: PropTypes.number.isRequired,
-  severity: PropTypes.number.isRequired,
-  submissionReason: PropTypes.string.isRequired,
+  attemptStatus: PropTypes.string.isRequired,
+  severity: PropTypes.number,
+  submissionReason: PropTypes.string,
+};
+
+ReviewExamAttemptButton.defaultProps = {
+  severity: null,
+  submissionReason: null,
 };
 
 export default ReviewExamAttemptButton;

src/pages/ExamsPage/components/ReviewExamAttemptButton.test.jsx

@@ -14,11 +14,12 @@ const mockMakeNetworkRequest = jest.fn();
 // nomally mocked for unit tests but required for rendering/snapshots
 jest.unmock('react');
 
-const reviewButton = (
+const reviewButton = (status = constants.ExamAttemptStatus.second_review_required) => (
   <ReviewExamAttemptButton
     username="username"
     examName="examName"
     attemptId={0}
+    attemptStatus={status}
     severity={1.0}
     submissionReason="Submitted by user"
   />
@@ -30,34 +31,65 @@ describe('ReviewExamAttemptButton', () => {
     hooks.useModifyExamAttempt.mockReturnValue(mockMakeNetworkRequest);
   });
   it('Test that the ReviewExamAttemptButton matches snapshot', () => {
-    expect(render(reviewButton)).toMatchSnapshot();
+    expect(render(reviewButton())).toMatchSnapshot();
   });
   it('Modal appears upon clicking button', () => {
-    render(reviewButton);
-    screen.getByText('Second Review Required').click();
-    expect(screen.getByText('Please confirm your choice.')).toBeInTheDocument();
-  });
-  it('Clicking the No button closes the modal', () => {
-    render(reviewButton);
-    screen.getByText('Second Review Required').click();
-    screen.getByText('No (Cancel)').click();
+    render(reviewButton());
+    screen.getByText('Review Required').click();
+    expect(screen.getByText('Update review status')).toBeInTheDocument();
+  });
+  it('Clicking the Cancel button closes the modal', () => {
+    render(reviewButton());
+    screen.getByText('Review Required').click();
+    screen.getByText('Cancel').click();
     // Using queryByText here allows the function to throw
-    expect(screen.queryByText('Please confirm your choice.')).not.toBeInTheDocument();
+    expect(screen.queryByText('Update review status')).not.toBeInTheDocument();
   });
   it('Clicking the Verify button calls the modify exam attempt hook', () => {
     const mockModifyExamAttempt = jest.fn();
     jest.spyOn(hooks, 'useModifyExamAttempt').mockImplementation(() => mockModifyExamAttempt);
-    render(reviewButton);
-    screen.getByText('Second Review Required').click();
+    render(reviewButton());
+    screen.getByText('Review Required').click();
     screen.getByText('Verify').click();
     expect(mockModifyExamAttempt).toHaveBeenCalledWith(0, constants.ExamAttemptActions.verify);
   });
   it('Clicking the Reject button calls the modify exam attempt hook', () => {
     const mockModifyExamAttempt = jest.fn();
     jest.spyOn(hooks, 'useModifyExamAttempt').mockImplementation(() => mockModifyExamAttempt);
-    render(reviewButton);
-    screen.getByText('Second Review Required').click();
+    render(reviewButton());
+    screen.getByText('Review Required').click();
     screen.getByText('Reject').click();
     expect(mockModifyExamAttempt).toHaveBeenCalledWith(0, constants.ExamAttemptActions.reject);
   });
+  it('Does not show the modal if the attempt is not reviewable', () => {
+    render(
+      <ReviewExamAttemptButton
+        username="username"
+        examName="examName"
+        attemptId={0}
+        attemptStatus={constants.ExamAttemptStatus.submitted}
+        severity={1.0}
+        submissionReason="Submitted by user"
+      />,
+    );
+    expect(screen.queryByText('Review Required')).not.toBeInTheDocument();
+    expect(screen.queryByText('Manage Review')).not.toBeInTheDocument();
+  });
+  describe('Shows the correct text based on the attempt status', () => {
+    test('review required', () => {
+      render(reviewButton());
+      screen.getByText('Review Required').click();
+      expect(screen.getByText(/attempt requires manual review/i)).toBeInTheDocument();
+    });
+    test('existing review', () => {
+      render(reviewButton(constants.ExamAttemptStatus.verified));
+      screen.getByText('Manage Review').click();
+      expect(screen.getByText(/attempt has a verified review/i)).toBeInTheDocument();
+    });
+    test('error status', () => {
+      render(reviewButton(constants.ExamAttemptStatus.error));
+      screen.getByText('Review Required').click();
+      expect(screen.getByText(/attempt has been terminated due to an error/i)).toBeInTheDocument();
+    });
+  });
 });

src/pages/ExamsPage/components/__snapshots__/AttemptList.test.jsx.snap

@@ -345,7 +345,7 @@ Object {
                                 fill="currentColor"
                               />
                             </svg>
-                            Second Review Required
+                            Review Required
                           </button>
                         </div>
                       </td>
@@ -408,7 +408,11 @@ Object {
                       <td
                         class="pgn__data-table-cell-wrap"
                         role="cell"
-                      />
+                      >
+                        <div
+                          class="d-flex text-danger"
+                        />
+                      </td>
                     </tr>
                   </tbody>
                 </table>
@@ -854,7 +858,7 @@ Object {
                               fill="currentColor"
                             />
                           </svg>
-                          Second Review Required
+                          Review Required
                         </button>
                       </div>
                     </td>
@@ -917,7 +921,11 @@ Object {
                     <td
                       class="pgn__data-table-cell-wrap"
                       role="cell"
-                    />
+                    >
+                      <div
+                        class="d-flex text-danger"
+                      />
+                    </td>
                   </tr>
                 </tbody>
               </table>

src/pages/ExamsPage/components/__snapshots__/ReviewExamAttemptButton.test.jsx.snap

@@ -24,7 +24,7 @@ Object {
               fill="currentColor"
             />
           </svg>
-          Second Review Required
+          Review Required
         </button>
       </div>
     </div>
@@ -49,7 +49,7 @@ Object {
             fill="currentColor"
           />
         </svg>
-        Second Review Required
+        Review Required
       </button>
     </div>
   </div>,