Merge branch 'cluster-info-tabs' into 'master'

Split cluster info page into tabs

See merge request gitlab-org/gitlab!25940

app/assets/javascripts/clusters/clusters_bundle.js

@@ -315,10 +315,13 @@ export default class Clusters {
 
     this.checkForNewInstalls(prevApplicationMap, this.store.state.applications);
     this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
-    this.toggleIngressDomainHelpText(
-      prevApplicationMap[INGRESS],
-      this.store.state.applications[INGRESS],
-    );
+
+    if (this.ingressDomainHelpText) {
+      this.toggleIngressDomainHelpText(
+        prevApplicationMap[INGRESS],
+        this.store.state.applications[INGRESS],
+      );
+    }
   }
 
   showToken() {

app/assets/javascripts/clusters/components/applications.vue

@@ -263,7 +263,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
 <template>
   <section id="cluster-applications">
-    <h4>{{ s__('ClusterIntegration|Applications') }}</h4>
     <p class="append-bottom-0">
       {{
         s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.

app/helpers/clusters_helper.rb

@@ -26,11 +26,38 @@ module ClustersHelper
     end
   end
 
+  def render_cluster_info_tab_content(tab, expanded)
+    case tab
+    when 'environments'
+      render_if_exists 'clusters/clusters/environments'
+    when 'health'
+      render_if_exists 'clusters/clusters/health'
+    when 'apps'
+      render 'applications'
+    when 'settings'
+      render 'advanced_settings_container'
+    else
+      render('details', expanded: expanded)
+    end
+  end
+
   def has_rbac_enabled?(cluster)
     return cluster.platform_kubernetes_rbac? if cluster.platform_kubernetes
 
     cluster.provider.has_rbac_enabled?
   end
+
+  def project_cluster?(cluster)
+    cluster.cluster_type.in?('project_type')
+  end
+
+  def cluster_created?(cluster)
+    !cluster.status_name.in?(%i/scheduled creating/)
+  end
+
+  def can_admin_cluster?(user, cluster)
+    can?(user, :admin_cluster, cluster)
+  end
 end
 
 ClustersHelper.prepend_if_ee('EE::ClustersHelper')

app/views/clusters/clusters/_advanced_settings_container.html.haml

+- if can_admin_cluster?(current_user, @cluster)
+  .settings.expanded.border-0.m-0
+    %p
+      = s_('ClusterIntegration|Advanced options on this Kubernetes cluster’s integration')
+    .settings-content#advanced-settings-section
+      = render 'clusters/clusters/advanced_settings'

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')

app/views/clusters/clusters/_applications.html.haml

+.cluster-applications-table#js-cluster-applications

app/views/clusters/clusters/_applications_tab.html.haml

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

app/views/clusters/clusters/_configure.html.haml

-%section#cluster-integration
-  - unless @cluster.status_name.in? %i/scheduled creating/
-    = render 'form'
-
-- unless @cluster.status_name.in? %i/scheduled creating/
-  = render_if_exists 'projects/clusters/prometheus_graphs'
-
-  .cluster-applications-table#js-cluster-applications
-
-  %section.settings#js-cluster-details{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4= s_('ClusterIntegration|Kubernetes cluster details')
-      %button.btn.js-settings-toggle{ type: 'button' }
-        = expanded ? _('Collapse') : _('Expand')
-      %p= s_('ClusterIntegration|See and edit the details for your Kubernetes cluster')
-    .settings-content
-      = render 'clusters/platforms/kubernetes/form', cluster: @cluster, platform: @cluster.platform_kubernetes, update_cluster_url_path: clusterable.cluster_path(@cluster)
-
-  %section.settings.no-animate#js-cluster-advanced-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4= _('Advanced settings')
-      %button.btn.js-settings-toggle{ type: 'button' }
-        = expanded ? _('Collapse') : _('Expand')
-      %p= s_("ClusterIntegration|Advanced options on this Kubernetes cluster's integration")
-    .settings-content#advanced-settings-section
-      = render 'advanced_settings'

app/views/clusters/clusters/_details.html.haml

+%section#cluster-integration
+  = render 'gitlab_integration_form'
+
+  %section.settings.no-animate{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4= s_('ClusterIntegration|Provider details')
+      %button.btn.js-settings-toggle{ type: 'button' }
+        = expanded ? _('Collapse') : _('Expand')
+      %p= s_('ClusterIntegration|See and edit the details for your Kubernetes cluster')
+    .settings-content
+      = render 'provider_details_form', cluster: @cluster, platform: @cluster.platform_kubernetes, update_cluster_url_path: clusterable.cluster_path(@cluster)

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')

app/views/clusters/clusters/_form.html.haml → app/views/clusters/clusters/_gitlab_integration_form.html.haml

-= form_for @cluster, url: clusterable.cluster_path(@cluster), as: :cluster, html: { class: 'cluster_integration_form' } do |field|
+= form_for @cluster, url: clusterable.cluster_path(@cluster), as: :cluster, html: { class: 'js-cluster-integration-form' } do |field|
   = form_errors(@cluster)
   .form-group
-    %h5= s_('ClusterIntegration|Integration status')
-    %label.append-bottom-0.js-cluster-enable-toggle-area
-      = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster), data: { qa_selector: 'integration_status_toggle' } do
-        = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
-      .form-text.text-muted= s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.')
+    .d-flex.align-items-center
+      %h4.pr-2.m-0
+        = s_('ClusterIntegration|GitLab Integration')
+      %label.append-bottom-0.js-cluster-enable-toggle-area{ title: s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.'), data: { toggle: 'tooltip', container: 'body' } }
+        = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster), data: { qa_selector: 'integration_status_toggle' } do
+          = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
 
   .form-group
     %h5= s_('ClusterIntegration|Environment scope')
@@ -17,7 +18,8 @@
       - environment_scope_url = help_page_path('user/project/clusters/index', anchor: 'base-domain')
       - environment_scope_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: environment_scope_url }
       .form-text.text-muted
-        %code *
+        %code
+          = _('*')
         = s_("ClusterIntegration| is the default environment scope for this cluster. This means that all jobs, regardless of their environment, will use this cluster. %{environment_scope_start}More information%{environment_scope_end}").html_safe % { environment_scope_start: environment_scope_start, environment_scope_end: '</a>'.html_safe }
 
   .form-group
@@ -29,7 +31,8 @@
       = s_('ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{auto_devops_start}Auto DevOps%{auto_devops_end}. The domain should have a wildcard DNS configured matching the domain.').html_safe % { auto_devops_start: auto_devops_start, auto_devops_end: '</a>'.html_safe }
       %span{ :class => ["js-ingress-domain-help-text", ("hide" unless @cluster.application_ingress_external_ip.present?)] }
         = s_('ClusterIntegration|Alternatively')
-        %code{ :class => "js-ingress-domain-snippet" } #{@cluster.application_ingress_external_ip}.nip.io
+        %code{ :class => "js-ingress-domain-snippet" }
+          = s_('ClusterIntegration|%{external_ip}.nip.io').html_safe % { external_ip: @cluster.application_ingress_external_ip }
         = s_('ClusterIntegration| can be used instead of a custom domain.')
       - custom_domain_url = help_page_path('user/clusters/applications.md', anchor: 'pointing-your-dns-at-the-external-endpoint')
       - custom_domain_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: custom_domain_url }

app/views/clusters/platforms/kubernetes/_form.html.haml → app/views/clusters/clusters/_provider_details_form.html.haml

-= bootstrap_form_for cluster, url: update_cluster_url_path, html: { class: 'gl-show-field-errors' },
+= bootstrap_form_for cluster, url: update_cluster_url_path, html: { class: 'js-provider-details gl-show-field-errors' },
   as: :cluster do |field|
   - copy_name_btn = clipboard_button(text: cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'),
     class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?

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

@@ -5,8 +5,6 @@
 - manage_prometheus_path = edit_project_service_path(@cluster.project, 'prometheus') if @project
 - cluster_environments_path = clusterable.environments_cluster_path(@cluster)
 
-- expanded = expanded_by_default?
-
 - status_path = clusterable.cluster_status_cluster_path(@cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster)
 .edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
   install_helm_path: clusterable.install_applications_cluster_path(@cluster, :helm),
@@ -44,7 +42,19 @@
   %h4= @cluster.name
   = render 'banner'
 
-  - if cluster_environments_path.present?
-    = render_if_exists 'clusters/clusters/cluster_environments', expanded: expanded
-  - else
-    = render 'configure', expanded: expanded
+  - if cluster_created?(@cluster)
+    .js-toggle-container
+      %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
+        = render 'details_tab'
+        = render_if_exists 'clusters/clusters/environments_tab'
+        = render_if_exists 'clusters/clusters/health_tab'
+        = render 'applications_tab'
+        = render 'advanced_settings_tab'
+
+      .tab-content.py-3
+        .tab-pane.active{ role: 'tabpanel' }
+          = render_cluster_info_tab_content(params[:tab], expanded_by_default?)
+
+
+
+

changelogs/unreleased/cluster-info-tabs.yml

+---
+title: Split cluster info page into tabs
+merge_request: 25940
+author:
+type: changed

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

-- is_configure_active = !params[:tab] || params[:tab] == 'configure'
-- is_project_type = @cluster.cluster_type.in? 'project_type'
-- is_creating = @cluster.status_name.in? %i/scheduled creating/
-
-- if !is_project_type && !is_creating
-  .js-toggle-container
-    %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ class: active_when(is_configure_active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'configure'}), id: 'cluster-configure-tab' }
-          %span= _('Configuration')
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ class: active_when(!is_configure_active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'environments'}), id: 'cluster-environments-tab' }
-          %span.js-cluster-nav-environments= _('Environments')
-
-    .tab-content
-      - if is_configure_active
-        .tab-pane.active{ id: 'cluster-configure-pane', role: 'tabpanel' }
-          = render 'configure', expanded: expanded
-      - else
-        .tab-pane.active{ id: 'cluster-environments-pane', role: 'tabpanel' }
-          #js-cluster-environments
-
-- else
-  = render 'configure', expanded: expanded

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

