From c2345c1562e1af83a506330c4c48ca7717f1cd27 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Thu, 18 Jul 2019 11:51:46 +0200
Subject: [PATCH] 63825: UI language cookie

---
 src/app/app.component.spec.ts                 |  3 ++
 src/app/app.component.ts                      | 22 ++++++++--
 src/app/app.module.ts                         |  4 +-
 .../lang-switch/lang-switch.component.html    |  2 +-
 .../lang-switch/lang-switch.component.spec.ts | 40 ++++++++++++++++++-
 .../lang-switch/lang-switch.component.ts      | 14 ++++++-
 .../mocks/mock-client-cookie.service.ts       | 26 ++++++++++++
 7 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 src/app/shared/mocks/mock-client-cookie.service.ts

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index bd2d832c67..016d8df8d4 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -44,6 +44,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { RouteService } from './shared/services/route.service';
 import { MockActivatedRoute } from './shared/mocks/mock-active-router';
 import { MockRouter } from './shared/mocks/mock-router';
+import { ClientCookieService } from './shared/services/client-cookie.service';
+import { MockClientCookieService } from './shared/mocks/mock-client-cookie.service';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -78,6 +80,7 @@ describe('App component', () => {
         { provide: MenuService, useValue: menuService },
         { provide: CSSVariableService, useClass: CSSVariableServiceStub },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: ClientCookieService, useValue: new MockClientCookieService()},
         AppComponent,
         RouteService
       ],
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 52c169e7bc..cc71247d9f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -32,6 +32,10 @@ import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
 import { slideSidebarPadding } from './shared/animations/slide';
 import { HostWindowService } from './shared/host-window.service';
 import { Theme } from '../config/theme.inferface';
