Unify the filtering UI pattern across hosted and remote instance list pages
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 149
Description
Hosted and remote instance pages use slightly different UI patterns for filtering, and we should converge on one.
## Current differences
* **Remote instances** (`DevicesBrowser.vue`): The filter button says "Filter" and opens a popover with both status filters (Running, Error, Not Running) and mode filters (Fleet Mode, Developer Mode). This is the more flexible pattern since it can accommodate additional filter types.
* **Team hosted instances** (`pages/team/Instances.vue`): The filter button says "Status" and only offers status group filters (Running, Error, Not Running).
* **Application hosted instances** (`pages/application/Overview.vue`): Same as team hosted instances, button says "Status" with the same status group filters.
## What we want
* Adopt the remote instances pattern (generic "Filter" button with an extensible popover) as the standard across all instance list pages
* Both hosted and remote instance pages should use the same filter component/pattern so adding new filter types in the future is straightforward
* The filter button should show "Filter" (not "Status") and support multiple filter categories
Depends on #8114 for the backend filtering support.
Contributor guide
Assessment
This issue has not been assessed yet.