+#js-cluster-environments

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

+- cluster_environments_path = clusterable.environments_cluster_path(@cluster)
+- 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')

ee/app/views/projects/clusters/_prometheus_graphs.html.haml → ee/app/views/clusters/clusters/_health.html.haml

-- return unless show_cluster_health_graphs?
-
 %section.settings.no-animate.expanded.cluster-health-graphs.qa-cluster-health-section#cluster-health
-  %h4= s_('ClusterIntegration|Cluster health')
-
   - if @cluster&.application_prometheus_available?
     #prometheus-graphs{ data: cluster_health_data(@cluster).merge({ "alerts-endpoint" => ('/' if Feature.enabled?(:prometheus_computed_alerts)),
     "prometheus-alerts-available" => ('true' if Feature.enabled?(:prometheus_computed_alerts)) }) }
 
   - else
-    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus below.")
+    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus in the Applications tab.")

ee/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')

ee/spec/features/clusters/cluster_health_dashboard_spec.rb

@@ -22,15 +22,20 @@ describe 'Cluster Health board', :js, :use_clean_rails_memory_store_caching, :si
   it 'shows cluster board section within the page' do
     visit cluster_path
 
-    expect(page).to have_text('Cluster health')
-    expect(page).to have_css('#cluster-health')
+    expect(page).to have_text('Health')
+
+    click_link 'Health'
+
+    expect(page).to have_css('.cluster-health-graphs')
   end
 
   context 'no prometheus installed' do
     it 'shows install prometheus message' do
       visit cluster_path
 
