added sign out button to job list when user is authenticated (#555)

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Job Manager Change Log
 
+## v0.5.4 Release Notes
+
+### Added Sign out button to Job List.
+
+Button will log user out via Google Auth (`gapi.auth2`).
+
+## v0.5.3 Release Notes
+
+### Health check endpoint for APIs
+
+Cromwell API will now return 503 if it cannot reach the Cromwell service.
+
 ## v0.5.2 Release Notes
 
 ### Add a button to clear the query builder chips

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

@@ -79,4 +79,9 @@ export class AuthService {
         .catch(error => reject(error))
     });
   }
+
+  public signOut(): Promise<any> {
+    const auth2 = gapi.auth2.getAuthInstance();
+    return auth2.signOut();
+  }
 }

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

@@ -128,6 +128,7 @@ describe('DashboardComponent', () => {
   let de: DebugElement;
   let fakeCapabilitiesService: FakeCapabilitiesService;
   let settingsService: SettingsService;
+  let authService: AuthService;
 
   const TEST_PROJECT = 'test-project';
 
@@ -141,7 +142,8 @@ describe('DashboardComponent', () => {
       ]
     };
     fakeCapabilitiesService = new FakeCapabilitiesService(capabilities);
-    settingsService = new SettingsService(new AuthService(null, fakeCapabilitiesService, null), fakeCapabilitiesService, localStorage);
+    authService = new AuthService(null, fakeCapabilitiesService, null);
+    settingsService = new SettingsService(authService, fakeCapabilitiesService, localStorage);
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
@@ -170,6 +172,7 @@ describe('DashboardComponent', () => {
         {provide: JobManagerService, useValue: fakeJobService},
         {provide: CapabilitiesService, useValue: fakeCapabilitiesService},
         {provide: SettingsService, useValue: settingsService},
+        {provide: AuthService, useValue: authService},
         DashboardResolver,
         RouteReuse
       ],

ui/src/app/job-list/job-list.component.spec.ts

@@ -67,6 +67,7 @@ describe('JobListComponent', () => {
   let capabilities: CapabilitiesResponse;
   let fakeCapabilitiesService: FakeCapabilitiesService;
   let settingsService: SettingsService;
+  let authService: AuthService;
 
   beforeEach(async(() => {
     fakeJobService = new FakeJobManagerService(testJobs(5));
@@ -79,7 +80,8 @@ describe('JobListComponent', () => {
       ]
     };
     fakeCapabilitiesService = new FakeCapabilitiesService(capabilities);
-    settingsService = new SettingsService(new AuthService(null, fakeCapabilitiesService, null), fakeCapabilitiesService, localStorage);
+    authService = new AuthService(null, fakeCapabilitiesService, null);
+    settingsService = new SettingsService(authService, fakeCapabilitiesService, localStorage);
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
@@ -119,6 +121,7 @@ describe('JobListComponent', () => {
         {provide: JobManagerService, useValue: fakeJobService},
         {provide: SettingsService, useValue: settingsService},
         {provide: CapabilitiesService, useValue: fakeCapabilitiesService},
+        {provide: AuthService, useValue: authService},
         JobListResolver,
         RouteReuse
       ],

ui/src/app/shared/header/header.component.css

@@ -131,3 +131,18 @@ button.clear-query {
   height: 40px;
   width: 40px;
 }
+
+.sign-out-container clr-icon {
+  margin-top: -5px;
+}
+
+.sign-out-container button.mat-raised-button {
+  position: absolute;
+  right: 10px;
+  margin-top: -40px;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-size: 0.8rem;
+  width: 100px;
+  line-height: 0.8rem;
+  border-radius: 0;
+}

ui/src/app/shared/header/header.component.html

@@ -85,5 +85,16 @@ <h2 class="settings-header">Displayed columns</h2>
         </div>
       </mat-menu>
     </div>
+    <div class="sign-out-container" *ngIf="isSignedIn()">
+      <button mat-icon-button (click)="signOut()" class="mat-raised-button">
+        Sign out
+        <clr-tooltip>
+          <clr-icon clrTooltipTrigger shape="logout" size="18"></clr-icon>
+          <clr-tooltip-content clrPosition="left"  clrSize="xs" *clrIfOpen>
+            <span>sign out</span>
+          </clr-tooltip-content>
+        </clr-tooltip>
+      </button>
+    </div>
   </div>
 </div>

ui/src/app/shared/header/header.component.spec.ts

@@ -58,9 +58,10 @@ describe('HeaderComponent', () => {
     ],
     queryExtensions: ['projectId']
   };
-  let fakeCapabilitiesService = new FakeCapabilitiesService(capabilities);
 
   beforeEach(async(() => {
+    const fakeCapabilitiesService = new FakeCapabilitiesService(capabilities);
+    const authService = new AuthService(null, fakeCapabilitiesService, null);
 
     TestBed.configureTestingModule({
       declarations: [HeaderComponent, TestHeaderComponent, MockFilterChipComponent],
@@ -89,7 +90,8 @@ describe('HeaderComponent', () => {
       ],
       providers: [
         {provide: CapabilitiesService, useValue: fakeCapabilitiesService},
-        {provide: SettingsService, useValue: new SettingsService(new AuthService(null, fakeCapabilitiesService, null), fakeCapabilitiesService, localStorage)}
+        {provide: SettingsService, useValue: new SettingsService(authService, fakeCapabilitiesService, localStorage)},
+        {provide: AuthService, useValue: authService}
       ]
     }).compileComponents();
   }));

ui/src/app/shared/header/header.component.ts

@@ -26,6 +26,7 @@ import {
   PageEvent,
 } from '@angular/material';
 
+import {AuthService} from '../../core/auth.service';
 import {CapabilitiesService} from '../../core/capabilities.service';
 import {URLSearchParamsUtils} from '../utils/url-search-params.utils';
 import {JobStatus} from '../model/JobStatus';
@@ -71,6 +72,7 @@ export class HeaderComponent implements OnInit, AfterViewInit, AfterViewChecked,
     private readonly route: ActivatedRoute,
     private readonly router: Router,
     private readonly capabilitiesService: CapabilitiesService,
+    private readonly authService: AuthService,
     private readonly settingsService: SettingsService,
     private zone: NgZone,
     private cdr: ChangeDetectorRef,
@@ -272,6 +274,19 @@ export class HeaderComponent implements OnInit, AfterViewInit, AfterViewChecked,
     this.onDisplayFieldsChanged.emit(this.displayFields);
   }
 
+  isSignedIn(): boolean {
+    return !!this.authService.userId;
+  }
+
+  signOut(): void {
+    this.authService.signOut().then(() => {
+      this.router.navigate(
+        ['/sign_in']
+      );
+    });
+  }
+
+
   private refreshChips(query: string): void {
     this.zone.run(() => this.chips = URLSearchParamsUtils.getChips(query));
   }