feat: use frontend-plugin-framework to provide a FooterSlot

README.md

@@ -108,6 +108,11 @@ check the ``enabled`` and ``enabled for all courses`` boxes.
 numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
 recalculated grade values, verify you've set all flags correctly.
 
+## Plugins
+This MFE can be customized using [Frontend Plugin Framework](https://github.com/openedx/frontend-plugin-framework).
+
+The parts of this MFE that can be customized in that manner are documented [here](/src/plugin-slots).
+
 ## Running tests
 
 1. Assuming that you're operating in the context of the edX devstack,

package.json

@@ -29,11 +29,12 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^13.0.2",
     "@edx/frontend-component-header": "^5.0.2",
     "@edx/frontend-platform": "^7.1.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/react-unit-test-utils": "^2.0.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.1.1",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",

src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import Header from '@edx/frontend-component-header';
 
 import store from 'data/store';
@@ -24,7 +24,7 @@ const App = () => (
           />
         </Routes>
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
     </div>
   </AppProvider>
 );

src/App.test.jsx

@@ -3,8 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { Route } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
-
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
@@ -18,13 +16,12 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');
 jest.mock('./head/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 let secondChild;
 
@@ -34,7 +31,6 @@ describe('App router component', () => {
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
       secondChild = el.instance.children;
     });
@@ -63,8 +59,5 @@ describe('App router component', () => {
         expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(secondChild[1].findByType(Footer)[0].props.logo).toEqual(logo);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`App router component snapshot 1`] = `
         />
       </Routes>
     </main>
-    <Footer />
+    <FooterSlot />
   </div>
 </AppProvider>
 `;

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-app-gradebook` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)