Remove Legacy UI Waffle Flags [DEPR]

plugins/course-apps/proctoring/Settings.test.jsx

@@ -471,9 +471,8 @@ describe('ProctoredExamSettings', () => {
         screen.getByDisplayValue('mockproc');
       });
       // (1) for studio settings
-      // (2) waffle flags
-      // (3) for course details
-      expect(axiosMock.history.get.length).toBe(3);
+      // (2) for course details
+      expect(axiosMock.history.get.length).toBe(2);
       expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
     });
 

src/CourseAuthoringContext.tsx

@@ -1,4 +1,3 @@
-import { getConfig } from '@edx/frontend-platform';
 import {
   createContext,
   useContext,
@@ -10,7 +9,7 @@ import { useNavigate } from 'react-router';
 import { useToggleWithValue } from '@src/hooks';
 import { type UnitXBlock, type XBlock } from '@src/data/types';
 import { CourseDetailsData } from './data/api';
-import { useCourseDetails, useWaffleFlags } from './data/apiHooks';
+import { useCourseDetails } from './data/apiHooks';
 import { RequestStatusType } from './data/constants';
 import { getOutlineIndexData } from './course-outline/data/selectors';
 
@@ -53,7 +52,6 @@ export const CourseAuthoringProvider = ({
   courseId,
 }: CourseAuthoringProviderProps) => {
   const navigate = useNavigate();
-  const waffleFlags = useWaffleFlags();
   const { data: courseDetails, status: courseDetailStatus } = useCourseDetails(courseId);
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
@@ -65,25 +63,13 @@ export const CourseAuthoringProvider = ({
     closeUnlinkModal,
   ] = useToggleWithValue<ModalState>();
 
-  const getUnitUrl = (locator: string) => {
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
-      // instanbul ignore next
-      return `/course/${courseId}/container/${locator}`;
-    }
-    return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
-  };
+  const getUnitUrl = (locator: string) => `/course/${courseId}/container/${locator}`;
 
   /**
    * Open the unit page for a given locator.
    */
   const openUnitPage = async (locator: string) => {
-    const url = getUnitUrl(locator);
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
-      // instanbul ignore next
-      navigate(url);
-    } else {
-      window.location.assign(url);
-    }
+    navigate(getUnitUrl(locator));
   };
 
   const context = useMemo<CourseAuthoringContextData>(() => ({

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -5,21 +5,18 @@ import { ActionRow, Button, Icon } from '@openedx/paragon';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
-import { useWaffleFlags } from '@src/data/apiHooks';
-
 import messages from './messages';
 
-const getUpdateLinks = (courseId, waffleFlags) => {
+const getUpdateLinks = (courseId) => {
   const baseUrl = getConfig().STUDIO_BASE_URL;
-  const isLegacyOutlineUrl = !waffleFlags.useNewCourseOutlinePage;
 
   return {
     welcomeMessage: `/course/${courseId}/course_info`,
     gradingPolicy: `/course/${courseId}/settings/grading`,
     certificate: `/course/${courseId}/certificates`,
     courseDates: `/course/${courseId}/settings/details/#schedule`,
     proctoringEmail: `${baseUrl}/pages-and-resources/proctoring/settings`,
-    outline: isLegacyOutlineUrl ? `${baseUrl}/course/${courseId}` : `/course/${courseId}`,
+    outline: `/course/${courseId}`,
   };
 };
 
@@ -29,8 +26,7 @@ const ChecklistItemBody = ({
   isCompleted,
 }) => {
   const intl = useIntl();
-  const waffleFlags = useWaffleFlags(courseId);
-  const updateLinks = getUpdateLinks(courseId, waffleFlags);
+  const updateLinks = getUpdateLinks(courseId);
 
   return (
     <ActionRow>

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -3,20 +3,14 @@ import { FormattedMessage, FormattedNumber } from '@edx/frontend-platform/i18n';
 import { Icon } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 import { ModeComment } from '@openedx/paragon/icons';
-import { getConfig } from '@edx/frontend-platform';
-import { useWaffleFlags } from '../../data/apiHooks';
 import messages from './messages';
 
 const ChecklistItemComment = ({
   courseId,
   checkId,
   data,
 }) => {
-  const waffleFlags = useWaffleFlags(courseId);
-
-  const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
-    ? `/course/${courseId}#${assignmentId}` :
-    `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);
+  const getPathToCourseOutlinePage = (assignmentId) => `/course/${courseId}#${assignmentId}`;
 
   const commentWrapper = (comment) => (
     <div className="row m-0 mt-3 pt-3 border-top align-items-center" data-identifier="comment">

src/course-checklist/ChecklistSection/ChecklistSection.test.jsx

@@ -39,9 +39,7 @@ describe('ChecklistSection', () => {
     const { axiosMock } = initializeMocks();
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, {
-        useNewCourseOutlinePage: true,
-      });
+      .reply(200, {});
   });
 
   it('a heading using the dataHeading prop', () => {

src/course-unit/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,5 +1,4 @@
 import userEvent from '@testing-library/user-event';
-import { getConfig } from '@edx/frontend-platform';
 import {
   initializeMocks,
   waitFor,
@@ -54,7 +53,7 @@ describe('<Breadcrumbs />', () => {
     await executeThunk(fetchCourseSectionVerticalData(courseId), reduxStore.dispatch);
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, { useNewCourseOutlinePage: true });
+      .reply(200, {});
   });
 
   it('render Breadcrumbs component correctly', async () => {
@@ -150,24 +149,4 @@ describe('<Breadcrumbs />', () => {
     await user.click(dropdownItem);
     expect(dropdownItem).toHaveAttribute('href', url);
   });
-
-  it('falls back to window.location.href when the waffle flag is disabled', async () => {
-    const user = userEvent.setup();
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { ancestor_xblocks: [{ children: [{ display_name, url }] }] } = courseSectionVerticalMock;
-    axiosMock
-      .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, { useNewCourseOutlinePage: false });
-
-    const { getByText, getByRole } = renderComponent();
-
-    const dropdownBtn = getByText(breadcrumbsExpected.section.displayName);
-    await user.click(dropdownBtn);
-
-    const dropdownItem = getByRole('link', { name: display_name });
-    // We need waitFor here because the waffle flag defaults to true but asynchronously loads false from our axiosMock
-    await waitFor(() => {
-      expect(dropdownItem).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${url}`);
-    });
-  });
 });

src/course-unit/breadcrumbs/Breadcrumbs.tsx

@@ -5,31 +5,21 @@ import {
   ArrowDropDown as ArrowDropDownIcon,
   ChevronRight as ChevronRightIcon,
 } from '@openedx/paragon/icons';
-import { getConfig } from '@edx/frontend-platform';
-
-import { useWaffleFlags } from '../../data/apiHooks';
 import { getCourseSectionVertical } from '../data/selectors';
 import { adoptCourseSectionUrl, subsectionFirstUnitEditUrl } from '../utils';
 
 const Breadcrumbs = ({ courseId, parentUnitId }: { courseId: string; parentUnitId: string; }) => {
   const { ancestorXblocks = [] } = useSelector(getCourseSectionVertical);
-  const waffleFlags = useWaffleFlags(courseId);
-
-  const getPathToCourseOutlinePage = (url) => (waffleFlags.useNewCourseOutlinePage
-    ? url :
-    `${getConfig().STUDIO_BASE_URL}${url}`);
 
-  const getPathToCourseUnitPage = (url) => (waffleFlags.useNewUnitPage
-    ? adoptCourseSectionUrl({ url, courseId, parentUnitId })
-    : `${getConfig().STUDIO_BASE_URL}${url}`);
+  const getPathToCourseUnitPage = (url) => adoptCourseSectionUrl({ url, courseId, parentUnitId });
 
   // based on the level of breadcrumbs the url will differ
   // at the subsection level it should navigate to the first unit if available
   // if no unit then navigate to the subsection outline
   function getPathToCoursePage(index, url, usageKey: string) {
     let navUrl: string;
     if (index === 0) {
-      navUrl = getPathToCourseOutlinePage(url);
+      navUrl = url;
     } else if (index === 1) {
       navUrl = subsectionFirstUnitEditUrl({ courseId, subsectionId: usageKey });
     } else {

src/custom-pages/CustomPages.test.tsx

@@ -61,9 +61,7 @@ describe('CustomPages', () => {
     axiosMock = mocks.axiosMock;
     axiosMock
       .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, {
-        useNewCourseOutlinePage: true,
-      });
+      .reply(200, {});
   });
   it('should ', async () => {
     renderComponent();

src/custom-pages/CustomPages.tsx

@@ -28,7 +28,6 @@ import DraggableList, { SortableItem } from '@src/generic/DraggableList';
 import ErrorAlert from '@src/editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { RequestStatus } from '@src/data/constants';
 import { useModels } from '@src/generic/model-store';
-import { useWaffleFlags } from '@src/data/apiHooks';
 import getPageHeadTitle from '@src/generic/utils';
 import { getPagePath } from '@src/utils';
 import { DeprecatedReduxState } from '@src/store';
@@ -70,8 +69,6 @@ const CustomPages = () => {
   const deletePageStatus = useSelector((state: DeprecatedReduxState) => state.customPages.deletingStatus);
   const savingStatus = useSelector(getSavingStatus);
   const loadingStatus = useSelector(getLoadingStatus);
-  const waffleFlags = useWaffleFlags(courseId);
-
   const pages = useModels('customPages', customPagesIds);
 
   const handleAddPage = () => {
@@ -128,9 +125,7 @@ const CustomPages = () => {
             links={[
               {
                 label: 'Content',
-                to: waffleFlags.useNewCourseOutlinePage
-                  ? `/course/${courseId}`
-                  : `${config.STUDIO_BASE_URL}/course/${courseId}`,
+                to: `/course/${courseId}`,
               },
               { label: 'Pages and Resources', to: getPagePath(courseId, 'true', 'tabs') },
             ]}

src/data/api.ts

@@ -79,16 +79,7 @@ export const waffleFlagDefaults = {
   enableCourseOptimizer: false,
   enableNotifications: false,
   enableCourseOptimizerCheckPrevRunLinks: false,
-  useNewHomePage: true,
-  useNewCustomPages: true,
-  useNewUpdatesPage: true,
-  useNewImportPage: false,
-  useNewExportPage: true,
-  useNewFilesUploadsPage: true,
   useNewVideoUploadsPage: true,
-  useNewCourseOutlinePage: true,
-  useNewUnitPage: false,
-  useNewTextbooksPage: true,
   useNewPdfEditor: true,
   useReactMarkdownEditor: true,
   useVideoGalleryFlow: false,

src/data/apiHooks.mock.ts

@@ -7,7 +7,7 @@ import * as apiHooks from './apiHooks';
  * loading; if you need more realistic handling, use:
  *   axiosMock
  *    .onGet(getApiWaffleFlagsUrl(courseId))
- *    .reply(200, { useNewCourseOutlinePage: true }); // etc
+ *    .reply(200, { enableCourseOptimizer: true }); // etc
  */
 export function mockWaffleFlags(overrides: Partial<Record<WaffleFlagName, boolean>> = {}) {
   return jest.spyOn(apiHooks, 'useWaffleFlags').mockImplementation(() => ({

src/data/apiHooks.test.tsx

@@ -15,7 +15,7 @@ const FlagComponent = ({ courseId }: { courseId?: string; }) => {
     <ul>
       <li aria-label="isLoading">{waffleFlags.isLoading ? 'loading' : 'false'}</li>
       <li aria-label="isError">{waffleFlags.isError ? 'error' : 'false'}</li>
-      <li aria-label="useNewCourseOutlinePage">{waffleFlags.useNewCourseOutlinePage ? 'enabled' : 'disabled'}</li>
+      <li aria-label="useReactMarkdownEditor">{waffleFlags.useReactMarkdownEditor ? 'enabled' : 'disabled'}</li>
     </ul>
   );
 };
@@ -34,17 +34,17 @@ describe('useWaffleFlags', () => {
     expect(await screen.findByLabelText('isLoading')).toHaveTextContent('loading');
     expect(await screen.findByLabelText('isError')).toHaveTextContent('false');
     // The default should be enabled, even before we hear back from the server:
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('enabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('enabled');
 
     // Then, the server responds with a new value:
-    resolveResponse([200, { useNewCourseOutlinePage: false }]);
+    resolveResponse([200, { useReactMarkdownEditor: false }]);
 
     // Now, we're no longer loading and we have the new value:
     await waitFor(async () => {
       expect(await screen.findByLabelText('isLoading')).toHaveTextContent('false');
     });
     expect(await screen.findByLabelText('isError')).toHaveTextContent('false');
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('disabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('disabled');
   });
 
   it('uses the default values if there\'s an error', async () => {
@@ -60,7 +60,7 @@ describe('useWaffleFlags', () => {
     expect(await screen.findByLabelText('isLoading')).toHaveTextContent('loading');
     expect(await screen.findByLabelText('isError')).toHaveTextContent('false');
     // The default should be enabled, even before we hear back from the server:
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('enabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('enabled');
 
     // Then, the server responds with an error
     resolveResponse([500, {}]);
@@ -70,14 +70,14 @@ describe('useWaffleFlags', () => {
       expect(await screen.findByLabelText('isLoading')).toHaveTextContent('false');
     });
     expect(await screen.findByLabelText('isError')).toHaveTextContent('error');
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('enabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('enabled');
   });
 
   it('uses the global flag values while loading the course-specific flags', async () => {
     const { axiosMock } = initializeMocks();
     const courseId = 'course-v1:A+b+C';
     // Set the global flag OFF:
-    axiosMock.onGet(getApiWaffleFlagsUrl()).reply(200, { useNewCourseOutlinePage: false });
+    axiosMock.onGet(getApiWaffleFlagsUrl()).reply(200, { useReactMarkdownEditor: false });
     // Control when we respond with the course-specific flag value:
     let resolveResponse;
     const promise = new Promise<[number, unknown]>(resolve => {
@@ -89,7 +89,7 @@ describe('useWaffleFlags', () => {
     render(<FlagComponent />);
     await waitFor(async () => {
       // Once it loads the flags from the server, the global 'false' value will override the default 'true':
-      expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('disabled');
+      expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('disabled');
     });
 
     // Now check the course-specific flag:
@@ -99,14 +99,14 @@ describe('useWaffleFlags', () => {
     // Now, the course-specific value is loading but in the meantime we use the global default:
     expect(await screen.findByLabelText('isLoading')).toHaveTextContent('loading');
     expect(await screen.findByLabelText('isError')).toHaveTextContent('false');
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('disabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('disabled');
 
     // Now the server responds: the course-specific flag is ON:
-    resolveResponse([200, { useNewCourseOutlinePage: true }]);
+    resolveResponse([200, { useReactMarkdownEditor: true }]);
     await waitFor(async () => {
       expect(await screen.findByLabelText('isLoading')).toHaveTextContent('false');
     });
     expect(await screen.findByLabelText('isError')).toHaveTextContent('false');
-    expect(await screen.findByLabelText('useNewCourseOutlinePage')).toHaveTextContent('enabled');
+    expect(await screen.findByLabelText('useReactMarkdownEditor')).toHaveTextContent('enabled');
   });
 });

src/header/Header.tsx

@@ -3,7 +3,6 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { type Container, useToggle } from '@openedx/paragon';
 
-import { useWaffleFlags } from '../data/apiHooks';
 import { SearchModal } from '../search-modal';
 import {
   useContentMenuItems,
@@ -38,11 +37,9 @@ const Header = ({
   readOnly = false,
 }: HeaderProps) => {
   const intl = useIntl();
-  const waffleFlags = useWaffleFlags();
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 
-  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
 
   const contentMenuItems = useContentMenuItems(contextId);
@@ -90,7 +87,7 @@ const Header = ({
     if (isLibrary) {
       return `/library/${contextId}`;
     }
-    return waffleFlags.useNewCourseOutlinePage ? `/course/${contextId}` : `${studioBaseUrl}/course/${contextId}`;
+    return `/course/${contextId}`;
   };
 
   return (
@@ -104,7 +101,8 @@ const Header = ({
         outlineLink={getOutlineLink()}
         searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
         containerProps={containerProps}
-        isNewHomePage={waffleFlags.useNewHomePage}
+        // TODO: remove isNewHomePage prop once StudioHeader drops support for it (https://github.com/openedx/frontend-app-authoring/issues/3086)
+        isNewHomePage={true}
       />
       {meiliSearchEnabled && (
         <SearchModal