From ed7eab00e5ca1cfb46af3b24a1c24cdc064f4fc3 Mon Sep 17 00:00:00 2001 From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com> Date: Tue, 15 Nov 2022 14:19:10 +0100 Subject: [PATCH] forms updates (#275) --- .../add-token/add-token.component.html | 19 +++-- .../add-token/add-token.component.ts | 8 +++ .../delete-token/delete-token.component.html | 7 +- .../my-profile/my-profile.component.html | 67 +++++++++-------- .../my-profile/my-profile.component.ts | 8 +++ .../add-project-modal.component.html | 18 +++-- .../add-project-modal.component.ts | 8 +++ .../delete-project.component.html | 17 +++-- .../users/add-user/add-user.component.html | 42 +++++------ .../users/add-user/add-user.component.ts | 8 +++ .../delete-user/delete-user.component.html | 16 ++--- src/app/init-user/init-user.component.html | 59 ++++++++------- .../create-new-share-link.component.html | 12 ++-- .../delete-share-link.component.html | 16 ++--- src/app/login/login.component.html | 31 ++++---- .../add-new-scenario.component.html | 20 +++--- .../add-new.scenario.component.ts | 8 +++ .../add-new-item/add-new-item.component.html | 72 ++++++++----------- .../add-new-item/add-new-item.component.ts | 2 +- .../delete-scenario.component.html | 16 ++--- ...d-new-external-notification.component.html | 34 +++++---- ...add-new-external-notification.component.ts | 8 +++ .../scenario-settings.component.html | 5 ++ .../scenario-settings.component.ts | 26 +++---- .../delete-item/delete-item.component.html | 16 ++--- .../edit-item/edit-item.component.html | 42 +++++------ .../project-settings.component.html | 16 ++--- .../project-settings.component.ts | 4 +- src/styles.scss | 13 +++- 29 files changed, 316 insertions(+), 302 deletions(-) diff --git a/src/app/administration/api-token/add-token/add-token.component.html b/src/app/administration/api-token/add-token/add-token.component.html index ca697dde..157449d0 100644 --- a/src/app/administration/api-token/add-token/add-token.component.html +++ b/src/app/administration/api-token/add-token/add-token.component.html @@ -7,18 +7,17 @@
-
-
- Description -
- + + +
- +
diff --git a/src/app/administration/api-token/add-token/add-token.component.ts b/src/app/administration/api-token/add-token/add-token.component.ts index d66d492e..58178c03 100644 --- a/src/app/administration/api-token/add-token/add-token.component.ts +++ b/src/app/administration/api-token/add-token/add-token.component.ts @@ -47,6 +47,7 @@ export class AddTokenComponent implements OnInit { } onSubmit() { + this.formCheck() if (this.myform.valid) { const { description } = this.myform.value; this.apiTokenService.createApiToken({ description }) @@ -61,4 +62,11 @@ export class AddTokenComponent implements OnInit { } } + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } + } diff --git a/src/app/administration/api-token/delete-token/delete-token.component.html b/src/app/administration/api-token/delete-token/delete-token.component.html index dacbd864..8273baeb 100644 --- a/src/app/administration/api-token/delete-token/delete-token.component.html +++ b/src/app/administration/api-token/delete-token/delete-token.component.html @@ -14,10 +14,11 @@
+
+

Please enter at least 5 characters...

+
-
-

Please enter at least 5 characters...

