diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 2ca84de0454fdde8996c1b2f1f25c41618eed61d..937e4c3bfc384b351fbe86e026845b82566eef01 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 }} - {{ title }} - - {{ title }} + {{ title }}
{{ versionLabel }} - - to + to chart v{{ version }} - chart v{{ version }} -
{{ upgradeSuccessDescription }} - @@ -351,18 +361,23 @@ export default { role="gridcell" >
- - {{ manageButtonLabel }} - + {{ + manageButtonLabel + }}
+
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 0000000000000000000000000000000000000000..30918d1d115b17a36a60baade31aad9aa7f75aa0 --- /dev/null +++ b/app/assets/javascripts/clusters/components/uninstall_application_button.vue @@ -0,0 +1,14 @@ + + + diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js index 1e4e814b5e185d6ba7847e12058f7d98dddb8d58..038d2be9e982d3ddf63d048a783612138cfae078 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, {