consistently POST back null for proctoring_escalation_email when no email is specific and omit proctoring_escalation_email when proctoring provider is not proctortrack (#26)

src/proctored-exam-settings/ProctoredExamSettings.jsx

@@ -18,8 +18,6 @@ function ExamSettings(props) {
   const [allowOptingOut, setAllowOptingOut] = useState(false);
   const [proctoringProvider, setProctoringProvider] = useState('');
   const [availableProctoringProviders, setAvailableProctoringProviders] = useState([]);
-  // TODO: we'll probably want to hide this field when proctortrack is not selected; currently,
-  // this causes some errors in the browser console
   const [proctortrackEscalationEmail, setProctortrackEscalationEmail] = useState('');
   const [createZendeskTickets, setCreateZendeskTickets] = useState(false);
   const [courseStartDate, setCourseStartDate] = useState('');
@@ -78,13 +76,17 @@ function ExamSettings(props) {
       proctored_exam_settings: {
         enable_proctored_exams: enableProctoredExams,
         proctoring_provider: proctoringProvider,
-        proctoring_escalation_email: proctortrackEscalationEmail,
       },
     };
     if (isEdxStaff) {
       dataToPostBack.proctored_exam_settings.allow_proctoring_opt_out = allowOptingOut;
       dataToPostBack.proctored_exam_settings.create_zendesk_tickets = createZendeskTickets;
     }
+
+    if (proctoringProvider === 'proctortrack') {
+      dataToPostBack.proctored_exam_settings.proctoring_escalation_email = proctortrackEscalationEmail === '' ? null : proctortrackEscalationEmail;
+    }
+
     setSubmissionInProgress(true);
     StudioApiService.saveProctoredExamSettingsData(props.courseId, dataToPostBack).then(() => {
       setSaveSuccess(true);
@@ -409,7 +411,13 @@ function ExamSettings(props) {
             const isProctortrack = proctoredExamSettings.proctoring_provider === 'proctortrack';
             setShowProctortrackEscalationEmail(isProctortrack);
             setAvailableProctoringProviders(response.data.available_proctoring_providers);
-            setProctortrackEscalationEmail(proctoredExamSettings.proctoring_escalation_email);
+
+            // The backend API may return null for the proctoringEscalationEmail value, which is the default.
+            // In order to keep our email input component controlled, we use the empty string as the default
+            // and perform this conversion during GETs and POSTs.
+            const proctoringEscalationEmail = proctoredExamSettings.proctoring_escalation_email;
+            setProctortrackEscalationEmail(proctoringEscalationEmail === null ? '' : proctoringEscalationEmail);
+
             setCreateZendeskTickets(proctoredExamSettings.create_zendesk_tickets);
           },
         ).catch(

src/proctored-exam-settings/ProctoredExamSettings.test.jsx

@@ -464,7 +464,7 @@ describe('ProctoredExamSettings save settings tests', () => {
     expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
   });
 
-  it('Makes API call successfully', async () => {
+  it('Makes API call successfully with proctoring_escalation_email if proctortrack', async () => {
     const mockedFunctions = mockAPI(mockGetData, { data: 'success' });
     await act(async () => render(<ProctoredExamSettings {...defaultProps} />));
     // Make a change to the provider to proctortrack and set the email
@@ -501,6 +501,35 @@ describe('ProctoredExamSettings save settings tests', () => {
     );
   });
 
+  it('Makes API call successfully without proctoring_escalation_email if not proctortrack', async () => {
+    const mockedFunctions = mockAPI(mockGetData, { data: 'success' });
+    await act(async () => render(<ProctoredExamSettings {...defaultProps} />));
+
+    // make sure we have not selected proctortrack as the proctoring provider
+    expect(screen.getByDisplayValue('mockproc')).toBeDefined();
+
+    const submitButton = screen.getByTestId('submissionButton');
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+    expect(mockedFunctions.mockClientPost).toHaveBeenCalled();
+    expect(mockedFunctions.mockClientPost).toHaveBeenCalledWith(
+      StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          create_zendesk_tickets: true,
+        },
+      },
+    );
+    const errorAlert = screen.getByTestId('saveSuccess');
+    expect(errorAlert.textContent).toEqual(
+      expect.stringContaining('Proctored exam settings saved successfully.'),
+    );
+  });
+
   it('Makes API call generated error', async () => {
     const mockedFunctions = mockAPI(mockGetData, false);
     await act(async () => render(<ProctoredExamSettings {...defaultProps} />));