From f0b241c69570d4d59110d195e5f9372436553c0b Mon Sep 17 00:00:00 2001
From: Will Sun <30999793+AllForNothing@users.noreply.github.com>
Date: Wed, 17 Mar 2021 14:32:45 +0800
Subject: [PATCH] Add pagination to replication rules searching (#14464)

Signed-off-by: AllForNothing <sshijun@vmware.com>
---
 .../list-replication-rule.component.html       | 18 +++++++++---------
 .../list-replication-rule.component.ts         |  6 +++---
 .../replication/replication.component.html     |  1 +
 .../replication/replication.component.ts       |  5 +++--
 .../new-user-form/new-user-form.component.html |  2 +-
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.html b/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.html
index 0e3798a63..f3b117af5 100644
--- a/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.html
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.html
@@ -53,13 +53,13 @@
         <clr-dg-cell>{{p.name}}</clr-dg-cell>
         <clr-dg-cell class="status-width">
             <div [ngSwitch]="p.enabled">
-                <clr-tooltip *ngSwitchCase="false" class="tooltip-lg">	
-                    <clr-icon clrTooltipTrigger shape="exclamation-triangle" class="is-warning text-alignment" size="22"></clr-icon>Disabled	
-                    <clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>	
-                        <span>{{'REPLICATION.RULE_DISABLED' | translate}}</span>	
-                    </clr-tooltip-content>	
-                </clr-tooltip>	
-                <div *ngSwitchCase="true" ><clr-icon shape="success-standard" class="is-success text-alignment" size="18"></clr-icon> Enabled</div>	
+                <clr-tooltip *ngSwitchCase="false" class="tooltip-lg">
+                    <clr-icon clrTooltipTrigger shape="exclamation-triangle" class="is-warning text-alignment" size="22"></clr-icon>Disabled
+                    <clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
+                        <span>{{'REPLICATION.RULE_DISABLED' | translate}}</span>
+                    </clr-tooltip-content>
+                </clr-tooltip>
+                <div *ngSwitchCase="true" ><clr-icon shape="success-standard" class="is-success text-alignment" size="18"></clr-icon> Enabled</div>
             </div>
         </clr-dg-cell>
         <clr-dg-cell class="col-width">
@@ -73,8 +73,8 @@
                 </clr-signpost-content>
             </clr-signpost>
         </clr-dg-cell>
-        <clr-dg-cell class="col-width">	
-            {{p.src_registry && p.src_registry.id > 0 ? 'pull-based' : 'push-based'}}	
+        <clr-dg-cell class="col-width">
+            {{p.src_registry && p.src_registry.id > 0 ? 'pull-based' : 'push-based'}}
         </clr-dg-cell>
         <clr-dg-cell class="min-width">
             {{p.dest_registry ? p.dest_registry.name : ''}} : {{p.dest_namespace? p.dest_namespace: '-'}}
diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts b/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts
index c89ceb026..a801538e5 100644
--- a/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/list-replication-rule/list-replication-rule.component.ts
@@ -52,6 +52,7 @@ export class ListReplicationRuleComponent  {
     @Input() hasUpdateReplicationPermission: boolean;
     @Input() hasDeleteReplicationPermission: boolean;
     @Input() hasExecuteReplicationPermission: boolean;
+    @Input() searchString: string;
     @Output() selectOne = new EventEmitter<ReplicationRule>();
     @Output() editOne = new EventEmitter<ReplicationRule>();
     @Output() toggleOne = new EventEmitter<ReplicationRule>();
@@ -68,7 +69,6 @@ export class ListReplicationRuleComponent  {
     page: number = 1;
     pageSize: number = 5;
     totalCount: number = 0;
-    ruleName: string = "";
     loading: boolean = true;
 
     constructor(private replicationService: ReplicationService,
@@ -232,7 +232,7 @@ export class ListReplicationRuleComponent  {
         }
         this.loading = true;
         this.replicationService.getReplicationRulesResponse(
-            this.ruleName,
+            this.searchString,
             this.page,
             this.pageSize)
             .pipe(finalize(() => this.loading = false))
@@ -255,7 +255,7 @@ export class ListReplicationRuleComponent  {
         this.page = 1;
         this.totalCount = 0;
         this.selectedRow = null;
-        this.ruleName = "";
+        this.searchString = null;
         this.clrLoad();
     }
     isHelmHub(srcRegistry: any): boolean {
diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html b/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html
index 87b43def1..6230c525d 100644
--- a/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.html
@@ -17,6 +17,7 @@
       [hasUpdateReplicationPermission]="hasUpdateReplicationPermission"
       [hasDeleteReplicationPermission]="hasDeleteReplicationPermission"
       [hasExecuteReplicationPermission]="hasExecuteReplicationPermission"
+      [searchString]="filterComponent?.currentValue"
       ></hbr-list-replication-rule>
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 jobList" [hidden]='hiddenJobList'>
diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.ts b/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.ts
index 0240e5a4c..56cb9ef78 100644
--- a/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.ts
+++ b/src/portal/src/app/base/left-side-nav/replication/replication/replication.component.ts
@@ -168,7 +168,8 @@ export class ReplicationComponent implements OnInit, OnDestroy {
           switchMap( ruleName => {
             this.listReplicationRule.loading = true;
             this.listReplicationRule.page = 1;
-            return this.replicationService.getReplicationRulesResponse(ruleName);
+            return this.replicationService
+                .getReplicationRulesResponse(ruleName, this.listReplicationRule.page, this.listReplicationRule.pageSize);
           })
       ).subscribe(response => {
               this.hideJobs();
@@ -176,7 +177,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
               if (response.headers) {
                   let xHeader: string = response.headers.get("x-total-count");
                   if (xHeader) {
-                      this.totalCount = parseInt(xHeader, 0);
+                    this.listReplicationRule.totalCount = parseInt(xHeader, 0);
                   }
               }
               this.listReplicationRule.selectedRow = null; // Clear selection
diff --git a/src/portal/src/app/shared/components/new-user-form/new-user-form.component.html b/src/portal/src/app/shared/components/new-user-form/new-user-form.component.html
index d317188f9..6b2f214cb 100644
--- a/src/portal/src/app/shared/components/new-user-form/new-user-form.component.html
+++ b/src/portal/src/app/shared/components/new-user-form/new-user-form.component.html
@@ -59,7 +59,7 @@
         </clr-input-container>
         <clr-input-container>
             <label>{{'PROFILE.COMMENT' | translate}}</label>
-            <input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="20" id="comment" size="30"
+            <input clrInput type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="30" id="comment" size="30"
                 (input)='handleValidation("comment", false)' (blur)='handleValidation("comment", true)'>
             <clr-control-error *ngIf='getValidationState("comment")'>
                 {{'TOOLTIP.COMMENT' | translate}}