feat: New header in course unit page [FC-0114]

.env

@@ -37,6 +37,7 @@ ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 ENABLE_CERTIFICATE_PAGE=true
 ENABLE_COURSE_IMPORT_IN_LIBRARY=false
+ENABLE_UNIT_PAGE_NEW_DESIGN=false
 ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''

.env.development

@@ -41,6 +41,7 @@ ENABLE_COURSE_IMPORT_IN_LIBRARY=true
 ENABLE_COURSE_OUTLINE_NEW_DESIGN=true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
 ENABLE_TAGGING_TAXONOMY_PAGES=true
+ENABLE_UNIT_PAGE_NEW_DESIGN=true
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6

.env.test

@@ -36,6 +36,7 @@ ENABLE_CERTIFICATE_PAGE=true
 ENABLE_COURSE_IMPORT_IN_LIBRARY=true
 ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
 ENABLE_TAGGING_TAXONOMY_PAGES=true
+ENABLE_UNIT_PAGE_NEW_DESIGN=true
 BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_CHECKLIST_QUALITY=true

src/course-unit/CourseUnit.scss

@@ -9,8 +9,24 @@
 
 .course-unit {
   min-width: 900px;
+
+  .sub-header {
+    // To clean the blank space in the bottom of the sub header
+    margin-bottom: -35px;
+  }
 }
 
 .course-unit__alert {
   margin-bottom: 1.75rem;
 }
+
+.unit-header-status-bar {
+  .draft-badge {
+   background-color: #B4610E; 
+   color: white;
+  }
+
+  .badge-label {
+    margin-top: 2px;
+  }
+}

src/course-unit/CourseUnit.test.jsx

@@ -2346,4 +2346,148 @@ describe('<CourseUnit />', () => {
     // Does not render the "Add Components" section
     expect(screen.queryByText(addComponentMessages.title.defaultMessage)).not.toBeInTheDocument();
   });
+
+  it('displays the live state in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          currently_visible_to_students: true,
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Live')).toBeInTheDocument();
+  });
+
+  it('displays the staff only state in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          currently_visible_to_students: false,
+          visibility_state: 'staff_only',
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Staff Only')).toBeInTheDocument();
+  });
+
+  it('displays the scheduled state in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          currently_visible_to_students: false,
+          published: true,
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Scheduled')).toBeInTheDocument();
+  });
+
+  it('displays the draft changes state in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          published: true,
+          has_changes: true,
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Unpublished changes')).toBeInTheDocument();
+  });
+
+  it('displays discussions enabled label in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          discussion_enabled: true,
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Discussions Enabled')).toBeInTheDocument();
+  });
+
+  it('displays group access with one group in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          user_partition_info: {
+            ...courseSectionVerticalMock.xblock_info.user_partition_info,
+            selected_partition_index: 1,
+            selected_groups_label: 'Visibility group 1',
+          },
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Access: Visibility group 1')).toBeInTheDocument();
+  });
+
+  it('displays group access with multiple groups in the status bar', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
+    });
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        xblock_info: {
+          ...courseSectionVerticalMock.xblock_info,
+          user_partition_info: {
+            ...courseSectionVerticalMock.xblock_info.user_partition_info,
+            selected_partition_index: 1,
+            selected_groups_label: 'Visibility group 1, Visibility group 2, Visibility group 3',
+          },
+        },
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    render(<RootWrapper />);
+    expect(await screen.findByText('Access: 3 Groups')).toBeInTheDocument();
+  });
 });