Upgrade helix-front to Angular 8.2 (#2089)

* ng update @angular/cli --from=5.2.11 --to=6 --migrate-only

* npm i -D rxjs-tslint, add rxjs specific linting rules, add lint:tslint alternative linting script

* npm install @angular/cdk@6.1.0

* npm install @angular/{animations,cdk,common,compiler,compiler-cli,core,forms,material,platform-browser,platform-browser-dynamic,platform-server,router}@6.1.0

* npm i ajv@6.9.1

* npm i codelyzer@6.0.1

* npm i ngx-clipboard@11.1.5

* npm i tsickle@0.32.1

* restore rxjs-compat@6.0.0-rc.0 to fix rxjs issue at npm run build

* register proxy.conf.json in ng serve builder in angular.json

* WIP state with new Reactive Form

* Revert "WIP state with new Reactive Form"

This reverts commit f9e2e37.

* upgrade to typescript@^3.2.4

* pin typescript at 3.2.4

* npm i tsickle@0.34.2

* npm i @swimlane/ngx-datatable@14.0.0

* npm i @swimlane/ngx-graph@6.0.0-rc.2

* manually upgrade to Angular 8.2.14 and associated major deps

* fix new TypeScript errors

* update bundle target to ES2015 since Angular 8 now automatically creates an ES5 compat build too

* @ViewChild {static: true}

* NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8 --force

* use @angular/core@8.2.3 and friends, fix bad upgrade script that jumped ahead to v9

* npm i typescript@3.5.3

* npm i zone.js@~0.9.1

* npm i tsickle@0.37.0

* npm i @angular/flex-layout@8.0.0-beta.27

* npm i @swimlane/ngx-datatable@16.0.0

* npm i @ngtools/webpack@9.0.0-next.7

* npm uninstall node-sass && npm i sass

* nvm use 10.9.0 && npm i

* manually update material imports, use deep imports

* npm i -D @angular-devkit/build-angular@0.803.29

* npm i ngx-clipboard@12.1.2

* npm i @swimlane/ngx-charts@13.0.4

* npm i @swimlane/ngx-graph@7.0.0

* npm i @swimlane/ngx-datatable@16.0.3

* npm i @swimlane/ngx-datatable@16.1.0

* update ngx-datatable style paths: no longer a release folder

* add trailing newline to tsconfig

* Upgrade helix-front to Angular 8.2 Fix #2088

    Fix security vulnerabilities in helix-front dependencies.
    Upgrade helix-front dependencies to improve contributor productivity.

helix-front/client/app/cluster/cluster.component.ts

@@ -8,7 +8,7 @@ import { MediaChange, MediaObserver } from '@angular/flex-layout';
 })
 export class ClusterComponent implements OnInit {
 
-  @ViewChild('sidenav') sidenav;
+  @ViewChild('sidenav', {static: true}) sidenav;
 
   isNarrowView: boolean;
 

helix-front/client/app/resource/partition-list/partition-list.component.ts

@@ -13,7 +13,7 @@ import { ResourceService } from '../shared/resource.service';
 })
 export class PartitionListComponent implements OnInit {
 
-  @ViewChild('partitionsTable')
+  @ViewChild('partitionsTable', {static: true})
   table: any;
 
   isLoading = true;

helix-front/client/app/resource/resource-list/resource-list.component.ts

@@ -19,7 +19,7 @@ import { HelperService } from '../../shared/helper.service';
 })
 export class ResourceListComponent implements OnInit {
 
-  @ViewChild('resourcesTable')
+  @ViewChild('resourcesTable', {static: true})
   table: any;
 
   isForInstance = false;

helix-front/client/app/shared/input-inline/input-inline.component.ts

@@ -8,7 +8,7 @@ import { ControlValueAccessor } from '@angular/forms';
 })
 export class InputInlineComponent implements ControlValueAccessor, OnInit {
 
-  @ViewChild('inputControl') inputControl: ElementRef;
+  @ViewChild('inputControl', {static: true}) inputControl: ElementRef;
 
   @Output('update') change: EventEmitter<string> = new EventEmitter<string>();
 

helix-front/client/app/shared/material.module.ts

@@ -2,24 +2,58 @@ import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   MatButtonModule,
+} from '@angular/material/button';
+import {
   MatButtonToggleModule,
+} from '@angular/material/button-toggle';
+import {
   MatCardModule,
+} from '@angular/material/card';
+import {
   MatCheckboxModule,
+} from '@angular/material/checkbox';
+import {
   MatToolbarModule,
+} from '@angular/material/toolbar';
+import {
   MatTooltipModule,
+} from '@angular/material/tooltip';
+import {
   MatDialogModule,
+} from '@angular/material/dialog';
+import {
   MatSnackBarModule,
+} from '@angular/material/snack-bar';
+import {
   MatSlideToggleModule,
+} from '@angular/material/slide-toggle';
+import {
   MatInputModule,
+} from '@angular/material/input';
+import {
   MatIconModule,
+} from '@angular/material/icon';
+import {
   MatProgressBarModule,
+} from '@angular/material/progress-bar';
+import {
   MatProgressSpinnerModule,
+} from '@angular/material/progress-spinner';
+import {
   MatSidenavModule,
+} from '@angular/material/sidenav';
+import {
   MatListModule,
+} from '@angular/material/list';
+import {
   MatMenuModule,
+} from '@angular/material/menu';
+import {
   MatTabsModule,
+} from '@angular/material/tabs';
+import {
   MatExpansionModule
-} from '@angular/material';
+} from '@angular/material/expansion';
 import 'hammerjs';
 
 @NgModule({
@@ -66,4 +100,4 @@ import 'hammerjs';
     MatExpansionModule
   ]
 })
