diff options
author | Enrique Alcantara <ealcantara@gitlab.com> | 2019-04-16 10:56:07 -0400 |
---|---|---|
committer | Enrique Alcantara <ealcantara@gitlab.com> | 2019-04-18 08:27:14 -0400 |
commit | 5a7b8666ca718548cbe1c0bfe82190af6cf3bd57 (patch) | |
tree | 5170b459475ac34149acaa3a1433dc7d815f2d1f | |
parent | 8f6ec252a3a440687740925ec5b01d895fe3e2c0 (diff) | |
download | gitlab-ce-5a7b8666ca718548cbe1c0bfe82190af6cf3bd57.tar.gz |
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"> × </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, { |