Adds collapsible sections in cluster page

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 = {

app/assets/stylesheets/pages/clusters.scss

@@ -4,6 +4,6 @@
   }
 
   .alert-block {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
   }
 }

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

+- 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"})

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

+- @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')
+
+  %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)
@@ -36,22 +49,14 @@
           .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' }
@@ -61,10 +66,11 @@
           %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'