feat: gate review dashboard button behind selected exam (#20)

* feat: gate review dashboard button behind selected exam

* chore: lint

* test: revise reducer tests b/c default is null now

* chore: lint

* test: added test conditions for new gate

- Also fixed message formatting

* chore: fix test names

src/pages/ExamsPage/components/ExternalReviewDashboard.jsx

@@ -16,12 +16,16 @@ const ExternalReviewDashboard = ({ exam }) => {
   return (
     <div data-testid="review_dash">
       <div style={{ padding: 10 }}>
-        {!ltiToolEmbed && exam && (
-          <Button as="a" title="lti_link" target="_blank" href={getLaunchUrlByExamId(exam.id)}>
-            {formatMessage(messages.ReviewDashboardOpenLTITool)}
-            <Launch />
-          </Button>
-        )}
+        {
+          // If an exam is selected, show the button to open the external review dashboard,
+          // otherwise prompt the user to select an exam.
+          (!ltiToolEmbed && exam) ? (
+            <Button as="a" title="lti_link" target="_blank" href={getLaunchUrlByExamId(exam.id)}>
+              {formatMessage(messages.ReviewDashboardOpenLTITool, { exam_name: exam.name })}
+              <Launch />
+            </Button>
+          ) : formatMessage(messages.ReviewDashboardPleaseSelectExam)
+        }
       </div>
       {ltiToolEmbed && exam && <iframe title="lti_tool" src={getLaunchUrlByExamId(exam.id)} width="100%" height="1100" style={{ border: 'none' }} />}
     </div>
@@ -31,6 +35,7 @@ const ExternalReviewDashboard = ({ exam }) => {
 ExternalReviewDashboard.propTypes = {
   exam: PropTypes.shape({
     id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
   }),
 };
 

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

@@ -15,13 +15,17 @@ const testExam = {
 };
 
 describe('ExternalReviewDashboard', () => {
-  it('does not include iframe if no exam provided', () => {
+  it('does not include button to open review dashboard if no exam provided', () => {
     render(<ExternalReviewDashboard exam={null} />);
     expect(screen.queryByTitle('lti_link')).not.toBeInTheDocument();
+    expect(screen.queryByText('Open the Review Dashboard for Test Proctored Exam')).not.toBeInTheDocument();
+    expect(screen.queryByText('Please select an exam from the dropdown above.')).toBeInTheDocument();
   });
-  it('includes an iframe with the correct url for the current exam', () => {
+  it('includes button to open review dashboard with the correct url for the current exam', () => {
     render(<ExternalReviewDashboard exam={testExam} />);
     expect(screen.getByTitle('lti_link')).toHaveAttribute('href', 'http://test.org/lti/exam/3/instructor_tool');
+    expect(screen.queryByText('Open the Review Dashboard for Test Proctored Exam')).toBeInTheDocument();
+    expect(screen.queryByText('Please select an exam from the dropdown above.')).not.toBeInTheDocument();
   });
   // todo: add back after embed vs new tab is a configurable option.
   // it('includes an iframe with the correct url for the current exam', () => {

src/pages/ExamsPage/data/reducer.js

@@ -3,7 +3,7 @@ import * as constants from 'data/constants';
 
 export const initialState = {
   courseId: null,
-  currentExamIndex: 0,
+  currentExamIndex: null,
   examsList: [],
   attemptsList: [],
 };
@@ -20,6 +20,14 @@ const getStatusFromAction = (action, status) => {
   }
 };
 
+const getCurrentExamIndex = (examsList, examId) => {
+  const index = examsList.findIndex(exam => exam.id === examId.payload);
+  if (index > -1) {
+    return index;
+  }
+  return null;
+};
+
 const slice = createSlice({
   name: 'exams',
   initialState,
@@ -79,7 +87,7 @@ const slice = createSlice({
     }),
     setCurrentExam: (state, examId) => ({
       ...state,
-      currentExamIndex: Math.max(0, state.examsList.findIndex(exam => exam.id === examId.payload)),
+      currentExamIndex: getCurrentExamIndex(state.examsList, examId),
     }),
   },
 });

src/pages/ExamsPage/data/reducer.test.js

@@ -28,7 +28,7 @@ describe('ExamsPage reducer', () => {
         };
         expect(reducer(initialState, action)).toEqual({
           courseId: null,
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [
             {
               id: 1,
@@ -74,7 +74,7 @@ describe('ExamsPage reducer', () => {
         };
         expect(reducer(initialState, action)).toEqual({
           courseId: null,
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -104,7 +104,7 @@ describe('ExamsPage reducer', () => {
     describe('deleteExamAttempt', () => {
       it('deletes the expected attempt from attemptList', () => {
         const state = {
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -134,7 +134,7 @@ describe('ExamsPage reducer', () => {
           payload: 0,
         };
         expect(reducer(state, action)).toEqual({
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -154,7 +154,7 @@ describe('ExamsPage reducer', () => {
     describe('modifyExamAttemptStatus', () => {
       it('changes status of one attempt to verified when passed verify action', () => {
         const state = {
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -187,7 +187,7 @@ describe('ExamsPage reducer', () => {
           },
         };
         expect(reducer(state, action)).toEqual({
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -215,7 +215,7 @@ describe('ExamsPage reducer', () => {
       });
       it('changes status of one attempt to rejected when passed reject action', () => {
         const state = {
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -248,7 +248,7 @@ describe('ExamsPage reducer', () => {
           },
         };
         expect(reducer(state, action)).toEqual({
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [
             {
@@ -305,13 +305,13 @@ describe('ExamsPage reducer', () => {
           attemptsList: state.attemptsList,
         });
       });
-      it('sets currentExamIndex to 0 if exam id is not found', () => {
+      it('sets currentExamIndex to null if exam id is not found', () => {
         const action = {
           type: 'exams/setCurrentExam',
           payload: 1,
         };
         expect(reducer(state, action)).toEqual({
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: state.examsList,
           attemptsList: state.attemptsList,
         });
@@ -324,7 +324,7 @@ describe('ExamsPage reducer', () => {
           payload: 'course-v1:edX+Test+Test',
         };
         expect(reducer(initialState, action)).toEqual({
-          currentExamIndex: 0,
+          currentExamIndex: null,
           examsList: [],
           attemptsList: [],
           courseId: 'course-v1:edX+Test+Test',

src/pages/ExamsPage/messages.js

@@ -233,9 +233,15 @@ const messages = defineMessages({
 
   ReviewDashboardOpenLTITool: {
     id: 'ExternalReviewDashboard.open_lti_tool',
-    defaultMessage: 'View resource in a new window',
+    defaultMessage: 'Open the Review Dashboard for {exam_name}',
     description: 'Text for button to open instructor LTI tool in a new window',
   },
+
+  ReviewDashboardPleaseSelectExam: {
+    id: 'ExternalReviewDashboard.please_select_exam',
+    defaultMessage: 'Please select an exam from the dropdown above.',
+    description: 'A prompt to select an exam before being able to open the external review dashboard.',
+  },
 });
 
 export default messages;