-      expect(page).to have_text('you must first install Prometheus below')
+      click_link 'Health'
+
+      expect(page).to have_text('you must first install Prometheus in the Applications tab')
     end
   end
 
@@ -47,6 +52,9 @@ describe 'Cluster Health board', :js, :use_clean_rails_memory_store_caching, :si
 
       it 'shows container and waiting for data message' do
         visit cluster_path
+
+        click_link 'Health'
+
         wait_for_requests
 
         expect(page).to have_css('.prometheus-graphs')
@@ -61,6 +69,9 @@ describe 'Cluster Health board', :js, :use_clean_rails_memory_store_caching, :si
 
       it 'renders charts' do
         visit cluster_path
+
+        click_link 'Health'
+
         wait_for_requests
 
         expect(page).to have_css('.prometheus-graphs')

ee/spec/features/projects/clusters_spec.rb

@@ -52,7 +52,7 @@ describe 'EE Clusters', :js do
           before do
             click_link 'default-cluster'
             fill_in 'cluster_environment_scope', with: 'production/*'
-            within '.cluster_integration_form' do
+            within '.js-cluster-integration-form' do
               click_button 'Save changes'
             end
           end
@@ -135,7 +135,7 @@ describe 'EE Clusters', :js do
           end
 
           it 'user sees a cluster details page' do
