Update Fluent UI Blazor to v4.11.3

[vnbaaij]

Update @JamesNK

4.11.x changes FluentDataGrid to use table/tr/td instead of web components. A lot of custom CSS and JavaScript needs to react to the new elements and attributes in the HTML.

I've been through the app a number of times and tested every page that has grids. It looks ok to me, but I'm sure there are some outstanding issues. I think the best way to find them is merge and have bugs reported about dashboard issues.

---

Update @vnbaaij
If you'd like to know more about the why behind the FluentDataGrid change, see microsoft/fluentui-blazor#2667

Description

Initial work needed to move to the Fluent UI Blazor 4.11.0 release (not out yet). This is still in draft.

Fixes # (issue)

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Is this introducing a breaking change?
      • Yes
        • Link to aspire-docs issue (please use this breaking-change template):
      • No
        • Link to aspire-docs issue (please use this doc-idea template):
  • No

Microsoft Reviewers: Open in CodeFlow

[JamesNK]

Stop and Play icons are no longer found:

They're both the filled variant. Changing variant to regular makes them resolve. Perhaps there is a bug finding any filled icons.

[JamesNK]

Data grid is getting a margin-bottom from table rule in reboot.css:

[JamesNK]

First column on structured logs and traces isn't positioned correctly:

[JamesNK]

Many issues on trace details:

[JamesNK]

Bad colors in details view:

[JamesNK]

As mentioned offline, there are many CSS rules that include fluent-data-grid-*: https://github.com/search?q=repo%3Adotnet%2Faspire%20fluent-data-grid&type=code

They're all broken and will cause bugs.

[vnbaaij]

Stop and Play icons are no longer found:
They're both the filled variant. Changing variant to regular makes them resolve. Perhaps there is a bug finding any filled icons.

Yes, it is indeed a bug in selecting the right assembly to look in. Will be fixed for next build

[vnbaaij]

Data grid is getting a margin-bottom from table rule in reboot.css:

I'm setting margin-bottom: 0px for fluent-data-grid class (rendered table automatically always ets that class name) in the component style

[vnbaaij]

First column on structured logs and traces isn't positioned correctly:

In the pre v4.11 version, the button for the column was actually positioned against the left (no padding):

In the v4.11 version I've aligned the button as every other column (2nd image) by giving it an padding-inline-start:

We can solve by

1. remove padding-inline-start - Column heading is displayed differently compared to other columns
2. add padding-inline-start to the data entries as well - some horizontal screen estate is not used

What has preference?

[vnbaaij]

Bad colors in details view:

Fixed by setting GenerateHeader default value to Default instead of Sticky (a sticky header gets this backgound color now to indicate it is sticky):

[vnbaaij]

I've addressed most of the issues but would be good to go through a test together to see what needs to be fixed still. We do need to wait for a new version of the v4.11 packages to do so because we had to make some changes on our side as well.

[JamesNK]

@vnbaaij I've updated to 4.11.1 and fixed a lot more issues. I found one regression with empty rows (see microsoft/fluentui-blazor#3160)