fix: problem displaying /account/ page after upgraded to redwood (ove…

…rhangio#96) * fix: account-mfe bug * refactor: remove unused useEffect in env.config.jsx and add comment
edly-io · Aug 27, 2024 · f9a90a4 · f9a90a4
1 parent ef0bb22
commit f9a90a4
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py
@@ -47,6 +47,7 @@
 hooks.Filters.ENV_TEMPLATE_TARGETS.add_items(
     [
         ("indigo", "build/openedx/themes"),
+        ("indigo/env.config.jsx", "plugins/mfe/build/mfe"),
     ],
 )
 
@@ -103,12 +104,16 @@ def _override_openedx_docker_image(
 
 hooks.Filters.ENV_PATCHES.add_items(
     [
+        # MFE will install header version 3.0.x and will include indigo-footer as a
+        # separate package for use in env.config.jsx
         (
             "mfe-dockerfile-post-npm-install-learning",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.0.0'
-RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^2.0.0'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
+
+COPY indigo/env.config.jsx /openedx/app/
 """,
         ),
         (
@@ -123,32 +128,39 @@ def _override_openedx_docker_image(
             "mfe-dockerfile-post-npm-install-discussions",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.0.0'
-RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^2.0.0'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
+
+COPY indigo/env.config.jsx /openedx/app/
 """,
         ),
         (
             "mfe-dockerfile-post-npm-install-learner-dashboard",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^2.0.0'
+RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
+
+COPY indigo/env.config.jsx /openedx/app/
 """,
         ),
         (
             "mfe-dockerfile-post-npm-install-profile",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.0.0'
-RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^2.0.0'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
+COPY indigo/env.config.jsx /openedx/app/
 """,
         ),
         (
             "mfe-dockerfile-post-npm-install-account",
             """
 RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.0.0'
-RUN npm install '@edx/frontend-component-footer@npm:@edly-io/indigo-frontend-component-footer@^2.0.0'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
+
+COPY indigo/env.config.jsx /openedx/app/
 """,
         ),
     ]

diff --git a/tutorindigo/templates/indigo/env.config.jsx b/tutorindigo/templates/indigo/env.config.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Footer from '@edly-io/indigo-frontend-component-footer';
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const themePluginSlot = {
+  keepDefault: false,
+  plugins: [
+    {
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'default_contents',
+        type: DIRECT_PLUGIN,
+        priority: 1,
+        RenderWidget: <Footer />,
+      },
+    }
+  ],
+};
+
+const config = {
+  pluginSlots: {
+    footer_slot: themePluginSlot,
+  },
+};
+
+export default config;