Simplify application_row computed props60639-cluster-application-state-machine

- It is not necessary to have computed properties with
complex boolean expressions. Instead rely on the fact that
the FSM will always maintain the application in the right state.

3 files changed, 102 insertions, 150 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 17fe816e62b..a351916942e 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -8,12 +8,7 @@ import identicon from '../../vue_shared/components/identicon.vue';
 import loadingButton from '../../vue_shared/components/loading_button.vue';
 import UninstallApplicationButton from './uninstall_application_button.vue';
 
-import {
-  APPLICATION_STATUS,
-  REQUEST_SUBMITTED,
-  REQUEST_FAILURE,
-  UPGRADE_REQUESTED,
-} from '../constants';
+import { APPLICATION_STATUS } from '../constants';
 
 export default {
   components: {
@@ -63,10 +58,6 @@ export default {
       type: String,
       required: false,
     },
-    requestStatus: {
-      type: String,
-      required: false,
-    },
     requestReason: {
       type: String,
       required: false,
@@ -76,6 +67,11 @@ export default {
       required: false,
       default: false,
     },
+    installFailed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     version: {
       type: String,
       required: false,
@@ -88,6 +84,21 @@ export default {
       type: Boolean,
       required: false,
     },
+    updateSuccessful: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    updateFailed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    updateAcknowledged: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     installApplicationRequestParams: {
       type: Object,
       required: false,
@@ -102,21 +113,12 @@ export default {
       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.installed)
-      );
+      return this.status === APPLICATION_STATUS.INSTALLING;
     },
     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
       );
     },
@@ -137,7 +139,7 @@ export default {
       return !this.installed || !this.uninstallable;
     },
     installButtonLoading() {
-      return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling;
+      return !this.status || this.isInstalling;
     },
     installButtonDisabled() {
       // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
@@ -168,19 +170,13 @@ export default {
     manageButtonLabel() {
       return s__('ClusterIntegration|Manage');
     },
-    hasError() {
-      return (
-        !this.isInstalling &&
-        (this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE)
-      );
-    },
     generalErrorDescription() {
       return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {
         title: this.title,
       });
     },
     versionLabel() {
-      if (this.upgradeFailed) {
+      if (this.updateFailed) {
         return s__('ClusterIntegration|Upgrade failed');
       } else if (this.isUpgrading) {
         return s__('ClusterIntegration|Upgrading');
@@ -188,19 +184,6 @@ export default {
 
       return s__('ClusterIntegration|Upgraded');
     },
-    upgradeRequested() {
-      return this.requestStatus === UPGRADE_REQUESTED;
-    },
-    upgradeSuccessful() {
-      return this.status === APPLICATION_STATUS.UPDATED;
-    },
-    upgradeFailed() {
-      if (this.isUpgrading) {
-        return false;
-      }
-
-      return this.status === APPLICATION_STATUS.UPDATE_ERRORED;
-    },
     upgradeFailureDescription() {
       return s__('ClusterIntegration|Update failed. Please check the logs and try again.');
     },
@@ -211,11 +194,11 @@ export default {
     },
     upgradeButtonLabel() {
       let label;
-      if (this.upgradeAvailable && !this.upgradeFailed && !this.isUpgrading) {
+      if (this.upgradeAvailable && !this.updateFailed && !this.isUpgrading) {
         label = s__('ClusterIntegration|Upgrade');
       } else if (this.isUpgrading) {
         label = s__('ClusterIntegration|Updating');
-      } else if (this.upgradeFailed) {
+      } else if (this.updateFailed) {
         label = s__('ClusterIntegration|Retry update');
       }
 
@@ -223,25 +206,18 @@ export default {
     },
     isUpgrading() {
       // Since upgrading is handled asynchronously on the backend we need this check to prevent any delay on the frontend
-      return (
-        this.status === APPLICATION_STATUS.UPDATING ||
-        (this.upgradeRequested && !this.upgradeSuccessful)
-      );
+      return this.status === APPLICATION_STATUS.UPDATING;
     },
     shouldShowUpgradeDetails() {
       // This method only returns true when;
       // Upgrade was successful OR Upgrade failed
       //     AND new upgrade is unavailable AND version information is present.
-      return (
-        (this.upgradeSuccessful || this.upgradeFailed) && !this.upgradeAvailable && this.version
-      );
+      return (this.updateSuccessful || this.updateFailed) && !this.upgradeAvailable && this.version;
     },
   },
   watch: {
-    status() {
-      if (this.status === APPLICATION_STATUS.UPDATE_ERRORED) {
-        eventHub.$emit('upgradeFailed', this.id);
-      } else if (this.upgradeRequested && this.upgradeSuccessful) {
+    updateSuccessful() {
+      if (this.updateSuccessful) {
         this.$toast.show(this.upgradeSuccessDescription);
       }
     },
@@ -296,7 +272,7 @@ export default {
         </strong>
         <slot name="description"></slot>
         <div
-          v-if="hasError || isUnknownStatus"
+          v-if="installFailed || isUnknownStatus"
           class="cluster-application-error text-danger prepend-top-10"
         >
           <p class="js-cluster-application-general-error-message append-bottom-0">
@@ -317,10 +293,10 @@ export default {
           class="form-text text-muted label p-0 js-cluster-application-upgrade-details"
         >
           {{ versionLabel }}
-          <span v-if="upgradeSuccessful">to</span>
+          <span v-if="updateSuccessful">to</span>
 
           <gl-link
-            v-if="upgradeSuccessful"
+            v-if="updateSuccessful"
             :href="chartRepo"
             target="_blank"
             class="js-cluster-application-upgrade-version"
@@ -329,13 +305,13 @@ export default {
         </div>
 
         <div
-          v-if="upgradeFailed && !isUpgrading"
+          v-if="updateFailed && !isUpgrading"
           class="bs-callout bs-callout-danger cluster-application-banner mt-2 mb-0 js-cluster-application-upgrade-failure-message"
         >
           {{ upgradeFailureDescription }}
         </div>
         <loading-button
-          v-if="upgradeAvailable || upgradeFailed || isUpgrading"
+          v-if="upgradeAvailable || updateFailed || isUpgrading"
           class="btn btn-primary js-cluster-application-upgrade-button mt-2"
           :loading="isUpgrading"
           :disabled="isUpgrading"
@@ -349,9 +325,9 @@ export default {
         role="gridcell"
       >
         <div v-if="showManageButton" class="btn-group table-action-buttons">
-          <a :href="manageLink" :class="{ disabled: disabled }" class="btn">{{
-            manageButtonLabel
-          }}</a>
+          <a :href="manageLink" :class="{ disabled: disabled }" class="btn">
+            {{ manageButtonLabel }}
+          </a>
         </div>
         <div class="btn-group table-action-buttons">
           <loading-button
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index ae4fe11c6ae..dfc2069f131 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -224,9 +224,9 @@ export default {
     <p class="append-bottom-0">
       {{
         s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
-        Helm Tiller is required to install any of the following applications.`)
+      Helm Tiller is required to install any of the following applications.`)
       }}
-      <a :href="helpPath"> {{ __('More information') }} </a>
+      <a :href="helpPath">{{ __('More information') }}</a>
     </p>
 
     <div class="cluster-application-list prepend-top-10">
@@ -239,15 +239,16 @@ export default {
         :request-status="applications.helm.requestStatus"
         :request-reason="applications.helm.requestReason"
         :installed="applications.helm.installed"
+        :install-failed="applications.helm.installFailed"
         class="rounded-top"
         title-link="https://docs.helm.sh/"
       >
         <div slot="description">
           {{
             s__(`ClusterIntegration|Helm streamlines installing
-            and managing Kubernetes applications.
-            Tiller runs inside of your Kubernetes Cluster,
-            and manages releases of your charts.`)
+          and managing Kubernetes applications.
+          Tiller runs inside of your Kubernetes Cluster,
+          and manages releases of your charts.`)
           }}
         </div>
       </application-row>
@@ -255,7 +256,7 @@ export default {
         <div class="svg-container" v-html="helmInstallIllustration"></div>
         {{
           s__(`ClusterIntegration|You must first install Helm Tiller before
-          installing the applications below`)
+        installing the applications below`)
         }}
       </div>
       <application-row
@@ -267,6 +268,7 @@ export default {
         :request-status="applications.ingress.requestStatus"
         :request-reason="applications.ingress.requestReason"
         :installed="applications.ingress.installed"
+        :install-failed="applications.ingress.installFailed"
         :disabled="!helmInstalled"
         title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
       >
@@ -274,16 +276,14 @@ export default {
           <p>
             {{
               s__(`ClusterIntegration|Ingress gives you a way to route
-              requests to services based on the request host or path,
-              centralizing a number of services into a single entrypoint.`)
+            requests to services based on the request host or path,
+            centralizing a number of services into a single entrypoint.`)
             }}
           </p>
 
           <template v-if="ingressInstalled">
             <div class="form-group">
-              <label for="ingress-endpoint">
-                {{ s__('ClusterIntegration|Ingress Endpoint') }}
-              </label>
+              <label for="ingress-endpoint">{{ s__('ClusterIntegration|Ingress Endpoint') }}</label>
               <div v-if="ingressExternalEndpoint" class="input-group">
                 <input
                   id="ingress-endpoint"
@@ -309,8 +309,8 @@ export default {
               <p class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Point a wildcard DNS to this
-                  generated endpoint in order to access
-                  your application after it has been deployed.`)
+                generated endpoint in order to access
+                your application after it has been deployed.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -321,10 +321,9 @@ export default {
             <p v-if="!ingressExternalEndpoint" class="settings-message js-no-endpoint-message">
               {{
                 s__(`ClusterIntegration|The endpoint is in
-                the process of being assigned. Please check your Kubernetes
-                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+              the process of being assigned. Please check your Kubernetes
+              cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
               }}
-
               <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
               </a>
@@ -344,6 +343,7 @@ export default {
         :request-status="applications.cert_manager.requestStatus"
         :request-reason="applications.cert_manager.requestReason"
         :installed="applications.cert_manager.installed"
+        :install-failed="applications.cert_manager.installFailed"
         :install-application-request-params="{ email: applications.cert_manager.email }"
         :disabled="!helmInstalled"
         title-link="https://cert-manager.readthedocs.io/en/latest/#"
@@ -366,15 +366,14 @@ export default {
               <p class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Issuers represent a certificate authority.
-                  You must provide an email address for your Issuer. `)
+                You must provide an email address for your Issuer. `)
                 }}
                 <a
                   href="http://docs.cert-manager.io/en/latest/reference/issuers.html?highlight=email"
                   target="_blank"
                   rel="noopener noreferrer"
+                  >{{ __('More information') }}</a
                 >
-                  {{ __('More information') }}
-                </a>
               </p>
             </div>
           </div>
@@ -391,6 +390,7 @@ export default {
         :request-status="applications.prometheus.requestStatus"
         :request-reason="applications.prometheus.requestReason"
         :installed="applications.prometheus.installed"
+        :install-failed="applications.prometheus.installFailed"
         :disabled="!helmInstalled"
         title-link="https://prometheus.io/docs/introduction/overview/"
       >
@@ -408,15 +408,18 @@ export default {
         :chart-repo="applications.runner.chartRepo"
         :upgrade-available="applications.runner.upgradeAvailable"
         :installed="applications.runner.installed"
+        :install-failed="applications.runner.installFailed"
+        :update-successful="applications.runner.updateSuccessful"
+        :update-failed="applications.runner.updateFailed"
         :disabled="!helmInstalled"
         title-link="https://docs.gitlab.com/runner/"
       >
         <div slot="description">
           {{
             s__(`ClusterIntegration|GitLab Runner connects to the
-            repository and executes CI/CD jobs,
-            pushing results back and deploying
-            applications to production.`)
+          repository and executes CI/CD jobs,
+          pushing results back and deploying
+          applications to production.`)
           }}
         </div>
       </application-row>
@@ -430,6 +433,7 @@ export default {
         :request-status="applications.jupyter.requestStatus"
         :request-reason="applications.jupyter.requestReason"
         :installed="applications.jupyter.installed"
+        :install-failed="applications.jupyter.installFailed"
         :install-application-request-params="{ hostname: applications.jupyter.hostname }"
         :disabled="!helmInstalled"
         title-link="https://jupyterhub.readthedocs.io/en/stable/"
@@ -438,18 +442,16 @@ export default {
           <p>
             {{
               s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
-              manages, and proxies multiple instances of the single-user
-              Jupyter notebook server. JupyterHub can be used to serve
-              notebooks to a class of students, a corporate data science group,
-              or a scientific research group.`)
+            manages, and proxies multiple instances of the single-user
+            Jupyter notebook server. JupyterHub can be used to serve
+            notebooks to a class of students, a corporate data science group,
+            or a scientific research group.`)
             }}
           </p>
 
           <template v-if="ingressExternalEndpoint">
             <div class="form-group">
-              <label for="jupyter-hostname">
-                {{ s__('ClusterIntegration|Jupyter Hostname') }}
-              </label>
+              <label for="jupyter-hostname">{{ s__('ClusterIntegration|Jupyter Hostname') }}</label>
 
               <div class="input-group">
                 <input
@@ -470,7 +472,7 @@ export default {
               <p v-if="ingressInstalled" class="form-text text-muted">
                 {{
                   s__(`ClusterIntegration|Replace this with your own hostname if you want.
-                  If you do so, point hostname to Ingress IP Address from above.`)
+                If you do so, point hostname to Ingress IP Address from above.`)
                 }}
                 <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
                   {{ __('More information') }}
@@ -490,8 +492,10 @@ export default {
         :request-status="applications.knative.requestStatus"
         :request-reason="applications.knative.requestReason"
         :installed="applications.knative.installed"
+        :install-failed="applications.knative.installFailed"
         :install-application-request-params="{ hostname: applications.knative.hostname }"
         :disabled="!helmInstalled"
+        v-bind="applications.knative"
         title-link="https://github.com/knative/docs"
       >
         <div slot="description">
@@ -499,7 +503,7 @@ export default {
             <p v-if="!rbac" class="rbac-notice bs-callout bs-callout-info append-bottom-0">
               {{
                 s__(`ClusterIntegration|You must have an RBAC-enabled cluster
-                to install Knative.`)
+              to install Knative.`)
               }}
               <a :href="helpPath" target="_blank" rel="noopener noreferrer">
                 {{ __('More information') }}
@@ -510,9 +514,9 @@ export default {
           <p>
             {{
               s__(`ClusterIntegration|Knative extends Kubernetes to provide
-              a set of middleware components that are essential to build modern,
-              source-centric, and container-based applications that can run
-              anywhere: on premises, in the cloud, or even in a third-party data center.`)
+            a set of middleware components that are essential to build modern,
+            source-centric, and container-based applications that can run
+            anywhere: on premises, in the cloud, or even in a third-party data center.`)
             }}
           </p>
 
@@ -523,9 +527,7 @@ export default {
                 class="form-group col-sm-12 mb-0"
               >
                 <label for="knative-domainname">
-                  <strong>
-                    {{ s__('ClusterIntegration|Knative Domain Name:') }}
-                  </strong>
+                  <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
                 </label>
                 <input
                   id="knative-domainname"
@@ -538,9 +540,7 @@ export default {
             <template v-if="knativeInstalled">
               <div class="form-group col-sm-12 col-md-6 pl-md-0 mb-0 mt-3 mt-md-0">
                 <label for="knative-endpoint">
-                  <strong>
-                    {{ s__('ClusterIntegration|Knative Endpoint:') }}
-                  </strong>
+                  <strong>{{ s__('ClusterIntegration|Knative Endpoint:') }}</strong>
                 </label>
                 <div v-if="knativeExternalEndpoint" class="input-group">
                   <input
@@ -583,8 +583,8 @@ export default {
               >
                 {{
                   s__(`ClusterIntegration|The endpoint is in
-                  the process of being assigned. Please check your Kubernetes
-                  cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
+                the process of being assigned. Please check your Kubernetes
+                cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
                 }}
               </p>
 
diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js
index d26fad54ebe..17273b7d5b1 100644
--- a/spec/frontend/clusters/components/application_row_spec.js
+++ b/spec/frontend/clusters/components/application_row_spec.js
@@ -1,11 +1,6 @@
 import Vue from 'vue';
 import eventHub from '~/clusters/event_hub';
-import {
-  APPLICATION_STATUS,
-  REQUEST_SUBMITTED,
-  REQUEST_FAILURE,
-  UPGRADE_REQUESTED,
-} from '~/clusters/constants';
+import { APPLICATION_STATUS } from '~/clusters/constants';
 import applicationRow from '~/clusters/components/application_row.vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
@@ -85,17 +80,6 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(false);
     });
 
-    it('has loading "Installing" when APPLICATION_STATUS.SCHEDULED', () => {
-      vm = mountComponent(ApplicationRow, {
-        ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.SCHEDULED,
-      });
-
-      expect(vm.installButtonLabel).toEqual('Installing');
-      expect(vm.installButtonLoading).toEqual(true);
-      expect(vm.installButtonDisabled).toEqual(true);
-    });
-
     it('has loading "Installing" when APPLICATION_STATUS.INSTALLING', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -107,18 +91,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 is installed and not uninstallable', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -144,10 +116,11 @@ describe('Application Row', () => {
       expect(installBtn).toBe(null);
     });
 
-    it('has enabled "Install" when APPLICATION_STATUS.ERROR', () => {
+    it('has enabled "Install" when install fails', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.ERROR,
+        status: APPLICATION_STATUS.INSTALLABLE,
+        installFailed: true,
       });
 
       expect(vm.installButtonLabel).toEqual('Install');
@@ -159,7 +132,6 @@ describe('Application Row', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
-        requestStatus: REQUEST_FAILURE,
       });
 
       expect(vm.installButtonLabel).toEqual('Install');
@@ -251,15 +223,15 @@ describe('Application Row', () => {
       expect(upgradeBtn.innerHTML).toContain('Upgrade');
     });
 
-    it('has enabled "Retry update" when APPLICATION_STATUS.UPDATE_ERRORED', () => {
+    it('has enabled "Retry update" when update process fails', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.UPDATE_ERRORED,
+        status: APPLICATION_STATUS.INSTALLED,
+        updateFailed: true,
       });
       const upgradeBtn = vm.$el.querySelector('.js-cluster-application-upgrade-button');
 
       expect(upgradeBtn).not.toBe(null);
-      expect(vm.upgradeFailed).toBe(true);
       expect(upgradeBtn.innerHTML).toContain('Retry update');
     });
 
@@ -279,7 +251,8 @@ describe('Application Row', () => {
       jest.spyOn(eventHub, '$emit');
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.UPDATE_ERRORED,
+        status: APPLICATION_STATUS.INSTALLED,
+        upgradeAvailable: true,
       });
       const upgradeBtn = vm.$el.querySelector('.js-cluster-application-upgrade-button');
 
@@ -308,7 +281,8 @@ describe('Application Row', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         title: 'GitLab Runner',
-        status: APPLICATION_STATUS.UPDATE_ERRORED,
+        status: APPLICATION_STATUS.INSTALLED,
+        updateFailed: true,
       });
       const failureMessage = vm.$el.querySelector(
         '.js-cluster-application-upgrade-failure-message',
@@ -324,12 +298,11 @@ describe('Application Row', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         title: 'GitLab Runner',
-        requestStatus: UPGRADE_REQUESTED,
-        status: APPLICATION_STATUS.UPDATE_ERRORED,
+        updateSuccessful: false,
       });
 
       vm.$toast = { show: jest.fn() };
-      vm.status = APPLICATION_STATUS.UPDATED;
+      vm.updateSuccessful = true;
 
       vm.$nextTick(() => {
         expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner upgraded successfully.');
@@ -342,7 +315,8 @@ describe('Application Row', () => {
       const version = '0.1.45';
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.UPDATED,
+        status: APPLICATION_STATUS.INSTALLED,
+        updateSuccessful: true,
         version,
       });
       const upgradeDetails = vm.$el.querySelector('.js-cluster-application-upgrade-details');
@@ -358,7 +332,8 @@ describe('Application Row', () => {
       const chartRepo = 'https://gitlab.com/charts/gitlab-runner';
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.UPDATED,
+        status: APPLICATION_STATUS.INSTALLED,
+        updateSuccessful: true,
         chartRepo,
         version,
       });
@@ -372,7 +347,8 @@ describe('Application Row', () => {
       const version = '0.1.45';
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
-        status: APPLICATION_STATUS.UPDATE_ERRORED,
+        status: APPLICATION_STATUS.INSTALLED,
+        updateFailed: true,
         version,
       });
       const upgradeDetails = vm.$el.querySelector('.js-cluster-application-upgrade-details');
@@ -388,7 +364,6 @@ describe('Application Row', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: null,
-        requestStatus: null,
       });
       const generalErrorMessage = vm.$el.querySelector(
         '.js-cluster-application-general-error-message',
@@ -397,12 +372,13 @@ describe('Application Row', () => {
       expect(generalErrorMessage).toBeNull();
     });
 
-    it('shows status reason when APPLICATION_STATUS.ERROR', () => {
+    it('shows status reason when install fails', () => {
       const statusReason = 'We broke it 0.0';
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.ERROR,
         statusReason,
+        installFailed: true,
       });
       const generalErrorMessage = vm.$el.querySelector(
         '.js-cluster-application-general-error-message',
@@ -423,7 +399,7 @@ describe('Application Row', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLABLE,
-        requestStatus: REQUEST_FAILURE,
+        installFailed: true,
         requestReason,
       });
       const generalErrorMessage = vm.$el.querySelector(