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

Refactor cluster show page

Closes #41335

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

9 files changed, 43 insertions, 42 deletions

diff --git a/app/views/projects/clusters/_advanced_settings.html.haml b/app/views/projects/clusters/_advanced_settings.html.haml
index 7032b892029..8a13713ae02 100644
--- a/app/views/projects/clusters/_advanced_settings.html.haml
+++ b/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.")})
diff --git a/app/views/projects/clusters/_banner.html.haml b/app/views/projects/clusters/_banner.html.haml
index 76a66fb92a2..26ca3307a4a 100644
--- a/app/views/projects/clusters/_banner.html.haml
+++ b/app/views/projects/clusters/_banner.html.haml
@@ -1,6 +1,6 @@
-%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')
diff --git a/app/views/projects/clusters/_cluster.html.haml b/app/views/projects/clusters/_cluster.html.haml
index ad696daa259..3943dfc0856 100644
--- a/app/views/projects/clusters/_cluster.html.haml
+++ b/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")
diff --git a/app/views/projects/clusters/_enabled.html.haml b/app/views/projects/clusters/_enabled.html.haml
deleted file mode 100644
index 547b3c8446f..00000000000
--- a/app/views/projects/clusters/_enabled.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-= form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
-  = form_errors(@cluster)
-  .form-group.append-bottom-20
-    %label.append-bottom-10
-      = field.hidden_field :enabled, { class: 'js-toggle-input'}
-
-      %button{ type: 'button',
-        class: "js-toggle-cluster project-feature-toggle #{'is-checked' unless !@cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
-        "aria-label": s_("ClusterIntegration|Toggle Cluster"),
-        disabled: !can?(current_user, :update_cluster, @cluster) }
-        %span.toggle-icon
-          = 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'
diff --git a/app/views/projects/clusters/_integration_form.html.haml b/app/views/projects/clusters/_integration_form.html.haml
new file mode 100644
index 00000000000..9d593ffc021
--- /dev/null
+++ b/app/views/projects/clusters/_integration_form.html.haml
@@ -0,0 +1,33 @@
+= 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'}
+
+      %button{ type: 'button',
+        class: "js-toggle-cluster project-feature-toggle #{'is-checked' unless !@cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
+        "aria-label": s_("ClusterIntegration|Toggle Cluster"),
+        disabled: !can?(current_user, :update_cluster, @cluster) }
+        %span.toggle-icon
+          = 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')
+
+  .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'
diff --git a/app/views/projects/clusters/gcp/_show.html.haml b/app/views/projects/clusters/gcp/_show.html.haml
index bde85aed341..f3122a1bf47 100644
--- a/app/views/projects/clusters/gcp/_show.html.haml
+++ b/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')
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
index bec512be91c..74dbe859eea 100644
--- a/app/views/projects/clusters/index.html.haml
+++ b/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" }
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index 0115c64c076..c7c84b5a42c 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/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'
diff --git a/app/views/projects/clusters/user/_show.html.haml b/app/views/projects/clusters/user/_show.html.haml
index 89595bca007..5931e0b7f17 100644
--- a/app/views/projects/clusters/user/_show.html.haml
+++ b/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')