fix: search modal refresh on typing (openedx#1938) (openedx#1948)

Author: navinkarkera

src/course-outline/CourseOutline.test.jsx

@@ -97,12 +97,6 @@ jest.mock('./data/api', () => ({
   getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
-jest.mock('../studio-home/hooks', () => ({
-  useStudioHome: () => ({
-    librariesV2Enabled: true,
-  }),
-}));
-
 // Mock ComponentPicker to call onComponentSelected on click
 jest.mock('../library-authoring/component-picker', () => ({
   ComponentPicker: (props) => {
@@ -160,7 +154,9 @@ describe('<CourseOutline />', () => {
       pathname: mockPathname,
     });
 
-    store = initializeStore();
+    store = initializeStore({
+      studioHome: { studioHomeData: { librariesV2Enabled: true } },
+    });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
       .onGet(getCourseOutlineIndexApiUrl(courseId))
@@ -179,6 +175,10 @@ describe('<CourseOutline />', () => {
     await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('render CourseOutline component correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -3,7 +3,7 @@ import React, {
   useContext, useEffect, useState, useRef, useCallback,
 } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, StandardModal, useToggle } from '@openedx/paragon';
@@ -25,8 +25,8 @@ import messages from './messages';
 import { ComponentPicker } from '../../library-authoring';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import { ContainerType } from '../../generic/key-utils';
-import { useStudioHome } from '../../studio-home/hooks';
 import { ContentType } from '../../library-authoring/routes';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
 
 const SubsectionCard = ({
   section,
@@ -57,7 +57,12 @@ const SubsectionCard = ({
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'subsection';
   const { sharedClipboardData, showPasteUnit } = useClipboard();
-  const { librariesV2Enabled } = useStudioHome();
+  // WARNING: Do not use "useStudioHome" to get "librariesV2Enabled" flag below,
+  // as it has a useEffect that fetches course waffle flags whenever
+  // location.search is updated. Course search updates location.search when
+  // user types, which will then trigger the useEffect and reload the page.
+  // See https://github.com/openedx/frontend-app-authoring/pull/1938.
+  const { librariesV2Enabled } = useSelector(getStudioHomeData);
   const [
     isAddLibraryUnitModalOpen,
     openAddLibraryUnitModal,

src/course-outline/subsection-card/SubsectionCard.test.jsx

@@ -24,8 +24,9 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-jest.mock('../../studio-home/hooks', () => ({
-  useStudioHome: () => ({
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => ({
     librariesV2Enabled: true,
   }),
 }));