-            expect(page).to have_content('Enable or disable GitLab\'s connection to your Kubernetes cluster.')
+            expect(page).to have_content('GitLab Integration')
             expect(page.find_field('cluster[environment_scope]').value).to eq('staging/*')
           end
         end
@@ -144,7 +144,7 @@ describe 'EE Clusters', :js do
           before do
             click_link 'default-cluster'
             fill_in 'cluster_environment_scope', with: 'production/*'
-            within ".cluster_integration_form" do
+            within ".js-cluster-integration-form" do
               click_button 'Save changes'
             end
           end

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

@@ -25,8 +25,8 @@ describe 'clusters/clusters/show' do
       it 'displays the Cluster health section' do
         render
 
-        expect(rendered).to have_selector('#cluster-health')
-        expect(rendered).to have_content('Cluster health')
+        expect(rendered).to have_selector('#cluster-health-tab')
+        expect(rendered).to have_content('Health')
       end
     end
 

locale/gitlab.pot

@@ -1550,13 +1550,13 @@ msgstr ""
 msgid "Advanced"
 msgstr ""
 
-msgid "Advanced permissions, Large File Storage and Two-Factor authentication settings."
+msgid "Advanced Settings"
 msgstr ""
 
-msgid "Advanced search functionality"
+msgid "Advanced permissions, Large File Storage and Two-Factor authentication settings."
 msgstr ""
 
-msgid "Advanced settings"
+msgid "Advanced search functionality"
 msgstr ""
 
 msgid "After a successful password update you will be redirected to login screen."
@@ -4024,6 +4024,9 @@ msgstr ""
 msgid "ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|%{external_ip}.nip.io"
+msgstr ""
+
 msgid "ClusterIntegration|%{title} uninstalled successfully."
 msgstr ""
 
@@ -4060,7 +4063,7 @@ msgstr ""
 msgid "ClusterIntegration|Adding an integration will share the cluster across all projects."
 msgstr ""
 
-msgid "ClusterIntegration|Advanced options on this Kubernetes cluster's integration"
+msgid "ClusterIntegration|Advanced options on this Kubernetes cluster’s integration"
 msgstr ""
 
 msgid "ClusterIntegration|All data not committed to GitLab will be deleted and cannot be restored."
@@ -4096,9 +4099,6 @@ msgstr ""
 msgid "ClusterIntegration|Any running pipelines will be canceled."
 msgstr ""
 
-msgid "ClusterIntegration|Applications"
-msgstr ""
-
 msgid "ClusterIntegration|Apply for credit"
 msgstr ""
 
@@ -4150,9 +4150,6 @@ msgstr ""
 msgid "ClusterIntegration|Cluster being created"
 msgstr ""
 
