[ACA-1430] Initial NgRx setup (#384)

* initial ngrx integration, migrate header

* update header tests

* update spellcheck rules

* fix locked image path for virtual paths

src/app/components/header/header.component.html

@@ -1,4 +1,4 @@
-<adf-toolbar class="app-menu" [style.background-color]="backgroundColor" role="heading" aria-level="1">
+<adf-toolbar class="app-menu" [style.background-color]="headerColor$ | async" role="heading" aria-level="1">
     <adf-toolbar-title>
         <button
             title="{{ 'APP.ACTIONS.TOGGLE-SIDENAV' | translate }}"
@@ -8,9 +8,9 @@
         </button>
 
         <a class="app-menu__title"
-            title="{{ appName }}"
+            title="{{ appName$ | async }}"
             [routerLink]="[ '/' ]">
-            <img [src]="logo" alt="{{ appName }}" />
+            <img [src]="logo$ | async" alt="{{ appName$ | async }}" />
         </a>
     </adf-toolbar-title>
 

src/app/components/header/header.component.spec.ts

@@ -24,7 +24,7 @@
  */
 
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppConfigService, PeopleContentService, TranslationService, TranslationMock } from '@alfresco/adf-core';
 import { HttpClientModule } from '@angular/common/http';
@@ -32,11 +32,17 @@ import { Observable } from 'rxjs/Rx';
 
 import { HeaderComponent } from './header.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { StoreModule, Store } from '@ngrx/store';
+import { appReducer } from '../../store/reducers/app.reducer';
+import { INITIAL_STATE, AcaState } from '../../store/states/app.state';
+import { SetAppNameAction } from '../../store/actions/app-name.action';
+import { SetHeaderColorAction } from '../../store/actions/header-color.action';
 
 describe('HeaderComponent', () => {
-    let fixture;
-    let component;
+    let fixture: ComponentFixture<HeaderComponent>;
+    let component: HeaderComponent;
     let appConfigService: AppConfigService;
+    let store: Store<AcaState>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -44,6 +50,7 @@ describe('HeaderComponent', () => {
                 HttpClientModule,
                 RouterTestingModule,
                 TranslateModule.forRoot(),
+                StoreModule.forRoot({ app: appReducer }, { initialState: INITIAL_STATE }),
             ],
             declarations: [
                 HeaderComponent
@@ -61,6 +68,10 @@ describe('HeaderComponent', () => {
             }
         });
 
+        store = TestBed.get(Store);
+        store.dispatch(new SetAppNameAction('app-name'));
+        store.dispatch(new SetHeaderColorAction('some-color'));
+
         fixture = TestBed.createComponent(HeaderComponent);
         component = fixture.componentInstance;
         appConfigService = TestBed.get(AppConfigService);
@@ -82,11 +93,17 @@ describe('HeaderComponent', () => {
         fixture.detectChanges();
     });
 
-    it('it should set application name', () => {
-        expect(component.appName).toBe('app-name');
+    it('it should set application name', done => {
+        component.appName$.subscribe(val => {
+            expect(val).toBe('app-name');
+            done();
+        });
     });
 
-    it('it should set header background color', () => {
-        expect(component.backgroundColor).toBe('some-color');
+    it('it should set header background color', done => {
+        component.headerColor$.subscribe(val => {
+            expect(val).toBe('some-color');
+            done();
+        });
     });
 });

src/app/components/header/header.component.ts

@@ -23,9 +23,11 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { DomSanitizer } from '@angular/platform-browser';
-import { Component, Output, EventEmitter, ViewEncapsulation, SecurityContext } from '@angular/core';
-import { AppConfigService } from '@alfresco/adf-core';
+import { Component, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Rx';
+import { AcaState } from '../../store/states/app.state';
+import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors';
 
 @Component({
     selector: 'app-header',
@@ -36,28 +38,17 @@ import { AppConfigService } from '@alfresco/adf-core';
 export class HeaderComponent {
     @Output() menu: EventEmitter<any> = new EventEmitter<any>();
 
-    private defaultPath = '/assets/images/alfresco-logo-white.svg';
-    private defaultBackgroundColor = '#2196F3';
+    appName$: Observable<string>;
+    headerColor$: Observable<string>;
+    logo$: Observable<string>;
 
-    constructor(
-        private appConfig: AppConfigService,
-        private sanitizer: DomSanitizer
-    ) {}
+    constructor(store: Store<AcaState>) {
+        this.headerColor$ = store.select(selectHeaderColor);
+        this.appName$ = store.select(selectAppName);
+        this.logo$ = store.select(selectLogoPath);
+    }
 
     toggleMenu() {
         this.menu.emit();
     }
-
-    get appName(): string {
-        return <string>this.appConfig.get('application.name');
-    }
-
-    get logo() {
-        return this.appConfig.get('application.logo', this.defaultPath);
-    }
-
-    get backgroundColor() {
-        const color = this.appConfig.get('headerColor', this.defaultBackgroundColor);
-        return this.sanitizer.sanitize(SecurityContext.STYLE, color);
-    }
 }