Add missing state on the application row component

This fixes the application row component weird state when an
`updating` status is fetched, this causes apps to show as uninstalled
even though they are installed in the cluster.

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

 <script>
-  /* eslint-disable vue/require-default-prop */
-  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 {
+/* eslint-disable vue/require-default-prop */
+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_LOADING,
   REQUEST_SUCCESS,
   REQUEST_FAILURE,
-  } from '../constants';
+} from '../constants';
 
-  export default {
+export default {
   components: {
     loadingButton,
     identicon,
@@ -74,7 +74,9 @@
     },
     isInstalled() {
       return (
-          this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
       );
     },
     hasLogo() {
@@ -88,19 +90,24 @@
       return `js-cluster-application-row-${this.id}`;
     },
     installButtonLoading() {
-        return !this.status ||
+      return (
+        !this.status ||
         this.status === APPLICATION_STATUS.SCHEDULED ||
         this.status === APPLICATION_STATUS.INSTALLING ||
-          this.requestStatus === REQUEST_LOADING;
+        this.requestStatus === REQUEST_LOADING
+      );
     },
     installButtonDisabled() {
       // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
       // we already made a request to install and are just waiting for the real-time
       // to sync up.
-        return ((this.status !== APPLICATION_STATUS.INSTALLABLE
-          && this.status !== APPLICATION_STATUS.ERROR) ||
+      return (
+        ((this.status !== APPLICATION_STATUS.INSTALLABLE &&
+          this.status !== APPLICATION_STATUS.ERROR) ||
           this.requestStatus === REQUEST_LOADING ||
-          this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus;
+          this.requestStatus === REQUEST_SUCCESS) &&
+        this.isKnownStatus
+      );
     },
     installButtonLabel() {
       let label;
@@ -111,11 +118,16 @@
         this.isUnknownStatus
       ) {
         label = s__('ClusterIntegration|Install');
-        } else if (this.status === APPLICATION_STATUS.SCHEDULED ||
-          this.status === APPLICATION_STATUS.INSTALLING) {
+      } else if (
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING
+      ) {
         label = s__('ClusterIntegration|Installing');
-        } else if (this.status === APPLICATION_STATUS.INSTALLED ||
-          this.status === APPLICATION_STATUS.UPDATED) {
+      } else if (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
+      ) {
         label = s__('ClusterIntegration|Installed');
       }
 
@@ -128,15 +140,12 @@
       return s__('ClusterIntegration|Manage');
     },
     hasError() {
-        return 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}'), {
+      return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {
         title: this.title,
-          },
-        );
+      });
     },
   },
   methods: {
@@ -147,7 +156,7 @@
       });
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/clusters/constants.js

@@ -6,6 +6,7 @@ export const APPLICATION_STATUS = {
   INSTALLING: 'installing',
   INSTALLED: 'installed',
   UPDATED: 'updated',
+  UPDATING: 'updating',
   ERROR: 'errored',
 };
 

spec/javascripts/clusters/components/application_row_spec.js

@@ -112,6 +112,17 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(true);
     });
 
+    it('has disabled "Installed" when APPLICATION_STATUS.UPDATING', () => {
+      vm = mountComponent(ApplicationRow, {
+        ...DEFAULT_APPLICATION_STATE,
+        status: APPLICATION_STATUS.UPDATING,
+      });
+
+      expect(vm.installButtonLabel).toEqual('Installed');
+      expect(vm.installButtonLoading).toEqual(false);
+      expect(vm.installButtonDisabled).toEqual(true);
+    });
+
     it('has enabled "Install" when APPLICATION_STATUS.ERROR', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -215,7 +226,9 @@ describe('Application Row', () => {
         status: null,
         requestStatus: null,
       });
-      const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
+      const generalErrorMessage = vm.$el.querySelector(
+        '.js-cluster-application-general-error-message',
+      );
 
       expect(generalErrorMessage).toBeNull();
     });
@@ -227,10 +240,16 @@ describe('Application Row', () => {
         status: APPLICATION_STATUS.ERROR,
         statusReason,
       });
-      const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
-      const statusErrorMessage = vm.$el.querySelector('.js-cluster-application-status-error-message');
+      const generalErrorMessage = vm.$el.querySelector(
+        '.js-cluster-application-general-error-message',
+      );
+      const statusErrorMessage = vm.$el.querySelector(
+        '.js-cluster-application-status-error-message',
+      );
 
-      expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
+      expect(generalErrorMessage.textContent.trim()).toEqual(
+        `Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
+      );
       expect(statusErrorMessage.textContent.trim()).toEqual(statusReason);
     });
 
@@ -242,10 +261,16 @@ describe('Application Row', () => {
         requestStatus: REQUEST_FAILURE,
         requestReason,
       });
-      const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
-      const requestErrorMessage = vm.$el.querySelector('.js-cluster-application-request-error-message');
+      const generalErrorMessage = vm.$el.querySelector(
+        '.js-cluster-application-general-error-message',
+      );
+      const requestErrorMessage = vm.$el.querySelector(
+        '.js-cluster-application-request-error-message',
+      );
 
-      expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
+      expect(generalErrorMessage.textContent.trim()).toEqual(
+        `Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
+      );
       expect(requestErrorMessage.textContent.trim()).toEqual(requestReason);
     });
   });