Migrate cluster tabs to Pajamas tabs

app/views/clusters/clusters/_advanced_settings_tab.html.haml

 - active = params[:tab] == 'settings'
 
 - if can_admin_cluster?(current_user, @cluster)
-  %li.nav-item{ role: 'presentation' }
-    %a#cluster-settings-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'settings'}) }
-      %span= _('Advanced Settings')
+  = gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'settings' }), { item_active: active } do
+    = _('Advanced Settings')

app/views/clusters/clusters/_details_tab.html.haml

 - active = params[:tab] == 'details' || !params[:tab].present?
 
-%li.nav-item{ role: 'presentation' }
-  %a#cluster-details-tab.nav-link.qa-details{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'details'}) }
-    %span= _('Details')
+= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'details' }), { item_active: active } do
+  = _('Details')

app/views/clusters/clusters/_health_tab.html.haml

 - active = params[:tab] == 'health'
 
-%li.nav-item{ role: 'presentation' }
-  %a#cluster-health-tab.nav-link.qa-health{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'health'}) }
-    %span= _('Health')
+= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'health' }), { item_active: active, data: { testid: 'cluster-health-tab' } } do
+  = _('Health')

app/views/clusters/clusters/_integrations_tab.html.haml

-- tab_name = 'integrations'
-- active = params[:tab] == tab_name
+- active = params[:tab] == 'integrations'
 
-%li.nav-item{ role: 'presentation' }
-  %a#cluster-apps-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: tab_name}) }
-    %span= _('Integrations')
+= gl_tab_link_to clusterable.cluster_path(@cluster.id, params: { tab: 'integrations' }), { item_active: active } do
+  = _('Integrations')

app/views/clusters/clusters/show.html.haml

@@ -41,12 +41,12 @@
 
   - if cluster_created?(@cluster)
     .js-toggle-container
-      %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
-        = render 'details_tab'
+      = gl_tabs_nav do
+        = render 'clusters/clusters/details_tab'
         = render_if_exists 'clusters/clusters/environments_tab'
         = render 'clusters/clusters/health_tab'
-        = render 'integrations_tab'
-        = render 'advanced_settings_tab'
+        = render 'clusters/clusters/integrations_tab'
+        = render 'clusters/clusters/advanced_settings_tab'
 
       .tab-content.py-3
         .tab-pane.active{ role: 'tabpanel' }

ee/app/views/clusters/clusters/_environments_tab.html.haml

@@ -2,6 +2,5 @@
 - active = params[:tab] == 'environments'
 
 - if !project_cluster?(@cluster) && cluster_environments_path.present?
-  %li.nav-item{ role: 'presentation' }
-    %a#cluster-environments-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'environments'}) }
-      %span.js-cluster-nav-environments= _('Environments')
+  = gl_tab_link_to clusterable.cluster_path(@cluster.id, params: {tab: 'environments'}), { item_active: active, data: { testid: 'cluster-environments-tab' } } do
+    = _('Environments')

ee/spec/features/clusters/cluster_detail_page_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Clusterable > Show page' do
     it 'does not show the environments tab' do
       visit cluster_path
 
-      expect(page).not_to have_selector('.js-cluster-nav-environments', text: 'Environments')
+      expect(page).not_to have_selector('[data-testid="cluster-environments-tab"]')
     end
   end
 
@@ -43,7 +43,7 @@ RSpec.describe 'Clusterable > Show page' do
     it 'shows the environments tab' do
       visit cluster_path
 
-      expect(page).to have_selector('.js-cluster-nav-environments', text: 'Environments')
+      expect(page).to have_selector('[data-testid="cluster-environments-tab"]', text: 'Environments')
     end
   end
 
@@ -59,7 +59,7 @@ RSpec.describe 'Clusterable > Show page' do
     it 'shows the environments tab' do
       visit cluster_path
 
-      expect(page).to have_selector('.js-cluster-nav-environments', text: 'Environments')
+      expect(page).to have_selector('[data-testid="cluster-environments-tab"]', text: 'Environments')
     end
   end
 end

ee/spec/views/clusters/clusters/show.html.haml_spec.rb

@@ -20,8 +20,7 @@ RSpec.describe 'clusters/clusters/show' do
     it 'displays the Cluster health section' do
       render
 
-      expect(rendered).to have_selector('#cluster-health-tab')
-      expect(rendered).to have_content('Health')
+      expect(rendered).to have_selector('[data-testid="cluster-health-tab"]', text: 'Health')
     end
   end
 

spec/features/clusters/cluster_detail_page_spec.rb

@@ -34,7 +34,7 @@ RSpec.describe 'Clusterable > Show page' do
     it 'does not show the environments tab' do
       visit cluster_path
 
-      expect(page).not_to have_selector('.js-cluster-nav-environments', text: 'Environments')
+      expect(page).not_to have_selector('[data-testid="cluster-environments-tab"]')
     end
   end