diff options
Diffstat (limited to '')
5 files changed, 164 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html new file mode 100644 index 000000000..be98eaa6f --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html @@ -0,0 +1,22 @@ +<div ngbDropdown + display="dynamic" + placement="bottom-right"> + <a ngbDropdownToggle + i18n-title + id="toggle-language-button" + title="Select a Language" + role="button"> + {{ allLanguages[selectedLanguage] }} + </a> + <div ngbDropdownMenu + role="listbox" + aria-labelledby="toggle-language-button"> + <ng-container *ngFor="let lang of supportedLanguages | keyvalue"> + <button ngbDropdownItem + role="option" + (click)="changeLanguage(lang.key)"> + {{ lang.value }} + </button> + </ng-container> + </div> +</div> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.scss 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 new file mode 100644 index 000000000..5c8334e5a --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts @@ -0,0 +1,85 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; + +import { configureTestBed } from '~/testing/unit-test-helper'; +import { LanguageSelectorComponent } from './language-selector.component'; + +describe('LanguageSelectorComponent', () => { + let component: LanguageSelectorComponent; + let fixture: ComponentFixture<LanguageSelectorComponent>; + + configureTestBed({ + declarations: [LanguageSelectorComponent], + imports: [FormsModule, HttpClientTestingModule] + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LanguageSelectorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + spyOn(component, 'reloadWindow').and.callFake(() => component.ngOnInit()); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should read current language', () => { + expect(component.selectedLanguage).toBe('en-US'); + }); + + const expectLanguageChange = (lang: string) => { + component.changeLanguage(lang); + const cookie = document.cookie.split(';').filter((item) => item.includes(`cd-lang=${lang}`)); + expect(cookie.length).toBe(1); + }; + + it('should change to cs', () => { + expectLanguageChange('cs'); + }); + + it('should change to de', () => { + expectLanguageChange('de'); + }); + + it('should change to es', () => { + expectLanguageChange('es'); + }); + + it('should change to fr', () => { + expectLanguageChange('fr'); + }); + + it('should change to id', () => { + expectLanguageChange('id'); + }); + + it('should change to it', () => { + expectLanguageChange('it'); + }); + + it('should change to ja', () => { + expectLanguageChange('ja'); + }); + + it('should change to ko', () => { + expectLanguageChange('ko'); + }); + + it('should change to pl', () => { + expectLanguageChange('pl'); + }); + + it('should change to pt', () => { + expectLanguageChange('pt'); + }); + + it('should change to zh-Hans', () => { + expectLanguageChange('zh-Hans'); + }); + + it('should change to zh-Hant', () => { + expectLanguageChange('zh-Hant'); + }); +}); 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 new file mode 100644 index 000000000..d747add20 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts @@ -0,0 +1,40 @@ +import { Component, OnInit } from '@angular/core'; + +import _ from 'lodash'; + +import { LanguageService } from '~/app/shared/services/language.service'; +import { SupportedLanguages } from './supported-languages.enum'; + +@Component({ + selector: 'cd-language-selector', + templateUrl: './language-selector.component.html', + styleUrls: ['./language-selector.component.scss'] +}) +export class LanguageSelectorComponent implements OnInit { + allLanguages = SupportedLanguages; + supportedLanguages: Record<string, any> = {}; + selectedLanguage: string; + + constructor(private languageService: LanguageService) {} + + ngOnInit() { + this.selectedLanguage = this.languageService.getLocale(); + + this.languageService.getLanguages().subscribe((langs) => { + this.supportedLanguages = _.pick(SupportedLanguages, langs) as Object; + }); + } + + /** + * Jest is being more restricted regarding spying on the reload method. + * This will allow us to spyOn this method instead. + */ + reloadWindow() { + window.location.reload(); + } + + changeLanguage(lang: string) { + this.languageService.setLocale(lang); + this.reloadWindow(); + } +} 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 new file mode 100644 index 000000000..8b573cf64 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts @@ -0,0 +1,17 @@ +// 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' = 'Deutsch', + 'en-US' = 'English', + 'es' = 'Español', + 'fr' = 'Français', + 'id' = 'Bahasa Indonesia', + 'it' = 'Italiano', + 'ja' = '日本語', + 'ko' = '한국어', + 'pl' = 'Polski', + 'pt' = 'Português (brasileiro)', + 'zh-Hans' = '中文 (简体)', + 'zh-Hant' = '中文 (繁體）' +} |