feat: improve error message for proctored exam settings (openedx#1300)

Author: zacharis278

plugins/course-apps/proctoring/Settings.jsx

@@ -148,9 +148,9 @@ const ProctoringSettings = ({ intl, onClose }) => {
         setSaveSuccess(true);
         setSaveError(false);
         setSubmissionInProgress(false);
-      }).catch(() => {
+      }).catch((error) => {
         setSaveSuccess(false);
-        setSaveError(true);
+        setSaveError(error);
         setSubmissionInProgress(false);
       });
   }
@@ -460,21 +460,32 @@ const ProctoringSettings = ({ intl, onClose }) => {
   }
 
   function renderSaveError() {
-    return (
-      <Alert
-        variant="danger"
-        data-testid="saveError"
-        tabIndex="-1"
-        ref={saveStatusAlertRef}
-        onClose={() => setSaveError(false)}
-        dismissible
-      >
+    let errorMessage = (
+      <FormattedMessage
+        id="authoring.proctoring.alert.error"
+        defaultMessage={`
+          We encountered a technical error while trying to save proctored exam settings.
+          This might be a temporary issue, so please try again in a few minutes.
+          If the problem persists, please go to the {support_link} for help.
+        `}
+        values={{
+          support_link: (
+            <Alert.Link href={getConfig().SUPPORT_URL}>
+              {intl.formatMessage(messages['authoring.proctoring.support.text'])}
+            </Alert.Link>
+          ),
+        }}
+      />
+    );
+
+    if (saveError?.response.status === 403) {
+      errorMessage = (
         <FormattedMessage
-          id="authoring.examsettings.alert.error"
+          id="authoring.proctoring.alert.error.forbidden"
           defaultMessage={`
-            We encountered a technical error while trying to save proctored exam settings.
-            This might be a temporary issue, so please try again in a few minutes.
-            If the problem persists, please go to the {support_link} for help.
+            You do not have permission to edit proctored exam settings for this course.
+            If you are a course team member and this problem persists,
+            please go to the {support_link} for help.
           `}
           values={{
             support_link: (
@@ -484,6 +495,19 @@ const ProctoringSettings = ({ intl, onClose }) => {
             ),
           }}
         />
+      );
+    }
+
+    return (
+      <Alert
+        variant="danger"
+        data-testid="saveError"
+        tabIndex="-1"
+        ref={saveStatusAlertRef}
+        onClose={() => setSaveError(false)}
+        dismissible
+      >
+        {errorMessage}
       </Alert>
     );
   }

plugins/course-apps/proctoring/Settings.test.jsx

@@ -814,6 +814,24 @@ describe('ProctoredExamSettings', () => {
       });
     });
 
+    test('Exams API permission error', async () => {
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(403, 'error');
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('You do not have permission to edit proctored exam settings for this course'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
     it('Manages focus correctly after different save statuses', async () => {
       // first make a call that will cause a save error
       axiosMock.onPost(

plugins/course-apps/proctoring/messages.js

@@ -1,6 +1,16 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'authoring.proctoring.alert.error': {
+    id: 'authoring.proctoring.alert.error',
+    defaultMessage: 'We encountered a technical error while trying to save proctored exam settings. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings save error.',
+  },
+  'authoring.proctoring.alert.forbidden': {
+    id: 'authoring.proctoring.alert.forbidden',
+    defaultMessage: 'You do not have permission to edit proctored exam settings for this course. If you are a course team member and this problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings permission error.',
+  },
   'authoring.proctoring.no': {
     id: 'authoring.proctoring.no',
     defaultMessage: 'No',