mirror of
https://github.com/goharbor/harbor
synced 2025-04-17 18:13:59 +00:00
Improve input validator for copy-component (#17310)
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
parent
893cb0a655
commit
423647ea33
|
@ -46,7 +46,8 @@
|
|||
[disabled]="
|
||||
imageNameInput.projectName.invalid ||
|
||||
imageNameInput.repoName.invalid ||
|
||||
imageNameInput.noProjectInfo !== ''
|
||||
imageNameInput.notExist ||
|
||||
imageNameInput.checkingName
|
||||
"
|
||||
class="btn btn-primary"
|
||||
(click)="onRetag()">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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({
|
||||
name: name,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
return this.proService
|
||||
.listProjects({
|
||||
name: name,
|
||||
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.noProjectInfo = 'REPLICATION.NO_PROJECT_INFO';
|
||||
} else {
|
||||
this.noProjectInfo = '';
|
||||
}
|
||||
this.notExist = !exist;
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue
Block a user