feat: implement design for new CTM page

src/CourseTeamManagement/CourseTeamManagementIndexPage.jsx

@@ -0,0 +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 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
+        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,
+};