fix: Update sandbox link in studio footer (#561)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.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",
@@ -55,7 +54,7 @@
     "@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/react-fontawesome": "0.2.6",
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.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

@@ -23,7 +23,7 @@ const BUTTONS = [
   },
   {
     as: 'a',
-    href: 'https://sandbox.openedx.org/courses/course-v1:OpenedX+01-2024+2024-1/about',
+    href: 'https://training.openedx.io/courses/course-v1:OpenedX+DemoX+Demo_Course/about',
     size: 'sm',
     message: messages.openEdxDemoCourseButtonLabel,
     dataTestid: 'openEdXDemoCourseButton',