Add visible labels to resource select component and filter dialog

[adamint]

Fixes #3396, we need to have visible labels for interactive components. We also had several kinds of All/None options, so I standardized these into (All) and (None)

I added labels to the inputs in FilterDialog and made them the same width.

The resource select also has a label to its left.

I removed the label to the right of the resource select on the console log page when there is no resource selected, as it just mentioned that there was no resource selected, which is redundant with the select's (None) selected text.

Microsoft Reviewers: Open in CodeFlow

[adamint]

@tlmii @JamesNK

[JamesNK]

"Select a resource" is slightly higher than center. For some reason CSS adds a small margin:

Override the CSS when inside the toolbar to have no margin top or bottom.

Structured logs page has "Level:" with a colon. Should stay consistent with that. Add colon after "Select a resource".

Also, the "Level:" here isn't a label. It should probably be.

[adamint]

@JamesNK I just want to confirm that !important is necessary since fluentui-blazor uses a class and attribute selector (.fluent-input-label[attribute])? If not, do you know how to avoid !important here?

[tlmii]

@JamesNK I just want to confirm that !important is necessary since fluentui-blazor uses a class and attribute selector (.fluent-input-label[attribute])? If not, do you know how to avoid !important here?

Making the selector .layout fluent-toolbar > .fluent-input-label would give it a specificity of 21, beating the built-in rule's specificity of 20. Seems like a superfluous addition, but it does make a difference and avoids the !important which always feels like a code smell.

That misalignment feels like its a bug in the library, though, since we're just using the Label attribute of the FluentSelect component and its generating the rest. @vnbaaij thoughts on that?

[vnbaaij]

Structured logs page has "Level:" with a colon. Should stay consistent with that. Add colon after "Select a resource".

Also, the "Level:" here isn't a label. It should probably be.

In the Fluent 2 guides (https://fluent2.microsoft.design/components/web/react/field/usage#layout) no colons are used for labels. I would rather remove them instead of adding them.

[adamint]

Removed colons @vnbaaij, @tlmii switched selectors

[vnbaaij]

That misalignment feels like its a bug in the library, though, since we're just using the Label attribute of the FluentSelect component and its generating the rest. @vnbaaij thoughts on that?

Going with the Fluent 2 desing, we assume the label is placed above the component it belongs to. We need that margin-bottom to prevent things from getting too cramped:

What I started doing based on this issue, was adding a Orientation parameter to the FluentInputLabel (which is the component being rendered when you set the Label on the FluentSelect) that will add a 'fluent-input-label-horizontal' class (setting margin-bottom: 0;) in the case of setting it to Orientation.Horizontal.
Now, while that is a nice addition, it has no use in this case as you are setting the Label property on the Select and there is no way to specify the orientation.
When this addition is included in the library, you could remove the Label parameter from the Select and add a FluentInputLabel with a Orientation="Orientation.Horizontal" manually:

[vnbaaij]

PR: microsoft/fluentui-blazor#1994

[adamint]

@vnbaaij @JamesNK resurrecting this after the last pr got merged. Same changes (after prior feedback applied), and uses the same (All) and (None) strings everywhere.

[vnbaaij]

@adamint sorry, but I don't understand what exactly is the issue now (going on these screenshots). Can you clarify?

[adamint]

@vnbaaij #3396 is still active, this PR adds labels to the filter dialog input components, as well as the resource select

[adamint]

@JamesNK as well

[JamesNK]

Change "Select a resource" to "Resource" on all the pages:

This is consistent with other UI in the toolbar, e.g. there is just the text "Filter", not "Select a filter".

Remove "Value" placeholder:

The other fields here are pre-selected. It could be confusing that value is also pre-selected.

I think after these changes this is ready to merge.

[adamint]

Change "Select a resource" to "Resource" on all the pages: This is consistent with other UI in the toolbar, e.g. there is just the text "Filter", not "Select a filter".

Remove "Value" placeholder: The other fields here are pre-selected. It could be confusing that value is also pre-selected.

I think after these changes this is ready to merge.

Changed both @JamesNK