In the UI show test report when clicking on a test

[noam-honig]

Clear and concise description of the problem

Currently when I use the UI with the --ui flag, when I click a test on the UI nothing happens, there's a button to show the source code - but that's less useful (and also doesn't show the source of the test, just the source of the entire file)
There is an "Open test details" that is available only on the test file level - the same icon on the test level does the "show code" functionality.

Suggested solution

The dream would be to click a test and see why it failed.

When I click on the test in the left panel, show that specific test's report.
If I had my way, the tabs should be "Report" "Console" (also preferrably for the clicked test only) than code and module graph.

Checkout this stackblitz to see my current experience:
https://stackblitz.com/edit/api-test-example-qrjqcu?file=test.spec.ts

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[jycouet]

This would improve the UI and make it more usefull 👍
Thx

[pav-stastny]

It was really confusing for me, why clicking in the list does "nothing". Probabyl one small improvement before fully integrationg the suggestion, would be to handle click on list item same as the click on the ICON. Currently there is a cursor hinting interactive list element, but it does nothing.

[noam-honig]

@pav-stastny Yes but :)
on a file line - it opens the report tab, on a test line it opens the code tab (and doesn't even focus on the code for that test)

Quick solution, have it open the report tab for that test or if not possible, for the file.

Thanks

[joshuahhh]

This is especially bad because tests have cursor: pointer, which is supposed to mean the element is clickable, but it's not.

[sheremet-va]

Fixes by #6900