Merge branch 'refactor-cluster-show-page-conservative' into 'master'

Refactor cluster show page

Closes #41335

See merge request gitlab-org/gitlab-ce!16089

app/views/projects/clusters/_advanced_settings.html.haml

@@ -11,5 +11,5 @@
     %label.text-danger
       = s_('ClusterIntegration|Remove cluster integration')
     %p
-      = s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your cluster on Google Kubernetes Engine.')
-    = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Kubernetes Engine"})
+      = s_("ClusterIntegration|Remove this cluster's configuration from this project. This will not delete your actual cluster.")
+    = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: s_("ClusterIntegration|Are you sure you want to remove this cluster's integration? This will not delete your actual cluster.")})

app/views/projects/clusters/_banner.html.haml

-%h4= s_('ClusterIntegration|Enable cluster integration')
-.settings-content
+%h4= s_('ClusterIntegration|Cluster integration')
 
+.settings-content
   .hidden.js-cluster-error.alert.alert-danger.alert-block.append-bottom-10{ role: 'alert' }
     = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Kubernetes Engine')
     %p.js-error-reason
@@ -11,11 +11,4 @@
   .hidden.js-cluster-success.alert.alert-success.alert-block.append-bottom-10{ role: 'alert' }
     = s_('ClusterIntegration|Cluster was successfully created on Google Kubernetes Engine. Refresh the page to see cluster\'s details')
 
-  %p
-    - if @cluster.enabled?
-      - if can?(current_user, :update_cluster, @cluster)
-        = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.')
-      - else
-        = s_('ClusterIntegration|Cluster integration is enabled for this project.')
-    - else
-      = s_('ClusterIntegration|Cluster integration is disabled for this project.')
+  %p= s_('ClusterIntegration|Control how your cluster integrates with GitLab')

app/views/projects/clusters/_cluster.html.haml

@@ -4,7 +4,7 @@
     .table-mobile-content
       = link_to cluster.name, namespace_project_cluster_path(@project.namespace, @project, cluster)
   .table-section.section-30
-    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Environment pattern")
+    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Environment scope")
     .table-mobile-content= cluster.environment_scope
   .table-section.section-30
     .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Project namespace")

app/views/projects/clusters/_enabled.html.haml → app/views/projects/clusters/_integration_form.html.haml

 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group.append-bottom-20
+    %h5= s_('ClusterIntegration|Integration status')
+    %p
+      - if @cluster.enabled?
+        - if can?(current_user, :update_cluster, @cluster)
+          = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.')
+        - else
+          = s_('ClusterIntegration|Cluster integration is enabled for this project.')
+      - else
+        = s_('ClusterIntegration|Cluster integration is disabled for this project.')
     %label.append-bottom-10
       = field.hidden_field :enabled, { class: 'js-toggle-input'}
 
@@ -12,6 +21,13 @@
           = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
           = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
 
-    - if can?(current_user, :update_cluster, @cluster)
-      .form-group
-        = field.submit _('Save'), class: 'btn btn-success'
+  .form-group
+    %h5= s_('ClusterIntegration|Environment scope')
+    %p
+      = s_("ClusterIntegration|Choose which of your project's environments will use this cluster.")
+      = link_to s_("ClusterIntegration|Learn more about environments"), help_page_path('ci/environments')
+    = field.text_field :environment_scope, class: 'form-control js-select-on-focus', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
+
+  - if can?(current_user, :update_cluster, @cluster)
+    .form-group
+      = field.submit _('Save changes'), class: 'btn btn-success'

app/views/projects/clusters/gcp/_show.html.haml

@@ -9,10 +9,6 @@
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
 
-  .form-group
-    = field.label :environment_scope, s_('ClusterIntegration|Environment scope')
-    = field.text_field :environment_scope, class: 'form-control js-select-on-focus', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
-
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')

app/views/projects/clusters/index.html.haml

