Merge branch 'master' of github.com:openedx/frontend-component-header into Ali-Abbas/upgrade-react-router

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,5 +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/release.yml

@@ -12,10 +12,12 @@ jobs:
       uses: actions/checkout@v3
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -31,7 +33,7 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
-      uses: cycjimmy/semantic-release-action@v2
+      uses: cycjimmy/semantic-release-action@v3
       with:
         semantic_version: 16
       env:

.nvmrc

@@ -0,0 +1 @@
+18

README.rst

@@ -65,7 +65,7 @@ Development
 
 Install dependencies::
 
-  npm i
+  npm ci
 
 Start the development server::
 

package.json

@@ -35,41 +35,42 @@
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "^12.4.19",
-    "@edx/frontend-platform": "^3.6.0",
+    "@edx/frontend-build": "12.9.4",
+    "@edx/frontend-platform": "5.0.0",
     "@edx/reactifex": "^2.1.1",
-    "@testing-library/dom": "9.0.1",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/dom": "9.3.1",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "10.4.9",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
     "husky": "8.0.3",
-    "jest": "29.5.0",
+    "jest": "29.6.2",
     "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "^6.0.0",
-    "react-test-renderer": "16.14.0",
+    "react-router-dom": "6.14.2",
+    "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
-    "redux-saga": "1.2.2"
+    "redux-saga": "1.2.3"
   },
   "dependencies": {
-    "@edx/paragon": "20.28.4",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-brands-svg-icons": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@edx/paragon": "20.45.5",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios-mock-adapter": "1.21.5",
     "babel-polyfill": "6.26.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^2.0.0 || ^3.0.0",
+    "@edx/frontend-platform": "^5.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
   }
 }

src/i18n/messages/uk.json

@@ -1,8 +1,8 @@
 {
   "general.register.sentenceCase": "Register",
-  "general.signIn.sentenceCase": "Sign in",
-  "header.links.courses": "Courses",
-  "header.links.programs": "Programs",
+  "general.signIn.sentenceCase": "Увійти",
+  "header.links.courses": "Курси",
+  "header.links.programs": "Програми",
   "header.links.content.search": "Discover New",
   "header.links.schools": "Schools & Partners",
   "header.user.menu.dashboard": "Dashboard",
@@ -15,19 +15,19 @@
   "header.user.menu.studio.home": "Studio Home",
   "header.user.menu.studio.maintenance": "Maintenance",
   "header.label.account.nav": "Account",
-  "header.label.account.menu": "Account Menu",
-  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.account.menu": "Меню облікового запису",
+  "header.label.account.menu.for": "Меню облікового запису для {username}",
   "header.label.main.nav": "Main",
   "header.label.main.menu": "Main Menu",
   "header.label.main.header": "Main",
   "header.label.secondary.nav": "Secondary",
-  "header.label.skip.nav": "Skip to main content",
+  "header.label.skip.nav": "Перейти до головного змісту",
   "header.label.app.nav": "App",
   "header.menu.dashboard.label": "Dashboard",
   "header.help.label": "Help",
   "header.menu.profile.label": "Profile",
   "header.menu.account.label": "Account",
   "header.menu.orderHistory.label": "Order History",
-  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.navigation.skipNavLink": "Перейти до головного змісту.",
   "header.menu.signOut.label": "Sign Out"
 }

src/index.scss

@@ -27,7 +27,7 @@ $white: #fff;
 
 .learning-header {
   min-width: 0;
-  
+
   .course-title-lockup {
     min-width: 0;
 

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
-
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
@@ -19,8 +18,8 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <>
-      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <Dropdown className="user-dropdown">
+      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">

src/learning-header/LearningHeader.jsx

@@ -49,12 +49,12 @@ const LearningHeader = ({
           <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
         </div>
         {showUserDropdown && authenticatedUser && (
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
+        <AuthenticatedUserDropdown
+          username={authenticatedUser.username}
+        />
         )}
         {showUserDropdown && !authenticatedUser && (
-          <AnonymousUserMenu />
+        <AnonymousUserMenu />
         )}
       </div>
     </header>

src/learning-header/LearningHeader.test.jsx

@@ -12,7 +12,7 @@ describe('Header', () => {
 
   it('displays user button', () => {
     render(<Header />);
-    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
   });
 
   it('displays course data', () => {

src/setupTest.js

@@ -3,7 +3,7 @@
 import Enzyme from 'enzyme';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';

src/test-utils.js

@@ -0,0 +1,6 @@
+const executeThunk = async (thunk, dispatch, getState) => {
+  await thunk(dispatch, getState);
+  await new Promise(setImmediate);
+};
+
+export default executeThunk;