build(deps-dev): bump webpack-dev-middleware from 5.3.3 to 5.3.4

Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4.
- [Release notes](https://github.com/webpack/webpack-dev-middleware/releases)
- [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4)

---
updated-dependencies:
- dependency-name: webpack-dev-middleware
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/ci.yml

@@ -14,10 +14,12 @@ jobs:
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       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

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.github/workflows/release.yml

@@ -30,10 +30,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

.gitignore

@@ -10,4 +10,3 @@ src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
 module.config.js
-src/i18n/messages

.nvmrc

@@ -1 +1 @@
-20
+18

.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
+

Makefile

@@ -1,3 +1,6 @@
+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
@@ -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:

README.rst

@@ -93,12 +93,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 using using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-Information on how to utilize the ``FooterSlot`` component to do so is available in the `frontend-slot-footer repository <https://github.com/openedx/frontend-slot-footer/>`_.
-
 Examples
 ========
 
@@ -119,8 +113,6 @@ 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
 ===========
 

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"

openedx.yaml

@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/fedx-team
+tags:
+  - library
+  - component
+  - react

package.json

@@ -13,8 +13,7 @@
     "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"
   },
   "files": [
     "/dist"
@@ -37,41 +36,35 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "^8.2.1",
+    "@openedx/frontend-build": "^13.0.19",
+    "@openedx/paragon": "22.0.0",
+    "@edx/frontend-platform": "7.1.3",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "^14.3.1",
-    "@openedx/frontend-plugin-framework": "^1.5.0",
-    "@openedx/paragon": "^22.15.1",
     "@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",
+    "@testing-library/react": "^12.1.1",
     "husky": "8.0.3",
     "prop-types": "15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-redux": "8.1.1",
-    "react-router-dom": "6.28.2",
-    "react-test-renderer": "18.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.9",
+    "react-router-dom": "6.21.3",
+    "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "semantic-release": "21.1.2"
   },
   "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.2",
-    "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
-    "lodash": "^4.17.21",
-    "ts-jest": "^29.1.2"
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/react-fontawesome": "0.2.0",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+    "@edx/frontend-platform": "^7.0.0",
     "@openedx/paragon": ">= 21.11.3 < 23.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"
   }
 }

src/components/Footer.test.jsx

@@ -1,8 +1,7 @@
 /* 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 { render, fireEvent, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
@@ -77,13 +76,19 @@ 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} />);
 
-      await user.selectOptions(screen.getByRole('combobox'), 'es');
-      await user.click(screen.getByTestId('site-footer-submit-btn'));
+      fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
+        target: {
+          elements: {
+            'site-footer-language-select': {
+              value: 'es',
+            },
+          },
+        },
+      });
 
       expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
     });

src/components/__snapshots__/Footer.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          {
+          Object {
             "maxHeight": 45,
           }
         }
@@ -86,7 +86,7 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          {
+          Object {
             "maxHeight": 45,
           }
         }
@@ -116,7 +116,7 @@ exports[`<Footer /> renders correctly renders without a language selector in es
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          {
+          Object {
             "maxHeight": 45,
           }
         }

src/components/studio-footer/StudioFooter.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import _ from 'lodash';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
@@ -12,9 +12,6 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
 import messages from './messages';
 
 ensureConfig([
@@ -29,14 +26,12 @@ ensureConfig([
 ], 'Studio Footer component');
 
 const StudioFooter = ({
-  containerProps,
+  // injected
+  intl,
 }) => {
-  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const { config } = useContext(AppContext);
 
-  const { containerClassName, ...restContainerProps } = containerProps || {};
-
   return (
     <>
       <div className="m-0 mt-6 row align-items-center justify-content-center">
@@ -54,11 +49,7 @@ const StudioFooter = ({
         </Button>
         <div className="col border-top ml-2" />
       </div>
-      <Container
-        size="xl"
-        className={classNames('px-4', containerClassName)}
-        {...restContainerProps}
-      >
+      <Container size="xl" className="px-4">
         <TransitionReplace>
           {isOpen ? (
             <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
@@ -148,11 +139,8 @@ const StudioFooter = ({
 };
 
 StudioFooter.propTypes = {
-  containerProps: PropTypes.shape(Container.propTypes),
+  // injected
+  intl: intlShape.isRequired,
 };
 
-StudioFooter.defaultProps = {
-  containerProps: {},
-};
-
-export default StudioFooter;
+export default injectIntl(StudioFooter);

src/components/studio-footer/StudioFooter.test.jsx

@@ -1,7 +1,6 @@
 /* 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 { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -57,40 +56,35 @@ describe('Footer', () => {
     });
   });
   describe('help section expanded view', () => {
-    it('help button should read Hide Studio help', async () => {
-      const user = userEvent.setup();
+    it('help button should read Hide Studio help', () => {
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
+      fireEvent.click(helpToggleButton);
       expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
         .toBeVisible();
     });
-    it('help button link row should be visible', async () => {
-      const user = userEvent.setup();
+    it('help button link row should be visible', () => {
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
+      fireEvent.click(helpToggleButton);
       expect(screen.getByTestId('helpButtonRow')).toBeVisible();
     });
-    it('Open edX portal button should be visible', async () => {
-      const user = userEvent.setup();
+    it('Open edX portal button should be visible', () => {
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
+      fireEvent.click(helpToggleButton);
       expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
     });
-    it('should not show contact us button', async () => {
-      const user = userEvent.setup();
+    it('should not show contact us button', () => {
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
+      fireEvent.click(helpToggleButton);
       expect(screen.queryByTestId('contactUsButton')).toBeNull();
     });
-    it('should show contact us button', async () => {
-      const user = userEvent.setup();
+    it('should show contact us button', () => {
       render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      await user.click(helpToggleButton);
+      fireEvent.click(helpToggleButton);
       expect(screen.getByTestId('contactUsButton')).toBeVisible();
     });
   });

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;

src/i18n/messages/ar.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/de.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/de_DE.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/es_419.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/fr.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/fr_CA.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/hi.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/it.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/it_IT.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pt.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pt_PT.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ru.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/uk.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/zh_CN.json

@@ -0,0 +1 @@
+{}

src/index.js

@@ -3,6 +3,4 @@ import messages from './i18n/index';
 import StudioFooter from './components/studio-footer';
 
 export default Footer;
-export {
-  messages, EVENT_NAMES, StudioFooter,
-};
+export { messages, EVENT_NAMES, StudioFooter };