Language UI Dropdown new location (#1582)

* New language selector design
* Adjust authenticated nav to consolidate Account dropdown
* Adding language in NavTest

Co-authored-by: Cassie Tarakajian <[email protected]>

Author: oruburos

client/components/Nav.jsx

@@ -5,7 +5,7 @@ import { withRouter } from 'react-router';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
 import * as projectActions from '../modules/IDE/actions/project';
@@ -549,7 +549,7 @@ class Nav extends React.PureComponent {
 
   renderLanguageMenu(navDropdownState) {
     return (
-      <ul className="nav__items-right" title="user-menu">
+      <React.Fragment>
         <li className={navDropdownState.lang}>
           <button
             onClick={this.toggleDropdownForLang}
@@ -561,7 +561,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
+            <span className="nav__item-header"> {languageKeyToLabel(this.props.language)}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -597,14 +597,15 @@ class Nav extends React.PureComponent {
             </li>
           </ul>
         </li>
-      </ul>
+      </React.Fragment>
     );
   }
 
 
   renderUnauthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
             <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
@@ -623,10 +624,7 @@ class Nav extends React.PureComponent {
   renderAuthenticatedUserMenu(navDropdownState) {
     return (
       <ul className="nav__items-right" title="user-menu">
-        <li className="nav__item">
-          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
-        </li>
-        <span className="nav__item-spacer">|</span>
+        {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
         <li className={navDropdownState.account}>
           <button
             className="nav__item-header"
@@ -639,7 +637,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            {this.props.t('Nav.Auth.MyAccount')}
+            <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -755,7 +753,6 @@ class Nav extends React.PureComponent {
       <header>
         <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
           {this.renderLeftLayout(navDropdownState)}
-          {getConfig('TRANSLATIONS_ENABLED') && this.renderLanguageMenu(navDropdownState)}
           {this.renderUserMenu(navDropdownState)}
         </nav>
       </header>
@@ -809,6 +806,7 @@ Nav.propTypes = {
   }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
 };
 
 Nav.defaultProps = {
@@ -829,7 +827,8 @@ function mapStateToProps(state) {
     project: state.project,
     user: state.user,
     unsavedChanges: state.ide.unsavedChanges,
-    rootFile: state.files.filter(file => file.name === 'root')[0]
+    rootFile: state.files.filter(file => file.name === 'root')[0],
+    language: state.preferences.language
   };
 }
 

client/components/__test__/Nav.test.jsx

@@ -46,7 +46,8 @@ describe('Nav', () => {
       id: 'root-file'
     },
     t: jest.fn(),
-    setLanguage: jest.fn()
+    setLanguage: jest.fn(),
+    language: 'en-US'
   };
 
   it('renders correctly', () => {

client/i18n.js

@@ -6,6 +6,14 @@ import Backend from 'i18next-http-backend';
 const fallbackLng = ['en-US'];
 const availableLanguages = ['en-US', 'es-419'];
 
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español'
+  };
+  return languageMap[lang];
+}
+
 const options = {
   loadPath: '/locales/{{lng}}/translations.json',
   requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })