feat(components): improve design of location filter

[JonasKellerer]

Resolves: #267

Summary

This is a draft of how an improved design of the location filter could look like with "react-select". It provides a simple api to create searchable select fields, which is less code to maintain.

Open points are:

• Is it required that users can delete single characters on their input? Currently, each time a new message must be typed. This is a shortcoming of "react-select"
• Do we need anything other, then the current display of the hierarchy? This is an easy solution and we would not need to provide anything other than the hierarchy to the component. Otherwise we would need the labels for each of the fields.

I will now look into downshift and see if this will be better. I also looked into headless-ui, but this is even more code to maintain, so I would only use it, if we have to.

Screenshot

Bildschirmaufzeichnung.vom.19.12.2024.09.11.13.webm

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 7, 2025 2:37pm

[github-actions]

This is a preview of the changelog of the next release. If this branch is not up-to-date with the current main branch, the changelog may not be accurate. Rebase your branch on the main branch to get the most accurate changelog.

Note that this might contain changes that are on main, but not yet released.

Changelog:

0.11.4 (2025-01-07)

Features

• components: improve design of location filter (fd73164), closes #267

Bug Fixes

• components: gs-aggregate: rerender when initialSortField or initialSortDirection changes (60d578f)

[JonasKellerer]

Now it looks like this:

When the user clears the selection using the "x" button or when the user deletes all characters and then blurs, a new event is fired with an empty filter. When the user clears single charcters, but does not select a new location, and then blurs, the selection is put back to the original value.

[anna-parker]

@JonasKellerer - I love that you were able to put the x before the dropdown button - is this because you imported the style sheet? Do you know if its possible to modify the location of the label with a style sheet as well? e.g. in #633

Also if you have time it would also be great if you could explain to me how you are using react in the webcomponents as Fabian told me this wasn't possible

[JonasKellerer]

Closing in favor of #638, which is the updated version using downshift.