feat: remove ENABLE_UNIT_PAGE_NEW_DESIGN

Author: rpenido

src/course-unit/CourseUnit.test.tsx

@@ -2344,11 +2344,7 @@ describe('<CourseUnit />', () => {
     expect(screen.queryByText(addComponentMessages.title.defaultMessage)).not.toBeInTheDocument();
   });
 
-  it('renders new unit info/settings sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
+  it('renders unit info/settings sidebar', async () => {
     const user = userEvent.setup();
     render(<RootWrapper />);
 
@@ -2373,10 +2369,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('displays the live state in the status bar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     axiosMock
       .onGet(getCourseSectionVerticalApiUrl(blockId))
       .reply(200, {
@@ -2473,11 +2465,6 @@ describe('<CourseUnit />', () => {
   });
 
   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, {
@@ -2497,10 +2484,6 @@ describe('<CourseUnit />', () => {
 
   it('should disable discussions in the settings sidebar', async () => {
     const user = userEvent.setup();
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -2553,11 +2536,6 @@ describe('<CourseUnit />', () => {
 
   it('should update the group access in the unit sidebar', async () => {
     const user = userEvent.setup();
-
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -2633,10 +2611,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('should one group in the visibility field in the unit sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -2688,10 +2662,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('should multiple groups in the visibility field in the unit sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -2746,10 +2716,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('should render never published state in the unit sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -2776,10 +2742,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('displays the scheduled state in the status bar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     axiosMock
       .onGet(getCourseSectionVerticalApiUrl(blockId))
       .reply(200, {
@@ -2796,10 +2758,6 @@ describe('<CourseUnit />', () => {
   });
 
   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, {
@@ -2816,10 +2774,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('displays discussions enabled label in the status bar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     axiosMock
       .onGet(getCourseSectionVerticalApiUrl(blockId))
       .reply(200, {
@@ -2835,10 +2789,6 @@ describe('<CourseUnit />', () => {
   });
 
   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, {
@@ -2882,10 +2832,6 @@ describe('<CourseUnit />', () => {
   });
 
   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, {
@@ -2932,7 +2878,6 @@ describe('<CourseUnit />', () => {
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
     });
 
     render(<RootWrapper />);
@@ -2963,11 +2908,6 @@ describe('<CourseUnit />', () => {
     };
 
     beforeEach(async () => {
-      setConfig({
-        ...getConfig(),
-        ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-      });
-
       // The Meilisearch client-side API uses fetch, not Axios.
       fetchMock.mockReset();
       fetchMock.post(searchEndpoint, (_url, req) => {
@@ -3211,10 +3151,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('not render add sidebar in units from libraries (read-only)', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
     render(<RootWrapper />);
 
     axiosMock
@@ -3247,11 +3183,6 @@ describe('<CourseUnit />', () => {
   });
 
   it('opens the component info sidebar on postMessage event', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
-
     render(<RootWrapper />);
 
     await screen.findByTitle(xblockContainerIframeMessages.xblockIframeTitle.defaultMessage);

src/course-unit/CourseUnit.tsx

@@ -47,7 +47,6 @@ import CourseUnitHeaderActionsSlot from '../plugin-slots/CourseUnitHeaderActions
 import { UnitSidebarProvider } from './unit-sidebar/UnitSidebarContext';
 import { UnitSidebarPagesProvider } from './unit-sidebar/UnitSidebarPagesContext';
 import { UNIT_VISIBILITY_STATES } from './constants';
-import { isUnitPageNewDesignEnabled } from './utils';
 
 const StatusBar = ({ courseUnit }: { courseUnit: any }) => {
   const { selectedPartitionIndex, selectedGroupsLabel } = courseUnit.userPartitionInfo ?? {};
@@ -297,7 +296,6 @@ const CourseUnit = () => {
                   isTitleEditFormOpen={isTitleEditFormOpen}
                   handleTitleEdit={handleTitleEdit}
                   handleTitleEditSubmit={handleTitleEditSubmit}
-                  handleConfigureSubmit={handleConfigureSubmit}
                 />
               )}
               breadcrumbs={(
@@ -316,7 +314,7 @@ const CourseUnit = () => {
               )}
             />
             <div className="unit-header-status-bar h5 mt-2 mb-4 font-weight-normal">
-              {isUnitPageNewDesignEnabled() && isUnitVerticalType && (
+              {isUnitVerticalType && (
                 <StatusBar courseUnit={courseUnit} />
               )}
             </div>

src/course-unit/header-navigations/HeaderNavigations.test.tsx

@@ -79,11 +79,6 @@ describe('<HeaderNavigations />', () => {
   });
 
   it('click Info button should open info sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
-
     const user = userEvent.setup();
     renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
 
@@ -95,11 +90,6 @@ describe('<HeaderNavigations />', () => {
   });
 
   it('click Add button should open add sidebar', async () => {
-    setConfig({
-      ...getConfig(),
-      ENABLE_UNIT_PAGE_NEW_DESIGN: 'true',
-    });
-
     const user = userEvent.setup();
     renderComponent({ unitCategory: COURSE_BLOCK_NAMES.vertical.id });
 

src/course-unit/header-navigations/HeaderNavigations.tsx

@@ -8,7 +8,6 @@ import {
 import { COURSE_BLOCK_NAMES } from '@src/constants';
 
 import messages from './messages';
-import { isUnitPageNewDesignEnabled } from '../utils';
 import { useUnitSidebarContext } from '../unit-sidebar/UnitSidebarContext';
 
 type HeaderNavigationActions = {
@@ -38,35 +37,31 @@ const HeaderNavigations = ({ headerNavigationsActions, category }: HeaderNavigat
 
   const { setCurrentPageKey, readOnly } = useUnitSidebarContext();
 
-  const showNewDesignButtons = isUnitPageNewDesignEnabled();
-
   return (
     <nav className="header-navigations ml-auto flex-shrink-0">
       {/**
        * Action buttons used in the unit page
        */}
       {category === COURSE_BLOCK_NAMES.vertical.id && (
         <Stack direction="horizontal" gap={3}>
-          {showNewDesignButtons && (
-            <>
+          <>
+            <Button
+              variant="outline-primary"
+              iconBefore={InfoOutline}
+              onClick={() => setCurrentPageKey('info', null)}
+            >
+              {intl.formatMessage(messages.infoButton)}
+            </Button>
+            {!readOnly && (
               <Button
                 variant="outline-primary"
-                iconBefore={InfoOutline}
-                onClick={() => setCurrentPageKey('info', null)}
+                iconBefore={Add}
+                onClick={() => setCurrentPageKey('add', null)}
               >
-                {intl.formatMessage(messages.infoButton)}
+                {intl.formatMessage(messages.addButton)}
               </Button>
-              {!readOnly && (
-                <Button
-                  variant="outline-primary"
-                  iconBefore={Add}
-                  onClick={() => setCurrentPageKey('add', null)}
-                >
-                  {intl.formatMessage(messages.addButton)}
-                </Button>
-              )}
-            </>
-          )}
+            )}
+          </>
           <ButtonGroup>
             <Button
               variant="outline-primary"

src/course-unit/header-title/HeaderTitle.tsx

@@ -1,63 +1,37 @@
 import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import {
-  Form, IconButton, useToggle,
+  Form, IconButton,
 } from '@openedx/paragon';
 import {
   EditOutline as EditIcon,
-  Settings as SettingsIcon,
 } from '@openedx/paragon/icons';
 
-import ConfigureModal from '@src/generic/configure-modal/ConfigureModal';
-import { COURSE_BLOCK_NAMES } from '@src/constants';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ConfigureUnitData } from '@src/course-outline/data/types';
-import { getCourseUnitData } from '../data/selectors';
 import { updateQueryPendingStatus } from '../data/slice';
 import messages from './messages';
-import { isUnitPageNewDesignEnabled } from '../utils';
 
 type HeaderTitleProps = {
   unitTitle: string;
   isTitleEditFormOpen: boolean;
   handleTitleEdit: () => void;
   handleTitleEditSubmit: (title: string) => void;
-  handleConfigureSubmit: (variables: ConfigureUnitData & { closeModalFn?: () => void }) => void;
 };
 
 /**
- * Component that renders the title and extra action buttons:
+ * Component that renders the title with a button to edit it.
  * - Edit button: Hidden, It appears when you hover over it.
  *   The title becomes a text form.
- * - Settings button: Shown only in the legacy unit page.
- *   Opens a settings modal.
  */
 const HeaderTitle = ({
   unitTitle,
   isTitleEditFormOpen,
   handleTitleEdit,
   handleTitleEditSubmit,
-  handleConfigureSubmit,
 }: HeaderTitleProps) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const [titleValue, setTitleValue] = useState(unitTitle);
-  const currentItemData = useSelector(getCourseUnitData);
-  const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
-
-  const isXBlockComponent = [
-    COURSE_BLOCK_NAMES.libraryContent.id,
-    COURSE_BLOCK_NAMES.splitTest.id,
-    COURSE_BLOCK_NAMES.component.id,
-  ].includes(currentItemData.category);
-
-  const onConfigureSubmit = (variables: Omit<ConfigureUnitData, 'unitId'>) => {
-    handleConfigureSubmit({
-      ...variables,
-      unitId: currentItemData.id,
-      closeModalFn: closeConfigureModal,
-    });
-  };
 
   useEffect(() => {
     setTitleValue(unitTitle);
@@ -89,24 +63,6 @@ const HeaderTitle = ({
         iconAs={EditIcon}
         onClick={handleTitleEdit}
       />
-      {!isUnitPageNewDesignEnabled() && (
-        <>
-          <IconButton
-            alt={intl.formatMessage(messages.altButtonSettings)}
-            className="flex-shrink-0"
-            iconAs={SettingsIcon}
-            onClick={openConfigureModal}
-          />
-          <ConfigureModal
-            isOpen={isConfigureModalOpen}
-            onClose={closeConfigureModal}
-            onConfigureSubmit={onConfigureSubmit}
-            currentItemData={currentItemData}
-            isSelfPaced={false}
-            isXBlockComponent={isXBlockComponent}
-          />
-        </>
-      )}
     </div>
   );
 };