feat: add error modal incase of unsaved changes

This commit covers TNL2-316 & TNL2-317, and
- adds error modal incase of unsaved changes after update API is called. Which include custom Alert to show the modal.
- It also include edge case handling for different cases and also updated the unit tests.
- It also show an alert in case of backend error e.g. 500, 400, 401 etc
- test coverage.

Author: Muhammad Faraz Maqsood

src/CourseTeamManagement/CourseTeamManagementIndexPage.jsx

@@ -1,22 +1,83 @@
+import { useEffect, useState, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import CourseUpdatesErrorsAlert from './CourseUpdatesErrorsAlert';
 import AlertList from '../userMessages/AlertList';
+import UserMessagesContext from '../userMessages/UserMessagesContext';
 import CourseTeamPageUserSearch from '../users/UserPage';
 import messages from './messages';
 
 export default function CourseTeamManagementIndexPage() {
   const location = useLocation();
   const intl = useIntl();
+  const [showModal, setShowModal] = useState(false);
+  const [apiErrors, setApiErrors] = useState('');
+
+  // This is required to keep custom checkbox column's state correct
+  const [isAlertDismissed, setIsAlertDismissed] = useState(false);
+  const { add, clear } = useContext(UserMessagesContext);
+  const [courseUpdateErrors, setCourseUpdateErrors] = useState(
+    {
+      email: '',
+      username: '',
+      success: false,
+      errors: {
+        newlyCheckedWithRoleErrors: [],
+        uncheckedWithRoleErrors: [],
+        roleChangedRowsErrors: [],
+      },
+    },
+  );
+  const hasCourseUpdateErrors = Object.values(courseUpdateErrors.errors).some(arr => arr.length > 0);
+  useEffect(() => {
+    if (apiErrors) {
+      clear('courseTeamManagementApiErrors');
+      apiErrors.error.forEach(error => add(error));
+    }
+  }, [apiErrors]);
+
   return (
-    <div className="container-fluid">
+    <div className="container-fluid course-updates-errors-alert">
       <AlertList topic="general" className="mb-3 mt-5" />
+      {apiErrors && <AlertList topic="courseTeamManagementApiErrors" className="mb-3 mt-5" isDismissed={isAlertDismissed} setIsDismissed={setIsAlertDismissed} />}
+      {hasCourseUpdateErrors && (
+        <CourseUpdatesErrorsAlert
+          errors={courseUpdateErrors.errors}
+          email={courseUpdateErrors.email}
+          username={courseUpdateErrors.username}
+          onDismiss={() => {
+            setCourseUpdateErrors({
+              success: false,
+              errors: {
+                newlyCheckedWithRoleErrors: [],
+                uncheckedWithRoleErrors: [],
+                roleChangedRowsErrors: [],
+              },
+            });
+            setShowModal(false);
+          }}
+          showModal={showModal}
+          setShowModal={setShowModal}
+
+        />
+      )}
       <section className="course-team-management-header">
         <h2 className="font-weight-bold">
           {intl.formatMessage(messages.pageTitle)}
         </h2>
       </section>
-      <CourseTeamPageUserSearch location={location} isOnCourseTeamPage />
+      <CourseTeamPageUserSearch
+        location={location}
+        isOnCourseTeamPage
+        courseUpdateErrors={courseUpdateErrors}
+        setCourseUpdateErrors={setCourseUpdateErrors}
+        showErrorsModal={showModal}
+        apiErrors={apiErrors}
+        setApiErrors={setApiErrors}
+        isAlertDismissed={isAlertDismissed}
+        setIsAlertDismissed={setIsAlertDismissed}
+      />
     </div>
   );
 }

src/CourseTeamManagement/CourseUpdatesErrorsAlert.jsx

@@ -0,0 +1,77 @@
+import { Suspense, useRef } from 'react';
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import Alert from '../userMessages/Alert';
+import CoursesChangesModal from './CoursesChangesModal';
+import messages from './messages';
+
+export default function CourseUpdatesErrorsAlert({
+  errors, email, username, onDismiss, showModal, setShowModal,
+}) {
+  const intl = useIntl();
+  const saveButtonRef = useRef();
+  return (
+    <div className="mb-3 mt-5">
+      <Suspense key="CourseUpdatesErrorsAlert" fallback={null}>
+        <Alert
+          type="danger"
+          dismissible
+          onDismiss={onDismiss}
+        >
+          <span className="d-flex align-items-center">
+            <span>{intl.formatMessage(messages.courseUpdatesErrorsAlertMessage)}</span>{' '}
+            <Button variant="link" onClick={() => setShowModal(true)} className="p-0 ml-1">
+              {intl.formatMessage(messages.courseUpdatesErrorsAlertViewDetailsMessage)}
+            </Button>
+          </span>
+        </Alert>
+      </Suspense>
+      <CoursesChangesModal
+        changedData={errors}
+        isOpen={showModal}
+        onCancel={() => setShowModal(false)}
+        username={username}
+        email={email}
+        positionRef={saveButtonRef}
+        hasError
+      />
+    </div>
+  );
+}
+
+CourseUpdatesErrorsAlert.propTypes = {
+  email: PropTypes.string,
+  username: PropTypes.string,
+  errors: PropTypes.shape({
+    newlyCheckedWithRoleErrors: PropTypes.shape({
+      runId: PropTypes.string,
+      role: PropTypes.string,
+      courseName: PropTypes.string,
+      number: PropTypes.string,
+      courseId: PropTypes.string,
+      error: PropTypes.string,
+    }),
+    uncheckedWithRoleErrors: PropTypes.shape({
+      runId: PropTypes.string,
+      role: PropTypes.string,
+      courseName: PropTypes.string,
+      number: PropTypes.string,
+      courseId: PropTypes.string,
+      error: PropTypes.string,
+    }),
+    roleChangedRowsErrors: PropTypes.shape({
+      runId: PropTypes.string,
+      from: PropTypes.string,
+      to: PropTypes.string,
+      courseName: PropTypes.string,
+      number: PropTypes.string,
+      courseId: PropTypes.string,
+      error: PropTypes.string,
+    }),
+  }),
+  onDismiss: PropTypes.func.isRequired,
+  showModal: PropTypes.bool,
+  setShowModal: PropTypes.func,
+};