Hide cluster details until cluster is created

Only display the details of the cluster page when the cluster
exists. If it is in "creating" state, show a message and a spinner

2 files changed, 29 insertions, 25 deletions

diff --git a/app/views/clusters/clusters/_banner.html.haml b/app/views/clusters/clusters/_banner.html.haml
index a5de67be96b..4b4278075a6 100644
--- a/app/views/clusters/clusters/_banner.html.haml
+++ b/app/views/clusters/clusters/_banner.html.haml
@@ -3,7 +3,8 @@
   %p.js-error-reason
 
 .hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
-  = s_('ClusterIntegration|Kubernetes cluster is being created on Google Kubernetes Engine...')
+  %span.spinner.spinner-dark.spinner-sm{ 'aria-label': 'Loading' }
+  %span.prepend-left-4= s_('ClusterIntegration|Kubernetes cluster is being created on Google Kubernetes Engine...')
 
 .hidden.row.js-cluster-api-unreachable.bs-callout.bs-callout-warning{ role: 'alert' }
   .col-11
@@ -18,4 +19,4 @@
     %button.js-close-banner.close.cluster-application-banner-close.h-100.m-0= "×"
 
 .hidden.js-cluster-success.bs-callout.bs-callout-success{ role: 'alert' }
-  = s_("ClusterIntegration|Kubernetes cluster was successfully created on Google Kubernetes Engine. Refresh the page to see Kubernetes cluster's details")
+  = s_("ClusterIntegration|Kubernetes cluster was successfully created on Google Kubernetes Engine.")
diff --git a/app/views/clusters/clusters/show.html.haml b/app/views/clusters/clusters/show.html.haml
index 4dfbb310142..913d4caa0bc 100644
--- a/app/views/clusters/clusters/show.html.haml
+++ b/app/views/clusters/clusters/show.html.haml
@@ -33,26 +33,29 @@
   %section#cluster-integration
     %h4= @cluster.name
     = render 'banner'
-    = render 'form'
-
-  = 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'
+
+    - 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'