+import { ClientCookieService } from './shared/services/client-cookie.service';
+import { isNotEmpty } from './shared/empty.util';
+
+export const LANG_COOKIE = 'language_cookie';
 
 @Component({
   selector: 'ds-app',
@@ -61,6 +65,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private cssService: CSSVariableService,
     private menuService: MenuService,
     private windowService: HostWindowService,
+    private clientCookie: ClientCookieService
   ) {
     // 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));
@@ -68,11 +73,20 @@ export class AppComponent implements OnInit, AfterViewInit {
     // 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());
+    // Attempt to get the language from a cookie
+    const lang = clientCookie.get(LANG_COOKIE);
+    if (isNotEmpty(lang)) {
+      // Cookie found
+      // Use the language from the cookie
+      translate.use(lang);
     } else {
-      translate.use(config.defaultLanguage);
+      // Cookie not found
+      // 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/app.module.ts b/src/app/app.module.ts
index ce5a2d78a2..3781edf532 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { ExpandableAdminSidebarSectionComponent } from './+admin/admin-sidebar/e
 import { NavbarModule } from './navbar/navbar.module';
 import { JournalEntitiesModule } from './entity-groups/journal-entities/journal-entities.module';
 import { ResearchEntitiesModule } from './entity-groups/research-entities/research-entities.module';
+import { ClientCookieService } from './shared/services/client-cookie.service';
 
 export function getConfig() {
   return ENV_CONFIG;
@@ -97,7 +98,8 @@ const PROVIDERS = [
   {
     provide: RouterStateSerializer,
     useClass: DSpaceRouterStateSerializer
-  }
+  },
+  ClientCookieService
 ];
 
 const DECLARATIONS = [
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index 745facc95c..b61ec5592e 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -4,7 +4,7 @@
   </a>
   <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLang">
     <li class="dropdown-item" #langSelect *ngFor="let lang of translate.getLangs()"
-            (click)="translate.use(lang)"
+            (click)="useLang(lang)"
             [class.active]="lang === translate.currentLang">
                 {{ langLabel(lang) }}
     </li>
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 bbaee604f7..3ef5a0d8d3 100644
--- a/src/app/shared/lang-switch/lang-switch.component.spec.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.spec.ts
@@ -6,6 +6,9 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import { GLOBAL_CONFIG } from '../../../config';
 import {LangConfig} from '../../../config/lang-config.interface';
 import {Observable, of} from 'rxjs';
+import { ClientCookieService } from '../services/client-cookie.service';
+import { MockClientCookieService } from '../mocks/mock-client-cookie.service';
+import { By } from '@angular/platform-browser';
 
 // 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.
@@ -28,8 +31,14 @@ class CustomLoader implements TranslateLoader {
 /* tslint:enable:quotemark */
 /* tslint:enable:object-literal-key-quotes */
 
+let clientCookie: ClientCookieService;
+
 describe('LangSwitchComponent', () => {
 
+  beforeEach(() => {
+    clientCookie = Object.assign(new MockClientCookieService());
+  });
+
   describe('with English and Deutsch activated, English as default', () => {
     let component: LangSwitchComponent;
     let fixture: ComponentFixture<LangSwitchComponent>;
@@ -61,7 +70,11 @@ describe('LangSwitchComponent', () => {
         )],
         declarations: [LangSwitchComponent],
         schemas: [NO_ERRORS_SCHEMA],
-        providers: [TranslateService, {provide: GLOBAL_CONFIG, useValue: mockConfig}]
+        providers: [
+          TranslateService,
+          { provide: GLOBAL_CONFIG, useValue: mockConfig },
+          { provide: ClientCookieService, useValue: clientCookie }
+        ]
       }).compileComponents()
         .then(() => {
           translate = TestBed.get(TranslateService);
@@ -73,6 +86,7 @@ describe('LangSwitchComponent', () => {
           component = fixture.componentInstance;
           de = fixture.debugElement;
           langSwitchElement = de.nativeElement;
+          fixture.detectChanges();
         });
     }));
 
@@ -93,6 +107,24 @@ describe('LangSwitchComponent', () => {
     it('should define the main A HREF in the UI', (() => {
       expect(langSwitchElement.querySelector('a')).toBeDefined();
     }));
+
+    describe('when selecting a language', () => {
+      beforeEach(() => {
+        spyOn(translate, 'use');
+        spyOn(clientCookie, 'set');
+        const langItem = fixture.debugElement.query(By.css('.dropdown-item')).nativeElement;
+        langItem.click();
+        fixture.detectChanges();
+      });
+
+      it('should translate the app', () => {
+        expect(translate.use).toHaveBeenCalled();
+      });
+
+      it('should set the client\'s language cookie', () => {
+        expect(clientCookie.set).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('with English as the only active and also default language', () => {
@@ -127,7 +159,11 @@ describe('LangSwitchComponent', () => {
         )],
         declarations: [LangSwitchComponent],
         schemas: [NO_ERRORS_SCHEMA],
-        providers: [TranslateService, {provide: GLOBAL_CONFIG, useValue: mockConfig}]
+        providers: [
+          TranslateService,
+          { provide: GLOBAL_CONFIG, useValue: mockConfig },
+          { provide: ClientCookieService, useValue: clientCookie }
+        ]
       }).compileComponents();
       translate = TestBed.get(TranslateService);
       translate.addLangs(mockConfig.languages.filter((MyLangConfig) => MyLangConfig.active === true).map((a) => a.code));
diff --git a/src/app/shared/lang-switch/lang-switch.component.ts b/src/app/shared/lang-switch/lang-switch.component.ts
index 88ffe89749..c561d2b493 100644
--- a/src/app/shared/lang-switch/lang-switch.component.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.ts
@@ -2,6 +2,8 @@ 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';
+import { ClientCookieService } from '../services/client-cookie.service';
+import { LANG_COOKIE } from '../../app.component';
 
 @Component({
   selector: 'ds-lang-switch',
@@ -23,7 +25,8 @@ export class LangSwitchComponent implements OnInit {
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
-    public translate: TranslateService
+    public translate: TranslateService,
+    public clientCookie: ClientCookieService
   ) {
   }
 
@@ -46,4 +49,13 @@ export class LangSwitchComponent implements OnInit {
     return this.activeLangs.find((MyLangConfig) => MyLangConfig.code === langcode).label;
   }
 
+  /**
+   * Switch to a language and store it in a cookie
+   * @param lang    The language to switch to
+   */
+  useLang(lang: string) {
+    this.translate.use(lang);
+    this.clientCookie.set(LANG_COOKIE, lang);
+  }
+
 }
diff --git a/src/app/shared/mocks/mock-client-cookie.service.ts b/src/app/shared/mocks/mock-client-cookie.service.ts
new file mode 100644
index 0000000000..85801bb94d
--- /dev/null
+++ b/src/app/shared/mocks/mock-client-cookie.service.ts
@@ -0,0 +1,26 @@
+/**
+ * Mock for [[ClientCookieService]]
+ */
+export class MockClientCookieService {
+  cookies: Map<string, string>;
+
+  constructor(cookies: Map<string, string> = new Map()) {
+    this.cookies = cookies;
+  }
+
+  set(name, value) {
+    this.cookies.set(name, value);
+  }
+
+  get(name) {
+    return this.cookies.get(name);
+  }
+
+  remove() {
+    return jasmine.createSpy('remove');
+  }
+
+  getAll() {
+    return jasmine.createSpy('getAll');
+  }
+}