Update UI package to latest version

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

src/portal/src/app/sign-in/sign-in.component.spec.ts

-import { async, ComponentFixture, getTestBed, inject, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, getTestBed, inject, TestBed } from '@angular/core/testing';
 import { SignInComponent } from './sign-in.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -22,7 +22,7 @@ describe('SignInComponent', () => {
             return of(true);
         }
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 TranslateModule.forRoot(),

src/portal/src/app/sign-in/sign-in.component.ts

@@ -54,9 +54,9 @@ export class SignInComponent implements AfterViewChecked, OnInit {
     // Form reference
     signInForm: NgForm;
     @ViewChild('signInForm', {static: true}) currentForm: NgForm;
-    @ViewChild('signupDialog', {static: false}) signUpDialog: SignUpComponent;
-    @ViewChild('forgotPwdDialog', {static: false}) forgotPwdDialog: ForgotPasswordComponent;
-    @ViewChild(AboutDialogComponent, {static: false}) aboutDialog: AboutDialogComponent;
+    @ViewChild('signupDialog') signUpDialog: SignUpComponent;
+    @ViewChild('forgotPwdDialog') forgotPwdDialog: ForgotPasswordComponent;
+    @ViewChild(AboutDialogComponent) aboutDialog: AboutDialogComponent;
 
     // Status flag
     signInStatus: number = signInStatusNormal;

src/portal/src/app/sign-in/top-repo/top-repo.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 { TopRepoComponent } from './top-repo.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -21,7 +21,7 @@ describe('TopRepoComponent', () => {
     const mockTopRepoService = {
         getTopRepos: () => of([])
     };
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             schemas: [
                 CUSTOM_ELEMENTS_SCHEMA

src/portal/src/app/user/change-password/change-password.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { ClarityModule } from '@clr/angular';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -12,7 +12,7 @@ describe('ChangePasswordComponent', () => {
     let fixture: ComponentFixture<ChangePasswordComponent>;
     let fakeUserService = null;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [ChangePasswordComponent],
             schemas: [

src/portal/src/app/user/change-password/change-password.component.ts

@@ -35,8 +35,8 @@ export class ChangePasswordComponent {
     confirmPwd: string = "";
     userId: number;
 
-    @ViewChild("resetPwdForm", { static: false }) resetPwdForm: NgForm;
-    @ViewChild(InlineAlertComponent, { static: false })
+    @ViewChild("resetPwdForm") resetPwdForm: NgForm;
+    @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
 
     constructor(

src/portal/src/app/user/new-user-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 } from '@angular/core';
@@ -17,7 +17,7 @@ describe('NewUserModalComponent', () => {
         handleError: function () { }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [NewUserModalComponent],
             imports: [

src/portal/src/app/user/new-user-modal.component.ts

@@ -41,7 +41,7 @@ export class NewUserModalComponent {
 
     @ViewChild(NewUserFormComponent, {static: true})
     newUserForm: NewUserFormComponent;
-    @ViewChild(InlineAlertComponent, {static: false})
+    @ViewChild(InlineAlertComponent)
     inlineAlert: InlineAlertComponent;
 
     getNewUser(): User {

src/portal/src/app/user/user.component.html

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

src/portal/src/app/user/user.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 } from '@angular/core';
@@ -27,7 +27,7 @@ describe('UserComponent', () => {
         handleError: function () { }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [UserComponent],
             imports: [

src/portal/src/app/vulnerability-page/vulnerability-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';
@@ -9,7 +9,7 @@ describe('VulnerabilityPageComponent', () => {
   let component: VulnerabilityPageComponent;
   let fixture: ComponentFixture<VulnerabilityPageComponent>;
   let fakeAppConfigService = null;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA

src/portal/src/global.scss

@@ -90,6 +90,7 @@ body {
 
 .color-red {
   color: red;
+  margin-left: 2px;
 }
 
 .datagrid-table,
@@ -459,3 +460,7 @@ button:focus {
 .text-align-r {
   text-align: right !important;
 }
+.datagrid-expandable-caret.datagrid-fixed-column.datagrid-cell.ng-star-inserted {
+  align-items: center;
+  display: flex;
+}
\ No newline at end of file

src/portal/src/lib/components/config/gc/gc.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { GcComponent } from './gc.component';
 import { SERVICE_CONFIG, IServiceConfig } from '../../../entities/service.config';
 import { GcApiRepository, GcApiDefaultRepository} from './gc.api.repository';
@@ -45,7 +45,7 @@ describe('GcComponent', () => {
   let spySchedule: jasmine.Spy;
   let spyJobs: jasmine.Spy;
   let spyGcNow: jasmine.Spy;
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule

src/portal/src/lib/components/config/gc/gc.component.ts

@@ -31,7 +31,7 @@ export class GcComponent implements OnInit {
   disableGC: boolean = false;
   getLabelCurrent = 'GC.CURRENT_SCHEDULE';
   @Output() loadingGcStatus = new EventEmitter<boolean>();
-  @ViewChild(CronScheduleComponent, {static: false})
+  @ViewChild(CronScheduleComponent)
   CronScheduleComponent: CronScheduleComponent;
   shouldDeleteUntagged: boolean;
   dryRunOnGoing: boolean = false;

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss

-::ng-deep .modal-dialog {
-  width: 25rem;
+:host::ng-deep.modal-dialog {
+  width: 29rem;
 }
 
 .modal-body {
@@ -13,7 +13,7 @@
   .clr-form {
     padding-left: 0;
     .left-label {
-      width: 9.5rem;
+      width: 11.5rem;
       font-weight: 100;
       position: relative;
     }
@@ -46,7 +46,7 @@
 
   .clr-form-compact-common {
     .left-label {
-      width: 7.3rem;
+      width: 9.5rem;
     }
 
     .quota-input {

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { EditProjectQuotasComponent } from './edit-project-quotas.component';
 import { SERVICE_CONFIG, IServiceConfig } from '../../../../entities/service.config';
 import { EditQuotaQuotaInterface } from '../../../../services';
@@ -20,7 +20,7 @@ describe('EditProjectQuotasComponent', () => {
     quotaHardLimitValue: {storageLimit: -1, storageUnit: "Byte"},
     isSystemDefaultQuota: true
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         HarborLibraryModule,

src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.ts

@@ -36,7 +36,7 @@ export class EditProjectQuotasComponent implements OnInit {
   staticBackdrop = true;
   closable = false;
   quotaForm: NgForm;
-  @ViewChild(InlineAlertComponent, {static: false})
+  @ViewChild(InlineAlertComponent)
   inlineAlert: InlineAlertComponent;
 
   @ViewChild('quotaForm', {static: true})

src/portal/src/lib/components/config/project-quotas/project-quotas.component.html

@@ -58,7 +58,7 @@
                     </clr-dg-cell>
                 </clr-dg-row>
                 <clr-dg-footer>
-                    <span>{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+                    <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                         {{'DESTINATION.OF' | translate}}</span>
                     {{totalCount}} {{'SUMMARY.QUOTAS' | translate}}
                     <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage"

src/portal/src/lib/components/config/project-quotas/project-quotas.component.spec.ts

-import { async, ComponentFixture, ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
 import { ProjectQuotasComponent } from './project-quotas.component';
 import { IServiceConfig, SERVICE_CONFIG } from '../../../entities/service.config';
 import { Router } from '@angular/router';
@@ -58,7 +58,7 @@ describe('ProjectQuotasComponent', () => {
   const timeout = (ms: number) => {
      return new Promise(resolve => setTimeout(resolve, ms));
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         HarborLibraryModule,
@@ -76,7 +76,7 @@ describe('ProjectQuotasComponent', () => {
       .compileComponents();
   }));
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
 
     fixture = TestBed.createComponent(ProjectQuotasComponent);
     component = fixture.componentInstance;

src/portal/src/lib/components/config/project-quotas/project-quotas.component.ts

@@ -32,7 +32,7 @@ const QuotaType = 'project';
 export class ProjectQuotasComponent implements OnChanges {
 
   config: Configuration = new Configuration();
-  @ViewChild('editProjectQuotas', {static: false})
+  @ViewChild('editProjectQuotas')
   editQuotaDialog: EditProjectQuotasComponent;
   loading = true;
   quotaHardLimitValue: QuotaHardLimitInterface;

src/portal/src/lib/components/config/registry-config.component.spec.ts

-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SharedModule } from '../../utils/shared/shared.module';
 import { ErrorHandler } from '../../utils/error-handler/error-handler';
@@ -63,7 +63,7 @@ describe('RegistryConfigComponent (inline template)', () => {
     "items": [],
     "project_id": 0
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule
@@ -100,7 +100,7 @@ describe('RegistryConfigComponent (inline template)', () => {
     fixture.detectChanges();
   });
 
-  it('should render configurations to the view', async(() => {
+  it('should render configurations to the view', waitForAsync(() => {
     expect(spy.calls.count()).toEqual(1);
     expect(spySystemInfo.calls.count()).toEqual(1);
     fixture.detectChanges();