feat: use frontend-plugin-framework to provide a FooterSlot (#345)

.env.development

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'

.env.test

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'

README.rst

@@ -30,6 +30,12 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.
 
+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>`_.
+
 Contributing
 ------------
 

example.env.config.js

@@ -29,7 +29,6 @@ module.exports = {
   LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
   LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
   LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-  LOGO_POWERED_BY_OPEN_EDX_URL_SVG: 'https://edx-cdn.org/v3/stage/open-edx-tag.svg',
   FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
   CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
   REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',

package.json

@@ -28,16 +28,16 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-component-footer": "13.1.0",
     "@edx/frontend-enterprise-hotjar": "3.0.0",
-    "@edx/frontend-platform": "7.1.4",
+    "@edx/frontend-platform": "^7.1.4",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/react-unit-test-utils": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.0.2",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.2.2",
     "@optimizely/react-sdk": "^2.9.2",
     "@redux-beacon/segment": "^1.1.0",
@@ -57,7 +57,7 @@
     "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "prop-types": "15.7.2",
+    "prop-types": "^15.7.2",
     "query-string": "7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.jsx

@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
@@ -109,7 +109,7 @@ export const App = () => {
               )}
           </main>
         </AppWrapper>
-        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <FooterSlot />
         <ZendeskFab />
       </div>
     </>

src/App.test.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -15,7 +14,7 @@ import { ExperimentProvider } from 'ExperimentContext';
 import { App } from './App';
 import messages from './messages';
 
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 
 jest.mock('containers/Dashboard', () => 'Dashboard');
 jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
@@ -38,8 +37,6 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');
 
-const logo = 'fakeLogo.png';
-
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(() => ({})),
 }));
@@ -66,9 +63,6 @@ describe('App router component', () => {
       it('displays learner dashboard header', () => {
         expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
       });
-      test('Footer logo drawn from env variable', () => {
-        expect(el.instance.findByType(Footer)[0].props.logo).toEqual(logo);
-      });
       it('wraps the header and main components in an AppWrapper widget container', () => {
         const container = el.instance.findByType(AppWrapper)[0];
         expect(container.children[0].type).toEqual('LearnerDashboardHeader');
@@ -78,7 +72,7 @@ describe('App router component', () => {
     describe('no network failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
         el = shallow(<App />);
       });
       runBasicTests();
@@ -96,7 +90,7 @@ describe('App router component', () => {
     describe('no network failure with optimizely url', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
+        getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -114,7 +108,7 @@ describe('App router component', () => {
     describe('no network failure with optimizely project id', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -132,7 +126,7 @@ describe('App router component', () => {
     describe('initialize failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
         el = shallow(<App />);
       });
       runBasicTests();
@@ -150,7 +144,7 @@ describe('App router component', () => {
     describe('refresh failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
         el = shallow(<App />);
       });
       runBasicTests();

src/__snapshots__/App.test.jsx.snap

@@ -27,9 +27,7 @@ exports[`App router component component initialize failure snapshot 1`] = `
         </Alert>
       </main>
     </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
     <ZendeskFab />
   </div>
 </Fragment>
@@ -58,9 +56,7 @@ exports[`App router component component no network failure snapshot 1`] = `
         </ExperimentProvider>
       </main>
     </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
     <ZendeskFab />
   </div>
 </Fragment>
@@ -92,9 +88,7 @@ exports[`App router component component no network failure with optimizely proje
         </ExperimentProvider>
       </main>
     </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
     <ZendeskFab />
   </div>
 </Fragment>
@@ -126,9 +120,7 @@ exports[`App router component component no network failure with optimizely url s
         </ExperimentProvider>
       </main>
     </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
     <ZendeskFab />
   </div>
 </Fragment>
@@ -161,9 +153,7 @@ exports[`App router component component refresh failure snapshot 1`] = `
         </Alert>
       </main>
     </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
     <ZendeskFab />
   </div>
 </Fragment>

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-learner-dashboard` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)