Draft: Convert merge request dashboard search tab to Vue

Phil Hughesrequested to merge
ph/mergeRequestDashboardSearchVue into master

What does this MR do and why?

This merge request converts the Search tab of the merge request dashboard from a HAML-rendered page to a Vue component. The tab previously used the legacy droplab filtered search and Kaminari pagination. It now renders inside the dashboard's existing Vue router and reads the root-level GraphQL mergeRequests field, behind the default-off mr_dashboard_vue_search flag.

The new tab offers structured filters only: author, assignee, reviewer, approved-by, merge user, milestone, label, my reaction, draft, subscribed, and merged before/after dates. It does not support typed free text. The root GraphQL field has no search or in argument, because neither has an index to drive it at instance scope, so the tab drops typed text rather than sending a filter the backend ignores.

The page shows an empty state until you set a filter that narrows the result set. That field treats state alone as a filter, but a state-only query would scan every merge request on the instance, so the page waits for a narrowing filter before it queries. State itself moves out of the four tabs and into a filter token that defaults to open, and the tab carries no counts.

Unlike the dashboard's other tabs, this one is not kept alive, so results reload on every visit. Its queries use a second Apollo client, because the dashboard's own client concatenates pages and this list needs discrete ones.

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Enable the flag in the rails console: 
    Feature.enable(:mr_dashboard_vue_search)
  2. Visit http://gdk.test:3000/dashboard/merge_requests.
  3. Click the Search tab.
  4. Confirm the empty state asks for a filter, and that no GraphQL query fires until you set a narrowing filter.
  5. Set an assignee or author filter and confirm results load.
  6. Change the State filter between Open, Merged, Closed and All.
  7. Switch to another tab and back, and confirm the list reloads rather than showing cached results.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports