Merge pull request #27275 from Devp00l/issue-39037

mgr/dashboard: Localization for date picker module

Reviewed-by: Alfonso Martínez <almartin@redhat.com>
Reviewed-by: Tiago Melo <tmelo@suse.com>

src/pybind/mgr/dashboard/HACKING.rst

@@ -340,9 +340,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
 ~~~~~~~~~~~~~~~~~~~

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';
 import { FormsModule } from '@angular/forms';
 
+import { listLocales } from 'ngx-bootstrap/chronos';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+
 import { configureTestBed } from '../../../../testing/unit-test-helper';
-import { LocaleHelper } from '../../../locale.helper';
 import { LanguageSelectorComponent } from './language-selector.component';
 
 describe('LanguageSelectorComponent', () => {
@@ -11,6 +13,7 @@ describe('LanguageSelectorComponent', () => {
 
   configureTestBed({
     declarations: [LanguageSelectorComponent],
+    providers: [BsLocaleService],
     imports: [FormsModule]
   });
 
@@ -18,6 +21,7 @@ describe('LanguageSelectorComponent', () => {
     fixture = TestBed.createComponent(LanguageSelectorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    spyOn(window.location, 'reload').and.callFake(() => component.ngOnInit());
   });
 
   it('should create', () => {
@@ -26,14 +30,44 @@ describe('LanguageSelectorComponent', () => {
 
   it('should read current language', () => {
     expect(component.selectedLanguage).toBe('en-US');
+    expect(listLocales()).toEqual([]);
   });
 
-  it('should change language', () => {
-    // Removes error in jsdom
-    window.location.reload = jest.fn();
+  const expectLanguageChange = (lang) => {
+    component.changeLanguage(lang);
+    expect(component.selectedLanguage).toBe(lang);
+    expect(listLocales().includes(lang.slice(0, 2))).toBe(true);
+  };
 
-    expect(LocaleHelper.getLocale()).toBe('en-US');
-    component.changeLanguage('pt-PT');
-    expect(LocaleHelper.getLocale()).toBe('pt-PT');
+  it('should change to cs', () => {
+    expectLanguageChange('cs');
+  });
+
+  it('should change to de-DE', () => {
+    expectLanguageChange('de-DE');
+  });
+
+  it('should change to es-ES', () => {
+    expectLanguageChange('es-ES');
+  });
+
+  it('should change to fr-FR', () => {
+    expectLanguageChange('fr-FR');
+  });
+
+  it('should change to id-ID', () => {
+    expectLanguageChange('id-ID');
+  });
+
+  it('should change to pl-PL', () => {
+    expectLanguageChange('pl-PL');
+  });
+
+  it('should change to pt-PT', () => {
+    expectLanguageChange('pt-PT');
+  });
+
+  it('should change to zh-CN', () => {
+    expectLanguageChange('zh-CN');
   });
 });

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';
 
+import { defineLocale } from 'ngx-bootstrap/chronos';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+
 import { LocaleHelper } from '../../../locale.helper';
-import { SupportedLanguages } from './supported-languages.enum';
+import { languageBootstrapMapping, SupportedLanguages } from './supported-languages.enum';
 
 @Component({
   selector: 'cd-language-selector',
@@ -15,14 +18,29 @@ export class LanguageSelectorComponent implements OnInit {
   supportedLanguages = SupportedLanguages;
   selectedLanguage: string;
 
+  constructor(private localeService: BsLocaleService) {}
+
   ngOnInit() {
     this.selectedLanguage = LocaleHelper.getLocale();
+    this.defineUsedLanguage();
+  }
+
+  /**
+   * Sets ngx-bootstrap local based on the current language selection
+   *
+   * ngx-bootstrap locals documentation:
+   * https://valor-software.com/ngx-bootstrap/#/datepicker#locales
+   */
+  private defineUsedLanguage() {
+    const lang = this.selectedLanguage.slice(0, 2);
+    if (lang in languageBootstrapMapping) {
+      defineLocale(lang, languageBootstrapMapping[lang]);
+      this.localeService.use(lang);
+    }
   }
 
   changeLanguage(lang: string) {
     LocaleHelper.setLocale(lang);
-
-    // Reload frontend
     window.location.reload();
   }
 }

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
+};