mgr/dashboard: Localization for date picker module

Fixes: https://tracker.ceph.com/issues/39037
Signed-off-by: Stephan Müller <smueller@suse.com>
(cherry picked from commit 1e4ccc4e7dcb9dc9d37d49a93174cc42a3dbcf98)

diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst
index 0aef27459d04b32fe5bdb3ed9473c6213ba40824..24bc722050b46f9e720b98ce7d94f3a10ec08b0c 100644 (file)
--- a/src/pybind/mgr/dashboard/HACKING.rst
+++ b/src/pybind/mgr/dashboard/HACKING.rst
@@ -325,9 +325,16 @@ uncommitted translations.
 Supported languages
 ~~~~~~~~~~~~~~~~~~~
 
-All our supported languages should be registeredd in
-``supported-languages.enum.ts``, this will then provide that list to both the
-language selectors in the frontend.
+All our supported languages should be registered in both exports in
+``supported-languages.enum.ts`` and have a corresponding test in
+``language-selector.component.spec.ts``.
+
+The ``SupportedLanguages`` enum will provide the list for the default language selection.
+
+The ``languageBootstrapMapping`` variable will provide the
+`language support <https://github.com/valor-software/ngx-bootstrap/tree/development/src/chronos/i18n>`_
+for ngx-bootstrap components like the
+`date picker <https://valor-software.com/ngx-bootstrap/#/datepicker#locales>`_.
 
 Translating process
 ~~~~~~~~~~~~~~~~~~~

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts
index efbb54bb9731161e90487697cfe8c6e1de8a62b5..189ecc53710de3b536d8ff05027eb78bf54071fc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts
@@ -1,8 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';\r
 import { FormsModule } from '@angular/forms';\r
 \r
+import { listLocales } from 'ngx-bootstrap/chronos';\r
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';\r
+\r
 import { configureTestBed } from '../../../../testing/unit-test-helper';\r
-import { LocaleHelper } from '../../../locale.helper';\r
 import { LanguageSelectorComponent } from './language-selector.component';\r
 \r
 describe('LanguageSelectorComponent', () => {\r
@@ -11,6 +13,7 @@ describe('LanguageSelectorComponent', () => {
 \r
   configureTestBed({\r
     declarations: [LanguageSelectorComponent],\r
+    providers: [BsLocaleService],\r
     imports: [FormsModule]\r
   });\r
 \r
@@ -18,6 +21,7 @@ describe('LanguageSelectorComponent', () => {
     fixture = TestBed.createComponent(LanguageSelectorComponent);\r
     component = fixture.componentInstance;\r
     fixture.detectChanges();\r
+    spyOn(window.location, 'reload').and.callFake(() => component.ngOnInit());\r
   });\r
 \r
   it('should create', () => {\r
@@ -26,14 +30,44 @@ describe('LanguageSelectorComponent', () => {
 \r
   it('should read current language', () => {\r
     expect(component.selectedLanguage).toBe('en-US');\r
+    expect(listLocales()).toEqual([]);\r
+  });\r
+\r
+  const expectLanguageChange = (lang) => {\r
+    component.changeLanguage(lang);\r
+    expect(component.selectedLanguage).toBe(lang);\r
+    expect(listLocales().includes(lang.slice(0, 2))).toBe(true);\r
+  };\r
+\r
+  it('should change to cs', () => {\r
+    expectLanguageChange('cs');\r
+  });\r
+\r
+  it('should change to de-DE', () => {\r
+    expectLanguageChange('de-DE');\r
+  });\r
+\r
+  it('should change to es-ES', () => {\r
+    expectLanguageChange('es-ES');\r
   });\r
 \r
-  it('should change language', () => {\r
-    // Removes error in jsdom\r
-    window.location.reload = jest.fn();\r
+  it('should change to fr-FR', () => {\r
+    expectLanguageChange('fr-FR');\r
+  });\r
+\r
+  it('should change to id-ID', () => {\r
+    expectLanguageChange('id-ID');\r
+  });\r
+\r
+  it('should change to pl-PL', () => {\r
+    expectLanguageChange('pl-PL');\r
+  });\r
+\r
+  it('should change to pt-PT', () => {\r
+    expectLanguageChange('pt-PT');\r
+  });\r
 \r
-    expect(LocaleHelper.getLocale()).toBe('en-US');\r
-    component.changeLanguage('pt-PT');\r
-    expect(LocaleHelper.getLocale()).toBe('pt-PT');\r
+  it('should change to zh-CN', () => {\r
+    expectLanguageChange('zh-CN');\r
   });\r
 });\r

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
index 4396de16657be2359927afa0d86059a191a5f8bc..cfc6e126f2942783bac36fed43422aded752d1d3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
@@ -1,7 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';\r
 \r
+import { defineLocale } from 'ngx-bootstrap/chronos';\r
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';\r
+\r
 import { LocaleHelper } from '../../../locale.helper';\r
-import { SupportedLanguages } from './supported-languages.enum';\r
+import { languageBootstrapMapping, SupportedLanguages } from './supported-languages.enum';\r
 \r
 @Component({\r
   selector: 'cd-language-selector',\r
@@ -15,14 +18,29 @@ export class LanguageSelectorComponent implements OnInit {
   supportedLanguages = SupportedLanguages;\r
   selectedLanguage: string;\r
 \r
+  constructor(private localeService: BsLocaleService) {}\r
+\r
   ngOnInit() {\r
     this.selectedLanguage = LocaleHelper.getLocale();\r
+    this.defineUsedLanguage();\r
+  }\r
+\r
+  /**\r
+   * Sets ngx-bootstrap local based on the current language selection\r
+   *\r
+   * ngx-bootstrap locals documentation:\r
+   * https://valor-software.com/ngx-bootstrap/#/datepicker#locales\r
+   */\r
+  private defineUsedLanguage() {\r
+    const lang = this.selectedLanguage.slice(0, 2);\r
+    if (lang in languageBootstrapMapping) {\r
+      defineLocale(lang, languageBootstrapMapping[lang]);\r
+      this.localeService.use(lang);\r
+    }\r
   }\r
 \r
   changeLanguage(lang: string) {\r
     LocaleHelper.setLocale(lang);\r
-\r
-    // Reload frontend\r
     window.location.reload();\r
   }\r
 }\r

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts
index 65c32a08e0747f30af81204751fce5a590581898..3bf456bcc97b1a41372c766f5e213418d2541f09 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts
@@ -1,3 +1,16 @@
+import {
+  csLocale,
+  deLocale,
+  esLocale,
+  frLocale,
+  idLocale,
+  plLocale,
+  ptBrLocale,
+  zhCnLocale
+} from 'ngx-bootstrap/chronos';
+
+// When adding a new supported language make sure to add a test for it in:
+// language-selector.component.spec.ts
 export enum SupportedLanguages {
   'cs' = 'Čeština',
   'de-DE' = 'Deutsch',
@@ -9,3 +22,16 @@ export enum SupportedLanguages {
   'es-ES' = 'Español',
   'zh-CN' = '中文'
 }
+
+// Supported languages:
+// https://github.com/valor-software/ngx-bootstrap/tree/development/src/chronos/i18n
+export let languageBootstrapMapping = {
+  cs: csLocale,
+  de: deLocale,
+  es: esLocale,
+  fr: frLocale,
+  id: idLocale,
+  pl: plLocale,
+  pt: ptBrLocale,
+  zh: zhCnLocale
+};