fix(deps): update font awesome

And remove jest-environment-jsdom altogether as we don't reference it directly.

.github/workflows/release.yml

@@ -4,6 +4,11 @@ on:
     branches:
     - master
     - alpha
+
+permissions:
+  id-token: write  # Required for OIDC
+  contents: write  # For Semantic Release tagging
+
 jobs:
   release:
     name: Release
@@ -13,12 +18,10 @@ jobs:
       uses: actions/checkout@v4
       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
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -37,7 +40,6 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
+      run: npx semantic-release@25
       env:
-        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-      run: npx semantic-release
+        GITHUB_TOKEN: ${{ secrets.OPENEDX_SEMANTIC_RELEASE_GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-20
+24

README.rst

@@ -62,9 +62,9 @@ Cloning and Startup
 
     ``git clone https://github.com/openedx/frontend-component-footer.git``
 
-  2. Use node v18.x.
+  2. Use node v24.x.
 
-    The current version of the micro-frontend build scripts support node 18.
+    The current version of the micro-frontend build scripts support node 24.
     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>`_.

package.json

@@ -34,7 +34,6 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "^8.2.1",
-    "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.1",
     "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -45,22 +44,21 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "8.1.3",
-    "react-router-dom": "6.30.1",
+    "react-router-dom": "6.30.2",
     "react-test-renderer": "18.3.1",
     "redux": "4.2.1",
-    "semantic-release": "21.1.2"
+    "semantic-release": "21.1.2",
+    "ts-jest": "^29.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",
+    "@fortawesome/fontawesome-svg-core": "7.2.0",
+    "@fortawesome/free-brands-svg-icons": "7.2.0",
+    "@fortawesome/free-regular-svg-icons": "7.2.0",
+    "@fortawesome/free-solid-svg-icons": "7.2.0",
+    "@fortawesome/react-fontawesome": "3.2.0",
     "@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"
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",

src/components/Footer.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -17,13 +17,17 @@ const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
 
-class SiteFooter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
-  }
+const SiteFooter = ({
+  supportedLanguages,
+  onLanguageSelected,
+  logo,
+}) => {
+  const intl = useIntl();
+  const { config } = useContext(AppContext);
 
-  externalLinkClickHandler(event) {
+  const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+
+  const externalLinkClickHandler = (event) => {
     const label = event.currentTarget.getAttribute('href');
     const eventName = EVENT_NAMES.FOOTER_LINK;
     const properties = {
@@ -31,52 +35,39 @@ class SiteFooter extends React.Component {
       label,
     };
     sendTrackEvent(eventName, properties);
-  }
+  };
 
-  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;
+  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>
+  );
+};
 
 SiteFooter.propTypes = {
-  intl: intlShape.isRequired,
   logo: PropTypes.string,
   onLanguageSelected: PropTypes.func,
   supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
@@ -91,5 +82,5 @@ SiteFooter.defaultProps = {
   supportedLanguages: [],
 };
 
-export default injectIntl(SiteFooter);
+export default SiteFooter;
 export { EVENT_NAMES };

src/components/LanguageSelector.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const LanguageSelector = ({
-  intl, options, onSubmit, ...props
+  options, onSubmit, ...props
 }) => {
+  const intl = useIntl();
   const handleSubmit = (e) => {
     e.preventDefault();
     const languageCode = e.target.elements['site-footer-language-select'].value;
@@ -47,7 +48,6 @@ 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 injectIntl(LanguageSelector);
+export default LanguageSelector;

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

@@ -12,6 +12,7 @@ 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"
@@ -81,6 +82,7 @@ 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"
@@ -111,6 +113,7 @@ 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/components/studio-footer/help-components/HelpContent.jsx

@@ -16,32 +16,18 @@ ensureConfig([
 const BUTTONS = [
   {
     as: 'a',
-    href: 'https://docs.openedx.org/',
+    href: 'https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html',
     size: 'sm',
-    message: messages.edxDocumentationButtonLabel,
+    message: messages.educatorsDocsButtonLabel,
     dataTestid: null,
   },
   {
     as: 'a',
-    href: 'https://openedx.org/',
+    href: 'https://training.openedx.io/courses/course-v1:OpenedX+DemoX+Demo_Course/about',
     size: 'sm',
-    message: messages.openEdxPortalButtonLabel,
-    dataTestid: 'openEdXPortalButton',
-  },
-  {
-    as: 'a',
-    href: 'https://www.edx.org/course/edx101-overview-of-creating-an-edx-course#.VO4eaLPF-n1',
-    size: 'sm',
-    message: messages.edx101ButtonLabel,
+    message: messages.openEdxDemoCourseButtonLabel,
     dataTestid: 'openEdXDemoCourseButton',
   },
-  {
-    as: 'a',
-    href: 'https://www.edx.org/course/studiox-creating-a-course-with-edx-studio',
-    size: 'sm',
-    message: messages.studioXButtonLabel,
-    dataTestid: null,
-  },
 ];
 
 const HelpContent = () => {

src/components/studio-footer/help-components/HelpContent.test.jsx

@@ -28,8 +28,8 @@ describe('HelpContent', () => {
   it('renders all help buttons', () => {
     const config = { SUPPORT_EMAIL: 'support@example.com' };
     render(<ContentWithContext config={config} />);
-    expect(screen.getByText(messages.edxDocumentationButtonLabel.defaultMessage)).toBeInTheDocument();
-    expect(screen.getByText(messages.edx101ButtonLabel.defaultMessage)).toBeInTheDocument();
+    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', () => {

src/components/studio-footer/messages.js

@@ -11,25 +11,15 @@ const messages = defineMessages({
     defaultMessage: 'Hide Studio help',
     description: 'Label for button that closes the collapsed section with help buttons',
   },
-  edxDocumentationButtonLabel: {
-    id: 'authoring.footer.help.edxDocumentation.button.label',
-    defaultMessage: 'edX documentation',
-    description: 'Label for button that links to the edX documentation site',
+  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',
   },
-  openEdxPortalButtonLabel: {
-    id: 'authoring.footer.help.openEdxPortal.button.label',
-    defaultMessage: 'Open edX portal',
-    description: 'Label for button that links to the Open edX portal',
-  },
-  edx101ButtonLabel: {
-    id: 'authoring.footer.help.edx101.button.label',
-    defaultMessage: 'Enroll in edX 101',
-    description: 'Label for button that links to the edX 101 course',
-  },
-  studioXButtonLabel: {
-    id: 'authoring.footer.help.studioX.button.label',
-    defaultMessage: 'Enroll in StudioX',
-    description: 'Label for button that links to the edX StudioX course',
+  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',