Fix missing state on the application row component to deal with the updating status

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 {
-    APPLICATION_STATUS,
-    REQUEST_LOADING,
-    REQUEST_SUCCESS,
-    REQUEST_FAILURE,
-  } from '../constants';
-  export default {
-    components: {
-      loadingButton,
-      identicon,
+/* 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';
+export default {
+  components: {
+    loadingButton,
+    identicon,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
     },
-    props: {
-      id: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      titleLink: {
-        type: String,
-        required: false,
-      },
-      manageLink: {
-        type: String,
-        required: false,
-      },
-      logoUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      status: {
-        type: String,
-        required: false,
-      },
-      statusReason: {
-        type: String,
-        required: false,
-      },
-      requestStatus: {
-        type: String,
-        required: false,
-      },
-      requestReason: {
-        type: String,
-        required: false,
-      },
-      installApplicationRequestParams: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+    title: {
+      type: String,
+      required: true,
     },
-    computed: {
-      isUnknownStatus() {
-        return !this.isKnownStatus && this.status !== null;
-      },
-      isKnownStatus() {
-        return Object.values(APPLICATION_STATUS).includes(this.status);
-      },
-      isInstalled() {
-        return (
-          this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
-        );
-      },
-      hasLogo() {
-        return !!this.logoUrl;
-      },
-      identiconId() {
-        // generate a deterministic integer id for the identicon background
-        return this.id.charCodeAt(0);
-      },
-      rowJsClass() {
-        return `js-cluster-application-row-${this.id}`;
-      },
-      installButtonLoading() {
-        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
-        // 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) ||
+    titleLink: {
+      type: String,
+      required: false,
+    },
+    manageLink: {
+      type: String,
+      required: false,
+    },
+    logoUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    status: {
+      type: String,
+      required: false,
+    },
+    statusReason: {
+      type: String,
+      required: false,
+    },
+    requestStatus: {
+      type: String,
+      required: false,
+    },
+    requestReason: {
+      type: String,
+      required: false,
+    },
+    installApplicationRequestParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isUnknownStatus() {
+      return !this.isKnownStatus && this.status !== null;
+    },
+    isKnownStatus() {
+      return Object.values(APPLICATION_STATUS).includes(this.status);
+    },
+    isInstalled() {
+      return (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
+      );
+    },
+    hasLogo() {
+      return !!this.logoUrl;
+    },
+    identiconId() {
+      // generate a deterministic integer id for the identicon background
+      return this.id.charCodeAt(0);
+    },
+    rowJsClass() {
+      return `js-cluster-application-row-${this.id}`;
+    },
+    installButtonLoading() {
+      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
+      // 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) ||
           this.requestStatus === REQUEST_LOADING ||
-          this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus;
-      },
-      installButtonLabel() {
-        let label;
-        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.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) {
-          label = s__('ClusterIntegration|Installed');
-        }
-        return label;
-      },
-      showManageButton() {
-        return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
-      },
-      manageButtonLabel() {
-        return s__('ClusterIntegration|Manage');
-      },
-      hasError() {
-        return this.status === APPLICATION_STATUS.ERROR ||
-        this.requestStatus === REQUEST_FAILURE;
-      },
-      generalErrorDescription() {
-        return sprintf(
-          s__('ClusterIntegration|Something went wrong while installing %{title}'), {
-            title: this.title,
-          },
-        );
-      },
+          this.requestStatus === REQUEST_SUCCESS) &&
+        this.isKnownStatus
+      );
+    },
+    installButtonLabel() {
+      let label;
+      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.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 ||
+        this.status === APPLICATION_STATUS.UPDATING
+      ) {
+        label = s__('ClusterIntegration|Installed');
+      }
+      return label;
+    },
+    showManageButton() {
+      return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
+    },
+    manageButtonLabel() {
+      return s__('ClusterIntegration|Manage');
+    },
+    hasError() {
+      return this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE;
+    },
+    generalErrorDescription() {
+      return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {
+        title: this.title,
+      });
     },
-    methods: {
-      installClicked() {
-        eventHub.$emit('installApplication', {
-          id: this.id,
-          params: this.installApplicationRequestParams,
-        });
-      },
+  },
+  methods: {
+    installClicked() {
+      eventHub.$emit('installApplication', {
+        id: this.id,
+        params: this.installApplicationRequestParams,
+      });
     },
-  };
+  },
+};
 </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');
-
-      expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
+      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(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');
-
-      expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
+      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(requestErrorMessage.textContent.trim()).toEqual(requestReason);
     });
   });