Add a pipelines widget to the personal homepage

Marcel van Remmerdenrequested to merge
feature/homepage-pipelines-widget into master

What does this MR do and why?

The personal homepage currently surfaces merge requests, work items, to-dos, and activity, but gives no CI signal. This experimental widget shows whether the user's in-flight merge request pipelines are green without visiting each project.

Adds app/assets/javascripts/homepage/components/pipelines_widget.vue, rendered in the homepage sidebar below the Quick access widget. It lists the six most recent merge request pipelines the current user triggered, fetched from the instance-level GET /api/v4/pipelines endpoint with source=merge_request_event and per_page=6.

Each row links to the pipeline and shows:

  • the CI status icon rendered from the API's detailed_status object via the shared CiIcon component, with a fallback icon if the field is absent, so states like "passed with warnings" render correctly
  • the merge request title as the headline, falling back to the pipeline name, then the ref
  • a subline with the project namespace and name (name_with_namespace), matching how To-Do items present their parent
  • a relative timestamp

Loading skeletons, an empty state ("Pipelines for your merge requests will appear here."), and an error state follow the patterns of the other homepage widgets. The list refetches when the browser tab becomes visible again. Clicks are tracked with the existing user_follows_link_on_homepage internal event and a Pipelines label.

The widget is gated behind the new default-off wip feature flag homepage_pipelines_widget (actor: user), pushed from RootController. The homepage itself is behind the personal_homepage beta flag. No changelog entry, since the flag is default-off.

The widget degrades gracefully if a field is missing: the headline falls back and the status falls back to a neutral icon, so partial deployment of the underlying API changes does not break it. This branch depends on merged/production API support:

Tests

19 Jest unit tests for the widget, covering loading/empty/error states, request parameters, headline fallbacks, detailed-status rendering and its fallback, click tracking, and refetch on tab visibility. Also adds homepage app tests for the flag-enabled and flag-disabled states.

Screenshots

Widget Homepage
widget homepage

How to set up and validate locally

  1. In a rails console, enable both feature flags:

    Feature.enable(:personal_homepage)
Feature.enable(:homepage_pipelines_widget)

  2. Trigger or seed a few merge request pipelines as your user.

  3. Open the homepage and confirm the pipelines widget appears below the Quick access widget, showing your most recent merge request pipelines.

References

Edited by Marcel van Remmerden

Merge request reports