-
+
diff --git a/src/app/administration/my-profile/my-profile.component.html b/src/app/administration/my-profile/my-profile.component.html index 4bd0ed07..278282f1 100644 --- a/src/app/administration/my-profile/my-profile.component.html +++ b/src/app/administration/my-profile/my-profile.component.html @@ -16,47 +16,44 @@
Change password
-
-
- Current password -
- + + -
-
-
- New password + -
-
-
- Password Confirmation +
+ + + - -
- - -
diff --git a/src/app/administration/my-profile/my-profile.component.ts b/src/app/administration/my-profile/my-profile.component.ts index 7e090bab..496dfe6c 100644 --- a/src/app/administration/my-profile/my-profile.component.ts +++ b/src/app/administration/my-profile/my-profile.component.ts @@ -48,6 +48,7 @@ export class MyProfileComponent implements OnInit { } onSubmit() { + this.formCheck() if (this.myform.valid) { const { newPassword, currentPassword } = this.myform.value; this.authenticationService.changePassword({ newPassword, currentPassword }) @@ -60,5 +61,12 @@ export class MyProfileComponent implements OnInit { } } + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } + } diff --git a/src/app/administration/projects/add-project/add-project-modal.component.html b/src/app/administration/projects/add-project/add-project-modal.component.html index fb5ef894..8c0fa33e 100644 --- a/src/app/administration/projects/add-project/add-project-modal.component.html +++ b/src/app/administration/projects/add-project/add-project-modal.component.html @@ -7,17 +7,15 @@
-
-
- Project name -
- + + -
-
diff --git a/src/app/administration/projects/add-project/add-project-modal.component.ts b/src/app/administration/projects/add-project/add-project-modal.component.ts index 94fe5be0..929896ea 100644 --- a/src/app/administration/projects/add-project/add-project-modal.component.ts +++ b/src/app/administration/projects/add-project/add-project-modal.component.ts @@ -50,6 +50,7 @@ export class AddNewProjectComponent implements OnInit { } onSubmit() { + this.formCheck() if (this.myform.valid) { const { projectName } = this.myform.value; this.projectApiService.createNewProject({ projectName }) @@ -63,4 +64,11 @@ export class AddNewProjectComponent implements OnInit { this.modalService.dismissAll(); } } + + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } } diff --git a/src/app/administration/projects/delete-project/delete-project.component.html b/src/app/administration/projects/delete-project/delete-project.component.html index 62352491..fd0d308b 100644 --- a/src/app/administration/projects/delete-project/delete-project.component.html +++ b/src/app/administration/projects/delete-project/delete-project.component.html @@ -7,17 +7,16 @@
-

Please enter 5 random characters:

-
-
- Delete check -
-

+
+ + +
- +
diff --git a/src/app/administration/users/add-user/add-user.component.html b/src/app/administration/users/add-user/add-user.component.html index 01577120..8e4ed92d 100644 --- a/src/app/administration/users/add-user/add-user.component.html +++ b/src/app/administration/users/add-user/add-user.component.html @@ -7,39 +7,33 @@
-
-
- Username -
- + + -
-
-
- Password + -
-
-
-
Role
+
+ + + -
- -
diff --git a/src/app/administration/users/add-user/add-user.component.ts b/src/app/administration/users/add-user/add-user.component.ts index 1ca060e7..b9288d77 100644 --- a/src/app/administration/users/add-user/add-user.component.ts +++ b/src/app/administration/users/add-user/add-user.component.ts @@ -62,6 +62,7 @@ export class AddUserComponent implements OnInit { } onSubmit() { + this.formCheck() if (this.myform.valid) { const { username, password, role } = this.myform.value; this.userService.createNewUser({ username, password, role }) @@ -76,4 +77,11 @@ export class AddUserComponent implements OnInit { } } + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } + } diff --git a/src/app/administration/users/delete-user/delete-user.component.html b/src/app/administration/users/delete-user/delete-user.component.html index 7c99b615..1f88b82a 100644 --- a/src/app/administration/users/delete-user/delete-user.component.html +++ b/src/app/administration/users/delete-user/delete-user.component.html @@ -9,17 +9,15 @@

Are you sure you want to delete user: {{deleteUserInput.username}} ?

Deleting this user will delete {{deleteUserInput.tokenCount}} token(s) as well.

-

Please enter 5 random characters:

