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	250.93KB (+9.9KB +4.11%)	-
✅	mutation-test-elements.js	207.21KB (+8.85KB +4.46%)	-
✅	index.cjs	187.57KB (+8.82KB +4.93%)	-

Total files change +27.56KB +4.46%

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[hugo-vrijswijk]

I don't really understand the need for the currentPressedKeys here. The KeyboardEvent already has a e.ctrlKey, e.metaKey and e.key with which you have all you need, I think.

For the content of the search bar, it can be cleaner by using the input element value instead

[xandervedder]

For the content of the search bar, it can be cleaner by using the input element value instead

By using a ref?

[hugo-vrijswijk]

event.target.value should also work

[xandervedder]

wait, but we are doing that already, no?

  #handleSearch(event: KeyboardEvent) {
    if (!this.openPicker) {
      return;
    }

    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Tab') {
      return;
    }

    this.#filter((event.target as HTMLInputElement).value);
    this.fileIndex = 0;
  }

[hugo-vrijswijk]

Is this setTimeout needed because you are waiting for a re-render? I think it should be possible without and to let lit figure out the rendering from the state. Either by some state attributes or other matters

[xandervedder]

What do you think about this:

this.updateComplete.then(() => this.#focusInput());

[hugo-vrijswijk]

Rather than setting style directly I think it would be cleaner to have a state attribute of the mode, and render based on the value of the state. If you are mutating style directly you run the risk of forgetting to clean them up properly and having a "drift" as your component is being used

[xandervedder]

I see, but I'm not sure what the implementation would look like for this.

[hugo-vrijswijk]

closePicker could set a state attribute this.mode = 'closed';. And based on the mode you could set tailwind classes. Similar to the drawer component

[xandervedder]

But how would I set tailwind classes on the document element inside this component like that?

Sorry I am confusion 😅

[hugo-vrijswijk]

Oh wait. It's on document.body. You are confusion, but I am no paying attention

[hugo-vrijswijk]

This is a very low-level way of emulating user input. You can use the vitest API to more closely resemble actual user input in the browser: https://vitest.dev/guide/browser/interactivity-api.html