Merge pull request #1982 from habitat-sh/angular_upgrade

Angular upgrade

Author: mwrock

components/builder-web/app/actions/gitHub.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'whatwg-fetch';
 import { GitHubApiClient } from '../client/github-api';
 import { Browser } from '../browser';
 

components/builder-web/app/actions/oauth.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'whatwg-fetch';
 import config from '../config';
 import {
   setCurrentUsername,

components/builder-web/app/app.component.html

@@ -32,7 +32,7 @@ <h5>
           </h5>
         </div>
       </ng-container>
-      <router-outlet *ngIf="!isSigningIn"></router-outlet>
+      <router-outlet></router-outlet>
       <footer>
         <div class="pull-left">
           <p>

components/builder-web/app/app.component.ts

@@ -15,8 +15,7 @@
 import config from './config';
 import { Subscription } from 'rxjs';
 import { AppStore } from './app.store';
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { URLSearchParams } from '@angular/http';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from '@angular/router';
 import {
   identifyUser, loadFeatures, removeNotification, exchangeOAuthCode,
@@ -26,8 +25,9 @@ import {
 const md5 = require('blueimp-md5');
 
 @Component({
+  standalone: false,
   selector: 'hab-app',
-  template: require('./app.component.html')
+  templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit, OnDestroy {
   removeNotification: Function;
@@ -37,7 +37,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private sub: Subscription;
 
-  constructor(private route: ActivatedRoute, private router: Router, private store: AppStore) {
+  constructor(private route: ActivatedRoute, private router: Router, private store: AppStore, private cdr: ChangeDetectorRef) {
     store.dispatch(loadFeatures());
     store.dispatch(loadOAuthProvider());
 
@@ -70,6 +70,7 @@ export class AppComponent implements OnInit, OnDestroy {
       if (requestedRoute) {
         router.navigate(requestedRoute);
       }
+      this.cdr.detectChanges();
     });
 
     this.removeNotification = function (i) {

components/builder-web/app/app.module.ts

@@ -13,11 +13,17 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
-import { MatButtonModule, MatIconModule, MatRadioModule, MatTabsModule, MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
+import { RouterOutlet } from '@angular/router';
 import { routing } from './routes';
 import { AppStore } from './app.store';
 import { AppComponent } from './app.component';
@@ -34,23 +40,26 @@ import { SearchModule } from './search/search.module';
 import { EventsModule } from './events/events.module';
 import { SharedModule } from './shared/shared.module';
 
+
 @NgModule({
   imports: [
     MatIconModule,
     MatRadioModule,
     MatTabsModule,
+    MatDialogModule,
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,
     MatButtonModule,
     OriginModule,
     PackageModule,
     ProfileModule,
     ReactiveFormsModule,
-    RouterModule,
     SearchModule,
     EventsModule,
     SharedModule,
+    RouterOutlet,
     routing
   ],
   declarations: [
@@ -63,9 +72,10 @@ import { SharedModule } from './shared/shared.module';
   ],
   providers: [
     { provide: LocationStrategy, useClass: HashLocationStrategy, },
-    { provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: { float: 'always' } },
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } },
     AppStore
   ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
+

components/builder-web/app/app.scss

@@ -108,20 +108,37 @@ nav {
   &.tabs {
     background-color: $light-blue;
 
-    .mat-tab-links {
+    .mat-mdc-tab-links {
       display: flex;
     }
 
-    .mat-tab-link {
+    .mat-mdc-tab-link {
       color: $black;
       text-transform: uppercase;
+      font-family: $heading-font-family;
       font-size: 0.75rem;
       opacity: 1;
       min-width: inherit;
+      flex-grow: 0 !important;
+      height: 48px;
 
       @include tablet-up {
         min-width: 100px;
       }
+
+      // MDC tab text label
+      .mdc-tab__text-label {
+        color: $black;
+      }
+
+      &.mdc-tab--active .mdc-tab__text-label {
+        color: $black;
+      }
+
+      // Remove MDC indicator bottom border color override
+      .mdc-tab-indicator .mdc-tab-indicator__content--underline {
+        border-color: $dark-blue;
+      }
     }
   }
 }

components/builder-web/app/app.store.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone, Optional } from '@angular/core';
 import { applyMiddleware, compose, createStore, Store } from 'redux';
 import rootReducer from './reducers/index';
 import thunk from 'redux-thunk';
@@ -24,12 +24,7 @@ import { get, isEqual } from 'lodash';
 const composeEnhancers = window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] || compose;
 
 const finalCreateStore = composeEnhancers(
-  // The thunk middleware allows an action to return a function that takes a
-  // dispatch argument instead of returning an object directly. This allows
-  // actions to make async calls.
   applyMiddleware(thunk),
-
-  // Allows resetting of the store
   reduxReset()
 )(createStore);
 
@@ -43,10 +38,12 @@ export class AppStore {
 
   private storeSource$: BehaviorSubject<any>;
 
-  constructor() {
+  constructor(@Optional() private zone?: NgZone) {
     this.storeSource$ = new BehaviorSubject(this.store.getState());
     this.store$ = this.storeSource$.asObservable().pipe(distinctUntilChanged(isEqual));
-    this.store.subscribe(() => this.storeSource$.next(this.store.getState()));
+    this.store.subscribe(() => {
+      this.storeSource$.next(this.store.getState());
+    });
   }
 
   getState(): any {
@@ -65,6 +62,9 @@ export class AppStore {
   }
 
   subscribe(listener: Function) {
-    return this.store.subscribe(() => listener(this.getState()));
+    return this.store.subscribe(() => {
+      const run = () => listener(this.getState());
+      this.zone ? this.zone.run(run) : run();
+    });
   }
 }

components/builder-web/app/client/builder-api.spec.ts

@@ -24,9 +24,9 @@ describe('BuilderApiClient', () => {
       beforeEach(() => {
         myObj = { myCallback: () => { } };
         spyOn(myObj, 'myCallback');
-        spyOn(window, 'fetch').and.callFake(() => {
+        spyOn(window, 'fetch').and.callFake((() => {
           return Promise.resolve({ ok: true });
-        });
+        }) as any);
       });
 
       it('resolves true', (done) => {
@@ -46,9 +46,9 @@ describe('BuilderApiClient', () => {
       beforeEach(() => {
         myObj = { myCallback: () => { } };
         spyOn(myObj, 'myCallback');
-        spyOn(window, 'fetch').and.callFake(() => {
+        spyOn(window, 'fetch').and.callFake((() => {
           return Promise.resolve({ ok: false });
-        });
+        }) as any);
       });
 
       it('resolves with an instance of Error', (done) => {

components/builder-web/app/client/builder-api.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'whatwg-fetch';
 import config from '../config';
 import { parseKey } from '../util';
 import { AppStore } from '../app.store';
@@ -203,7 +202,7 @@ export class BuilderApiClient {
   }
 
   public generateOriginKeys(origin: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/origins/${origin}/keys`, {
         method: 'POST',
         headers: this.headers
@@ -364,7 +363,7 @@ export class BuilderApiClient {
   }
 
   public cancelJobGroup(id: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/jobs/group/${id}/cancel`, {
         method: 'POST',
         headers: this.headers
@@ -575,7 +574,7 @@ export class BuilderApiClient {
   }
 
   public saveProfile(profile: any) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/profile`, {
         headers: this.jsonHeaders,
         method: 'PATCH',
@@ -725,7 +724,7 @@ export class BuilderApiClient {
   }
 
   public setIntegration(originName: string, credentials, type: string, name: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/origins/${originName}/integrations/${type}/${name}`, {
         headers: this.jsonHeaders,
         method: 'PUT',
@@ -762,7 +761,7 @@ export class BuilderApiClient {
   }
 
   public setProjectIntegrationSettings(origin: string, name: string, integration: string, settings: any) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/projects/${origin}/${name}/integrations/${integration}/default`, {
         headers: this.jsonHeaders,
         method: 'PUT',
@@ -782,7 +781,7 @@ export class BuilderApiClient {
   }
 
   public deleteProjectIntegration(origin: string, name: string, integration: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/projects/${origin}/${name}/integrations/${integration}/default`, {
         headers: this.headers,
         method: 'DELETE'
@@ -801,7 +800,7 @@ export class BuilderApiClient {
   }
 
   public setProjectVisibility(origin: string, name: string, setting: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/projects/${origin}/${name}/${setting}`, {
         headers: this.headers,
         method: 'PATCH'
@@ -820,7 +819,7 @@ export class BuilderApiClient {
   }
 
   public setPackageReleaseVisibility(origin: string, name: string, version: string, release: string, setting: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/pkgs/${origin}/${name}/${version}/${release}/${setting}`, {
         headers: this.headers,
         method: 'PATCH'
@@ -839,7 +838,7 @@ export class BuilderApiClient {
   }
 
   public deleteIntegration(origin: string, name: string, type: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/origins/${origin}/integrations/${type}/${name}`, {
         headers: this.headers,
         method: 'DELETE',
@@ -857,7 +856,7 @@ export class BuilderApiClient {
   }
 
   public updateOrigin(origin: any) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/origins/${origin.name}`, {
         headers: this.jsonHeaders,
         method: 'PUT',
@@ -876,7 +875,7 @@ export class BuilderApiClient {
   }
 
   public deleteOriginSecret(origin: string, key: string) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/depot/origins/${origin}/secret/${key}`, {
         headers: this.headers,
         method: 'DELETE'
@@ -916,7 +915,7 @@ export class BuilderApiClient {
       creds['url'] = url.trim();
     }
 
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       fetch(`${this.urlPrefix}/ext/integrations/${type}/credentials/validate`, {
         headers: this.jsonHeaders,
         method: 'POST',

components/builder-web/app/client/depot-api.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'whatwg-fetch';
 import { packageString } from '../util';
 import { AppStore } from '../app.store';
 import { addNotification, signOut } from '../actions/index';