feat: update to frontend-build alpha

* feat: update react & react-dom to v17

* refactor: updated edx packages

* build: update react-redux

* refactor: update package-lock

* refactor: bumped frontend-build

---------

Co-authored-by: mashal-m <mashal.malik@arbisoft.com>

.env

@@ -10,6 +10,7 @@ DATA_API_BASE_URL=''
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 ACCESS_TOKEN_COOKIE_NAME=''
+LANGUAGE_PREFERENCE_COOKIE_NAME=''
 NEW_RELIC_APP_ID=''
 NEW_RELIC_LICENSE_KEY=''
 SITE_NAME=''

.env.development

@@ -12,6 +12,7 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SITE_NAME=localhost
 DATA_API_BASE_URL='http://localhost:8000'

.github/workflows/ci.yml

@@ -11,25 +11,21 @@ on:
 jobs:
   test:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [16]
-        npm: [8.5.x]
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
+
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
-
-    - name: Install npm 8.5.x
-      run: npm install -g npm@${{ matrix.npm }}
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install dependencies
-      run: npm ci
+      run: npm ci --legacy-peer-deps
 
     - name: Unit Tests
       run: npm run test

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/npm-publish.yml

@@ -15,10 +15,13 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: ${{ env.NODE_VER }}
 
       - name: Install dependencies
         run: npm ci

.nvmrc

@@ -0,0 +1 @@
+18.15

Makefile

@@ -68,9 +68,10 @@ pull_translations:
 	  && atlas pull --filter=$(transifex_langs) \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/paragon/src/i18n/messages:paragon \
 	           translations/frontend-app-gradebook/src/i18n/messages:frontend-app-gradebook
 
-	$(intl_imports) frontend-component-header frontend-component-footer frontend-app-gradebook
+	$(intl_imports) paragon frontend-component-header frontend-component-footer frontend-app-gradebook
 endif
 
 # This target is used by CI.

package.json

@@ -29,10 +29,11 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.0.0",
-    "@edx/frontend-platform": "^4.2.0",
-    "@edx/paragon": "^19.25.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",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
@@ -49,10 +50,10 @@
     "history": "4.10.1",
     "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
-    "react-redux": "^7.1.1",
+    "react-redux": "^7.2.9",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-router-redux": "^5.0.0-alpha.9",
@@ -67,18 +68,18 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "^12.4.15",
-    "@testing-library/react": "^12.1.0",
+    "@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",
-    "enzyme-adapter-react-16": "^1.14.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^16.10.1",
+    "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "redux-mock-store": "^1.5.3",
     "semantic-release": "^19.0.3"

src/components/GradesView/ImportGradesButton/__snapshots__/index.test.jsx.snap

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ImportGradesButton component render Form 1`] = `
+<Form
+  action="test-grade-export-url"
+  method="post"
+>
+  <Form.Group
+    controlId="csv"
+  >
+    <Form.Control
+      className="d-none"
+      data-testid="file-control"
+      label="Upload Grade CSV"
+      onChange={[MockFunction props.handleFileInputChange]}
+      type="file"
+    />
+  </Form.Group>
+</Form>
+`;
+
 exports[`ImportGradesButton component render snapshot 1`] = `
 <Fragment>
   <Form
@@ -13,7 +32,7 @@ exports[`ImportGradesButton component render snapshot 1`] = `
         className="d-none"
         data-testid="file-control"
         label="Upload Grade CSV"
-        onChange={[MockFunction]}
+        onChange={[MockFunction props.handleFileInputChange]}
         type="file"
       />
     </Form.Group>
@@ -28,7 +47,7 @@ exports[`ImportGradesButton component render snapshot 1`] = `
         "id": "gradebook.GradesView.importGradesBtnText",
       }
     }
-    onClick={[MockFunction]}
+    onClick={[MockFunction props.handleClickImportGrades]}
   />
 </Fragment>
 `;

src/components/GradesView/ImportGradesButton/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@edx/paragon';
@@ -18,8 +18,8 @@ describe('ImportGradesButton component', () => {
     props = {
       fileInputRef: { current: null },
       gradeExportUrl: 'test-grade-export-url',
-      handleClickImportGrades: jest.fn(),
-      handleFileInputChange: jest.fn(),
+      handleClickImportGrades: jest.fn().mockName('props.handleClickImportGrades'),
+      handleFileInputChange: jest.fn().mockName('props.handleFileInputChange'),
     };
     useImportGradesButtonData.mockReturnValue(props);
     el = shallow(<ImportGradesButton />);
@@ -32,14 +32,15 @@ describe('ImportGradesButton component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('Form', () => {
-      expect(el.find(Form).props().action).toEqual(props.gradeExportUrl);
-      expect(el.find(Form.Control).props().onChange).toEqual(props.handleFileInputChange);
+      expect(el.instance.findByType(Form)[0].snapshot).toMatchSnapshot();
+      expect(el.instance.findByType(Form)[0].props.action).toEqual(props.gradeExportUrl);
+      expect(el.instance.findByType(Form.Control)[0].props.onChange).toEqual(props.handleFileInputChange);
     });
     test('import button', () => {
-      expect(el.find(NetworkButton).props().onClick).toEqual(props.handleClickImportGrades);
+      expect(el.instance.findByType(NetworkButton)[0].props.onClick).toEqual(props.handleClickImportGrades);
     });
   });
 });

src/i18n/index.js

@@ -1,5 +1,6 @@
 import { messages as footerMessages } from '@edx/frontend-component-footer';
 import { messages as headerMessages } from '@edx/frontend-component-header';
+import { messages as paragonMessages } from '@edx/paragon';
 
 import arMessages from './messages/ar.json';
 import deMessages from './messages/de.json';
@@ -31,6 +32,7 @@ const appMessages = {
 };
 
 export default [
+  paragonMessages,
   footerMessages,
   headerMessages,
   appMessages,

src/setupTest.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });