refactor: make the lang selector a slot

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>`_.

src/components/Footer.jsx

@@ -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',
@@ -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}
-              />
+              <LanguageSelectorSlot />
             </div>
-          )}
         </div>
       </footer>
     );

src/components/LanguageSelector/index.jsx renamed to src/components/LanguageSelector.jsx

@@ -1,47 +1,27 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { publish } from '@edx/frontend-platform';
-import {
-  injectIntl, LOCALE_CHANGED, getLocale, handleRtl, getPrimaryLanguageSubtag,
-} from '@edx/frontend-platform/i18n';
-import { logError } from '@edx/frontend-platform/logging';
-import { Dropdown, useWindowSize } from '@openedx/paragon';
+import { changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale } from '@edx/frontend-platform/i18n';
+import { Dropdown, Scrollable, useWindowSize } from '@openedx/paragon';
 import { Language } from '@openedx/paragon/icons';
-import { getCookies } from '@edx/frontend-platform/i18n/lib';
-import { patchPreferences, postSetLang } from './data';
 
-const onLanguageSelected = async ({ langCookieName, username, selectedLlocale }) => {
-  try {
-    if (username) {
-      await patchPreferences(username, { prefLang: selectedLlocale });
-      await postSetLang(selectedLlocale);
-    } else {
-      getCookies().set(langCookieName, selectedLlocale);
-    }
-    publish(LOCALE_CHANGED, getLocale());
-    handleRtl();
-  } catch (error) {
-    logError(error);
-  }
-};
 const getLocaleName = (locale) => {
   const langName = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);
   return langName.replace(/^\w/, (c) => c.toUpperCase());
 };
 
 const LanguageSelector = ({
-  langCookieName, options, username,
+  supportedLanguages = [], ...props
 }) => {
   const [currentLocale, setLocale] = useState(getLocale());
   const { width } = useWindowSize();
-
-  const handleSelect = (selectedLlocale) => {
+  const options = supportedLanguages.length > 0 ? supportedLanguages : getSupportedLocaleList();
+  
+  const handleSelect = async (selectedLlocale) => {
     if (currentLocale !== selectedLlocale) {
-      onLanguageSelected({ langCookieName, username, selectedLlocale });
+      await changeUserSessionLanguage(selectedLlocale);
     }
     setLocale(selectedLlocale);
   };
-
   const currentLocaleLabel = useMemo(() => {
     if (width < 576) {
       return '';
@@ -63,20 +43,20 @@ const LanguageSelector = ({
         {currentLocaleLabel}
       </Dropdown.Toggle>
       <Dropdown.Menu>
+        <Scrollable style={{'max-height': '40vh'}}>
         {options.map((locale) => (
           <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
             {getLocaleName(locale)}
           </Dropdown.Item>
         ))}
+        </Scrollable>
       </Dropdown.Menu>
     </Dropdown>
   );
 };
 
 LanguageSelector.propTypes = {
-  langCookieName: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.string).isRequired,
-  username: PropTypes.string,
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string), 
 };
 
-export default injectIntl(LanguageSelector);
+export default LanguageSelector;

src/components/LanguageSelector/data.js

@@ -0,0 +1,13 @@
+# FooterLanguageSelectorSlot
+
+### Slot ID: `org.openedx.frontend.layout.footer_lang_selector.v1`
+
+### Slot ID Aliases
+* `footer_lang_selector`
+
+## Description
+
+This slot is used to repace/modify/hide the language selector in the footer.
+
+## Example
+

src/components/LanguageSelector/index.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PropTypes from 'prop-types';
+import LanguageSelector from '../../components/LanguageSelector';
+
+const LanguageSelectorSlot = ({ supportedLanguages }) => (
+  <PluginSlot id="org.openedx.frontend.layout.footer_lang_selector.v1" pluginProps={{ supportedLanguages }}>
+    <LanguageSelector supportedLanguages={supportedLanguages} />
+  </PluginSlot>
+);
+
+LanguageSelectorSlot.propTypes = {
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string), 
+};
+
+export default LanguageSelectorSlot;