chore: update frontend-platform version to v4.2.0

Merge pull request #455 from raccoongang/olive/fix-post-sharing-link
fix: post sharing URL
2023-05-09 18:34:53 -03:00 · 2023-03-28 15:58:09 +05:00 · 2023-03-15 00:50:02 +05:00 · 2023-03-10 21:07:19 +05:00 · 2023-02-24 16:52:10 +02:00 · 2023-02-21 17:43:03 +02:00
37 changed files with 688 additions and 321 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.1.0",
-        "@edx/frontend-component-footer": "11.2.0",
-        "@edx/frontend-component-header": "3.2.0",
-        "@edx/frontend-platform": "2.6.1",
+        "@edx/frontend-component-footer": "12.0.0",
+        "@edx/frontend-component-header": "4.0.0",
+        "@edx/frontend-platform": "4.2.0",
        "@edx/paragon": "20.15.0",
        "@reduxjs/toolkit": "1.8.0",
        "@tinymce/tinymce-react": "3.13.1",
@@ -3395,21 +3395,42 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-11.2.0.tgz",
-      "integrity": "sha512-prN6SeoWenbNq6jCqlpmYx57OhNbVGw1wjQFVH+aA5JMjjLUf6PmjPG87fuD9udQyFteb2lvbCyongPEZOozrg==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.0.0.tgz",
+      "integrity": "sha512-m8Rx6ZPWzIN5XLrz6Ft3aTuFo0rty0jECd79CBYWdm0D9KD1WxoYEG+fElluyOQp/t42T5jLImHTSWjFURx5kw==",
      "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "1.2.36",
-        "@fortawesome/free-brands-svg-icons": "5.15.4",
-        "@fortawesome/free-regular-svg-icons": "5.15.4",
-        "@fortawesome/free-solid-svg-icons": "5.15.4",
+        "@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"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^2.3.0",
+        "@edx/frontend-platform": "^4.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"
+      }
+    },
+    "node_modules/@edx/frontend-component-footer/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==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/frontend-component-footer/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==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
      }
    },
    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/react-fontawesome": {
@@ -3425,25 +3446,110 @@
      }
    },
    "node_modules/@edx/frontend-component-header": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-3.2.0.tgz",
-      "integrity": "sha512-ep9yOwe9CG03lSf/QBsBOZO3S/Ksrttgi4MkjpUe/6Sm/KdAnMCOhx2Gbj9jBcFrHqCkpeef26zGjjhpHGDwkQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.0.0.tgz",
+      "integrity": "sha512-r/L3p2ZSI1DitjxVKAor18GmgJllafYslrdpzGI0vcX/gTemH13jf2Xr9iQqrT921DP2nzZ5GOwGJNptTSjiaA==",
      "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "1.2.36",
-        "@fortawesome/free-brands-svg-icons": "5.15.4",
-        "@fortawesome/free-regular-svg-icons": "5.15.4",
-        "@fortawesome/free-solid-svg-icons": "5.15.4",
+        "@edx/paragon": "20.30.1",
+        "@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",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "babel-polyfill": "6.26.0",
        "react-responsive": "8.2.0",
        "react-transition-group": "4.4.5"
      },
      "peerDependencies": {
-        "@edx/frontend-platform": "^2.0.0",
-        "@edx/paragon": ">= 7.0.0 < 21.0.0",
+        "@edx/frontend-platform": "^4.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"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@edx/paragon": {
+      "version": "20.30.1",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.30.1.tgz",
+      "integrity": "sha512-v3Ek8deZWqVKi3IWP08Mj4egrvbmbqQEyRA6+qazHZdgHJA4qOP1SST42UKd9XxPeRbLWUgaJWd0iBAOAna/gw==",
+      "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/free-brands-svg-icons": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.3.0.tgz",
+      "integrity": "sha512-xI0c+a8xnKItAXCN8rZgCNCJQiVAd2Y7p9e2ND6zN3J3ekneu96qrePieJ7yA7073C1JxxoM3vH1RU7rYsaj8w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz",
+      "integrity": "sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
+      "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.3.0"
+      },
+      "engines": {
+        "node": ">=6"
      }
    },
    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/react-fontawesome": {
@@ -3458,18 +3564,63 @@
        "react": ">=16.3"
      }
    },
+    "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": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "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": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "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-component-header/node_modules/uuid": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/@edx/frontend-platform": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.1.tgz",
-      "integrity": "sha512-5ZcHBvwmJRYPPKEqv+H4DbsfW9atr5V2+uY/zX58F/Tqh0T5X8MmgppVjplWFbmon5QV4aNw5C1ViQnirNqUiA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
      "dependencies": {
        "@cospired/i18n-iso-languages": "2.2.0",
        "@formatjs/intl-pluralrules": "4.3.3",
        "@formatjs/intl-relativetimeformat": "10.0.1",
-        "axios": "0.26.1",
-        "axios-cache-adapter": "2.7.3",
+        "axios": "0.27.2",
+        "axios-cache-interceptor": "0.10.7",
        "form-urlencoded": "4.1.4",
-        "glob": "7.2.0",
+        "glob": "7.2.3",
        "history": "4.10.1",
        "i18n-iso-countries": "4.3.1",
        "jwt-decode": "3.1.2",
@@ -3484,24 +3635,58 @@
        "universal-cookie": "4.0.4"
      },
      "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
      },
      "peerDependencies": {
        "@edx/paragon": ">= 10.0.0 < 21.0.0",
        "prop-types": "^15.7.2",
-        "react": "^16.9.0",
-        "react-dom": "^16.9.0",
+        "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/frontend-platform/node_modules/axios": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
-      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "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.8"
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/@edx/frontend-platform/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/frontend-platform/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/@edx/new-relic-source-map-webpack-plugin": {
@@ -3548,27 +3733,6 @@
        "react-intl": "^5.25.1"
      }
    },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
-      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
-      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/@edx/paragon/node_modules/brace-expansion": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3892,62 +4056,89 @@
      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
    },
    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
      "hasInstallScript": true,
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
      },
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "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==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
      },
      "engines": {
        "node": ">=6"
      }
    },
+    "node_modules/@fortawesome/free-brands-svg-icons/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==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
      },
      "engines": {
        "node": ">=6"
      }
    },
+    "node_modules/@fortawesome/free-regular-svg-icons/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==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "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==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
      },
      "engines": {
        "node": ">=6"
      }
    },
+    "node_modules/@fortawesome/free-solid-svg-icons/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==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@fortawesome/react-fontawesome": {
      "version": "0.1.18",
      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
@@ -7486,8 +7677,7 @@
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
@@ -7549,20 +7739,22 @@
      "version": "0.21.4",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
      "dependencies": {
        "follow-redirects": "^1.14.0"
      }
    },
