Migrate issues and epics Bootstrap tabs to GlTabs

app/helpers/issuables_helper.rb

@@ -198,7 +198,7 @@ module IssuablesHelper
     if count != -1
       html << " " << content_tag(:span,
         format_count(issuable_type, count, Gitlab::IssuablesCountForState::THRESHOLD),
-        class: 'badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm'
+        class: 'badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex'
       )
     end
 

app/views/shared/issuable/_nav.html.haml

@@ -2,22 +2,16 @@
 - page_context_word = type.to_s.humanize(capitalize: false)
 - display_count = local_assigns.fetch(:display_count, true)
 
-%ul.nav-links.issues-state-filters.mobile-separator.nav.nav-tabs
-  %li{ class: active_when(params[:state] == 'opened') }>
-    = link_to page_filter_path(state: 'opened'), id: 'state-opened', title: _("Filter by %{page_context_word} that are currently open.") % { page_context_word: page_context_word }, data: { state: 'opened' } do
+= gl_tabs_nav({ class: 'issues-state-filters gl-border-b-0 gl-flex-grow-1' }) do
+  = gl_tab_link_to page_filter_path(state: 'opened'), { item_active: params[:state] == 'opened', id: 'state-opened', title: _("Filter by %{page_context_word} that are currently open.") % { page_context_word: page_context_word }, data: { state: 'opened' } } do
     #{issuables_state_counter_text(type, :opened, display_count)}
-
   - if type == :merge_requests
-    %li{ class: active_when(params[:state] == 'merged') }>
-      = link_to page_filter_path(state: 'merged'), id: 'state-merged', title: _('Filter by merge requests that are currently merged.'), data: { state: 'merged' } do
+    = gl_tab_link_to page_filter_path(state: 'merged'), item_active: params[:state] == 'merged', id: 'state-merged', title: _('Filter by merge requests that are currently merged.'), data: { state: 'merged' } do
       #{issuables_state_counter_text(type, :merged, display_count)}
-
-    %li{ class: active_when(params[:state] == 'closed') }>
-      = link_to page_filter_path(state: 'closed'), id: 'state-closed', title: _('Filter by merge requests that are currently closed and unmerged.'), data: { state: 'closed' } do
+    = gl_tab_link_to page_filter_path(state: 'closed'), item_active: params[:state] == 'closed', id: 'state-closed', title: _('Filter by merge requests that are currently closed and unmerged.'), data: { state: 'closed' } do
       #{issuables_state_counter_text(type, :closed, display_count)}
   - else
-    %li{ class: active_when(params[:state] == 'closed') }>
-      = link_to page_filter_path(state: 'closed'), id: 'state-closed', title: _('Filter by issues that are currently closed.'), data: { state: 'closed', qa_selector: 'closed_issues_link' } do
+    = gl_tab_link_to page_filter_path(state: 'closed'), item_active: params[:state] == 'closed', id: 'state-closed', title: _('Filter by issues that are currently closed.'), data: { state: 'closed', qa_selector: 'closed_issues_link' } do
       #{issuables_state_counter_text(type, :closed, display_count)}
 
   = render 'shared/issuable/nav_links/all', page_context_word: page_context_word, counter: issuables_state_counter_text(type, :all, display_count)

app/views/shared/issuable/nav_links/_all.html.haml

 - page_context_word = local_assigns.fetch(:page_context_word)
 - counter = local_assigns.fetch(:counter)
 
-%li{ class: active_when(params[:state] == 'all') }>
-  = link_to page_filter_path(state: 'all'), id: 'state-all', title: "Show all #{page_context_word}.", data: { state: 'all' } do
+= gl_tab_link_to page_filter_path(state: 'all'), item_active: params[:state] == 'all', id: 'state-all', title: _("Show all %{issuable_type}.") % { issuable_type: page_context_word }, data: { state: 'all' } do
   #{counter}

ee/app/views/shared/issuable/_epic_nav.html.haml

@@ -2,13 +2,10 @@
 - page_context_word = type.to_s.humanize(capitalize: false)
 - display_count = local_assigns.fetch(:display_count, true)
 
