Merge branch '230757-tabs-haml-migrate-milestones_filter-html-haml' into 'master'

Migrate milestone filter Bootstrap tabs to GlTabs

See merge request gitlab-org/gitlab!71710

app/helpers/timeboxes_helper.rb

@@ -78,19 +78,6 @@ module TimeboxesHelper
   end
   # rubocop: enable CodeReuse/ActiveRecord
 
-  # Show 'active' class if provided GET param matches check
-  # `or_blank` allows the function to return 'active' when given an empty param
-  # Could be refactored to be simpler but that may make it harder to read
-  def milestone_class_for_state(param, check, match_blank_param = false)
-    if match_blank_param
-      'active' if param.blank? || param == check
-    elsif param == check
-      'active'
-    else
-      check
-    end
-  end
-
   def milestone_progress_tooltip_text(milestone)
     has_issues = milestone.total_issues_count > 0
 

app/views/shared/_milestones_filter.html.haml

-%ul.nav-links.mobile-separator.nav.nav-tabs
-  %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
-    = link_to milestones_filter_path(state: 'opened') do
+-  count_badge_classes = 'badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex'
+
+= gl_tabs_nav( {class: 'gl-border-b-0 gl-flex-grow-1', data: { testid: 'milestones-filter' } } ) do
+  = gl_tab_link_to milestones_filter_path(state: 'opened'), { item_active: params[:state].blank? || params[:state] == 'opened' } do
     = _('Open')
-      %span.badge.badge-pill= counts[:opened]
-  %li{ class: milestone_class_for_state(params[:state], 'closed') }>
-    = link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc') do
+    %span{ class: count_badge_classes }
+      = counts[:opened]
+  = gl_tab_link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc'), { item_active: params[:state] == 'closed' } do
     = _('Closed')
-      %span.badge.badge-pill= counts[:closed]
-  %li{ class: milestone_class_for_state(params[:state], 'all') }>
-    = link_to milestones_filter_path(state: 'all', sort: 'due_date_desc') do
+    %span{ class: count_badge_classes }
+      = counts[:closed]
+  = gl_tab_link_to milestones_filter_path(state: 'all', sort: 'due_date_desc'), { item_active: params[:state] == 'all' } do
     = _('All')
-      %span.badge.badge-pill= counts[:all]
+    %span{ class: count_badge_classes }
+      = counts[:all]

spec/controllers/dashboard/milestones_controller_spec.rb

@@ -65,11 +65,12 @@ RSpec.describe Dashboard::MilestonesController do
       expect(response.body).not_to include(project_milestone.title)
     end
 
-    it 'shows counts of open and closed group and project milestones to which the user belongs to' do
+    it 'shows counts of open/closed/all group and project milestones to which the user belongs to' do
       get :index
 
-      expect(response.body).to include("Open\n<span class=\"badge badge-pill\">2</span>")
-      expect(response.body).to include("Closed\n<span class=\"badge badge-pill\">2</span>")
+      expect(response.body).to have_content('Open 2')
+      expect(response.body).to have_content('Closed 2')
+      expect(response.body).to have_content('All 4')
     end
 
     context 'external authorization' do

spec/features/groups/milestone_spec.rb

@@ -98,9 +98,11 @@ RSpec.describe 'Group milestones' do
       end
 
       it 'counts milestones correctly' do
-        expect(find('.top-area .active .badge').text).to eq("3")
-        expect(find('.top-area .closed .badge').text).to eq("3")
-        expect(find('.top-area .all .badge').text).to eq("6")
+        page.within '[data-testid="milestones-filter"]' do
+          expect(page).to have_content('Open 3')
+          expect(page).to have_content('Closed 3')
+          expect(page).to have_content('All 6')
+        end
       end
 
       it 'lists group and project milestones' do