Update UI package to latest version

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

src/portal/src/app/project/create-project/create-project.component.ts

@@ -71,7 +71,7 @@ export class CreateProjectComponent implements  OnInit, AfterViewInit, OnChanges
   @Input() isSystemAdmin: boolean;
   @ViewChild(InlineAlertComponent, {static: true})
   inlineAlert: InlineAlertComponent;
-  @ViewChild('projectName', {static: false}) projectNameInput: ElementRef;
+  @ViewChild('projectName') projectNameInput: ElementRef;
   checkNameSubscribe: Subscription;
 
   registries: Endpoint[] = [];

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail.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 { ClarityModule } from '@clr/angular';
@@ -17,7 +17,7 @@ describe('ChartDetailComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [HelmChartDetailComponent],
       schemas: [

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-dependency.component.spec.ts

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

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-summary.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 { ChartDetailSummaryComponent } from './chart-detail-summary.component';
 import { ClarityModule } from '@clr/angular';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, SecurityContext } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MarkedOptions, MarkdownModule, MarkdownService } from 'ngx-markdown';
+import { MarkedOptions, MarkdownModule } from 'ngx-markdown';
 import { HelmChartService } from '../../helm-chart.service';
 import { DefaultErrorHandler, ErrorHandler } from "../../../../../lib/utils/error-handler";
 describe('ChartDetailSummaryComponent', () => {
@@ -15,13 +15,13 @@ describe('ChartDetailSummaryComponent', () => {
         }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),
                 ClarityModule,
                 FormsModule,
-                MarkdownModule,
+                MarkdownModule.forRoot({ sanitize: SecurityContext.HTML }),
             ],
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA
@@ -29,7 +29,6 @@ describe('ChartDetailSummaryComponent', () => {
             declarations: [ChartDetailSummaryComponent],
             providers: [
                 TranslateService,
-                MarkdownService,
                 { provide: MarkedOptions, useValue: {} },
                 { provide: ErrorHandler, useValue: DefaultErrorHandler },
                 { provide: HelmChartService, useValue: mockHelmChartService },
@@ -39,7 +38,6 @@ describe('ChartDetailSummaryComponent', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(ChartDetailSummaryComponent);
-        // markdownService = TestBed.get(MarkdownService);
         component = fixture.componentInstance;
         component.summary = {
             name: "string",

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail-value.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 { ChartDetailValueComponent } from './chart-detail-value.component';
-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';
 
 describe('ChartDetailValueComponent', () => {
     let component: ChartDetailValueComponent;
     let fixture: ComponentFixture<ChartDetailValueComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),
-                MarkdownModule,
                 ClarityModule,
                 FormsModule,
-                BrowserModule
+                BrowserModule,
+                MarkdownModule.forRoot({ sanitize: SecurityContext.HTML }),
             ],
             declarations: [ChartDetailValueComponent],
             schemas: [
@@ -26,7 +26,6 @@ describe('ChartDetailValueComponent', () => {
             ],
             providers: [
                 TranslateService,
-                MarkdownService,
                 { provide: MarkedOptions, useValue: {} },
             ]
         }).compileComponents();

src/portal/src/app/project/helm-chart/helm-chart-detail/chart-detail/chart-detail.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 { ChartDetailComponent } from './chart-detail.component';
 import { ClarityModule } from '@clr/angular';
@@ -99,7 +99,7 @@ describe('ChartDetailComponent', () => {
         },
         downloadChart: function () { }
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/project/helm-chart/label-filter/label-filter.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 { LabelFilterComponent } from './label-filter.component';
 import { ClarityModule } from '@clr/angular';
@@ -9,7 +9,7 @@ describe('LabelFilterComponent', () => {
     let component: LabelFilterComponent;
     let fixture: ComponentFixture<LabelFilterComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/helm-chart/label-marker/label-marker.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 { LabelMarkerComponent } from './label-marker.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -33,7 +33,7 @@ describe('LabelMarkerComponent', () => {
     let component: LabelMarkerComponent;
     let fixture: ComponentFixture<LabelMarkerComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html

@@ -100,10 +100,10 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount">
-                        <span *ngIf="pagination.totalItems">
+                        <span *ngIf="totalCount">
                             {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}}
                         </span>
-                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
+                        {{totalCount}} {{'HELM_CHART.ITEMS'| translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>

src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.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 { ChartVersionComponent } from './helm-chart-version.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -79,7 +79,7 @@ describe('ChartVersionComponent', () => {
             ).pipe(delay(0));
         }
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts

@@ -76,7 +76,7 @@ export class ChartVersionComponent implements OnInit {
 
   addLabelHeaders = 'HELM_CHART.ADD_LABEL_TO_CHART_VERSION';
 
-  @ViewChild("confirmationDialog", {static: false})
+  @ViewChild("confirmationDialog")
   confirmationDialog: ConfirmationDialogComponent;
   hasAddRemoveHelmChartVersionPermission: boolean;
   hasDownloadHelmChartVersionPermission: boolean;

src/portal/src/app/project/helm-chart/list-chart-versions/list-chart-versions.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';
@@ -17,7 +17,7 @@ describe('ListChartVersionsComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ListChartVersionsComponent],
       imports: [

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html

@@ -54,10 +54,10 @@
                 </clr-dg-row>
                 <clr-dg-footer>
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount">
-                        <span *ngIf="pagination.totalItems">
+                        <span *ngIf="totalCount">
                             {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}}
                         </span>
-                        {{pagination.totalItems}} {{'HELM_CHART.ITEMS'| translate}}
+                        {{totalCount}} {{'HELM_CHART.ITEMS'| translate}}
                     </clr-dg-pagination>
                 </clr-dg-footer>
             </clr-datagrid>

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.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 { HelmChartComponent } from './helm-chart.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -72,7 +72,7 @@ describe('HelmChartComponent', () => {
             return of([]);
         },
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts

@@ -74,9 +74,9 @@ export class HelmChartComponent implements OnInit {
   totalCount = 0;
   currentState: State;
 
-  @ViewChild('chartUploadForm', {static: false}) uploadForm: NgForm;
+  @ViewChild('chartUploadForm') uploadForm: NgForm;
 
-  @ViewChild("confirmationDialog", {static: false}) confirmationDialog: ConfirmationDialogComponent;
+  @ViewChild("confirmationDialog") confirmationDialog: ConfirmationDialogComponent;
   hasUploadHelmChartsPermission: boolean;
   hasDownloadHelmChartsPermission: boolean;
   hasDeleteHelmChartsPermission: boolean;

src/portal/src/app/project/helm-chart/list-charts.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 { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
@@ -15,7 +15,7 @@ describe('ListChartsComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ListChartsComponent],
       imports: [

src/portal/src/app/project/list-project/list-project.component.html

@@ -25,7 +25,7 @@
         <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
-        <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} </span> {{pagination.totalItems
+        <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} </span> {{totalCount
         }} {{'PROJECT.ITEMS' | translate}}
         <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
     </clr-dg-footer>

src/portal/src/app/project/list-project/list-project.component.spec.ts

-import { async, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListProjectComponent } from './list-project.component';
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
@@ -62,7 +62,7 @@ describe('ListProjectComponent', () => {
     const mockOperationService = {
         publishInfo$: () => {}
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/project/member/add-group/add-group.component.html

@@ -79,10 +79,10 @@
 
                         <clr-dg-footer>
                             <clr-dg-pagination #pagination [clrDgPageSize]="5" [clrDgTotalItems]="totalCount">
-                                <span *ngIf="pagination.totalItems">
+                                <span *ngIf="groups?.length">
                                         {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'MEMBER.OF' | translate}}
                                 </span>
-                                {{pagination.totalItems}} {{'MEMBER.ITEMS' | translate}}
+                                {{groups?.length}} {{'MEMBER.ITEMS' | translate}}
                             </clr-dg-pagination>
                         </clr-dg-footer>
                     </clr-datagrid>

src/portal/src/app/project/member/add-group/add-group.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 { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
@@ -17,7 +17,7 @@ describe('AddGroupComponent', () => {
   let fakeGroupService = null;
   let fakeMemberService = null;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AddGroupComponent],
       imports: [