feat: allow languages to be hidden (#47362)

client/src/components/Header/components/nav-links.tsx

@@ -23,7 +23,8 @@ import envData from '../../../../../config/env.json';
 import {
   availableLangs,
   LangNames,
-  LangCodes
+  LangCodes,
+  hiddenLangs
 } from '../../../../../config/i18n/all-langs';
 import { hardGoTo as navigate } from '../../../redux';
 import { updateUserFlag } from '../../../redux/settings';
@@ -427,27 +428,29 @@ export class NavLinks extends Component<NavLinksProps, {}> {
                   {t('buttons.cancel-change')}
                 </button>
               </li>
-              {locales.map((lang, index) => (
-                <li key={'lang-' + lang} role='none'>
-                  <button
-                    {...(clientLocale === lang && { 'aria-current': true })}
-                    className='nav-link nav-lang-menu-option'
-                    data-value={lang}
-                    {...(LangCodes[lang] && {
-                      lang: LangCodes[lang] as string
-                    })}
-                    onClick={this.handleLanguageChange}
-                    onKeyDown={this.handleLanguageMenuKeyDown}
-                    {...(index === locales.length - 1 && {
-                      ref: this.lastLangOptionRef
-                    })}
-                    role='menuitem'
-                    tabIndex='-1'
-                  >
-                    {LangNames[lang]}
-                  </button>
-                </li>
-              ))}
+              {locales
+                .filter(lang => !hiddenLangs.includes(lang))
+                .map((lang, index) => (
+                  <li key={'lang-' + lang} role='none'>
+                    <button
+                      {...(clientLocale === lang && { 'aria-current': true })}
+                      className='nav-link nav-lang-menu-option'
+                      data-value={lang}
+                      {...(LangCodes[lang] && {
+                        lang: LangCodes[lang] as string
+                      })}
+                      onClick={this.handleLanguageChange}
+                      onKeyDown={this.handleLanguageMenuKeyDown}
+                      {...(index === locales.length - 1 && {
+                        ref: this.lastLangOptionRef
+                      })}
+                      role='menuitem'
+                      tabIndex='-1'
+                    >
+                      {LangNames[lang]}
+                    </button>
+                  </li>
+                ))}
             </ul>
           </div>
         </li>

config/i18n/all-langs.ts

@@ -17,8 +17,8 @@ export const availableLangs = {
     'italian',
     'portuguese',
     'ukrainian',
-    'japanese'
-    // 'german'
+    'japanese',
+    'german'
   ],
   curriculum: [
     'english',
@@ -28,8 +28,8 @@ export const availableLangs = {
     'italian',
     'portuguese',
     'ukrainian',
-    'japanese'
-    // 'german'
+    'japanese',
+    'german'
   ]
 };
 
@@ -132,12 +132,12 @@ export const auditedCerts = {
     SuperBlocks.MachineLearningPy,
     SuperBlocks.CodingInterviewPrep,
     SuperBlocks.RelationalDb
+  ],
+  german: [
+    SuperBlocks.RespWebDesign,
+    SuperBlocks.JsAlgoDataStruct,
+    SuperBlocks.FrontEndDevLibs
   ]
-  // german: [
-  //   SuperBlocks.RespWebDesign,
-  //   SuperBlocks.JsAlgoDataStruct,
-  //   SuperBlocks.FrontEndDevLibs
-  // ]
 };
 
 /**
@@ -168,8 +168,8 @@ export const i18nextCodes = {
   italian: 'it',
   portuguese: 'pt-BR',
   ukrainian: 'uk',
-  japanese: 'ja'
-  // german: 'de'
+  japanese: 'ja',
+  german: 'de'
 };
 
 // These are for the language selector dropdown menu in the footer
@@ -182,8 +182,8 @@ export enum LangNames {
   italian = 'Italiano',
   portuguese = 'Português',
   ukrainian = 'Українська',
-  japanese = '日本語'
-  // german = 'Deutsch'
+  japanese = '日本語',
+  german = 'Deutsch'
 }
 
 /* These are for formatting dates and numbers. Used with JS .toLocaleString().
@@ -198,11 +198,16 @@ export enum LangCodes {
   italian = 'it',
   portuguese = 'pt-BR',
   ukrainian = 'uk',
-  japanese = 'ja'
-  // german = 'de'
+  japanese = 'ja',
+  german = 'de'
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
+/**
+ * This array contains languages that should NOT appear in the language selector.
+ */
+export const hiddenLangs = ['german'];
+
 // locale is sourced from a JSON file, so we use getLangCode and getLangName to
 // find the associated enum values