Improve Azure block UI form fields

[discdiver]

First check

• [X] I added a descriptive title to this issue.
• [X] I used the GitHub search to find a similar issue and didn't find it.
• [X] I refreshed the page and this issue still occurred.
• [X] I checked if this issue was specific to the browser I was using by testing with a different browser.

Bug summary

As a user, I want to store code in an Azure storage block. I click to make a new Azure block. There are a lot of fields, most marked optional. The fields I need to fill in for a Storage block to work in a generic case are not grouped together. Names of several fields are similar - they all have "storage" in them. It's not a great user experience.

@rpeden suggested grouping the following fields together might be helpful.

The fields are:

1. Azure storage account key
2. Azure storage account name
3. Azure storage connection string

We could also add a note that those are the most commonly used fields (or that the other ones are less commonly needed).

Reproduction

Add a new Azure block from the UI.

Error

Browers

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge

Prefect version

Version:             2.9.0
API version:         0.8.4
Python version:      3.10.8
Git commit:          69f57bd5
Built:               Thu, Mar 30, 2023 1:08 PM
OS/Arch:             darwin/arm64
Profile:             default
Server type:         cloud

Additional context

No response

[discdiver]

Fields needed screenshot:

[pleek91]

The ui will respect property order if it's specified in the schema. And the labels are also part of the schema. So I don't think this is a ui issue unless I'm missing something.

[discdiver]

Thanks @pleek91. Gotcha. I think order is part of it. Also maybe some kind of helpful information about what's needed?

[rpeden]

Grouping them using BaseModels could probably work - I think to use this block either want client ID, tenant, ID, and client secret OR the other three, but not both at once. And using two separate BaseModels would make the UI display correctly.

But now that I think about it, that would alter the Python interface of the block so maybe not a change we can make easily. This might be something we need to solve by changing field order and updating with better descriptions.

[discdiver]

Can now confirm that after teaching this to a bunch of users, it was a confusing experience for them to know which fields to fill out - even with external slides showing which fields to use.

[desertaxle]

When the schema is saved in the DB, the order of properties has the potential to change depending on the database backing the Prefect API. For example, Postgres orders keys in jsonb fields by the number of characters. I think our best option is to add an additional field to the generated block schemas that communicates the desired order of the fields when rendering the form. @pleek91 If we added a property_ordering field to a schema, would it be straightforward to update the UI to order the generated form fields accordingly?

[zanieb]

@desertaxle #8177 / #8013

[discdiver]

Also applies to prefect-aws's AWS Credentials block. Several users at PACC SF had difficulty with knowing they could just use the following two fields for their credentials- one is at the very bottom of the form and one is close to the top.

AWS Access Key ID (Optional) and AWS Access Key Secret (Optional)

It would be good to group these two fields together toward the top of the form and maybe mention in the UI that those are the fields most people want.