Add change language option. (kubernetes#5693)

* Add change language option. Move available languages to index.config. Make lang value in cookie the most important, then the env variable and the least important is the default browser header. * Update zh translations based on helight suggestions. * Refactor code and fix caching issue * Small optimizations Co-authored-by: Sebastian Florek <sebastian.florek@kubermatic.com>
92nqb · Nov 26, 2020 · 72c275c · 72c275c
1 parent cb66bd2
commit 72c275c
Show file tree

Hide file tree

Showing 21 changed files with 279 additions and 54 deletions.
diff --git a/aio/scripts/build.sh b/aio/scripts/build.sh
@@ -36,6 +36,17 @@ function build::frontend {
             --prod \
             --localize \
             --outputPath=${FRONTEND_DIR}
+
+  # Avoid locale caching due to the same output file naming
+  # We'll add language code prefix to the generated main javascript file.
+  languages=($(ls ${FRONTEND_DIR}))
+  for language in "${languages[@]}"; do
+    localeDir=${FRONTEND_DIR}/${language}
+    filename=("$(find "${localeDir}" -name 'main.*.js' -exec basename {} \;)")
+
+    mv "${localeDir}/${filename}" "${localeDir}/${language}.${filename}"
+    sed -i "s/${filename}/${language}.${filename}/" "${localeDir}/index.html"
+  done
 }
 
 function build::backend {

diff --git a/angular.json b/angular.json
@@ -100,6 +100,7 @@
               "extractCss": true,
               "namedChunks": false,
               "aot": true,
+              "localize": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,

diff --git a/i18n/de/messages.de.xlf b/i18n/de/messages.de.xlf
@@ -5442,6 +5442,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">Sprache</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">Ändern Sie die Sprache des Dashboards</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/i18n/fr/messages.fr.xlf b/i18n/fr/messages.fr.xlf
@@ -5456,6 +5456,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">Langue</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">Changer la langue du tableau de bord</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/i18n/ja/messages.ja.xlf b/i18n/ja/messages.ja.xlf
@@ -5402,6 +5402,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">言語</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">ダッシュボードの言語を変更する</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">
         <source>
     Shell in

diff --git a/i18n/ko/messages.ko.xlf b/i18n/ko/messages.ko.xlf
@@ -5514,6 +5514,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">언어</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">대시 보드의 언어 변경</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">
         <source>
     Shell in

diff --git a/i18n/messages.xlf b/i18n/messages.xlf
@@ -3748,6 +3748,20 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="004b222ff9ef9dd4771b777950ca1d0e4cd4348a" datatype="html">
         <source>About</source>
         <context-group purpose="location">

diff --git a/i18n/zh-Hans/messages.zh-Hans.xlf b/i18n/zh-Hans/messages.zh-Hans.xlf
@@ -5517,6 +5517,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">语言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">更改 dashboard 的语言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">
         <source>
     Shell in

diff --git a/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf b/i18n/zh-Hant-HK/messages.zh-Hant-HK.xlf
@@ -5517,6 +5517,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">语言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">更改 dashboard 的语言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">
         <source>
     Shell in

diff --git a/i18n/zh-Hant/messages.zh-Hant.xlf b/i18n/zh-Hant/messages.zh-Hant.xlf
@@ -5517,6 +5517,22 @@
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="fe46ccaae902ce974e2441abe752399288298619" datatype="html">
+        <source>Language</source>
+        <target state="new">語言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="170c19b70d40071916e39cad610ac12f269dd473" datatype="html">
+        <source>Change the language of the dashboard</source>
+        <target state="new">更改 dashboard 的語言</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">../src/app/frontend/settings/local/template.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="dc935c1eb87651baf1b1b0e53119e6dec2db8862" datatype="html">
         <source>
     Shell in

diff --git a/src/app/backend/handler/localehandler.go b/src/app/backend/handler/localehandler.go
@@ -89,13 +89,17 @@ func getAssetsDir() string {
 
 // LocaleHandler serves different html versions based on the Accept-Language header.
 func (handler *LocaleHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
-	if r.URL.EscapedPath() == "/" || r.URL.EscapedPath() == "/index.html" {
-		// Do not store the html page in the cache. If the user is to click on 'switch language',
-		// we want a different index.html (for the right locale) to be served when the page refreshes.
-		w.Header().Add("Cache-Control", "no-store")
+	acceptLanguage := ""
+	cookie, err := r.Cookie("lang")
+	if err == nil {
+		acceptLanguage = cookie.Value
 	}
-	acceptLanguage := os.Getenv("ACCEPT_LANGUAGE")
-	if acceptLanguage == "" {
+
+	if len(acceptLanguage) == 0 {
+		acceptLanguage = os.Getenv("ACCEPT_LANGUAGE")
+	}
+
+	if len(acceptLanguage) == 0 {
 		acceptLanguage = r.Header.Get("Accept-Language")
 	}
 

diff --git a/src/app/frontend/common/components/namespace/component.ts b/src/app/frontend/common/components/namespace/component.ts
@@ -12,23 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {MatSelect} from '@angular/material/select';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {NamespaceList} from '@api/backendapi';
 import {Subject} from 'rxjs';
 import {distinctUntilChanged, filter, startWith, switchMap, takeUntil} from 'rxjs/operators';
 
-import {CONFIG} from '../../../index.config';
+import {Config, CONFIG_DI_TOKEN} from '../../../index.config';
 import {NAMESPACE_STATE_PARAM} from '../../params/params';
 import {HistoryService} from '../../services/global/history';
 import {NamespaceService} from '../../services/global/namespace';
-import {NotificationSeverity, NotificationsService} from '../../services/global/notifications';
+import {NotificationsService} from '../../services/global/notifications';
 import {KdStateService} from '../../services/global/state';
 import {EndpointManager, Resource} from '../../services/resource/endpoint';
 import {ResourceService} from '../../services/resource/resource';
-
 import {NamespaceChangeDialog} from './changedialog/dialog';
 
 @Component({
@@ -57,12 +56,13 @@ export class NamespaceSelectorComponent implements OnInit, OnDestroy {
     private readonly dialog_: MatDialog,
     private readonly kdState_: KdStateService,
     private readonly notifications_: NotificationsService,
-    private readonly _activatedRoute: ActivatedRoute,
-    private readonly _historyService: HistoryService
+    private readonly activatedRoute_: ActivatedRoute,
+    private readonly historyService_: HistoryService,
+    @Inject(CONFIG_DI_TOKEN) private readonly appConfig_: Config
   ) {}
 
   ngOnInit(): void {
-    this._activatedRoute.queryParams.pipe(takeUntil(this.unsubscribe_)).subscribe(params => {
+    this.activatedRoute_.queryParams.pipe(takeUntil(this.unsubscribe_)).subscribe(params => {
       const namespace = params.namespace;
       if (!namespace) {
         this.setDefaultQueryParams_();
@@ -183,12 +183,12 @@ export class NamespaceSelectorComponent implements OnInit, OnDestroy {
         if (confirmed) {
           this.selectedNamespace = this._getCurrentResourceNamespaceParam();
           this.router_.navigate([], {
-            relativeTo: this._activatedRoute,
+            relativeTo: this.activatedRoute_,
             queryParams: {[NAMESPACE_STATE_PARAM]: this.selectedNamespace},
             queryParamsHandling: 'merge',
           });
         } else {
-          this._historyService.goToPreviousState('overview');
+          this.historyService_.goToPreviousState('overview');
         }
       });
   }
@@ -205,7 +205,7 @@ export class NamespaceSelectorComponent implements OnInit, OnDestroy {
     } else {
       // Change only the namespace as currently not on details view.
       this.router_.navigate([], {
-        relativeTo: this._activatedRoute,
+        relativeTo: this.activatedRoute_,
         queryParams: {[NAMESPACE_STATE_PARAM]: namespace},
         queryParamsHandling: 'merge',
       });
@@ -229,7 +229,7 @@ export class NamespaceSelectorComponent implements OnInit, OnDestroy {
   }
 
   private _getCurrentRoute(): ActivatedRoute {
-    let route = this._activatedRoute.root;
+    let route = this.activatedRoute_.root;
     while (route && route.firstChild) {
       route = route.firstChild;
     }
@@ -247,8 +247,8 @@ export class NamespaceSelectorComponent implements OnInit, OnDestroy {
   }
 
   setDefaultQueryParams_() {
-    this.router_.navigate([this._activatedRoute.snapshot.url], {
-      queryParams: {[NAMESPACE_STATE_PARAM]: CONFIG.defaultNamespace},
+    this.router_.navigate([this.activatedRoute_.snapshot.url], {
+      queryParams: {[NAMESPACE_STATE_PARAM]: this.appConfig_.defaultNamespace},
       queryParamsHandling: 'merge',
     });
   }