Update UI package to latest version

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/project/repository/repository-gridview.component.spec.ts

-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from "rxjs";
 import { RepositoryService as NewRepositoryService } from "../../../../ng-swagger-gen/services/repository.service";
@@ -105,7 +103,7 @@ describe('RepositoryComponentGridview (inline template)', () => {
       }
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,
@@ -143,7 +141,7 @@ describe('RepositoryComponentGridview (inline template)', () => {
     jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
   });
 
-  it('should create', async(() => {
+  it('should create', waitForAsync(() => {
     expect(compRepo).toBeTruthy();
   }));
 });

src/portal/src/app/project/repository/repository-gridview.component.ts

@@ -85,10 +85,10 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit, OnDestroy
   totalCount = 0;
   currentState: ClrDatagridStateInterface;
 
-  @ViewChild("confirmationDialog", {static: false})
+  @ViewChild("confirmationDialog")
   confirmationDialog: ConfirmationDialogComponent;
 
-  @ViewChild("gridView", {static: false}) gridView: GridViewComponent;
+  @ViewChild("gridView") gridView: GridViewComponent;
   hasCreateRepositoryPermission: boolean;
   hasDeleteRepositoryPermission: boolean;
   @ViewChild(FilterComponent, {static: true})

src/portal/src/app/project/repository/vulnerability-scanning/histogram-chart/histogram-chart.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HistogramChartComponent } from './histogram-chart.component';
 import { TranslateModule } from "@ngx-translate/core";
 
@@ -6,7 +6,7 @@ import { TranslateModule } from "@ngx-translate/core";
 describe('HistogramChartComponent', () => {
   let component: HistogramChartComponent;
   let fixture: ComponentFixture<HistogramChartComponent>;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
           TranslateModule.forRoot()

src/portal/src/app/project/repository/vulnerability-scanning/histogram-chart/histogram-chart.component.ts

@@ -30,7 +30,7 @@ export class HistogramChartComponent implements OnInit, AfterViewInit, DoCheck {
   max: number;
   scale: number;
   hasViewInit: boolean = false;
-  @ViewChild('barChart', { static: false }) barChart: ElementRef;
+  @ViewChild('barChart') barChart: ElementRef;
   public context: CanvasRenderingContext2D;
   constructor(private translate: TranslateService) { }
 

src/portal/src/app/project/repository/vulnerability-scanning/result-bar-chart.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResultBarChartComponent } from './result-bar-chart.component';
 import { ResultTipComponent } from './result-tip.component';
 import { ResultTipHistogramComponent } from "./result-tip-histogram/result-tip-histogram.component";
@@ -38,7 +38,7 @@ describe('ResultBarChartComponent (inline template)', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule

src/portal/src/app/project/repository/vulnerability-scanning/result-grid.component.html

@@ -57,8 +57,8 @@
             </clr-dg-row>
 
             <clr-dg-footer>
-                <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}}</span> {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}}
-                <clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults.length"></clr-dg-pagination>
+                <span *ngIf="scanningResults?.length">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}}</span> {{scanningResults?.length}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}}
+                <clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults?.length"></clr-dg-pagination>
             </clr-dg-footer>
         </clr-datagrid>
     </div>

src/portal/src/app/project/repository/vulnerability-scanning/result-grid.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { ResultGridComponent } from './result-grid.component';
 import { of } from "rxjs";
