feat: Created Course Team

src/CourseAuthoringRoutes.jsx

@@ -13,6 +13,7 @@ import FilesAndUploads from './files-and-uploads';
 import { AdvancedSettings } from './advanced-settings';
 import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
+import CourseTeam from './course-team/CourseTeam';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -94,10 +95,7 @@ const CourseAuthoringRoutes = ({ courseId }) => {
           <GradingSettings courseId={courseId} />
         </PageRoute>
         <PageRoute path={`${path}/course_team`}>
-          {process.env.ENABLE_NEW_COURSE_TEAM_PAGE === 'true'
-            && (
-              <Placeholder />
-            )}
+          <CourseTeam courseId={courseId} />
         </PageRoute>
         <PageRoute path={`${path}/settings/advanced`}>
           <AdvancedSettings courseId={courseId} />

src/constants.js

@@ -7,3 +7,13 @@ export const STATEFUL_BUTTON_STATES = {
   pending: 'pending',
   default: 'default',
 };
+
+export const USER_ROLES = {
+  admin: 'instructor',
+  staff: 'staff',
+};
+
+export const BADGE_STATES = {
+  danger: 'danger',
+  secondary: 'secondary',
+};

src/course-team/CourseTeam.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Container,
+  Layout,
+} from '@edx/paragon';
+import { Add as IconAdd } from '@edx/paragon/icons';
+
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { USER_ROLES } from '../constants';
+import messages from './messages';
+import CourseTeamSideBar from './course-team-sidebar/CourseTeamSidebar';
+import AddUserForm from './add-user-form/AddUserForm';
+import AddTeamMember from './add-team-member/AddTeamMember';
+import CourseTeamMember from './course-team-member/CourseTeamMember';
+import InfoModal from './info-modal/InfoModal';
+import { useCourseTeam } from './hooks';
+
+const CourseTeam = ({ courseId }) => {
+  const intl = useIntl();
+
+  const {
+    modalType,
+    errorMessage,
+    courseName,
+    currentEmail,
+    courseTeamUsers,
+    currentUserEmail,
+    isLoading,
+    isSingleAdmin,
+    isFormVisible,
+    isQueryPending,
+    isAllowActions,
+    isInfoModalOpen,
+    isOwnershipHint,
+    isShowAddTeamMember,
+    isShowInitialSidebar,
+    isShowUserFilledSidebar,
+    isInternetConnectionAlertFailed,
+    openForm,
+    hideForm,
+    closeInfoModal,
+    handleAddUserSubmit,
+    handleOpenDeleteModal,
+    handleDeleteUserSubmit,
+    handleChangeRoleUserSubmit,
+    handleInternetConnectionFailed,
+  } = useCourseTeam({ intl, courseId });
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  return (
+    <>
+      <Container size="xl" className="m-4">
+        <section className="course-team-container mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <div>
+                  <SubHeader
+                    title={intl.formatMessage(messages.headingTitle)}
+                    subtitle={intl.formatMessage(messages.headingSubtitle)}
+                    headerActions={isAllowActions && (
+                      <Button
+                        variant="outline-success"
+                        iconBefore={IconAdd}
+                        size="sm"
+                        onClick={openForm}
+                        disabled={isFormVisible}
+                      >
+                        {intl.formatMessage(messages.addNewMemberButton)}
+                      </Button>
+                    )}
+                  />
+                  <section className="course-team-section">
+                    <div className="members-container">
+                      {isFormVisible && (
+                        <AddUserForm
+                          onSubmit={handleAddUserSubmit}
+                          onCancel={hideForm}
+                        />
+                      )}
+                      {courseTeamUsers.length ? courseTeamUsers.map(({ username, role, email }) => (
+                        <CourseTeamMember
+                          key={email}
+                          userName={username}
+                          role={role}
+                          email={email}
+                          currentUserEmail={currentUserEmail || ''}
+                          isAllowActions={isAllowActions}
+                          isHideActions={role === USER_ROLES.admin && isSingleAdmin}
+                          onChangeRole={handleChangeRoleUserSubmit}
+                          onDelete={handleOpenDeleteModal}
+                        />
+                      )) : null}
+                      {isShowAddTeamMember && (
+                        <AddTeamMember
+                          onFormOpen={openForm}
+                          isButtonDisable={isFormVisible}
+                        />
+                      )}
+                    </div>
+                    {isShowInitialSidebar && (
+                      <div className="sidebar-container">
+                        <CourseTeamSideBar
+                          courseId={courseId}
+                          isOwnershipHint={isOwnershipHint}
+                          isShowInitialSidebar={isShowInitialSidebar}
+                        />
+                      </div>
+                    )}
+                    <InfoModal
+                      isOpen={isInfoModalOpen}
+                      close={closeInfoModal}
+                      currentEmail={currentEmail}
+                      errorMessage={errorMessage}
+                      courseName={courseName}
+                      modalType={modalType}
+                      onDeleteSubmit={handleDeleteUserSubmit}
+                    />
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              {isShowUserFilledSidebar && (
+                <CourseTeamSideBar
+                  courseId={courseId}
+                  isOwnershipHint={isOwnershipHint}
+                />
+              )}
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={isInternetConnectionAlertFailed}
+          isQueryPending={isQueryPending}
+          onInternetConnectionFailed={handleInternetConnectionFailed}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseTeam.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CourseTeam);

src/course-team/CourseTeam.scss

@@ -0,0 +1,23 @@
+@import "./course-team-sidebar/CourseTeamSidebar";
+@import "./add-user-form/AddUserForm";
+@import "./add-team-member/AddTeamMember";
+@import "./course-team-member/CourseTeamMember";
+
+.course-team-section {
+  .sidebar-container {
+    width: 30%;
+
+    .help-sidebar {
+      margin-top: 0;
+
+      hr {
+        display: none;
+      }
+    }
+  }
+
+  .members-container {
+    flex-grow: 1;
+    padding-top: 1.25rem;
+  }
+}