Added Improvement code for Edit Mode

[chaitali-mane]

Signed-off-by: Chaitali Mane cmane@progress.com

🔩 Description: What code changed, and why?

Added Environment related changes:

• Add no preview image in attributes tab if no JSON available
• Change border-size of details box 1px.
• When we click the button of edit or expand we have to click twice then the pop-up visible. need to update this.
• Edit, Expand, collapse buttons are not keyboard accessible.

⛓️ Related Resources

4873

👍 Definition of Done

• Added No preview Images for attributes tab if no JSON available.
• Some border style changes.
• Removed double click on Edit button.
• Added code to Edit, Expand, collapse buttons for keyboard accessible.
• Added validation on Edit modal Save button.
• Edit Cookbook Constraints modal, you can see data in name column.

👟 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

navigate to https://a2-dev.test/infrastructure/chef-servers
Go to the infrastructure tab from the top navigation bar then you can see the Chef Infra Server -> Chef Organization
-> Go to Environments tab

✅ 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.

[netlify]

Deploy preview for chef-automate processing.

Building with commit 3652919

https://app.netlify.com/sites/chef-automate/deploys/608979bc3abd090007ca0053

[vinay033]

LGTM 🎉

[himanshi-chhabra]

Looks good 🎉