Infra proxy edit mode - added some UI improvements

[vinay033]

Signed-off-by: Vinay Sharma vsharma@chef.io

🔩 Description: What code changed, and why?

we need to fix the below-mentioned points

• In the Environment list/ Databag list/ client list page height of the search icon is overlapping the search bar border.
• CSS of create and edit pop-up of Databag as it overrides all other pop-ups CSS.
• Search buttons are not keyboard accessible.
• In Create Environment, disable create button if a name already exists.
• In create Environment, change the border color of the text-field when focused.
• Edit databag item -> open item details -> cursor is always pointer

⛓️ Related Resources

#4873

👍 Definition of Done

I have added some changes for the UI improvements.

👟 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/client-runs`
add some sample data and then test the changes using tab change

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

Go to the `infrastructure tab` from the top navigation bar then you can see the `Chef Server`
If you have data then you can see the list of servers --> then click to any of the server --> see the list of orgs 
--> click to any of org ---> you can see the multiple tabs --> you can test the individual points mentioned in the description.

✅ Checklist

• I have read the CONTRIBUTING document.
• Tests added/updated?
• Docs added/updated?
• All commits have been signed-off for the Developer Certification of Origin.

📷 Screenshots, if applicable

[netlify]

Deploy preview for chef-automate processing.

Building with commit 9b844d4

https://app.netlify.com/sites/chef-automate/deploys/606bcd800e4e490007a6da8a

[himanshi-chhabra]

Looks good to me

[SEAjamieD]

excellent - thank you for checking against existing names

[SEAjamieD]

Thanks for working on this @vinay033!

Many changes have been made to the styling of similar files in #4875. Please have a look at this PR and lets plan to merge #4875 before this one.

Change Request
In the Create Environment Modal, when a user adds a "space" in front of the desired name, it is seen as a new name. This should be trimmed in some fashion when checking for same name.

To reproduce
Navigate to an organization > environments > click "Create Environment"
Make a new environment with any name (ex. "mytest")
Make a second new environment using same name plus a space (ex. " mytest")
The warning goes away and you are allowed to create. Thankfully, the backend does not let a user create this name, but we should handle it on the front end as well.

[SEAjamieD]

Good job Vinay! 🎉

[SEAjamieD]

@vinay033 I rebased and corrected the merge conflicts and will merge as soon as tests pass 👍