gh-559 Fix: Tabs don't show up after authentication

- Ensure that roles are checked after login
- Capture pre-existing `display` css property (used for reset)
- Use a `Subject` instead of relying on `ngDoCheck` to react to role-changes

gh-559 Ensure all tests pass

Author: ghillert

ui/src/app/about/about-details.component.spec.ts

@@ -134,7 +134,7 @@ describe('AboutDetailsComponent', () => {
 
     de = fixture.debugElement.query(By.css('h2[id=serverWarningError]'));
     el = de.nativeElement;
-    expect(el.textContent).toContain('Error occurred when attempting to obtain about info from server.');
+    expect(el.textContent).toContain('Obtaining about info from server.');
   });
 
   it('Should navigate to the details page.', () => {

ui/src/app/about/about.component.spec.ts

@@ -46,7 +46,7 @@ describe('AboutComponent', () => {
     fixture.detectChanges();
     expect(component).toBeTruthy();
     let des: DebugElement[] = fixture.debugElement.queryAll(By.css('table[id=dataFlowVersionTable] td'));
-    expect(des.length).toBe(4);
+    expect(des.length).toBe(8);
     expect(des[0].nativeElement.textContent).toContain('Name');
     expect(des[1].nativeElement.textContent).toContain('FOO');
     expect(des[2].nativeElement.textContent).toContain('Version');
@@ -77,7 +77,7 @@ describe('AboutComponent', () => {
 
     de = fixture.debugElement.query(By.css('h2[id=serverWarningError]'));
     el = de.nativeElement;
-    expect(el.textContent).toContain('Error occurred when attempting to obtain about info from server.');
+    expect(el.textContent).toContain('Obtaining about info from server.');
   });
 
   it('Should navigate to the details page.', () => {

ui/src/app/auth/auth.service.ts

@@ -9,6 +9,9 @@ import { LoginRequest } from './model/login-request.model';
 import { ErrorHandler } from '../shared/model/error-handler';
 import { HttpUtils } from '../shared/support/http.utils';
 import { SecurityAwareRequestOptions } from './support/security-aware-request-options';
+import { Output } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
 
 /**
  * The AuthService deals with all security-related services:
@@ -29,6 +32,7 @@ export class AuthService {
   private readonly xAuthTokenKeyName = 'xAuthToken';
 
   public securityInfo: SecurityInfo;
+  public securityInfoSubject = new Subject<SecurityInfo>();
 
   constructor(
     private http: Http,
@@ -60,8 +64,8 @@ export class AuthService {
                     .map(response => {
                       const body = response.json();
                       this.securityInfo = new SecurityInfo().deserialize(body);
+                      this.securityInfoSubject.next(this.securityInfo);
                       console.log('SecurityInfo:', this.securityInfo);
-
                       if (!this.securityInfo.isAuthenticationEnabled
                         && requestOptions.xAuthToken) {
                         requestOptions.xAuthToken = undefined;

ui/src/app/auth/directives/roles.directive.ts

@@ -1,7 +1,8 @@
 import { AfterViewInit, Directive, ElementRef, Input, Output, EventEmitter, HostListener,
-DoCheck, Renderer2 } from '@angular/core';
+Renderer2 } from '@angular/core';
 
 import { AuthService } from '../auth.service';
+import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
 
 /**
  * This directive will show or hide the element depending whether
@@ -13,34 +14,39 @@ import { AuthService } from '../auth.service';
 @Directive({
     selector: '[appRoles]'
 })
-export class RolesDirective implements AfterViewInit, DoCheck {
+export class RolesDirective implements AfterViewInit, OnInit {
 
   @Input()
   public appRoles: string[];
 
+  private existingDisplayPropertyValue: string;
   constructor(private authService: AuthService, private elem: ElementRef, private renderer: Renderer2) {
   }
 
   private checkRoles() {
     const found = this.authService.securityInfo.canAccess(this.appRoles);
-
     if (!found) {
       this.renderer.setStyle(this.elem.nativeElement, 'display', 'none');
+    } else {
+      if (this.existingDisplayPropertyValue) {
+        this.renderer.setStyle(this.elem.nativeElement, 'display', this.existingDisplayPropertyValue);
+      } else {
+        this.renderer.removeStyle(this.elem.nativeElement, 'display');
+      }
     }
   }
 
   /**
    * Initializes the state element and calls checkRoles().
    */
   ngAfterViewInit() {
+    this.existingDisplayPropertyValue = this.elem.nativeElement.style.display;
     this.checkRoles();
   }
 
-  /**
-   * Called when Angular dirty checks a directive.
-   * Will in return call checkRoles().
-   */
-  ngDoCheck() {
-    this.checkRoles();
+  ngOnInit() {
+    this.authService.securityInfoSubject.forEach(event => {
+      this.checkRoles();
+    });
   }
 }

ui/src/app/tests/mocks/auth.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
 
 import { SecurityInfo } from '../../auth/model/security-info.model';
 import { LoginRequest } from '../../auth/model/login-request.model';
@@ -11,6 +12,7 @@ import { LoginRequest } from '../../auth/model/login-request.model';
 export class MockAuthService {
 
   public securityInfo = new SecurityInfo();
+  public securityInfoSubject = new Subject<SecurityInfo>();
 
   login(loginRequest: LoginRequest): Observable<SecurityInfo> {