From: Stephan Müller Date: Fri, 22 Mar 2019 16:46:35 +0000 (+0100) Subject: mgr/dashboard: Localization for date picker module X-Git-Tag: v14.2.2~206^2 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=e3b3eec5cbf8850314e39c3e752dabed0b60ee01;p=ceph.git mgr/dashboard: Localization for date picker module Fixes: https://tracker.ceph.com/issues/39037 Signed-off-by: Stephan Müller (cherry picked from commit 1e4ccc4e7dcb9dc9d37d49a93174cc42a3dbcf98) --- diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst index 0aef27459d0..24bc722050b 100644 --- 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 `_ +for ngx-bootstrap components like the +`date picker `_. 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 efbb54bb973..189ecc53710 100644 --- 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'; 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([]); + }); + + const expectLanguageChange = (lang) => { + component.changeLanguage(lang); + expect(component.selectedLanguage).toBe(lang); + expect(listLocales().includes(lang.slice(0, 2))).toBe(true); + }; + + 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 language', () => { - // Removes error in jsdom - window.location.reload = jest.fn(); + 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'); + }); - expect(LocaleHelper.getLocale()).toBe('en-US'); - component.changeLanguage('pt-PT'); - expect(LocaleHelper.getLocale()).toBe('pt-PT'); + it('should change to zh-CN', () => { + expectLanguageChange('zh-CN'); }); }); 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 4396de16657..cfc6e126f29 100644 --- 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'; +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(); } } 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 65c32a08e07..3bf456bcc97 100644 --- 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 +};