-export class MaterialModule { }
+export class MaterialModule { }

helix-front/client/app/shared/node-viewer/node-viewer.component.ts

@@ -19,9 +19,9 @@ import { ConfirmDialogComponent } from '../dialog/confirm-dialog/confirm-dialog.
 })
 export class NodeViewerComponent implements OnInit {
 
-  @ViewChild('simpleTable') simpleTable;
-  @ViewChild('listTable') listTable;
-  @ViewChild('mapTable') mapTable;
+  @ViewChild('simpleTable', {static: true}) simpleTable;
+  @ViewChild('listTable', {static: true}) listTable;
+  @ViewChild('mapTable', {static: true}) mapTable;
 
   @Output('update')
   change: EventEmitter<Node> = new EventEmitter<Node>();

helix-front/client/app/workflow/job-list/job-list.component.ts

@@ -15,7 +15,7 @@ export class JobListComponent implements OnInit {
   @Input()
   jobs: Job[];
 
-  @ViewChild('jobsTable')
+  @ViewChild('jobsTable', {static: true})
   table: any;
 
   rowHeight = Settings.tableRowHeight;

helix-front/client/app/workflow/workflow-dag/workflow-dag.component.ts

@@ -22,7 +22,7 @@ export class WorkflowDagComponent implements OnInit, AfterViewInit {
   };
   jobNameToId = {};
 
-  @ViewChild('graph')
+  @ViewChild('graph', {static: true})
   graph;
 
   constructor(protected el:ElementRef) { }

helix-front/client/styles.scss

@@ -6,9 +6,9 @@
 @import '~vis/dist/vis-network.min.css';
 
 // ngx-datatable styles
-@import '~@swimlane/ngx-datatable/release/index.css';
-@import '~@swimlane/ngx-datatable/release/themes/material.css';
-@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+@import '~@swimlane/ngx-datatable/index.css';
+@import '~@swimlane/ngx-datatable/themes/material.css';
+@import '~@swimlane/ngx-datatable/assets/icons.css';
 // with overrides
 .ngx-datatable.material {
   &.single-selection,