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

2024-05-17 12:12:51 -04:00
parent 6a32790f28
commit 9ef81f7485
8 changed files with 145 additions and 6 deletions
--- a/README.rst
+++ b/README.rst
@@ -71,6 +71,12 @@ Profile MFE for local development via the `devstack`_.

 Once the dev server is up, visit http://localhost:1995/u/staff.

+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>`_.
+
 Configuration
 =============

--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
      "license": "AGPL-3.0",
      "dependencies": {
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-        "@edx/frontend-component-footer": "^14.0.0",
        "@edx/frontend-component-header": "5.3.1",
        "@edx/frontend-platform": "7.1.4",
        "@edx/openedx-atlas": "^0.6.0",
@@ -19,6 +18,7 @@
        "@fortawesome/free-regular-svg-icons": "6.5.2",
        "@fortawesome/free-solid-svg-icons": "6.5.2",
        "@fortawesome/react-fontawesome": "0.2.0",
+        "@openedx/frontend-slot-footer": "^1.0.2",
        "@openedx/paragon": "^22.2.2",
        "@pact-foundation/pact": "^11.0.2",
        "@redux-devtools/extension": "3.3.0",
@@ -3082,6 +3082,7 @@
      "version": "14.0.0",
      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.0.0.tgz",
      "integrity": "sha512-3Riz6ippBnPz1oq6gZgFBx27bJkNL+rwwKrv0uCuHV/5MscS1aYeKx1ZAMuUsxkKcGX6uhyU6PwM6agvnhKfNQ==",
+      "peer": true,
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "6.5.2",
        "@fortawesome/free-brands-svg-icons": "6.5.2",
@@ -3131,6 +3132,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "peer": true,
      "engines": {
        "node": ">= 10"
      }
@@ -3139,6 +3141,7 @@
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
      "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+      "peer": true,
      "dependencies": {
        "acorn": "^8.1.0",
        "acorn-walk": "^8.0.2"
@@ -3148,6 +3151,7 @@
      "version": "8.3.2",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "peer": true,
      "engines": {
        "node": ">=0.4.0"
      }
@@ -3217,12 +3221,14 @@
    "node_modules/@edx/frontend-component-footer/node_modules/cssom": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
-      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw=="
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "peer": true
    },
    "node_modules/@edx/frontend-component-footer/node_modules/data-urls": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "peer": true,
      "dependencies": {
        "abab": "^2.0.6",
        "whatwg-mimetype": "^3.0.0",
@@ -3237,6 +3243,7 @@
      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
      "deprecated": "Use your platform's native DOMException instead",
+      "peer": true,
      "dependencies": {
        "webidl-conversions": "^7.0.0"
      },
@@ -3248,6 +3255,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "peer": true,
      "dependencies": {
        "whatwg-encoding": "^2.0.0"
      },
@@ -3259,6 +3267,7 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "peer": true,
      "dependencies": {
        "@tootallnate/once": "2",
        "agent-base": "6",
@@ -3272,6 +3281,7 @@
      "version": "29.7.0",
      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz",
      "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==",
+      "peer": true,
      "dependencies": {
        "@jest/environment": "^29.7.0",
        "@jest/fake-timers": "^29.7.0",
@@ -3298,6 +3308,7 @@
      "version": "20.0.3",
      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "peer": true,
      "dependencies": {
        "abab": "^2.0.6",
        "acorn": "^8.8.1",
@@ -3342,6 +3353,7 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "peer": true,
      "dependencies": {
        "entities": "^4.4.0"
      },
@@ -3353,6 +3365,7 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "peer": true,
      "dependencies": {
        "xmlchars": "^2.2.0"
      },
@@ -3374,6 +3387,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "peer": true,
      "dependencies": {
        "punycode": "^2.1.1"
      },
@@ -3385,6 +3399,7 @@
      "version": "29.1.2",
      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.2.tgz",
      "integrity": "sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==",
+      "peer": true,
      "dependencies": {
        "bs-logger": "0.x",
        "fast-json-stable-stringify": "2.x",
@@ -3427,6 +3442,7 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "peer": true,
      "dependencies": {
        "xml-name-validator": "^4.0.0"
      },
@@ -3438,6 +3454,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -3446,6 +3463,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "peer": true,
      "dependencies": {
        "iconv-lite": "0.6.3"
      },
@@ -3457,6 +3475,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -3465,6 +3484,7 @@
      "version": "11.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "peer": true,
      "dependencies": {
        "tr46": "^3.0.0",
        "webidl-conversions": "^7.0.0"
@@ -3491,6 +3511,7 @@
      "version": "8.17.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "peer": true,
      "engines": {
        "node": ">=10.0.0"
      },
@@ -3511,6 +3532,7 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -3519,6 +3541,7 @@
      "version": "21.1.1",
      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "peer": true,
      "engines": {
        "node": ">=12"
      }
@@ -6366,6 +6389,49 @@
        "node": ">=6"
      }
    },
+    "node_modules/@openedx/frontend-plugin-framework": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.2.0.tgz",
+      "integrity": "sha512-A5Haf7QtS3gY21KS0TK7lC059HvclC+kW4QZNwxqaWX1LNoRULDO3NFI/NaGBY02hBT8ZoXzoyrTOHkTJ5wJhg==",
+      "dependencies": {
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "classnames": "^2.3.2",
+        "core-js": "3.36.0",
+        "react-redux": "7.2.9",
+        "redux": "4.2.1",
+        "regenerator-runtime": "0.14.1"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": "^21.0.0 || ^22.0.0",
+        "prop-types": "^15.8.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-error-boundary": "^4.0.11"
+      }
+    },
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/core-js": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/@openedx/frontend-slot-footer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-slot-footer/-/frontend-slot-footer-1.0.2.tgz",
+      "integrity": "sha512-Wmx/Das4wr3jYQ1/wk9ctYcM9ztfpY5fm6d5UKFSnKK1DbUbjliaPC3mdGR4wVRnH4MAf1OnNGZ8oj/bTDPGHg==",
+      "dependencies": {
+        "@openedx/frontend-plugin-framework": "^1.1.2"
+      },
+      "peerDependencies": {
+        "@edx/frontend-component-footer": "*",
+        "react": "^17.0.0"
+      }
+    },
    "node_modules/@openedx/paragon": {
      "version": "22.4.0",
      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.4.0.tgz",
@@ -9177,6 +9243,7 @@
      "version": "0.2.6",
      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "peer": true,
      "dependencies": {
        "fast-json-stable-stringify": "2.x"
      },
@@ -17335,7 +17402,8 @@
    "node_modules/make-error": {
      "version": "1.3.6",
      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "peer": true
    },
    "node_modules/makeerror": {
      "version": "1.0.12",
@@ -19832,6 +19900,18 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
    "node_modules/react-error-overlay": {
      "version": "6.0.11",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.0.0",
    "@edx/frontend-component-header": "5.3.1",
    "@edx/frontend-platform": "7.1.4",
    "@edx/openedx-atlas": "^0.6.0",
@@ -38,6 +37,7 @@
    "@fortawesome/free-regular-svg-icons": "6.5.2",
    "@fortawesome/free-solid-svg-icons": "6.5.2",
    "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
    "@openedx/paragon": "^22.2.2",
    "@pact-foundation/pact": "^11.0.2",
    "@redux-devtools/extension": "3.3.0",
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -17,7 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';

 import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';

 import messages from './i18n';
 import configureStore from './data/configureStore';
@@ -35,7 +35,7 @@ subscribe(APP_READY, () => {
      <main id="main">
        <AppRoutes />
      </main>
-      <Footer />
+      <FooterSlot />
    </AppProvider>,
    document.getElementById('root'),
  );
--- 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;
+```
--- a/src/plugin-slots/FooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/FooterSlot/images/custom_footer.png
--- a/src/plugin-slots/FooterSlot/images/default_footer.png
+++ b/src/plugin-slots/FooterSlot/images/default_footer.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -0,0 +1,3 @@
+# `frontend-app-profile` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)