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, 44 insertions, 12 deletions

diff --git a/spec/features/projects/clusters/applications_spec.rb b/spec/features/projects/clusters/applications_spec.rb
index 217bf1f5506..8cfd23d16df 100644
--- a/spec/features/projects/clusters/applications_spec.rb
+++ b/spec/features/projects/clusters/applications_spec.rb
@@ -22,9 +22,8 @@ describe 'Clusters Applications', :js do
       let(:cluster) { create(:cluster, :providing_by_gcp, projects: [project]) }
 
       it 'user is unable to install applications' do
-        page.within('.js-cluster-application-row-helm') do
-          expect(page).to have_css('.js-cluster-application-install-button[disabled]', exact_text: 'Install')
-        end
+        expect(page).not_to have_css('.js-cluster-application-row-helm')
+        expect(page).not_to have_css('.js-cluster-application-install-button')
       end
     end
 
diff --git a/spec/frontend/clusters/clusters_bundle_spec.js b/spec/frontend/clusters/clusters_bundle_spec.js
index 6de06a9e2d5..80816faa5fc 100644
--- a/spec/frontend/clusters/clusters_bundle_spec.js
+++ b/spec/frontend/clusters/clusters_bundle_spec.js
@@ -147,47 +147,80 @@ describe('Clusters', () => {
   });
 
   describe('updateContainer', () => {
+    const { location } = window;
+
+    beforeEach(() => {
+      delete window.location;
+      window.location = {
+        reload: jest.fn(),
+        hash: location.hash,
+      };
+    });
+
+    afterEach(() => {
+      window.location = location;
+    });
+
     describe('when creating cluster', () => {
       it('should show the creating container', () => {
         cluster.updateContainer(null, 'creating');
 
         expect(cluster.creatingContainer.classList.contains('hidden')).toBeFalsy();
-
         expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy();
-
         expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy();
+        expect(window.location.reload).not.toHaveBeenCalled();
       });
 
       it('should continue to show `creating` banner with subsequent updates of the same status', () => {
+        cluster.updateContainer(null, 'creating');
         cluster.updateContainer('creating', 'creating');
 
         expect(cluster.creatingContainer.classList.contains('hidden')).toBeFalsy();
-
         expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy();
-
         expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy();
+        expect(window.location.reload).not.toHaveBeenCalled();
       });
     });
 
     describe('when cluster is created', () => {
-      it('should show the success container and fresh the page', () => {
-        cluster.updateContainer(null, 'created');
+      it('should hide the "creating" banner and refresh the page', () => {
+        jest.spyOn(cluster, 'setClusterNewlyCreated');
+        cluster.updateContainer(null, 'creating');
+        cluster.updateContainer('creating', 'created');
 
         expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy();
+        expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy();
+        expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy();
+        expect(window.location.reload).toHaveBeenCalled();
+        expect(cluster.setClusterNewlyCreated).toHaveBeenCalledWith(true);
+      });
 
-        expect(cluster.successContainer.classList.contains('hidden')).toBeFalsy();
+      it('when the page is refreshed, it should show the "success" banner', () => {
+        jest.spyOn(cluster, 'setClusterNewlyCreated');
+        jest.spyOn(cluster, 'isClusterNewlyCreated').mockReturnValue(true);
+
+        cluster.updateContainer(null, 'created');
+        cluster.updateContainer('created', 'created');
 
+        expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy();
+        expect(cluster.successContainer.classList.contains('hidden')).toBeFalsy();
         expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        expect(cluster.setClusterNewlyCreated).toHaveBeenCalledWith(false);
       });
 
       it('should not show a banner when status is already `created`', () => {
+        jest.spyOn(cluster, 'setClusterNewlyCreated');
+        jest.spyOn(cluster, 'isClusterNewlyCreated').mockReturnValue(false);
+
+        cluster.updateContainer(null, 'created');
         cluster.updateContainer('created', 'created');
 
         expect(cluster.creatingContainer.classList.contains('hidden')).toBeTruthy();
-
         expect(cluster.successContainer.classList.contains('hidden')).toBeTruthy();
-
         expect(cluster.errorContainer.classList.contains('hidden')).toBeTruthy();
+        expect(window.location.reload).not.toHaveBeenCalled();
+        expect(cluster.setClusterNewlyCreated).not.toHaveBeenCalled();
       });
     });