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.

2 files changed, 41 insertions, 12 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>