feat: update to frontend-build alpha

2023-09-11 19:24:23 +00:00
16 changed files with 22649 additions and 4167 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -25,7 +25,7 @@ jobs:
        node-version: ${{ env.NODE_VER }}

    - name: Install dependencies
-      run: npm ci
+      run: npm ci --legacy-peer-deps

    - name: Unit Tests
      run: npm run test
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "12.2.0",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "5.5.4",
+    "@edx/frontend-component-footer": "12.1.0",
+    "@edx/frontend-component-header": "4.3.0",
+    "@edx/frontend-platform": "4.6.0",
    "@edx/paragon": "20.45.0",
    "@edx/react-unit-test-utils": "1.7.0",
    "@edx/reactifex": "^2.1.1",
@@ -54,8 +54,8 @@
    "react-dom": "17.0.2",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.2.9",
-    "react-router": "6.15.0",
-    "react-router-dom": "6.15.0",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "4.0.5",
    "redux-beacon": "^2.1.0",
@@ -68,9 +68,9 @@
  },
  "devDependencies": {
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.3",
    "@testing-library/react": "12.1.5",
    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "@edx/frontend-build": "12.9.0-alpha.6",
    "axios": "0.21.2",
    "axios-mock-adapter": "^1.17.0",
    "es-check": "^2.3.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

 import { AppProvider } from '@edx/frontend-platform/react';

 import Footer from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';

+import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 import './App.scss';
@@ -14,18 +15,21 @@ import Head from './head/Head';
 const App = () => (
  <AppProvider store={store}>
    <Head />
-    <div>
-      <Header />
-      <main>
-        <Routes>
-          <Route
-            path="/:courseId"
-            element={<GradebookPage />}
-          />
-        </Routes>
-      </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-    </div>
+    <Router>
+      <div>
+        <Header />
+        <main>
+          <Switch>
+            <Route
+              exact
+              path={routePath}
+              component={GradebookPage}
+            />
+          </Switch>
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      </div>
+    </Router>
  </AppProvider>
 );

--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';

-import { Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { AppProvider } from '@edx/frontend-platform/react';

 import Footer from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';

+import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';

@@ -16,10 +17,14 @@ import Head from './head/Head';
 jest.mock('react-router-dom', () => ({
  BrowserRouter: () => 'BrowserRouter',
  Route: () => 'Route',
+  Switch: () => 'Switch',
 }));
 jest.mock('@edx/frontend-platform/react', () => ({
  AppProvider: () => 'AppProvider',
 }));
+jest.mock('data/constants/app', () => ({
+  routePath: '/:courseId',
+}));
 jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
@@ -27,7 +32,7 @@ jest.mock('@edx/frontend-component-header', () => 'Header');

 const logo = 'fakeLogo.png';
 let el;
-let secondChild;
+let router;

 describe('App router component', () => {
  test('snapshot', () => {
@@ -37,7 +42,7 @@ describe('App router component', () => {
    beforeEach(() => {
      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
      el = shallow(<App />);
-      secondChild = el.childAt(1);
+      router = el.childAt(1);
    });
    describe('AppProvider', () => {
      test('AppProvider is the parent component, passed the redux store props', () => {
@@ -52,24 +57,24 @@ describe('App router component', () => {
    });
    describe('Router', () => {
      test('second child of AppProvider', () => {
-        expect(secondChild.type()).toBe('div');
+        expect(router.type()).toBe(Router);
      });
      test('Header is above/outside-of the routing', () => {
-        expect(secondChild.childAt(0).type()).toBe(Header);
-        expect(secondChild.childAt(1).type()).toBe('main');
+        expect(router.childAt(0).childAt(0).type()).toBe(Header);
+        expect(router.childAt(0).childAt(1).type()).toBe('main');
      });
      test('Routing - GradebookPage is only route', () => {
-        expect(secondChild.find('main')).toEqual(shallow(
+        expect(router.find('main')).toEqual(shallow(
          <main>
-            <Routes>
-              <Route path="/:courseId" element={<GradebookPage />} />
-            </Routes>
+            <Switch>
+              <Route exact path={routePath} component={GradebookPage} />
+            </Switch>
          </main>,
        ));
      });
    });
    test('Footer logo drawn from env variable', () => {
-      expect(secondChild.find(Footer).props().logo).toEqual(logo);
+      expect(router.find(Footer).props().logo).toEqual(logo);
    });
  });
 });
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -5,17 +5,20 @@ exports[`App router component snapshot 1`] = `
  store="testStore"
 >
  <Head />
-  <div>
-    <Header />
-    <main>
-      <Component>
-        <Route
-          element={<GradebookPage />}
-          path="/:courseId"
-        />
-      </Component>
-    </main>
-    <Footer />
-  </div>
+  <BrowserRouter>
+    <div>
+      <Header />
+      <main>
+        <Switch>
+          <Route
+            component="GradebookPage"
+            exact={true}
+            path="/:courseId"
+          />
+        </Switch>
+      </main>
+      <Footer />
+    </div>
+  </BrowserRouter>
 </AppProvider>
 `;
--- a/src/components/GradesView/GradebookTable/GradeButton.jsx
+++ b/src/components/GradesView/GradebookTable/GradeButton.jsx
@@ -11,7 +11,7 @@ export const useGradeButtonData = ({ entry, subsection }) => {
  const areGradesFrozen = selectors.assignmentTypes.useAreGradesFrozen();
  const { gradeFormat } = selectors.grades.useGradeData();
  const setModalState = thunkActions.app.useSetModalStateFromTable();
-  const label = transforms.grades.subsectionGrade({ gradeFormat, subsection })();
+  const label = transforms.grades.subsectionGrade({ gradeFormat, subsection });

  const onClick = () => {
    setModalState({
--- a/src/components/GradesView/GradebookTable/GradeButton.test.jsx
+++ b/src/components/GradesView/GradebookTable/GradeButton.test.jsx
@@ -41,7 +41,7 @@ const props = {
 };
 const gradeFormat = 'percent';
 const setModalState = jest.fn();
-const subsectionGrade = () => 'test-subsection-grade';
+const subsectionGrade = 'test-subsection-grade';
 selectors.assignmentTypes.useAreGradesFrozen.mockReturnValue(false);
 selectors.grades.useGradeData.mockReturnValue({ gradeFormat });
 thunkActions.app.useSetModalStateFromTable.mockReturnValue(setModalState);
@@ -73,7 +73,7 @@ describe('GradeButton', () => {
        expect(out.areGradesFrozen).toEqual(false);
      });
      test('label passed from subsection grade redux hook', () => {
-        expect(out.label).toEqual(subsectionGrade());
+        expect(out.label).toEqual(subsectionGrade);
      });
      test('onClick sets modal state with user entry and subsection', () => {
        out.onClick();
--- a/src/components/GradesView/GradebookTable/hooks.jsx
+++ b/src/components/GradesView/GradebookTable/hooks.jsx
@@ -39,7 +39,7 @@ export const useGradebookTableData = () => {
    [Headings.username]: (
      <Fields.Username username={entry.username} userKey={entry.external_user_key} />
    ),
-    [Headings.email]: (<Fields.Text value={entry.email} />),
+    [Headings.email]: (<Fields.Email email={entry.email} />),
    [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${getLocalizedPercentSign()}`,
    ...entry.section_breakdown.reduce((acc, subsection) => ({
      ...acc,
--- a/src/components/GradesView/GradebookTable/hooks.test.jsx
+++ b/src/components/GradesView/GradebookTable/hooks.test.jsx
@@ -22,7 +22,7 @@ jest.mock('i18n/utils', () => ({
 jest.mock('./GradeButton', () => 'GradeButton');
 jest.mock('./Fields', () => jest.requireActual('testUtils').mockNestedComponents({
  Username: 'Fields.Username',
-  Text: 'Fields.Text',
+  Email: 'Fields.Email',
 }));
 jest.mock('./LabelReplacements', () => jest.requireActual('testUtils').mockNestedComponents({
  TotalGradeLabelReplacement: 'LabelReplacements.TotalGradeLabelReplacement',
@@ -158,7 +158,7 @@ describe('useGradebookTableData', () => {
      test('email field', () => {
        allGrades.forEach((entry, index) => {
          expect(out.data[index][Headings.email]).toMatchObject(
-            <Fields.Text value={entry.email} />,
+            <Fields.Email email={entry.email} />,
          );
        });
      });
--- a/src/containers/GradebookPage/index.jsx
+++ b/src/containers/GradebookPage/index.jsx
@@ -14,8 +14,6 @@ import GradesView from 'components/GradesView';
 import GradebookFilters from 'components/GradebookFilters';
 import BulkManagementHistoryView from 'components/BulkManagementHistoryView';

-import { withParams, withNavigate, withLocation } from '../../utils/hoc';
-
 /**
 * <GradebookPage />
 * Top-level view for the Gradebook MFE.
@@ -30,11 +28,10 @@ export class GradebookPage extends React.Component {

  componentDidMount() {
    const urlQuery = queryString.parse(this.props.location.search);
-    this.props.initializeApp(this.props.courseId, urlQuery);
+    this.props.initializeApp(this.props.match.params.courseId, urlQuery);
  }

  updateQueryParams(queryParams) {
-    const { pathname } = this.props.location;
    const parsed = queryString.parse(this.props.location.search);
    Object.keys(queryParams).forEach((key) => {
      if (queryParams[key]) {
@@ -43,7 +40,7 @@ export class GradebookPage extends React.Component {
        delete parsed[key];
      }
    });
-    this.props.navigate({ pathname, search: `?${queryString.stringify(parsed)}` });
+    this.props.history.push(`?${queryString.stringify(parsed)}`);
  }

  render() {
@@ -63,12 +60,18 @@ export class GradebookPage extends React.Component {
  }
 }
 GradebookPage.defaultProps = {
-  location: { pathname: '/', search: '' },
+  location: { search: '' },
 };
 GradebookPage.propTypes = {
-  navigate: PropTypes.func.isRequired,
-  location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
-  courseId: PropTypes.string.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  location: PropTypes.shape({ search: PropTypes.string }),
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+  }).isRequired,
  // redux
  activeView: PropTypes.string.isRequired,
  initializeApp: PropTypes.func.isRequired,
@@ -82,4 +85,4 @@ export const mapDispatchToProps = {
  initializeApp: thunkActions.app.initialize,
 };

-export default connect(mapStateToProps, mapDispatchToProps)(withParams(withNavigate(withLocation(GradebookPage))));
+export default connect(mapStateToProps, mapDispatchToProps)(GradebookPage);
--- a/src/containers/GradebookPage/test.jsx
+++ b/src/containers/GradebookPage/test.jsx
@@ -50,15 +50,14 @@ describe('GradebookPage', () => {
    let el;
    const props = {
      location: {
-        pathname: '/',
        search: 'searchString',
      },
-      courseId,
+      match: { params: { courseId } },
      activeView: views.grades,
    };
    beforeEach(() => {
      props.initializeApp = jest.fn();
-      props.navigate = jest.fn();
+      props.history = { push: jest.fn() };
    });
    test('snapshot - shows BulkManagementHistoryView if activeView === views.bulkManagementHistory', () => {
      el = shallow(<GradebookPage {...props} activeView={views.bulkManagementHistory} />);
@@ -131,7 +130,7 @@ describe('GradebookPage', () => {
          const val2 = 'VALTWO!!';
          const args = { [newKey]: val1, [props.location.search]: val2 };
          el.instance().updateQueryParams(args);
-          expect(props.navigate).toHaveBeenCalledWith({ pathname: '/', search: `?${queryString.stringify(args)}` });
+          expect(props.history.push).toHaveBeenCalledWith(`?${queryString.stringify(args)}`);
        });
        it('clears values for non-truthy values', () => {
          queryString.parse.mockImplementation(key => ({ [key]: key }));
@@ -140,8 +139,8 @@ describe('GradebookPage', () => {
          const val2 = false;
          const args = { [newKey]: val1, [props.location.search]: val2 };
          el.instance().updateQueryParams(args);
-          expect(props.navigate).toHaveBeenCalledWith(
-            { pathname: '/', search: `?${queryString.stringify({ [newKey]: val1 })}` },
+          expect(props.history.push).toHaveBeenCalledWith(
+            `?${queryString.stringify({ [newKey]: val1 })}`,
          );
        });
      });
--- a/src/data/constants/app.js
+++ b/src/data/constants/app.js
@@ -1,4 +1,7 @@
 import { StrictDict } from 'utils';
+import { getConfig } from '@edx/frontend-platform';
+
+export const routePath = `${getConfig().PUBLIC_PATH}:courseId`;

 export const views = StrictDict({
  grades: 'grades',
--- a/src/data/thunkActions/roles.js
+++ b/src/data/thunkActions/roles.js
@@ -10,7 +10,7 @@ import { fetchGrades } from './grades';
 import { fetchTracks } from './tracks';
 import { fetchAssignmentTypes } from './assignmentTypes';

-export const allowedRoles = ['staff', 'limited_staff', 'instructor', 'support'];
+export const allowedRoles = ['staff', 'instructor', 'support'];

 export const fetchRoles = () => (
  (dispatch, getState) => {
--- a/src/utils/hoc.jsx
+++ b/src/utils/hoc.jsx
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-
-export const withParams = WrappedComponent => {
-  const WithParamsComponent = props => <WrappedComponent {...useParams()} {...props} />;
-  return WithParamsComponent;
-};
-
-export const withNavigate = WrappedComponent => {
-  const WithNavigateComponent = props => {
-    const navigate = useNavigate();
-    return <WrappedComponent navigate={navigate} {...props} />;
-  };
-  return WithNavigateComponent;
-};
-
-export const withLocation = WrappedComponent => {
-  const WithLocationComponent = props => {
-    const location = useLocation();
-    return <WrappedComponent location={location} {...props} />;
-  };
-  return WithLocationComponent;
-};
--- a/src/utils/hoc.test.jsx
+++ b/src/utils/hoc.test.jsx
@@ -1,38 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { withLocation, withNavigate } from './hoc';
-
-const mockedNavigator = jest.fn();
-
-jest.mock('react-router-dom', () => ({
-  useNavigate: () => mockedNavigator,
-  useLocation: () => ({
-    pathname: '/current-location',
-  }),
-}));
-
-// eslint-disable-next-line react/prop-types
-const MockComponent = ({ navigate, location }) => (
-  // eslint-disable-next-line react/button-has-type, react/prop-types
-  <button id="btn" onClick={() => navigate('/some-route')}>{location.pathname}</button>
-);
-const WrappedComponent = withNavigate(withLocation(MockComponent));
-
-test('Provide Navigation to Component', () => {
-  const wrapper = mount(
-    <WrappedComponent />,
-  );
-  const btn = wrapper.find('#btn');
-  btn.simulate('click');
-
-  expect(mockedNavigator).toHaveBeenCalledWith('/some-route');
-});
-
-test('Provide Location object to Component', () => {
-  const wrapper = mount(
-    <WrappedComponent />,
-  );
-
-  expect(wrapper.find('#btn').text()).toContain('/current-location');
-});