Merge branch 'master' into chris/FAL-4292-selection-states

Author: ChrisChV

.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_COURSE_OUTLINE_NEW_DESIGN=false
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6

.env.development

@@ -38,6 +38,7 @@ ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
 ENABLE_CERTIFICATE_PAGE=true
 ENABLE_COURSE_IMPORT_IN_LIBRARY=true
+ENABLE_COURSE_OUTLINE_NEW_DESIGN=true
 ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''

.env.test

@@ -34,6 +34,7 @@ ENABLE_ASSETS_PAGE=false
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
 ENABLE_CERTIFICATE_PAGE=true
 ENABLE_COURSE_IMPORT_IN_LIBRARY=true
+ENABLE_COURSE_OUTLINE_NEW_DESIGN=false
 ENABLE_TAGGING_TAXONOMY_PAGES=true
 BBB_LEARN_MORE_URL=''
 INVITE_STUDENTS_EMAIL_TO="[email protected]"

package-lock.json

@@ -63,7 +63,7 @@
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "@openedx/paragon": "^23.5.0",
     "@redux-devtools/extension": "^3.3.0",
-    "@reduxjs/toolkit": "2.11.1",
+    "@reduxjs/toolkit": "2.11.2",
     "@tanstack/react-query": "5.90.12",
     "@tinymce/tinymce-react": "^6.0.0",
     "classnames": "2.5.1",

package.json

