From 5219606c5f872a86a7c673de929719eaa8d3060e Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 8 May 2024 17:07:15 -0400 Subject: [PATCH 01/28] feat: use frontend-plugin-framework to provide a FooterSlot --- README.rst | 6 ++ package-lock.json | 58 ++++++++++++++++-- package.json | 3 +- src/index.jsx | 4 +- src/plugin-slots/FooterSlot/README.md | 50 +++++++++++++++ .../FooterSlot/images/custom_footer.png | Bin 0 -> 5637 bytes .../FooterSlot/images/default_footer.png | Bin 0 -> 6316 bytes src/plugin-slots/README.md | 3 + 8 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 src/plugin-slots/FooterSlot/README.md create mode 100644 src/plugin-slots/FooterSlot/images/custom_footer.png create mode 100644 src/plugin-slots/FooterSlot/images/default_footer.png create mode 100644 src/plugin-slots/README.md diff --git a/README.rst b/README.rst index c6f81e027..633bf982d 100644 --- a/README.rst +++ b/README.rst @@ -63,6 +63,12 @@ This MFE is bundled with `Devstack `_, see .. image:: ./docs/images/localhost_preview.png +Plugins +======= +This MFE can be customized using `Frontend Plugin Framework `_. + +The parts of this MFE that can be customized in that manner are documented `here `_. + Environment Variables/Setup Notes ================================= diff --git a/package-lock.json b/package-lock.json index 0fe962d71..d28de4535 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "AGPL-3.0", "dependencies": { "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", - "@edx/frontend-component-footer": "13.1.0", + "@edx/frontend-component-footer": "^13.2.0", "@edx/frontend-component-header": "5.3.0", "@edx/frontend-platform": "8.0.1", "@edx/openedx-atlas": "^0.6.0", @@ -19,6 +19,7 @@ "@fortawesome/free-regular-svg-icons": "5.15.4", "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", + "@openedx/frontend-plugin-framework": "^1.1.2", "@openedx/paragon": "22.0.0", "@tensorflow-models/blazeface": "0.0.7", "@tensorflow/tfjs-converter": "3.21.0", @@ -2106,9 +2107,9 @@ } }, "node_modules/@edx/frontend-component-footer": { - "version": "13.1.0", - "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-13.1.0.tgz", - "integrity": "sha512-Rtv8dfQmL75El8kF8dG9nYF1Cqj2AbWPLVLE4b0XTvipfx2RMeDKpgAO5XLAzTt0h+5fmiMCGhVEv3Y70Xu5pQ==", + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-13.2.0.tgz", + "integrity": "sha512-oXcNSZ+1o1TFIolBmd3mdQsDQ0fzJZMK5hNvEIwWbyLNX6977t7QjyihocYlLY+0LMl3LmqdSJpSuvNzBrvCyA==", "dependencies": { "@fortawesome/fontawesome-svg-core": "6.5.2", "@fortawesome/free-brands-svg-icons": "6.5.2", @@ -2121,10 +2122,16 @@ }, "peerDependencies": { "@edx/frontend-platform": "^7.0.0 || ^8.0.0", + "@openedx/frontend-plugin-framework": "^1.1.2", "@openedx/paragon": ">= 21.11.3 < 23.0.0", "prop-types": "^15.5.10", "react": "^16.9.0 || ^17.0.0", "react-dom": "^16.9.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@openedx/frontend-plugin-framework": { + "optional": true + } } }, "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/fontawesome-common-types": { @@ -3623,6 +3630,37 @@ } } }, + "node_modules/@openedx/frontend-plugin-framework": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.1.2.tgz", + "integrity": "sha512-DzhkZTbmxX09xXE6yyWs9xSq40cO+CgFF80nq1M7pJAeY0mtv7TWlQT8/YnhmjHS3Kj1u9GdqpRpYu8vHuRurA==", + "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/paragon": { "version": "22.0.0", "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.0.0.tgz", @@ -14725,6 +14763,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", diff --git a/package.json b/package.json index 91bfa7edb..672816ae6 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ ], "dependencies": { "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2", - "@edx/frontend-component-footer": "13.1.0", + "@edx/frontend-component-footer": "^13.2.0", "@edx/frontend-component-header": "5.3.0", "@edx/frontend-platform": "8.0.1", "@edx/openedx-atlas": "^0.6.0", @@ -37,6 +37,7 @@ "@fortawesome/free-regular-svg-icons": "5.15.4", "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", + "@openedx/frontend-plugin-framework": "^1.1.2", "@openedx/paragon": "22.0.0", "@tensorflow-models/blazeface": "0.0.7", "@tensorflow/tfjs-converter": "3.21.0", diff --git a/src/index.jsx b/src/index.jsx index 65f4bfd1f..828decf7e 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -11,7 +11,7 @@ import ReactDOM from 'react-dom'; import { Route, Routes, Outlet } from 'react-router-dom'; import Header from '@edx/frontend-component-header'; -import Footer from '@edx/frontend-component-footer'; +import { FooterSlot } from '@edx/frontend-component-footer'; import configureStore from './data/configureStore'; import AccountSettingsPage, { NotFoundPage } from './account-settings'; @@ -34,7 +34,7 @@ subscribe(APP_READY, () => {
-