fix: update env.config.jsx according to tutor-mfe#240 PR (#109)

* fix: update env.config.jsx according to tutor-mfe#240 PR

* chore: install tutor-mfe main branch

.github/workflows/test.yml

@@ -20,5 +20,6 @@ jobs:
       - name: Install dependencies
         run: |
           pip install .[dev]
+          pip install --upgrade --editable git+https://github.com/overhangio/tutor-mfe.git@main#egg=tutor-mfe
       - name: Test lint, types, and format
         run: make test

tutorindigo/templates/indigo/env.config.jsx → tutorindigo/patches/mfe-env-config-buildtime-definitions

@@ -1,9 +1,4 @@
-import React, { useEffect } from 'react';
-import Cookies from 'universal-cookie';
 
-import Footer from '@edly-io/indigo-frontend-component-footer';
-import { getConfig } from '@edx/frontend-platform';
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
 let themeCookie = 'indigo-toggle-dark';
 let themeCookieExpiry = 90; // days
@@ -70,35 +65,3 @@ const AddDarkTheme = () => {
 
   return (<div />);
 };
-
-const themePluginSlot = {
-  keepDefault: false,
-  plugins: [
-    {
-      op: PLUGIN_OPERATIONS.Insert,
-      widget: {
-        id: 'default_contents',
-        type: DIRECT_PLUGIN,
-        priority: 1,
-        RenderWidget: <Footer />,
-      },
-    },
-    {
-      op: PLUGIN_OPERATIONS.Insert,
-      widget: {
-        id: 'read_theme_cookie',
-        type: DIRECT_PLUGIN,
-        priority: 2,
-        RenderWidget: AddDarkTheme,
-      },
-    },
-  ],
-};
-
-const config = {
-  pluginSlots: {
-    footer_slot: themePluginSlot,
-  },
-};
-
-export default config;

tutorindigo/patches/mfe-env-config-buildtime-imports

@@ -0,0 +1,4 @@
+import React, { useEffect } from 'react';
+import Cookies from 'universal-cookie';
+
+import { getConfig } from '@edx/frontend-platform';

tutorindigo/patches/mfe-env-config-runtime-definitions

@@ -0,0 +1,2 @@
+
+const { default: IndigoFooter } = await import('@edly-io/indigo-frontend-component-footer');

tutorindigo/plugin.py

@@ -1,10 +1,12 @@
 from __future__ import annotations
 
 import os
+from glob import glob
 import typing as t
 
 import importlib_resources
 from tutor import hooks
+from tutormfe.hooks import PLUGIN_SLOTS
 from tutor.__about__ import __version_suffix__
 
 from .__about__ import __version__
@@ -102,70 +104,38 @@ def _override_openedx_docker_image(
 hooks.Filters.CONFIG_OVERRIDES.add_items(list(config["overrides"].items()))
 
 
+#  MFEs that are styled using Indigo
+indigo_styled_mfes = [
+    "learning",
+    "learner-dashboard",
+    "profile",
+    "account",
+    "discussions",
+]
+
 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",
+            f"mfe-dockerfile-post-npm-install-{mfe}",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
+            
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
-
-COPY indigo/env.config.jsx /openedx/app/
-""",
-        ),
-        (
-            "mfe-dockerfile-post-npm-install-authn",
-            """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
-""",
-        ),
-        # Tutor-Indigo v2.1 targets the styling updates in discussions and learner-dashboard MFE
-        # brand-openedx is related to styling updates while others are for header and footer updates
-        (
-            "mfe-dockerfile-post-npm-install-discussions",
-            """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
 RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
-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.1.1'
-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.1.1'
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
-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.1.1'
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
-RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
-
-COPY indigo/env.config.jsx /openedx/app/
-""",
-        ),
+        )
+        for mfe in indigo_styled_mfes
     ]
 )
 
+hooks.Filters.ENV_PATCHES.add_item(
+    (
+        "mfe-dockerfile-post-npm-install-authn",
+        "RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'",
+    )
+)
+
 # Include js file in lms main.html, main_django.html, and certificate.html
 
 hooks.Filters.ENV_PATCHES.add_items(
@@ -204,3 +174,47 @@ def _override_openedx_docker_image(
         ),
     ]
 )
+
+
+# Apply patches from tutor-indigo
+for path in glob(
+    os.path.join(
+        str(importlib_resources.files("tutorindigo") / "patches"),
+        "*",
+    )
+):
+    with open(path, encoding="utf-8") as patch_file:
+        hooks.Filters.ENV_PATCHES.add_item((os.path.basename(path), patch_file.read()))
+
+
+for mfe in indigo_styled_mfes:
+    PLUGIN_SLOTS.add_item(
+        (
+            mfe,
+            "footer_slot",
+            """ 
+            {
+                op: PLUGIN_OPERATIONS.Hide,
+                widgetId: 'default_contents',
+            },
+            {
+                op: PLUGIN_OPERATIONS.Insert,
+                widget: {
+                    id: 'default_contents',
+                    type: DIRECT_PLUGIN,
+                    priority: 1,
+                    RenderWidget: <IndigoFooter />,
+                },
+            },
+            {
+                op: PLUGIN_OPERATIONS.Insert,
+                widget: {
+                    id: 'read_theme_cookie',
+                    type: DIRECT_PLUGIN,
+                    priority: 2,
+                    RenderWidget: AddDarkTheme,
+                },
+            },
+  """,
+        ),
+    )