chore: resolve http-cache-semantics security issue

2023-04-17 11:38:15 +05:00
72 changed files with 12539 additions and 17139 deletions
--- a/.env.development
+++ b/.env.development
@@ -8,11 +8,6 @@ LMS_BASE_URL=http://localhost:18000
 LOGIN_URL=http://localhost:18000/login
 LOGOUT_URL=http://localhost:18000/login
 MARKETING_SITE_BASE_URL=http://localhost:18000
-TERMS_OF_SERVICE_URL=null
-PRIVACY_POLICY_URL=null
-SUPPORT_EMAIL=null
-STUDIO_BASE_URL=http://localhost:18010
-ENABLE_ACCESSIBILITY_PAGE=false
 ORDER_HISTORY_URL=localhost:1996/orders
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SEGMENT_KEY=null
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('eslint');
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,13 +11,15 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
      with:
        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
@@ -31,7 +33,4 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+      uses: codecov/codecov-action@v3
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -3,20 +3,19 @@ on:
  push:
    branches:
    - master
-    - alpha
 jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
@@ -30,10 +29,7 @@ jobs:
    - name: i18n_extract
      run: npm run i18n_extract
    - name: Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: false
+      uses: codecov/codecov-action@v3
    - name: Build
      run: npm run build
    - name: Release
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,3 @@ src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
 module.config.js
-src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20
+18
--- a/.releaserc
+++ b/.releaserc
@@ -1,8 +1,5 @@
 {
-  "branches": [
-    "master",
-    {name: "alpha", prerelease: true}
-  ],
+  "branch": "master",
  "tagFormat": "v${version}",
  "verifyConditions": [
    "@semantic-release/npm",
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-component-footer]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/21
+++ b/21
@@ -1,9 +1,12 @@
+export TRANSIFEX_RESOURCE = frontend-component-footer
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 build:
 	rm -rf ./dist
@@ -14,7 +17,7 @@ build:
 	@rm -rf dist/__mocks__

 requirements:
-	npm ci
+	npm install

 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -32,6 +35,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -5,33 +5,14 @@ frontend-component-footer
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|

 ********
-Purpose
+Overview
 ********

 A generic footer for Open edX micro-frontend applications.  It includes a logo and an optional language selector dropdown.

-***************
-Getting Started
-***************
-
-Prerequisites
-=============
-
-The `devstack`_ is currently recommended as a development environment for your
-new MFE.  If you start it with ``make dev.up.lms`` that should give you
-everything you need as a companion to this frontend.
-
-Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
-to the `relevant tutor-mfe documentation`_ to get started using it.
-
-.. _Devstack: https://github.com/openedx/devstack
-
-.. _Tutor: https://github.com/overhangio/tutor
-
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
-
+************
 Requirements
-============
+************

 This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function.  `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>`_

@@ -43,8 +24,9 @@ This component requires that the following environment variable be set by the co
 * ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
 * ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer.  This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.

+************
 Installation
-============
+************

 To install this footer into your Open edX micro-frontend, run the following command in your MFE:

@@ -52,33 +34,9 @@ To install this footer into your Open edX micro-frontend, run the following comm

 This will make the component available to be imported into your application.

-Cloning and Startup
-===================
-
-.. code-block::
-
-
-  1. Clone your new repo:
-
-    ``git clone https://github.com/openedx/frontend-component-footer.git``
-
-  2. Use node v18.x.
-
-    The current version of the micro-frontend build scripts support node 18.
-    Using other major versions of node *may* work, but this is unsupported.  For
-    convenience, this repository includes an .nvmrc file to help in setting the
-    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
-
-  3. Install npm dependencies:
-
-    ``cd frontend-component-footer && npm ci``
-
-  4. Start the dev server:
-
-    ``npm start``
-
+*****
 Usage
-=====
+*****

 This library has the following exports:

@@ -93,12 +51,6 @@ This library has the following exports:
  language from its dropdown.
 * supportedLanguages: An array of objects representing available languages.  See example below for object shape.

-Plugin
-======
-The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-Information on how to replace or modify the footer is available `here </src/plugin-slots>`_.
-
 Examples
 ========

@@ -119,10 +71,9 @@ Component Usage Example::
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_

-
-
+***********
 Development
-===========
+***********

 Install dependencies::

@@ -136,63 +87,6 @@ Build a production distribution::

  npm run build

-License
-=======
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-Contributing
-============
-
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
-
-This project is currently accepting all types of contributions, bug fixes,
-security fixes, maintenance work, or new features.  However, please make sure
-to have a discussion about your new feature idea with the maintainers prior to
-beginning development to maximize the chances of your change being accepted.
-You can start a conversation by creating a new issue on this repo summarizing
-your idea.
-
-Getting Help
-===========
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-component-footer/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
-The Open edX Code of Conduct
-============================
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-Reporting Security Issues
-=========================
-
-Please do not report security issues in public. Please email security@openedx.org.
-
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
   :target: https://travis-ci.com/edx/frontend-component-footer
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-footer
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,3 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('babel-preserve-modules');
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,14 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: "frontend-component-footer"
-  description: "A generic footer for the Open edX micro-frontend applications."
-  annotations:
-    openedx.org/arch-interest-groups: ""
-spec:
-  owner: group:committers-frontend
-  type: "library"
-  lifecycle: "production"
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,4 +1,6 @@
-@use "@openedx/paragon/dist/core.min.css" as paragonCore;
-@use "@openedx/paragon/dist/light.min.css" as paragonLight;
+@import "@edx/brand/paragon/fonts";
+@import "@edx/brand/paragon/variables";
+@import "@edx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";

@import "@edx/frontend-component-footer/footer";
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('jest', {
  setupFiles: [
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/fedx-team
+tags:
+  - library
+  - component
+  - react
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,18 +8,20 @@
  },
  "scripts": {
    "build": "make build",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "start:with-theme": "paragon install-theme && npm start && npm install",
-    "test": "fedx-scripts jest --coverage",
-    "test:watch": "npm run test -- --watch"
+    "test": "fedx-scripts jest --coverage"
  },
  "files": [
    "/dist"
  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint"
+    }
+  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/openedx/frontend-component-footer.git"
@@ -31,42 +33,34 @@
  },
  "homepage": "https://github.com/openedx/frontend-component-footer#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "^8.2.1",
+    "@edx/frontend-build": "12.7.0",
+    "@edx/paragon": "^20.19.0",
    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "^14.3.1",
-    "@openedx/paragon": "^23.3.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/user-event": "^14.6.1",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.7",
+    "husky": "8.0.3",
    "prop-types": "15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-redux": "8.1.3",
-    "react-router-dom": "6.30.1",
-    "react-test-renderer": "18.3.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.9",
+    "react-router-dom": "5.3.4",
+    "react-test-renderer": "16.14.0",
    "redux": "4.2.1",
-    "semantic-release": "21.1.2"
+    "semantic-release": "19.0.5"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.6",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
-    "lodash": "^4.17.21",
-    "ts-jest": "^29.1.2"
+    "@edx/frontend-platform": "^4.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/react-fontawesome": "0.2.0"
  },
  "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.11.3 < 24.0.0",
    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -24,7 +24,7 @@
      "automerge": true
    },
    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchPackagePatterns": ["@edx"],
      "matchUpdateTypes": ["minor", "patch"],
      "automerge": true
    }
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -1,5 +1,5 @@
 $gray-footer: #fcfcfc !default;

 .footer {
-  background-color: var(--pgn-color-light-100, $gray-footer);
+  background-color: $gray-footer;
 }
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { ensureConfig } from '@edx/frontend-platform';
+import { ensureConfig } from '@edx/frontend-platform/config';
 import { AppContext } from '@edx/frontend-platform/react';

 import messages from './Footer.messages';