@@ -26,7 +26,7 @@ describe('ResultGridComponent (inline template)', () => {
     vulnerabilityScanningBaseEndpoint: CURRENT_BASE_HREF + "/vulnerability/testing"
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,
@@ -98,7 +98,7 @@ describe('ResultGridComponent (inline template)', () => {
     expect(spy.calls.any()).toBe(true, 'getScanningResults called');
   });
 
-  it('should get data from ScanningResultService', async(() => {
+  it('should get data from ScanningResultService', waitForAsync(() => {
     fixture.detectChanges();
 
     fixture.whenStable().then(() => { // wait for async getRecentLogs
@@ -108,7 +108,7 @@ describe('ResultGridComponent (inline template)', () => {
     });
   }));
 
-  it('should render data to view', async(() => {
+  it('should render data to view', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();

src/portal/src/app/project/repository/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResultTipHistogramComponent } from './result-tip-histogram.component';
 import { ClarityModule } from "@clr/angular";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
@@ -8,7 +8,7 @@ import { HistogramChartComponent } from "../histogram-chart/histogram-chart.comp
 describe('ResultTipHistogramComponent', () => {
   let component: ResultTipHistogramComponent;
   let fixture: ComponentFixture<ResultTipHistogramComponent>;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         BrowserAnimationsModule,

src/portal/src/app/project/repository/vulnerability-scanning/result-tip.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ResultTipComponent } from './result-tip.component';
 import { IServiceConfig, SERVICE_CONFIG } from "../../../../lib/entities/service.config";
 import { UserPermissionDefaultService, UserPermissionService, VulnerabilitySummary } from "../../../../lib/services";
@@ -26,7 +26,7 @@ describe('ResultTipComponent (inline template)', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule
@@ -50,7 +50,7 @@ describe('ResultTipComponent (inline template)', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should reader the bar with different width', async(() => {
+  it('should reader the bar with different width', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();

src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from '@clr/angular';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AddRobotComponent } from './add-robot.component';
@@ -33,7 +33,7 @@ describe('AddRobotComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AddRobotComponent],
       schemas: [

src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts

@@ -50,7 +50,7 @@ export class AddRobotComponent implements OnInit, OnDestroy {
   @Input() projectName: string;
   @Output() create = new EventEmitter<boolean>();
   @ViewChild("robotForm", {static: true}) currentForm: NgForm;
-  @ViewChild("copyAlert", {static: false}) copyAlert: InlineAlertComponent;
+  @ViewChild("copyAlert") copyAlert: InlineAlertComponent;
   private _expiresDate: Date;
   isNeverExpired: boolean = false;
   expiresDatePlaceholder: string = ' ';

src/portal/src/app/project/robot-account/robot-account.component.html

@@ -57,11 +57,11 @@
         <clr-dg-cell>{{r.expires_at === -1?("ROBOT_ACCOUNT.NEVER_EXPIRED" | translate):(r.expires_at * 1000 | date: 'short')}}</clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
-        <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}}
+        <span *ngIf="robots?.length">{{pagination.firstItem + 1}}
           -
           {{pagination.lastItem +1 }} {{'ROBOT_ACCOUNT.OF' |
           translate}} </span>
-        {{pagination.totalItems }} {{'ROBOT_ACCOUNT.ITEMS' | translate}}
+        {{robots?.length}} {{'ROBOT_ACCOUNT.ITEMS' | translate}}
         <clr-dg-pagination #pagination [clrDgPageSize]="15"></clr-dg-pagination>
       </clr-dg-footer>
     </clr-datagrid>

src/portal/src/app/project/robot-account/robot-account.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ClarityModule } from '@clr/angular';
 import { of } from 'rxjs';
@@ -30,7 +30,7 @@ describe('RobotAccountComponent', () => {
     error: function () { }
   };
   let mockMessageHandlerService = null;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/robot-account/robot-account.component.ts

@@ -33,7 +33,7 @@ import { errorHandler as errorHandlerFn } from "../../../lib/utils/shared/shared
   styleUrls: ["./robot-account.component.scss"]
 })
 export class RobotAccountComponent implements OnInit, OnDestroy {
-  @ViewChild(AddRobotComponent, {static: false})
+  @ViewChild(AddRobotComponent)
   addRobotComponent: AddRobotComponent;
   selectedRow: Robot[] = [];
   robotsCopy: Robot[] = [];

src/portal/src/app/project/scanner/scanner.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ClarityModule } from "@clr/angular";
 import { of } from "rxjs";
@@ -53,7 +53,7 @@ describe('ScannerComponent', () => {
       }
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,

src/portal/src/app/project/scanner/scanner.component.ts

@@ -39,7 +39,7 @@ export class ScannerComponent implements OnInit {
     saveBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
     onSaving: boolean = false;
     hasCreatePermission: boolean = false;
-    @ViewChild(InlineAlertComponent, { static: false }) inlineAlert: InlineAlertComponent;
+    @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
     constructor( private configScannerService: ConfigScannerService,
                  private msgHandler: MessageHandlerService,
                  private errorHandler: ErrorHandler,

src/portal/src/app/project/summary/summary.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from '@clr/angular';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -67,7 +67,7 @@ describe('SummaryComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SummaryComponent],
       imports: [

src/portal/src/app/project/tag-feature-integration/immutable-tag/add-rule/add-rule.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from '@clr/angular';
 import { FormsModule } from '@angular/forms';
 import { AddRuleComponent } from './add-rule.component';
@@ -40,8 +40,8 @@ describe('AddRuleComponent', () => {
   };
   const mockErrorHandler = {
     handleErrorPopupUnauthorized: () => {}
-  }
-  beforeEach(async(() => {
+  };
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AddRuleComponent, InlineAlertComponent],
       schemas: [
@@ -83,7 +83,7 @@ describe('AddRuleComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-  it("should rightly display default repositories and tag", async(() => {
+  it("should rightly display default repositories and tag", waitForAsync(() => {
     fixture.detectChanges();
 
     fixture.whenStable().then(() => {
@@ -97,7 +97,7 @@ describe('AddRuleComponent', () => {
       expect(elTag.value.trim()).toEqual("**");
     });
   }));
-  it("should rightly close", async(() => {
+  it("should rightly close", waitForAsync(() => {
     fixture.detectChanges();
     let elRep: HTMLButtonElement = fixture.nativeElement.querySelector("#close-btn");
     elRep.dispatchEvent(new Event('click'));
@@ -107,7 +107,7 @@ describe('AddRuleComponent', () => {
         expect(component.addRuleOpened).toEqual(false);
     });
   }));
-  it("should be validating repeat rule ", async(() => {
+  it("should be validating repeat rule ", waitForAsync(() => {
     fixture.detectChanges();
     component.rules = [mockRule];
     const elRep: HTMLButtonElement = fixture.nativeElement.querySelector("#add-edit-btn");

src/portal/src/app/project/tag-feature-integration/immutable-tag/add-rule/add-rule.component.ts

@@ -27,7 +27,7 @@ export class AddRuleComponent implements OnInit, OnDestroy {
     isAdd: boolean = true;
     editRuleOrigin: ImmutableRetentionRule;
     onGoing: boolean = false;
-    @ViewChild(InlineAlertComponent, { static: false }) inlineAlert: InlineAlertComponent;
+    @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
     constructor(private immutableTagService: ImmutableTagService) {
 
     }

src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
 
 import { ImmutableTagComponent } from './immutable-tag.component';
@@ -204,7 +204,7 @@ describe('ImmutableTagComponent', () => {
     cloneRuleNoId.id = null;
     let cloneDisableRule = clone(mockRules[0]);
     cloneDisableRule.disabled = true;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ImmutableTagComponent, AddRuleComponent, InlineAlertComponent],
       schemas: [
@@ -294,7 +294,7 @@ describe('ImmutableTagComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it("should show some rules in page", async(() => {
+  it("should show some rules in page", waitForAsync(() => {
     fixture.detectChanges();
 
     fixture.whenStable().then(() => {
@@ -305,7 +305,7 @@ describe('ImmutableTagComponent', () => {
       expect(elRep.length).toEqual(4);
     });
   }));
-  it("should show error in list rule", async(() => {
+  it("should show error in list rule", waitForAsync(() => {
     fixture.detectChanges();
     component.projectId = 0;
     component.getRules();
@@ -314,7 +314,7 @@ describe('ImmutableTagComponent', () => {
       component.projectId = 1;
     });
   }));
-  it("should  toggle disable and enable", async(() => {
+  it("should  toggle disable and enable", waitForAsync(() => {
     fixture.detectChanges();
     let elRep: HTMLButtonElement = fixture.nativeElement.querySelector("#action0");
     elRep.dispatchEvent(new Event('click'));
@@ -331,7 +331,7 @@ describe('ImmutableTagComponent', () => {
       expect(elRepDisableIcon).toBeTruthy();
     });
   }));
-  it("should be deleted", async(() => {
+  it("should be deleted", waitForAsync(() => {
     fixture.detectChanges();
     let elRep: HTMLButtonElement = fixture.nativeElement.querySelector("#action0");
     elRep.dispatchEvent(new Event('click'));
@@ -350,7 +350,7 @@ describe('ImmutableTagComponent', () => {
     });
   }));
 
-  it("should be add rule", async(() => {
+  it("should be add rule", waitForAsync(() => {
     fixture.detectChanges();
     component.clickAdd(cloneRuleNoId);
     mockRules.push(cloneRuleNoId);
@@ -362,7 +362,7 @@ describe('ImmutableTagComponent', () => {
     });
 
   }));
-  it("should be add rule error", async(() => {
+  it("should be add rule error", waitForAsync(() => {
     fixture.detectChanges();
     component.projectId = 0;
     component.clickAdd(cloneRuleNoId);
@@ -376,7 +376,7 @@ describe('ImmutableTagComponent', () => {
     });
 
   }));
-  it("should be edit rule ", async(() => {
+  it("should be edit rule ", waitForAsync(() => {
     fixture.detectChanges();
     component.clickAdd(cloneRule);
     mockRules[0].tag_selectors[0].pattern = 'rep';
@@ -388,7 +388,7 @@ describe('ImmutableTagComponent', () => {
     });
 
   }));
-  it("should be edit rule with no add", async(() => {
+  it("should be edit rule with no add", waitForAsync(() => {
     fixture.detectChanges();
     component.addRuleComponent.isAdd = false;
     component.clickAdd(cloneRule);