Show uninstall button when app is uninstallable

- Create empty uninstall_button component.
- Add uninstallable property to application_row component.
- Display Uninstall button if app is uninstallable and it
is installed.

3 files changed, 68 insertions, 13 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 2ca84de0454..937e4c3bfc3 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -6,6 +6,8 @@ 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 UninstallApplicationButton from './uninstall_application_button.vue';
+
 import {
   APPLICATION_STATUS,
   REQUEST_SUBMITTED,
@@ -19,6 +21,7 @@ export default {
     identicon,
     TimeagoTooltip,
     GlLink,
+    UninstallApplicationButton,
   },
   props: {
     id: {
@@ -47,6 +50,11 @@ export default {
       required: false,
       default: false,
     },
+    uninstallable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     status: {
       type: String,
       required: false,
@@ -66,7 +74,7 @@ export default {
     installed: {
       type: Boolean,
       required: false,
-      default: false
+      default: false,
     },
     version: {
       type: String,
@@ -122,6 +130,12 @@ export default {
     rowJsClass() {
       return `js-cluster-application-row-${this.id}`;
     },
+    displayUninstallButton() {
+      return this.installed && this.uninstallable;
+    },
+    displayInstallButton() {
+      return !this.installed || !this.uninstallable;
+    },
     installButtonLoading() {
       return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling;
     },
@@ -277,10 +291,9 @@ export default {
             target="blank"
             rel="noopener noreferrer"
             class="js-cluster-application-title"
+            >{{ title }}</a
           >
-            {{ title }}
-          </a>
-          <span v-else class="js-cluster-application-title"> {{ title }} </span>
+          <span v-else class="js-cluster-application-title">{{ title }}</span>
         </strong>
         <slot name="description"></slot>
         <div
@@ -305,17 +318,15 @@ 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="upgradeSuccessful">to</span>
 
           <gl-link
             v-if="upgradeSuccessful"
             :href="chartRepo"
             target="_blank"
             class="js-cluster-application-upgrade-version"
+            >chart v{{ version }}</gl-link
           >
-            chart v{{ version }}
-          </gl-link>
         </div>
 
         <div
@@ -330,7 +341,6 @@ export default {
           class="bs-callout bs-callout-success cluster-application-banner mt-2 mb-0 p-0 pl-3"
         >
           {{ upgradeSuccessDescription }}
-
           <button class="close cluster-application-banner-close" @click="dismissUpgradeSuccess">
             &times;
           </button>
@@ -351,18 +361,23 @@ 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
+            v-if="displayInstallButton"
             :loading="installButtonLoading"
             :disabled="disabled || installButtonDisabled"
             :label="installButtonLabel"
             class="js-cluster-application-install-button"
             @click="installClicked"
           />
+          <uninstall-application-button
+            v-if="displayUninstallButton"
+            class="js-cluster-application-uninstall-button"
+          />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/clusters/components/uninstall_application_button.vue b/app/assets/javascripts/clusters/components/uninstall_application_button.vue
new file mode 100644
index 00000000000..30918d1d115
--- /dev/null
+++ b/app/assets/javascripts/clusters/components/uninstall_application_button.vue
@@ -0,0 +1,14 @@
+<script>
+// TODO: Implement loading button component
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+
+export default {
+  components: {
+    LoadingButton,
+  },
+};
+</script>
+
+<template>
+  <loading-button @click="$emit('click')" />
+</template>
diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js
index 1e4e814b5e1..038d2be9e98 100644
--- a/spec/frontend/clusters/components/application_row_spec.js
+++ b/spec/frontend/clusters/components/application_row_spec.js
@@ -114,11 +114,12 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(true);
     });
 
-    it('has disabled "Installed" when application is installed', () => {
+    it('has disabled "Installed" when application is installed and not uninstallable', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
         status: APPLICATION_STATUS.INSTALLED,
         installed: true,
+        uninstallable: false,
       });
 
       expect(vm.installButtonLabel).toEqual('Installed');
@@ -126,6 +127,18 @@ describe('Application Row', () => {
       expect(vm.installButtonDisabled).toEqual(true);
     });
 
+    it('hides when application is installed and uninstallable', () => {
+      vm = mountComponent(ApplicationRow, {
+        ...DEFAULT_APPLICATION_STATE,
+        status: APPLICATION_STATUS.INSTALLED,
+        installed: true,
+        uninstallable: true,
+      });
+      const installBtn = vm.$el.querySelector('.js-cluster-application-install-button');
+
+      expect(installBtn).toBe(null);
+    });
+
     it('has enabled "Install" when APPLICATION_STATUS.ERROR', () => {
       vm = mountComponent(ApplicationRow, {
         ...DEFAULT_APPLICATION_STATE,
@@ -198,6 +211,19 @@ describe('Application Row', () => {
     });
   });
 
+  describe('Uninstall button', () => {
+    it('displays button when app is installed and uninstallable', () => {
+      vm = mountComponent(ApplicationRow, {
+        ...DEFAULT_APPLICATION_STATE,
+        installed: true,
+        uninstallable: true,
+      });
+      const uninstallButton = vm.$el.querySelector('.js-cluster-application-uninstall-button');
+
+      expect(uninstallButton).toBeTruthy();
+    });
+  });
+
   describe('Upgrade button', () => {
     it('has indeterminate state on page load', () => {
       vm = mountComponent(ApplicationRow, {