fix: Fix rows counter in the Edit Grade modal window

Merge pull request #386 from DmytroAlipov/fix-second-opening-grade-quince
fix: "An unexpected error occurred" after second opening any grade
2025-01-26 21:34:11 +05:30 · 2024-04-09 14:11:57 +03:00 · 2024-04-03 15:27:59 -03:00 · 2024-03-16 18:26:24 +02:00 · 2023-12-10 20:47:54 -03:00 · 2023-12-08 16:27:28 -03:00
27 changed files with 476 additions and 264 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,9 @@
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-        "@edx/frontend-component-footer": "12.1.0",
-        "@edx/frontend-component-header": "4.3.0",
-        "@edx/frontend-platform": "4.6.0",
+        "@edx/frontend-component-footer": "12.2.0",
+        "@edx/frontend-component-header": "4.6.0",
+        "@edx/frontend-platform": "5.5.4",
        "@edx/paragon": "20.45.0",
        "@edx/react-unit-test-utils": "1.7.0",
        "@edx/reactifex": "^2.1.1",
@@ -35,8 +35,8 @@
        "react-dom": "17.0.2",
        "react-helmet": "^6.1.0",
        "react-redux": "^7.2.9",
-        "react-router": "5.2.0",
-        "react-router-dom": "5.2.0",
+        "react-router": "6.15.0",
+        "react-router-dom": "6.15.0",
        "react-router-redux": "^5.0.0-alpha.9",
        "redux": "4.0.5",
        "redux-beacon": "^2.1.0",
@@ -2191,9 +2191,9 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.1.0.tgz",
-      "integrity": "sha512-yF2GHwb9dzaYVSNGS7ps92hFCfh3ZChf+gPO+rFYq0cRsRENFV2UV9tlfBKSiwqiu19JZCpepp4tSIIg7QUOgg==",
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.2.0.tgz",
+      "integrity": "sha512-tAI6TSvb0U15drV/eKtEs8O+oiDtTE/yaN4uDKs++RJxKVpLUlar7sug54b7cVy9Y3FPR/3Cfb/ytsuIqhLmxw==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "6.4.0",
        "@fortawesome/free-brands-svg-icons": "6.4.0",
@@ -2202,7 +2202,7 @@
        "@fortawesome/react-fontawesome": "0.2.0"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^4.0.0",
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0"
@@ -2266,75 +2266,129 @@
      }
    },
    "node_modules/@edx/frontend-component-header": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.3.0.tgz",
-      "integrity": "sha512-NqeqRqxKsSZ4LKj+pVTfcbUagtFh4atBPRDuWxJoCyV4KTaTkn/WBYRGf4D6MSvo8xHJUgVXu9ZDmxdMhRWyew==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.6.0.tgz",
+      "integrity": "sha512-zZuMgHQWfFMTquVb4iL/iQMwKRRgts8CFFLyL8R6vQL1WfHd21hndhKii2kp9lBnIJgrilIfF79RsbImb5L0og==",
      "dependencies": {
-        "@edx/paragon": "20.45.0",
-        "@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",
+        "@edx/paragon": "20.46.2",
+        "@fortawesome/fontawesome-svg-core": "6.4.2",
+        "@fortawesome/free-brands-svg-icons": "6.4.2",
+        "@fortawesome/free-regular-svg-icons": "6.4.2",
+        "@fortawesome/free-solid-svg-icons": "6.4.2",
        "@fortawesome/react-fontawesome": "^0.2.0",
-        "@reduxjs/toolkit": "1.9.5",
        "axios-mock-adapter": "1.21.5",
        "babel-polyfill": "6.26.0",
-        "classnames": "2.3.2",
-        "lodash": "4.17.21",
-        "react-redux": "7.2.9",
        "react-responsive": "8.2.0",
-        "react-router-dom": "5.3.4",
-        "react-transition-group": "4.4.5",
-        "rosie": "2.1.0",
-        "timeago.js": "4.0.2"
+        "react-transition-group": "4.4.5"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^4.0.0",
+        "@edx/frontend-platform": "^4.0.0 || ^5.0.0",
        "prop-types": "^15.5.10",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0"
      }
    },