-    "node_modules/axios-cache-adapter": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.3.tgz",
-      "integrity": "sha512-A+ZKJ9lhpjthOEp4Z3QR/a9xC4du1ALaAsejgRGrH9ef6kSDxdFrhRpulqsh9khsEnwXxGfgpUuDp1YXMNMEiQ==",
+    "node_modules/axios-cache-interceptor": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-0.10.7.tgz",
+      "integrity": "sha512-UjpxChG5DpF6Kf1IPGMLOzRDNL8ZNS6TOn1jTaVvCE7cWFU904jJwi0T1s+IbijpnLEjK2iq5uLIuR8Sj+RsFQ==",
      "dependencies": {
-        "cache-control-esm": "1.0.0",
-        "md5": "^2.2.1"
+        "cache-parser": "^1.2.4",
+        "fast-defer": "^1.1.7",
+        "object-code": "^1.2.4"
      },
-      "peerDependencies": {
-        "axios": "~0.21.1"
+      "funding": {
+        "url": "https://github.com/ArthurFiorette/axios-cache-interceptor?sponsor=1"
      }
    },
    "node_modules/axios-mock-adapter": {
@@ -8718,10 +8910,10 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/cache-control-esm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cache-control-esm/-/cache-control-esm-1.0.0.tgz",
-      "integrity": "sha512-Fa3UV4+eIk4EOih8FTV6EEsVKO0W5XWtNs6FC3InTfVz+EjurjPfDXY5wZDo/lxjDxg5RjNcurLyxEJBcEUx9g=="
+    "node_modules/cache-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/cache-parser/-/cache-parser-1.2.4.tgz",
+      "integrity": "sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g=="
    },
    "node_modules/cacheable-request": {
      "version": "2.1.4",
@@ -8954,14 +9146,6 @@
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
      "dev": true
    },
-    "node_modules/charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/check-types": {
      "version": "8.0.3",
      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -9404,7 +9588,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
@@ -9703,14 +9886,6 @@
        "semver": "bin/semver"
      }
    },
-    "node_modules/crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/css": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
@@ -10506,7 +10681,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
      "engines": {
        "node": ">=0.4.0"
      }
@@ -12349,6 +12523,11 @@
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
+    "node_modules/fast-defer": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/fast-defer/-/fast-defer-1.1.7.tgz",
+      "integrity": "sha512-tJ01ulDWT2WhqxMKS20nXX6wyX2iInBYpbN3GO7yjKwXMY4qvkdBRxak9IFwBLlFDESox+SwSvqMCZDfe1tqeg=="
+    },
    "node_modules/fast-glob": {
      "version": "3.2.11",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -13417,6 +13596,7 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -19703,21 +19883,6 @@
        "css-mediaquery": "^0.1.2"
      }
    },
-    "node_modules/md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "dependencies": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      }
-    },
-    "node_modules/md5/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
    "node_modules/mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -20295,6 +20460,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-code": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.2.4.tgz",
+      "integrity": "sha512-uGq4ETUuWe+GA586NXEriiaozNuff+YNFXlpD8cVrM1GoiuTZpCABP+bZCWDrvQDoCiSTyiWAFHD/HF/iwhb2w=="
+    },
    "node_modules/object-copy": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -22285,6 +22455,15 @@
        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -30022,17 +30201,30 @@
      }
    },
    "@edx/frontend-component-footer": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-11.2.0.tgz",
-      "integrity": "sha512-prN6SeoWenbNq6jCqlpmYx57OhNbVGw1wjQFVH+aA5JMjjLUf6PmjPG87fuD9udQyFteb2lvbCyongPEZOozrg==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-12.0.0.tgz",
+      "integrity": "sha512-m8Rx6ZPWzIN5XLrz6Ft3aTuFo0rty0jECd79CBYWdm0D9KD1WxoYEG+fElluyOQp/t42T5jLImHTSWjFURx5kw==",
      "requires": {
-        "@fortawesome/fontawesome-svg-core": "1.2.36",
-        "@fortawesome/free-brands-svg-icons": "5.15.4",
-        "@fortawesome/free-regular-svg-icons": "5.15.4",
-        "@fortawesome/free-solid-svg-icons": "5.15.4",
+        "@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"
      },
      "dependencies": {
+        "@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=="
+        },
+        "@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==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "6.4.0"
+          }
+        },
        "@fortawesome/react-fontawesome": {
          "version": "0.2.0",
          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
@@ -30044,20 +30236,87 @@
      }
    },
    "@edx/frontend-component-header": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-3.2.0.tgz",
-      "integrity": "sha512-ep9yOwe9CG03lSf/QBsBOZO3S/Ksrttgi4MkjpUe/6Sm/KdAnMCOhx2Gbj9jBcFrHqCkpeef26zGjjhpHGDwkQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-4.0.0.tgz",
+      "integrity": "sha512-r/L3p2ZSI1DitjxVKAor18GmgJllafYslrdpzGI0vcX/gTemH13jf2Xr9iQqrT921DP2nzZ5GOwGJNptTSjiaA==",
      "requires": {
-        "@fortawesome/fontawesome-svg-core": "1.2.36",
-        "@fortawesome/free-brands-svg-icons": "5.15.4",
-        "@fortawesome/free-regular-svg-icons": "5.15.4",
-        "@fortawesome/free-solid-svg-icons": "5.15.4",
+        "@edx/paragon": "20.30.1",
+        "@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",
        "@fortawesome/react-fontawesome": "^0.2.0",
        "babel-polyfill": "6.26.0",
        "react-responsive": "8.2.0",
        "react-transition-group": "4.4.5"
      },
      "dependencies": {
+        "@edx/paragon": {
+          "version": "20.30.1",
+          "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.30.1.tgz",
+          "integrity": "sha512-v3Ek8deZWqVKi3IWP08Mj4egrvbmbqQEyRA6+qazHZdgHJA4qOP1SST42UKd9XxPeRbLWUgaJWd0iBAOAna/gw==",
+          "requires": {
+            "@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"
+          },
+          "dependencies": {
+            "@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==",
+              "requires": {
+                "prop-types": "^15.8.1"
+              }
+            }
+          }
+        },
+        "@fortawesome/free-brands-svg-icons": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.3.0.tgz",
+          "integrity": "sha512-xI0c+a8xnKItAXCN8rZgCNCJQiVAd2Y7p9e2ND6zN3J3ekneu96qrePieJ7yA7073C1JxxoM3vH1RU7rYsaj8w==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "6.3.0"
+          }
+        },
+        "@fortawesome/free-regular-svg-icons": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz",
+          "integrity": "sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "6.3.0"
+          }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
+          "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "6.3.0"
+          }
+        },
        "@fortawesome/react-fontawesome": {
          "version": "0.2.0",
          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
@@ -30065,21 +30324,54 @@
          "requires": {
            "prop-types": "^15.8.1"
          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "glob": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^5.0.1",
+            "once": "^1.3.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        },
+        "uuid": {
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+          "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
        }
      }
    },
    "@edx/frontend-platform": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.1.tgz",
