Migrate jobs filter Bootstrap tabs to GlTabs

This change updates the classes used to render filter tabs for
jobs filters in each project and the admin section.

app/views/shared/builds/_tabs.html.haml

-%ul.nav-links.mobile-separator.nav.nav-tabs
-  %li{ class: active_when(scope.nil?) }>
-    = link_to build_path_proc.call(nil) do
-      All
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm.js-totalbuilds-count
-        = limited_counter_with_delimiter(all_builds)
+- count_badge_classes = 'badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex'
 
-  %li{ class: active_when(scope == 'pending') }>
-    = link_to build_path_proc.call('pending') do
-      Pending
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
-        = limited_counter_with_delimiter(all_builds.pending)
-
-  %li{ class: active_when(scope == 'running') }>
-    = link_to build_path_proc.call('running') do
-      Running
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
-        = limited_counter_with_delimiter(all_builds.running)
-
-  %li{ class: active_when(scope == 'finished') }>
-    = link_to build_path_proc.call('finished') do
-      Finished
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
-        = limited_counter_with_delimiter(all_builds.finished)
+= gl_tabs_nav( {class: 'gl-border-b-0 gl-flex-grow-1', data: { testid: 'jobs-tabs' } } ) do
+  = gl_tab_link_to build_path_proc.call(nil), { item_active: scope.nil? } do
+    = _('All')
+    %span{ class: count_badge_classes }
+      = limited_counter_with_delimiter(all_builds)
+  = gl_tab_link_to build_path_proc.call('pending'), { item_active: scope == 'pending' } do
+    = _('Pending')
+    %span{ class: count_badge_classes }
+      = limited_counter_with_delimiter(all_builds.pending)
+  = gl_tab_link_to build_path_proc.call('running'), { item_active: scope == 'running' } do
+    = _('Running')
+    %span{ class: count_badge_classes }
+      = limited_counter_with_delimiter(all_builds.running)
+  = gl_tab_link_to build_path_proc.call('finished'), { item_active: scope == 'finished' } do
+    = _('Finished')
+    %span{ class: count_badge_classes }
+      = limited_counter_with_delimiter(all_builds.finished)

spec/features/admin/admin_builds_spec.rb → spec/features/admin/admin_jobs_spec.rb

@@ -2,14 +2,14 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Admin Builds' do
+RSpec.describe 'Admin Jobs' do
   before do
     admin = create(:admin)
     sign_in(admin)
     gitlab_enable_admin_mode_sign_in(admin)
   end
 
-  describe 'GET /admin/builds' do
+  describe 'GET /admin/jobs' do
     let(:pipeline) { create(:ci_pipeline) }
 
     context 'All tab' do
@@ -22,7 +22,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path
 
-          expect(page).to have_selector('.nav-links li.active', text: 'All')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'All')
           expect(page).to have_selector('.row-content-block', text: 'All jobs')
           expect(page.all('.build-link').size).to eq(4)
           expect(page).to have_button 'Stop all jobs'
@@ -37,7 +37,7 @@ RSpec.describe 'Admin Builds' do
         it 'shows a message' do
           visit admin_jobs_path
 
-          expect(page).to have_selector('.nav-links li.active', text: 'All')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'All')
           expect(page).to have_content 'No jobs to show'
           expect(page).not_to have_button 'Stop all jobs'
         end
@@ -54,7 +54,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :pending)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Pending')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Pending')
           expect(page.find('.build-link')).to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).not_to have_content(build3.id)
@@ -69,7 +69,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :pending)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Pending')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Pending')
           expect(page).to have_content 'No jobs to show'
           expect(page).not_to have_button 'Stop all jobs'
         end
@@ -86,7 +86,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :running)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Running')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Running')
           expect(page.find('.build-link')).to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).not_to have_content(build3.id)
@@ -101,7 +101,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :running)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Running')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Running')
           expect(page).to have_content 'No jobs to show'
           expect(page).not_to have_button 'Stop all jobs'
         end
@@ -117,7 +117,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :finished)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Finished')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Finished')
           expect(page.find('.build-link')).not_to have_content(build1.id)
           expect(page.find('.build-link')).not_to have_content(build2.id)
           expect(page.find('.build-link')).to have_content(build3.id)
@@ -131,7 +131,7 @@ RSpec.describe 'Admin Builds' do
 
           visit admin_jobs_path(scope: :finished)
 
-          expect(page).to have_selector('.nav-links li.active', text: 'Finished')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Finished')
           expect(page).to have_content 'No jobs to show'
           expect(page).to have_button 'Stop all jobs'
         end

spec/features/projects/jobs_spec.rb

@@ -46,7 +46,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it "shows Pending tab jobs" do
-          expect(page).to have_selector('.nav-links li.active', text: 'Pending')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Pending')
           expect(page).to have_content job.short_sha
           expect(page).to have_content job.ref
           expect(page).to have_content job.name
@@ -60,7 +60,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it "shows Running tab jobs" do
-          expect(page).to have_selector('.nav-links li.active', text: 'Running')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Running')
           expect(page).to have_content job.short_sha
           expect(page).to have_content job.ref
           expect(page).to have_content job.name
@@ -74,7 +74,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it "shows Finished tab jobs" do
-          expect(page).to have_selector('.nav-links li.active', text: 'Finished')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'Finished')
           expect(page).to have_content('Use jobs to automate your tasks')
         end
       end
@@ -86,7 +86,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
         end
 
         it "shows All tab jobs" do
-          expect(page).to have_selector('.nav-links li.active', text: 'All')
+          expect(page).to have_selector('[data-testid="jobs-tabs"] a.active', text: 'All')
           expect(page).to have_content job.short_sha
           expect(page).to have_content job.ref
           expect(page).to have_content job.name