Added validation on create pop-up, search bar inside org details

[himanshi-chhabra]

Signed-off-by: Himanshi Chhabra hchhabra@progress.com

🔩 Description: What code changed, and why?

• Add validation on name field for the create pop-up of Role/ Data bag / Data bag item/ Client/ Environment Tabs.
• Add validation on search box for Role/ Data bag item/ Client/ Environment Tabs.
• Add unit testcase for Validate of Role/ Data bag item/ Client/ Environment Tabs.
• Add validation on Run list search bar

⛓️ Related Resources

#4960

👍 Definition of Done

VALDATION:- Added validation that name can only contain alphabets a-z, A-Z, numbers 0-9, Underscore _, Hyphen -.

• Added this above validation on name/id field for the create pop-up of Role/ Data bag / Data bag item/ Client/ Environment Tabs.
• Added this above validation on search box for Role/ Data bag item/ Client/ Environment Tabs.
• Added unit testcase for above validation that form is valid or invalid of Role/ Data bag item/ Client/ Environment Tabs.
• Added the above validation on the Run list search bar.

👟 How to Build and Test the Change

STEP 1
inside the hab studio

[default:/src:0]# build components/automate-ui-devproxy/
[default:/src:0]# start_automate_ui_background
[default:/src:0]# start_all_services

STEP 2
open new window
go to automate UI path

$ cd components/automate-ui
and run the command 

npm run serve:hab

To add data https://github.com/chef/automate/blob/master/dev-docs/adding-data/adding_test_data.md#adding-data-to-infra-views
Steps to reproduce:

• Go To Infrastructure -> Chef Servers -> click server name-> click on org name ->
• Steps for Validate Create Role:
  1. Click Roles -> Create Role -> add name with test role -> show error -> name can only contain 'a-z', 'A-Z', '0-9', '_', '-'. and create button is disabled.
  2. add name with test_role-1::::: -> show error -> name can only contain 'a-z', 'A-Z', '0-9', '_', '-'. and create button is disabled.
  3. add name with test_role-1 -> no error.
  4. Same for others tab.
• Steps for Validate Search Role:
  1. Click Roles -> add text on search bar with test@role -> show error -> name can only contain 'a-z', 'A-Z', '0-9', '_', '-'. and search button is disabled.
  2. add name with test[role]-1::::: -> no roles available with this name.
  3. add name with test_role-1 -> no error.
  4. Same for others tab.
• Steps for Validate Run list search bar:
  1. Click Roles -> click Create Role -> add name and description -> click runlist
  2. add text on search bar with role(role-1 -> show error -> name can only contain 'a-z', 'A-Z', '0-9', '_', '-'.
  3. add name with test[role]-1 -> show Not available.
  4. add name with test_role-1 -> no error.

✅ Checklist

All PRs must tick these:

• I have read the CONTRIBUTING document.
• All commits signed-off for the Developer Certification of Origin.

With occasional exceptions, all PRs from Progress employees must tick these:

• Is the code clear? (complicated code or lots of comments--subdivide and use well-named methods, meaningful variable names, etc.)
• Consistency checked? (user notifications, user prompts, visual patterns, code patterns, variable names)
• Repeated code blocks eliminated? (adapt and reuse existing components, blocks, functions, etc.)
• Spelling, grammar, typos checked? (at a minimum use make spell in any component directory)
• Code well-formatted? (indents, line breaks, etc. improve rather than hinder readability)

All PRs from Progress employees should tick these if appropriate:

• Tests added/updated? (all new code needs new tests)
• Docs added/updated? (all customer-facing changes)

Please add a note next to any checkbox above if you are NOT ticking it.

📷 Screenshots, if applicable

name-valid.mp4

• For run list search:
  

[netlify]

Deploy preview for chef-automate processing.

Building with commit 0bf891f

https://app.netlify.com/sites/chef-automate/deploys/609a4576475ae40008b61cbf

[vinay033]

nice work @himanshi-chhabra 🎉

[chaitali-mane]

When I placed # at first place in textbox, will not throw error. But in search box, show error. Please find below recording.

Validation.mp4

[himanshi-chhabra]

When I placed # at first place in textbox, will not throw error. But in search box, show error. Please find below recording.

Validation.mp4

@chaitali-mane Update the changes

[chaitali-mane]

When put @ at first place , it's not show error but create button is disabled.

[himanshi-chhabra]

When put @ at first place , it's not show error but create button is disabled.

@chaitali-mane i have updated the changes.

[chaitali-mane]

Changes looks good to me , thanks @himanshi-chhabra