+    "node_modules/@edx/frontend-component-header/node_modules/@edx/paragon": {
+      "version": "20.46.2",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.46.2.tgz",
+      "integrity": "sha512-px+KS/BV1CbiMKgfVgUofyjJi4CHUCUOLRukJbT66VPPqWP4Xon5Rns6uohoratPXMg2kNN46v2L8wIwqKQ4Lw==",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
+        "bootstrap": "^4.6.2",
+        "classnames": "^2.3.1",
+        "email-prop-type": "^3.0.0",
+        "file-selector": "^0.6.0",
+        "font-awesome": "^4.7.0",
+        "glob": "^8.0.3",
+        "lodash.uniqby": "^4.7.0",
+        "mailto-link": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-bootstrap": "^1.6.5",
+        "react-colorful": "^5.6.1",
+        "react-dropzone": "^14.2.1",
+        "react-focus-on": "^3.5.4",
+        "react-loading-skeleton": "^3.1.0",
+        "react-popper": "^2.2.5",
+        "react-proptype-conditional-require": "^1.0.4",
+        "react-responsive": "^8.2.0",
+        "react-table": "^7.7.0",
+        "react-transition-group": "^4.4.2",
+        "tabbable": "^5.3.3",
+        "uncontrollable": "^7.2.1",
+        "uuid": "^9.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0",
+        "react-intl": "^5.25.1"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@edx/paragon/node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
      "hasInstallScript": true,
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
      },
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
      },
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
      },
      "engines": {
        "node": ">=6"
@@ -2352,64 +2406,55 @@
        "react": ">=16.3"
      }
    },
-    "node_modules/@edx/frontend-component-header/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
-    "node_modules/@edx/frontend-component-header/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+    "node_modules/@edx/frontend-component-header/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
      "dependencies": {
-        "isarray": "0.0.1"
+        "balanced-match": "^1.0.0"
      }
    },
-    "node_modules/@edx/frontend-component-header/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/@edx/frontend-component-header/node_modules/react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+    "node_modules/@edx/frontend-component-header/node_modules/email-prop-type": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-3.0.1.tgz",
+      "integrity": "sha512-tONZGMEOOkadp5OBftuVXU8DsceWmINxYK+pqPFB4LT5ODjrPX/esel3WGqbV7d6in5/MnZE4n4QcqOr4gh7dg==",
      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=15"
+        "email-validator": "^2.0.4"
      }
    },
-    "node_modules/@edx/frontend-component-header/node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+    "node_modules/@edx/frontend-component-header/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
      },
-      "peerDependencies": {
-        "react": ">=15"
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.6.0.tgz",
-      "integrity": "sha512-NZ1I3BgUZl7bqvDwSnnL+LxqZOdOUGZU55KiwvknqiKU8RS5Lx9tc4arp+NcX1u58xy/Xbinv+mriSO6PPxQNQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.5.4.tgz",
+      "integrity": "sha512-Yum+oST7XfDwDnDhBnzeR/mjp6O+G0g+5AZtIJ1BdTKQH1z9FObfim/pfoiI9STiYlguVpeWMkzWuca/QMLO/Q==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
        "@formatjs/intl-pluralrules": "4.3.3",
@@ -2436,13 +2481,13 @@
        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
      },
      "peerDependencies": {
-        "@edx/frontend-build": ">= 8.1.0",
-        "@edx/paragon": ">= 10.0.0 < 21.0.0",
+        "@edx/frontend-build": ">= 8.1.0 || ^12.9.0-alpha.1",
+        "@edx/paragon": ">= 10.0.0 < 22.0.0",
        "prop-types": "^15.7.2",
        "react": "^16.9.0 || ^17.0.0",
        "react-dom": "^16.9.0 || ^17.0.0",
        "react-redux": "^7.1.1",
-        "react-router-dom": "^5.0.1",
+        "react-router-dom": "^6.0.0",
        "redux": "^4.0.4"
      }
    },
