🔧(frontend) allow overriding of any module

Previously, the frontend overriding system was designed to override only
components modules. We should be able to override any modules.

.circleci/config.yml

@@ -715,7 +715,7 @@ jobs:
           command: |
             mkdir -p js/components/Spinner
             cp -R ~/fun/src/frontend/js/components/Spinner/*.tsx js/components/Spinner
-            echo '{"overrides": {"Spinner/index.tsx": "../../../../../js/components/Spinner/index.tsx"}}' > overrides.json
+            echo '{"overrides": {"components/Spinner/index.tsx$": "../../../../../js/components/Spinner/index.tsx"}}' > overrides.json
       - run:
           name: Create scss/_main.scss file using richie-education styles & mixins
           command: |

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unrealeased]
 
+### Changed
+
+- Update frontend overriding system to allow to override any frontend module.
+
 ## [2.13.0] - 2022-02-18
 
 ### Added

UPGRADE.md

@@ -16,6 +16,15 @@ $ make migrate
 
 ## Unreleased
 
+- Frontend override system has been updated to allow overriding of any frontend module.
+  Thus if you override some components, you have to update the module regexp by prefixing
+  with `components/`.
+
+  ```diff
+    - "CourseGlimpse/CourseGlimpseFooter.tsx": "../../../../../js/components/CourseGlimpse/CourseGlimpseFooter.tsx"
+    + "components/CourseGlimpse/CourseGlimpseFooter.tsx$": "../../../../../js/components/CourseGlimpse/CourseGlimpseFooter.tsx"
+  ```
+
 ## 2.12.x to 2.13.x
 
 - Add `dal` and `dal_select2` to your installed apps.

src/frontend/webpack.config.js

@@ -108,11 +108,7 @@ module.exports = (env) => {
     plugins: [
       // Use module replacement to override any number of Richie components as defined in the settings
       ...Object.entries(overrides).map(
-        (entry) =>
-          new webpack.NormalModuleReplacementPlugin(
-            new RegExp(`components\/${entry[0]}$`),
-            entry[1],
-          ),
+        (entry) => new webpack.NormalModuleReplacementPlugin(new RegExp(entry[0]), entry[1]),
       ),
       // Provide the current running version as a global to our bundle. This is useful for eg. reporting
       // errors when using different versions in the backend and frontend.