diff options
-rw-r--r-- | app/assets/javascripts/clusters/clusters_bundle.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/clusters/components/application_row.vue | 16 | ||||
-rw-r--r-- | app/assets/stylesheets/components/toast.scss | 3 | ||||
-rw-r--r-- | changelogs/unreleased/57017-add-toast-success-message.yml | 5 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | spec/frontend/clusters/components/application_row_spec.js | 23 | ||||
-rw-r--r-- | yarn.lock | 14 |
7 files changed, 46 insertions, 26 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index df855261b3c..7f07e592f84 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -1,5 +1,6 @@ import Visibility from 'visibilityjs'; import Vue from 'vue'; +import { GlToast } from '@gitlab/ui'; import PersistentUserCallout from '../persistent_user_callout'; import { s__, sprintf } from '../locale'; import Flash from '../flash'; @@ -20,6 +21,8 @@ import ClustersStore from './stores/clusters_store'; import Applications from './components/applications.vue'; import setupToggleButtons from '../toggle_buttons'; +Vue.use(GlToast); + /** * Cluster page has 2 separate parts: * Toggle button and applications section @@ -135,7 +138,6 @@ export default class Clusters { eventHub.$on('installApplication', this.installApplication); eventHub.$on('upgradeApplication', data => this.upgradeApplication(data)); eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId)); - eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId)); eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data)); eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data)); } @@ -145,7 +147,6 @@ export default class Clusters { eventHub.$off('installApplication', this.installApplication); eventHub.$off('upgradeApplication', this.upgradeApplication); eventHub.$off('upgradeFailed', this.upgradeFailed); - eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess); eventHub.$off('saveKnativeDomain'); eventHub.$off('setKnativeHostname'); } @@ -283,10 +284,6 @@ export default class Clusters { this.store.updateAppProperty(appId, 'requestStatus', UPGRADE_REQUEST_FAILURE); } - dismissUpgradeSuccess(appId) { - this.store.updateAppProperty(appId, 'requestStatus', null); - } - toggleIngressDomainHelpText(ingressPreviousState, ingressNewState) { const { externalIp, status } = ingressNewState; const helpTextHidden = status !== APPLICATION_STATUS.INSTALLED || !externalIp; diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 937e4c3bfc3..17fe816e62b 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -241,6 +241,8 @@ export default { status() { if (this.status === APPLICATION_STATUS.UPDATE_ERRORED) { eventHub.$emit('upgradeFailed', this.id); + } else if (this.upgradeRequested && this.upgradeSuccessful) { + this.$toast.show(this.upgradeSuccessDescription); } }, }, @@ -257,9 +259,6 @@ export default { params: this.installApplicationRequestParams, }); }, - dismissUpgradeSuccess() { - eventHub.$emit('dismissUpgradeSuccess', this.id); - }, }, }; </script> @@ -335,17 +334,6 @@ export default { > {{ upgradeFailureDescription }} </div> - - <div - v-if="upgradeRequested && upgradeSuccessful" - 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> - </div> - <loading-button v-if="upgradeAvailable || upgradeFailed || isUpgrading" class="btn btn-primary js-cluster-application-upgrade-button mt-2" diff --git a/app/assets/stylesheets/components/toast.scss b/app/assets/stylesheets/components/toast.scss new file mode 100644 index 00000000000..91d16c8e98d --- /dev/null +++ b/app/assets/stylesheets/components/toast.scss @@ -0,0 +1,3 @@ +.toast-close { + font-size: $default-icon-size !important; +} diff --git a/changelogs/unreleased/57017-add-toast-success-message.yml b/changelogs/unreleased/57017-add-toast-success-message.yml new file mode 100644 index 00000000000..931e7755591 --- /dev/null +++ b/changelogs/unreleased/57017-add-toast-success-message.yml @@ -0,0 +1,5 @@ +--- +title: Display a toast message when the Kubernetes runner has successfully upgraded. +merge_request: 27206 +author: +type: changed diff --git a/package.json b/package.json index e04470109be..d2ee29fe06d 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@babel/preset-env": "^7.3.1", "@gitlab/csslab": "^1.9.0", "@gitlab/svgs": "^1.59.0", - "@gitlab/ui": "^3.4.0", + "@gitlab/ui": "^3.5.0", "apollo-cache-inmemory": "^1.5.1", "apollo-client": "^2.5.1", "apollo-upload-client": "^10.0.0", diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js index 038d2be9e98..d26fad54ebe 100644 --- a/spec/frontend/clusters/components/application_row_spec.js +++ b/spec/frontend/clusters/components/application_row_spec.js @@ -1,6 +1,11 @@ import Vue from 'vue'; import eventHub from '~/clusters/event_hub'; -import { APPLICATION_STATUS, REQUEST_SUBMITTED, REQUEST_FAILURE } from '~/clusters/constants'; +import { + APPLICATION_STATUS, + REQUEST_SUBMITTED, + REQUEST_FAILURE, + UPGRADE_REQUESTED, +} from '~/clusters/constants'; import applicationRow from '~/clusters/components/application_row.vue'; import mountComponent from 'helpers/vue_mount_component_helper'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; @@ -314,6 +319,22 @@ describe('Application Row', () => { 'Update failed. Please check the logs and try again.', ); }); + + it('displays a success toast message if application upgrade was successful', () => { + vm = mountComponent(ApplicationRow, { + ...DEFAULT_APPLICATION_STATE, + title: 'GitLab Runner', + requestStatus: UPGRADE_REQUESTED, + status: APPLICATION_STATUS.UPDATE_ERRORED, + }); + + vm.$toast = { show: jest.fn() }; + vm.status = APPLICATION_STATUS.UPDATED; + + vm.$nextTick(() => { + expect(vm.$toast.show).toHaveBeenCalledWith('GitLab Runner upgraded successfully.'); + }); + }); }); describe('Version', () => { diff --git a/yarn.lock b/yarn.lock index 8a23aabba20..a0446b652ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -663,10 +663,10 @@ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.59.0.tgz#affcf9596d736836d37469bb4aea2226ac03e087" integrity sha512-dokGyyLRRsoBKO70KP1g+ZsDGyTK/RIHWDmvWI6Bx5AxQ3UqAzVXn2OIb3owjJAexyRG1uBmJrriiVVyHznQ4g== -"@gitlab/ui@^3.4.0": - version "3.4.0" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.4.0.tgz#174681f210eb16c3d101a36968d5e4d163c0d014" - integrity sha512-joXNz80IHMQxEGrqcNUTEKofjfZtkOKUe34HAFI71NEeYT6H0r/lYmJ5Gcz+MmwM1CvZOVbB3DnKzxQPDbN/hQ== +"@gitlab/ui@^3.5.0": + version "3.5.0" + resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.5.0.tgz#31ecfc16e3f7663545f31ddf07e02bba96a6d138" + integrity sha512-eDD++hhGJuH59g2QcGshuou9/NLcLfse4Abm9KOIWIaYI3NPWW2KRGwLHPB6H0d5W0/X5pyWYQvXgF7JE2ZXbA== dependencies: "@babel/standalone" "^7.0.0" bootstrap-vue "^2.0.0-rc.11" @@ -678,6 +678,7 @@ url-search-params-polyfill "^5.0.0" vue "^2.5.21" vue-loader "^15.4.2" + vue-toasted "^1.1.26" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -10982,6 +10983,11 @@ vue-template-es2015-compiler@^1.9.0: resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== +vue-toasted@^1.1.26: + version "1.1.26" + resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.26.tgz#1333d1a42157ab78389c3810023a49ba94e69c7b" + integrity sha512-Z4/gfPcqdzsRvif7UITrZOkh3C6jm0yQKJyr9kX31IGWXor5dNipE1Sc5SnlL5RLmY7vlLa+SqIjc9Gbpy7V0g== + vue-virtual-scroll-list@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.3.1.tgz#efcb83d3a3dcc69cd886fa4de1130a65493e8f76" |