refactor: make the lang selector a slot

fix: update test and linter

docs: add slot readme example

test: update snapshoots

vv

Author: dcoa

README.rst

@@ -86,20 +86,6 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
 
-Language Selector
------------------
-
-The language selector dropdown is optional and can be enabled by setting the MFE configuration variable ``ENABLE_FOOTER_LANG_SELECTOR`` to ``true``.
-Secondly, configue the languages that should be displayed in the dropdown by setting the MFE configuration variable ``SITE_SUPPORTED_LANGUAGES`` to an array of locale languages.
-Example:
-
-.. code-block:: python 
-
-  MFE_CONFIG["EDX_FRONTEND_APP_CONFIG"] = {
-    "ENABLE_FOOTER_LANG_SELECTOR": True,
-    "SITE_SUPPORTED_LANGUAGES": ['en', 'es', 'fr', 'pt-br'],
-  }
-
 Plugin
 ======
 The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.

env.config.js

@@ -6,7 +6,8 @@ import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import messages from './Footer.messages';
-import LanguageSelector from './LanguageSelector';
+
+import LanguageSelectorSlot from '../plugin-slots/LanguageSelectorSlot';
 
 ensureConfig([
   'LMS_BASE_URL',
@@ -38,7 +39,7 @@ class SiteFooter extends React.Component {
       logo,
       intl,
     } = this.props;
-    const { config, authenticatedUser } = this.context;
+    const { config } = this.context;
     return (
       <footer
         role="contentinfo"
@@ -57,15 +58,9 @@ class SiteFooter extends React.Component {
             />
           </a>
           <div className="flex-grow-1" />
-          {config.ENABLE_FOOTER_LANG_SELECTOR && (
-            <div className="mb-2">
-              <LanguageSelector
-                options={config.SITE_SUPPORTED_LANGUAGES}
-                username={authenticatedUser?.username}
-                langCookieName={config.LANGUAGE_PREFERENCE_COOKIE_NAME}
-              />
-            </div>
-          )}
+          <div className="mb-2">
+            <LanguageSelectorSlot />
+          </div>
         </div>
       </footer>
     );

src/components/Footer.jsx

@@ -3,15 +3,19 @@ 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 { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, changeUserSessionLanguage } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
-import Footer from './Footer';
 import FooterSlot from '../plugin-slots/FooterSlot';
 import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';
 
-const FooterWithContext = ({ locale = 'es' }) => {
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  changeUserSessionLanguage: jest.fn(),
+}));
+
+const FooterWithContext = ({ locale = 'en' }) => {
   const contextValue = useMemo(() => ({
     authenticatedUser: null,
     config: {
@@ -31,64 +35,24 @@ const FooterWithContext = ({ locale = 'es' }) => {
   );
 };
 
-const { LANGUAGE_PREFERENCE_COOKIE_NAME } = process.env;
-const FooterWithLanguageSelector = ({ authenticatedUser = null }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser,
-    config: {
-      ENABLE_FOOTER_LANG_SELECTOR: true,
-      LANGUAGE_PREFERENCE_COOKIE_NAME,
-      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-      LMS_BASE_URL: process.env.LMS_BASE_URL,
-      SITE_SUPPORTED_LANGUAGES: ['es', 'en'],
-    },
-  }), [authenticatedUser]);
-
-  return (
-    <IntlProvider locale="en">
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Footer />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
 describe('<Footer />', () => {
-  describe('renders correctly', () => {
-    it('renders without a language selector', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="en" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders without a language selector in es', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="es" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders with a language selector', () => {
-      initializeMockApp();
-      const tree = renderer
-        .create(<FooterWithLanguageSelector />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+  beforeEach(() => { initializeMockApp(); });
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<FooterWithContext />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
-  describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', async () => {
-      const user = userEvent.setup();
-      const mockHandleLanguageSelected = jest.fn();
-      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
+  it('handles language switching', async () => {
+    const user = userEvent.setup();
+    render(<FooterWithContext />);
 
-      await user.selectOptions(screen.getByRole('combobox'), 'es');
-      await user.click(screen.getByTestId('site-footer-submit-btn'));
+    await user.click(screen.getByRole('button'), 'English');
+    await user.click(screen.getByRole('button', { name: 'Español (Latinoamérica)' }));
 
-      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
-    });
+    expect(changeUserSessionLanguage).toHaveBeenCalledWith('es-419');
   });
 });
 

src/components/Footer.test.jsx

@@ -0,0 +1,65 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale,
+} from '@edx/frontend-platform/i18n';
+import { Dropdown, Scrollable, useWindowSize } from '@openedx/paragon';
+import { Language } from '@openedx/paragon/icons';
+
+const getLocaleName = (locale) => {
+  const langName = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);
+  return langName.replace(/^\w/, (c) => c.toUpperCase());
+};
+
+const LanguageSelector = ({
+  supportedLanguages = [],
+}) => {
+  const [currentLocale, setLocale] = useState(getLocale());
+  const { width } = useWindowSize();
+  const options = supportedLanguages.length > 0 ? supportedLanguages : getSupportedLocaleList();
+
+  const handleSelect = async (selectedLocale) => {
+    if (currentLocale !== selectedLocale) {
+      await changeUserSessionLanguage(selectedLocale);
+    }
+    setLocale(selectedLocale);
+  };
+
+  const currentLocaleLabel = useMemo(() => {
+    if (width < 576) {
+      return '';
+    }
+    if (width < 768) {
+      return getPrimaryLanguageSubtag(currentLocale).toUpperCase();
+    }
+    return getLocaleName(currentLocale);
+  }, [currentLocale, width]);
+
+  return (
+    <Dropdown onSelect={handleSelect}>
+      <Dropdown.Toggle
+        id="lang-selector-dropdown"
+        iconBefore={Language}
+        variant="outline-primary"
+        size="sm"
+      >
+        {currentLocaleLabel}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Scrollable style={{ maxHeight: '40vh' }}>
+          {options.map((locale) => (
+            <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
+              {getLocaleName(locale)}
+            </Dropdown.Item>
+          ))}
+        </Scrollable>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+LanguageSelector.propTypes = {
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default LanguageSelector;