From 17be7a34e0c253d06b8d31c2a7a0c55db447517b Mon Sep 17 00:00:00 2001
From: Bram Luyten <bram@atmire.com>
Date: Sun, 18 Nov 2018 08:21:51 +0100
Subject: [PATCH 1/3] Issue 298 Language switch

---
 config/environment.default.js                 |  22 ++-
 src/app/app.component.ts                      |  16 +-
 src/app/header/header.component.html          |   3 +-
 .../lang-switch/lang-switch.component.html    |  13 ++
 .../lang-switch/lang-switch.component.scss    |   0
 .../lang-switch/lang-switch.component.spec.ts | 163 ++++++++++++++++++
 .../lang-switch/lang-switch.component.ts      |  49 ++++++
 src/app/shared/shared.module.ts               |   2 +
 src/config/global-config.interface.ts         |   3 +
 src/config/lang-config.interface.ts           |  12 ++
 10 files changed, 277 insertions(+), 6 deletions(-)
 create mode 100644 src/app/shared/lang-switch/lang-switch.component.html
 create mode 100644 src/app/shared/lang-switch/lang-switch.component.scss
 create mode 100644 src/app/shared/lang-switch/lang-switch.component.spec.ts
 create mode 100644 src/app/shared/lang-switch/lang-switch.component.ts
 create mode 100644 src/config/lang-config.interface.ts