@@ -13,7 +13,7 @@
         .table-section.section-30{ role: "rowheader" }
           = s_("ClusterIntegration|Cluster")
         .table-section.section-30{ role: "rowheader" }
-          = s_("ClusterIntegration|Environment pattern")
+          = s_("ClusterIntegration|Environment scope")
         .table-section.section-30{ role: "rowheader" }
           = s_("ClusterIntegration|Project namespace")
         .table-section.section-10{ role: "rowheader" }

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

@@ -18,9 +18,9 @@
   .js-cluster-application-notice
     .flash-container
 
-  %section.settings.no-animate.expanded
+  %section.settings.no-animate.expanded#cluster-integration
     = render 'banner'
-    = render 'enabled'
+    = render 'integration_form'
 
   .cluster-applications-table#js-cluster-applications
 
@@ -41,6 +41,6 @@
       %h4= _('Advanced settings')
       %button.btn.js-settings-toggle
         = expanded ? 'Collapse' : 'Expand'
-      %p= s_('ClusterIntegration|Manage cluster integration on your GitLab project')
+      %p= s_("ClusterIntegration|Advanced options on this cluster's integration")
     .settings-content
       = render 'advanced_settings'

app/views/projects/clusters/user/_show.html.haml

@@ -4,10 +4,6 @@
     = field.label :name, s_('ClusterIntegration|Cluster name')
     = field.text_field :name, class: 'form-control', placeholder: s_('ClusterIntegration|Cluster name')
 
-  .form-group
-    = field.label :environment_scope, s_('ClusterIntegration|Environment scope')
-    = field.text_field :environment_scope, class: 'form-control js-select-on-focus', readonly: !has_multiple_clusters?(@project), placeholder: s_('ClusterIntegration|Environment scope')
-
   = field.fields_for :platform_kubernetes, @cluster.platform_kubernetes do |platform_kubernetes_field|
     .form-group
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')

spec/features/projects/clusters/gcp_spec.rb

@@ -81,14 +81,14 @@ feature 'Gcp Cluster', :js do
       end
 
       it 'user sees a cluster details page' do
-        expect(page).to have_button('Save')
+        expect(page).to have_button('Save changes')
         expect(page.find(:css, '.cluster-name').value).to eq(cluster.name)
       end
 
       context 'when user disables the cluster' do
         before do
           page.find(:css, '.js-toggle-cluster').click
-          click_button 'Save'
+          page.within('#cluster-integration') { click_button 'Save changes' }
         end
 
         it 'user sees the successful message' do
@@ -99,7 +99,7 @@ feature 'Gcp Cluster', :js do
       context 'when user changes cluster parameters' do
         before do
           fill_in 'cluster_platform_kubernetes_attributes_namespace', with: 'my-namespace'
-          click_button 'Save changes'
+          page.within('#js-cluster-details') { click_button 'Save changes' }
         end
 
         it 'user sees the successful message' do

spec/features/projects/clusters/user_spec.rb

@@ -29,7 +29,7 @@ feature 'User Cluster', :js do
       end
 
       it 'user sees a cluster details page' do
-        expect(page).to have_content('Enable cluster integration')
+        expect(page).to have_content('Cluster 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')
@@ -57,14 +57,14 @@ feature 'User Cluster', :js do
     end
 
     it 'user sees a cluster details page' do
-      expect(page).to have_button('Save')
+      expect(page).to have_button('Save changes')
     end
 
     context 'when user disables the cluster' do
       before do
         page.find(:css, '.js-toggle-cluster').click
         fill_in 'cluster_name', with: 'dev-cluster'
-        click_button 'Save'
+        page.within('#cluster-integration') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do
@@ -76,7 +76,7 @@ feature 'User Cluster', :js do
       before do
         fill_in 'cluster_name', with: 'my-dev-cluster'
         fill_in 'cluster_platform_kubernetes_attributes_namespace', with: 'my-namespace'
-        click_button 'Save changes'
+        page.within('#js-cluster-details') { click_button 'Save changes' }
       end
 
       it 'user sees the successful message' do