From f2e2e18847cfd4f62488692701cb8b68efcf8f60 Mon Sep 17 00:00:00 2001
From: Sebastian Krah <skrah@suse.com>
Date: Fri, 19 Oct 2018 14:34:58 +0200
Subject: [PATCH] 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>
---
 .../app/core/auth/login/login.component.html  |  5 +++
 .../app/core/auth/login/login.component.scss  |  2 +-
 .../navigation/navigation.component.html      |  3 ++
 .../shared/components/components.module.ts    |  3 ++
 .../language-selector.component.html          | 26 +++++++++++++
 .../language-selector.component.scss          |  0
 .../language-selector.component.spec.ts       | 39 +++++++++++++++++++
 .../language-selector.component.ts            | 28 +++++++++++++
 .../supported-languages.enum.ts               |  5 +++
 9 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.scss
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.ts
 create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/supported-languages.enum.ts

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 5734d43f594..554dd5e9235 100644
--- 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 88eae81fc4c..2422497349e 100644
--- 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 cbd1115ae70..8acd3fb0b96 100644
--- 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 8b437dd8286..95107103096 100644
--- 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
index 00000000000..4fca0b72c2b
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/language-selector/language-selector.component.html
@@ -0,0 +1,26 @@
+<div dropdown
+     *ngIf="isDropdown">
+  <a dropdownToggle
+     class="dropdown-toggle"
+     data-toggle="dropdown"
+     i18n-title
+     title="Select a Language">
+    {{ supportedLanguages[selectedLanguage] }}
+    <span class="caret"></span>
+  </a>
+  <ul *dropdownMenu
+      class="dropdown-menu dropdown-menu-right">
+    <li *ngFor="let lang of supportedLanguages | keyvalue">
+      <a class="dropdown-item"
+         (click)="changeLanguage(lang.key)">{{ lang.value }}</a>
+    </li>
+  </ul>
+</div>
+
+<select *ngIf="!isDropdown"
+        (change)="changeLanguage($event.target.value)"
+        [(ngModel)]="selectedLanguage"
+        class="form-control">
+  <option *ngFor="let lang of supportedLanguages | keyvalue"
+          [value]="lang.key">{{ lang.value }}</option>
+</select>
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 00000000000..e69de29bb2d
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 00000000000..efbb54bb973
--- /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';
+import { FormsModule } from '@angular/forms';
+
+import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { LocaleHelper } from '../../../locale.helper';
+import { LanguageSelectorComponent } from './language-selector.component';
+
+describe('LanguageSelectorComponent', () => {
+  let component: LanguageSelectorComponent;
+  let fixture: ComponentFixture<LanguageSelectorComponent>;
+
+  configureTestBed({
+    declarations: [LanguageSelectorComponent],
+    imports: [FormsModule]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LanguageSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should read current language', () => {
+    expect(component.selectedLanguage).toBe('en-US');
+  });
+
+  it('should change language', () => {
+    // Removes error in jsdom
+    window.location.reload = jest.fn();
+
+    expect(LocaleHelper.getLocale()).toBe('en-US');
+    component.changeLanguage('pt-PT');
+    expect(LocaleHelper.getLocale()).toBe('pt-PT');
+  });
+});
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 00000000000..4396de16657
--- /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';
+
+import { LocaleHelper } from '../../../locale.helper';
+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 {
+  @Input()
+  isDropdown = true;
+
+  supportedLanguages = SupportedLanguages;
+  selectedLanguage: string;
+
+  ngOnInit() {
+    this.selectedLanguage = LocaleHelper.getLocale();
+  }
+
+  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
new file mode 100644
index 00000000000..f1be65adccb
--- /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'
+}
-- 
2.39.5