Convert projects explore page tabs to Pajamas

Changelog: other

app/views/dashboard/_projects_nav.html.haml

-- feature_project_list_filter_bar = Feature.enabled?(:project_list_filter_bar)
+- is_your_projects_path = current_page?(dashboard_projects_path) || current_page?(root_path)
+- is_explore_projects_path = current_page?(explore_root_path) || current_page?(trending_explore_projects_path) || current_page?(starred_explore_projects_path) || current_page?(explore_projects_path)
 
-%ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('gl-border-0!' if feature_project_list_filter_bar) }
-  = nav_link(page: [dashboard_projects_path, root_path]) do
-    = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
+= gl_tabs_nav({ class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-flex-nowrap gl-border-0' }) do
+  = gl_tab_link_to dashboard_projects_path, { item_active: is_your_projects_path, class: 'shortcuts-activity', data: { placement: 'right' } } do
     = _("Your projects")
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_user_projects_count)
-  = nav_link(page: starred_dashboard_projects_path) do
-    = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
+    = gl_tab_counter_badge(limited_counter_with_delimiter(@total_user_projects_count))
+  = gl_tab_link_to starred_dashboard_projects_path, { data: { placement: 'right' } } do
     = _("Starred projects")
-      %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_starred_projects_count)
-  = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
-    = link_to explore_root_path, data: {placement: 'right'} do
-      = _("Explore projects")
-  = nav_link(page: topics_explore_projects_path) do
-    = link_to topics_explore_projects_path, data: {placement: 'right'} do
-      = _("Explore topics")
+    = gl_tab_counter_badge(limited_counter_with_delimiter(@total_starred_projects_count))
+  = gl_tab_link_to _("Explore projects"), explore_root_path, { item_active: is_explore_projects_path, data: { placement: 'right' } }
+  = gl_tab_link_to _("Explore topics"), topics_explore_projects_path, { data: { placement: 'right' } }
   = render_if_exists "dashboard/removed_projects_tab", removed_projects_count: @removed_projects_count

ee/app/views/dashboard/_removed_projects_tab.html.haml

 - if can?(current_user, :list_removable_projects)
-  = nav_link(page: removed_dashboard_projects_path) do
-    = link_to removed_dashboard_projects_path, data: {placement: 'right'} do
+  = gl_tab_link_to removed_dashboard_projects_path, { data: { placement: 'right' } } do
     = _("Deleted projects")
-      %span.badge.gl-badge.badge-muted.sm.badge-pill= limited_counter_with_delimiter(removed_projects_count)
+    = gl_tab_counter_badge(limited_counter_with_delimiter(removed_projects_count))

spec/features/dashboard/projects_spec.rb

@@ -80,7 +80,7 @@ RSpec.describe 'Dashboard Projects' do
       visit dashboard_projects_path
 
       expect(page).to have_content(project.name)
-      expect(find('.nav-links li:nth-child(1) .badge-pill')).to have_content(1)
+      expect(find('.gl-tabs-nav li:nth-child(1) .badge-pill')).to have_content(1)
     end
 
     it 'shows personal projects on personal projects tab', :js do
@@ -128,8 +128,8 @@ RSpec.describe 'Dashboard Projects' do
 
       expect(page).not_to have_content(project.name)
       expect(page).to have_content(project2.name)
-      expect(find('.nav-links li:nth-child(1) .badge-pill')).to have_content(1)
-      expect(find('.nav-links li:nth-child(2) .badge-pill')).to have_content(1)
+      expect(find('.gl-tabs-nav li:nth-child(1) .badge-pill')).to have_content(1)
+      expect(find('.gl-tabs-nav li:nth-child(2) .badge-pill')).to have_content(1)
     end
 
     it 'does not show tabs to filter by all projects or personal' do