@@ -17,17 +17,13 @@ const EVENT_NAMES = {
  FOOTER_LINK: 'edx.bi.footer.link',
 };

-const SiteFooter = ({
-  supportedLanguages,
-  onLanguageSelected,
-  logo,
-}) => {
-  const intl = useIntl();
-  const { config } = useContext(AppContext);
+class SiteFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
+  }

-  const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
-
-  const externalLinkClickHandler = (event) => {
+  externalLinkClickHandler(event) {
    const label = event.currentTarget.getAttribute('href');
    const eventName = EVENT_NAMES.FOOTER_LINK;
    const properties = {
@@ -35,39 +31,52 @@ const SiteFooter = ({
      label,
    };
    sendTrackEvent(eventName, properties);
-  };
+  }

-  return (
-    <footer
-      role="contentinfo"
-      className="footer d-flex border-top py-3 px-4"
-    >
-      <div className="container-fluid d-flex">
-        <a
-          className="d-block"
-          href={config.LMS_BASE_URL}
-          aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
-          onClick={externalLinkClickHandler}
-        >
-          <img
-            style={{ maxHeight: 45 }}
-            src={logo || config.LOGO_TRADEMARK_URL}
-            alt={intl.formatMessage(messages['footer.logo.altText'])}
-          />
-        </a>
-        <div className="flex-grow-1" />
-        {showLanguageSelector && (
-          <LanguageSelector
-            options={supportedLanguages}
-            onSubmit={onLanguageSelected}
-          />
-        )}
-      </div>
-    </footer>
-  );
-};
+  render() {
+    const {
+      supportedLanguages,
+      onLanguageSelected,
+      logo,
+      intl,
+    } = this.props;
+    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+    const { config } = this.context;
+
+    return (
+      <footer
+        role="contentinfo"
+        className="footer d-flex border-top py-3 px-4"
+      >
+        <div className="container-fluid d-flex">
+          <a
+            className="d-block"
+            href={config.LMS_BASE_URL}
+            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+          >
+            <img
+              style={{ maxHeight: 45 }}
+              src={logo || config.LOGO_TRADEMARK_URL}
+              alt={intl.formatMessage(messages['footer.logo.altText'])}
+            />
+          </a>
+          <div className="flex-grow-1" />
+          {showLanguageSelector && (
+            <LanguageSelector
+              options={supportedLanguages}
+              onSubmit={onLanguageSelected}
+            />
+          )}
+        </div>
+      </footer>
+    );
+  }
+}
+
+SiteFooter.contextType = AppContext;

 SiteFooter.propTypes = {
+  intl: intlShape.isRequired,
  logo: PropTypes.string,
  onLanguageSelected: PropTypes.func,
  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
@@ -82,5 +91,5 @@ SiteFooter.defaultProps = {
  supportedLanguages: [],
 };

-export default SiteFooter;
+export default injectIntl(SiteFooter);
 export { EVENT_NAMES };
--- a/src/components/Footer.test.jsx
+++ b/src/components/Footer.test.jsx
@@ -1,14 +1,11 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { mount } from 'enzyme';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';

 import Footer from './Footer';
-import FooterSlot from '../plugin-slots/FooterSlot';
-import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';

 const FooterWithContext = ({ locale = 'es' }) => {
  const contextValue = useMemo(() => ({
@@ -24,7 +21,7 @@ const FooterWithContext = ({ locale = 'es' }) => {
      <AppContext.Provider
        value={contextValue}
      >
-        <FooterSlot />
+        <Footer />
      </AppContext.Provider>
    </IntlProvider>
  );
@@ -79,44 +76,21 @@ describe('<Footer />', () => {
  });

  describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', async () => {
-      const user = userEvent.setup();
+    it('calls onLanguageSelected prop when a language is changed', () => {
      const mockHandleLanguageSelected = jest.fn();
-      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
+      const wrapper = mount(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);

-      await user.selectOptions(screen.getByRole('combobox'), 'es');
-      await user.click(screen.getByTestId('site-footer-submit-btn'));
+      wrapper.find('form').simulate('submit', {
+        target: {
+          elements: {
+            'site-footer-language-select': {
+              value: 'es',
+            },
+          },
+        },
+      });

      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
    });
  });
 });
-
-describe('<StudioFooterHelpSectionSlot />', () => {
-  const SectionWithContext = ({ locale = 'es' }) => {
-    const contextValue = useMemo(() => ({
-      authenticatedUser: null,
-      config: {
-        LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-        LMS_BASE_URL: process.env.LMS_BASE_URL,
-      },
-    }), []);
-
-    return (
-      <IntlProvider locale={locale}>
-        <AppContext.Provider
-          value={contextValue}
-        >
-          <StudioFooterHelpSectionSlot />
-        </AppContext.Provider>
-      </IntlProvider>
-    );
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer
-      .create(<SectionWithContext />)
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';

 const LanguageSelector = ({
-  options, onSubmit, ...props
+  intl, options, onSubmit, ...props
 }) => {
-  const intl = useIntl();
  const handleSubmit = (e) => {
    e.preventDefault();
    const languageCode = e.target.elements['site-footer-language-select'].value;
@@ -35,7 +34,7 @@ const LanguageSelector = ({
        >
          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
        </select>
-        <button data-testid="site-footer-submit-btn" className="btn btn-outline-primary btn-sm" type="submit">
+        <button className="btn btn-outline-primary btn-sm" type="submit">
          <FormattedMessage
            id="footer.languageForm.submit.label"
            defaultMessage="Apply"
@@ -48,6 +47,7 @@ const LanguageSelector = ({
 };

 LanguageSelector.propTypes = {
+  intl: intlShape.isRequired,
  onSubmit: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.string,
@@ -55,4 +55,4 @@ LanguageSelector.propTypes = {
  })).isRequired,
 };

-export default LanguageSelector;
+export default injectIntl(LanguageSelector);
--- a/src/components/snapshots/Footer.test.jsx.snap
+++ b/src/components/snapshots/Footer.test.jsx.snap
@@ -12,13 +12,12 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
      aria-label="edX Home"
      className="d-block"
      href="http://localhost:18000"
-      onClick={[Function]}
    >
      <img
        alt="Powered by Open edX"
        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
        style={
-          {
+          Object {
            "maxHeight": 45,
          }
        }
@@ -59,7 +58,6 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
        </select>
        <button
          className="btn btn-outline-primary btn-sm"
-          data-testid="site-footer-submit-btn"
          type="submit"
        >
          Apply
@@ -82,13 +80,12 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
      aria-label="edX Home"
      className="d-block"
      href="http://localhost:18000"
-      onClick={[Function]}
    >
      <img
        alt="Powered by Open edX"
        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
        style={
-          {
+          Object {
            "maxHeight": 45,
          }
        }
@@ -113,13 +110,12 @@ exports[`<Footer /> renders correctly renders without a language selector in es
      aria-label="edX Home"
      className="d-block"
      href="http://localhost:18000"
-      onClick={[Function]}
    >
      <img
        alt="Powered by Open edX"
        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
        style={
-          {
+          Object {
            "maxHeight": 45,
          }
        }
@@ -131,68 +127,3 @@ exports[`<Footer /> renders correctly renders without a language selector in es
  </div>
 </footer>
 `;
-
-exports[`<StudioFooterHelpSectionSlot /> renders correctly 1`] = `
-[
-  <div
-    className="m-0 mt-6 row align-items-center justify-content-center"
-  >
-    <div
-      className="col border-top mr-2"
-    />
-    <button
-      className="btn btn-outline-primary btn-sm"
-      data-testid="helpToggleButton"
-      disabled={false}
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="pgn__icon pgn__icon__sm btn-icon-before"
-      >
-        <svg
-          aria-hidden={true}
-          fill="none"
-          focusable={false}
-          height={24}
-          role="img"
-          viewBox="0 0 24 24"
-          width={24}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 17h-2v-2h2v2Zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25Z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      Looking for help with Studio?
-      <span
-        className="pgn__icon pgn__icon__sm btn-icon-after"
-      >
-        <svg
-          aria-hidden={true}
-          fill="none"
-          focusable={false}
-          height={24}
-          role="img"
-          viewBox="0 0 24 24"
-          width={24}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </button>
-    <div
-      className="col border-top ml-2"
-    />
-  </div>,
-  <div
-    className="px-4 container-mw-xl container-fluid"
-  />,
-]
-`;
--- a/src/components/studio-footer/StudioFooter.jsx
+++ b/src/components/studio-footer/StudioFooter.jsx
@@ -1,92 +0,0 @@
-import React, { useContext } from 'react';
-import isEmpty from 'lodash/isEmpty';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { ensureConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-import {
-  ActionRow,
-  Container,
-  Hyperlink,
-} from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import messages from './messages';
-import StudioFooterLogoSlot from '../../plugin-slots/StudioFooterLogoSlot';
-import StudioFooterHelpSectionSlot from '../../plugin-slots/StudioFooterHelpSectionSlot';
-
-ensureConfig([
-  'LMS_BASE_URL',
-  'MARKETING_SITE_BASE_URL',
-  'TERMS_OF_SERVICE_URL',
-  'PRIVACY_POLICY_URL',
-  'SUPPORT_EMAIL',
-  'SITE_NAME',
-  'STUDIO_BASE_URL',
-  'ENABLE_ACCESSIBILITY_PAGE',
-], 'Studio Footer component');
-
-const StudioFooter = ({
-  containerProps,
-}) => {
-  const intl = useIntl();
-  const { config } = useContext(AppContext);
-
-  const { containerClassName, ...restContainerProps } = containerProps || {};
-
-  return (
-    <>
-      <StudioFooterHelpSectionSlot containerProps={containerProps} />
-      <Container
-        size="xl"
-        className={classNames('px-4', containerClassName)}
-        {...restContainerProps}
-      >
-        <ActionRow className="pt-3 m-0 x-small">
-          © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
-          <ActionRow.Spacer />
-          {!isEmpty(config.TERMS_OF_SERVICE_URL) && (
-            <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
-              {intl.formatMessage(messages.termsOfServiceLinkLabel)}
-            </Hyperlink>
-          )}{!isEmpty(config.PRIVACY_POLICY_URL) && (
-            <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
-              {intl.formatMessage(messages.privacyPolicyLinkLabel)}
-            </Hyperlink>
-          )}
-          {config.ENABLE_ACCESSIBILITY_PAGE === 'true' && (
-            <Hyperlink
-              destination={`${config.STUDIO_BASE_URL}/accessibility`}
-              data-testid="accessibilityRequest"
-            >
-              {intl.formatMessage(messages.accessibilityRequestLinkLabel)}
-            </Hyperlink>
-          )}
-          <Hyperlink destination={config.LMS_BASE_URL}>LMS</Hyperlink>
-        </ActionRow>
-        <ActionRow className="mt-3 pb-4 x-small">
-          {/*
-            Site operators: Please do not remove this paragraph! this attributes back to edX and
-              makes your acknowledgement of edX's trademarks clear.
-            Translators: 'edX' and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate
-              any of these trademarks and company names.
-          */}
-          <FormattedMessage {...messages.trademarkMessage} />
-          <Hyperlink className="ml-1" destination="https://www.edx.org">edX Inc</Hyperlink>.
-          <ActionRow.Spacer />
-          <StudioFooterLogoSlot />
-        </ActionRow>
-      </Container>
-    </>
-  );
-};
-
-StudioFooter.propTypes = {
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-StudioFooter.defaultProps = {
-  containerProps: {},
-};
-
-export default StudioFooter;
--- a/src/components/studio-footer/StudioFooter.test.jsx
+++ b/src/components/studio-footer/StudioFooter.test.jsx
@@ -1,128 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
-import '@testing-library/jest-dom';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import StudioFooterSlot from '../../plugin-slots/StudioFooterSlot';
-import messages from './messages';
-
-const config = {
-  LMS_BASE_URL: process.env.LMS_BASE_URL,
-  MARKETING_SITE_BASE_URL: process.env.MARKETING_SITE_BASE_URL,
-  TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
-  PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
-  SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
-  SITE_NAME: process.env.SITE_NAME,
-  STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-  ENABLE_ACCESSIBILITY_PAGE: process.env.ENABLE_ACCESSIBILITY_PAGE,
-};
-
-let currentConfig = config;
-const Component = ({ updateVariable }) => {
-  if (updateVariable) {
-    const [variable, value] = updateVariable;
-    currentConfig = {
-      ...config,
-      [variable]: value,
-    };
-  }
-  const contextValue = useMemo(() => ({
-    authenticatedUser: null,
-    config: currentConfig,
-  }), []);
-
-  return (
-    <IntlProvider locale="en">
-      <AppContext.Provider value={contextValue}>
-        <StudioFooterSlot />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
-jest.unmock('@openedx/paragon');
-
-describe('Footer', () => {
-  describe('help section default view', () => {
-    it('help button should read Looking for help with Studio?', () => {
-      render(<Component />);
-      expect(screen.getByText(messages.openHelpButtonLabel.defaultMessage))
-        .toBeVisible();
-    });
-    it('help button link row should not be visible', () => {
-      render(<Component />);
-      expect(screen.queryByTestId('helpButtonRow')).toBeNull();
-    });
-  });
-  describe('help section expanded view', () => {
-    it('help button should read Hide Studio help', async () => {
-      const user = userEvent.setup();
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
-      expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
-        .toBeVisible();
-    });
-    it('help button link row should be visible', async () => {
-      const user = userEvent.setup();
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
-      expect(screen.getByTestId('helpButtonRow')).toBeVisible();
-    });
-    it('Open edX portal button should be visible', async () => {
-      const user = userEvent.setup();
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
-      expect(screen.getByTestId('openEdXDemoCourseButton')).toBeVisible();
-    });
-    it('should not show contact us button', async () => {
-      const user = userEvent.setup();
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
-      expect(screen.queryByTestId('contactUsButton')).toBeNull();
-    });
-    it('should show contact us button', async () => {
-      const user = userEvent.setup();
-      render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
-      expect(screen.getByTestId('contactUsButton')).toBeVisible();
-    });
-  });
-  describe('policy link row', () => {
-    it('should only show LMS link', () => {
-      render(<Component />);
-      expect(screen.getByText('LMS')).toBeVisible();
-      expect(screen.queryByTestId('termsOfService')).toBeNull();
-      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
-      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
-    });
-    it('should show terms of service link', () => {
-      render(<Component updateVariable={['TERMS_OF_SERVICE_URL', 'termsofserviceurl']} />);
-      expect(screen.getByText('LMS')).toBeVisible();
-      expect(screen.queryByTestId('termsOfService')).toBeVisible();
-      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
-      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
-    });
-    it('should show privacy policy link', () => {
-      render(<Component updateVariable={['PRIVACY_POLICY_URL', 'privacypolicyurl']} />);
-      expect(screen.getByText('LMS')).toBeVisible();
-      expect(screen.queryByTestId('termsOfService')).toBeNull();
-      expect(screen.queryByTestId('privacyPolicy')).toBeVisible();
-      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
-    });
-    it('should show accessibilty request link', () => {
-      render(<Component updateVariable={['ENABLE_ACCESSIBILITY_PAGE', 'true']} />);
-      expect(screen.getByText('LMS')).toBeVisible();
-      expect(screen.queryByTestId('termsOfService')).toBeNull();
-      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
-      expect(screen.queryByTestId('accessibilityRequest')).toBeVisible();
-    });
-  });
-});
--- a/src/components/studio-footer/help-components/HelpButton.jsx
+++ b/src/components/studio-footer/help-components/HelpButton.jsx
@@ -1,32 +0,0 @@
-import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Button,
-} from '@openedx/paragon';
-import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-import messages from '../messages';
-
-const HelpButton = ({ isOpen, setIsOpen }) => {
-  const intl = useIntl();
-  return (
-    <Button
-      data-testid="helpToggleButton"
-      variant="outline-primary"
-      onClick={() => setIsOpen(!isOpen)}
-      iconBefore={Help}
-      iconAfter={isOpen ? ExpandLess : ExpandMore}
-      size="sm"
-    >
-      {isOpen ? intl.formatMessage(messages.closeHelpButtonLabel)
-        : intl.formatMessage(messages.openHelpButtonLabel)}
-    </Button>
-  );
-};
-
-HelpButton.propTypes = {
-  setIsOpen: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-};
-
-export default HelpButton;
--- a/src/components/studio-footer/help-components/HelpButton.test.jsx
+++ b/src/components/studio-footer/help-components/HelpButton.test.jsx
@@ -1,55 +0,0 @@
-import React, { useMemo } from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import HelpButton from './HelpButton';
-import '@testing-library/jest-dom';
-
-// eslint-disable-next-line react/prop-types
-const ButtonWithContext = ({ locale = 'en', isOpen, setIsOpen }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: null,
-    config: { },
-  }), []);
-
-  return (
-    <IntlProvider locale={locale}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <HelpButton isOpen={isOpen} setIsOpen={setIsOpen} />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
-describe('HelpButton', () => {
-  const mockSetIsOpen = jest.fn();
-
-  beforeEach(() => {
-    mockSetIsOpen.mockClear();
-  });
-
-  it('renders with "open" label when isOpen is false', () => {
-    render(<ButtonWithContext isOpen={false} setIsOpen={mockSetIsOpen} />);
-    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveTextContent(/help|open/i);
-  });
-
-  it('renders with "close" label when isOpen is true', () => {
-    render(<ButtonWithContext isOpen setIsOpen={mockSetIsOpen} />);
-    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveTextContent(/close|help/i);
-  });
-
-  it('calls setIsOpen with the toggled value when clicked', async () => {
-    const user = userEvent.setup();
-    const { rerender } = render(<ButtonWithContext isOpen={false} setIsOpen={mockSetIsOpen} />);
-    await user.click(screen.getByTestId('helpToggleButton'));
-    expect(mockSetIsOpen).toHaveBeenCalledWith(true);
-    rerender(<ButtonWithContext isOpen setIsOpen={mockSetIsOpen} />);
-    await user.click(screen.getByTestId('helpToggleButton'));
-    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
-  });
-});
--- a/src/components/studio-footer/help-components/HelpContent.jsx
+++ b/src/components/studio-footer/help-components/HelpContent.jsx
@@ -1,62 +0,0 @@
-import React, { useContext } from 'react';
-import { AppContext } from '@edx/frontend-platform/react';
-import isEmpty from 'lodash/isEmpty';
-import { ensureConfig } from '@edx/frontend-platform';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import {
-  ActionRow,
-  Button,
-} from '@openedx/paragon';
-import messages from '../messages';
-
-ensureConfig([
-  'SUPPORT_EMAIL',
-], 'Studio Footer Help Content component');
-
-const BUTTONS = [
-  {
-    as: 'a',
-    href: 'https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html',
-    size: 'sm',
-    message: messages.educatorsDocsButtonLabel,
-    dataTestid: null,
-  },
-  {
-    as: 'a',
-    href: 'https://sandbox.openedx.org/courses/course-v1:OpenedX+01-2024+2024-1/about',
-    size: 'sm',
-    message: messages.openEdxDemoCourseButtonLabel,
-    dataTestid: 'openEdXDemoCourseButton',
-  },
-];
-
-const HelpContent = () => {
-  const { config } = useContext(AppContext);
-  return (
-    <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
-      <ActionRow.Spacer />
-
-      {BUTTONS.map(({
-        as, href, size, message, dataTestid,
-      }) => (
-        <Button as={as} href={href} size={size} key={message.id} data-testid={dataTestid}>
-          <FormattedMessage {...message} />
-        </Button>
-      ))}
-
-      {!isEmpty(config.SUPPORT_EMAIL) && (
-        <Button
-          as="a"
-          href={`mailto:${config.SUPPORT_EMAIL}`}
-          size="sm"
-          data-testid="contactUsButton"
-        >
-          <FormattedMessage {...messages.contactUsButtonLabel} />
-        </Button>
-      )}
-      <ActionRow.Spacer />
-    </ActionRow>
-  );
-};
-
-export default HelpContent;
--- a/src/components/studio-footer/help-components/HelpContent.test.jsx
+++ b/src/components/studio-footer/help-components/HelpContent.test.jsx
@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import HelpContent from './HelpContent';
-import '@testing-library/jest-dom';
-import messages from '../messages';
-
-// eslint-disable-next-line react/prop-types
-const ContentWithContext = ({ locale = 'en', config = {} }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: null,
-    config,
-  }), [config]);
-
-  return (
-    <IntlProvider locale={locale}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <HelpContent />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
-describe('HelpContent', () => {
-  it('renders all help buttons', () => {
-    const config = { SUPPORT_EMAIL: 'support@example.com' };
-    render(<ContentWithContext config={config} />);
-    expect(screen.getByText(messages.educatorsDocsButtonLabel.defaultMessage)).toBeInTheDocument();
-    expect(screen.getByText(messages.openEdxDemoCourseButtonLabel.defaultMessage)).toBeInTheDocument();
-  });
-
-  it('does not render contact button if SUPPORT_EMAIL is empty', () => {
-    render(<ContentWithContext config={{ SUPPORT_EMAIL: null }} />);
-    expect(screen.queryByTestId('contactUsButton')).not.toBeInTheDocument();
-  });
-
-  it('renders ActionRow with correct test id', () => {
-    render(<ContentWithContext />);
-    expect(screen.getByTestId('helpButtonRow')).toBeInTheDocument();
-  });
-});
--- a/src/components/studio-footer/help-components/HelpSection.jsx
+++ b/src/components/studio-footer/help-components/HelpSection.jsx
@@ -1,43 +0,0 @@
-import React from 'react';
-import {
-  Container,
-  TransitionReplace,
-} from '@openedx/paragon';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import StudioFooterHelpButtonSlot from '../../../plugin-slots/StudioFooterHelpButtonSlot';
-import StudioFooterHelpContentlot from '../../../plugin-slots/StudioFooterHelpContentSlot';
-
-const HelpSection = ({ containerProps }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const { containerClassName, ...restContainerProps } = containerProps || {};
-  return (
-    <>
-      <div className="m-0 mt-6 row align-items-center justify-content-center">
-        <div className="col border-top mr-2" />
-        <StudioFooterHelpButtonSlot
-          setIsOpen={setIsOpen}
-          isOpen={isOpen}
-        />
-        <div className="col border-top ml-2" />
-      </div>
-      <Container
-        size="xl"
-        className={classNames('px-4', containerClassName)}
-        {...restContainerProps}
-      >
-        {isOpen && <TransitionReplace><StudioFooterHelpContentlot /></TransitionReplace> }
-      </Container>
-    </>
-  );
-};
-
-HelpSection.propTypes = {
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-HelpSection.defaultProps = {
-  containerProps: {},
-};
-
-export default HelpSection;
--- a/src/components/studio-footer/help-components/HelpSection.test.jsx
+++ b/src/components/studio-footer/help-components/HelpSection.test.jsx
@@ -1,52 +0,0 @@
-import React, { useMemo } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import HelpSection from './HelpSection';
-import '@testing-library/jest-dom';
-
-// eslint-disable-next-line react/prop-types
-const HelpSectionWithContext = ({ locale = 'en', config = {}, containerProps = null }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: null,
-    config,
-  }), [config]);
-
-  return (
-    <IntlProvider locale={locale}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <HelpSection containerProps={containerProps} />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
-describe('HelpSection', () => {
-  it('renders the HelpButton', () => {
-    render(<HelpSectionWithContext />);
-    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
-  });
-
-  it('does not show HelpContent by default', () => {
-    render(<HelpSectionWithContext />);
-    expect(screen.queryByTestId('helpButtonRow')).not.toBeInTheDocument();
-  });
-
-  it('shows HelpContent when HelpButton is clicked', () => {
-    render(<HelpSectionWithContext />);
-    const button = screen.getByTestId('helpToggleButton');
-    fireEvent.click(button);
-    expect(screen.getByTestId('helpButtonRow')).toBeInTheDocument();
-  });
-
-  it('hides HelpContent when HelpButton is clicked twice', () => {
-    render(<HelpSectionWithContext containerProps={{ containerClassName: 'container', size: 'xl' }} />);
-    const button = screen.getByTestId('helpToggleButton');
-    fireEvent.click(button);
-    expect(screen.queryByTestId('helpButtonRow')).toBeInTheDocument();
-    fireEvent.click(button);
-    expect(screen.queryByTestId('helpButtonRow')).not.toBeInTheDocument();
-  });
-});
--- a/src/components/studio-footer/index.jsx
+++ b/src/components/studio-footer/index.jsx
@@ -1,3 +0,0 @@
-import StudioFooter from './StudioFooter';
-
-export default StudioFooter;
--- a/src/components/studio-footer/messages.js
+++ b/src/components/studio-footer/messages.js
@@ -1,51 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  openHelpButtonLabel: {
-    id: 'authoring.footer.help.openHelp.button.label',
-    defaultMessage: 'Looking for help with Studio?',
-    description: 'Label for button that opens the collapsed section with help buttons',
-  },
-  closeHelpButtonLabel: {
-    id: 'authoring.footer.help.closeHelp.button.label',
-    defaultMessage: 'Hide Studio help',
-    description: 'Label for button that closes the collapsed section with help buttons',
-  },
-  educatorsDocsButtonLabel: {
-    id: 'authoring.footer.help.educatorsDocs.button.label',
-    defaultMessage: 'Open edX Educators Docs',
-    description: 'Label for button that links to the build a course quickstart site',
-  },
-  openEdxDemoCourseButtonLabel: {
-    id: 'authoring.footer.help.openEdxDemoCourse.button.label',
-    defaultMessage: 'Open edX Demo Course',
-    description: 'Label for button that links to the open edX demo course portal',
-  },
-  contactUsButtonLabel: {
-    id: 'authoring.footer.help.contactUs.button.label',
-    defaultMessage: 'Contact us',
-    description: 'Label for button that links to the email for partner support',
-  },
-  termsOfServiceLinkLabel: {
-    id: 'authoring.footer.termsOfService.link.label',
-    defaultMessage: 'Terms of Service',
-    description: 'Label for button that links to the terms of service page',
-  },
-  privacyPolicyLinkLabel: {
-    id: 'authoring.footer.privacyPolicy.link.label',
-    defaultMessage: 'Privacy Policy',
-    description: 'Label for button that links to the privacy policy page',
-  },
-  accessibilityRequestLinkLabel: {
-    id: 'authoring.footer.accessibilityRequest.link.label',
-    defaultMessage: 'Accessibility Accomodation Request',
-    description: 'Label for button that links to the accessibility accomodation requests page',
-  },
-  trademarkMessage: {
-    id: 'authoring.footer.trademark.message',
-    defaultMessage: 'edX and Open edX, and the edX and Open edX logos are registered trademarks of',
-    description: 'Message about the use of logos and names edX and Open edX',
-  },
-});
-
-export default messages;
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1 +1,34 @@
-export default {};
+import arMessages from './messages/ar.json';
+import frMessages from './messages/fr.json';
+import es419Messages from './messages/es_419.json';
+import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+import dedeCAMessages from './messages/de_DE.json';
+import ititCAMessages from './messages/it_IT.json';
+import ptptCAMessages from './messages/pt_PT.json';
+// no need to import en messages-- they are in the defaultMessage field
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
+  'de-de': dedeCAMessages,
+  'it-it': ititCAMessages,
+  'pt-pt': ptptCAMessages,
+};
+
+export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/de_DE.json
+++ b/src/i18n/messages/de_DE.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/fr_CA.json
+++ b/src/i18n/messages/fr_CA.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/hi.json
+++ b/src/i18n/messages/hi.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/it.json
+++ b/src/i18n/messages/it.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/it_IT.json
+++ b/src/i18n/messages/it_IT.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt.json
+++ b/src/i18n/messages/pt.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt_PT.json
+++ b/src/i18n/messages/pt_PT.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -0,0 +1 @@
+{}
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,5 @@
 import Footer, { EVENT_NAMES } from './components/Footer';
 import messages from './i18n/index';
-import StudioFooter from './components/studio-footer';
-import FooterSlot from './plugin-slots/FooterSlot';
-import StudioFooterSlot from './plugin-slots/StudioFooterSlot';

 export default Footer;
-export {
-  messages, EVENT_NAMES, StudioFooter, FooterSlot, StudioFooterSlot,
-};
+export { messages, EVENT_NAMES };
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -1,51 +0,0 @@
-# FooterSlot
-
-### Slot ID: `org.openedx.frontend.layout.footer.v1`
-
-### Slot ID Aliases
-* `footer_slot`
-
-## Description
-
-This slot is used to repace/modify/hide the entire 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: {
-    'org.openedx.frontend.layout.footer.v1': {
-      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/FooterSlot/index.jsx
+++ b/src/plugin-slots/FooterSlot/index.jsx
@@ -1,14 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import Footer from '../../components/Footer';
-
-const FooterSlot = () => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.footer.v1"
-    idAliases={['footer_slot', 'footer_plugin_slot']}
-  >
-    <Footer />
-  </PluginSlot>
-);
-
-export default FooterSlot;
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -1,5 +0,0 @@
-# `frontend-component-footer` Plugin Slots
-
-* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
-* [`org.openedx.frontend.layout.studio_footer.v1`](./StudioFooterSlot/)
-* [`org.openedx.frontend.layout.studio_footer_logo.v1`](./StudioFooterLogoSlot/)
--- a/src/plugin-slots/StudioFooterHelpButtonSlot/README.md
+++ b/src/plugin-slots/StudioFooterHelpButtonSlot/README.md
@@ -1,47 +0,0 @@
-# StudioFooterLogoSlot
-
-### Slot ID: `org.openedx.frontend.layout.studio_footer_help_button.v1`
-
-## Description
-
-This slot is used to repace/modify/hide the help button to the studio footer.
-
-## Examples
-
-### Add your custom button.
-
-The following `env.config.jsx` will add a custom help button to the studio footer.
-
-![Screenshot of modified help button](./images/custom_help_button.png)
-
-```jsx
-import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
-import {
-  Button,
-} from '@openedx/paragon';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.studio_footer_help_button.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'studio_footer_helpbutton_addition',
-            type: DIRECT_PLUGIN,
-            priority: 40,
-            RenderWidget: ({isOpen, setIsOpen}) => {
-              return (
-                <Button className="button button1" onClick={() => setIsOpen(!isOpen)}>Custom Help Button</Button>
-              )
-            }
-          }
-        },
-      ],
-    }
-  },
-};
-
-export default config;
-```
--- a/src/plugin-slots/StudioFooterHelpButtonSlot/images/custom_help_button.png
+++ b/src/plugin-slots/StudioFooterHelpButtonSlot/images/custom_help_button.png
--- a/src/plugin-slots/StudioFooterHelpButtonSlot/index.jsx
+++ b/src/plugin-slots/StudioFooterHelpButtonSlot/index.jsx
@@ -1,17 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import PropTypes from 'prop-types';
-import HelpButton from '../../components/studio-footer/help-components/HelpButton';
-
-const StudioFooterHelpButtonSlot = ({ isOpen, setIsOpen }) => (
-  <PluginSlot id="org.openedx.frontend.layout.studio_footer_help_button.v1" pluginProps={{ isOpen, setIsOpen }}>
-    <HelpButton isOpen={isOpen} setIsOpen={setIsOpen} />
-  </PluginSlot>
-);
-
-StudioFooterHelpButtonSlot.propTypes = {
-  setIsOpen: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-};
-
-export default StudioFooterHelpButtonSlot;
--- a/src/plugin-slots/StudioFooterHelpContentSlot/README.md
+++ b/src/plugin-slots/StudioFooterHelpContentSlot/README.md
@@ -1,50 +0,0 @@
-# StudioFooterLogoSlot
-
-### Slot ID: `org.openedx.frontend.layout.studio_footer_help-content.v1`
-
-## Description
-
-This slot is used to repace/modify/hide the help content to the studio footer.
-
-## Examples
-
-### Add a custom help content.
-
-The following `env.config.jsx` will add a custom help content to the studio footer.
-
-![Screenshot of modified help content](./images/custom_help_content.png)
-
-```jsx
-import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
-import {
-  Hyperlink,
-} from '@openedx/paragon';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.studio_footer_help-content.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'studio_footer_helpcontent_addition',
-            type: DIRECT_PLUGIN,
-            priority: 40,
-            RenderWidget: () => {
-              return (
-                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px 5px' }}> 
-                  <p>Custom Help content</p>
-                  <Hyperlink destination="https://example.com/">more help</Hyperlink>
-                </div>
-              )
-            }
-          }
-        },
-      ],
-    }
-  },
-};
-
-export default config;
-```
--- a/src/plugin-slots/StudioFooterHelpContentSlot/images/custom_help_content.png
+++ b/src/plugin-slots/StudioFooterHelpContentSlot/images/custom_help_content.png
--- a/src/plugin-slots/StudioFooterHelpContentSlot/index.jsx
+++ b/src/plugin-slots/StudioFooterHelpContentSlot/index.jsx
@@ -1,13 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import HelpContent from '../../components/studio-footer/help-components/HelpContent';
-
-const StudioFooterHelpContentSlot = () => (
-  <PluginSlot
-    id="org.openedx.frontend.layout.studio_footer_help-content.v1"
-  >
-    <HelpContent />
-  </PluginSlot>
-);
-
-export default StudioFooterHelpContentSlot;
--- a/src/plugin-slots/StudioFooterHelpSectionSlot/README.md
+++ b/src/plugin-slots/StudioFooterHelpSectionSlot/README.md
@@ -1,53 +0,0 @@
-# StudioFooterLogoSlot
-
-### Slot ID: `org.openedx.frontend.layout.studio_footer_help_section.v1`
-
-## Description
-
-This slot is used to repace/modify/hide the help section to the studio footer.
-
-![Screenshot of modified help section](./images/custom_help_section.png)
-
-## Examples
-
-### Customize help section.
-
-The following `env.config.jsx` will add a custom help section to the studio footer.
-
-```jsx
-import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
-import {
-  Hyperlink,
-  Button,
-} from '@openedx/paragon';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.studio_footer_help_section.v1': {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'studio_footer_helpsection_addition',
-            type: DIRECT_PLUGIN,
-            priority: 40,
-            RenderWidget: () => {
-              return (
-                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px 5px' }}> 
-                  <p>Custom Help Section custizable as needed </p>
-                  <Button className="button button1">Go to home</Button>
-                  <Hyperlink destination="https://example.com/">About</Hyperlink>
-                  <Hyperlink destination="https://example.com/">Info</Hyperlink>
-                </div>
-              )
-            }
-          }
-        },
-      ],
-    }
-  },
-};
-
-export default config;
-```
--- a/src/plugin-slots/StudioFooterHelpSectionSlot/images/custom_help_section.png
+++ b/src/plugin-slots/StudioFooterHelpSectionSlot/images/custom_help_section.png
--- a/src/plugin-slots/StudioFooterHelpSectionSlot/index.jsx
+++ b/src/plugin-slots/StudioFooterHelpSectionSlot/index.jsx
@@ -1,19 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import PropTypes from 'prop-types';
-import {
-  Container,
-} from '@openedx/paragon';
-import HelpSection from '../../components/studio-footer/help-components/HelpSection';
-
-const StudioFooterHelpSectionSlot = ({ containerProps }) => (
-  <PluginSlot id="org.openedx.frontend.layout.studio_footer_help_section.v1">
-    <HelpSection containerProps={containerProps} />
-  </PluginSlot>
-);
-
-StudioFooterHelpSectionSlot.propTypes = {
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-export default StudioFooterHelpSectionSlot;
--- a/src/plugin-slots/StudioFooterLogoSlot/README.md
+++ b/src/plugin-slots/StudioFooterLogoSlot/README.md
@@ -1,57 +0,0 @@
-# StudioFooterLogoSlot
-
-### Slot ID: `org.openedx.frontend.layout.studio_footer_logo.v1`
-
-### Slot ID Aliases
-* `studio_footer_logo_slot`
-
-## Description
-
-This slot is used to add your site logo to the studio footer.
-
-## Examples
-
-### Add your site logo.
-
-The following `env.config.jsx` will add your site logo to the studio footer.
-
-![Screenshot of modified Studio Footer Logo](./images/add_your_site_logo.png)
-
-```jsx
-import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
-import {
-  Hyperlink,
-  Image,
-} from '@openedx/paragon';
-
-const config = {
-  pluginSlots: {
-    'org.openedx.frontend.layout.studio_footer_logo.v1': {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'studio_footer_logo_addition',
-            type: DIRECT_PLUGIN,
-            priority: 40,
-            RenderWidget: () => {
-              return (
-                <Hyperlink destination="https://example.com/" className="float-right">
-                  <Image
-                    height="48px"
-                    alt="Hosted by MySite"
-                    src="https://logos.openedx.org/generic-logo.svg"
-                  />
-                </Hyperlink>
-              )
-            }
-          }
-        },
-      ],
-    }
-  },
-};
-
-export default config;
-```
--- a/src/plugin-slots/StudioFooterLogoSlot/images/add_your_site_logo.png
+++ b/src/plugin-slots/StudioFooterLogoSlot/images/add_your_site_logo.png
--- a/src/plugin-slots/StudioFooterLogoSlot/index.jsx
+++ b/src/plugin-slots/StudioFooterLogoSlot/index.jsx
@@ -1,17 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { Hyperlink, Image } from '@openedx/paragon';
-
-const StudioFooterLogoSlot = () => (
-  <PluginSlot id="org.openedx.frontend.layout.studio_footer_logo.v1" idAliases={['studio_footer_logo_slot']}>
-    <Hyperlink destination="https://openedx.org" className="float-right">
-      <Image
-        width="120px"
-        alt="Powered by Open edX"
-        src="https://logos.openedx.org/open-edx-logo-tag.png"
-      />
-    </Hyperlink>
-  </PluginSlot>
-);
-
-export default StudioFooterLogoSlot;
--- a/src/plugin-slots/StudioFooterSlot/README.md
+++ b/src/plugin-slots/StudioFooterSlot/README.md
@@ -1,51 +0,0 @@
-# StudioFooterSlot
-
-### Slot ID: `org.openedx.frontend.layout.studio_footer.v1`
-
-### Slot ID Aliases
-* `studio_footer_slot`
-
-## Description
-
-This slot is used to repace/modify/hide the entire studio footer.
-
-## Example
-
-The following `env.config.jsx` will replace the default studio footer.
-
-![Screenshot of default studio footer](./images/default_studio_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: {
-    'org.openedx.frontend.layout.studio_footer.v1': {
-      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/StudioFooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/StudioFooterSlot/images/custom_footer.png
--- a/src/plugin-slots/StudioFooterSlot/images/default_studio_footer.png
+++ b/src/plugin-slots/StudioFooterSlot/images/default_studio_footer.png
--- a/src/plugin-slots/StudioFooterSlot/index.jsx
+++ b/src/plugin-slots/StudioFooterSlot/index.jsx
@@ -1,11 +0,0 @@
-import React from 'react';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import StudioFooter from '../../components/studio-footer';
-
-const StudioFooterSlot = () => (
-  <PluginSlot id="org.openedx.frontend.layout.studio_footer.v1" idAliases={['studio_footer_slot']}>
-    <StudioFooter />
-  </PluginSlot>
-);
-
-export default StudioFooterSlot;
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,3 +1,8 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
@@ -19,4 +24,3 @@ process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
 process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
 process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
 process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';
-process.env.ENABLE_ACCESSIBILITY_PAGE = 'false';
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,10 +1,8 @@
 const path = require('path');
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('webpack-dev', {
-  entry: {
-    app: path.resolve(__dirname, 'example'),
-  },
+  entry: path.resolve(__dirname, 'example'),
  output: {
    path: path.resolve(__dirname, 'example/dist'),
    publicPath: '/',