@@ -2603,6 +2648,127 @@
        "react": "^16.9.0 || ^17.0.0"
      }
    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/@edx/frontend-platform": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.6.0.tgz",
+      "integrity": "sha512-NZ1I3BgUZl7bqvDwSnnL+LxqZOdOUGZU55KiwvknqiKU8RS5Lx9tc4arp+NcX1u58xy/Xbinv+mriSO6PPxQNQ==",
+      "dependencies": {
+        "@cospired/i18n-iso-languages": "4.1.0",
+        "@formatjs/intl-pluralrules": "4.3.3",
+        "@formatjs/intl-relativetimeformat": "10.0.1",
+        "axios": "0.27.2",
+        "axios-cache-interceptor": "0.10.7",
+        "form-urlencoded": "4.1.4",
+        "glob": "7.2.3",
+        "history": "4.10.1",
+        "i18n-iso-countries": "4.3.1",
+        "jwt-decode": "3.1.2",
+        "localforage": "1.10.0",
+        "localforage-memoryStorageDriver": "0.9.2",
+        "lodash.camelcase": "4.3.0",
+        "lodash.memoize": "4.1.2",
+        "lodash.merge": "4.6.2",
+        "lodash.snakecase": "4.1.1",
+        "pubsub-js": "1.9.4",
+        "react-intl": "^5.25.0",
+        "universal-cookie": "4.0.4"
+      },
+      "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
+        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
+      },
+      "peerDependencies": {
+        "@edx/frontend-build": ">= 8.1.0",
+        "@edx/paragon": ">= 10.0.0 < 21.0.0",
+        "prop-types": "^15.7.2",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-redux": "^7.1.1",
+        "react-router-dom": "^5.0.1",
+        "redux": "^4.0.4"
+      }
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "peer": true
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/path-to-regexp": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "peer": true,
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/@edx/react-unit-test-utils/node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
    "node_modules/@edx/reactifex": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/@edx/reactifex/-/reactifex-2.2.0.tgz",
@@ -4538,6 +4704,14 @@
        "redux": "^4"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@restart/context": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -17137,20 +17311,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
    "node_modules/mini-css-extract-plugin": {
      "version": "1.6.2",
      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -22613,40 +22773,33 @@
      }
    },
    "node_modules/react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
      }
    },
    "node_modules/react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
      },
      "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
      }
    },
    "node_modules/react-router-redux": {
@@ -22698,24 +22851,6 @@
        "react": ">=15"
      }
    },
-    "node_modules/react-router/node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
-    "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
    "node_modules/react-shallow-renderer": {
      "version": "16.15.0",
      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -23406,14 +23541,6 @@
        "rimraf": "bin.js"
      }
    },
-    "node_modules/rosie": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/rosie/-/rosie-2.1.0.tgz",
-      "integrity": "sha512-Dbzdc+prLXZuB/suRptDnBUY29SdGvND3bLg6cll8n7PNqzuyCxSlRfrkn8PqjS9n4QVsiM7RCvxCkKAkTQRjA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/rst-selector-parser": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
@@ -25876,11 +26003,6 @@
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
    },
-    "node_modules/timeago.js": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz",
-      "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="
-    },
    "node_modules/tiny-invariant": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
--- 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.1.0",
-    "@edx/frontend-component-header": "4.3.0",
-    "@edx/frontend-platform": "4.6.0",
+    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "5.5.4",
    "@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": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
    "react-router-redux": "^5.0.0-alpha.9",
    "redux": "4.0.5",
    "redux-beacon": "^2.1.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Routes } 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';
@@ -15,21 +14,18 @@ import Head from './head/Head';
 const App = () => (
  <AppProvider store={store}>
    <Head />
-    <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>
+    <div>
+      <Header />
+      <main>
+        <Routes>
+          <Route
+            path="/:courseId"
+            element={<GradebookPage />}
+          />
+        </Routes>
+      </main>
+      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+    </div>
  </AppProvider>
 );

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

-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Route, Routes } 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';