-%ul.nav-links.mobile-separator.epics-state-filters
-  %li{ class: active_when(params[:state] == 'opened') }>
-    = link_to page_filter_path(state: 'opened'), id: 'state-opened', title: (_("Filter by %{issuable_type} that are currently open.") % { issuable_type: page_context_word }), data: { state: 'opened' } do
+= gl_tabs_nav({ class: 'epics-state-filters gl-border-b-0 gl-flex-grow-1' }) do
+  = gl_tab_link_to page_filter_path(state: 'opened'), item_active: params[:state] == 'opened', id: 'state-opened', title: (_("Filter by %{issuable_type} that are currently open.") % { issuable_type: page_context_word }), data: { state: 'opened' } do
     #{issuables_state_counter_text(type, :opened, display_count)}
-
-  %li{ class: active_when(params[:state] == 'closed') }>
-    = link_to page_filter_path(state: 'closed'), id: 'state-closed', title: (_("Filter by %{issuable_type} that are currently closed.") % { issuable_type: page_context_word }), data: { state: 'closed' } do
+  = gl_tab_link_to page_filter_path(state: 'closed'), item_active: params[:state] == 'closed', id: 'state-closed', title: (_("Filter by %{issuable_type} that are currently closed.") % { issuable_type: page_context_word }), data: { state: 'closed' } do
     #{issuables_state_counter_text(type, :closed, display_count)}
 
   = render 'shared/issuable/nav_links/all', page_context_word: page_context_word, counter: issuables_state_counter_text(type, :all, display_count)

locale/gitlab.pot

@@ -31240,6 +31240,9 @@ msgstr ""
 msgid "Show Pipeline IID"
 msgstr ""
 
+msgid "Show all %{issuable_type}."
+msgstr ""
+
 msgid "Show all activity"
 msgstr ""
 

spec/features/dashboard/issuables_counter_spec.rb

@@ -55,7 +55,7 @@ RSpec.describe 'Navigation bar counter', :use_clean_rails_memory_store_caching d
   end
 
   def expect_counters(issuable_type, count)
-    dashboard_count = find('.nav-links li.active')
+    dashboard_count = find('.gl-tabs-nav li a.active')
     nav_count = find(".dashboard-shortcuts-#{issuable_type}")
     header_count = find(".header-content .#{issuable_type.tr('_', '-')}-count")
 

spec/helpers/issuables_helper_spec.rb

@@ -133,13 +133,13 @@ RSpec.describe IssuablesHelper do
 
         it 'returns navigation with badges' do
           expect(helper.issuables_state_counter_text(:issues, :opened, true))
-            .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">42</span>')
+            .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">42</span>')
           expect(helper.issuables_state_counter_text(:issues, :closed, true))
-            .to eq('<span>Closed</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">42</span>')
+            .to eq('<span>Closed</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">42</span>')
           expect(helper.issuables_state_counter_text(:merge_requests, :merged, true))
-            .to eq('<span>Merged</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">42</span>')
+            .to eq('<span>Merged</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">42</span>')
           expect(helper.issuables_state_counter_text(:merge_requests, :all, true))
-            .to eq('<span>All</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">42</span>')
+            .to eq('<span>All</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">42</span>')
         end
       end
 
@@ -176,7 +176,7 @@ RSpec.describe IssuablesHelper do
 
           it 'returns complete count' do
             expect(helper.issuables_state_counter_text(:issues, :opened, true))
-              .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">1,100</span>')
+              .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">1,100</span>')
           end
         end
 
@@ -187,7 +187,7 @@ RSpec.describe IssuablesHelper do
 
           it 'returns truncated count' do
             expect(helper.issuables_state_counter_text(:issues, :opened, true))
-              .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm">1.1k</span>')
+              .to eq('<span>Open</span> <span class="badge badge-muted badge-pill gl-badge gl-tab-counter-badge sm gl-display-none gl-sm-display-inline-flex">1.1k</span>')
           end
         end
       end