-
-
- Delete check -
- + + +
- +
diff --git a/src/app/init-user/init-user.component.html b/src/app/init-user/init-user.component.html index 44db19d7..6b698c6a 100644 --- a/src/app/init-user/init-user.component.html +++ b/src/app/init-user/init-user.component.html @@ -10,52 +10,49 @@
To proceed, please, create new credeti
- -
- -
- - +
+ -
- +
- - - -
- -
- +
+ -
+ + +
+
+ + + - - - +
{{error}}
diff --git a/src/app/item-detail/share/create-new-share-link/create-new-share-link.component.html b/src/app/item-detail/share/create-new-share-link/create-new-share-link.component.html index b7c6d507..c54e9245 100644 --- a/src/app/item-detail/share/create-new-share-link/create-new-share-link.component.html +++ b/src/app/item-detail/share/create-new-share-link/create-new-share-link.component.html @@ -12,14 +12,12 @@ By sharing this link you will grant anonymous access to this test run. Please add note to your link.

-
-
- Note +
+ + + - -
-
diff --git a/src/app/item-detail/share/delete-share-link/delete-share-link.component.html b/src/app/item-detail/share/delete-share-link/delete-share-link.component.html index bfcbf85d..c2304c04 100644 --- a/src/app/item-detail/share/delete-share-link/delete-share-link.component.html +++ b/src/app/item-detail/share/delete-share-link/delete-share-link.component.html @@ -11,17 +11,15 @@ By deleting this link you will immediately revoke its access to this test run.
-

Please enter 5 random characters to confirm this action:

-
-
- Delete check -
- + + +
- +
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index dbde1fb4..b16d0a93 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -7,27 +7,30 @@
Login
- -
- +
+ + + +
- -
- +
+ + + +
- -
diff --git a/src/app/project/new-scenario/add-new-scenario.component.html b/src/app/project/new-scenario/add-new-scenario.component.html index 390e9421..d4d35565 100644 --- a/src/app/project/new-scenario/add-new-scenario.component.html +++ b/src/app/project/new-scenario/add-new-scenario.component.html @@ -7,18 +7,16 @@
-
-
- Scenario Name -
- + + -
-
diff --git a/src/app/project/new-scenario/add-new.scenario.component.ts b/src/app/project/new-scenario/add-new.scenario.component.ts index f891b97f..a7d5696b 100644 --- a/src/app/project/new-scenario/add-new.scenario.component.ts +++ b/src/app/project/new-scenario/add-new.scenario.component.ts @@ -49,6 +49,7 @@ export class AddNewScenarioComponent implements OnInit { } onSubmit() { + this.formCheck(); if (this.myform.valid) { const { scenarioName } = this.myform.value; this.scenarioApiService.createNewScenario(this.projectName, { scenarioName }) @@ -62,4 +63,11 @@ export class AddNewScenarioComponent implements OnInit { this.modalService.dismissAll(); } } + + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } } diff --git a/src/app/scenario/add-new-item/add-new-item.component.html b/src/app/scenario/add-new-item/add-new-item.component.html index b14d0076..26cea8cf 100644 --- a/src/app/scenario/add-new-item/add-new-item.component.html +++ b/src/app/scenario/add-new-item/add-new-item.component.html @@ -5,72 +5,56 @@
- +
-
-
- KPI CSV file -
- + + -
-
-
- Montitoring CSV file + - +
+ +
-
-
- Environment -
- + + +
-
-
- Name -
- + +
-
-
- Note -
- + +
-
-
- Hostname -
- + +
-
-
-
Status
-
-
- - - -
diff --git a/src/app/scenario/add-new-item/add-new-item.component.ts b/src/app/scenario/add-new-item/add-new-item.component.ts index a415d933..544d6375 100644 --- a/src/app/scenario/add-new-item/add-new-item.component.ts +++ b/src/app/scenario/add-new-item/add-new-item.component.ts @@ -110,7 +110,7 @@ export class AddNewItemComponent implements OnInit { this.spinner.hide(); return this.itemsApiService.setData(message); }); - this.myform.reset({ environment: "", status: this.DEFAULT_STATUS, note: "", hostname: "" }); + this.myform.reset({ status: this.DEFAULT_STATUS, note: "", hostname: "" }); this.modalService.dismissAll(); } } diff --git a/src/app/scenario/delete-scenario/delete-scenario.component.html b/src/app/scenario/delete-scenario/delete-scenario.component.html index 750366a4..ef05449e 100644 --- a/src/app/scenario/delete-scenario/delete-scenario.component.html +++ b/src/app/scenario/delete-scenario/delete-scenario.component.html @@ -7,17 +7,15 @@
-

