Use consistent badge component for analytics dashboard status badges
Summary
This issue addresses a UI consistency concern identified in MR !199893 (merged). Currently, there's a discrepancy between the badge components used for displaying dashboard status in different parts of the analytics dashboards feature:
-
Dashboard detail view: Uses
<gl-experiment-badge>component for status badges (beta/experiment) -
Dashboard list view: Uses generic
<gl-badge>component for the same status information
Problem
The inconsistency creates a suboptimal user experience where the same information (dashboard status like "beta" or "experiment") is displayed using different visual components across the interface.
Current implementation in dashboard list:
<gl-badge v-if="statusBadge" data-testid="dashboard-status-badge" class="gl-ml-2">
{{ statusBadge }}
</gl-badge>
Expected implementation (consistent with dashboard detail view):
<gl-experiment-badge v-if="statusBadgeType" :type="statusBadgeType" />
Acceptance Criteria
-
Update ee/app/assets/javascripts/analytics/analytics_dashboards/components/list/dashboard_list_item.vueto use<gl-experiment-badge>instead of<gl-badge>for status badges -
Ensure the status badge type is properly mapped (e.g., "beta", "experiment") -
Maintain existing functionality and styling -
Update any related tests to reflect the component change -
Verify visual consistency between dashboard list and detail views
Technical Details
File to modify:
ee/app/assets/javascripts/analytics/analytics_dashboards/components/list/dashboard_list_item.vue
Component to replace:
- From:
<gl-badge>(line ~84) - To:
<gl-experiment-badge>
Related files for reference:
-
ee/app/assets/javascripts/analytics/analytics_dashboards/components/analytics_customizable_dashboard.vue(shows correct usage)
Context
This issue was created as a follow-up from the discussion in MR !199893 (merged) where @drosse identified the inconsistency and @jiaan agreed that using GlExperimentBadge consistently for all status badges would be the right approach.