Commit 5a7b8666 authored by Enrique Alcantara's avatar Enrique Alcantara

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.
parent 8f6ec252
...@@ -6,6 +6,8 @@ import { s__, sprintf } from '../../locale'; ...@@ -6,6 +6,8 @@ import { s__, sprintf } from '../../locale';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import identicon from '../../vue_shared/components/identicon.vue'; import identicon from '../../vue_shared/components/identicon.vue';
import loadingButton from '../../vue_shared/components/loading_button.vue'; import loadingButton from '../../vue_shared/components/loading_button.vue';
import UninstallApplicationButton from './uninstall_application_button.vue';
import { import {
APPLICATION_STATUS, APPLICATION_STATUS,
REQUEST_SUBMITTED, REQUEST_SUBMITTED,
...@@ -19,6 +21,7 @@ export default { ...@@ -19,6 +21,7 @@ export default {
identicon, identicon,
TimeagoTooltip, TimeagoTooltip,
GlLink, GlLink,
UninstallApplicationButton,
}, },
props: { props: {
id: { id: {
...@@ -47,6 +50,11 @@ export default { ...@@ -47,6 +50,11 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
uninstallable: {
type: Boolean,
required: false,
default: false,
},
status: { status: {
type: String, type: String,
required: false, required: false,
...@@ -66,7 +74,7 @@ export default { ...@@ -66,7 +74,7 @@ export default {
installed: { installed: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false,
}, },
version: { version: {
type: String, type: String,
...@@ -122,6 +130,12 @@ export default { ...@@ -122,6 +130,12 @@ export default {
rowJsClass() { rowJsClass() {
return `js-cluster-application-row-${this.id}`; return `js-cluster-application-row-${this.id}`;
}, },
displayUninstallButton() {
return this.installed && this.uninstallable;
},
displayInstallButton() {
return !this.installed || !this.uninstallable;
},
installButtonLoading() { installButtonLoading() {
return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling; return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling;
}, },
...@@ -277,10 +291,9 @@ export default { ...@@ -277,10 +291,9 @@ export default {
target="blank" target="blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="js-cluster-application-title" class="js-cluster-application-title"
>{{ title }}</a
> >
{{ title }} <span v-else class="js-cluster-application-title">{{ title }}</span>
</a>
<span v-else class="js-cluster-application-title"> {{ title }} </span>
</strong> </strong>
<slot name="description"></slot> <slot name="description"></slot>
<div <div
...@@ -305,17 +318,15 @@ export default { ...@@ -305,17 +318,15 @@ export default {
class="form-text text-muted label p-0 js-cluster-application-upgrade-details" class="form-text text-muted label p-0 js-cluster-application-upgrade-details"
> >
{{ versionLabel }} {{ versionLabel }}
<span v-if="upgradeSuccessful">to</span>
<span v-if="upgradeSuccessful"> to</span>
<gl-link <gl-link
v-if="upgradeSuccessful" v-if="upgradeSuccessful"
:href="chartRepo" :href="chartRepo"
target="_blank" target="_blank"
class="js-cluster-application-upgrade-version" class="js-cluster-application-upgrade-version"
>chart v{{ version }}</gl-link
> >
chart v{{ version }}
</gl-link>
</div> </div>
<div <div
...@@ -330,7 +341,6 @@ export default { ...@@ -330,7 +341,6 @@ export default {
class="bs-callout bs-callout-success cluster-application-banner mt-2 mb-0 p-0 pl-3" class="bs-callout bs-callout-success cluster-application-banner mt-2 mb-0 p-0 pl-3"
> >
{{ upgradeSuccessDescription }} {{ upgradeSuccessDescription }}
<button class="close cluster-application-banner-close" @click="dismissUpgradeSuccess"> <button class="close cluster-application-banner-close" @click="dismissUpgradeSuccess">
&times; &times;
</button> </button>
...@@ -351,18 +361,23 @@ export default { ...@@ -351,18 +361,23 @@ export default {
role="gridcell" role="gridcell"
> >
<div v-if="showManageButton" class="btn-group table-action-buttons"> <div v-if="showManageButton" class="btn-group table-action-buttons">
<a :href="manageLink" :class="{ disabled: disabled }" class="btn"> <a :href="manageLink" :class="{ disabled: disabled }" class="btn">{{
{{ manageButtonLabel }} manageButtonLabel
</a> }}</a>
</div> </div>
<div class="btn-group table-action-buttons"> <div class="btn-group table-action-buttons">
<loading-button <loading-button
v-if="displayInstallButton"
:loading="installButtonLoading" :loading="installButtonLoading"
:disabled="disabled || installButtonDisabled" :disabled="disabled || installButtonDisabled"
:label="installButtonLabel" :label="installButtonLabel"
class="js-cluster-application-install-button" class="js-cluster-application-install-button"
@click="installClicked" @click="installClicked"
/> />
<uninstall-application-button
v-if="displayUninstallButton"
class="js-cluster-application-uninstall-button"
/>
</div> </div>
</div> </div>
</div> </div>
......
<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>
...@@ -114,11 +114,12 @@ describe('Application Row', () => { ...@@ -114,11 +114,12 @@ describe('Application Row', () => {
expect(vm.installButtonDisabled).toEqual(true); 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, { vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE, ...DEFAULT_APPLICATION_STATE,
status: APPLICATION_STATUS.INSTALLED, status: APPLICATION_STATUS.INSTALLED,
installed: true, installed: true,
uninstallable: false,
}); });
expect(vm.installButtonLabel).toEqual('Installed'); expect(vm.installButtonLabel).toEqual('Installed');
...@@ -126,6 +127,18 @@ describe('Application Row', () => { ...@@ -126,6 +127,18 @@ describe('Application Row', () => {
expect(vm.installButtonDisabled).toEqual(true); 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', () => { it('has enabled "Install" when APPLICATION_STATUS.ERROR', () => {
vm = mountComponent(ApplicationRow, { vm = mountComponent(ApplicationRow, {
...DEFAULT_APPLICATION_STATE, ...DEFAULT_APPLICATION_STATE,
...@@ -198,6 +211,19 @@ describe('Application Row', () => { ...@@ -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', () => { describe('Upgrade button', () => {
it('has indeterminate state on page load', () => { it('has indeterminate state on page load', () => {
vm = mountComponent(ApplicationRow, { vm = mountComponent(ApplicationRow, {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment