feat: add plugin slot in authn mfe

[hinakhadim]

Description

I want to include a React Component or JS file that can read cookies. But it can be done via PluginSlot which is not used in authn MFE. I have included PluginSlot in authn MFE which is wrapping <Routes>. I was unsure where to include it in authn MFE. I want to include where cookies can be read on any page/route. As all Routes Pages/Components doesn't have same layout, I have to include around `. Feel free to suggest any other way but we have to sure that if I load any page of Authn MFE, code containing "read cookies" should be executed.

How Has This Been Tested?

It was tested in dev by passing env.config.jsx. There is one problem I faced is that @openedx/frontend-plugin-framework was not installing due to deps conflict issue. So I had to install it by force. Because this package has support for react-error-boundary v4.x.x and @testing-library/react-hooks has support for error-boundary 3.x.x.

import React, { useEffect } from 'react';

import { getConfig } from '@edx/frontend-platform';
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import Cookies from 'universal-cookie';

const AddDarkTheme = () => {
  useEffect(() => {
    const cookies = new Cookies();
    if (cookies.get(getConfig().THEME_COOKIE_NAME) === 'dark') {
      document.body.classList.add('indigo-dark-theme');
    }

    return () => cookies.removeChangeListener();
  }, []);
  return (<div />);
};

const themePluginSlot = {
  keepDefault: true,
  plugins: [
    {
      op: PLUGIN_OPERATIONS.Insert,
      widget: {
        id: 'read_theme_cookie',
        type: DIRECT_PLUGIN,
        priority: 1,
        RenderWidget: AddDarkTheme,
      },
    },
  ],
};

const config = {
  pluginSlots: {
    widget_routes_plugin_slot: themePluginSlot,
  },
};

export default config;

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
• Is there adequate test coverage for your changes?

Post-merge Checklist

• Deploy the changes to prod after verifying on stage or ask @openedx/2u-vanguards to do it.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[arbrandes]

@hinakhadim, we discussed this near the end of today's FWG meeting. What we'll probably do is leverage the loadExternalScripts functionality of frontend-platform to allow any MFE to inject any script they want via configuration, without the need for slots.