Manuel star do/release/v20.1.0

.github/workflows/release.yml

@@ -2,8 +2,8 @@ name: Release CI
 on:
   push:
     branches:
-    - master
-    - alpha
+    - nau/*.master
+
 jobs:
   release:
     name: Release
@@ -38,10 +38,7 @@ jobs:
         fail_ci_if_error: false
     - name: Build
       run: npm run build
-    - name: Release
-      uses: cycjimmy/semantic-release-action@v3
+    - name: Release to npmjs
+      uses: JS-DevTools/npm-publish@v3
       with:
-        semantic_version: 16
-      env:
-        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        token: ${{ secrets.NPM_AUTH_TOKEN }}

README.rst

@@ -51,6 +51,10 @@ Environment Variables
 * ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
   menu items when truthy.  This is intended to be used in micro-frontends like
   frontend-app-authentication in which these menus are considered distractions from the user's task.
+* ``ENABLE_HEADER_LANG_SELECTOR`` - A boolean to enable the language selector in the header component.
+* ``SITE_SUPPORTED_LANGUAGES`` - A list with all the languages to display in the selector.
+* ``LOGO_URL_MOBILE`` - The URL of the site's logo for mobile. This logo is displayed in the header.
+
 
 Installation
 ============

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@edx/frontend-component-header",
-  "version": "1.0.0-semantically-released",
-  "description": "The standard header for Open edX",
+  "name": "@nauedu/frontend-component-header",
+  "version": "20.1.0",
+  "description": "NAU header component for Open edX",
   "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -22,14 +22,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-header.git"
+    "url": "git+https://github.com/fccn/frontend-component-header-nau.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/openedx/frontend-component-header/issues"
+    "url": "https://github.com/fccn/frontend-component-header-nau/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-component-header#readme",
+  "homepage": "https://github.com/fccn/frontend-component-header-nau#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",

src/Header.jsx

@@ -3,7 +3,7 @@ import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
-  APP_CONFIG_INITIALIZED,
+  APP_PUBSUB_INITIALIZED,
   ensureConfig,
   mergeConfig,
   getConfig,
@@ -25,9 +25,10 @@ ensureConfig([
   'ORDER_HISTORY_URL',
 ], 'Header component');
 
-subscribe(APP_CONFIG_INITIALIZED, () => {
+subscribe(APP_PUBSUB_INITIALIZED, () => {
   mergeConfig({
     AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
+    ENABLE_ORG_LOGO: !!process.env.ENABLE_ORG_LOGO,
   }, 'Header additional config');
 });
 

src/LanguageSelector/data/api.js

@@ -0,0 +1,32 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { convertKeyNames, snakeCaseObject } from '@edx/frontend-platform/utils';
+
+export async function patchPreferences(username, params) {
+  let processedParams = snakeCaseObject(params);
+  processedParams = convertKeyNames(processedParams, {
+    pref_lang: 'pref-lang',
+  });
+
+  await getAuthenticatedHttpClient()
+    .patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
+      headers: { 'Content-Type': 'application/merge-patch+json' },
+    });
+
+  return params;
+}
+
+export async function postSetLang(code) {
+  const formData = new FormData();
+  const requestConfig = {
+    headers: {
+      Accept: 'application/json',
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+  };
+  const url = `${getConfig().LMS_BASE_URL}/i18n/setlang/`;
+  formData.append('language', code);
+
+  await getAuthenticatedHttpClient()
+    .post(url, formData, requestConfig);
+}

src/LanguageSelector/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { publish } from '@edx/frontend-platform';
+import {
+  getLocale, injectIntl, intlShape, FormattedMessage, LOCALE_CHANGED, handleRtl,
+} from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@openedx/paragon';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { patchPreferences, postSetLang } from './data/api';
+
+const onLanguageSelected = async (username, selectedLanguageCode) => {
+  try {
+    if (username) {
+      await patchPreferences(username, { prefLang: selectedLanguageCode });
+      await postSetLang(selectedLanguageCode);
+    }
+    publish(LOCALE_CHANGED, getLocale());
+    handleRtl();
+  } catch (error) {
+    logError(error);
+  }
+};
+
+const LanguageSelector = ({
+  intl, options, authenticatedUser, compact,
+}) => {
+  const languageLabel = (languageCode) => {
+    const option = options.find(({ value }) => value === languageCode);
+    return option ? option.label : null;
+  };
+
+  const handleChange = (languageCode, event) => {
+    const previousSiteLanguage = getLocale();
+    /* eslint-disable no-console */
+    console.debug(previousSiteLanguage, languageCode, authenticatedUser);
+
+    if (previousSiteLanguage !== languageCode) {
+      onLanguageSelected(authenticatedUser?.username, languageCode);
+    }
+
+    const languageLabelElement = event.target.parentElement.parentElement.querySelector('.languageLabel');
+    languageLabelElement.innerHTML = languageLabel(languageCode);
+  };
+
+  const currentLangLabel = languageLabel(intl.locale);
+  const showLabel = !(compact || false);
+
+  return (
+    <Dropdown className="language-selector">
+      <Dropdown.Toggle variant="outline-primary">
+        <FontAwesomeIcon icon={faGlobe} />
+        {showLabel && (
+          currentLangLabel ? (
+            <span className="pl-1 languageLabel">
+              {currentLangLabel}
+            </span>
+          ) : (
+            <span className="pl-1">
+              <FormattedMessage
+                id="footer.languageForm.select.label"
+                defaultMessage="Choose Language"
+                description="The label for the laguage select part of the language selection form."
+              />
+            </span>
+          )
+        )}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {options.map(({ value, label }) => (
+          <Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
+            {label}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+LanguageSelector.propTypes = {
+  authenticatedUser: PropTypes.shape({
+    username: PropTypes.string,
+  }).isRequired,
+  intl: intlShape.isRequired,
+  compact: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })).isRequired,
+};
+
+LanguageSelector.defaultProps = {
+  compact: false,
+};
+
+export default injectIntl(LanguageSelector);

src/__snapshots__/Header.test.jsx.snap

@@ -28,7 +28,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
       </a>
       <nav
         aria-label="Main"
-        className="nav main-nav"
+        className="nav main-nav mr-auto"
       >
         <a
           className="nav-link"
@@ -40,7 +40,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
       </nav>
       <nav
         aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
+        className="nav secondary-menu-container align-items-center"
       >
         <a
           className="btn mr-2 btn-link"
@@ -225,7 +225,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
       </a>
       <nav
         aria-label="Main"
-        className="nav main-nav"
+        className="nav main-nav mr-auto"
       >
         <a
           className="nav-link"
@@ -237,7 +237,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
       </nav>
       <nav
         aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
+        className="nav secondary-menu-container align-items-center"
       >
         <div
           className="menu null"

src/desktop-header/DesktopHeader.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 // Local Components
 import DesktopUserMenuToggleSlot
@@ -20,6 +21,7 @@ import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
 import messages from '../Header.messages';
 
 // Assets
+import LanguageSelector from '../LanguageSelector';
 
 class DesktopHeader extends React.Component {
   constructor(props) { // eslint-disable-line @typescript-eslint/no-useless-constructor
@@ -84,13 +86,21 @@ class DesktopHeader extends React.Component {
             <LogoSlot {...logoProps} />
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-              className="nav main-nav"
+              className="nav main-nav mr-auto"
             >
               {this.renderMainMenu()}
             </nav>
+            {getConfig().ENABLE_HEADER_LANG_SELECTOR && (
+            <div className="mx-2">
+              <LanguageSelector
+                options={JSON.parse(getConfig().SITE_SUPPORTED_LANGUAGES)}
+                authenticatedUser={getAuthenticatedUser()}
+              />
+            </div>
+            )}
             <nav
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-              className="nav secondary-menu-container align-items-center ml-auto"
+              className="nav secondary-menu-container align-items-center"
             >
               {loggedIn
                 ? (

src/index.scss

@@ -44,8 +44,13 @@ $rounded-pill: 50rem  !default;
     }
   }
 
-  .user-dropdown .btn {
-    height: 3rem;
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
   }
 }