Skip to content

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:

  1. Dashboard detail view: Uses <gl-experiment-badge> component for status badges (beta/experiment)
  2. 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.vue to 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.

Edited by 🤖 GitLab Bot 🤖