From c1ff07a4a22ab3b6aa551a46e40079c888a07f10 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Wed, 29 Nov 2023 10:28:22 +0100
Subject: [PATCH] UI: Transloco configuration is missing a fallback language

The solution to fix that is issue is to return an empty translation list in case of an error. In this way, Transloco will not translate anything (the UI will be in english), but it will not fail either.

Fixes: https://github.com/aquarist-labs/s3gw/issues/846

Signed-off-by: Volker Theile <vtheile@suse.com>
---
 CHANGELOG.md                                  |  1 +
 src/frontend/src/app/i18n.helper.ts           |  7 ++++---
 src/frontend/src/app/transloco-root.module.ts | 11 +++++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee6cc168..2288d01f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Do not escape object key in page title (aquarist-labs/s3gw#839).
+- Make sure a missing translation file does not crash the app (aquarist-labs/s3gw#846).
 
 ## [0.23.0]
 
diff --git a/src/frontend/src/app/i18n.helper.ts b/src/frontend/src/app/i18n.helper.ts
index c7b6adf5..7b7250ac 100644
--- a/src/frontend/src/app/i18n.helper.ts
+++ b/src/frontend/src/app/i18n.helper.ts
@@ -43,12 +43,12 @@ export const supportedLanguages: Record<string, string> = {
 
 /**
  * Get the current configured language. If not set in local storage,
- * then try to get the default browser language. Finally fall back
+ * then try to get the default browser language. Finally, fall back
  * to the specified default language. Defaults to 'en_US'.
  */
 export const getCurrentLanguage = (defaultValue = defaultLanguage): string => {
   // Get the stored language from local storage.
-  let lang = localStorage.getItem('language');
+  let lang: string | null = localStorage.getItem('language');
   // If not set, try to detect the browser language.
   if (_.isNull(lang)) {
     if (_.isArray(navigator.languages)) {
@@ -60,7 +60,8 @@ export const getCurrentLanguage = (defaultValue = defaultLanguage): string => {
         .value();
     }
   }
-  return _.defaultTo(lang, defaultValue);
+  // Remove unwanted characters, e.g. `"en_US"` => `en_US`.
+  return _.trim(_.defaultTo(lang, defaultValue), '"');
 };
 
 export const setCurrentLanguage = (lang: string): void => {
diff --git a/src/frontend/src/app/transloco-root.module.ts b/src/frontend/src/app/transloco-root.module.ts
index 173b944a..d05886dd 100644
--- a/src/frontend/src/app/transloco-root.module.ts
+++ b/src/frontend/src/app/transloco-root.module.ts
@@ -11,7 +11,8 @@ import {
   TranslocoModule
 } from '@ngneat/transloco';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { supportedLanguages } from '~/app/i18n.helper';
 import { environment } from '~/environments/environment';
@@ -21,7 +22,13 @@ class CustomLoader implements TranslocoLoader {
   constructor(private http: HttpClient) {}
 
   public getTranslation(lang: string): Observable<Translation> {
-    return this.http.get<Translation>(`assets/i18n/${lang}.json`);
+    return this.http.get<Translation>(`assets/i18n/${lang}.json`).pipe(
+      catchError((err) => {
+        // Return an empty translation list. In this way, Transloco will
+        // not translate anything, but it will not fail either.
+        return of({});
+      })
+    );
   }
 }