Consistency improvement and minor bug fixes for auth UI pages #857

msorens · 2019-07-11T05:27:00Z

🔩 Description

In the course of acceptance testing, I started noticing some inconsistent wordings, and error triggers. This PR is a general cleanup of a host of little things across policies, projects, users, teams, and tokens (we don't have any forms for roles, so nothing there).

👍 Definition of Done

Cross-resource concerns

Pulled out common validation regexes used in multiple places into a single constants file, helpers/auth/regex.ts.
Ensure all error displays do not end in a period.
Ensure wording the same for same phrases.
Ensure consistent grammar "A team is..." vs. "Team is....".
Ensure note for each Validator reminds the developer which template to sync with.
Ensure consistent formatting of elements.
Ensure "Required" error msg omits the phrase "non-blank" (as it really doesn't add value).

Specific resource changes

CreateUser: now triggers error if the full name is just whitespace.
CreateUser: now triggers error if the user name is empty. (It turns out that a regex disallowing an empty string is not good enough!)
AddPolicyMember: reset "active" error (error against state of the data, not a typing error) as soon as user edits the value again. That way, when pressing "Add" again, the error will be able to go from invisible to visible, thus appearing again.
AddPolicyMember: now triggers error if the member expression is just whitespace.
AddPolicyMember: now triggers error if the member expression is empty.
CreateTeam: now triggers error if ID is invalid.
CreateTeam: now triggers error if ID exceeds 64 characters.
EditToken: hooked up present--but unused--validator, allowing removing manual check.

👟 Demo Script / Repro Steps

⛓️ Related Resources

✅ Checklist

Necessary tests added/updated?
Necessary docs added/updated?
Code actually executed?
Vetting performed (unit tests, lint, etc.)?

msorens · 2019-07-11T05:32:14Z

components/automate-ui/src/app/helpers/auth/regex.ts

@@ -0,0 +1,12 @@
+export class Regex {


PR was getting big enough, but probably should rename this class to Constants so in addition to patterns could also have:

messages, for things like "Only lowercase letters, numbers, and hyphens(-) are allowed." and "must be 64 characters or less"

numbers, for things like the 64 that is used multiple times in Validators.maxLength(64)

msorens · 2019-07-11T05:33:27Z

components/automate-ui/src/app/pages/api-token/details/api-token-details.component.html

@@ -35,7 +35,7 @@
          <input chefInput formControlName="name" type="text" (keyup)="handleNameChange()">
        </chef-form-field>
      </form>
-      <chef-button primary [disabled]="disableSave || saveInProgress" (click)="saveNameChange()">
+      <chef-button primary [disabled]="!updateNameForm.valid || disableSave || saveInProgress" (click)="saveNameChange()">


Validator was defined in ts file but not used.

msorens · 2019-07-11T05:33:46Z

components/automate-ui/src/app/pages/api-token/details/api-token-details.component.ts

@@ -65,8 +66,7 @@ export class ApiTokenDetailsComponent implements OnInit, OnDestroy {
    }

    public handleNameChange(): void {
-      this.disableSave = this.updateNameForm.controls['name'].value === this.token.name ||
-                         this.updateNameForm.controls['name'].value.trim() === '';


This check is now handled automatically by Validator.

msorens · 2019-07-11T05:34:01Z

components/automate-ui/src/app/pages/api-token/list/api-token-list.component.ts

@@ -20,8 +21,6 @@ import {
 import { CreateToken } from 'app/entities/api-tokens/api-token.actions';
 import { saveStatus, saveError } from 'app/entities/api-tokens/api-token.selectors';

-const ID_PATTERN = '[0-9a-z-]+';


Magic value--boom!

msorens · 2019-07-11T05:34:57Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.ts

@@ -72,7 +73,8 @@ export class PolicyAddMembersComponent implements OnInit, OnDestroy {
    fb: FormBuilder) {

    this.expressionForm = fb.group({
-      expression: ['', Validators.required]
+      // Must stay in sync with error checks in policy-add-members.component.html
+      expression: ['', [Validators.required, Validators.pattern(Regex.patterns.NON_BLANK)]]


Yes, required is still needed even if pattern disallows an empty string.

msorens · 2019-07-11T05:35:30Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.html

@@ -18,10 +18,14 @@ <h2>Add Member Expression</h2>
          <form [formGroup]="expressionForm">
            <chef-form-field>
              <label>Member expression *</label>
-              <input chefInput formControlName="expression" type="text">
+              <input chefInput formControlName="expression" type="text" (keyup)="resetErrors()" >


As soon as the value is edited, clear the error so it can then appear again if it needs to later.

msorens · 2019-07-11T05:35:48Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.ts

-    this.duplicateMember = member.name in this.membersAvailableMap;
-    if (this.duplicateMember) {
+    if (member.name in this.membersAvailableMap) {
+      this.duplicateMember = true;


Make code parallel to rest of function.

msorens · 2019-07-11T05:35:56Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.ts

@@ -298,9 +304,6 @@ export class PolicyAddMembersComponent implements OnInit, OnDestroy {
        return;
      }
    });
-    if (this.alreadyPolicyMember) {
-      return;


Unreachable code

srenatus

Nitpicks only. thanks!

srenatus · 2019-07-11T08:09:49Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.html

              <chef-error *ngIf="unparsableMember">Invalid member expression.</chef-error>
              <chef-error *ngIf="duplicateMember">Member expression already in table.</chef-error>
              <chef-error *ngIf="alreadyPolicyMember">Member already in policy.</chef-error>
+                <chef-error *ngIf="(expressionForm.get('expression').hasError('required') || expressionForm.get('expression').hasError('pattern')) && expressionForm.get('expression').dirty">


We don't incude dirty in the other *ngIfs -- is that a special thing here?

Yes, it is--meant to add a pre-review comment there. The first three can only ever occur by someone actively pressing "Add", so they cannot show up by themselves on page load, and thus no need of ngIf. The latter is, like in all the other files, needing of the dirty flag so that the error does not show up upon page load.

srenatus · 2019-07-11T08:10:03Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.html

+                <chef-error *ngIf="(expressionForm.get('expression').hasError('required') || expressionForm.get('expression').hasError('pattern')) && expressionForm.get('expression').dirty">
+                  Expression is required
+                </chef-error>
+


[nit] indentation looks off, and this extra line can go

srenatus · 2019-07-11T08:10:38Z

components/automate-ui/src/app/pages/policy/add-members/policy-add-members.component.ts

@@ -72,7 +73,8 @@ export class PolicyAddMembersComponent implements OnInit, OnDestroy {
    fb: FormBuilder) {

    this.expressionForm = fb.group({
-      expression: ['', Validators.required]
+      // Must stay in sync with error checks in policy-add-members.component.html


🤔 Can't we centralize the entire ['', [Validators.required, Validators.pattern(Regex.patterns.NON_BLANK)]] array, then?

Indeed... another candidate for the Constants file I mentioned above; maybe next PR, though...?

susanev

➡️ Can we please get periods at the end of all of our error messages? ⬅️

susanev · 2019-07-11T21:18:24Z

components/automate-ui/src/app/pages/team-create/team-create.component.html

-                  A non-blank team {{ versionedNameOrId }} is required
-                </chef-error>
+              <chef-error *ngIf="teamCreateForm.get('teamId').hasError('required') && teamCreateForm.get('teamId').dirty">
+                Team {{ versionedNameOrId }} is required


so... i think this is fine. but the form labels are Team ID and Name so its a bit weird that the error text uses Team ID and Team name and there is a disconnect there. if we can make those consistent, that would be rad.

Fixed it both for team create and team edit. 👍

susanev · 2019-07-11T21:20:55Z

components/automate-ui/src/app/pages/user-management/user-form/user-form.component.html

-    <chef-error *ngIf="createUserForm.get('username').hasError('pattern') && createUserForm.get('username').dirty">Invalid
-      username</chef-error>
+    <chef-error *ngIf="(createUserForm.get('username').hasError('required') || createUserForm.get('username').hasError('pattern')) && createUserForm.get('username').dirty">
+      Invalid username


can we be more specific here? this error text isn't very helpful...

Split required and pattern to allow giving two specific error messages. 👍

Signed-off-by: michael sorens <msorens@chef.io>

Also added missing 'required' check for username. It turns out that a regex that disallows an empty string is not good enough! That does not trigger a regex failure. Signed-off-by: michael sorens <msorens@chef.io>

Also added missing 'required' check in HTML template. Signed-off-by: michael sorens <msorens@chef.io>

- Delete unreachable code - Parallelize conditionals Signed-off-by: michael sorens <msorens@chef.io>

Signed-off-by: michael sorens <msorens@chef.io>

- The input field actually did disable for an empty input, but presented no error indicator. - Also adding a check for whitespace only being invalid. Signed-off-by: michael sorens <msorens@chef.io>

Signed-off-by: michael sorens <msorens@chef.io>

Doing so, could then remove redundant "manual" check for empty value Signed-off-by: michael sorens <msorens@chef.io>

Ensure: - all error displays do not end in a period - wording the same for same phrases - consistent grammar "A team is..." vs. "Team is...." - note for each Validator identifies which template to sync with - Consistent formatting of <chef-error> elements - "Required" error msg omits the phrase "non-blank" (doesn't add value) Signed-off-by: michael sorens <msorens@chef.io>

Signed-off-by: michael sorens <msorens@chef.io>

A general enhancement in the spirit of this PR though not quite related to the rest of them; I had this lying around for awhile and decided to include it. Signed-off-by: michael sorens <msorens@chef.io>

msorens added automate-auth ui automate-ui chore labels Jul 11, 2019

msorens self-assigned this Jul 11, 2019

msorens requested a review from a team July 11, 2019 05:28

msorens commented Jul 11, 2019

View reviewed changes

srenatus approved these changes Jul 11, 2019

View reviewed changes

susanev self-requested a review July 11, 2019 18:24

susanev added the auth-team anything that needs to be on the auth team board label Jul 11, 2019

susanev approved these changes Jul 11, 2019

View reviewed changes

msorens added the DO-NOT-MERGE label Jul 12, 2019

msorens added 13 commits July 14, 2019 08:43

Consolidate common non-blank regex in UI

da7d58b

Signed-off-by: michael sorens <msorens@chef.io>

Add standard non-blank check to CreateUser

74d2ce3

Also added missing 'required' check for username. It turns out that a regex that disallows an empty string is not good enough! That does not trigger a regex failure. Signed-off-by: michael sorens <msorens@chef.io>

Consolidate common ID regex in UI

2f598df

Also added missing 'required' check in HTML template. Signed-off-by: michael sorens <msorens@chef.io>

Minor cleanup

3de161f

- Delete unreachable code - Parallelize conditionals Signed-off-by: michael sorens <msorens@chef.io>

Reset error indicator when user changes value

6f8bad0

Signed-off-by: michael sorens <msorens@chef.io>

Add error indicator for empty or whitespace

79c2be7

- The input field actually did disable for an empty input, but presented no error indicator. - Also adding a check for whitespace only being invalid. Signed-off-by: michael sorens <msorens@chef.io>

Sync create team error displays with code

40fb4e6

Signed-off-by: michael sorens <msorens@chef.io>

Hookup unused validator

863f116

Doing so, could then remove redundant "manual" check for empty value Signed-off-by: michael sorens <msorens@chef.io>

Ensure all error messages end with period.

1b4aa04

Signed-off-by: michael sorens <msorens@chef.io>

Use consistent case and words for team create/edit

68ee175

Signed-off-by: michael sorens <msorens@chef.io>

More specific error text, and consistency on full name, too.

1939355

Signed-off-by: michael sorens <msorens@chef.io>

Drive-by to enhance pluralizer pipe

06e9172

A general enhancement in the spirit of this PR though not quite related to the rest of them; I had this lying around for awhile and decided to include it. Signed-off-by: michael sorens <msorens@chef.io>

msorens force-pushed the ms/auth-ui-fixes branch from e1bb740 to 06e9172 Compare July 14, 2019 21:49

msorens removed the DO-NOT-MERGE label Jul 14, 2019

msorens merged commit 4726585 into master Jul 15, 2019

chef-ci deleted the ms/auth-ui-fixes branch July 15, 2019 03:29

ekmixon mentioned this pull request May 14, 2022

[Snyk] Fix for 1 vulnerabilities ekmixon/automate#54

Open

ekmixon mentioned this pull request Nov 28, 2023

[Snyk] Fix for 21 vulnerabilities ekmixon/automate#139

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Consistency improvement and minor bug fixes for auth UI pages #857

Consistency improvement and minor bug fixes for auth UI pages #857

msorens commented Jul 11, 2019 •

edited

Loading

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

msorens Jul 11, 2019

srenatus left a comment

srenatus Jul 11, 2019

msorens Jul 11, 2019

srenatus Jul 11, 2019

srenatus Jul 11, 2019

msorens Jul 11, 2019

susanev left a comment

susanev Jul 11, 2019

msorens Jul 14, 2019

susanev Jul 11, 2019 •

edited

Loading

msorens Jul 14, 2019

Consistency improvement and minor bug fixes for auth UI pages #857

Consistency improvement and minor bug fixes for auth UI pages #857

Conversation

msorens commented Jul 11, 2019 • edited Loading

🔩 Description

👍 Definition of Done

Cross-resource concerns

Specific resource changes

👟 Demo Script / Repro Steps

⛓️ Related Resources

✅ Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

srenatus left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

susanev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

susanev Jul 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

msorens commented Jul 11, 2019 •

edited

Loading

susanev Jul 11, 2019 •

edited

Loading