@@ -17,14 +16,10 @@ 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');
@@ -32,7 +27,7 @@ jest.mock('@edx/frontend-component-header', () => 'Header');

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

 describe('App router component', () => {
  test('snapshot', () => {
@@ -42,7 +37,7 @@ describe('App router component', () => {
    beforeEach(() => {
      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
      el = shallow(<App />);
-      router = el.childAt(1);
+      secondChild = el.childAt(1);
    });
    describe('AppProvider', () => {
      test('AppProvider is the parent component, passed the redux store props', () => {
@@ -57,24 +52,24 @@ describe('App router component', () => {
    });
    describe('Router', () => {
      test('second child of AppProvider', () => {
-        expect(router.type()).toBe(Router);
+        expect(secondChild.type()).toBe('div');
      });
      test('Header is above/outside-of the routing', () => {
-        expect(router.childAt(0).childAt(0).type()).toBe(Header);
-        expect(router.childAt(0).childAt(1).type()).toBe('main');
+        expect(secondChild.childAt(0).type()).toBe(Header);
+        expect(secondChild.childAt(1).type()).toBe('main');
      });
      test('Routing - GradebookPage is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
+        expect(secondChild.find('main')).toEqual(shallow(
          <main>
-            <Switch>
-              <Route exact path={routePath} component={GradebookPage} />
-            </Switch>
+            <Routes>
+              <Route path="/:courseId" element={<GradebookPage />} />
+            </Routes>
          </main>,
        ));
      });
    });
    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
+      expect(secondChild.find(Footer).props().logo).toEqual(logo);
    });
  });
 });
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -5,20 +5,17 @@ exports[`App router component snapshot 1`] = `
  store="testStore"
 >
  <Head />
-  <BrowserRouter>
-    <div>
-      <Header />
-      <main>
-        <Switch>
-          <Route
-            component="GradebookPage"
-            exact={true}
-            path="/:courseId"
-          />
-        </Switch>
-      </main>
-      <Footer />
-    </div>
-  </BrowserRouter>
+  <div>
+    <Header />
+    <main>
+      <Component>
+        <Route
+          element={<GradebookPage />}
+          path="/:courseId"
+        />
+      </Component>
+    </main>
+    <Footer />
+  </div>
 </AppProvider>
 `;
--- a/src/components/GradebookHeader/snapshots/index.test.jsx.snap
+++ b/src/components/GradebookHeader/snapshots/index.test.jsx.snap
@@ -21,7 +21,9 @@ exports[`GradebookHeader component render default view shapshot 1`] = `
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
@@ -49,7 +51,9 @@ exports[`GradebookHeader component render frozen grades snapshot: show frozen wa
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
@@ -83,7 +87,9 @@ exports[`GradebookHeader component render show bulk management snapshot: show to
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
    <Button
@@ -117,7 +123,9 @@ exports[`GradebookHeader component render user cannot view gradebook snapshot: s
  <div
    className="subtitle-row d-flex justify-content-between align-items-center"
  >
-    <h2>
+    <h2
+      className="text-break"
+    >
      test-course-id
    </h2>
  </div>
--- a/src/components/GradebookHeader/index.jsx
+++ b/src/components/GradebookHeader/index.jsx
@@ -26,7 +26,7 @@ export const GradebookHeader = () => {
      </a>
      <h1>{formatMessage(messages.gradebook)}</h1>
      <div className="subtitle-row d-flex justify-content-between align-items-center">
-        <h2>{courseId}</h2>
+        <h2 className="text-break">{courseId}</h2>
        {showBulkManagement && (
          <Button variant="tertiary" onClick={handleToggleViewClick}>
            {formatMessage(toggleViewMessage)}
--- a/src/components/GradesView/EditModal/OverrideTable/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/EditModal/OverrideTable/snapshots/index.test.jsx.snap
@@ -20,6 +20,6 @@ exports[`OverrideTable component render snapshot 1`] = `
      },
    ]
  }
-  itemCount={2}
+  itemCount={3}
 />
 `;
--- a/src/components/GradesView/EditModal/OverrideTable/hooks.js
+++ b/src/components/GradesView/EditModal/OverrideTable/hooks.js
@@ -9,7 +9,7 @@ const useOverrideTableData = () => {
  const { formatMessage } = useIntl();

  const hide = selectors.grades.useHasOverrideErrors();
-  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults;
+  const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults || [];
  const tableProps = {};
  if (!hide) {
    tableProps.columns = [
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -20,18 +20,20 @@ export const OverrideTable = () => {

  if (hide) { return null; }

+  const tableData = [
+    ...data,
+    {
+      adjustedGrade: <AdjustedGradeInput />,
+      date: formatDateForDisplay(new Date()),
+      reason: <ReasonInput />,
+    },
+  ];
+
  return (
    <DataTable
      columns={columns}
-      data={[
-        ...data,
-        {
-          adjustedGrade: <AdjustedGradeInput />,
-          date: formatDateForDisplay(new Date()),
-          reason: <ReasonInput />,
-        },
-      ]}
-      itemCount={data.length}
+      data={tableData}
+      itemCount={tableData.length}
    />
  );
 };
--- a/src/components/GradesView/FilterMenuToggle/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/FilterMenuToggle/snapshots/index.test.jsx.snap
@@ -7,6 +7,7 @@ exports[`FilterMenuToggle component render snapshot 1`] = `
  onClick={[MockFunction hooks.toggleFilterMenu]}
 >
  <Icon
+    className="mr-1"
    src="FilterAlt"
  />
   
--- a/src/components/GradesView/FilterMenuToggle/index.jsx
+++ b/src/components/GradesView/FilterMenuToggle/index.jsx
@@ -21,7 +21,7 @@ export const FilterMenuToggle = () => {
      className="btn-primary align-self-start"
      onClick={toggleFilterMenu}
    >
-      <Icon src={FilterAlt} /> {formatMessage(messages.editFilters)}
+      <Icon src={FilterAlt} className="mr-1" /> {formatMessage(messages.editFilters)}
    </Button>
  );
 };
--- 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.Email email={entry.email} />),
+    [Headings.email]: (<Fields.Text value={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',
-  Email: 'Fields.Email',
+  Text: 'Fields.Text',
 }));
 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.Email email={entry.email} />,
+            <Fields.Text value={entry.email} />,
          );
        });
      });
--- a/src/components/GradesView/GradesView.scss
+++ b/src/components/GradesView/GradesView.scss
@@ -46,6 +46,7 @@
 }
 .grade-history-header{
    float: left;
+    min-width: 170px;
 }

 .grade-history-assignment{
@@ -65,7 +66,7 @@
 .gradebook-container {
    width: 100%;
    overflow-x: auto;
-    height: 600px;
+    max-height: 600px;
    overflow-y: auto;
    position: relative;
 }
@@ -122,3 +123,34 @@ select#ScoreView.form-control {
        border-right-color: $black;
    }
 }
+
+#edit-filters-btn {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}
+
+.search-container {
+    @include media-breakpoint-down(xs) {
+        width: 100%;
+    }
+}
+
+.pgn__modal-body-content .pgn__data-table-layout-wrapper {
+    @include media-breakpoint-down(sm) {
+        clear: both;
+        padding: 1rem 0;
+    }
+}
+
+.page-gradebook {
+    position: relative;
+
+    .sidebar-container {
+        position: relative;
+    }
+    aside.sidebar {
+        overflow: auto;
+    }
+}
--- a/src/components/GradesView/SearchControls/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/SearchControls/snapshots/index.test.jsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`SearchControls component render snapshot 1`] = `
-<div>
+<div
+  className="search-container"
+>
  <SearchField
    inputLabel="test-input-label"
    onBlur={[MockFunction hooks.onBlur]}
--- a/src/components/GradesView/SearchControls/index.jsx
+++ b/src/components/GradesView/SearchControls/index.jsx
@@ -18,7 +18,7 @@ export const SearchControls = () => {
  } = useSearchControlsData();

  return (
-    <div>
+    <div className="search-container">
      <SearchField
        onSubmit={onSubmit}
        inputLabel={inputLabel}
--- a/src/components/GradesView/snapshots/index.test.jsx.snap
+++ b/src/components/GradesView/snapshots/index.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`GradesView component render snapshot 1`] = `
    filter-step-heading
  </h3>
  <div
-    className="d-flex justify-content-between"
+    className="d-flex justify-content-between flex-wrap"
  >
    <FilterMenuToggle />
    <SearchControls />
--- a/src/components/GradesView/index.jsx
+++ b/src/components/GradesView/index.jsx
@@ -34,7 +34,7 @@ export const GradesView = ({ updateQueryParams }) => {
        {stepHeadings.filter}
      </h3>

-      <div className="d-flex justify-content-between">
+      <div className="d-flex justify-content-between flex-wrap">
        <FilterMenuToggle />
        <SearchControls />
      </div>
--- a/src/containers/GradebookPage/index.jsx
+++ b/src/containers/GradebookPage/index.jsx
@@ -14,6 +14,8 @@ 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.
@@ -28,10 +30,11 @@ export class GradebookPage extends React.Component {

  componentDidMount() {
    const urlQuery = queryString.parse(this.props.location.search);
-    this.props.initializeApp(this.props.match.params.courseId, urlQuery);
+    this.props.initializeApp(this.props.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]) {
@@ -40,7 +43,7 @@ export class GradebookPage extends React.Component {
        delete parsed[key];
      }
    });
-    this.props.history.push(`?${queryString.stringify(parsed)}`);
+    this.props.navigate({ pathname, search: `?${queryString.stringify(parsed)}` });
  }

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

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

 export const fetchRoles = () => (
  (dispatch, getState) => {
--- a/src/utils/hoc.jsx
+++ b/src/utils/hoc.jsx
@@ -0,0 +1,24 @@
+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
@@ -0,0 +1,38 @@
+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');
+});
Author	SHA1	Message	Date
Stanislav Lunyachek	706d0ba36b	fix: Fix rows counter in the Edit Grade modal window	2025-01-26 21:34:11 +05:30
Max Sokolski	aa2b1a56bc	Merge pull request #386 from DmytroAlipov/fix-second-opening-grade-quince fix: "An unexpected error occurred" after second opening any grade	2024-04-09 14:11:57 +03:00
Adolfo R. Brandes	e795163aa6	Merge pull request #370 from raccoongang/fix/fix-responsive-issues-quince fix: fix sidebar scrolling and adaptation for mobile	2024-04-03 15:27:59 -03:00
Dima Alipov	bd25b6b4d0	fix: "An unexpected error occurred" after second opening any grade	2024-03-16 18:26:24 +02:00
Adolfo R. Brandes	acdad5af00	Merge pull request #376 from arbrandes/fix-route-quince [Quince backport] fix: Route with PUBLIC_PATH	2023-12-10 20:47:54 -03:00
Adolfo R. Brandes	ba9fb375d9	fix: Route with PUBLIC_PATH Prior to this change, the MFE would fail to render with any PUBLIC_PATH set. Because that is now handled entirely by `frontend-platform`, we can avoid referring to PUBLIC_PATH entirely, here.	2023-12-08 16:27:28 -03:00
ihor-romaniuk	f303712830	fix: fix sidebar scrolling and adaptation for mobile - fix text overload in heading - fix appearance for sidebar with a short main content - fix transformation of search and filter button on mobile - fix extra empty space below main content table - fix adaptation modal content to mobile view	2023-10-27 10:34:00 +03:00
Syed Ali Abbas Zaidi	b536180a3e	chore: bump frontend-platform (#356 )	2023-10-18 11:22:51 +05:00
0x29a	295048b4e9	fix: add limited_staff to allowedRoles	2023-10-10 10:29:21 -04:00
Diana Catalina Olarte	1c70458590	fix: replace Field.Email reference for Field.Text	2023-09-25 11:10:13 -03:00
Syed Ali Abbas Zaidi	247e9f3668	feat: upgrade react router to v6 (#319 ) * feat: upgrade react router to v6 * refactor: removed remaining router v5 code * refactor: improve code coverage	2023-09-18 11:27:40 -04:00