refactor: Load waffle flags using React Query (#2068)

* refactor: use React Query to load waffle flags

* test: add test case

* fix: more clear handling of data loading and fallbacks

* refactor: simplify handling of useReactMarkdownEditor

* test: use new mockWaffleFlags() helper

* test: simplify test mocks in hooks.test.js

* refactor: avoid duplicating flag names, clarify how defaults work

Author: bradenmacdonald

src/CourseAuthoringPage.jsx

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import Header from './header';
-import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
+import { fetchCourseDetail } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
@@ -21,7 +21,6 @@ const CourseAuthoringPage = ({ courseId, children }) => {
 
   useEffect(() => {
     dispatch(fetchCourseDetail(courseId));
-    dispatch(fetchWaffleFlags(courseId));
   }, [courseId]);
 
   useEffect(() => {

src/advanced-settings/AdvancedSettings.jsx

@@ -5,7 +5,7 @@ import {
   Container, Button, Layout, StatefulButton, TransitionReplace,
 } from '@openedx/paragon';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import Placeholder from '../editors/Placeholder';
 
 import AlertProctoringError from '../generic/AlertProctoringError';
@@ -26,7 +26,8 @@ import messages from './messages';
 import ModalError from './modal-error/ModalError';
 import getPageHeadTitle from '../generic/utils';
 
-const AdvancedSettings = ({ intl, courseId }) => {
+const AdvancedSettings = ({ courseId }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false);
   const [showDeprecated, setShowDeprecated] = useState(false);
@@ -278,8 +279,7 @@ const AdvancedSettings = ({ intl, courseId }) => {
 };
 
 AdvancedSettings.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(AdvancedSettings);
+export default AdvancedSettings;

src/advanced-settings/settings-sidebar/SettingsSidebar.jsx

@@ -1,28 +1,25 @@
+// @ts-check
 import React from 'react';
-import {
-  FormattedMessage,
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
 import { HelpSidebar } from '../../generic/help-sidebar';
 import messages from './messages';
 
-const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
+const SettingsSidebar = ({ courseId, proctoredExamSettingsUrl = '' }) => (
   <HelpSidebar
     courseId={courseId}
     proctoredExamSettingsUrl={proctoredExamSettingsUrl}
     showOtherSettings
   >
     <h4 className="help-sidebar-about-title">
-      {intl.formatMessage(messages.about)}
+      <FormattedMessage {...messages.about} />
     </h4>
     <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.aboutDescription1)}
+      <FormattedMessage {...messages.aboutDescription1} />
     </p>
     <p className="help-sidebar-about-descriptions">
-      {intl.formatMessage(messages.aboutDescription2)}
+      <FormattedMessage {...messages.aboutDescription2} />
     </p>
     <p className="help-sidebar-about-descriptions">
       <FormattedMessage
@@ -34,14 +31,9 @@ const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
   </HelpSidebar>
 );
 
-SettingsSidebar.defaultProps = {
-  proctoredExamSettingsUrl: '',
-};
-
 SettingsSidebar.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
   proctoredExamSettingsUrl: PropTypes.string,
 };
 
-export default injectIntl(SettingsSidebar);
+export default SettingsSidebar;

src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx

@@ -1,43 +1,21 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import initializeStore from '../../store';
+// @ts-check
+import { initializeMocks, render } from '../../testUtils';
 import SettingsSidebar from './SettingsSidebar';
 import messages from './messages';
 
 const courseId = 'course-123';
-let store;
-
-const RootWrapper = () => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <SettingsSidebar intl={{ formatMessage: jest.fn() }} courseId={courseId} />
-    </IntlProvider>
-  </AppProvider>
-);
 
 describe('<SettingsSidebar />', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
+    initializeMocks();
   });
   it('renders about and other sidebar titles correctly', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
     expect(getByText(messages.about.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.other.defaultMessage)).toBeInTheDocument();
   });
   it('renders about descriptions correctly', () => {
-    const { getByText } = render(<RootWrapper />);
+    const { getByText } = render(<SettingsSidebar courseId={courseId} />);
     const aboutThirtyDescription = getByText('When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘).');
     expect(getByText(messages.aboutDescription1.defaultMessage)).toBeInTheDocument();
     expect(getByText(messages.aboutDescription2.defaultMessage)).toBeInTheDocument();

src/course-checklist/ChecklistSection/ChecklistItemBody.jsx

@@ -2,11 +2,10 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, Icon } from '@openedx/paragon';
-import { useSelector } from 'react-redux';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
-import { getWaffleFlags } from '../../data/selectors';
+import { useWaffleFlags } from '../../data/apiHooks';
 import messages from './messages';
 
 const getUpdateLinks = (courseId, waffleFlags) => {
@@ -35,7 +34,7 @@ const ChecklistItemBody = ({
   isCompleted,
 }) => {
   const intl = useIntl();
-  const waffleFlags = useSelector(getWaffleFlags);
+  const waffleFlags = useWaffleFlags(courseId);
   const updateLinks = getUpdateLinks(courseId, waffleFlags);
 
   return (

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -1,19 +1,18 @@
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import { injectIntl, 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 { getWaffleFlags } from '../../data/selectors';
+import { useWaffleFlags } from '../../data/apiHooks';
 import messages from './messages';
 
 const ChecklistItemComment = ({
   courseId,
   checkId,
   data,
 }) => {
-  const waffleFlags = useSelector(getWaffleFlags);
+  const waffleFlags = useWaffleFlags(courseId);
 
   const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
     ? `/course/${courseId}#${assignmentId}` : `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);

src/course-outline/hooks.jsx

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

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

@@ -8,12 +8,11 @@ import {
 } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-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 { useWaffleFlags } from '../../data/apiHooks';
 import { VIDEO_SHARING_OPTIONS } from '../constants';
 import { useContentTagsCount } from '../../generic/data/apiHooks';
 import messages from './messages';
@@ -46,7 +45,7 @@ const StatusBar = ({
 }) => {
   const intl = useIntl();
   const { config } = useContext(AppContext);
-  const waffleFlags = useSelector(getWaffleFlags);
+  const waffleFlags = useWaffleFlags(courseId);
 
   const {
     courseReleaseDate,

src/course-unit/CourseUnit.test.jsx

@@ -62,7 +62,7 @@ import xblockContainerIframeMessages from './xblock-container-iframe/messages';
 import headerNavigationsMessages from './header-navigations/messages';
 import sidebarMessages from './sidebar/messages';
 import messages from './messages';
-import * as selectors from '../data/selectors';
+import { mockWaffleFlags } from '../data/apiHooks.mock';
 
 let axiosMock;
 let store;
@@ -847,7 +847,7 @@ describe('<CourseUnit />', () => {
   });
 
   it('handles creating Video xblock and showing editor modal using videogalleryflow', async () => {
-    const waffleSpy = jest.spyOn(selectors, 'getWaffleFlags').mockReturnValue({ useVideoGalleryFlow: true });
+    const waffleSpy = mockWaffleFlags({ useVideoGalleryFlow: true });
 
     axiosMock
       .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))

src/course-unit/add-component/AddComponent.jsx

@@ -8,7 +8,7 @@ import {
 } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
-import { getWaffleFlags } from '../../data/selectors';
+import { useWaffleFlags } from '../../data/apiHooks';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
@@ -45,7 +45,7 @@ const AddComponent = ({
   const [selectedComponents, setSelectedComponents] = useState([]);
   const [usageId, setUsageId] = useState(null);
   const { sendMessageToIframe } = useIframe();
-  const { useVideoGalleryFlow, useReactMarkdownEditor } = useSelector(getWaffleFlags);
+  const { useVideoGalleryFlow } = useWaffleFlags(courseId ?? undefined);
 
   const receiveMessage = useCallback(({ data: { type, payload } }) => {
     if (type === messageTypes.showMultipleComponentPicker) {
@@ -266,7 +266,6 @@ const AddComponent = ({
               courseId={courseId}
               blockType={blockType}
               blockId={newBlockId}
-              isMarkdownEditorEnabledForCourse={useReactMarkdownEditor}
               studioEndpointUrl={getConfig().STUDIO_BASE_URL}
               lmsEndpointUrl={getConfig().LMS_BASE_URL}
               onClose={closeXBlockEditorModal}