Update UI package to latest version

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

src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.ts

@@ -36,7 +36,7 @@ export class ArtifactListPageComponent implements OnInit {
   isGuest: boolean;
   registryUrl: string;
 
-  @ViewChild(ArtifactListComponent, {static: false})
+  @ViewChild(ArtifactListComponent)
   repositoryComponent: ArtifactListComponent;
   depth: string;
   constructor(

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts

-import { ComponentFixture, TestBed, async } from "@angular/core/testing";
-import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ArtifactListTabComponent } from "./artifact-list-tab.component";
 import { of } from "rxjs";
 import { delay } from "rxjs/operators";
@@ -30,7 +30,6 @@ import { CopyInputComponent } from "../../../../../../lib/components/push-image/
 import { ErrorHandler } from "../../../../../../lib/utils/error-handler";
 import { ChannelService } from "../../../../../../lib/services/channel.service";
 import { OperationService } from "../../../../../../lib/components/operation/operation.service";
-import { By } from "@angular/platform-browser";
 import { ArtifactService as NewArtifactService } from "../../../../../../../ng-swagger-gen/services/artifact.service";
 import { AllPipesModule } from "../../../../../all-pipes/all-pipes.module";
 
@@ -295,7 +294,7 @@ describe("ArtifactListTabComponent (inline template)", () => {
       return undefined;
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,
@@ -359,17 +358,16 @@ describe("ArtifactListTabComponent (inline template)", () => {
     fixture.detectChanges();
   });
 
-  it("should load and render data", () => {
+  it("should load and render data", async () => {
     fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      fixture.detectChanges();
-      let de: DebugElement = fixture.debugElement.query(del => del.classes["datagrid-cell"]);
-      fixture.detectChanges();
-      expect(de).toBeTruthy();
-      let el: HTMLElement = de.nativeElement;
-      expect(el).toBeTruthy();
-      expect(el.textContent.trim()).toEqual("sha256:4875cda3");
-    });
+    await fixture.whenStable();
+    comp.artifactList = mockArtifacts;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    const el: HTMLAnchorElement = fixture.nativeElement.querySelector('a.max-width-100');
+    expect(el).toBeTruthy();
+    expect(el.textContent).toBeTruthy();
+    expect(el.textContent.trim()).toEqual("sha256:4875cda3");
   });
   it('should filter data by keyword', async () => {
     fixture.detectChanges();
@@ -379,11 +377,9 @@ describe("ArtifactListTabComponent (inline template)", () => {
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
-    let de: DebugElement = fixture.debugElement.query(del => del.classes["datagrid-cell"]);
-    expect(de).toBeTruthy();
-    let el: HTMLElement = de.nativeElement;
+    const el: HTMLAnchorElement = fixture.nativeElement.querySelector('a.max-width-100');
     expect(el).toBeTruthy();
-    filtereName = '';
+    expect(el.textContent).toBeTruthy();
     expect(el.textContent.trim()).toEqual('sha256:3e33e3e3');
   });
   it('should delete artifact', async () => {
@@ -395,11 +391,9 @@ describe("ArtifactListTabComponent (inline template)", () => {
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
-    let de: DebugElement = fixture.debugElement.query(del => del.classes["datagrid-cell"]);
-    expect(de).toBeTruthy();
-    let el: HTMLElement = de.nativeElement;
+    const el: HTMLAnchorElement = fixture.nativeElement.querySelector('a.max-width-100');
     expect(el).toBeTruthy();
-    filtereName = '';
+    expect(el.textContent).toBeTruthy();
     expect(el.textContent.trim()).toEqual('sha256:3e33e3e3');
   });
 });

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -132,14 +132,14 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   };
   filterOneLabel: Label = this.initFilter;
 
-  @ViewChild("confirmationDialog", { static: false })
+  @ViewChild("confirmationDialog")
   confirmationDialog: ConfirmationDialogComponent;
 
-  @ViewChild("imageNameInput", { static: false })
+  @ViewChild("imageNameInput")
   imageNameInput: ImageNameInputComponent;
 
-  @ViewChild("digestTarget", { static: false }) textInput: ElementRef;
-  @ViewChild("copyInput", { static: false }) copyInput: CopyInputComponent;
+  @ViewChild("digestTarget") textInput: ElementRef;
+  @ViewChild("copyInput") copyInput: CopyInputComponent;
 
   pageSize: number = DEFAULT_PAGE_SIZE;
   currentPage = 1;

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list.component.spec.ts

-import { ComponentFixture, TestBed, async, } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync, } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ArtifactListComponent } from './artifact-list.component';
 import { of } from "rxjs";
@@ -69,7 +69,7 @@ describe('ArtifactListComponent (inline template)', () => {
   const config: IServiceConfig = {
     repositoryBaseEndpoint: "/api/repositories/testing"
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         ClarityModule,

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list.component.ts

@@ -61,7 +61,7 @@ export class ArtifactListComponent implements OnInit {
 
   timerHandler: any;
   projectName: string = '';
-  @ViewChild('confirmationDialog', { static: false })
+  @ViewChild('confirmationDialog')
   confirmationDlg: ConfirmationDialogComponent;
   showCurrentTitle: string;
   artifactDigest: string;

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-additions.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactAdditionsComponent } from './artifact-additions.component';
 import { AdditionLinks } from "../../../../../../ng-swagger-gen/models/addition-links";
 import { IServiceConfig, SERVICE_CONFIG } from "../../../../../lib/entities/service.config";
@@ -19,7 +19,7 @@ describe('ArtifactAdditionsComponent', () => {
   let component: ArtifactAdditionsComponent;
   let fixture: ComponentFixture<ArtifactAdditionsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         ProjectModule

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.html

@@ -73,7 +73,7 @@
             </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}}
+                <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>

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactVulnerabilitiesComponent } from './artifact-vulnerabilities.component';
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { ClarityModule } from "@clr/angular";
@@ -65,7 +65,7 @@ describe('ArtifactVulnerabilitiesComponent', () => {
       }
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         BrowserAnimationsModule,

src/portal/src/app/project/repository/artifact/artifact-additions/artifact-vulnerabilities/artifact-vulnerabilities.component.ts

@@ -49,7 +49,7 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
   hasScanningPermission: boolean = false;
   onSendingScanCommand: boolean = false;
   hasShowLoading: boolean = false;
-  @ViewChild(ResultBarChartComponent, {static: false})
+  @ViewChild(ResultBarChartComponent)
   resultBarChartComponent: ResultBarChartComponent;
   sub: Subscription;
   hasViewInitWithDelay: boolean = false;

src/portal/src/app/project/repository/artifact/artifact-additions/build-history/build-history.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { ClarityModule } from "@clr/angular";
 import { AdditionsService } from "../additions.service";
@@ -33,7 +33,7 @@ describe('BuildHistoryComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         BrowserAnimationsModule,

src/portal/src/app/project/repository/artifact/artifact-additions/dependencies/dependencies.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DependenciesComponent } from "./dependencies.component";
 import { AdditionsService } from '../additions.service';
@@ -39,7 +39,7 @@ describe('DependenciesComponent', () => {
     const config: IServiceConfig = {
         repositoryBaseEndpoint: CURRENT_BASE_HREF + "/repositories/testing"
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/project/repository/artifact/artifact-additions/summary/summary.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from "@angular/core";
 import { AdditionsService } from "../additions.service";
 import { of } from "rxjs";
@@ -163,7 +163,7 @@ describe('SummaryComponent', () => {
   const config: IServiceConfig = {
     repositoryBaseEndpoint: CURRENT_BASE_HREF + "/repositories/testing"
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
        ProjectModule

src/portal/src/app/project/repository/artifact/artifact-additions/values/values.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, SecurityContext } from '@angular/core';
 import { ClarityModule } from '@clr/angular';
 import { FormsModule } from '@angular/forms';
-import { MarkdownModule, MarkdownService, MarkedOptions } from 'ngx-markdown';
+import { MarkdownModule, MarkedOptions } from 'ngx-markdown';
 import { BrowserModule } from '@angular/platform-browser';
 import { ValuesComponent } from "./values.component";
 import { AdditionsService } from "../additions.service";
@@ -30,11 +30,11 @@ describe('ValuesComponent', () => {
     absolute: false,
     href: '/test'
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
-        MarkdownModule,
+        MarkdownModule.forRoot({ sanitize: SecurityContext.HTML }),
         ClarityModule,
         FormsModule,
         BrowserModule
@@ -45,7 +45,6 @@ describe('ValuesComponent', () => {
       ],
       providers: [
         TranslateService,
-        MarkdownService,
         ErrorHandler,
         {provide: AdditionsService, useValue: fakedAdditionsService},
         {provide: MarkedOptions, useValue: {}},

src/portal/src/app/project/repository/artifact/artifact-common-properties/artifact-common-properties.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ArtifactCommonPropertiesComponent } from './artifact-common-properties.component';
 import { ClarityModule } from "@clr/angular";
@@ -16,7 +16,7 @@ describe('ArtifactCommonPropertiesComponent', () => {
     os: "linux"
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         ClarityModule,

src/portal/src/app/project/repository/artifact/artifact-summary.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactSummaryComponent } from "./artifact-summary.component";
 import { of } from "rxjs";
 import { ClarityModule } from "@clr/angular";
@@ -67,7 +67,7 @@ describe('ArtifactSummaryComponent', () => {
   const mockRouter = {
     navigate: () => { }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         ClarityModule,

src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ArtifactTagComponent } from './artifact-tag.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -50,7 +50,7 @@ describe('ArtifactTagComponent', () => {
     { resource: USERSTATICPERMISSION.REPOSITORY_TAG.KEY, action: USERSTATICPERMISSION.REPOSITORY_TAG.VALUE.CREATE },
   ];
   let mockHasDeleteImagePermission: boolean = true;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,

src/portal/src/app/project/repository/artifact/artifact-tag/artifact-tag.component.ts

@@ -55,7 +55,7 @@ export class ArtifactTagComponent implements OnInit, OnDestroy {
   loading = true;
   openTag = false;
   availableTime = AVAILABLE_TIME;
-  @ViewChild("confirmationDialog", { static: false })
+  @ViewChild("confirmationDialog")
   confirmationDialog: ConfirmationDialogComponent;
   hasDeleteTagPermission: boolean;
   hasCreateTagPermission: boolean;

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

@@ -9,7 +9,7 @@
  * conditions of the subcomponent's license, as noted in the LICENSE file.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { GridViewComponent } from './grid-view.component';
 import { IServiceConfig, SERVICE_CONFIG } from "../../../../lib/entities/service.config";
 import { SharedModule } from "../../../../lib/utils/shared/shared.module";
@@ -23,7 +23,7 @@ describe('GridViewComponent', () => {
   let config: IServiceConfig = {
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,

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

@@ -60,8 +60,8 @@ export class GridViewComponent implements AfterViewInit {
   @Output() loadNextPageEvent = new EventEmitter<any>();
 
   @ViewChildren("cardItem") cards: any;
-  @ViewChild("itemsHolder", {static: false}) itemsHolder: any;
-  @ContentChild(TemplateRef, {static: false}) gridItemTmpl: any;
+  @ViewChild("itemsHolder") itemsHolder: any;
+  @ContentChild(TemplateRef) gridItemTmpl: any;
 
   _items: any[] = [];
 

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

@@ -41,7 +41,7 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}</span>
-                    {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}
+                    {{totalCount}} {{'REPOSITORY.ITEMS' | translate}}
                     <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>