View details with row click

[JamesNK]

Use new OnRowClick feature in FluentUI to show details on pages:

• Resources
• Structured logs
• Traces
• Trace detail (already had row click, moves feature to row instead of cell)

Clickable UI on rows takes precedent. For example, clicking on a resource endpoint URL will launch a new browser to that URL. It doesn't open the detail view.

Changes:

• Add OnRowClick to data grids
• Add @onclick:stopPropagation="true" where required. Clicking on UI will bubble the event up until it stops. That means clicking on the View button triggers the button action and the row click action. The fix is to tell Blazor to stop propagating the event with the stopPropagation attribute.
• Re-enable pointer on grids with row click events

Demo:

Microsoft Reviewers: Open in CodeFlow

[ilmax]

Was wondering if it make sense to dismiss the details when pressing the Esc key.

[drewnoakes]

Was wondering if it make sense to dismiss the details when pressing the Esc key.

I think so. Perhaps clicking the resource a second time hides the details too.

[JamesNK]

ESC closing the details view isn't relevant to this PR. Please create a separate issue.

[drewnoakes]

I see the relevance being that it's now much easier to accidentally open the details pane by clicking in the grid. It's friendly to have escape get things back to "normal".

[JamesNK]

They're conceptually related, but this PR is focused on row clicks. If closing with ESC is done, it will be in a different PR.

[JamesNK]

Issue for shortcut to close details view: #5050

[JamesNK]

@leslierichardson95 Do you have any feedback on this UI change?

[leslierichardson95]

This change looks good to me! :)

[samsp-msft]

Love the interaction this enables 😸