feat: add plugin slot to Footer using FPF (#302)

* build: add Frontend Plugin Framework dependency
* feat: wrap Footer with Plugin Slot
* fix: remove 'require' of env.config in webpack dev and prod patches

package.json

@@ -45,6 +45,7 @@
     "@fortawesome/free-regular-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "1.0.1",
     "@openedx/paragon": "^21.11.3",
     "axios": "0.28.0",
     "babel-polyfill": "6.26.0",

patches/@openedx+frontend-build+13.0.28.patch

@@ -22,48 +22,8 @@ index ac5f730..ddce396 100644
  }
 
  module.exports = {
-diff --git a/node_modules/@openedx/frontend-build/config/webpack.dev.config.js b/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
-index 5ce7716..2fbc646 100644
---- a/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
-+++ b/node_modules/@openedx/frontend-build/config/webpack.dev.config.js
-@@ -6,6 +6,7 @@ const { merge } = require('webpack-merge');
- const Dotenv = require('dotenv-webpack');
- const dotenv = require('dotenv');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
-+const fs = require('fs');
- const path = require('path');
- const PostCssAutoprefixerPlugin = require('autoprefixer');
- const PostCssRTLCSS = require('postcss-rtlcss');
-@@ -17,6 +18,18 @@ const presets = require('../lib/presets');
- const resolvePrivateEnvConfig = require('../lib/resolvePrivateEnvConfig');
- const getLocalAliases = require('./getLocalAliases');
-
-+// Provides the env.config object that is available in local development so that devserver port number
-+// can be assigned below. If no env.config exists (JS or JSX), then it provides an empty object.
-+let envConfig = {};
-+const envConfigPathJs = path.resolve(process.cwd(), './env.config.js');
-+const envConfigPathJsx = path.resolve(process.cwd(), './env.config.jsx');
-+
-+if (fs.existsSync(envConfigPathJs)) {
-+  envConfig = require(envConfigPathJs);
-+} else if (fs.existsSync(envConfigPathJsx)) {
-+  envConfig = require(envConfigPathJsx);
-+}
-+
- // Add process env vars. Currently used only for setting the
- // server port and the publicPath
- dotenv.config({
-@@ -174,7 +187,7 @@ module.exports = merge(commonConfig, {
-   // reloading.
-   devServer: {
-     host: '0.0.0.0',
--    port: process.env.PORT || 8080,
-+    port: envConfig.PORT || process.env.PORT || 8080,
-     historyApiFallback: {
-       index: path.join(PUBLIC_PATH, 'index.html'),
-       disableDotRule: true,
 diff --git a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
-index 2879dd9..1ddb07f 100644
+index 2879dd9..4783e17 100644
 --- a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
 +++ b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
 @@ -11,6 +11,7 @@ const dotenv = require('dotenv');
@@ -74,7 +34,7 @@ index 2879dd9..1ddb07f 100644
  const path = require('path');
  const PostCssAutoprefixerPlugin = require('autoprefixer');
  const PostCssRTLCSS = require('postcss-rtlcss');
-@@ -23,6 +24,25 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
+@@ -23,6 +24,22 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
  const commonConfig = require('./webpack.common.config');
  const presets = require('../lib/presets');
 
@@ -92,27 +52,8 @@ index 2879dd9..1ddb07f 100644
 +if (envConfigPath) {
 +  const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config'));
 +  fs.copyFileSync(envConfigPath, envConfigFilename);
-+
-+  const newConfigFilepath = path.resolve(process.cwd(), envConfigFilename);
-+  envConfig = require(newConfigFilepath);
 +}
 +
  // Add process env vars. Currently used only for setting the PUBLIC_PATH.
  dotenv.config({
    path: path.resolve(process.cwd(), '.env'),
-@@ -45,12 +65,12 @@ if (process.env.ENABLE_NEW_RELIC !== 'false') {
-     agentID: process.env.NEW_RELIC_AGENT_ID || 'undefined_agent_id',
-     trustKey: process.env.NEW_RELIC_TRUST_KEY || 'undefined_trust_key',
-     licenseKey: process.env.NEW_RELIC_LICENSE_KEY || 'undefined_license_key',
--    applicationID: process.env.NEW_RELIC_APP_ID || 'undefined_application_id',
-+    applicationID: envConfig.NEW_RELIC_APP_ID || process.env.NEW_RELIC_APP_ID || 'undefined_application_id',
-   }));
-   extraPlugins.push(new NewRelicSourceMapPlugin({
--    applicationId: process.env.NEW_RELIC_APP_ID,
-+    applicationId: envConfig.NEW_RELIC_APP_ID || process.env.NEW_RELIC_APP_ID,
-     apiKey: process.env.NEW_RELIC_ADMIN_KEY,
--    staticAssetUrl: process.env.BASE_URL,
-+    staticAssetUrl: envConfig.BASE_URL || process.env.BASE_URL,
-     // upload source maps in prod builds only
-     noop: typeof process.env.NEW_RELIC_ADMIN_KEY === 'undefined',
-   }));

src/index.jsx

@@ -7,6 +7,7 @@ import {
   APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage, AuthenticatedPageRoute } from '@edx/frontend-platform/react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework/src';
 import { HelmetProvider } from 'react-helmet-async';
 import Header from '@edx/frontend-component-header';
 import Footer from '@edx/frontend-component-footer';
@@ -45,7 +46,11 @@ subscribe(APP_READY, () => {
             />
           )}
         </Routes>
-        <Footer />
+        <PluginSlot
+          id="footer_plugin_slot"
+        >
+          <Footer />
+        </PluginSlot>
       </HelmetProvider>
     </AppProvider>,
     document.getElementById('root'),