-      "integrity": "sha512-5ZcHBvwmJRYPPKEqv+H4DbsfW9atr5V2+uY/zX58F/Tqh0T5X8MmgppVjplWFbmon5QV4aNw5C1ViQnirNqUiA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.2.0.tgz",
+      "integrity": "sha512-iDoFeccENQKBjqUgdjl5KSwBrjNEj8YW6Ual+6twcHHJUBg3yRoBEphwHIoRREcMgQjhdKVAdWj8eleh4JsEKA==",
      "requires": {
        "@cospired/i18n-iso-languages": "2.2.0",
        "@formatjs/intl-pluralrules": "4.3.3",
        "@formatjs/intl-relativetimeformat": "10.0.1",
-        "axios": "0.26.1",
-        "axios-cache-adapter": "2.7.3",
+        "axios": "0.27.2",
+        "axios-cache-interceptor": "0.10.7",
        "form-urlencoded": "4.1.4",
-        "glob": "7.2.0",
+        "glob": "7.2.3",
        "history": "4.10.1",
        "i18n-iso-countries": "4.3.1",
        "jwt-decode": "3.1.2",
@@ -30095,11 +30387,35 @@
      },
      "dependencies": {
        "axios": {
-          "version": "0.26.1",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
-          "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+          "version": "0.27.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+          "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
          "requires": {
-            "follow-redirects": "^1.14.8"
+            "follow-redirects": "^1.14.9",
+            "form-data": "^4.0.0"
+          }
+        },
+        "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==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
          }
        }
      }
@@ -30143,19 +30459,6 @@
        "uncontrollable": "^7.2.1"
      },
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
-          "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
-        },
-        "@fortawesome/fontawesome-svg-core": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
-          "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "6.2.0"
-          }
-        },
        "brace-expansion": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -30479,40 +30782,61 @@
      }
    },
    "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
-      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg=="
    },
    "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.36",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
-      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
      }
    },
    "@fortawesome/free-brands-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "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==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "dependencies": {
+        "@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=="
+        }
      }
    },
    "@fortawesome/free-regular-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "dependencies": {
+        "@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=="
+        }
      }
    },
    "@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.4",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
-      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "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==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.36"
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "dependencies": {
+        "@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=="
+        }
      }
    },
    "@fortawesome/react-fontawesome": {
@@ -33259,8 +33583,7 @@
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "at-least-node": {
      "version": "1.0.0",
@@ -33297,17 +33620,19 @@
      "version": "0.21.4",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dev": true,
      "requires": {
        "follow-redirects": "^1.14.0"
      }
    },
-    "axios-cache-adapter": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.3.tgz",
-      "integrity": "sha512-A+ZKJ9lhpjthOEp4Z3QR/a9xC4du1ALaAsejgRGrH9ef6kSDxdFrhRpulqsh9khsEnwXxGfgpUuDp1YXMNMEiQ==",
+    "axios-cache-interceptor": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-0.10.7.tgz",
+      "integrity": "sha512-UjpxChG5DpF6Kf1IPGMLOzRDNL8ZNS6TOn1jTaVvCE7cWFU904jJwi0T1s+IbijpnLEjK2iq5uLIuR8Sj+RsFQ==",
      "requires": {
-        "cache-control-esm": "1.0.0",
-        "md5": "^2.2.1"
+        "cache-parser": "^1.2.4",
+        "fast-defer": "^1.1.7",
+        "object-code": "^1.2.4"
      }
    },
    "axios-mock-adapter": {
@@ -34227,10 +34552,10 @@
        "unset-value": "^1.0.0"
      }
    },
-    "cache-control-esm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cache-control-esm/-/cache-control-esm-1.0.0.tgz",
-      "integrity": "sha512-Fa3UV4+eIk4EOih8FTV6EEsVKO0W5XWtNs6FC3InTfVz+EjurjPfDXY5wZDo/lxjDxg5RjNcurLyxEJBcEUx9g=="
+    "cache-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/cache-parser/-/cache-parser-1.2.4.tgz",
+      "integrity": "sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g=="
    },
    "cacheable-request": {
      "version": "2.1.4",
@@ -34415,11 +34740,6 @@
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
      "dev": true
    },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
-    },
    "check-types": {
      "version": "8.0.3",
      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -34778,7 +35098,6 @@
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
      "requires": {
        "delayed-stream": "~1.0.0"
      }
@@ -35012,11 +35331,6 @@
        }
      }
    },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
-    },
    "css": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
@@ -35620,8 +35934,7 @@
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
    },
    "depd": {
      "version": "2.0.0",
@@ -37087,6 +37400,11 @@
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
+    "fast-defer": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/fast-defer/-/fast-defer-1.1.7.tgz",
+      "integrity": "sha512-tJ01ulDWT2WhqxMKS20nXX6wyX2iInBYpbN3GO7yjKwXMY4qvkdBRxak9IFwBLlFDESox+SwSvqMCZDfe1tqeg=="
+    },
    "fast-glob": {
      "version": "3.2.11",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
@@ -37870,6 +38188,7 @@
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dev": true,
      "requires": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -42659,23 +42978,6 @@
        "css-mediaquery": "^0.1.2"
      }
    },
-    "md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "requires": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-        }
-      }
-    },
    "mdn-data": {
      "version": "2.0.14",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -43123,6 +43425,11 @@
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
    },
+    "object-code": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.2.4.tgz",
+      "integrity": "sha512-uGq4ETUuWe+GA586NXEriiaozNuff+YNFXlpD8cVrM1GoiuTZpCABP+bZCWDrvQDoCiSTyiWAFHD/HF/iwhb2w=="
+    },
    "object-copy": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -44535,6 +44842,12 @@
        "@babel/runtime": "^7.12.13"
      }
    },
+    "react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "requires": {}
+    },
    "react-dev-utils": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -34,9 +34,9 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.0",
-    "@edx/frontend-component-header": "3.2.0",
-    "@edx/frontend-platform": "2.6.1",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.0",
+    "@edx/frontend-platform": "4.2.0",
    "@edx/paragon": "20.15.0",
    "@reduxjs/toolkit": "1.8.0",
    "@tinymce/tinymce-react": "3.13.1",
