feat(elements): add file picker

[xandervedder]

Adds a file picker to the report, which allows for easier keyboard traversing over the report.

related #3370

---

ToDo:

1. When report does not have any test files, it still shows 'all tests" in the picker but it redirects to an empty page.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c130092. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
nx run-many --target=stryker --projects=metrics,elements,real-time -- --incremental

✅ Successfully ran 1 target

• nx affected --target=lint:prettier,lint,build,test

---

Sent with 💌 from NxCloud.

[xandervedder]

It seems like we cannot update the screenshots anymore due to Nx Cloud:

https://github.com/stryker-mutator/mutation-testing-elements/actions/runs/11070168343/job/30759261813

NX Nx Cloud: Workspace is disabled

[hugo-vrijswijk]

It seems like we cannot update the screenshots anymore due to Nx Cloud:

https://github.com/stryker-mutator/mutation-testing-elements/actions/runs/11070168343/job/30759261813

NX Nx Cloud: Workspace is disabled

You still can. Nx cloud is IMO not very friendly for open-source projects. Everything still works the same. You can update screenshots by running the workflow action on your branch. You might have to bring your branch up to date with master first

[bundlemon]

BundleMon (elements)

Files updated (3)

Status	Path	Size	Limits
✅	index.js	255.61KB (+10.68KB +4.36%)	-
✅	index.cjs	191.56KB (+9.59KB +5.27%)	-
✅	mutation-test-elements.js	211.13KB (+9.47KB +4.7%)	-

Total files change +29.75KB +4.73%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[hugo-vrijswijk]

I played around with it a little bit, but I think it doesn't fully work as it should yet.

I'm also wondering if you could get nice behaviour by default by using the html dialog element

1: Opening the search icon and pressing Enter right away navigates to the first file, but doesn't dismiss the file picker. Also, I think opening the file-picker should focus the search-box. You can use the property autofocus on the input element for that.

Screen.Recording.2024-11-12.at.12.50.08.mov

2: Navigation doesn't always work with relative url's. Not sure why this works in some reports, but not in others.

Screen.Recording.2024-11-12.at.12.51.58.mov

3: Partial search does not work as expected. Ideally the search would be case-insensitive, too

Screen.Recording.2024-11-12.at.12.54.24.mov

[xandervedder]

Should be fixed now, I tried using the dialog element but it broke too much which is why I dropped it for now.

[hugo-vrijswijk]

Sorry for the back-and-forth with review comments. I took a bit of a closer look this time. If everything is resolved I think you can merge this. It's an awesome feature!

I think the dialog should be a separate experiment PR

[hugo-vrijswijk]

LGTM. Great work!