Merge branch '340759-implementation-revisit-the-kubernetes-section-ux-3' into 'master'

Persistent URLs for the new cluster page tabs

See merge request gitlab-org/gitlab!73163

app/views/clusters/clusters/new.html.haml

 - breadcrumb_title _('Kubernetes')
 - page_title _('Kubernetes Cluster')
-- active_tab = local_assigns.fetch(:active_tab, 'create')
 - provider = params[:provider]
+- active_tab = params[:tab] || local_assigns.fetch(:active_tab, 'create')
+- is_active_tab_create = active_tab === 'create'
+- is_active_tab_add = active_tab === 'add'
 
 = render_gcp_signup_offer
 
 .row.gl-mt-3
   .col-md-3
     = render 'sidebar'
-  .col-md-9.js-toggle-container
-    %ul.nav-links.nav-tabs.gitlab-tabs.nav{ role: 'tablist' }
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ href: '#create-cluster-pane', id: 'create-cluster-tab', class: active_when(active_tab == 'create'), data: { toggle: 'tab' }, role: 'tab' }
-          %span
-            = create_new_cluster_label(provider: params[:provider])
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ href: '#add-cluster-pane', id: 'add-cluster-tab', class: active_when(active_tab == 'add'), data: { toggle: 'tab', qa_selector: 'add_existing_cluster_tab' }, role: 'tab' }
-          %span= s_('ClusterIntegration|Connect existing cluster')
+  .col-md-9
+    = gl_tabs_nav({ class: 'nav-justified' }) do
+      = gl_tab_link_to clusterable.new_path(tab: 'create'), { item_active: is_active_tab_create } do
+        %span= create_new_cluster_label(provider: params[:provider])
+      = gl_tab_link_to s_('ClusterIntegration|Connect existing cluster'), clusterable.new_path(tab: 'add'), { item_active: is_active_tab_add, qa_selector: 'add_existing_cluster_tab' }
 
-    .tab-content.gitlab-tab-content
-      .tab-pane.p-0{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
-        = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
+    .tab-content
+      - if is_active_tab_create
+        .tab-pane.active{ role: 'tabpanel' }
+          = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
 
-        - if ['aws', 'gcp'].include?(provider)
-          .p-3.border-top
-            = render "clusters/clusters/#{provider}/new"
+          - if ['aws', 'gcp'].include?(provider)
+            .p-3.border-top
+              = render "clusters/clusters/#{provider}/new"
 
-      .tab-pane{ id: 'add-cluster-pane', class: active_when(active_tab == 'add'), role: 'tabpanel' }
-        #js-cluster-new{ data: js_cluster_new }
-        = render 'clusters/clusters/user/form'
+      - if is_active_tab_add
+        .tab-pane.active.gl-p-5{ role: 'tabpanel' }
+          #js-cluster-new{ data: js_cluster_new }
+          = render 'clusters/clusters/user/form'