mgr/dashboard: Add language selector

Add the language selector to the navigation.

Signed-off-by: Sebastian Krah <skrah@suse.com>
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index 5734d43f594c7fe49029964b7dcb0dc6726cf077..554dd5e9235c9736e1e8bde6e70ae7d34f99dcd5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
@@ -13,6 +13,11 @@
             #loginForm="ngForm"
             novalidate>
 
+        <!-- I18N -->
+        <div class="form-group has-feedback">
+          <cd-language-selector [isDropdown]="false"></cd-language-selector>
+        </div>
+
         <!-- Username -->
         <div class="form-group has-feedback"
              [ngClass]="{'has-error': (loginForm.submitted || username.dirty) && username.invalid}">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 88eae81fc4cd2d9436d09ff03e6e3a3782f1f3f2..2422497349ecfac77bca9af2fb76f175bd9dbb45 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -1,6 +1,6 @@
 @import '../../../../defaults';
 
-.login {
+::ng-deep .login {
   height: 100%;
 
   .row {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index cbd1115ae701120c1126b936f2facbed10b6b10b..8acd3fb0b961c050c294974e66b23b962f264c28 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -195,6 +195,9 @@
     <!-- /.navbar-primary -->
 
     <ul class="nav navbar-nav navbar-utility">
+      <li>
+        <cd-language-selector class="oa-navbar"></cd-language-selector>
+      </li>
       <li>
         <cd-task-manager class="oa-navbar"></cd-task-manager>
       </li>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 8b437dd8286342ddc6980a41e23784098e4640bf..95107103096523bbbbfc48c25e5fc0091c3e57a0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -17,6 +17,7 @@ import { ErrorPanelComponent } from './error-panel/error-panel.component';
 import { GrafanaComponent } from './grafana/grafana.component';
 import { HelperComponent } from './helper/helper.component';
 import { InfoPanelComponent } from './info-panel/info-panel.component';
+import { LanguageSelectorComponent } from './language-selector/language-selector.component';
 import { LoadingPanelComponent } from './loading-panel/loading-panel.component';
 import { ModalComponent } from './modal/modal.component';
 import { SelectBadgesComponent } from './select-badges/select-badges.component';
@@ -55,6 +56,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     CriticalConfirmationModalComponent,
     ConfirmationModalComponent,
     WarningPanelComponent,
+    LanguageSelectorComponent,
     GrafanaComponent
   ],
   providers: [],
@@ -70,6 +72,7 @@ import { WarningPanelComponent } from './warning-panel/warning-panel.component';
     UsageBarComponent,
     ModalComponent,
     WarningPanelComponent,
+    LanguageSelectorComponent,
     GrafanaComponent
   ],
   entryComponents: [ModalComponent, CriticalConfirmationModalComponent, ConfirmationModalComponent]

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 (file)
index 0000000..4fca0b7
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
@@ -0,0 +1,26 @@
+<div dropdown\r
+     *ngIf="isDropdown">\r
+  <a dropdownToggle\r
+     class="dropdown-toggle"\r
+     data-toggle="dropdown"\r
+     i18n-title\r
+     title="Select a Language">\r
+    {{ supportedLanguages[selectedLanguage] }}\r
+    <span class="caret"></span>\r
+  </a>\r
+  <ul *dropdownMenu\r
+      class="dropdown-menu dropdown-menu-right">\r
+    <li *ngFor="let lang of supportedLanguages | keyvalue">\r
+      <a class="dropdown-item"\r
+         (click)="changeLanguage(lang.key)">{{ lang.value }}</a>\r
+    </li>\r
+  </ul>\r
+</div>\r
+\r
+<select *ngIf="!isDropdown"\r
+        (change)="changeLanguage($event.target.value)"\r
+        [(ngModel)]="selectedLanguage"\r
+        class="form-control">\r
+  <option *ngFor="let lang of supportedLanguages | keyvalue"\r
+          [value]="lang.key">{{ lang.value }}</option>\r
+</select>\r

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 (file)
index 0000000..e69de29

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 (file)
index 0000000..efbb54b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts
@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';\r
+import { FormsModule } from '@angular/forms';\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
+  let component: LanguageSelectorComponent;\r
+  let fixture: ComponentFixture<LanguageSelectorComponent>;\r
+\r
+  configureTestBed({\r
+    declarations: [LanguageSelectorComponent],\r
+    imports: [FormsModule]\r
+  });\r
+\r
+  beforeEach(() => {\r
+    fixture = TestBed.createComponent(LanguageSelectorComponent);\r
+    component = fixture.componentInstance;\r
+    fixture.detectChanges();\r
+  });\r
+\r
+  it('should create', () => {\r
+    expect(component).toBeTruthy();\r
+  });\r
+\r
+  it('should read current language', () => {\r
+    expect(component.selectedLanguage).toBe('en-US');\r
+  });\r
+\r
+  it('should change language', () => {\r
+    // Removes error in jsdom\r
+    window.location.reload = jest.fn();\r
+\r
+    expect(LocaleHelper.getLocale()).toBe('en-US');\r
+    component.changeLanguage('pt-PT');\r
+    expect(LocaleHelper.getLocale()).toBe('pt-PT');\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
new file mode 100644 (file)
index 0000000..4396de1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';\r
+\r
+import { LocaleHelper } from '../../../locale.helper';\r
+import { SupportedLanguages } from './supported-languages.enum';\r
+\r
+@Component({\r
+  selector: 'cd-language-selector',\r
+  templateUrl: './language-selector.component.html',\r
+  styleUrls: ['./language-selector.component.scss']\r
+})\r
+export class LanguageSelectorComponent implements OnInit {\r
+  @Input()\r
+  isDropdown = true;\r
+\r
+  supportedLanguages = SupportedLanguages;\r
+  selectedLanguage: string;\r
+\r
+  ngOnInit() {\r
+    this.selectedLanguage = LocaleHelper.getLocale();\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
new file mode 100644 (file)
index 0000000..f1be65a
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts
@@ -0,0 +1,5 @@
+export enum SupportedLanguages {
+  'en-US' = 'English',
+  'de-DE' = 'Deutsch',
+  'pt-PT' = 'Português'
+}