-msgid "ClusterIntegration|Cluster health"
-msgstr ""
-
 msgid "ClusterIntegration|Cluster management project (alpha)"
 msgstr ""
 
@@ -4345,7 +4342,7 @@ msgstr ""
 msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
 msgstr ""
 
-msgid "ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus below."
+msgid "ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus in the Applications tab."
 msgstr ""
 
 msgid "ClusterIntegration|Ingress"
@@ -4369,9 +4366,6 @@ msgstr ""
 msgid "ClusterIntegration|Integrate Kubernetes cluster automation"
 msgstr ""
 
-msgid "ClusterIntegration|Integration status"
-msgstr ""
-
 msgid "ClusterIntegration|Issuer Email"
 msgstr ""
 
@@ -4408,9 +4402,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster"
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes cluster details"
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes cluster is being created..."
 msgstr ""
 
@@ -4561,6 +4552,9 @@ msgstr ""
 msgid "ClusterIntegration|Prometheus is an open-source monitoring system with %{gitlabIntegrationLink} to monitor deployed applications."
 msgstr ""
 
+msgid "ClusterIntegration|Provider details"
+msgstr ""
+
 msgid "ClusterIntegration|Provision Role ARN"
 msgstr ""
 
@@ -10291,6 +10285,9 @@ msgstr ""
 msgid "Header message"
 msgstr ""
 
+msgid "Health"
+msgstr ""
+
 msgid "Health Check"
 msgstr ""
 

qa/qa/ee/page/project/operations/kubernetes/show.rb

@@ -9,9 +9,13 @@ module QA
             module Show
               def self.prepended(page)
                 page.module_eval do
-                  view 'ee/app/views/projects/clusters/_prometheus_graphs.html.haml' do
+                  view 'ee/app/views/clusters/clusters/_health.html.haml' do
                     element :cluster_health_section
                   end
+
+                  view 'ee/app/views/clusters/clusters/_health_tab.html.haml' do
+                    element :health, required: true
+                  end
                 end
               end
 
@@ -21,10 +25,9 @@ module QA
                 end
               end
 
-              def has_cluster_health_title?
-                within_cluster_health_section do
-                  has_text?('Cluster health')
-                end
+              def open_health
+                has_element?(:health, wait: 30)
+                click_element :health
               end
 
               def has_cluster_health_graphs?

qa/qa/page/project/operations/kubernetes/show.rb

@@ -10,17 +10,35 @@ module QA
               element :ingress_ip_address, 'id="ingress-endpoint"' # rubocop:disable QA/ElementWithPattern
             end
 
-            view 'app/views/clusters/clusters/_form.html.haml' do
+            view 'app/views/clusters/clusters/_gitlab_integration_form.html.haml' do
               element :integration_status_toggle, required: true
               element :base_domain_field, required: true
               element :save_changes_button, required: true
             end
 
+            view 'app/views/clusters/clusters/_details_tab.html.haml' do
+              element :details, required: true
+            end
+
+            view 'app/views/clusters/clusters/_applications_tab.html.haml' do
+              element :applications, required: true
+            end
+
             view 'app/assets/javascripts/clusters/components/application_row.vue' do
               element :install_button
               element :uninstall_button
             end
 
+            def open_details
+              has_element?(:details, wait: 30)
+              click_element :details
+            end
+
+            def open_applications
+              has_element?(:applications, wait: 30)
+              click_element :applications
+            end
+
             def install!(application_name)
               within_element(application_name) do
                 has_element?(:install_button, application: application_name, wait: 30)

qa/qa/resource/kubernetes_cluster.rb

@@ -38,6 +38,9 @@ module QA
             # We must wait a few seconds for permissions to be set up correctly for new cluster
             sleep 10
 
+            # Open applications tab
+            show.open_applications
+
             # Helm must be installed before everything else
             show.install!(:helm)
             show.await_installed(:helm)
@@ -52,6 +55,8 @@ module QA
 
             if @install_ingress
               populate(:ingress_ip)