diff --git a/config/environment.default.js b/config/environment.default.js
index a6ef738f41..d3758e66bd 100644
--- a/config/environment.default.js
+++ b/config/environment.default.js
@@ -52,5 +52,25 @@ module.exports = {
   // Log directory
   logDirectory: '.',
   // NOTE: will log all redux actions and transfers in console
-  debug: false
+  debug: false,
+  // Default Language in which the UI will be rendered if the user's browser language is not an active language
+  defaultLanguage: 'en',
+  // Languages. DSpace Angular holds a message catalog for each of the following languages. When set to active, users will be able to switch to the use of this language in the user interface.
+  languages: [{
+    code: 'en',
+    label: 'English',
+    active: true,
+  }, {
+    code: 'de',
+    label: 'Deutsch',
+    active: true,
+  }, {
+    code: 'cs',
+    label: 'Čeština',
+    active: true,
+  }, {
+    code: 'nl',
+    label: 'Nederlands',
+    active: false,
+  }]
 };
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a7b9fd59bf..ab66d738b9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -60,10 +60,18 @@ export class AppComponent implements OnInit, AfterViewInit {
     private menuService: MenuService,
     private windowService: HostWindowService
   ) {
-    // this language will be used as a fallback when a translation isn't found in the current language
-    translate.setDefaultLang('en');
-    // the lang to use, if the lang isn't available, it will use the current loader to get them
-    translate.use('en');
+    // Load all the languages that are defined as active from the config file
+    translate.addLangs(config.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
+
+    // Load the default language from the config file
+    translate.setDefaultLang(config.defaultLanguage);
+
+    // Attempt to get the browser language from the user
+    if (translate.getLangs().includes(translate.getBrowserLang())) {
+      translate.use(translate.getBrowserLang());
+    } else {
+      translate.use(config.defaultLanguage);
+    }
 
     metadata.listenForRouteChange();
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 461f809357..e975ec0cc1 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -6,7 +6,8 @@
 
         <nav class="navbar navbar-light navbar-expand-md float-right px-0">
             <a href="#" class="px-1"><i class="fas fa-search fa-lg fa-fw" [title]="'nav.search' | translate"></i></a>
-            <a href="#" class="px-1"><i class="fas fa-globe-asia fa-lg fa-fw" [title]="'nav.language' | translate"></i></a>
+            <ds-lang-switch></ds-lang-switch>
+            <!--<a href="#" class="px-1"><i class="fas fa-globe-asia fa-lg fa-fw" [title]="'nav.language' | translate"></i></a>-->
             <ds-auth-nav-menu></ds-auth-nav-menu>
             <div class="pl-2">
                 <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
new file mode 100644
index 0000000000..2bcef79db2
--- /dev/null
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -0,0 +1,13 @@
+<div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage">
+  <a href="#" id="dropdownLang" role="button" class="nav-link" (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle>
+    <i class="fa fa-language fa-fw" aria-hidden="true"></i>
+    {{ currentLangLabel() }}
+  </a>
+  <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLang">
+    <li class="dropdown-item" #langSelect *ngFor="let lang of translate.getLangs()"
+            (click)="translate.use(lang)"
+            [class.active]="lang === translate.currentLang">
+                {{ langLabel(lang) }}
+    </li>
+  </ul>
+</div>
diff --git a/src/app/shared/lang-switch/lang-switch.component.scss b/src/app/shared/lang-switch/lang-switch.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/lang-switch/lang-switch.component.spec.ts b/src/app/shared/lang-switch/lang-switch.component.spec.ts
new file mode 100644
index 0000000000..1cd0cf02c7
--- /dev/null
+++ b/src/app/shared/lang-switch/lang-switch.component.spec.ts
@@ -0,0 +1,163 @@
+import {LangSwitchComponent} from './lang-switch.component';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
+import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import { GLOBAL_CONFIG } from '../../../config';
+import {LangConfig} from '../../../config/lang-config.interface';
+import {Observable, of} from 'rxjs';
+
+// This test is completely independent from any message catalogs or keys in the codebase
+// The translation module is instantiated with these bogus messages that we aren't using anyway.
+
+// Double quotes are mandatory in JSON, so de-activating the tslint rule checking for single quotes here.
+/* tslint:disable:quotemark */
+// JSON for the language files has double quotes around all literals
+/* tslint:disable:object-literal-key-quotes */
+class CustomLoader implements TranslateLoader {
+  getTranslation(lang: string): Observable<any> {
+    return of({
+      "footer": {
+        "copyright": "copyright © 2002-{{ year }}",
+        "link.dspace": "DSpace software",
+        "link.duraspace": "DuraSpace"
+      }
+    });
+  }
+}
+/* tslint:enable:quotemark */
+/* tslint:enable:object-literal-key-quotes */
+
+describe('LangSwitchComponent', () => {
+
+  describe('with English and Deutsch activated, English as default', () => {
+    let component: LangSwitchComponent;
+    let fixture: ComponentFixture<LangSwitchComponent>;
+    let de: DebugElement;
+    let langSwitchElement: HTMLElement;
+
+    let translate: TranslateService;
+    let http: HttpTestingController;
+
+    beforeEach(async(() => {
+
+      const mockConfig = {
+        languages: [{
+          code: 'en',
+          label: 'English',
+          active: true,
+        }, {
+          code: 'de',
+          label: 'Deutsch',
+          active: true,
+        }]
+      };
+
+      TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule, TranslateModule.forRoot(
+          {
+            loader: {provide: TranslateLoader, useClass: CustomLoader}
+          }
+        )],
+        declarations: [LangSwitchComponent],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [TranslateService, {provide: GLOBAL_CONFIG, useValue: mockConfig}]
+      }).compileComponents()
+        .then(() => {
+          translate = TestBed.get(TranslateService);
+          translate.addLangs(mockConfig.languages.filter((langConfig:LangConfig) => langConfig.active === true).map((a) => a.code));
+          translate.setDefaultLang('en');
+          translate.use('en');
+          http = TestBed.get(HttpTestingController);
+          fixture = TestBed.createComponent(LangSwitchComponent);
+          component = fixture.componentInstance;
+          de = fixture.debugElement;
+          langSwitchElement = de.nativeElement;
+        });
+    }));
+
+    it('should create', () => {
+      expect(component).toBeDefined();
+    });
+
+    it('should identify English as the label for the current active language in the component', async(() => {
+      fixture.detectChanges();
+      expect(component.currentLangLabel()).toEqual('English');
+    }));
+
+    it('should be initialized with more than one language active', async(() => {
+      fixture.detectChanges();
+      expect(component.moreThanOneLanguage).toBeTruthy();
+    }));
+
+    it('should define the main A HREF in the UI', (() => {
+      expect(langSwitchElement.querySelector('a')).toBeDefined();
+    }));
+
+    it('should show English in the UI as the label for the language dropdown', async(() => {
+      spyOn(translate, 'getBrowserLang').and.returnValue('en');
+      fixture.detectChanges();
+      // the main link to open up the dropdown should now say English
+      expect(langSwitchElement.querySelector('a').textContent.trim()).toEqual('English');
+    }));
+  });
+
+  describe('with English as the only active and also default language', () => {
+
+    let component: LangSwitchComponent;
+    let fixture: ComponentFixture<LangSwitchComponent>;
+    let de: DebugElement;
+    let langSwitchElement: HTMLElement;
+
+    let translate: TranslateService;
+    let http: HttpTestingController;
+
+    beforeEach(async(() => {
+
+      const mockConfig = {
+        languages: [{
+          code: 'en',
+          label: 'English',
+          active: true,
+        }, {
+          code: 'de',
+          label: 'Deutsch',
+          active: false
+        }]
+      };
+
+      TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule, TranslateModule.forRoot(
+          {
+            loader: {provide: TranslateLoader, useClass: CustomLoader}
+          }
+        )],
+        declarations: [LangSwitchComponent],
+        schemas: [NO_ERRORS_SCHEMA],
+        providers: [TranslateService, {provide: GLOBAL_CONFIG, useValue: mockConfig}]
+      }).compileComponents();
+      translate = TestBed.get(TranslateService);
+      translate.addLangs(mockConfig.languages.filter((MyLangConfig) => MyLangConfig.active === true).map((a) => a.code));
+      translate.setDefaultLang('en');
+      translate.use('en');
+      http = TestBed.get(HttpTestingController);
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(LangSwitchComponent);
+      component = fixture.componentInstance;
+      de = fixture.debugElement;
+      langSwitchElement = de.nativeElement;
+    });
+
+    it('should create', () => {
+      expect(component).toBeDefined();
+    });
+
+    it('should not define the main header for the language switch, as it should be invisible', (() => {
+      expect(langSwitchElement.querySelector('a')).toBeNull();
+    }));
+
+  });
+
+});
diff --git a/src/app/shared/lang-switch/lang-switch.component.ts b/src/app/shared/lang-switch/lang-switch.component.ts
new file mode 100644
index 0000000000..88ffe89749
--- /dev/null
+++ b/src/app/shared/lang-switch/lang-switch.component.ts
@@ -0,0 +1,49 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import {TranslateService} from '@ngx-translate/core';
+import {LangConfig} from '../../../config/lang-config.interface';
+
+@Component({
+  selector: 'ds-lang-switch',
+  styleUrls: ['lang-switch.component.scss'],
+  templateUrl: 'lang-switch.component.html',
+})
+
+/**
+ * Component representing a switch for changing the interface language throughout the application
+ * If only one language is active, the component will disappear as there are no languages to switch to.
+ */
+export class LangSwitchComponent implements OnInit {
+
+  // All of the languages that are active, meaning that a user can switch between them.
+  activeLangs: LangConfig[];
+
+  // A language switch only makes sense if there is more than one active language to switch between.
+  moreThanOneLanguage: boolean;
+
+  constructor(
+    @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+    public translate: TranslateService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.activeLangs = this.config.languages.filter((MyLangConfig) => MyLangConfig.active === true);
+    this.moreThanOneLanguage = (this.activeLangs.length > 1);
+  }
+
+  /**
+   * Returns the label for the current language
+   */
+  currentLangLabel(): string {
+    return this.activeLangs.find((MyLangConfig) => MyLangConfig.code === this.translate.currentLang).label;
+  }
+
+  /**
+   * Returns the label for a specific language code
+   */
+  langLabel(langcode: string): string {
+    return this.activeLangs.find((MyLangConfig) => MyLangConfig.code === langcode).label;
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index b7d42e4856..3561576046 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -86,6 +86,7 @@ import { CapitalizePipe } from './utils/capitalize.pipe';
 import { ObjectKeysPipe } from './utils/object-keys-pipe';
 import { MomentModule } from 'ngx-moment';
 import { MenuModule } from './menu/menu.module';
+import {LangSwitchComponent} from './lang-switch/lang-switch.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -140,6 +141,7 @@ const COMPONENTS = [
   DsDatePickerComponent,
   ErrorComponent,
   FormComponent,
+  LangSwitchComponent,
   LoadingComponent,
   LogInComponent,
   LogOutComponent,
diff --git a/src/config/global-config.interface.ts b/src/config/global-config.interface.ts
index b623a4bf8c..6d1d4da6f9 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/global-config.interface.ts
@@ -4,6 +4,7 @@ import { CacheConfig } from './cache-config.interface';
 import { UniversalConfig } from './universal-config.interface';
 import { INotificationBoardOptions } from './notifications-config.interfaces';
 import { FormConfig } from './form-config.interfaces';
+import {LangConfig} from './lang-config.interface';
 
 export interface GlobalConfig extends Config {
   ui: ServerConfig;
@@ -16,4 +17,6 @@ export interface GlobalConfig extends Config {
   gaTrackingId: string;
   logDirectory: string;
   debug: boolean;
+  defaultLanguage: string;
+  languages: LangConfig[];
 }
diff --git a/src/config/lang-config.interface.ts b/src/config/lang-config.interface.ts
new file mode 100644
index 0000000000..470b50343f
--- /dev/null
+++ b/src/config/lang-config.interface.ts
@@ -0,0 +1,12 @@
+import { Config } from './config.interface';
+
+/**
+ * An interface to represent a language in the configuration. A LangConfig has a code which should be the official
+ * language code for the language (e.g. ‘fr’), a label which should be the name of the language in that language
+ * (e.g. ‘Français’), and a boolean to determine whether or not it should be listed in the language select.
+ */
+export interface LangConfig extends Config {
+      code: string;
+      label: string;
+      active: boolean;
+}

From 82c91be44f6f113d242852908546b28b9d944e9f Mon Sep 17 00:00:00 2001
From: Bram Luyten <bram@atmire.com>
Date: Wed, 16 Jan 2019 20:51:02 +0100
Subject: [PATCH 2/3] Reconciling with new header design

---
 src/app/header/header.component.html                  | 1 -
 src/app/shared/lang-switch/lang-switch.component.html | 5 ++---
 src/app/shared/lang-switch/lang-switch.component.scss | 3 +++
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index e975ec0cc1..402eb7a44d 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -7,7 +7,6 @@
         <nav class="navbar navbar-light navbar-expand-md float-right px-0">
             <a href="#" class="px-1"><i class="fas fa-search fa-lg fa-fw" [title]="'nav.search' | translate"></i></a>
             <ds-lang-switch></ds-lang-switch>
-            <!--<a href="#" class="px-1"><i class="fas fa-globe-asia fa-lg fa-fw" [title]="'nav.language' | translate"></i></a>-->
             <ds-auth-nav-menu></ds-auth-nav-menu>
             <div class="pl-2">
                 <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index 2bcef79db2..745facc95c 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,7 +1,6 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage">
-  <a href="#" id="dropdownLang" role="button" class="nav-link" (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle>
-    <i class="fa fa-language fa-fw" aria-hidden="true"></i>
-    {{ currentLangLabel() }}
+  <a href="#" id="dropdownLang" role="button" class="px-1" (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle>
+    <i class="fas fa-globe-asia fa-lg fa-fw" [title]="'nav.language' | translate"></i>
   </a>
   <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLang">
     <li class="dropdown-item" #langSelect *ngFor="let lang of translate.getLangs()"
diff --git a/src/app/shared/lang-switch/lang-switch.component.scss b/src/app/shared/lang-switch/lang-switch.component.scss
index e69de29bb2..666ba2d49d 100644
--- a/src/app/shared/lang-switch/lang-switch.component.scss
+++ b/src/app/shared/lang-switch/lang-switch.component.scss
@@ -0,0 +1,3 @@
+.dropdown-toggle::after {
+  display:none;
+}

From 8fd18127c881d0e5f411b80dfe1d0aa57406099c Mon Sep 17 00:00:00 2001
From: Bram Luyten <bram@atmire.com>
Date: Thu, 17 Jan 2019 09:25:05 +0100
Subject: [PATCH 3/3] Removing test for presence of active language string in
 the header itself

---
 src/app/shared/lang-switch/lang-switch.component.spec.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/app/shared/lang-switch/lang-switch.component.spec.ts b/src/app/shared/lang-switch/lang-switch.component.spec.ts
index 1cd0cf02c7..bbaee604f7 100644
--- a/src/app/shared/lang-switch/lang-switch.component.spec.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.spec.ts
@@ -93,13 +93,6 @@ describe('LangSwitchComponent', () => {
     it('should define the main A HREF in the UI', (() => {
       expect(langSwitchElement.querySelector('a')).toBeDefined();
     }));
-
-    it('should show English in the UI as the label for the language dropdown', async(() => {
-      spyOn(translate, 'getBrowserLang').and.returnValue('en');
-      fixture.detectChanges();
-      // the main link to open up the dropdown should now say English
-      expect(langSwitchElement.querySelector('a').textContent.trim()).toEqual('English');
-    }));
   });
 
   describe('with English as the only active and also default language', () => {