--- a/src/components/NavigationBar/data/api.js
+++ b/src/components/NavigationBar/data/api.js
@@ -2,7 +2,7 @@
 import { camelCaseObject } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import { API_BASE_URL } from '../../../data/constants';
+import { getApiBaseUrl } from '../../../data/constants';

 function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
  const data = camelCaseObject(metadata);
@@ -21,7 +21,7 @@ function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
 }

 export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
-  const url = `${API_BASE_URL}/api/course_home/course_metadata/${courseId}`;
+  const url = `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
  // don't know the context of adding timezone in url. hence omitting it
  // url = appendBrowserTimezoneToUrl(url);
  const { data } = await getAuthenticatedHttpClient().get(url);
--- a/src/data/api.js
+++ b/src/data/api.js
@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import { API_BASE_URL } from './constants';
+import { getApiBaseUrl } from './constants';

-export const blocksAPIURL = `${API_BASE_URL}/api/courses/v1/blocks/`;
+export const getBlocksAPIURL = () => `${getApiBaseUrl()}/api/courses/v1/blocks/`;
 export async function getCourseBlocks(courseId, username) {
  const params = {
    course_id: courseId,
@@ -14,6 +14,6 @@ export async function getCourseBlocks(courseId, username) {
    student_view_data: 'discussion',
  };
  const { data } = await getAuthenticatedHttpClient()
-    .get(blocksAPIURL, { params });
+    .get(getBlocksAPIURL(), { params });
  return data;
 }
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -1,6 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';

-export const API_BASE_URL = getConfig().LMS_BASE_URL;
+export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;

 /**
 * Enum for thread types.
--- a/src/data/redux.test.js
+++ b/src/data/redux.test.js
@@ -7,10 +7,11 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { initializeStore } from '../store';
 import { executeThunk } from '../test-utils';
 import { getBlocksAPIResponse } from './__factories__';
-import { blocksAPIURL } from './api';
+import { getBlocksAPIURL } from './api';
 import { RequestStatus } from './constants';
 import { fetchCourseBlocks } from './thunks';

+const blocksAPIURL = getBlocksAPIURL();
 const courseId = 'course-v1:edX+DemoX+Demo_Course';

 let axiosMock;
--- a/src/discussions/cohorts/data/api.js
+++ b/src/discussions/cohorts/data/api.js
@@ -6,9 +6,7 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Comments API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const getCohortsApiUrl = courseId => `${apiBaseUrl}/api/cohorts/v1/courses/${courseId}/cohorts/`;
+export const getCohortsApiUrl = courseId => `${getConfig().LMS_BASE_URL}/api/cohorts/v1/courses/${courseId}/cohorts/`;

 export async function getCourseCohorts(courseId) {
  const params = snakeCaseObject({ courseId });
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -18,6 +18,7 @@ import {
 import { useDispatchWithState } from '../../data/hooks';
 import { DiscussionContext } from '../common/context';
 import { useIsOnDesktop } from '../data/hooks';
+import { EmptyPage } from '../empty-posts';
 import { Post } from '../posts';
 import { selectThread } from '../posts/data/selectors';
 import { fetchThread, markThreadAsRead } from '../posts/data/thunks';
@@ -133,9 +134,9 @@ DiscussionCommentsView.propTypes = {
 };

 function CommentsView({ intl }) {
+  const [isLoading, submitDispatch] = useDispatchWithState();
  const { postId } = useParams();
  const thread = usePost(postId);
-  const dispatch = useDispatch();
  const history = useHistory();
  const location = useLocation();
  const isOnDesktop = useIsOnDesktop();
@@ -143,8 +144,16 @@ function CommentsView({ intl }) {
    courseId, learnerUsername, category, topicId, page, inContext,
  } = useContext(DiscussionContext);

+  useEffect(() => {
+    if (!thread) { submitDispatch(fetchThread(postId, courseId, true)); }
+  }, [postId]);
+
  if (!thread) {
-    dispatch(fetchThread(postId, true));
+    if (!isLoading) {
+      return (
+        <EmptyPage title={intl.formatMessage(messages.noThreadFound)} />
+      );
+    }
    return (
      <Spinner animation="border" variant="primary" data-testid="loading-indicator" />
    );
--- a/src/discussions/comments/CommentsView.test.jsx
+++ b/src/discussions/comments/CommentsView.test.jsx
@@ -13,16 +13,19 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
-import { courseConfigApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
-import { threadsApiUrl } from '../posts/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
-import { commentsApiUrl } from './data/api';
+import { getCommentsApiUrl } from './data/api';

 import '../posts/data/__factories__';
 import './data/__factories__';

+const courseConfigApiUrl = getCourseConfigApiUrl();
+const commentsApiUrl = getCommentsApiUrl();
+const threadsApiUrl = getThreadsApiUrl();
 const discussionPostId = 'thread-1';
 const questionPostId = 'thread-2';
 const closedPostId = 'thread-2';
@@ -102,7 +105,7 @@ function renderComponent(postId) {
 }

 describe('CommentsView', () => {
-  beforeEach(async () => {
+  beforeEach(() => {
    initializeMockApp({
      authenticatedUser: {
        userId: 3,
@@ -147,7 +150,7 @@ describe('CommentsView', () => {
        )];
      });

-    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
    mockAxiosReturnPagedComments();
    mockAxiosReturnPagedCommentsResponses();
  });
@@ -449,9 +452,9 @@ describe('CommentsView', () => {
  describe('for discussion thread', () => {
    const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');

-    it('shown spinner when post isn\'t loaded', async () => {
+    it('shown post not found when post id does not belong to course', async () => {
      renderComponent('unloaded-id');
-      expect(await screen.findByTestId('loading-indicator'))
+      expect(await screen.findByText('Thread not found', { exact: true }))
        .toBeInTheDocument();
    });

--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
@@ -10,6 +10,7 @@ import { Button, useToggle } from '@edx/paragon';
 import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
 import { AlertBanner, DeleteConfirmation, EndorsedAlertBanner } from '../../common';
+import { DiscussionContext } from '../../common/context';
 import { selectBlackoutDate } from '../../data/selectors';
 import { fetchThread } from '../../posts/data/thunks';
 import { inBlackoutDateRange } from '../../utils';
@@ -39,7 +40,9 @@ function Comment({
  const hasMorePages = useSelector(selectCommentHasMorePages(comment.id));
  const currentPage = useSelector(selectCommentCurrentPage(comment.id));
  const blackoutDateRange = useSelector(selectBlackoutDate);
-
+  const {
+    courseId,
+  } = useContext(DiscussionContext);
  useEffect(() => {
    // If the comment has a parent comment, it won't have any children, so don't fetch them.
    if (hasChildren && !currentPage && showFullThread) {
@@ -51,7 +54,7 @@ function Comment({
    [ContentActions.EDIT_CONTENT]: () => setEditing(true),
    [ContentActions.ENDORSE]: async () => {
      await dispatch(editComment(comment.id, { endorsed: !comment.endorsed }, ContentActions.ENDORSE));
-      await dispatch(fetchThread(comment.threadId));
+      await dispatch(fetchThread(comment.threadId, courseId));
    },
    [ContentActions.DELETE]: showDeleteConfirmation,
    [ContentActions.REPORT]: () => dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged })),
--- a/src/discussions/comments/data/api.js
+++ b/src/discussions/comments/data/api.js
@@ -8,9 +8,7 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Comments API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const commentsApiUrl = `${apiBaseUrl}/api/discussion/v1/comments/`;
+export const getCommentsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/comments/`;

 /**
 * Returns all the comments for the specified thread.
@@ -36,7 +34,7 @@ export async function getThreadComments(
  });

  const { data } = await getAuthenticatedHttpClient()
-    .get(commentsApiUrl, { params });
+    .get(getCommentsApiUrl(), { params });
  return data;
 }

@@ -53,7 +51,7 @@ export async function getCommentResponses(
    pageSize,
  } = {},
 ) {
-  const url = `${commentsApiUrl}${commentId}/`;
+  const url = `${getCommentsApiUrl()}${commentId}/`;
  const params = snakeCaseObject({
    page,
    pageSize,
@@ -73,7 +71,7 @@ export async function getCommentResponses(
 */
 export async function postComment(comment, threadId, parentId = null) {
  const { data } = await getAuthenticatedHttpClient()
-    .post(commentsApiUrl, snakeCaseObject({ threadId, raw_body: comment, parentId }));
+    .post(getCommentsApiUrl(), snakeCaseObject({ threadId, raw_body: comment, parentId }));
  return data;
 }

