Update UI package to latest version

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

src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.html

@@ -83,7 +83,7 @@
         </clr-dg-cell>
     </clr-dg-row>
     <clr-dg-footer>
-      <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{pagination.totalItems }} {{'REPLICATION.ITEMS' | translate}}
+      <span *ngIf="changedRules?.length">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'REPLICATION.OF' | translate}} </span>{{changedRules?.length }} {{'REPLICATION.ITEMS' | translate}}
       <clr-dg-pagination #pagination [clrDgPageSize]="5"></clr-dg-pagination>
     </clr-dg-footer>
 </clr-datagrid>

src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.spec.ts

-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
@@ -79,7 +79,7 @@ describe('ListReplicationRuleComponent (inline template)', () => {
         }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 SharedModule,
@@ -107,7 +107,7 @@ describe('ListReplicationRuleComponent (inline template)', () => {
         fixture.detectChanges();
     });
 
-    it('Should load and render data', async(() => {
+    it('Should load and render data', waitForAsync(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();

src/portal/src/lib/components/list-replication-rule/list-replication-rule.component.ts

@@ -84,10 +84,10 @@ export class ListReplicationRuleComponent implements OnInit, OnChanges {
 
     selectedRow: ReplicationRule;
 
-    @ViewChild("toggleConfirmDialog", {static: false})
+    @ViewChild("toggleConfirmDialog")
     toggleConfirmDialog: ConfirmationDialogComponent;
 
-    @ViewChild("deletionConfirmDialog", {static: false})
+    @ViewChild("deletionConfirmDialog")
     deletionConfirmDialog: ConfirmationDialogComponent;
 
     startTimeComparator: Comparator<ReplicationRule> = new CustomComparator<ReplicationRule>("start_time", "date");

src/portal/src/lib/components/log/recent-log.component.html

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

src/portal/src/lib/components/log/recent-log.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { RecentLogComponent } from './recent-log.component';
 import { SERVICE_CONFIG, IServiceConfig } from '../../entities/service.config';
@@ -73,7 +73,7 @@ describe('RecentLogComponent (inline template)', () => {
       }
     }
   };
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule
@@ -105,7 +105,7 @@ describe('RecentLogComponent (inline template)', () => {
     expect(serviceConfig.logBaseEndpoint).toEqual(CURRENT_BASE_HREF + "/logs/testing");
   });
 
-  it('should get data from AccessLogService', async(() => {
+  it('should get data from AccessLogService', waitForAsync(() => {
     expect(auditlogService).toBeTruthy();
     fixture.detectChanges();
     fixture.whenStable().then(() => { // wait for async getRecentLogs
@@ -115,7 +115,7 @@ describe('RecentLogComponent (inline template)', () => {
     });
   }));
 
-  it('should render data to view', async(() => {
+  it('should render data to view', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -139,7 +139,7 @@ describe('RecentLogComponent (inline template)', () => {
     expect(component.recentLogs.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");
@@ -160,7 +160,7 @@ describe('RecentLogComponent (inline template)', () => {
     });
   }));
 
-  it('should support refreshing', async(() => {
+  it('should support refreshing', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();

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

 import { SystemInfoService } from '../../services/system-info.service';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ErrorHandler } from '../../utils/error-handler/error-handler';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { ProjectPolicyConfigComponent } from './project-policy-config.component';
@@ -113,7 +113,7 @@ describe('ProjectPolicyConfigComponent', () => {
     component.projectId = 1;
     fixture.detectChanges();
   }
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [SharedModule],
       declarations: [

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

@@ -62,9 +62,9 @@ export class ProjectPolicyConfigComponent implements OnInit {
     @Input() hasSignedIn: boolean;
     @Input() hasProjectAdminRole: boolean;
 
-    @ViewChild('cfgConfirmationDialog', {static: false}) confirmationDlg: ConfirmationDialogComponent;
-    @ViewChild('dateInput', {static: false}) dateInput: ElementRef;
-    @ViewChild('dateSystemInput', {static: false}) dateSystemInput: ElementRef;
+    @ViewChild('cfgConfirmationDialog') confirmationDlg: ConfirmationDialogComponent;
+    @ViewChild('dateInput') dateInput: ElementRef;
+    @ViewChild('dateSystemInput') dateSystemInput: ElementRef;
 
     systemInfo: SystemInfo;
     orgProjectPolicy = new ProjectPolicy();

src/portal/src/lib/components/push-image/push-image.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PushImageButtonComponent } from './push-image.component';
 import { CopyInputComponent } from './copy-input.component';
@@ -13,7 +13,7 @@ describe('PushImageButtonComponent (inline template)', () => {
   let fixture: ComponentFixture<PushImageButtonComponent>;
   let serviceConfig: IServiceConfig;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         SharedModule

src/portal/src/lib/components/push-image/push-image.component.ts

@@ -13,12 +13,12 @@ export class PushImageButtonComponent {
   @Input() registryUrl: string = "unknown";
   @Input() projectName: string = "unknown";
 
-  @ViewChild("tagCopyImage", {static: false}) tagCopyImageInput: CopyInputComponent;
-  @ViewChild("pushCopyImage", {static: false}) pushCopImageyInput: CopyInputComponent;
-  @ViewChild("tagCopyChart", {static: false}) tagCopyChartInput: CopyInputComponent;
-  @ViewChild("pushCopyChart", {static: false}) pushCopyChartInput: CopyInputComponent;
-  @ViewChild("pushCopyCnab", {static: false}) pushCopCnabyInput: CopyInputComponent;
-  @ViewChild("copyAlert", {static: false}) copyAlert: InlineAlertComponent;
+  @ViewChild("tagCopyImage") tagCopyImageInput: CopyInputComponent;
+  @ViewChild("pushCopyImage") pushCopImageyInput: CopyInputComponent;
+  @ViewChild("tagCopyChart") tagCopyChartInput: CopyInputComponent;
+  @ViewChild("pushCopyChart") pushCopyChartInput: CopyInputComponent;
+  @ViewChild("pushCopyCnab") pushCopCnabyInput: CopyInputComponent;
+  @ViewChild("copyAlert") copyAlert: InlineAlertComponent;
 
   public get tagCommandImage(): string {
     return `docker tag SOURCE_IMAGE[:TAG] ${this.registryUrl}/${

src/portal/src/lib/components/replication/replication.component.html

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

src/portal/src/lib/components/replication/replication.component.scss

@@ -76,9 +76,6 @@
 }
 
 clr-datagrid {
-  ::ng-deep .datagrid {
-    min-height: 115px;
-  }
   ::ng-deep .datagrid-table {
     position: static;
   }

src/portal/src/lib/components/replication/replication.component.spec.ts

-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
@@ -153,7 +153,7 @@ describe('Replication Component (inline template)', () => {
     replicationRuleEndpoint: CURRENT_BASE_HREF + '/policies/replication/testing'
   };
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
       imports: [
@@ -214,7 +214,7 @@ describe('Replication Component (inline template)', () => {
   });
 
 
-  it('Should load replication rules', async(() => {
+  it('Should load replication rules', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -227,7 +227,7 @@ describe('Replication Component (inline template)', () => {
     });
   }));
 
-  it('Should load replication jobs', async(() => {
+  it('Should load replication jobs', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -241,7 +241,7 @@ describe('Replication Component (inline template)', () => {
     });
   }));
 
-  it('Should filter replication rules by keywords', async(() => {
+  it('Should filter replication rules by keywords', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -253,7 +253,7 @@ describe('Replication Component (inline template)', () => {
     });
   }));
 
-  it('Should filter replication jobs by keywords', async(() => {
+  it('Should filter replication jobs by keywords', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -266,7 +266,7 @@ describe('Replication Component (inline template)', () => {
     });
   }));
 
-  it('Should filter replication jobs by status', async(() => {
+  it('Should filter replication jobs by status', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();
@@ -277,7 +277,7 @@ describe('Replication Component (inline template)', () => {
     });
   }));
 
-  it('Should filter replication jobs by date range', async(() => {
+  it('Should filter replication jobs by date range', waitForAsync(() => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       fixture.detectChanges();

src/portal/src/lib/components/replication/replication.component.ts

@@ -125,16 +125,16 @@ export class ReplicationComponent implements OnInit, OnDestroy {
 
   jobs: ReplicationJobItem[];
 
-  @ViewChild(ListReplicationRuleComponent, {static: false})
+  @ViewChild(ListReplicationRuleComponent)
   listReplicationRule: ListReplicationRuleComponent;
 
-  @ViewChild(CreateEditRuleComponent, {static: false})
+  @ViewChild(CreateEditRuleComponent)
   createEditPolicyComponent: CreateEditRuleComponent;
 
-  @ViewChild("replicationConfirmDialog", {static: false})
+  @ViewChild("replicationConfirmDialog")
   replicationConfirmDialog: ConfirmationDialogComponent;
 
-  @ViewChild("StopConfirmDialog", {static: false})
+  @ViewChild("StopConfirmDialog")
   StopConfirmDialog: ConfirmationDialogComponent;
 
   creationTimeComparator: Comparator<ReplicationJob> = new CustomComparator<

src/portal/src/lib/components/third-party/ngx-clipboard/clipboard.directive.ts

 import { ClipboardService } from './clipboard.service';
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer, ElementRef } from '@angular/core';
+import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ElementRef, Renderer2 } from '@angular/core';
 
 @Directive({
     selector: '[ngxClipboard]'
@@ -15,7 +15,7 @@ export class ClipboardDirective implements OnInit, OnDestroy {
     @Output() public cbOnError: EventEmitter<any> = new EventEmitter<any>();
     constructor(
         private clipboardSrv: ClipboardService,
-        private renderer: Renderer
+        private renderer: Renderer2
 
     ) { }
 

src/portal/src/lib/components/third-party/ngx-clipboard/clipboard.service.ts

-import {
-  Inject,
-  // tslint:disable-next-line:no-unused-variable
-  InjectionToken,
-  Injectable,
-  Optional,
-  Renderer,
-  SkipSelf
-} from "@angular/core";
+import { Inject, 
+// tslint:disable-next-line:no-unused-variable
+InjectionToken, Injectable, Optional, SkipSelf, Renderer2 } from "@angular/core";
 import { DOCUMENT } from "@angular/common";
 import { WINDOW } from "../ngx-window-token/window-token";
 
@@ -46,7 +40,7 @@ export class ClipboardService {
    */
   public copyFromInputElement(
     targetElm: HTMLInputElement | HTMLTextAreaElement,
-    renderer: Renderer
+    renderer: Renderer2
   ): boolean {
     try {
       this.selectTarget(targetElm, renderer);
@@ -62,7 +56,7 @@ export class ClipboardService {
    * Creates a fake textarea element, sets its value from `text` property,
    * and makes a selection on it.
    */
-  public copyFromContent(content: string, renderer: Renderer) {
+  public copyFromContent(content: string, renderer: Renderer2) {
     if (!this.tempTextArea) {
       this.tempTextArea = this.createTempTextArea(this.document, this.window);
       this.document.body.appendChild(this.tempTextArea);
@@ -82,13 +76,10 @@ export class ClipboardService {
   // select the target html input element
   private selectTarget(
     inputElement: HTMLInputElement | HTMLTextAreaElement,
-    renderer: Renderer
+    renderer: Renderer2
   ): number | undefined {
-    renderer.invokeElementMethod(inputElement, "select");
-    renderer.invokeElementMethod(inputElement, "setSelectionRange", [
-      0,
-      inputElement.value.length
-    ]);
+    inputElement.select();
+    inputElement.setSelectionRange(0, inputElement.value.length);
     return inputElement.value.length;
   }
 

src/portal/src/lib/harbor-library.module.ts

@@ -259,7 +259,7 @@ export interface HarborModuleConfig {
 })
 
 export class HarborLibraryModule {
-  static forRoot(config: HarborModuleConfig = {}): ModuleWithProviders {
+  static forRoot(config: HarborModuleConfig = {}): ModuleWithProviders<HarborLibraryModule> {
     return {
       ngModule: HarborLibraryModule,
       providers: [
@@ -295,7 +295,7 @@ export class HarborLibraryModule {
     };
   }
 
-  static forChild(config: HarborModuleConfig = {}): ModuleWithProviders {
+  static forChild(config: HarborModuleConfig = {}): ModuleWithProviders<HarborLibraryModule> {
     return {
       ngModule: HarborLibraryModule,
       providers: [

src/portal/src/tsconfig.app.json

@@ -26,6 +26,10 @@
         }
 
     },
+    "files": [
+        "main.ts",
+        "polyfills.ts"
+    ],
     "exclude": [
         "node_modules",
         "dist"

tests/resources/Harbor-Pages/Configuration.robot

@@ -362,15 +362,15 @@ Set User Name Claim And Save
 
 Select Distribution
     [Arguments]    ${name}
-    Retry Element Click    //div[@class='datagrid-scrolling-cells' and contains(.,'${name}')]//clr-checkbox-wrapper/label
+    Retry Element Click    //clr-dg-row[contains(.,'${name}')]//clr-checkbox-wrapper/label
 
 Distribution Exist
     [Arguments]  ${name}  ${endpoint}
-    Retry Wait Until Page Contains Element  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}') and contains(.,'${endpoint}')]
+    Retry Wait Until Page Contains Element  //clr-dg-row[contains(.,'${name}') and contains(.,'${endpoint}')]
 
 Distribution Not Exist
     [Arguments]  ${name}  ${endpoint}
-    Retry Wait Until Page Not Contains Element  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}') and contains(.,'${endpoint}')]
+    Retry Wait Until Page Not Contains Element  //clr-dg-row[contains(.,'${name}') and contains(.,'${endpoint}')]
 
 Filter Distribution List
     [Arguments]  ${name}  ${endpoint}  ${exsit}=${true}

tests/resources/Harbor-Pages/Project-P2P-Preheat.robot

@@ -29,16 +29,16 @@ Select Distribution For P2P Preheat
 
 Select P2P Preheat Policy
     [Arguments]    ${name}
-    Retry Element Click    //div[@class='datagrid-scrolling-cells' and contains(.,'${name}')]//clr-radio-wrapper/label
+    Retry Element Click    //clr-dg-row[contains(.,'${name}')]//clr-radio-wrapper/label
 
 P2P Preheat Policy Exist
     [Arguments]  ${name}  ${repo}=${null}
-    ${policy_row_xpath}=  Set Variable If  '${repo}'=='${null}'  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}')]  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}') and contains(.,'${repo}')]
+    ${policy_row_xpath}=  Set Variable If  '${repo}'=='${null}'  //clr-dg-row[contains(.,'${name}')]  //clr-dg-row[contains(.,'${name}') and contains(.,'${repo}')]
     Retry Wait Until Page Contains Element  ${policy_row_xpath}
 
 P2P Preheat Policy Not Exist
     [Arguments]  ${name}
-    Retry Wait Until Page Not Contains Element  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}')]
+    Retry Wait Until Page Not Contains Element  //clr-dg-row[contains(.,'${name}')]
 
 Create An New P2P Preheat Policy
     [Arguments]    ${policy_name}  ${dist_name}  ${repo}  ${tag}  ${trigger_type}=${null}

tests/resources/Harbor-Pages/Verify.robot

@@ -483,7 +483,7 @@ Verify Distributions
         ${endpoint}=  Get Value From Json  ${json}  $.distributions[?(@.name=${name})].endpoint
         ${vendor}=  Get Value From Json  ${json}  $.distributions[?(@.name=${name})].vendor
         ${auth_mode}=  Get Value From Json  ${json}  $.distributions[?(@.name=${name})].auth_mode
-        Retry Wait Until Page Contains Element  //div[@class='datagrid-scrolling-cells' and contains(.,'${name}') and contains(.,'${endpoint}[0]') and contains(.,'${vendor}[0]') and contains(.,'${auth_mode}[0]')]
+        Retry Wait Until Page Contains Element  //clr-dg-row[contains(.,'${name}') and contains(.,'${endpoint}[0]') and contains(.,'${vendor}[0]') and contains(.,'${auth_mode}[0]')]
     END
 
 Verify P2P Preheat Policy
@@ -509,5 +509,5 @@ Loop P2P Preheat Policys
     [Arguments]  ${json}  ${project}  @{policy_names}
     FOR    ${policy}    IN    @{policy_names}
         ${provider_name}=  Get Value From Json  ${json}  $.projects[?(@.name=${project})].p2p_preheat_policy[?(@.name=${policy})].provider_name
-        Retry Wait Until Page Contains Element   //div[@class='datagrid-scrolling-cells' and contains(.,'${policy}') and contains(.,'${provider_name}[0]')]
+        Retry Wait Until Page Contains Element   //clr-dg-row[contains(.,'${policy}') and contains(.,'${provider_name}[0]')]
     END
\ No newline at end of file