Fix Vue 3 recent searches dropdown via explicit event push
What does this MR do and why?
(Alternative approach to !251466 (closed), which fixes the same bug: on Vue 3, the "recent searches" dropdown of the legacy filtered search always shows no recent searches)
This moves the RecentSearchesRoot from implicit reactive object to events.
When we mounts a Vue instance with data() { return state }. On Vue 2, data() makes that object reactive in place, so a later write to store.state (for example from the async local-storage fetch in FilteredSearchManager#setup) is seen by the component. On Vue 3, data() wraps the object in a Proxy instead, so writes to the original state reference never reach the rendered view.
This MR pushes updates through the filtered_search/event_hub.js instead. FilteredSearchManager and RecentSearchesRoot for two other events: the manager emits recent-searches-updated after every store mutation, and the root does this.vm.recentSearches = searches directly.
Add a new feature spec to prevent regressions on this fix.
References
How to set up and validate locally
- Visit a project's Issue Analytics page (
/:namespace/:project/-/analytics/issues), which runs under thevue3_migrate_issues_analyticsfeature flag. - Perform a search (for example
assignee:none). - Reload the page and open the "Recent searches" dropdown — the search should be listed.
- See
spec/frontend/filtered_search/recent_searches_root_spec.jsandee/spec/features/projects/analytics/issues_analytics_controller_spec.rbfor automated coverage of the same flow.
![]() |
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist.
