Enable Vue 3 migration rollout for code review analytics

Brandon Labuschagnerequested to merge
614007-vue3-migrate-code-review-analytics into master

What does this MR do and why?

Enables the Vue 3 migration rollout for the project code review analytics page (ee/app/assets/javascripts/pages/projects/analytics/code_reviews/index, served by Projects::Analytics::CodeReviewsController#index).

This uses the vue3_migration.yml mechanism to opt the page into Vue 3 behind a feature flag. When vue3_migrate_code_review_analytics is enabled, Rails serves the Vue 3 (@vue/compat) chunk, otherwise the page continues to run on Vue 2.

What changed

  • Added config/feature_flags/beta/vue3_migrate_code_review_analytics.yml
  • Added ee/app/assets/javascripts/pages/projects/analytics/code_reviews/index/vue3_migration.yml with status: rollout

No JavaScript or controller changes are needed.

How to verify

  1. Enable the feature flag: Feature.enable(:vue3_migrate_code_review_analytics)
  2. Make sure the test project has a Premium or Ultimate license: the page is gated behind the code_review_analytics licensed feature and the controller's authorize_read_code_review_analytics! before_action, so a project without that license gets a 404.
  3. Navigate to the project's code review analytics page (Analyze > Code review analytics, /<group>/<project>/-/analytics/code_reviews)
  4. Open the browser console and confirm the message: [gitlab] [V] Using Vue.js 3
  5. Verify the merge requests in review table renders with review time, author, approvers, comments, commits, and line change columns
  6. Verify filtering by milestone and label updates the table and total count
  7. Verify paginating through merge requests loads the next page

Existing test coverage for the code review analytics page

For visibility while this rollout is in flight: what is and is not covered for this page today, independent of the Vue 3 mechanism.

Frontend unit tests (Jest), ee/spec/frontend/analytics/code_review_analytics/

  • components/app_spec.js covers the main app: rendering the filter bar, the loading state (spinner, no MR count badge, no table, no pagination), the loaded state with and without merge requests (empty state, MR count badge, table, pagination), and paging (dispatching setPage and fetchMergeRequests on pagination input).
  • components/merge_request_table_spec.js covers the table: rendering the GlTable, the correct headers, and the review time column formatting (days, hours, "< 1 hour", and the "-" fallback when review time is null).
  • components/approvers_column_spec.js covers the approvers column: the dash for an empty list, a single GlAvatarLink for one approver, and GlAvatarsInline with the collapsed/maxVisible behaviour for multiple approvers.
  • components/filter_bar_spec.js covers the filter bar: rendering FilteredSearchBar with terms-as-tokens, the initial milestone/label tokens from state, dispatching setFilters on search, and setting the milestone/label URL parameters.
  • store/actions_spec.js covers the root setFilters action committing SET_FILTERS.
  • store/modules/merge_requests/actions_spec.js covers the mergeRequests module actions: setProjectId, and fetchMergeRequests success and error paths.
  • utils_spec.js covers transformFilters: building the selected milestone/label state from query params, including the negation (not[...]) operators.

None of these files appear in scripts/frontend/quarantined_vue3_specs.txt (that file currently has no active entries), so they run and must pass in both the jest (Vue 2) and jest vue3 (@vue/compat) CI jobs.

Backend

  • ee/spec/requests/projects/analytics/code_reviews_controller_spec.rb covers #index: 200 for a reporter+ when code_review_analytics is licensed, 404 when the license is off, 404 for guests, and (in the type: :controller half) unique-visit and Snowplow/RedisHLL event tracking.
  • ee/spec/requests/api/analytics/code_review_analytics_spec.rb covers the underlying GET /analytics/code_review API the page calls: success for an authorized reporter, the returned MR fields and pagination headers, label/milestone filters and their negations, 403 for an unauthorized guest or when the license is off, and 400 when project_id is missing.
  • ee/spec/helpers/analytics/code_review_helper_spec.rb covers Analytics::CodeReviewHelper#code_review_app_data, the hash of paths and URLs passed to the Vue app, including the new_merge_request_url being nil when the source project is unavailable.

Feature (system) specs

  • ee/spec/features/analytics/code_analytics_spec.rb (:js) visits project_analytics_code_reviews_path and covers the filtered search bar rendering and its milestone/label hints, plus the empty state (with or without the "New merge request" button) for a regular user, an auditor who is or is not a project member, and a signed-out user.

QA / E2E

  • qa/qa/ee/page/project/sub_menus/analyze.rb defines a go_to_code_review_analytics page-object method for the "Code review analytics" menu item, but no QA spec calls it.

Not covered

  • No spec covers the store/modules/merge_requests mutations (SET_PROJECT_ID, REQUEST_MERGE_REQUESTS, RECEIVE_MERGE_REQUESTS_SUCCESS, RECEIVE_MERGE_REQUESTS_ERROR, SET_PAGE) directly, only indirectly through the actions and component specs.
  • No QA/E2E spec actually exercises the code review analytics page, only the page-object navigation method exists.
  • No feature spec exercises the merge requests table with data (rows, columns, filtering, or pagination) in a browser-level test; the existing feature spec only covers the filtered search bar and the empty state.

References

Merge request reports