Display tooltip with build status on all icons

web/app/build/build.component.spec.ts

@@ -8,7 +8,7 @@ import {MomentModule} from 'ngx-moment';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {ToolbarModule} from '../common/components/toolbar/toolbar.module';
 import {BuildStatus} from '../common/constants';
 import {mockBuild, mockBuildResponse} from '../common/test_helpers/mock_build_data';
@@ -42,8 +42,8 @@ describe('BuildComponent', () => {
         .configureTestingModule({
           declarations: [BuildComponent],
           imports: [
-            ToolbarModule, RouterTestingModule, CommonComponentsModule,
-            MatCardModule, MatProgressSpinnerModule, MomentModule
+            ToolbarModule, RouterTestingModule, StatusIconModule, MatCardModule,
+            MatProgressSpinnerModule, MomentModule
           ],
           providers: [
             {

web/app/build/build.module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {MatCardModule, MatProgressSpinnerModule} from '@angular/material';
 import {MomentModule} from 'ngx-moment';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {ToolbarModule} from '../common/components/toolbar/toolbar.module';
 import {BuildLogWebsocketService} from '../services/build-log-websocket.service';
 
@@ -16,7 +16,7 @@ import {BuildComponent} from './build.component';
     /** Angular Library Imports */
     CommonModule,
     /** Internal Imports */
-    ToolbarModule, CommonComponentsModule,
+    ToolbarModule, StatusIconModule,
     /** Angular Material Imports */
     MatCardModule, MatProgressSpinnerModule,
     /** Third-Party Module Imports */

web/app/common/components/status-icon/status-icon.component.html

@@ -1,17 +1,17 @@
 <ng-container *ngIf="status" [ngSwitch]="status">
-  <mat-icon *ngSwitchCase="BuildStatus.SUCCESS" class="fci-status-icon-success">
+  <mat-icon *ngSwitchCase="BuildStatus.SUCCESS" class="fci-status-icon-success" [matTooltip]="getTooltipString()" matTooltipPosition="above">
     check_circle
   </mat-icon>
-  <mat-icon *ngSwitchCase="BuildStatus.PENDING" class="fci-status-icon-pending">
+  <mat-icon *ngSwitchCase="BuildStatus.PENDING" class="fci-status-icon-pending" [matTooltip]="getTooltipString()" matTooltipPosition="above">
     timelapse
   </mat-icon>
-  <mat-icon *ngSwitchCase="isRunningState()" class="fci-status-icon-running">
+  <mat-icon *ngSwitchCase="isRunningState()" class="fci-status-icon-running" [matTooltip]="getTooltipString()" matTooltipPosition="above">
     directions_run
   </mat-icon>
-  <mat-icon *ngSwitchCase="BuildStatus.INTERNAL_ISSUE" class="fci-status-icon-internal">
+  <mat-icon *ngSwitchCase="BuildStatus.INTERNAL_ISSUE" class="fci-status-icon-internal" [matTooltip]="getTooltipString()" matTooltipPosition="above">
     warning
   </mat-icon>
-  <mat-icon *ngSwitchCase="isFailedState()" class="fci-status-icon-failed">
+  <mat-icon *ngSwitchCase="isFailedState()" class="fci-status-icon-failed" [matTooltip]="getTooltipString()" matTooltipPosition="above">
     cancel
   </mat-icon>
 </ng-container>

web/app/common/components/status-icon/status-icon.component.spec.ts

@@ -1,64 +1,107 @@
+import {DebugElement} from '@angular/core/src/debug/debug_node';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatTooltip, MatTooltipModule} from '@angular/material';
 import {MatIconModule} from '@angular/material/icon';
+import {By} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
 import {BuildStatus} from '../../constants';
+
 import {StatusIconComponent} from './status-icon.component';
 
 interface ExpectedIcon {
   iconString: string;
   class: string;
+  tooltipString: string;
 }
 
 const EXPECTED_STATUSES = new Map<BuildStatus, ExpectedIcon>([
   [
-    BuildStatus.SUCCESS,
-    {iconString: 'check_circle', class: 'fci-status-icon-success'}
+    BuildStatus.SUCCESS, {
+      iconString: 'check_circle',
+      class: 'fci-status-icon-success',
+      tooltipString: 'Success'
+    }
+  ],
+  [
+    BuildStatus.PENDING, {
+      iconString: 'timelapse',
+      class: 'fci-status-icon-pending',
+      tooltipString: 'Pending'
+    }
   ],
   [
-    BuildStatus.PENDING,
-    {iconString: 'timelapse', class: 'fci-status-icon-pending'}
+    BuildStatus.FAILED, {
+      iconString: 'cancel',
+      class: 'fci-status-icon-failed',
+      tooltipString: 'Failed'
+    }
   ],
-  [BuildStatus.FAILED, {iconString: 'cancel', class: 'fci-status-icon-failed'}],
   [
-    BuildStatus.INTERNAL_ISSUE,
-    {iconString: 'warning', class: 'fci-status-icon-internal'}
+    BuildStatus.INTERNAL_ISSUE, {
+      iconString: 'warning',
+      class: 'fci-status-icon-internal',
+      tooltipString: 'Internal CI Issue'
+    }
   ],
   [
-    BuildStatus.MISSING_FASTFILE,
-    {iconString: 'cancel', class: 'fci-status-icon-failed'}
+    BuildStatus.MISSING_FASTFILE, {
+      iconString: 'cancel',
+      class: 'fci-status-icon-failed',
+      tooltipString: 'Missing Fastfile'
+    }
   ],
   [
-    BuildStatus.INSTALLING_XCODE,
-    {iconString: 'directions_run', class: 'fci-status-icon-running'}
+    BuildStatus.INSTALLING_XCODE, {
+      iconString: 'directions_run',
+      class: 'fci-status-icon-running',
+      tooltipString: 'Installing XCode'
+    }
   ]
 ]);
 
 describe('StatusIconComponent', () => {
   let component: StatusIconComponent;
   let fixture: ComponentFixture<StatusIconComponent>;
-  let iconEl: HTMLElement;
+  let iconEl: DebugElement;
 
   beforeEach(async(() => {
     TestBed
-        .configureTestingModule(
-            {imports: [MatIconModule], declarations: [StatusIconComponent]})
+        .configureTestingModule({
+          imports: [MatIconModule, MatTooltipModule, BrowserAnimationsModule],
+          declarations: [StatusIconComponent]
+        })
         .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StatusIconComponent);
     component = fixture.componentInstance;
-    iconEl = fixture.nativeElement;
+    iconEl = fixture.debugElement;
     expect(component.status).toBeUndefined();
   });
 
   EXPECTED_STATUSES.forEach((expectedIcon, status) => {
-    it(`should have expect icon and class when status is ${status}`, () => {
-      component.status = status;
-      fixture.detectChanges();
+    describe(`${status} status`, () => {
+      it('should have expected icon and class', () => {
+        component.status = status;
+        fixture.detectChanges();
+
+        const icon = iconEl.query(By.css('.mat-icon')).nativeElement;
+        expect(icon.textContent.trim()).toBe(expectedIcon.iconString);
+        expect(icon.classList).toContain(expectedIcon.class);
+      });
+
+      it('should have expected tooltip String', () => {
+        component.status = status;
+        fixture.detectChanges();
+
+        const icon = iconEl.query(By.css('.mat-icon'));
+        const tooltipDir: MatTooltip =
+            icon.injector.get<MatTooltip>(MatTooltip);
 
-      const icon = iconEl.querySelector('.mat-icon');
-      expect(icon.textContent.trim()).toBe(expectedIcon.iconString);
-      expect(icon.classList).toContain(expectedIcon.class);
+        expect(tooltipDir.message).toBe(expectedIcon.tooltipString);
+      });
     });
   });
 });

web/app/common/components/status-icon/status-icon.component.ts

@@ -28,4 +28,23 @@ export class StatusIconComponent {
   isRunningState(): BuildStatus|false {
     return RUNNING_STATUSES.includes(this.status) ? this.status : false;
   }
+
+  getTooltipString(): string {
+    switch (this.status) {
+      case BuildStatus.FAILED:
+        return 'Failed';
+      case BuildStatus.SUCCESS:
+        return 'Success';
+      case BuildStatus.MISSING_FASTFILE:
+        return 'Missing Fastfile';
+      case BuildStatus.INSTALLING_XCODE:
+        return 'Installing XCode';
+      case BuildStatus.INTERNAL_ISSUE:
+        return 'Internal CI Issue';
+      case BuildStatus.PENDING:
+        return 'Pending';
+      default:
+        throw new Error(`Unknown status type ${this.status}`);
+    }
+  }
 }

web/app/common/components/status-icon/status-icon.module.ts

@@ -0,0 +1,21 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatIconModule, MatTooltipModule} from '@angular/material';
+
+import {StatusIconComponent} from './status-icon.component';
+
+@NgModule({
+  declarations: [StatusIconComponent],
+  imports: [
+    /** Angular Library Imports */
+    CommonModule,
+    /** Internal Imports */
+    /** Angular Material Imports */
+    MatIconModule, MatTooltipModule,
+    /** Third-Party Module Imports */
+  ],
+  exports: [StatusIconComponent]
+})
+
+export class StatusIconModule {
+}

web/app/dashboard/dashboard.component.spec.ts

@@ -9,7 +9,7 @@ import {MomentModule} from 'ngx-moment';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {BuildStatus} from '../common/constants';
 import {mockProjectSummary, mockProjectSummaryList} from '../common/test_helpers/mock_project_data';
 import {ProjectSummary} from '../models/project_summary';
@@ -46,7 +46,7 @@ describe('DashboardComponent', () => {
         .configureTestingModule({
           imports: [
             SharedMaterialModule,
-            CommonComponentsModule,
+            StatusIconModule,
             MomentModule,
             RouterModule,
             RouterTestingModule,

web/app/dashboard/dashboard.module.ts

@@ -5,11 +5,12 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
 import {MomentModule} from 'ngx-moment';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {DashboardComponent} from '../dashboard/dashboard.component';
 import {ProjectComponent} from '../project/project.component';
 import {SharedMaterialModule} from '../root/shared_material.module';
 import {DataService} from '../services/data.service';
+
 import {AddProjectDialogComponent} from './add-project-dialog/add-project-dialog.component';
 import {AddProjectDialogModule} from './add-project-dialog/add-project-dialog.modules';
 
@@ -26,7 +27,7 @@ import {AddProjectDialogModule} from './add-project-dialog/add-project-dialog.mo
     CommonModule,  // For ngIf and other common directives
     BrowserAnimationsModule,
     /** Internal Imports */
-    CommonComponentsModule, AddProjectDialogModule,
+    StatusIconModule, AddProjectDialogModule,
     /** Angular Material Imports */
     SharedMaterialModule, MatDialogModule,
     /** Third-Party Module Imports */

web/app/project/project.component.spec.ts

@@ -11,7 +11,7 @@ import {MomentModule} from 'ngx-moment';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {ToolbarModule} from '../common/components/toolbar/toolbar.module';
 import {DummyComponent} from '../common/test_helpers/dummy.component';
 import {mockBuildSummary_success} from '../common/test_helpers/mock_build_data';
@@ -43,7 +43,7 @@ describe('ProjectComponent', () => {
     TestBed
         .configureTestingModule({
           imports: [
-            CommonComponentsModule, MomentModule, ToolbarModule, MatCardModule,
+            StatusIconModule, MomentModule, ToolbarModule, MatCardModule,
             MatTableModule, MatProgressSpinnerModule,
             RouterTestingModule.withRoutes([
               {

web/app/project/project.module.ts

@@ -4,7 +4,7 @@ import {MatButtonModule, MatCardModule, MatIconModule, MatProgressSpinnerModule,
 import {RouterModule} from '@angular/router';
 import {MomentModule} from 'ngx-moment';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
+import {StatusIconModule} from '../common/components/status-icon/status-icon.module';
 import {ToolbarModule} from '../common/components/toolbar/toolbar.module';
 import {DashboardComponent} from '../dashboard/dashboard.component';
 import {ProjectComponent} from '../project/project.component';
@@ -22,7 +22,7 @@ import {DataService} from '../services/data.service';
     RouterModule,  // For routerLink directive
     CommonModule,
     /** Internal Imports */
-    CommonComponentsModule, ToolbarModule,
+    StatusIconModule, ToolbarModule,
     /** Angular Material Imports */
     MatCardModule, MatProgressSpinnerModule, MatTableModule, MatIconModule,
     MatButtonModule,

web/app/root/root.module.ts

@@ -3,7 +3,6 @@ import {APP_INITIALIZER, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {MomentModule} from 'ngx-moment';
 
-import {CommonComponentsModule} from '../common/components/common-components.module';
 import {AuthInterceptor} from '../services/auth.interceptor';
 import {DataService} from '../services/data.service';
 
@@ -25,7 +24,6 @@ export function initializationProviderFactory(
     BrowserModule,
     HttpClientModule,
     RoutingModule,
-    CommonComponentsModule,
     /** Angular Material Imports */
     SharedMaterialModule,
     /** Third-Party Module Imports */