Update Angular Material and CLI (#362)

* Update Angular Material and CLI

Updating to the latest version of CLI which fixes AOT build failures
Updating Material to the latest version which removes MaterialModule (requiring individual modules to be manually imported) and also switches to the "Mat" prefix since "Md" is now deprecated.

* Fix migration to mat prefixes on input and tabs

* Fix missing mat component imports

dev_env/ui/Dockerfile

@@ -6,7 +6,7 @@ RUN install_packages apt-transport-https && \
   echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list && \
   install_packages yarn
 
-RUN yarn global add @angular/cli@1.2.1 && ng set --global packageManager=yarn
+RUN yarn global add @angular/cli@1.4.3 && ng set --global packageManager=yarn
 
 COPY rootfs /
 

src/ui/package.json

@@ -24,13 +24,13 @@
   },
   "dependencies": {
     "@angular/animations": "^4.0.0",
-    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/cdk": "^2.0.0-beta.11",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
-    "@angular/material": "^2.0.0-beta.8",
+    "@angular/material": "^2.0.0-beta.11",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
@@ -47,7 +47,7 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.2.1",
+    "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
     "@types/jasmine": "~2.5.53",

src/ui/src/app/app.module.ts

@@ -15,7 +15,7 @@ import { CookieModule } from 'ngx-cookie';
 import { routing, appRoutingProviders } from './app.routing';
 
 /* Material library */
-import { MaterialModule } from '@angular/material';
+import { MATERIAL_COMPATIBILITY_MODE, MatIconModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatDialogModule, MatDialog, MatSnackBarModule, MatTabsModule, MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material';
 
 /* Pipes */
 import { TruncatePipe } from './shared/pipes/truncate.pipe';
@@ -106,7 +106,15 @@ export function metaFactory(): MetaLoader {
     ListFiltersComponent,
   ],
   imports: [
-    MaterialModule,
+    MatIconModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTabsModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
     NoopAnimationsModule,
     BrowserModule,
     FormsModule,
@@ -121,6 +129,8 @@ export function metaFactory(): MetaLoader {
     CookieModule.forRoot()
   ],
   providers: [
+    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
+    MatDialog,
     appRoutingProviders,
     ChartsService,
     DeploymentsService,

src/ui/src/app/chart-details/chart-details-usage/chart-details-usage.component.html

@@ -1,37 +1,41 @@
 <app-panel class="chart-details-usage" [border]=true>
   <h1>Install</h1>
-  <md-tab-group>
-      <md-tab *ngIf="config.releasesEnabled" label="One Click installation">
-        <button color="primary" md-raised-button
-         (click)="installDeployment(chart.id, currentVersion)"
-         *ngIf="!installing">
-          Install {{ chart.attributes.name }} v{{ currentVersion }}
+  <mat-tab-group>
+    <mat-tab *ngIf="config.releasesEnabled" label="One Click installation">
+      <button color="primary" mat-raised-button
+       (click)="installDeployment(chart.id, currentVersion)"
+       *ngIf="!installing">
+        Install {{ chart.attributes.name }} v{{ currentVersion }}
+      </button>
+      <p *ngIf="installing"><mat-progress-bar mode="indeterminate"></mat-progress-bar></p>
+    </mat-tab>
+    <mat-tab label="Helm CLI">
+      <div *ngIf=!showRepoInstructions class="chart-details-usage__repository">
+        <h2 class="chart-details-usage__label">Add {{ chart.attributes.repo.name }} repository</h2>
+        <mat-form-field>
+          <input matInput floatingPlaceholder=false [value]=repoAddInstructions>
+        </mat-form-field>
+        <button mat-button ngxClipboard [cbContent]="repoAddInstructions" (cbOnSuccess)="showSnackBar()"
+          angulartics2On="click" angularticsEvent="RepositoryCopy" angularticsCategory="{{ chart.id }}"
+          [angularticsProperties]="{ label: currentVersion }">
+          <mat-icon svgIcon="content-copy"></mat-icon>
         </button>
-        <p *ngIf="installing"><md-progress-bar mode="indeterminate"></md-progress-bar></p>
-      </md-tab>
-      <md-tab label="Helm CLI">
-        <div *ngIf=showRepoInstructions class="chart-details-usage__repository">
-          <h2 class="chart-details-usage__label">Add {{ chart.attributes.repo.name }} repository</h2>
-          <input mdInput floatingPlaceholder=false [value]=repoAddInstructions>
-          <button md-button ngxClipboard [cbContent]="repoAddInstructions" (cbOnSuccess)="showSnackBar()"
-            angulartics2On="click" angularticsEvent="RepositoryCopy" angularticsCategory="{{ chart.id }}"
-            [angularticsProperties]="{ label: currentVersion }">
-            <md-icon svgIcon="content-copy"></md-icon>
-          </button>
-        </div>
-        <div>
-          <h2 class="chart-details-usage__label">Install chart</h2>
-          <input mdInput readonly floatingPlaceholder=false [value]=installInstructions>
-          <button md-button ngxClipboard [cbContent]="installInstructions" (cbOnSuccess)="showSnackBar()"
-            angulartics2On="click" angularticsEvent="ChartInstallationCopy"
-            angularticsCategory="{{ chart.id }}" [angularticsProperties]="{ label: currentVersion }">
-            <md-icon svgIcon="content-copy"></md-icon>
-          </button>
-        </div>
-        <p class="help-link">
-          <a href="https://github.com/kubernetes/helm/blob/master/docs/quickstart.md"
-           target="_blank" title="How to install Helm">Need Helm?</a>
-        </p>
-      </md-tab>
-    </md-tab-group>
+      </div>
+      <div>
+        <h2 class="chart-details-usage__label">Install chart</h2>
+        <mat-form-field>
+          <input matInput readonly floatingPlaceholder=false [value]=installInstructions>
+        </mat-form-field>
+        <button mat-button ngxClipboard [cbContent]="installInstructions" (cbOnSuccess)="showSnackBar()"
+          angulartics2On="click" angularticsEvent="ChartInstallationCopy"
+          angularticsCategory="{{ chart.id }}" [angularticsProperties]="{ label: currentVersion }">
+          <mat-icon svgIcon="content-copy"></mat-icon>
+        </button>
+      </div>
+      <p class="help-link">
+        <a href="https://github.com/kubernetes/helm/blob/master/docs/quickstart.md"
+         target="_blank" title="How to install Helm">Need Helm?</a>
+      </p>
+    </mat-tab>
+  </mat-tab-group>
 </app-panel>

src/ui/src/app/chart-details/chart-details-usage/chart-details-usage.component.scss

@@ -1,7 +1,7 @@
 // Import your custom theme
 @import '../../../theme.scss';
 
-md-tab-body {
+mat-tab-body {
   margin-top: 1em;
 }
 .chart-details-usage {
@@ -29,10 +29,10 @@ md-tab-body {
     }
   }
 
-  .md-tab-label {
+  .mat-tab-label {
     min-width: auto !important;
   }
-  [md-button] {
+  [mat-button] {
     margin-left: 1em;
     min-width: auto;
     width: 4em;

src/ui/src/app/chart-details/chart-details-usage/chart-details-usage.component.spec.ts

@@ -2,7 +2,6 @@
 
 import { TestBed, async } from '@angular/core/testing';
 import { Router } from '@angular/router';
-import { MaterialModule } from '@angular/material';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ChartDetailsUsageComponent } from './chart-details-usage.component';
 import { ConfigService } from '../../shared/services/config.service';
@@ -12,7 +11,7 @@ import { DialogsService } from '../../shared/services/dialogs.service';
 describe('Component: ChartDetailsUsage', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [],
       declarations: [ChartDetailsUsageComponent],
       providers: [
         DialogsService,

src/ui/src/app/chart-details/chart-details-usage/chart-details-usage.component.ts

@@ -8,7 +8,7 @@ import {
 import { Chart } from '../../shared/models/chart';
 import { Deployment } from '../../shared/models/deployment';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MdIconRegistry, MdSnackBar, MdDialog, MdDialogRef } from '@angular/material';
+import { MatIconRegistry, MatSnackBar, MatDialog, MatDialogRef } from '@angular/material';
 import { ConfigService } from '../../shared/services/config.service';
 import { DeploymentsService } from '../../shared/services/deployments.service';
 import { DeploymentNewComponent } from '../../deployment-new/deployment-new.component';
@@ -18,7 +18,7 @@ import { Router } from '@angular/router';
   selector: 'app-chart-details-usage',
   templateUrl: './chart-details-usage.component.html',
   styleUrls: ['./chart-details-usage.component.scss'],
-  viewProviders: [MdIconRegistry],
+  viewProviders: [MatIconRegistry],
   encapsulation: ViewEncapsulation.None
 })
 export class ChartDetailsUsageComponent implements OnInit {
@@ -27,13 +27,13 @@ export class ChartDetailsUsageComponent implements OnInit {
   installing: boolean;
 
   constructor(
-    private mdIconRegistry: MdIconRegistry,
+    private mdIconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer,
     public config: ConfigService,
     private deploymentsService: DeploymentsService,
     private router: Router,
-    private dialog: MdDialog,
-    public snackBar: MdSnackBar
+    private dialog: MatDialog,
+    public snackBar: MatSnackBar
   ) {}
 
   ngOnInit() {
@@ -66,7 +66,7 @@ export class ChartDetailsUsageComponent implements OnInit {
   }
 
   installDeployment(chartID: string, version: string): void {
-    let dialogRef: MdDialogRef<DeploymentNewComponent>;
+    let dialogRef: MatDialogRef<DeploymentNewComponent>;
     dialogRef = this.dialog.open(DeploymentNewComponent);
     dialogRef.afterClosed()
       .subscribe(namespace => {

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

@@ -1,7 +1,6 @@
 /* tslint:disable:no-unused-variable */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MaterialModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -88,7 +87,6 @@ describe('ChartDetailsComponent', () => {
           BrowserModule,
           Angulartics2Module,
           RouterTestingModule,
-          MaterialModule,
           HttpModule
         ],
         declarations: [

src/ui/src/app/chart-index/chart-index.component.spec.ts

@@ -1,7 +1,6 @@
 /* tslint:disable:no-unused-variable */
 
 import { TestBed, async } from '@angular/core/testing';
-import { MaterialModule } from '@angular/material';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Router } from '@angular/router';
 import { ChartIndexComponent } from './chart-index.component';
@@ -19,7 +18,7 @@ import { MenuService } from '../shared/services/menu.service';
 describe('Component: ChartIndex', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [],
       declarations: [
         ChartIndexComponent,
         ChartListComponent,

src/ui/src/app/charts/charts.component.html

@@ -7,8 +7,8 @@
           <h1 class="charts__header__title">
             Charts
             <div class="charts__header__filters" (click)="filtersOpen = !filtersOpen">
-              <md-icon *ngIf="filtersOpen" svgIcon="close"></md-icon>
-              <md-icon *ngIf="!filtersOpen" svgIcon="menu"></md-icon>
+              <mat-icon *ngIf="filtersOpen" svgIcon="close"></mat-icon>
+              <mat-icon *ngIf="!filtersOpen" svgIcon="menu"></mat-icon>
               Filters
             </div>
           </h1>
@@ -19,7 +19,7 @@ <h1 class="charts__header__title">
         <app-list-filters [filters]="filters" [class.open]="filtersOpen"></app-list-filters>
         <div class="charts__gallery__content">
           <div class="charts__gallery__content__topbar">
-            <md-icon svgIcon="search"></md-icon>
+            <mat-icon svgIcon="search"></mat-icon>
             <input type="text" placeholder="Search charts..." value="{{searchTerm}}" (keyup)="searchChange($event)" />
           </div>
           <app-chart-list [charts]="orderedCharts"></app-chart-list>

src/ui/src/app/charts/charts.component.scss

@@ -16,7 +16,7 @@ $filters-width: 175px;
       display: none;
       font-size: 0.5em;
 
-      md-icon {
+      mat-icon {
         margin-left: 10px;
         top: 6px;
         position: relative;

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

@@ -1,7 +1,6 @@
 /* tslint:disable:no-unused-variable */
 
 import { TestBed, async } from '@angular/core/testing';
-import { MaterialModule } from '@angular/material';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ChartsComponent } from './charts.component';
 import { ChartListComponent } from '../chart-list/chart-list.component';
@@ -19,7 +18,7 @@ import { ConfigService } from '../shared/services/config.service';
 describe('Component: Charts', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [],
       declarations: [
         ChartsComponent,
         ChartListComponent,

src/ui/src/app/charts/charts.component.ts

@@ -6,14 +6,14 @@ import { Repo, RepoAttributes } from '../shared/models/repo';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { SeoService } from '../shared/services/seo.service';
 import { ConfigService } from '../shared/services/config.service';
-import { MdIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-charts',
   templateUrl: './charts.component.html',
   styleUrls: ['./charts.component.scss'],
-  viewProviders: [MdIconRegistry]
+  viewProviders: [MatIconRegistry]
 })
 export class ChartsComponent implements OnInit {
   charts: Chart[] = [];
@@ -54,7 +54,7 @@ export class ChartsComponent implements OnInit {
     private router: Router,
     private config: ConfigService,
     private seo: SeoService,
-    private mdIconRegistry: MdIconRegistry,
+    private mdIconRegistry: MatIconRegistry,
     private sanitizer: DomSanitizer
   ) {}
 

src/ui/src/app/confirm-dialog/confirm-dialog.component.html

@@ -2,9 +2,9 @@
   <h2 class="confirm-dialog__title">{{ title }}</h2>
   <p>{{ message }}</p>
   <div class="confirm-dialog__buttons">
-    <button type="button" md-button
+    <button type="button" mat-button
       (click)="dialogRef.close()">{{ cancel }}</button>
-    <button type="button" md-raised-button [color]="actionButtonClass"
+    <button type="button" mat-raised-button [color]="actionButtonClass"
       (click)="dialogRef.close(true)">{{ ok }}</button>
   </div>
 </div>

src/ui/src/app/confirm-dialog/confirm-dialog.component.ts

@@ -1,4 +1,4 @@
-import { MdDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material';
 import { Component } from '@angular/core';
 
 @Component({
@@ -14,7 +14,7 @@ export class ConfirmDialog {
     public cancel: string;
     public actionButtonClass: string;
 
-    constructor(public dialogRef: MdDialogRef<ConfirmDialog>) {
+    constructor(public dialogRef: MatDialogRef<ConfirmDialog>) {
 
     }
 }

src/ui/src/app/deployment-controls/deployment-controls.component.html

@@ -1,5 +1,5 @@
-<p *ngIf="deleting"><md-progress-bar mode="indeterminate"></md-progress-bar></p>
-<button *ngIf="!deleting" md-button [color]="'warn'"
-  (click)="deleteDeployment(deployment.id)" md-raised-button>
+<p *ngIf="deleting"><mat-progress-bar mode="indeterminate"></mat-progress-bar></p>
+<button *ngIf="!deleting" mat-button [color]="'warn'"
+  (click)="deleteDeployment(deployment.id)" mat-raised-button>
     Delete deployment
 </button>

src/ui/src/app/deployment-controls/deployment-controls.component.spec.ts

@@ -5,12 +5,11 @@ import { DeploymentControlsComponent } from './deployment-controls.component';
 import { DeploymentsService } from '../shared/services/deployments.service';
 import { DialogsService } from '../shared/services/dialogs.service';
 import { ConfigService } from '../shared/services/config.service';
-import { MaterialModule } from '@angular/material';
 
 describe('Component: DeploymentControls', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [],
       declarations: [DeploymentControlsComponent],
       providers: [
         { provide: DeploymentsService },

src/ui/src/app/deployment-controls/deployment-controls.component.ts

@@ -1,6 +1,6 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 import { DeploymentsService } from '../shared/services/deployments.service';
-import { MdSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material';
 import { DialogsService } from '../shared/services/dialogs.service';
 import { Deployment } from '../shared/models/deployment';
 
@@ -18,7 +18,7 @@ export class DeploymentControlsComponent {
   constructor(
     private deploymentsService: DeploymentsService,
     private dialogsService: DialogsService,
-    public snackBar: MdSnackBar
+    public snackBar: MatSnackBar
   ){ }
 
   deleteDeployment(deploymentName: string): void {