Improve input validator for copy-component (#17310)

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

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -46,7 +46,8 @@
             [disabled]="
                 imageNameInput.projectName.invalid ||
                 imageNameInput.repoName.invalid ||
-                imageNameInput.noProjectInfo !== ''
+                imageNameInput.notExist ||
+                imageNameInput.checkingName
             "
             class="btn btn-primary"
             (click)="onRetag()">

src/portal/src/app/base/project/repository/artifact/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -849,7 +849,9 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
             this.retagDialogOpened = true;
             this.imageNameInput.imageNameForm.reset({
                 repoName: this.repoName,
+                projectName: null,
             });
+            this.imageNameInput.notExist = false;
             this.retagSrcImage =
                 this.repoName + ':' + this.selectedRow[0].digest;
         }

src/portal/src/app/shared/components/image-name-input/image-name-input.component.html

@@ -9,7 +9,9 @@
         <div
             class="clr-control-container"
             [class.clr-error]="
-                noProjectInfo && (projectName.dirty || projectName.touched)
+                (projectName.invalid &&
+                    (projectName.dirty || projectName.touched)) ||
+                notExist
             ">
             <div class="clr-input-wrapper">
                 <input
@@ -22,6 +24,9 @@
                 <clr-icon
                     class="clr-validate-icon"
                     shape="exclamation-circle"></clr-icon>
+                <span
+                    class="spinner spinner-inline"
+                    [hidden]="!checkingName"></span>
                 <div
                     class="selectBox"
                     [style.display]="
@@ -38,10 +43,17 @@
             </div>
             <clr-control-error
                 *ngIf="
-                    noProjectInfo && (projectName.dirty || projectName.touched)
+                    (projectName.invalid &&
+                        (projectName.dirty || projectName.touched)) ||
+                    notExist
                 "
                 class="tooltip-content">
-                {{ noProjectInfo | translate }}
+                <ng-container *ngIf="projectName.invalid">
+                    {{ 'PROJECT.NAME_TOOLTIP' | translate }}
+                </ng-container>
+                <ng-container *ngIf="notExist">
+                    {{ 'REPLICATION.NO_PROJECT_INFO' | translate }}
+                </ng-container>
             </clr-control-error>
         </div>
     </div>

src/portal/src/app/shared/components/image-name-input/image-name-input.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
-import { debounceTime, switchMap } from 'rxjs/operators';
+import { debounceTime, finalize, switchMap } from 'rxjs/operators';
 import {
     AbstractControl,
     FormBuilder,
@@ -17,10 +17,11 @@ import { Project } from 'ng-swagger-gen/models/project';
     styleUrls: ['./image-name-input.component.scss'],
 })
 export class ImageNameInputComponent implements OnInit, OnDestroy {
-    noProjectInfo = '';
     selectedProjectList: Project[] = [];
     proNameChecker: Subject<string> = new Subject<string>();
     imageNameForm: FormGroup;
+    notExist: boolean = false;
+    checkingName: boolean = false;
     public project: string;
     public repo: string;
     public tag: string;
@@ -57,13 +58,16 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
             .pipe(debounceTime(200))
             .pipe(
                 switchMap(name => {
-                    this.noProjectInfo = '';
+                    this.notExist = false;
+                    this.checkingName = true;
                     this.selectedProjectList = [];
-                    return this.proService.listProjects({
+                    return this.proService
-                        name: name,
+                        .listProjects({
-                        page: 1,
+                            name: name,
-                        pageSize: 10,
+                            page: 1,
-                    });
+                            pageSize: 10,
+                        })
+                        .pipe(finalize(() => (this.checkingName = false)));
                 })
             )
             .subscribe(
@@ -76,18 +80,14 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
                                 data.name ===
                                 this.imageNameForm.controls['projectName'].value
                         );
-                        if (!exist) {
+                        this.notExist = !exist;
-                            this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
-                        } else {
-                            this.noProjectInfo = '';
-                        }
                     } else {
-                        this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
+                        this.notExist = true;
                     }
                 },
                 (error: any) => {
                     this.errorHandler.error(error);
-                    this.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
+                    this.notExist = true;
                 }
             );
     }
@@ -96,8 +96,6 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
         let cont = this.imageNameForm.controls['projectName'];
         if (cont && cont.valid) {
             this.proNameChecker.next(cont.value);
-        } else {
-            this.noProjectInfo = 'PROJECT.NAME_TOOLTIP';
         }
     }
 
@@ -126,6 +124,6 @@ export class ImageNameInputComponent implements OnInit, OnDestroy {
     selectedProjectName(projectName: string) {
         this.imageNameForm.controls['projectName'].setValue(projectName);
         this.selectedProjectList = [];
-        this.noProjectInfo = '';
+        this.notExist = false;
     }
 }

src/portal/src/i18n/lang/en-us-lang.json

@@ -601,7 +601,7 @@
         "JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
         "NO_ENDPOINT_INFO": "Please add an endpoint first",
         "NO_LABEL_INFO": "Please add a label first",
-        "NO_PROJECT_INFO": "This project is not exist",
+        "NO_PROJECT_INFO": "This project does not exist",
         "SOURCE_RESOURCE_FILTER": "Source resource filter",
         "SCHEDULED": "Scheduled",
         "MANUAL": "Manual",

src/portal/src/i18n/lang/es-es-lang.json

@@ -603,7 +603,7 @@
         "JOB_PLACEHOLDER": "We couldn't find any replication jobs!",
         "NO_ENDPOINT_INFO": "Please add an endpoint first",
         "NO_LABEL_INFO": "Please add a label first",
-        "NO_PROJECT_INFO": "This project is not exist",
+        "NO_PROJECT_INFO": "This project does not exist",
         "SOURCE_RESOURCE_FILTER": "Source resource filter",
         "SCHEDULED": "Scheduled",
         "MANUAL": "Manual",