+
+              show.open_details
               show.set_domain("#{ingress_ip}.nip.io")
               show.save_domain
             end

qa/qa/specs/features/ee/browser_ui/8_monitor/health/cluster_health_spec.rb

@@ -42,7 +42,7 @@ module QA
       def verify_cluster_health_graphs
         Page::Project::Operations::Kubernetes::Show.perform do |cluster|
           cluster.refresh
-          expect(cluster).to have_cluster_health_title
+          cluster.open_health
 
           cluster.wait_for_cluster_health
         end

spec/features/clusters/cluster_detail_page_spec.rb

@@ -17,7 +17,7 @@ describe 'Clusterable > Show page' do
     it 'allow the user to set domain' do
       visit cluster_path
 
-      within '#cluster-integration' do
+      within '.js-cluster-integration-form' do
         fill_in('cluster_base_domain', with: 'test.com')
         click_on 'Save changes'
       end
@@ -34,7 +34,7 @@ describe 'Clusterable > Show page' do
       end
 
       it 'shows help text with the domain as an alternative to custom domain' do
-        within '#cluster-integration' do
+        within '.js-cluster-integration-form' do
           expect(find(cluster_ingress_help_text_selector)).not_to match_css(hide_modifier_selector)
         end
       end
@@ -44,7 +44,7 @@ describe 'Clusterable > Show page' do
       it 'alternative to custom domain is not shown' do
         visit cluster_path
 
-        within '#cluster-integration' do
+        within '.js-cluster-integration-form' do
           expect(find(cluster_ingress_help_text_selector)).to match_css(hide_modifier_selector)
         end
       end
@@ -63,7 +63,7 @@ describe 'Clusterable > Show page' do
     end
 
     it 'is not able to edit the name, API url, CA certificate nor token' do
-      within('#js-cluster-details') do
+      within('.js-provider-details') do
         cluster_name_field = find('.cluster-name')
         api_url_field = find('#cluster_platform_kubernetes_attributes_api_url')
         ca_certificate_field = find('#cluster_platform_kubernetes_attributes_ca_cert')
@@ -77,6 +77,8 @@ describe 'Clusterable > Show page' do
     end
 
     it 'displays GKE information' do
+      click_link 'Advanced Settings'
+
       within('#advanced-settings-section') do
         expect(page).to have_content('Google Kubernetes Engine')
         expect(page).to have_content('Manage your Kubernetes cluster by visiting')
@@ -91,7 +93,7 @@ describe 'Clusterable > Show page' do
     end
 
     it 'is able to edit the name, API url, CA certificate and token' do
-      within('#js-cluster-details') do
+      within('.js-provider-details') do
         cluster_name_field = find('#cluster_name')
         api_url_field = find('#cluster_platform_kubernetes_attributes_api_url')
         ca_certificate_field = find('#cluster_platform_kubernetes_attributes_ca_cert')
@@ -105,6 +107,8 @@ describe 'Clusterable > Show page' do
     end
 
     it 'does not display GKE information' do
+      click_link 'Advanced Settings'
+
       within('#advanced-settings-section') do
         expect(page).not_to have_content('Google Kubernetes Engine')
         expect(page).not_to have_content('Manage your Kubernetes cluster by visiting')

spec/features/clusters/installing_applications_shared_examples.rb

@@ -17,6 +17,12 @@ shared_examples "installing applications on a cluster" do
   context 'when cluster is created' do
     let(:cluster) { create(:cluster, :provided_by_gcp, *cluster_factory_args) }
 
+    before do
+      page.within('.js-edit-cluster-form') do
+        click_link 'Applications'
+      end
+    end
+
     it 'user can install applications' do
       wait_for_requests
 
@@ -29,6 +35,7 @@ shared_examples "installing applications on a cluster" do
     context 'when user installs Helm' do
       before do
         allow(ClusterInstallAppWorker).to receive(:perform_async)
+        wait_for_requests
 
         page.within('.js-cluster-application-row-helm') do
           page.find(:css, '.js-cluster-application-install-button').click

