Adds collapsible sections in cluster page

4 files changed, 67 insertions, 44 deletions

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 50dbeb06362..180aa30e98c 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -3,7 +3,8 @@ import Visibility from 'visibilityjs';
 import axios from 'axios';
 import Poll from './lib/utils/poll';
 import { s__ } from './locale';
-import './flash';
+import initSettingsPanels from './settings_panels';
+import Flash from './flash';
 
 /**
  * Cluster page has 2 separate parts:
@@ -24,6 +25,8 @@ class ClusterService {
 
 export default class Clusters {
   constructor() {
+    initSettingsPanels();
+
     const dataset = document.querySelector('.js-edit-cluster-form').dataset;
 
     this.state = {
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 5538e46a6c4..8d6f30e3b84 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -4,6 +4,6 @@
   }
 
   .alert-block {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 }
diff --git a/app/views/projects/clusters/_advanced_settings.html.haml b/app/views/projects/clusters/_advanced_settings.html.haml
new file mode 100644
index 00000000000..6c162481dd8
--- /dev/null
+++ b/app/views/projects/clusters/_advanced_settings.html.haml
@@ -0,0 +1,14 @@
+- if can?(current_user, :admin_cluster, @cluster)
+  .append-bottom-20
+    %label.append-bottom-10
+      = s_('ClusterIntegration|Google Container Engine')
+    %p
+      - link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer')
+      = s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
+
+  .well.form-group
+    %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 project.')
+    = 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 Container Engine"})
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index aee6f904a62..ff76abc3553 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -1,24 +1,37 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - breadcrumb_title "Cluster"
 - page_title _("Cluster")
 
+- expanded = Rails.env.test?
+
 - status_path = status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster) && @cluster.on_creation?
-.row.prepend-top-default.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
+.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
   toggle_status: @cluster.enabled? ? 'true': 'false',
   cluster_status: @cluster.status_name,
   cluster_status_reason: @cluster.status_reason } }
-  .col-sm-4
-    = render 'sidebar'
-  .col-sm-8
-    %label.append-bottom-10{ for: 'enable-cluster-integration' }
-      = s_('ClusterIntegration|Enable cluster integration')
-    %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.')
+
+  %section.settings
+    %h4= s_('ClusterIntegration|Enable cluster integration')
+    .settings-content.expanded
+
+      .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 Container Engine')
+        %p.js-error-reason
+
+      .hidden.js-cluster-creating.alert.alert-info.alert-block.append-bottom-10{ role: 'alert' }
+        = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
+
+      .hidden.js-cluster-success.alert.alert-success.alert-block.append-bottom-10{ role: 'alert' }
+        = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine')
+
+      %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 enabled for this project.')
-      - else
-        = s_('ClusterIntegration|Cluster integration is disabled for this project.')
+          = s_('ClusterIntegration|Cluster integration is disabled for this project.')
 
     = form_for [@project.namespace.becomes(Namespace), @project, @cluster] do |field|
       = form_errors(@cluster)
@@ -36,35 +49,28 @@
           .form-group
             = field.submit s_('ClusterIntegration|Save'), class: 'btn btn-success'
 
-    - if can?(current_user, :admin_cluster, @cluster)
-      %label.append-bottom-10{ for: 'google-container-engine' }
-        = s_('ClusterIntegration|Google Container Engine')
-      %p
-        - link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer')
-        = s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke }
+  %section.settings#js-cluster-details
+    .settings-header
+      %h4= s_('ClusterIntegration|Cluster details')
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p= s_('ClusterIntegration|See and edit the details for your cluster')
 
-      .hidden.js-cluster-error.alert.alert-danger.alert-block{ role: 'alert' }
-        = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine')
-        %p.js-error-reason
-
-      .hidden.js-cluster-creating.alert.alert-info.alert-block{ role: 'alert' }
-        = s_('ClusterIntegration|Cluster is being created on Google Container Engine...')
-
-      .hidden.js-cluster-success.alert.alert-success.alert-block{ role: 'alert' }
-        = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine')
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
 
-    .form_group.append-bottom-20
-      %label.append-bottom-10{ for: 'cluter-name' }
-        = s_('ClusterIntegration|Cluster name')
-      .input-group
-        %input.form-control.cluster-name{ value: @cluster.gcp_cluster_name, disabled: true }
-        %span.input-group-addon.clipboard-addon
-          = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name'))
+      .form_group.append-bottom-20
+        %label.append-bottom-10{ for: 'cluter-name' }
+          = s_('ClusterIntegration|Cluster name')
+        .input-group
+          %input.form-control.cluster-name{ value: @cluster.gcp_cluster_name, disabled: true }
+          %span.input-group-addon.clipboard-addon
+            = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name'))
 
-    - if can?(current_user, :admin_cluster, @cluster)
-      .well.form_group
-        %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 project.')
-        = 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 Container Engine"})
+  %section.settings#js-cluster-advanced-settings
+    .settings-header
+      %h4= s_('ClusterIntegration|Advanced settings')
+      %button.btn.js-settings-toggle
+        = expanded ? 'Collapse' : 'Expand'
+      %p= s_('ClusterIntegration|Manage Cluster integration on your GitLab project')
+    .settings-content.no-animate{ class: ('expanded' if expanded) }
+      = render 'advanced_settings'