@@ -94,7 +92,7 @@ export async function updateComment(commentId, {
  endorsed,
  editReasonCode,
 }) {
-  const url = `${commentsApiUrl}${commentId}/`;
+  const url = `${getCommentsApiUrl()}${commentId}/`;
  const postData = snakeCaseObject({
    raw_body: comment,
    voted,
@@ -113,7 +111,7 @@ export async function updateComment(commentId, {
 * @param {string} commentId ID of comment to delete
 */
 export async function deleteComment(commentId) {
-  const url = `${commentsApiUrl}${commentId}/`;
+  const url = `${getCommentsApiUrl()}${commentId}/`;
  await getAuthenticatedHttpClient()
    .delete(url);
 }
--- a/src/discussions/comments/data/redux.test.js
+++ b/src/discussions/comments/data/redux.test.js
@@ -7,13 +7,14 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { EndorsementStatus } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
-import { commentsApiUrl } from './api';
+import { getCommentsApiUrl } from './api';
 import {
  addComment, editComment, fetchCommentResponses, fetchThreadComments, removeComment,
 } from './thunks';

 import './__factories__';

+const commentsApiUrl = getCommentsApiUrl();
 let axiosMock;
 let store;

--- a/src/discussions/comments/messages.js
+++ b/src/discussions/comments/messages.js
@@ -182,6 +182,11 @@ const messages = defineMessages({
    defaultMessage: '{time} ago',
    description: 'Time text for endorse banner',
  },
+  noThreadFound: {
+    id: 'discussion.thread.notFound',
+    defaultMessage: 'Thread not found',
+    description: 'message to show on screen if the request thread is not found in course',
+  },
 });

 export default messages;
--- a/src/discussions/common/AuthorLabel.test.jsx
+++ b/src/discussions/common/AuthorLabel.test.jsx
@@ -10,12 +10,13 @@ import { AppProvider } from '@edx/frontend-platform/react';

 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
-import { courseConfigApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
 import AuthorLabel from './AuthorLabel';
 import { DiscussionContext } from './context';

 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;
 let container;
--- a/src/discussions/data/api.js
+++ b/src/discussions/data/api.js
@@ -7,16 +7,14 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Posts API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const courseConfigApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
+export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;

 /**
 * Get discussions course config
 * @param {string} courseId
 */
 export async function getDiscussionsConfig(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/`;
+  const url = `${getCourseConfigApiUrl()}${courseId}/`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
@@ -26,7 +24,7 @@ export async function getDiscussionsConfig(courseId) {
 * @param {string} courseId
 */
 export async function getDiscussionsSettings(courseId) {
-  const url = `${courseConfigApiUrl}${courseId}/settings`;
+  const url = `${getCourseConfigApiUrl()}${courseId}/settings`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
--- a/src/discussions/discussions-home/DiscussionSidebar.test.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.test.jsx
@@ -13,7 +13,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
-import { threadsApiUrl } from '../posts/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
 import DiscussionSidebar from './DiscussionSidebar';

 import '../posts/data/__factories__';
@@ -21,6 +21,7 @@ import '../posts/data/__factories__';
 let store;
 let container;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const threadsApiUrl = getThreadsApiUrl();
 let axiosMock;

 function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
--- a/src/discussions/empty-posts/EmptyPosts.test.jsx
+++ b/src/discussions/empty-posts/EmptyPosts.test.jsx
@@ -12,7 +12,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import messages from '../messages';
-import { threadsApiUrl } from '../posts/data/api';
+import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import EmptyPosts from './EmptyPosts';

@@ -20,6 +20,7 @@ import '../posts/data/__factories__';

 let store;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const threadsApiUrl = getThreadsApiUrl();

 function renderComponent(location = `/${courseId}/`) {
  return render(
--- a/src/discussions/empty-posts/EmptyTopics.test.jsx
+++ b/src/discussions/empty-posts/EmptyTopics.test.jsx
@@ -9,7 +9,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { API_BASE_URL } from '../../data/constants';
+import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import messages from '../messages';
@@ -20,7 +20,7 @@ import '../topics/data/__factories__';

 let store;
 const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;

 function renderComponent(location = `/${courseId}/topics/`) {
  return render(
--- a/src/discussions/learners/LearnerPostsView.test.jsx
+++ b/src/discussions/learners/LearnerPostsView.test.jsx
@@ -14,15 +14,17 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
-import { courseConfigApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
-import { coursesApiUrl } from './data/api';
+import { getCoursesApiUrl } from './data/api';
 import LearnerPostsView from './LearnerPostsView';

 import './data/__factories__';

 let store;
 let axiosMock;
+const coursesApiUrl = getCoursesApiUrl();
+const courseConfigApiUrl = getCourseConfigApiUrl();
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const username = 'abc123';

--- a/src/discussions/learners/LearnersView.test.jsx
+++ b/src/discussions/learners/LearnersView.test.jsx
@@ -13,9 +13,9 @@ import { AppProvider } from '@edx/frontend-platform/react';

 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
-import { courseConfigApiUrl } from '../data/api';
+import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
-import { coursesApiUrl, userProfileApiUrl } from './data/api';
+import { getCoursesApiUrl, getUserProfileApiUrl } from './data/api';
 import { fetchLearners } from './data/thunks';
 import LearnersView from './LearnersView';

@@ -23,6 +23,9 @@ import './data/__factories__';

 let store;
 let axiosMock;
+const coursesApiUrl = getCoursesApiUrl();
+const courseConfigApiUrl = getCourseConfigApiUrl();
+const userProfileApiUrl = getUserProfileApiUrl();
 const courseId = 'course-v1:edX+TestX+Test_Course';

 function renderComponent() {
--- a/src/discussions/learners/data/api.js
+++ b/src/discussions/learners/data/api.js
@@ -8,10 +8,8 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Posts API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const coursesApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
-export const userProfileApiUrl = `${apiBaseUrl}/api/user/v1/accounts`;
+export const getCoursesApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
+export const getUserProfileApiUrl = () => `${getConfig().LMS_BASE_URL}/api/user/v1/accounts`;

 /**
 * Fetches all the learners in the given course.
@@ -20,7 +18,7 @@ export const userProfileApiUrl = `${apiBaseUrl}/api/user/v1/accounts`;
 * @returns {Promise<{}>}
 */
 export async function getLearners(courseId, params) {
-  const url = `${coursesApiUrl}${courseId}/activity_stats/`;
+  const url = `${getCoursesApiUrl()}${courseId}/activity_stats/`;
  const { data } = await getAuthenticatedHttpClient().get(url, { params });
  return data;
 }
@@ -30,7 +28,7 @@ export async function getLearners(courseId, params) {
 * @param {string} usernames
 */
 export async function getUserProfiles(usernames) {
-  const url = `${userProfileApiUrl}?username=${usernames.join()}`;
+  const url = `${getUserProfileApiUrl()}?username=${usernames.join()}`;
  const { data } = await getAuthenticatedHttpClient().get(url);
  return data;
 }
@@ -67,7 +65,7 @@ export async function getUserPosts(courseId, {
  countFlagged,
  cohort,
 } = {}) {
-  const learnerPostsApiUrl = `${coursesApiUrl}${courseId}/learner/`;
+  const learnerPostsApiUrl = `${getCoursesApiUrl()}${courseId}/learner/`;

  const params = snakeCaseObject({
    page,
--- a/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.test.jsx
+++ b/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.test.jsx
@@ -13,8 +13,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

 import { getBlocksAPIResponse } from '../../../data/__factories__';
-import { blocksAPIURL } from '../../../data/api';
-import { API_BASE_URL, Routes } from '../../../data/constants';
+import { getBlocksAPIURL } from '../../../data/api';
+import { getApiBaseUrl, Routes } from '../../../data/constants';
 import { fetchCourseBlocks } from '../../../data/thunks';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
@@ -25,7 +25,7 @@ import { BreadcrumbMenu } from '../index';
 import '../../topics/data/__factories__';

 const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v2/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
 let store;
 let axiosMock;

@@ -78,7 +78,7 @@ describe('BreadcrumbMenu', () => {
    Factory.resetAll();
    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
    blocksAPIResponse = getBlocksAPIResponse();
-    axiosMock.onGet(blocksAPIURL)
+    axiosMock.onGet(getBlocksAPIURL())
      .reply(200, blocksAPIResponse);
    await executeThunk(fetchCourseBlocks(courseId, 'test-user'), store.dispatch, store.getState);
    const data = [
--- a/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx
+++ b/src/discussions/navigation/breadcrumb-menu/LegacyBreadcrumbMenu.test.jsx
@@ -12,7 +12,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { API_BASE_URL, Routes } from '../../../data/constants';
+import { getApiBaseUrl, Routes } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
 import { fetchCourseTopics } from '../../topics/data/thunks';
@@ -21,7 +21,7 @@ import { LegacyBreadcrumbMenu } from '../index';
 import '../../topics/data/__factories__';

 const courseId = 'course-v1:edX+TestX+Test_Course';
-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
 let store;
 let axiosMock;

--- a/src/discussions/posts/PostsList.jsx
+++ b/src/discussions/posts/PostsList.jsx
@@ -48,7 +48,7 @@ function PostsList({ posts, topics, intl }) {
      topicIds,
    };

-    if (showOwnPosts) {
+    if (showOwnPosts && filters.search === '') {
      dispatch(fetchUserPosts(courseId, params));
    } else {
      dispatch(fetchThreads(courseId, params));
--- a/src/discussions/posts/PostsView.test.jsx
+++ b/src/discussions/posts/PostsView.test.jsx
@@ -18,14 +18,16 @@ import { initializeStore } from '../../store';
 import { getCohortsApiUrl } from '../cohorts/data/api';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
-import { coursesApiUrl } from '../learners/data/api';
-import { threadsApiUrl } from './data/api';
+import { getCoursesApiUrl } from '../learners/data/api';
+import { getThreadsApiUrl } from './data/api';
 import { PostsView } from './index';

 import './data/__factories__';
 import '../cohorts/data/__factories__';

 const courseId = 'course-v1:edX+TestX+Test_Course';
+const coursesApiUrl = getCoursesApiUrl();
+const threadsApiUrl = getThreadsApiUrl();
 let store;
 let axiosMock;
 const username = 'abc123';
--- a/src/discussions/posts/data/api.js
+++ b/src/discussions/posts/data/api.js
@@ -8,10 +8,8 @@ ensureConfig([
  'LMS_BASE_URL',
 ], 'Posts API service');

-const apiBaseUrl = getConfig().LMS_BASE_URL;
-
-export const threadsApiUrl = `${apiBaseUrl}/api/discussion/v1/threads/`;
-export const coursesApiUrl = `${apiBaseUrl}/api/discussion/v1/courses/`;
+export const getThreadsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/threads/`;
+export const getCoursesApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;

 /**
 * Fetches all the threads in the given course and topic.
@@ -62,7 +60,7 @@ export async function getThreads(
    countFlagged,
    groupId: cohort,
  });
-  const { data } = await getAuthenticatedHttpClient().get(threadsApiUrl, { params });
+  const { data } = await getAuthenticatedHttpClient().get(getThreadsApiUrl(), { params });
  return data;
 }

@@ -71,9 +69,9 @@ export async function getThreads(
 * @param {string} threadId
 * @returns {Promise<{}>}
 */
-export async function getThread(threadId) {
-  const params = { requested_fields: 'profile_image' };
-  const url = `${threadsApiUrl}${threadId}/`;
+export async function getThread(threadId, courseId) {
+  const params = { requested_fields: 'profile_image', course_id: courseId };
+  const url = `${getThreadsApiUrl()}${threadId}/`;
  const { data } = await getAuthenticatedHttpClient().get(url, { params });
  return data;
 }
@@ -117,7 +115,7 @@ export async function postThread(
  });

  const { data } = await getAuthenticatedHttpClient()
-    .post(threadsApiUrl, postData);
+    .post(getThreadsApiUrl(), postData);
  return data;
 }

@@ -152,7 +150,7 @@ export async function updateThread(threadId, {
  editReasonCode,
  closeReasonCode,
 } = {}) {
-  const url = `${threadsApiUrl}${threadId}/`;
+  const url = `${getThreadsApiUrl()}${threadId}/`;
  const patchData = snakeCaseObject({
    topicId,
    abuse_flagged: flagged,
@@ -177,7 +175,7 @@ export async function updateThread(threadId, {
 * @param {string} threadId
 */
 export async function deleteThread(threadId) {
-  const url = `${threadsApiUrl}${threadId}/`;
+  const url = `${getThreadsApiUrl()}${threadId}/`;
  await getAuthenticatedHttpClient()
    .delete(url);
 }
@@ -191,7 +189,7 @@ export async function deleteThread(threadId) {
 * @returns {Promise<{ location: string }>}
 */
 export async function uploadFile(blob, filename, courseId, threadKey) {
-  const uploadUrl = `${coursesApiUrl}${courseId}/upload`;
+  const uploadUrl = `${getCoursesApiUrl()}${courseId}/upload`;
  const formData = new FormData();
  formData.append('thread_key', threadKey);
  formData.append('uploaded_file', blob, filename);
--- a/src/discussions/posts/data/api.test.js
+++ b/src/discussions/posts/data/api.test.js
@@ -3,9 +3,10 @@ import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform/testing';

-import { coursesApiUrl, uploadFile } from './api';
+import { getCoursesApiUrl, uploadFile } from './api';

 const courseId = 'course-v1:edX+TestX+Test_Course';
+const coursesApiUrl = getCoursesApiUrl();

 let axiosMock = null;

--- a/src/discussions/posts/data/redux.test.js
+++ b/src/discussions/posts/data/redux.test.js
@@ -6,7 +6,7 @@ import { initializeMockApp } from '@edx/frontend-platform/testing';

 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
-import { threadsApiUrl } from './api';
+import { getThreadsApiUrl } from './api';
 import {
  createNewThread, fetchThread, fetchThreads, removeThread, updateExistingThread,
 } from './thunks';
@@ -14,6 +14,7 @@ import {
 import './__factories__';

 const courseId = 'course-v1:edX+TestX+Test_Course';
+const threadsApiUrl = getThreadsApiUrl();

 let axiosMock;
 let store;
--- a/src/discussions/posts/data/thunks.js
+++ b/src/discussions/posts/data/thunks.js
@@ -154,18 +154,18 @@ export function fetchThreads(courseId, {
  };
 }

-export function fetchThread(threadId, isDirectLinkPost = false) {
+export function fetchThread(threadId, courseId, isDirectLinkPost = false) {
  return async (dispatch) => {
    try {
      dispatch(fetchThreadRequest({ threadId }));
-      const data = await getThread(threadId);
+      const data = await getThread(threadId, courseId);
      if (isDirectLinkPost) {
        dispatch(fetchThreadByDirectLinkSuccess({ ...normaliseThreads(camelCaseObject(data)), page: 1 }));
      } else {
        dispatch(fetchThreadSuccess(normaliseThreads(camelCaseObject(data))));
      }
    } catch (error) {
-      if (getHttpErrorStatus(error) === 403) {
+      if (getHttpErrorStatus(error) === 403 || getHttpErrorStatus(error) === 404) {
        dispatch(fetchThreadDenied());
      } else {
        dispatch(fetchThreadFailed());
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -33,6 +33,7 @@ import {
  selectUserIsGroupTa,
  selectUserIsStaff,
 } from '../../data/selectors';
+import { EmptyPage } from '../../empty-posts';
 import { selectCoursewareTopics, selectNonCoursewareIds, selectNonCoursewareTopics } from '../../topics/data/selectors';
 import {
  discussionsPath, formikCompatibleHandler, isFormikFieldInvalid, useCommentsPagePath,
@@ -193,16 +194,25 @@ function PostEditor({
      dispatch(fetchCourseCohorts(courseId));
    }
    if (editExisting) {
-      dispatch(fetchThread(postId));
+      dispatchSubmit(fetchThread(postId, courseId));
    }
  }, [courseId, editExisting]);

  if (editExisting && !post) {
-    return (
-      <div className="m-4 card p-4 align-items-center">
-        <Spinner animation="border" variant="primary" />
-      </div>
-    );
+    if (submitting) {
+      return (
+        <div className="m-4 card p-4 align-items-center">
+          <Spinner animation="border" variant="primary" />
+        </div>
+      );
+    }
+    if (!submitting) {
+      return (
+        <EmptyPage
+          title={intl.formatMessage(messages.noThreadFound)}
+        />
+      );
+    }
  }

  const validationSchema = Yup.object().shape({
--- a/src/discussions/posts/post-editor/PostEditor.test.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.test.jsx
@@ -12,13 +12,13 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { API_BASE_URL, Routes } from '../../../data/constants';
+import { getApiBaseUrl, Routes } from '../../../data/constants';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
 import { getCohortsApiUrl } from '../../cohorts/data/api';
 import { DiscussionContext } from '../../common/context';
 import { fetchCourseTopics } from '../../topics/data/thunks';
-import { threadsApiUrl } from '../data/api';
+import { getThreadsApiUrl } from '../data/api';
 import { fetchThread } from '../data/thunks';
 import { PostEditor } from '../index';

@@ -28,7 +28,8 @@ import '../../topics/data/__factories__';
 import '../data/__factories__';

 const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
+const threadsApiUrl = getThreadsApiUrl();
 let store;
 let axiosMock;

--- a/src/discussions/posts/post-editor/messages.js
+++ b/src/discussions/posts/post-editor/messages.js
@@ -131,6 +131,11 @@ const messages = defineMessages({
    defaultMessage: 'Unnamed subcategory',
    description: 'display string for topics with missing names',
  },
+  noThreadFound: {
+    id: 'discussion.thread.notFound',
+    defaultMessage: 'Thread not found',
+    description: 'message to show on screen if the request thread is not found in course',
+  },
 });

 export default messages;
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';

+import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';

@@ -35,6 +36,9 @@ function Post({
  const { reasonCodesEnabled } = useSelector(selectModerationSettings);
  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
  const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
+
+  const postURL = new URL(`${getConfig().PUBLIC_PATH}${courseId}/posts/${post.id}`, window.location.origin);
+
  const actionHandlers = {
    [ContentActions.EDIT_CONTENT]: () => history.push({
      ...location,
@@ -50,7 +54,7 @@ function Post({
        dispatch(updateExistingThread(post.id, { closed: true }));
      }
    },
-    [ContentActions.COPY_LINK]: () => { navigator.clipboard.writeText(`${window.location.origin}/${courseId}/posts/${post.id}`); },
+    [ContentActions.COPY_LINK]: () => { navigator.clipboard.writeText(postURL.href); },
    [ContentActions.PIN]: () => dispatch(updateExistingThread(post.id, { pinned: !post.pinned })),
    [ContentActions.REPORT]: () => dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged })),
  };
--- a/src/discussions/posts/post/PostLink.test.jsx
+++ b/src/discussions/posts/post/PostLink.test.jsx
@@ -11,11 +11,12 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../../store';
 import { executeThunk } from '../../../test-utils';
 import { DiscussionContext } from '../../common/context';
-import { courseConfigApiUrl } from '../../data/api';
+import { getCourseConfigApiUrl } from '../../data/api';
 import { fetchCourseConfig } from '../../data/thunks';
 import PostLink from './PostLink';

 const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;

--- a/src/discussions/topics/TopicsView.test.jsx
+++ b/src/discussions/topics/TopicsView.test.jsx
@@ -11,8 +11,8 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

 import { getBlocksAPIResponse } from '../../data/__factories__';
-import { blocksAPIURL } from '../../data/api';
-import { API_BASE_URL, DiscussionProvider } from '../../data/constants';
+import { getBlocksAPIURL } from '../../data/api';
+import { DiscussionProvider, getApiBaseUrl } from '../../data/constants';
 import { selectSequences } from '../../data/selectors';
 import { fetchCourseBlocks } from '../../data/thunks';
 import { initializeStore } from '../../store';
@@ -26,8 +26,8 @@ import './data/__factories__';

 const courseId = 'course-v1:edX+DemoX+Demo_Course';

-const topicsApiUrl = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
-const topicsv2ApiUrl = `${API_BASE_URL}/api/discussion/v2/course_topics/${courseId}`;
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
+const topicsv2ApiUrl = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
 let store;
 let axiosMock;
 let lastLocation;
@@ -113,7 +113,7 @@ describe('TopicsView', () => {
        axiosMock
          .onGet(topicsv2ApiUrl)
          .reply(200, data);
-        axiosMock.onGet(blocksAPIURL)
+        axiosMock.onGet(getBlocksAPIURL())
          .reply(200, getBlocksAPIResponse(true));
        axiosMock.onAny().networkError();
        await executeThunk(fetchCourseBlocks(courseId, 'abc123'), store.dispatch, store.getState);
--- a/src/discussions/topics/data/api.js
+++ b/src/discussions/topics/data/api.js
@@ -1,10 +1,10 @@
 /* eslint-disable import/prefer-default-export */
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';

-import { API_BASE_URL } from '../../../data/constants';
+import { getApiBaseUrl } from '../../../data/constants';

 export async function getCourseTopics(courseId, topicIds) {
-  const url = `${API_BASE_URL}/api/discussion/v1/course_topics/${courseId}`;
+  const url = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
  const params = {};
  if (topicIds) {
    params.topic_id = topicIds.join(',');
@@ -15,7 +15,7 @@ export async function getCourseTopics(courseId, topicIds) {
 }

 export async function getCourseTopicsV2(courseId, topicIds) {
-  const url = `${API_BASE_URL}/api/discussion/v2/course_topics/${courseId}`;
+  const url = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
  const params = {};
  if (topicIds) {
    params.topic_id = topicIds.join(',');
--- a/src/index.scss
+++ b/src/index.scss
@@ -254,3 +254,12 @@ header {
    align-self: center;
  }
 }
+
+.post-preview,
+.discussion-comments {
+  blockquote {
+    border-left: 2px solid #ccc;
+    margin-left: 1.5rem;
+    padding-left: 1rem;
+  }
+}
Author	SHA1	Message	Date
Sagirov Eugeniy	0f7921ad1e	chore: update frontend-platform version to v4.2.0	2023-05-09 18:34:53 -03:00
AsadAzam	8a6d067481	Merge pull request #455 from raccoongang/olive/fix-post-sharing-link fix: post sharing URL	2023-03-28 15:58:09 +05:00
Eugene Dyudyunov	947dd1f1a6	fix: my posts tab search (#467 ) This is a backport from the master branch: https://github.com/openedx/frontend-app-discussions/pull/419	2023-03-15 00:50:02 +05:00
AsadAzam	e158964c41	Merge pull request #449 from raccoongang/lunyachek/fix/discussion-code-block-formatting-olive fix: Fix for code block formatting on the post preview and published post view	2023-03-10 21:07:19 +05:00
Eugene Dyudyunov	7dfbd44552	fix: post sharing URL When MFE uses path-based deployment (common domain for all MFEs divided by path) - the copied link leads to 404 error. The fix: - construct a Post URL using MFE's `PUBLIC_PATH` env var - works for both subdomain and subdirectory-based deployments Note: LMS recently started to use the discussions sidebar which has the same button "Copy Link", but it uses its own env variable `DISCUSSIONS_MFE_BASE_URL`	2023-02-24 16:52:10 +02:00
lunyachek	d9e60ddd92	fix: Fix for code block formatting on the post preview and published post view	2023-02-21 17:43:03 +02:00
Adolfo R. Brandes	8d35a729d2	feat: Support runtime configuration frontend-platform supports runtime configuration since 2.5.0 (see the PR that introduced it[1], but it requires MFE cooperation. This implements just that: by avoiding making configuration values constant, it should now be possible to change them after initialization. Almost all changes here relate to the `LMS_BASE_URL` setting, which in most places was treated as a constant. [1] https://github.com/openedx/frontend-platform/pull/335 This is a backport to Olive of https://github.com/openedx/frontend-app-discussions/pull/377	2022-12-09 10:40:46 +00:00
Mehak Nasir	e89792b8d8	fix: handled thread not found result on frontend	2022-12-08 10:44:41 +00:00