Update UI package to latest version

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

src/portal/src/app/distribution/distribution-setup-modal/distribution-setup-modal.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { ClarityModule } from '@clr/angular';
 import { SharedModule } from '../../shared/shared.module';
@@ -32,7 +32,7 @@ describe('DistributionSetupModalComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         ClarityModule,

src/portal/src/app/distribution/distribution-setup-modal/distribution-setup-modal.component.ts

@@ -39,7 +39,7 @@ export class DistributionSetupModalComponent implements OnInit, OnDestroy {
   editingMode: boolean = false;
   authData: {[key: string]: any} = {};
   @ViewChild('instanceForm', { static: true }) instanceForm: NgForm;
-  @ViewChild(InlineAlertComponent, { static: false }) inlineAlert: InlineAlertComponent;
+  @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
   saveBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
 
   @Output()

src/portal/src/app/gc-page/gc-page.component.html

 <div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-        <h2 class="custom-h2 gc-title">{{'CONFIG.GC' | translate }}<span class="spinner spinner-inline ml-1 v-mid" [hidden]="!inProgress"></span></h2>
+        <h2 class="custom-h2 gc-title">{{'CONFIG.GC' | translate }}<span *ngIf="inProgress" class="spinner spinner-inline ml-1 v-mid"></span></h2>
         <clr-tabs>
             <clr-tab *ngIf="hasAdminRole">
                 <button id="config-gc" clrTabLink>{{'CONFIG.GC' | translate }}</button>

src/portal/src/app/gc-page/gc-page.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';
@@ -13,7 +13,7 @@ describe('GcPageComponent', () => {
       return { has_admin_role: true };
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [GcPageComponent],
       schemas: [

src/portal/src/app/gc-page/gc-page.component.ts

@@ -7,7 +7,7 @@ import { SessionService } from "../shared/session.service";
   styleUrls: ["./gc-page.component.scss"]
 })
 export class GcPageComponent implements OnInit {
-  inProgress: boolean;
+  inProgress: boolean = true;
   constructor(private session: SessionService) {}
 
   ngOnInit() {}

src/portal/src/app/global-message/message.component.scss

@@ -6,4 +6,7 @@
     width: 100%;
     height: 100%;
     z-index: 1000;
+}
+.alert-text {
+    flex: 0 1 auto !important;
 }
\ No newline at end of file

src/portal/src/app/global-message/message.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ElementRef } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -13,7 +13,7 @@ describe('MessageComponent', () => {
     let fixture: ComponentFixture<MessageComponent>;
     let fakeElementRef = null;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 ClarityModule,

src/portal/src/app/group/add-group-modal/add-group-modal.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';
@@ -33,7 +33,7 @@ describe('AddGroupModalComponent', () => {
   };
   let fakeMessageHandlerService = null;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [AddGroupModalComponent],
       imports: [

src/portal/src/app/group/group.component.html

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

src/portal/src/app/group/group.component.spec.ts

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

src/portal/src/app/group/group.component.ts

@@ -40,7 +40,7 @@ export class GroupComponent implements OnInit, OnDestroy {
   batchInfos = new Map();
   isLdapMode: boolean;
 
-  @ViewChild(AddGroupModalComponent, {static: false}) newGroupModal: AddGroupModalComponent;
+  @ViewChild(AddGroupModalComponent) newGroupModal: AddGroupModalComponent;
 
   constructor(
     private operationService: OperationService,

src/portal/src/app/interrogation-services/interrogation-services.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { InterrogationServicesComponent } from './interrogation-services.component';
 import { SharedModule } from "../shared/shared.module";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -9,7 +9,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 describe('InterrogationServicesComponent', () => {
   let component: InterrogationServicesComponent;
   let fixture: ComponentFixture<InterrogationServicesComponent>;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,

src/portal/src/app/labels/labels.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LabelsComponent } from './labels.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@@ -11,7 +11,7 @@ describe('LabelsComponent', () => {
   let component: LabelsComponent;
   let fixture: ComponentFixture<LabelsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule,

src/portal/src/app/license/license.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { LicenseComponent } from './license.component';
 
@@ -6,7 +6,7 @@ describe('LicenseComponent', () => {
   let component: LicenseComponent;
   let fixture: ComponentFixture<LicenseComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [LicenseComponent],
       imports: [

src/portal/src/app/log/audit-log.component.html

@@ -44,7 +44,7 @@
                 <clr-dg-cell>{{l.op_time | date: 'short'}}</clr-dg-cell>
             </clr-dg-row>
             <clr-dg-footer>
-                <span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'AUDIT_LOG.OF' | translate}} </span> {{pagination.totalItems }} {{'AUDIT_LOG.ITEMS' | translate}}
+                <span *ngIf="showPaginationIndex">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'AUDIT_LOG.OF' | translate}} </span> {{totalRecordCount }} {{'AUDIT_LOG.ITEMS' | translate}}
                 <clr-dg-pagination #pagination [clrDgPageSize]="15" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalRecordCount"></clr-dg-pagination>
             </clr-dg-footer>
         </clr-datagrid>

src/portal/src/app/log/audit-log.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 { AuditLogComponent } from './audit-log.component';
 import { ClarityModule } from '@clr/angular';
@@ -76,7 +76,7 @@ describe('AuditLogComponent', () => {
         }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA
@@ -111,7 +111,7 @@ describe('AuditLogComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
-    it('should get data from AccessLogService', async(() => {
+    it('should get data from AccessLogService', waitForAsync(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => { // wait for async getRecentLogs
             fixture.detectChanges();
@@ -120,7 +120,7 @@ describe('AuditLogComponent', () => {
         });
     }));
 
-    it('should render data to view', async(() => {
+    it('should render data to view', waitForAsync(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
@@ -144,7 +144,7 @@ describe('AuditLogComponent', () => {
         expect(component.auditLogs.length).toEqual(3);
     });
 
-    it('should support filtering list by keywords', async(() => {
+    it('should support filtering list by keywords', waitForAsync(() => {
         fixture.detectChanges();
         let el: HTMLElement = fixture.nativeElement.querySelector('.search-btn');
         expect(el).toBeTruthy("Not found search icon");

src/portal/src/app/log/log-page.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { LogPageComponent } from './log-page.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
@@ -6,7 +6,7 @@ describe('LogPageComponent', () => {
     let component: LogPageComponent;
     let fixture: ComponentFixture<LogPageComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
             ],

src/portal/src/app/oidc-onboard/oidc-onboard.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 { OidcOnboardService } from './oidc-onboard.service';
@@ -14,7 +14,7 @@ describe('OidcOnboardComponent', () => {
   let fakeOidcOnboardService = null;
   let fakeRouter = null;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [OidcOnboardComponent],
       schemas: [

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

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProjectQuotasComponent } from './project-quotas.component';
 import { TranslateModule } from "@ngx-translate/core";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@@ -38,7 +38,7 @@ describe('ProjectQuotasComponent', () => {
     }
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot()

src/portal/src/app/project/create-project/create-project.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 { CreateProjectComponent } from './create-project.component';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
@@ -38,7 +38,7 @@ describe('CreateProjectComponent', () => {
         systemInfoEndpoint: CURRENT_BASE_HREF + "/endpoints/testing"
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 HttpClientTestingModule,