Please enter 5 random characters:

-
-
- Delete check -
- + + +
- +
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html index f8320d21..c2adb51f 100644 --- a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html +++ b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.html @@ -21,28 +21,26 @@ -
-
- Webhook Url -
- + + -
-
-
- Name + - -
- -
diff --git a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts index 9caa910e..68a5ed8c 100644 --- a/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts +++ b/src/app/scenario/external-notification/add-new-external-notification/add-new-external-notification.component.ts @@ -81,6 +81,7 @@ export class AddNewExternalNotificationComponent implements OnInit { } onSubmit() { + this.formCheck() if (this.myform.valid) { const { projectName, scenarioName } = this.params; const { url, notificationType, name } = this.myform.value @@ -104,4 +105,11 @@ export class AddNewExternalNotificationComponent implements OnInit { } } + formCheck() { + Object.keys(this.myform.controls).forEach(field => { + const control = this.myform.get(field); + control.markAsTouched({ onlySelf: true }); + }); + } + } diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.html b/src/app/scenario/scenario-settings/scenario-settings.component.html index 0c999b13..22cc560c 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.html +++ b/src/app/scenario/scenario-settings/scenario-settings.component.html @@ -17,6 +17,11 @@
+
diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.ts b/src/app/scenario/scenario-settings/scenario-settings.component.ts index 3fd45b8c..71589414 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.ts +++ b/src/app/scenario/scenario-settings/scenario-settings.component.ts @@ -108,7 +108,9 @@ export class SettingsScenarioComponent implements OnInit { createFormControls(settings) { this.formControls.scenarioName = new FormControl(settings.name, [ - Validators.maxLength(100) + Validators.minLength(3), + Validators.maxLength(100), + Validators.required ]); this.formControls.percentile = new FormControl(settings.thresholds.percentile, [ Validators.min(0), @@ -147,17 +149,17 @@ export class SettingsScenarioComponent implements OnInit { Validators.required ]) - this.labelTrendChartControls.virtualUsers = new FormControl(settings.labelTrendChartSettings?.virtualUsers, []); - this.labelTrendChartControls.throughput = new FormControl(settings.labelTrendChartSettings?.throughput, []); - this.labelTrendChartControls.avgConnectionTime = new FormControl(settings.labelTrendChartSettings?.avgConnectionTime, []); - this.labelTrendChartControls.avgLatency = new FormControl(settings.labelTrendChartSettings?.avgLatency, []); - this.labelTrendChartControls.avgResponseTime = new FormControl(settings.labelTrendChartSettings?.avgResponseTime, []); - this.labelTrendChartControls.p90 = new FormControl(settings.labelTrendChartSettings?.p90, []); - this.labelTrendChartControls.p95 = new FormControl(settings.labelTrendChartSettings?.p95, []); - this.labelTrendChartControls.p99 = new FormControl(settings.labelTrendChartSettings?.p99, []); + this.labelTrendChartControls.virtualUsers = new FormControl(settings.labelTrendChartSettings?.virtualUsers, []); + this.labelTrendChartControls.throughput = new FormControl(settings.labelTrendChartSettings?.throughput, []); + this.labelTrendChartControls.avgConnectionTime = new FormControl(settings.labelTrendChartSettings?.avgConnectionTime, []); + this.labelTrendChartControls.avgLatency = new FormControl(settings.labelTrendChartSettings?.avgLatency, []); + this.labelTrendChartControls.avgResponseTime = new FormControl(settings.labelTrendChartSettings?.avgResponseTime, []); + this.labelTrendChartControls.p90 = new FormControl(settings.labelTrendChartSettings?.p90, []); + this.labelTrendChartControls.p95 = new FormControl(settings.labelTrendChartSettings?.p95, []); + this.labelTrendChartControls.p99 = new FormControl(settings.labelTrendChartSettings?.p99, []); this.labelTrendChartControls.errorRate = new FormControl(settings.labelTrendChartSettings?.errorRate, []); - - + + } createForm() { @@ -234,7 +236,7 @@ export class SettingsScenarioComponent implements OnInit { } } - addFieldValue(operator) { + addFieldValue(operator) { const element = document.getElementById("term") this.labelFilters.push(new FormArray([new FormControl(element.value,Validators.required), new FormControl(operator, Validators.required)])) element.value = "" diff --git a/src/app/shared/shared-item/delete-item/delete-item.component.html b/src/app/shared/shared-item/delete-item/delete-item.component.html index c50bc211..75e2fcc1 100644 --- a/src/app/shared/shared-item/delete-item/delete-item.component.html +++ b/src/app/shared/shared-item/delete-item/delete-item.component.html @@ -7,17 +7,15 @@
-

Please enter 5 random characters:

-
-
- Delete check -
- + + +
- +
diff --git a/src/app/shared/shared-item/edit-item/edit-item.component.html b/src/app/shared/shared-item/edit-item/edit-item.component.html index ce7b3673..0a9e80a1 100644 --- a/src/app/shared/shared-item/edit-item/edit-item.component.html +++ b/src/app/shared/shared-item/edit-item/edit-item.component.html @@ -5,37 +5,32 @@
- +
-
-
- Name -
- + +
-
-
- Note -
- + +
-
-
- Environment -
- + + -
-
-
- Hostname + - +
+ +
-
+
@@ -45,9 +40,6 @@ class="far fa-question-circle icon base-run-tooltip">
-
diff --git a/src/app/shared/shared-project/project-settings/project-settings.component.html b/src/app/shared/shared-project/project-settings/project-settings.component.html index faab9f71..f15304b3 100644 --- a/src/app/shared/shared-project/project-settings/project-settings.component.html +++ b/src/app/shared/shared-project/project-settings/project-settings.component.html @@ -13,16 +13,14 @@ - -
- -
@@ -32,7 +30,7 @@
Test Report Top Statistics Bar
Please choose up to 5 test report top statistics you would like to be displayed.
diff --git a/src/app/shared/shared-project/project-settings/project-settings.component.ts b/src/app/shared/shared-project/project-settings/project-settings.component.ts index 61ee839d..331afd92 100644 --- a/src/app/shared/shared-project/project-settings/project-settings.component.ts +++ b/src/app/shared/shared-project/project-settings/project-settings.component.ts @@ -65,7 +65,7 @@ export class ProjectSettingsComponent implements OnInit { this.formControls.scenarioUpsert = new FormControl(settings.upsertScenario, []) this.formControls.projectName = new FormControl(settings.projectName, [ Validators.required, - Validators.maxLength(100), + Validators.maxLength(50), Validators.minLength(3), ]); } @@ -126,7 +126,7 @@ export class ProjectSettingsComponent implements OnInit { isEditable() { const enabledMetrics = Object.values([this.formControls.virtualUsers, this.formControls.errorRate, this.formControls.percentile, this.formControls.throughput, this.formControls.network, this.formControls.avgLatency, this.formControls.avgResponseTime, - this.formControls.avgConnectionTime, this.formControls.errorRate, this.formControls.networkSent, this.formControls.networkReceived]) + this.formControls.avgConnectionTime, this.formControls.errorCount, this.formControls.networkSent, this.formControls.networkReceived]) .map(control => control.value).filter(value => value === true); this.metricsEditable = enabledMetrics.length > 5; } diff --git a/src/styles.scss b/src/styles.scss index 0efcc1dc..e4eee278 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -182,4 +182,15 @@ a:hover { .label-modal .modal-dialog{ max-width: 90% !important; -} \ No newline at end of file +} + +.form-validation-error { + font-size: 80%; + color: #dc3545; + margin-top: 0.25rem; +} + + +input.ng-invalid.ng-touched { + border-color: #dc3545; +}