Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/clusters/clusters_bundle.js

@@ -6,7 +6,7 @@ import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
-import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from './constants';
+import { APPLICATION_STATUS, REQUEST_LOADING, REQUEST_SUCCESS, REQUEST_FAILURE } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
@@ -231,18 +231,22 @@ export default class Clusters {
 
   installApplication(data) {
     const appId = data.id;
-    this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUBMITTED);
+    this.store.updateAppProperty(appId, 'requestStatus', REQUEST_LOADING);
     this.store.updateAppProperty(appId, 'requestReason', null);
-    this.store.updateAppProperty(appId, 'statusReason', null);
-
-    this.service.installApplication(appId, data.params).catch(() => {
-      this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
-      this.store.updateAppProperty(
-        appId,
-        'requestReason',
-        s__('ClusterIntegration|Request to begin installing failed'),
-      );
-    });
+
+    this.service
+      .installApplication(appId, data.params)
+      .then(() => {
+        this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUCCESS);
+      })
+      .catch(() => {
+        this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
+        this.store.updateAppProperty(
+          appId,
+          'requestReason',
+          s__('ClusterIntegration|Request to begin installing failed'),
+        );
+      });
   }
 
   destroy() {

app/assets/javascripts/clusters/components/application_row.vue

@@ -4,7 +4,12 @@ import { s__, sprintf } from '../../locale';
 import eventHub from '../event_hub';
 import identicon from '../../vue_shared/components/identicon.vue';
 import loadingButton from '../../vue_shared/components/loading_button.vue';
-import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from '../constants';
+import {
+  APPLICATION_STATUS,
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+} from '../constants';
 
 export default {
   components: {
@@ -67,13 +72,6 @@ export default {
     isKnownStatus() {
       return Object.values(APPLICATION_STATUS).includes(this.status);
     },
-    isInstalling() {
-      return (
-        this.status === APPLICATION_STATUS.SCHEDULED ||
-        this.status === APPLICATION_STATUS.INSTALLING ||
-        (this.requestStatus === REQUEST_SUBMITTED && !this.statusReason && !this.isInstalled)
-      );
-    },
     isInstalled() {
       return (
         this.status === APPLICATION_STATUS.INSTALLED ||
@@ -81,18 +79,6 @@ export default {
         this.status === APPLICATION_STATUS.UPDATING
       );
     },
-    canInstall() {
-      if (this.isInstalling) {
-        return false;
-      }
-
-      return (
-        this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
-        this.status === APPLICATION_STATUS.INSTALLABLE ||
-        this.status === APPLICATION_STATUS.ERROR ||
-        this.isUnknownStatus
-      );
-    },
     hasLogo() {
       return !!this.logoUrl;
     },
@@ -104,7 +90,12 @@ export default {
       return `js-cluster-application-row-${this.id}`;
     },
     installButtonLoading() {
-      return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling;
+      return (
+        !this.status ||
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING ||
+        this.requestStatus === REQUEST_LOADING
+      );
     },
     installButtonDisabled() {
       // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
@@ -113,17 +104,30 @@ export default {
       return (
         ((this.status !== APPLICATION_STATUS.INSTALLABLE &&
           this.status !== APPLICATION_STATUS.ERROR) ||
-          this.isInstalling) &&
+          this.requestStatus === REQUEST_LOADING ||
+          this.requestStatus === REQUEST_SUCCESS) &&
         this.isKnownStatus
       );
     },
     installButtonLabel() {
       let label;
-      if (this.canInstall) {
+      if (
+        this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
+        this.status === APPLICATION_STATUS.INSTALLABLE ||
+        this.status === APPLICATION_STATUS.ERROR ||
+        this.isUnknownStatus
+      ) {
         label = s__('ClusterIntegration|Install');
-      } else if (this.isInstalling) {
+      } else if (
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING
+      ) {
         label = s__('ClusterIntegration|Installing');
-      } else if (this.isInstalled) {
+      } else if (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
+      ) {
         label = s__('ClusterIntegration|Installed');
       }
 
@@ -136,10 +140,7 @@ export default {
       return s__('ClusterIntegration|Manage');
     },
     hasError() {
-      return (
-        !this.isInstalling &&
-        (this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE)
-      );
+      return this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE;
     },
     generalErrorDescription() {
       return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {

app/assets/javascripts/clusters/constants.js

@@ -18,7 +18,8 @@ export const APPLICATION_STATUS = {
 };
 
 // These are only used client-side
-export const REQUEST_SUBMITTED = 'request-submitted';
+export const REQUEST_LOADING = 'request-loading';
+export const REQUEST_SUCCESS = 'request-success';
 export const REQUEST_FAILURE = 'request-failure';
 export const INGRESS = 'ingress';
 export const JUPYTER = 'jupyter';

changelogs/unreleased/56398-fix-cluster-installation-loading-state.yml

----
-title: Fix cluster installation processing spinner
-merge_request: 24485
-author:
-type: fixed

spec/javascripts/clusters/clusters_bundle_spec.js

 import Clusters from '~/clusters/clusters_bundle';
-import { REQUEST_SUBMITTED, REQUEST_FAILURE, APPLICATION_STATUS } from '~/clusters/constants';
+import {
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+  APPLICATION_STATUS,
+} from '~/clusters/constants';
 import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 
 describe('Clusters', () => {
@@ -191,43 +196,67 @@ describe('Clusters', () => {
   });
 
   describe('installApplication', () => {
-    it('tries to install helm', () => {
+    it('tries to install helm', done => {
       spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
 
       expect(cluster.store.state.applications.helm.requestStatus).toEqual(null);
 
       cluster.installApplication({ id: 'helm' });
 
-      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUBMITTED);
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_LOADING);
       expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalledWith('helm', undefined);
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('tries to install ingress', () => {
+    it('tries to install ingress', done => {
       spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
 
       expect(cluster.store.state.applications.ingress.requestStatus).toEqual(null);
 
       cluster.installApplication({ id: 'ingress' });
 
-      expect(cluster.store.state.applications.ingress.requestStatus).toEqual(REQUEST_SUBMITTED);
+      expect(cluster.store.state.applications.ingress.requestStatus).toEqual(REQUEST_LOADING);
       expect(cluster.store.state.applications.ingress.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalledWith('ingress', undefined);
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.ingress.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.ingress.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('tries to install runner', () => {
+    it('tries to install runner', done => {
       spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
 
       expect(cluster.store.state.applications.runner.requestStatus).toEqual(null);
 
       cluster.installApplication({ id: 'runner' });
 
-      expect(cluster.store.state.applications.runner.requestStatus).toEqual(REQUEST_SUBMITTED);
+      expect(cluster.store.state.applications.runner.requestStatus).toEqual(REQUEST_LOADING);
       expect(cluster.store.state.applications.runner.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalledWith('runner', undefined);
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.runner.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.runner.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
-    it('tries to install jupyter', () => {
+    it('tries to install jupyter', done => {
       spyOn(cluster.service, 'installApplication').and.returnValue(Promise.resolve());
 
       expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(null);
@@ -236,11 +265,19 @@ describe('Clusters', () => {
         params: { hostname: cluster.store.state.applications.jupyter.hostname },
       });
 
-      expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(REQUEST_SUBMITTED);
+      expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(REQUEST_LOADING);
       expect(cluster.store.state.applications.jupyter.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalledWith('jupyter', {
         hostname: cluster.store.state.applications.jupyter.hostname,
       });
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(cluster.store.state.applications.jupyter.requestStatus).toEqual(REQUEST_SUCCESS);
+          expect(cluster.store.state.applications.jupyter.requestReason).toEqual(null);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('sets error request status when the request fails', done => {
@@ -252,7 +289,7 @@ describe('Clusters', () => {
 
       cluster.installApplication({ id: 'helm' });
 
-      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_SUBMITTED);
+      expect(cluster.store.state.applications.helm.requestStatus).toEqual(REQUEST_LOADING);
       expect(cluster.store.state.applications.helm.requestReason).toEqual(null);
       expect(cluster.service.installApplication).toHaveBeenCalled();
 

spec/javascripts/clusters/components/application_row_spec.js

 import Vue from 'vue';
 import eventHub from '~/clusters/event_hub';
-import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from '~/clusters/constants';
+import {
+  APPLICATION_STATUS,
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+} from '~/clusters/constants';
 import applicationRow from '~/clusters/components/application_row.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
@@ -52,12 +57,6 @@ describe('Application Row', () => {
       expect(vm.installButtonLabel).toBeUndefined();
     });
 
-    it('has install button', () => {
-      const installationBtn = vm.$el.querySelector('.js-cluster-application-install-button');
-
-      expect(installationBtn).not.toBe(null);
-    });
-
     it('has disabled "Install" when APPLICATION_STATUS.NOT_INSTALLABLE', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -102,18 +101,6 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(true);
     });
 
-    it('has loading "Installing" when REQUEST_SUBMITTED', () => {
-      vm = mountComponent(ApplicationRow, {
-        ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.INSTALLABLE,
-        requestStatus: REQUEST_SUBMITTED,
-      });
-
-      expect(vm.installButtonLabel).toEqual('Installing');
-      expect(vm.installButtonLoading).toEqual(true);
-      expect(vm.installButtonDisabled).toEqual(true);
-    });
-
     it('has disabled "Installed" when APPLICATION_STATUS.INSTALLED', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -147,6 +134,30 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(false);
     });
 
+    it('has loading "Install" when REQUEST_LOADING', () => {
+      vm = mountComponent(ApplicationRow, {
+        ...DEFAULT_APPLICATION_STATE,
+        status: APPLICATION_STATUS.INSTALLABLE,
+        requestStatus: REQUEST_LOADING,
+      });
+
+      expect(vm.installButtonLabel).toEqual('Install');
+      expect(vm.installButtonLoading).toEqual(true);
+      expect(vm.installButtonDisabled).toEqual(true);
+    });
+
+    it('has disabled "Install" when REQUEST_SUCCESS', () => {
+      vm = mountComponent(ApplicationRow, {
+        ...DEFAULT_APPLICATION_STATE,
+        status: APPLICATION_STATUS.INSTALLABLE,
+        requestStatus: REQUEST_SUCCESS,
+      });
+
+      expect(vm.installButtonLabel).toEqual('Install');
+      expect(vm.installButtonLoading).toEqual(false);
+      expect(vm.installButtonDisabled).toEqual(true);
+    });
+
     it('has enabled "Install" when REQUEST_FAILURE (so you can try installing again)', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,