Allow to switch between cloud providers

In the cluster creation UI, always display the
cloud provider links to allow the user to switch
between cloud providers.

app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue

@@ -306,9 +306,9 @@ export default {
 </script>
 <template>
   <form name="eks-cluster-configuration-form">
-    <h2>
+    <h4>
       {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
-    </h2>
+    </h4>
     <div class="mb-3" v-html="kubernetesIntegrationHelpText"></div>
     <div class="form-group">
       <label class="label-bold" for="eks-cluster-name">{{

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

@@ -83,7 +83,7 @@ export default {
 </script>
 <template>
   <form name="service-credentials-form">
-    <h2>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h2>
+    <h4>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h4>
     <p>
       {{
         s__(

app/helpers/clusters_helper.rb

@@ -17,17 +17,6 @@ module ClustersHelper
     end
   end
 
-  def new_cluster_partial(provider: nil)
-    case provider
-    when 'aws'
-      'clusters/clusters/aws/new'
-    when 'gcp'
-      'clusters/clusters/gcp/new'
-    else
-      'clusters/clusters/cloud_providers/cloud_provider_selector'
-    end
-  end
-
   def render_gcp_signup_offer
     return if Gitlab::CurrentSettings.current_application_settings.hide_third_party_offers?
     return unless show_gcp_signup_offer?

app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml

 - provider = local_assigns.fetch(:provider)
+- is_current_provider = provider == params[:provider]
 - logo_path = local_assigns.fetch(:logo_path)
 - label = local_assigns.fetch(:label)
 - last = local_assigns.fetch(:last, false)
-- classes = ['btn btn-light btn-outline flex-fill d-inline-flex flex-column justify-content-center align-items-center', ('mr-3' unless last)]
+- classes = ["btn btn-light btn-outline flex-fill d-inline-flex flex-column justify-content-center align-items-center w-50 js-create-#{provider}-cluster-button"]
+- conditional_classes = [('mr-3' unless last), ('active' if is_current_provider)]
 
-= link_to clusterable.new_path(provider: provider), class: classes do
+= link_to clusterable.new_path(provider: provider), class: classes + conditional_classes do
   .svg-content.p-2= image_tag logo_path, alt: label, class: 'gl-w-64 gl-h-64'
   %span
     = label

app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml

 - gke_label = s_('ClusterIntegration|Google GKE')
 - eks_label = s_('ClusterIntegration|Amazon EKS')
 - create_cluster_label = s_('ClusterIntegration|Create cluster on')
-.d-flex.flex-column
-  %h5.mb-3
+.d-flex.flex-column.p-3
+  %h4.mb-3
     = create_cluster_label
   .d-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',

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]
 = javascript_include_tag 'https://apis.google.com/js/api.js'
 
 = render_gcp_signup_offer
@@ -19,8 +20,12 @@
           %span Add existing cluster
 
     .tab-content.gitlab-tab-content
-      .tab-pane{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
-        = render new_cluster_partial(provider: params[:provider])
+      .tab-pane.p-0{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
+        = render 'clusters/clusters/cloud_providers/cloud_provider_selector'
+
+        - 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' }
         = render 'clusters/clusters/user/header'

changelogs/unreleased/34802-switch-cloud-providers.yml

+---
+title: Allow to switch between cloud providers in cluster creation screen
+merge_request: 23362
+author:
+type: changed

spec/features/projects/clusters/eks_spec.rb

@@ -30,6 +30,10 @@ describe 'AWS EKS Cluster', :js do
       it 'user sees a form to create an EKS cluster' do
         expect(page).to have_content('Create new cluster on EKS')
       end
+
+      it 'highlights Amazon EKS logo' do
+        expect(page).to have_css('.js-create-aws-cluster-button.active')
+      end
     end
   end
 end

spec/features/projects/clusters/gcp_spec.rb

@@ -38,6 +38,10 @@ describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
         click_link 'Google GKE'
       end
 
+      it 'highlights Google GKE logo' do
+        expect(page).to have_css('.js-create-gcp-cluster-button.active')
+      end
+
       context 'when user filled form with valid parameters' do
         subject { submit_form }
 

spec/helpers/clusters_helper_spec.rb

@@ -58,32 +58,4 @@ describe ClustersHelper do
       it { is_expected.to eq('Create new cluster') }
     end
   end
-
-  describe '#render_new_provider_form' do
-    subject { helper.new_cluster_partial(provider: provider) }
-
-    context 'GCP provider' do
-      let(:provider) { 'gcp' }
-
-      it { is_expected.to eq('clusters/clusters/gcp/new') }
-    end
-
-    context 'AWS provider' do
-      let(:provider) { 'aws' }
-
-      it { is_expected.to eq('clusters/clusters/aws/new') }
-    end
-
-    context 'other provider' do
-      let(:provider) { 'other' }
-
-      it { is_expected.to eq('clusters/clusters/cloud_providers/cloud_provider_selector') }
-    end
-
-    context 'no provider' do
-      let(:provider) { nil }
-
-      it { is_expected.to eq('clusters/clusters/cloud_providers/cloud_provider_selector') }
-    end
-  end
 end