CI status on group details page

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Collaborate/take over this issue

Description

The CI badge / checkmark (build status) has been removed from the group details page in a recent update. It is there on the 'Your projects' view.

Proposal

Reinstate the CI checkmark on the group details page. UX should be same/similar to "Your projects" view of status. See #20450 (comment 1074859832)

Implementation plan

1. Add a ci_status field to the GroupChildEntity class. This will expose the latest CI status to the Frontend

on https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/serializers/group_child_entity.rb

expose :ci_status, unless: ->(_instance, _options) { project? } do |instance|
  instance.pipeline_status
end

Add specs on https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/serializers/group_child_entity_spec.rb

Verify the specs on https://gitlab.com/gitlab-org/gitlab/-/blob/master/spec/controllers/groups/children_controller_spec.rb work as intended and add more coverage

2. Add a new component to the group_item.vue component that contains the CI status, following the new name convention, you can call it item_ci_status.vue

3. Reuse the ci_icon.vue component to display the CI status inside the new item_ci_status.vue component. To get the status of the project, you can use the group property from the group_item.vue parent component

4. Create tests for the new item_ci_status.vue component and also the parent group_item.vue component

Links / references