perf: update redwood branch with upstream (#9)

* feat: use frontend-plugin-framework to provide a FooterSlot (openedx#332) Co-authored-by: Brian Smith <[email protected]> * perf: add css-variables support to redwood (#7) * fix: re create package-lock * fix: tests failed because axios lib errors --------- Co-authored-by: Adolfo R. Brandes <[email protected]> Co-authored-by: Brian Smith <[email protected]>
eduNEXT · Jul 29, 2024 · e0b15d0 · e0b15d0
1 parent f48dcae
commit e0b15d0
Show file tree

Hide file tree

Showing 13 changed files with 3,887 additions and 1,875 deletions.
diff --git a/.env.development b/.env.development
@@ -7,7 +7,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'

diff --git a/.env.test b/.env.test
@@ -7,7 +7,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'

diff --git a/README.rst b/README.rst
@@ -39,6 +39,12 @@ to the `relevant tutor-mfe documentation`_ to get started using it.
 
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
 
+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>`_.
+
 Developing
 ==========
 

diff --git a/jest.config.js b/jest.config.js
@@ -13,6 +13,10 @@ module.exports = createConfig('jest', {
     'src/data/services/lms/fakeData', // don't unit test mock data
     'src/test', // don't unit test integration test utils
   ],
+  // see https://github.com/axios/axios/issues/5026
+  moduleNameMapper: {
+    '^axios$': 'axios/dist/axios.js',
+  },
   testTimeout: 120000,
   testEnvironment: 'jsdom',
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,14 +26,14 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "npm:@edunext/[email protected]",
     "@edx/frontend-component-header": "npm:@edunext/[email protected]",
     "@edx/frontend-platform": "npm:@edunext/[email protected]",
     "@edx/openedx-atlas": "^0.6.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-slot-footer": "^1.0.2",
     "@openedx/paragon": "23.0.0-alpha.1",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
@@ -32,7 +32,7 @@ export const App = ({ courseMetadata, isEnabled }) => (
       <main data-testid="main">
         <ListView />
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} data-testid="footer" />
+      <FooterSlot />
     </div>
   </Router>
 );

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -15,14 +15,13 @@ jest.mock('data/redux', () => ({
 jest.mock('@edx/frontend-component-header', () => ({
   LearningHeader: 'Header',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
 jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 jest.mock('components/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 
 describe('App router component', () => {
@@ -42,7 +41,6 @@ describe('App router component', () => {
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App {...props} />);
     });
     describe('Router', () => {
@@ -51,9 +49,6 @@ describe('App router component', () => {
         expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(el.instance.findByTestId('footer')[0].props.logo).toEqual(logo);
-    });
 
     test('Header to use courseMetadata props', () => {
       const {

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -18,10 +18,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
     >
       <ListView />
     </main>
-    <Footer
-      data-testid="footer"
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;
@@ -43,10 +40,7 @@ exports[`App router component snapshot: enabled 1`] = `
     >
       <ListView />
     </main>
-    <Footer
-      data-testid="footer"
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;
diff --git a/src/plugin-slots/FooterSlot/README.md b/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;
+```
diff --git a/src/plugin-slots/FooterSlot/images/custom_footer.png b/src/plugin-slots/FooterSlot/images/custom_footer.png
diff --git a/src/plugin-slots/FooterSlot/images/default_footer.png b/src/plugin-slots/FooterSlot/images/default_footer.png
diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md
@@ -0,0 +1,3 @@
+# `frontend-app-ora-grading` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)