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

  1. Visit a project's Issue Analytics page (/:namespace/:project/-/analytics/issues), which runs under the vue3_migrate_issues_analytics feature flag.
  2. Perform a search (for example assignee:none).
  3. Reload the page and open the "Recent searches" dropdown — the search should be listed.
  4. See spec/frontend/filtered_search/recent_searches_root_spec.js and ee/spec/features/projects/analytics/issues_analytics_controller_spec.rb for automated coverage of the same flow.
recent searches dropdown showing a saved search after reload

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Miguel Rincon

Merge request reports

Loading
Loading