@@ -198,15 +198,15 @@ export const CourseLibraries = () => {
         <SubHeader
           title={intl.formatMessage(messages.headingTitle)}
           subtitle={intl.formatMessage(messages.headingSubtitle)}
-          headerActions={!showReviewAlert && outOfSyncCount > 0 && tabKey === CourseLibraryTabs.all && (
+          headerActions={(!showReviewAlert && outOfSyncCount > 0 && tabKey === CourseLibraryTabs.all) ? (
             <Button
               variant="primary"
               onClick={onAlertReview}
               iconBefore={Cached}
             >
               {intl.formatMessage(messages.reviewUpdatesBtn)}
             </Button>
-          )}
+          ) : null}
           hideBorder
         />
         <section className="mb-4">

src/course-libraries/CourseLibraries.tsx

@@ -1,4 +1,4 @@
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import { cloneDeep } from 'lodash';
 import { closestCorners } from '@dnd-kit/core';
 import { logError } from '@edx/frontend-platform/logging';
@@ -17,6 +17,7 @@ import {
   act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
+import { userEvent } from '@testing-library/user-event';
 import {
   getCourseBestPracticesApiUrl,
   getCourseLaunchApiUrl,
@@ -182,12 +183,10 @@ describe('<CourseOutline />', () => {
   });
 
   it('render CourseOutline component correctly', async () => {
-    const { getByText } = renderComponent();
+    renderComponent();
 
-    await waitFor(() => {
-      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
-      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
-    });
+    expect(await screen.findByText('Demonstration Course')).toBeInTheDocument();
+    expect(await screen.findByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
   });
 
   it('logs an error when syncDiscussionsTopics encounters an API failure', async () => {
@@ -2486,4 +2485,20 @@ describe('<CourseOutline />', () => {
     });
     expect(axiosMock.history.delete[0].url).toBe(getDownstreamApiUrl(courseSectionMock.id));
   });
+
+  it('check that the new status bar and expand bar is shown when flag is set', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
+    });
+    renderComponent();
+    const btn = await screen.findByRole('button', { name: 'Collapse all' });
+    expect(btn).toBeInTheDocument();
+    expect(await screen.findByRole('link', { name: 'View live' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Add' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'More actions' })).toBeInTheDocument();
+    const user = userEvent.setup();
+    await user.click(btn);
+    expect(await screen.findByRole('button', { name: 'Expand all' })).toBeInTheDocument();
+  });
 });

src/course-outline/CourseOutline.test.tsx

@@ -1,15 +1,18 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import {
   Container,
   Layout,
   Row,
   TransitionReplace,
   Toast,
   StandardModal,
+  Button,
+  ActionRow,
 } from '@openedx/paragon';
 import { Helmet } from 'react-helmet';
-import { CheckCircle as CheckCircleIcon } from '@openedx/paragon/icons';
+import { CheckCircle as CheckCircleIcon, CloseFullscreen, OpenInFull } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import {
   arrayMove,
@@ -44,7 +47,6 @@ import {
   getTimedExamsFlag,
 } from './data/selectors';
 import { COURSE_BLOCK_NAMES } from './constants';
-import StatusBar from './status-bar/StatusBar';
 import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
 import SectionCard from './section-card/SectionCard';
 import SubsectionCard from './subsection-card/SubsectionCard';
@@ -61,9 +63,12 @@ import {
 } from './drag-helper/utils';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
+import headerMessages from './header-navigations/messages';
 import { getTagsExportFile } from './data/api';
 import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { SidebarProvider } from './common/context/SidebarContext';
+import { StatusBar } from './status-bar/StatusBar';
+import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
 
 const CourseOutline = () => {
   const intl = useIntl();
@@ -142,6 +147,9 @@ const CourseOutline = () => {
     resetScrollState,
   } = useCourseOutline({ courseId });
 
+  // Show the new actions bar if it is enabled in the configuration.
+  // This is a temporary flag until the new design feature is fully implemented.
+  const showNewActionsBar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
   // Use `setToastMessage` to show the toast.
   const [toastMessage, setToastMessage] = useState<string | null>(null);
 
@@ -315,8 +323,9 @@ const CourseOutline = () => {
             ) : null}
           </TransitionReplace>
           <SubHeader
-            title={intl.formatMessage(messages.headingTitle)}
+            title={courseName}
             subtitle={intl.formatMessage(messages.headingSubtitle)}
+            hideBorder
             headerActions={(
               <CourseOutlineHeaderActionsSlot
                 isReIndexShow={isReIndexShow}
@@ -330,6 +339,23 @@ const CourseOutline = () => {
               />
             )}
           />
+          {showNewActionsBar
+            ? (
+              <StatusBar
+                courseId={courseId}
+                isLoading={isLoading}
+                statusBarData={statusBarData}
+              />
+            ) : (
+              <LegacyStatusBar
+                courseId={courseId}
+                isLoading={isLoading}
+                statusBarData={statusBarData}
+                openEnableHighlightsModal={openEnableHighlightsModal}
+                handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+              />
+            )}
+          <hr className="mt-4 mb-0 w-100 text-light-400" />
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
             md={[{ span: 9 }, { span: 3 }]}
@@ -340,14 +366,24 @@ const CourseOutline = () => {
             <Layout.Element>
               <article>
                 <div>
+                  {showNewActionsBar && (
+                  <ActionRow className="mt-3">
+                    {Boolean(sectionsList.length) && (
+                    <Button
+                      variant="outline-primary"
+                      id="expand-collapse-all-button"
+                      data-testid="expand-collapse-all-button"
+                      iconBefore={isSectionsExpanded ? CloseFullscreen : OpenInFull}
+                      onClick={headerNavigationsActions.handleExpandAll}
+                    >
+                      {isSectionsExpanded
+                        ? intl.formatMessage(headerMessages.collapseAllButton)
+                        : intl.formatMessage(headerMessages.expandAllButton)}
+                    </Button>
+                    )}
+                  </ActionRow>
+                  )}
                   <section className="course-outline-section">
-                    <StatusBar
-                      courseId={courseId}
-                      isLoading={isLoading}
-                      statusBarData={statusBarData}
-                      openEnableHighlightsModal={openEnableHighlightsModal}
-                      handleVideoSharingOptionChange={handleVideoSharingOptionChange}
-                    />
                     {!errors?.outlineIndexApi && (
                       <div className="pt-4">
                         {sections.length ? (

src/course-outline/CourseOutline.tsx

@@ -47,7 +47,9 @@ const TitleButton = ({
         onClick={onTitleClick}
         title={title}
       >
-        {prefixIcon}
+        <div className="mr-2">
+          {prefixIcon}
+        </div>
         <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
           {title}
         </span>

src/course-outline/card-header/TitleButton.tsx

@@ -14,19 +14,23 @@ const TitleLink = ({
   namePrefix,
   prefixIcon,
 }: TitleLinkProps) => (
-  <Button
-    as={Link}
-    variant="tertiary"
-    data-testid={`${namePrefix}-card-header__title-link`}
-    className="item-card-header__title-btn align-items-end"
-    to={titleLink}
-    title={title}
-  >
-    {prefixIcon}
-    <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
-      {title}
-    </span>
-  </Button>
+  <>
+    <div className="mr-2">
+      {prefixIcon}
+    </div>
+    <Button
+      as={Link}
+      variant="tertiary"
+      data-testid={`${namePrefix}-card-header__title-link`}
+      className="item-card-header__title-btn align-items-end"
+      to={titleLink}
+      title={title}
+    >
+      <span className={`${namePrefix}-card-title mb-0 truncate-1-line text-left`}>
+        {title}
+      </span>
+    </Button>
+  </>
 );
 
 export default TitleLink;