refactor: some refactoring

src/CourseAuthoringPage.jsx

@@ -18,8 +18,6 @@ import Loading from './generic/Loading';
 
 const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
-  const STORE = useSelector(state => state);
-  console.log('STORE', STORE);
 
   useEffect(() => {
     dispatch(fetchCourseDetail(courseId));

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -10,6 +10,7 @@ import {
 import { useSelector } from 'react-redux';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 
+import { getWaffleFlags } from '../../data/selectors';
 import messages from './messages';
 
 const ChecklistItemBody = ({
@@ -20,7 +21,7 @@ const ChecklistItemBody = ({
   // injected
   intl,
 }) => {
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
   const navigate = useNavigate();
 
   const handleClick = (e, url) => {

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

@@ -23,53 +23,36 @@ const defaultProps = {
   checkId: 'welcomeMessage',
   isCompleted: false,
   updateLink: 'https://example.com/update',
-  intl: {
-    formatMessage: jest.fn(({ defaultMessage }) => defaultMessage),
-  },
 };
 
-const waffleFlags = {
-  ENABLE_NEW_COURSE_UPDATES_PAGE: false,
+const renderComponent = (props = {}, mockWaffleFlags = { useNewUpdatesPage: false }) => {
+  useSelector.mockReturnValue(mockWaffleFlags);
+  return render(
+    <IntlProvider locale="en">
+      <ChecklistItemBody {...defaultProps} {...props} />
+    </IntlProvider>,
+  );
 };
 
 describe('ChecklistItemBody', () => {
-  beforeEach(() => {
-    useSelector.mockReturnValue({ waffleFlags });
-  });
-
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders uncompleted icon when isCompleted is false', () => {
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} />
-      </IntlProvider>,
-    );
-
+    renderComponent();
     const uncompletedIcon = screen.getByTestId('uncompleted-icon');
     expect(uncompletedIcon).toBeInTheDocument();
   });
 
   it('renders completed icon when isCompleted is true', () => {
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} isCompleted />
-      </IntlProvider>,
-    );
-
+    renderComponent({ isCompleted: true });
     const completedIcon = screen.getByTestId('completed-icon');
     expect(completedIcon).toBeInTheDocument();
   });
 
   it('renders short and long descriptions based on checkId', () => {
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} />
-      </IntlProvider>,
-    );
-
+    renderComponent();
     const shortDescription = screen.getByText(messages.welcomeMessageShortDescription.defaultMessage);
     const longDescription = screen.getByText(messages.welcomeMessageLongDescription.defaultMessage);
 
@@ -78,38 +61,21 @@ describe('ChecklistItemBody', () => {
   });
 
   it('renders update hyperlink when updateLink is provided', () => {
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} />
-      </IntlProvider>,
-    );
-
+    renderComponent();
     const updateLink = screen.getByTestId('update-hyperlink');
     expect(updateLink).toBeInTheDocument();
   });
 
-  it('navigates to internal course page if ENABLE_NEW_COURSE_UPDATES_PAGE flag is enabled', () => {
-    useSelector.mockReturnValue({ waffleFlags: { ENABLE_NEW_COURSE_UPDATES_PAGE: true } });
-
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} />
-      </IntlProvider>,
-    );
-
+  it('navigates to internal course page if useNewUpdatesPage flag is enabled', () => {
+    renderComponent({}, { useNewUpdatesPage: true });
     const updateLink = screen.getByTestId('update-hyperlink');
     fireEvent.click(updateLink);
 
     expect(mockNavigate).toHaveBeenCalledWith(`/course/${defaultProps.courseId}/course_info`);
   });
 
-  it('redirects to external link if ENABLE_NEW_COURSE_UPDATES_PAGE flag is disabled', () => {
-    render(
-      <IntlProvider locale="en">
-        <ChecklistItemBody {...defaultProps} />
-      </IntlProvider>,
-    );
-
+  it('redirects to external link if useNewUpdatesPage flag is disabled', () => {
+    renderComponent();
     const updateLink = screen.getByTestId('update-hyperlink');
     fireEvent.click(updateLink);
 

src/course-outline/hooks.jsx

@@ -6,6 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import { copyToClipboard } from '../generic/data/thunks';
 import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
+import { getWaffleFlags } from '../data/selectors';
 import { RequestStatus } from '../data/constants';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
@@ -58,7 +59,7 @@ import {
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const {
     reindexLink,

src/course-outline/status-bar/StatusBar.jsx

@@ -13,6 +13,7 @@ import { useSelector } from 'react-redux';
 import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
 import TagCount from '../../generic/tag-count';
 import { useHelpUrls } from '../../help-urls/hooks';
+import { getWaffleFlags } from '../../data/selectors';
 import { VIDEO_SHARING_OPTIONS } from '../constants';
 import { useContentTagsCount } from '../../generic/data/apiHooks';
 import messages from './messages';
@@ -45,7 +46,7 @@ const StatusBar = ({
 }) => {
   const intl = useIntl();
   const { config } = useContext(AppContext);
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const {
     courseReleaseDate,

src/course-unit/breadcrumbs/Breadcrumbs.jsx

@@ -8,6 +8,7 @@ import {
 } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
+import { getWaffleFlags } from '../../data/selectors';
 import { createCorrectInternalRoute } from '../../utils';
 import { getCourseSectionVertical } from '../data/selectors';
 import messages from './messages';
@@ -17,7 +18,7 @@ const Breadcrumbs = () => {
   const { ancestorXblocks } = useSelector(getCourseSectionVertical);
   const [section, subsection] = ancestorXblocks ?? [];
   const navigate = useNavigate();
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const handleClick = (e, url) => {
     e.preventDefault();
@@ -44,7 +45,7 @@ const Breadcrumbs = () => {
               {section.children.map(({ url, displayName }) => (
                 <Dropdown.Item
                   key={url}
-                  onClick={(e) => handleClick(e, createCorrectInternalRoute(`${url}`))}
+                  onClick={(e) => handleClick(e, createCorrectInternalRoute(url))}
                   className="small"
                   data-testid="breadcrumbs-section-dropdown-item"
                 >
@@ -73,7 +74,7 @@ const Breadcrumbs = () => {
               {subsection.children.map(({ url, displayName }) => (
                 <Dropdown.Item
                   key={url}
-                  onClick={(e) => handleClick(e, createCorrectInternalRoute(`${url}`))}
+                  onClick={(e) => handleClick(e, createCorrectInternalRoute(url))}
                   className="small"
                   data-testid="breadcrumbs-subsection-dropdown-item"
                 >

src/data/api.js

@@ -17,27 +17,11 @@ export async function getCourseDetail(courseId, username) {
 }
 
 export async function getWaffleFlags(courseId) {
-  // const { data } = await getAuthenticatedHttpClient()
-  //   .get(`${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/course_waffle_flags`);
-
-  const data = {
-    use_new_home_page: true,
-    use_new_custom_pages: true,
-    use_new_schedule_details_page: true,
-    use_new_advanced_settings_page: true,
-    use_new_grading_page: true,
-    use_new_updates_page: true,
-    use_new_import_page: true,
-    use_new_export_page: true,
-    use_new_files_uploads_page: true,
-    use_new_video_uploads_page: true,
-    use_new_course_outline_page: true,
-    use_new_unit_page: true,
-    use_new_course_team_page: true,
-    use_new_certificates_page: true,
-    use_new_textbooks_page: true,
-    use_new_group_configurations_page: true,
-  };
+  const apiUrl = courseId
+    ? `${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/course_waffle_flags/${courseId}/`
+    : `${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/course_waffle_flags/`;
+  const { data } = await getAuthenticatedHttpClient()
+    .get(apiUrl);
 
   return normalizeCourseDetail(data);
 }

src/data/selectors.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const getWaffleFlags = (state) => state.courseDetail.waffleFlags;

src/data/thunks.js

@@ -37,7 +37,6 @@ export function fetchWaffleFlags(courseId) {
     try {
       const waffleFlags = await getWaffleFlags(courseId);
       dispatch(updateStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
-      console.log('fetchWaffleFlags thunk', waffleFlags);
       dispatch(fetchWaffleFlagsSuccess({ waffleFlags }));
     } catch (error) {
       if (error.response && error.response.status === 404) {

src/generic/help-sidebar/HelpSidebar.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
-import { getStudioHomeData } from '../../studio-home/data/selectors';
+import { getWaffleFlags } from '../../data/selectors';
 import { otherLinkURLParams } from './constants';
 import messages from './messages';
 import HelpSidebarLink from './HelpSidebarLink';
@@ -26,7 +26,7 @@ const HelpSidebar = ({
     scheduleAndDetails,
     groupConfigurations,
   } = otherLinkURLParams;
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const showOtherLink = (params) => !pathname.includes(params);
   const generateLegacyURL = (urlParameter) => {

src/header/Header.tsx

@@ -5,7 +5,7 @@ import { StudioHeader } from '@edx/frontend-component-header';
 import { type Container, useToggle } from '@openedx/paragon';
 import { generatePath, useHref, useNavigate } from 'react-router-dom';
 
-import { getStudioHomeData } from '../studio-home/data/selectors';
+import { getWaffleFlags } from '../data/selectors';
 import { SearchModal } from '../search-modal';
 import { useContentMenuItems, useSettingMenuItems, useToolsMenuItems } from './hooks';
 import messages from './messages';
@@ -34,7 +34,7 @@ const Header = ({
   const intl = useIntl();
   const libraryHref = useHref('/library/:libraryId');
   const navigate = useNavigate();
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 

src/header/hooks.js

@@ -1,14 +1,16 @@
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
+
 import { getPagePath } from '../utils';
+import { getWaffleFlags } from '../data/selectors';
 import { getStudioHomeData } from '../studio-home/data/selectors';
 import messages from './messages';
 
 export const useContentMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {
@@ -42,7 +44,7 @@ export const useSettingMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
   const { canAccessAdvancedSettings } = useSelector(getStudioHomeData);
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {
@@ -80,7 +82,7 @@ export const useSettingMenuItems = courseId => {
 export const useToolsMenuItems = courseId => {
   const intl = useIntl();
   const studioBaseUrl = getConfig().STUDIO_BASE_URL;
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const items = [
     {

src/index.jsx

@@ -15,7 +15,6 @@ import {
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 import { logError } from '@edx/frontend-platform/logging';
 import messages from './i18n';
-
 import { CreateLibrary, LibraryLayout } from './library-authoring';
 import initializeStore from './store';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';

src/pages-and-resources/pages/PageSettingButton.jsx

@@ -7,6 +7,7 @@ import { Icon, IconButton } from '@openedx/paragon';
 import { ArrowForward, Settings } from '@openedx/paragon/icons';
 import { useNavigate, Link } from 'react-router-dom';
 
+import { getWaffleFlags } from '../../data/selectors';
 import messages from '../messages';
 import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 
@@ -19,7 +20,7 @@ const PageSettingButton = ({
   const { formatMessage } = useIntl();
   const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
   const navigate = useNavigate();
-  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
+  const waffleFlags = useSelector(getWaffleFlags);
 
   const determineLinkDestination = useMemo(() => {
     if (!legacyLink) { return null; }