fix: expose app entrypoint in webpack dev config for example app

Update codecov to the latest version and start using the org-wide token for uploads.

See https://github.com/openedx/wg-frontend/issues/179

.github/workflows/ci.yml

@@ -33,4 +33,7 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.github/workflows/release.yml

@@ -30,7 +30,10 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: false
     - name: Build
       run: npm run build
     - name: Release

package.json

@@ -35,11 +35,11 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "7.1.3",
+    "@edx/frontend-platform": "8.1.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "13.1.4",
-    "@openedx/paragon": "22.2.1",
-    "@testing-library/dom": "10.0.0",
+    "@openedx/frontend-build": "14.1.2",
+    "@openedx/paragon": "22.7.0",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "10.4.9",
     "husky": "8.0.3",
@@ -49,27 +49,28 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "6.22.3",
+    "react-router-dom": "6.26.1",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
+    "@fortawesome/free-brands-svg-icons": "6.6.0",
+    "@fortawesome/free-regular-svg-icons": "6.6.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0",
+    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0"
+    "react-dom": "^16.9.0 || ^17.0.0"
   }
 }

src/DesktopHeader.jsx

@@ -33,6 +33,7 @@ class DesktopHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -41,6 +42,7 @@ class DesktopHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -49,7 +51,7 @@ class DesktopHeader extends React.Component {
 
       return (
         <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+          <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
             {content} <CaretIcon role="img" aria-hidden focusable="false" />
           </MenuTrigger>
           <MenuContent className="pin-left pin-right shadow py-2">
@@ -94,12 +96,13 @@ class DesktopHeader extends React.Component {
             <React.Fragment key={index}>
               {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
               {group.items.map(({
-                type, content, href, disabled, isActive,
+                type, content, href, disabled, isActive, onClick,
               }) => (
                 <a
                   className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
                   key={`${type}-${content}`}
                   href={href}
+                  onClick={onClick || null}
                 >
                   {content}
                 </a>
@@ -184,6 +187,7 @@ DesktopHeader.propTypes = {
       href: PropTypes.string,
       content: PropTypes.string,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/MobileHeader.jsx

@@ -33,6 +33,7 @@ class MobileHeader extends React.Component {
         submenuContent,
         disabled,
         isActive,
+        onClick,
       } = menuItem;
 
       if (type === 'item') {
@@ -41,6 +42,7 @@ class MobileHeader extends React.Component {
             key={`${type}-${content}`}
             className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -49,7 +51,7 @@ class MobileHeader extends React.Component {
 
       return (
         <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
+          <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
             {content}
           </MenuTrigger>
           <MenuContent className="position-static pin-left pin-right py-2">
@@ -75,12 +77,13 @@ class MobileHeader extends React.Component {
 
     return userMenu.map((group) => (
       group.items.map(({
-        type, content, href, disabled, isActive,
+        type, content, href, disabled, isActive, onClick,
       }) => (
         <li className="nav-item" key={`${type}-${content}`}>
           <a
             className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
             href={href}
+            onClick={onClick || null}
           >
             {content}
           </a>
@@ -192,6 +195,7 @@ MobileHeader.propTypes = {
       href: PropTypes.string,
       content: PropTypes.string,
       isActive: PropTypes.bool,
+      onClick: PropTypes.func,
     })),
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({

src/__snapshots__/Header.test.jsx.snap

@@ -33,6 +33,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>
@@ -93,7 +94,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
           height="24px"
           role="img"
           style={
-            Object {
+            {
               "height": "1.5rem",
               "width": "1.5rem",
             }
@@ -163,7 +164,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
         <span
           className="avatar overflow-hidden d-inline-flex rounded-circle null"
           style={
-            Object {
+            {
               "height": "1.5rem",
               "width": "1.5rem",
             }
@@ -175,7 +176,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
             height="24px"
             role="img"
             style={
-              Object {
+              {
                 "height": "1.5rem",
                 "width": "1.5rem",
               }
@@ -229,6 +230,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         <a
           className="nav-link"
           href="http://localhost:18000/dashboard"
+          onClick={null}
         >
           Courses
         </a>
@@ -253,7 +255,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
             <span
               className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
               style={
-                Object {
+                {
                   "height": "1.5em",
                   "width": "1.5em",
                 }
@@ -265,7 +267,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
                 height="24px"
                 role="img"
                 style={
-                  Object {
+                  {
                     "height": "1.5em",
                     "width": "1.5em",
                   }
@@ -339,7 +341,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
           height="24px"
           role="img"
           style={
-            Object {
+            {
               "height": "1.5rem",
               "width": "1.5rem",
             }
@@ -409,7 +411,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
         <span
           className="avatar overflow-hidden d-inline-flex rounded-circle null"
           style={
-            Object {
+            {
               "height": "1.5rem",
               "width": "1.5rem",
             }
@@ -421,7 +423,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
             height="24px"
             role="img"
             style={
-              Object {
+              {
                 "height": "1.5rem",
                 "width": "1.5rem",
               }

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',