spec/features/groups/clusters/user_spec.rb

@@ -34,7 +34,7 @@ describe 'User Cluster', :js do
         it 'user sees a cluster details page' do
           subject
 
-          expect(page).to have_content('Kubernetes cluster integration')
+          expect(page).to have_content('GitLab Integration')
           expect(page.find_field('cluster[name]').value).to eq('dev-cluster')
           expect(page.find_field('cluster[platform_kubernetes_attributes][api_url]').value)
             .to have_content('http://example.com')
@@ -93,7 +93,7 @@ describe 'User Cluster', :js do
     context 'when user disables the cluster' do
       before do
         page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
-        page.within('#cluster-integration') { click_button 'Save changes' }
+        page.within('.js-cluster-integration-form') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do
@@ -105,7 +105,7 @@ describe 'User Cluster', :js do
       before do
         fill_in 'cluster_name', with: 'my-dev-cluster'
         fill_in 'cluster_platform_kubernetes_attributes_token', with: 'new-token'
-        page.within('#js-cluster-details') { click_button 'Save changes' }
+        page.within('.js-provider-details') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do
@@ -117,6 +117,7 @@ describe 'User Cluster', :js do
 
     context 'when user destroys the cluster' do
       before do
+        click_link 'Advanced Settings'
         click_button 'Remove integration and resources'
         fill_in 'confirm_cluster_name_input', with: cluster.name
         click_button 'Remove integration'

spec/features/projects/clusters/gcp_spec.rb

@@ -119,7 +119,7 @@ describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
       context 'when user disables the cluster' do
         before do
           page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
-          page.within('#cluster-integration') { click_button 'Save changes' }
+          page.within('.js-cluster-integration-form') { click_button 'Save changes' }
         end
 
         it 'user sees the successful message' do
@@ -130,7 +130,7 @@ describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
       context 'when user changes cluster parameters' do
         before do
           fill_in 'cluster_platform_kubernetes_attributes_namespace', with: 'my-namespace'
-          page.within('#js-cluster-details') { click_button 'Save changes' }
+          page.within('.js-provider-details') { click_button 'Save changes' }
         end
 
         it 'user sees the successful message' do
@@ -141,6 +141,7 @@ describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
 
       context 'when user destroys the cluster' do
         before do
+          click_link 'Advanced Settings'
           click_button 'Remove integration and resources'
           fill_in 'confirm_cluster_name_input', with: cluster.name
           click_button 'Remove integration'

spec/features/projects/clusters/user_spec.rb

@@ -41,7 +41,7 @@ describe 'User Cluster', :js do
       it 'user sees a cluster details page' do
         subject
 
-        expect(page).to have_content('Kubernetes cluster integration')
+        expect(page).to have_content('GitLab Integration')
         expect(page.find_field('cluster[name]').value).to eq('dev-cluster')
         expect(page.find_field('cluster[platform_kubernetes_attributes][api_url]').value)
           .to have_content('http://example.com')
@@ -79,7 +79,7 @@ describe 'User Cluster', :js do
     context 'when user disables the cluster' do
       before do
         page.find(:css, '.js-cluster-enable-toggle-area .js-project-feature-toggle').click
-        page.within('#cluster-integration') { click_button 'Save changes' }
+        page.within('.js-cluster-integration-form') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do
@@ -91,7 +91,7 @@ describe 'User Cluster', :js do
       before do
         fill_in 'cluster_name', with: 'my-dev-cluster'
         fill_in 'cluster_platform_kubernetes_attributes_namespace', with: 'my-namespace'
-        page.within('#js-cluster-details') { click_button 'Save changes' }
+        page.within('.js-provider-details') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do
@@ -103,6 +103,7 @@ describe 'User Cluster', :js do
 
     context 'when user destroys the cluster' do
       before do
+        click_link 'Advanced Settings'
         click_button 'Remove integration and resources'
         fill_in 'confirm_cluster_name_input', with: cluster.name
         click_button 'Remove integration'