From d4763515c1ec40f2dadf85736d51eecc80a8d18b Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Tue, 16 Oct 2018 16:56:07 -0500
Subject: 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.
---
 .../clusters/components/application_row.vue        | 293 +++++++++++----------
 app/assets/javascripts/clusters/constants.js       |   1 +
 2 files changed, 152 insertions(+), 142 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 0452729d3ff..236bb1394c8 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -1,153 +1,162 @@
 <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';
+/* 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,
+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');
-        }
+          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,
-          },
-        );
-      },
+      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>
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index 72fc9355d82..24a49624583 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -6,6 +6,7 @@ export const APPLICATION_STATUS = {
   INSTALLING: 'installing',
   INSTALLED: 'installed',
   UPDATED: 'updated',
+  UPDATING: 'updating',
   ERROR: 'errored',
 };
 
-- 
cgit v1.2.3