feat: remove loading on editor pages (#250)

Because we are moving the v2 editor pages to be "fake" modals, which have no z-index, we need to discard the course authoring "loading" wheel for the header and footer. We also need to bump the version of f-l-c-c to bring in the new editor changes.

src/CourseAuthoringPage.jsx

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import Footer from '@edx/frontend-component-footer';
 import { useDispatch, useSelector } from 'react-redux';
 
+import {
+  useLocation,
+} from 'react-router-dom';
 import Header from './studio-header/Header';
 import { fetchCourseDetail } from './data/thunks';
 import { useModel } from './generic/model-store';
@@ -46,9 +49,14 @@ export default function CourseAuthoringPage({ courseId, children }) {
     </div>
   );
 
+  const { pathname } = useLocation();
   return (
     <div className="bg-light-200">
-      {inProgress ? <Loading /> : <AppHeader />}
+      {/* While V2 Editors are tempoarily served from thier own pages
+      using url pattern containing /editor/,
+      we shouldn't have the header and footer on these pages.
+      This functionality will be removed in TNL-9591 */}
+      {inProgress ? !pathname.includes('/editor/') && <Loading /> : <AppHeader />}
       {children}
       {!inProgress && <AppFooter />}
     </div>

src/CourseAuthoringPage.test.jsx

@@ -14,6 +14,13 @@ import { executeThunk } from './utils';
 import { fetchCourseApps } from './pages-and-resources/data/thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
+let mockPathname = '/evilguy/';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
 let axiosMock;
 let store;
 let container;
@@ -61,3 +68,56 @@ describe('DiscussionsSettings', () => {
     expect(queryByTestId(container, 'permissionDeniedAlert')).toBeInTheDocument();
   });
 });
+
+describe('Editor Pages Load no header', () => {
+  const mockStoreSuccess = async () => {
+    const apiBaseUrl = getConfig().STUDIO_BASE_URL;
+    const courseAppsApiUrl = `${apiBaseUrl}/api/course_apps/v1/apps`;
+    axiosMock.onGet(`${courseAppsApiUrl}/${courseId}`).reply(200, {
+      response: { status: 200 },
+    });
+    await executeThunk(fetchCourseApps(courseId), store.dispatch);
+  };
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+  test('renders no loading wheel on editor pages', async () => {
+    mockPathname = '/editor/';
+    await mockStoreSuccess();
+    const wrapper = render(
+      <AppProvider store={store}>
+        <IntlProvider locale="en">
+          <CourseAuthoringPage courseId={courseId}>
+            <PagesAndResources courseId={courseId} />
+          </CourseAuthoringPage>
+        </IntlProvider>
+      </AppProvider>
+      ,
+    );
+    expect(wrapper.queryByRole('status')).not.toBeInTheDocument();
+  });
+  test('renders loading wheel on non editor pages', async () => {
+    mockPathname = '/evilguy/';
+    await mockStoreSuccess();
+    const wrapper = render(
+      <AppProvider store={store}>
+        <IntlProvider locale="en">
+          <CourseAuthoringPage courseId={courseId}>
+            <PagesAndResources courseId={courseId} />
+          </CourseAuthoringPage>
+        </IntlProvider>
+      </AppProvider>
+      ,
+    );
+    expect(wrapper.queryByRole('status')).toBeInTheDocument();
+  });
+});

src/setupTest.js

@@ -4,6 +4,22 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import ReactDOM from 'react-dom';
 
+/* need to mock window for tinymce on import, as it is JSDOM incompatible */
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 // Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
 ReactDOM.createPortal = node => node;