Commit 1dc5b6ab authored by Jacques Erasmus's avatar Jacques Erasmus Committed by Fatih Acet

Implement toast component

Implemented the toast component for success messages
parent 93f4e5e8
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import Vue from 'vue'; import Vue from 'vue';
import { GlToast } from '@gitlab/ui';
import PersistentUserCallout from '../persistent_user_callout'; import PersistentUserCallout from '../persistent_user_callout';
import { s__, sprintf } from '../locale'; import { s__, sprintf } from '../locale';
import Flash from '../flash'; import Flash from '../flash';
...@@ -20,6 +21,8 @@ import ClustersStore from './stores/clusters_store'; ...@@ -20,6 +21,8 @@ import ClustersStore from './stores/clusters_store';
import Applications from './components/applications.vue'; import Applications from './components/applications.vue';
import setupToggleButtons from '../toggle_buttons'; import setupToggleButtons from '../toggle_buttons';
Vue.use(GlToast);
/** /**
* Cluster page has 2 separate parts: * Cluster page has 2 separate parts:
* Toggle button and applications section * Toggle button and applications section
...@@ -135,7 +138,6 @@ export default class Clusters { ...@@ -135,7 +138,6 @@ export default class Clusters {
eventHub.$on('installApplication', this.installApplication); eventHub.$on('installApplication', this.installApplication);
eventHub.$on('upgradeApplication', data => this.upgradeApplication(data)); eventHub.$on('upgradeApplication', data => this.upgradeApplication(data));
eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId)); eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId));
eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId));
eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data)); eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data));
eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data)); eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data));
} }
...@@ -145,7 +147,6 @@ export default class Clusters { ...@@ -145,7 +147,6 @@ export default class Clusters {
eventHub.$off('installApplication', this.installApplication); eventHub.$off('installApplication', this.installApplication);
eventHub.$off('upgradeApplication', this.upgradeApplication); eventHub.$off('upgradeApplication', this.upgradeApplication);
eventHub.$off('upgradeFailed', this.upgradeFailed); eventHub.$off('upgradeFailed', this.upgradeFailed);
eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess);
eventHub.$off('saveKnativeDomain'); eventHub.$off('saveKnativeDomain');
eventHub.$off('setKnativeHostname'); eventHub.$off('setKnativeHostname');
} }
...@@ -283,10 +284,6 @@ export default class Clusters { ...@@ -283,10 +284,6 @@ export default class Clusters {
this.store.updateAppProperty(appId, 'requestStatus', UPGRADE_REQUEST_FAILURE); this.store.updateAppProperty(appId, 'requestStatus', UPGRADE_REQUEST_FAILURE);
} }
dismissUpgradeSuccess(appId) {
this.store.updateAppProperty(appId, 'requestStatus', null);
}
toggleIngressDomainHelpText(ingressPreviousState, ingressNewState) { toggleIngressDomainHelpText(ingressPreviousState, ingressNewState) {
const { externalIp, status } = ingressNewState; const { externalIp, status } = ingressNewState;
const helpTextHidden = status !== APPLICATION_STATUS.INSTALLED || !externalIp; const helpTextHidden = status !== APPLICATION_STATUS.INSTALLED || !externalIp;
......
...@@ -241,6 +241,8 @@ export default { ...@@ -241,6 +241,8 @@ export default {
status() { status() {
if (this.status === APPLICATION_STATUS.UPDATE_ERRORED) { if (this.status === APPLICATION_STATUS.UPDATE_ERRORED) {
eventHub.$emit('upgradeFailed', this.id); eventHub.$emit('upgradeFailed', this.id);
} else if (this.upgradeRequested && this.upgradeSuccessful) {
this.$toast.show(this.upgradeSuccessDescription);
} }
}, },
}, },
...@@ -257,9 +259,6 @@ export default { ...@@ -257,9 +259,6 @@ export default {
params: this.installApplicationRequestParams, params: this.installApplicationRequestParams,
}); });
}, },
dismissUpgradeSuccess() {
eventHub.$emit('dismissUpgradeSuccess', this.id);
},
}, },
}; };
</script> </script>
...@@ -335,17 +334,6 @@ export default { ...@@ -335,17 +334,6 @@ export default {
> >
{{ upgradeFailureDescription }} {{ upgradeFailureDescription }}
</div> </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">
&times;
</button>
</div>
<loading-button <loading-button
v-if="upgradeAvailable || upgradeFailed || isUpgrading" v-if="upgradeAvailable || upgradeFailed || isUpgrading"
class="btn btn-primary js-cluster-application-upgrade-button mt-2" class="btn btn-primary js-cluster-application-upgrade-button mt-2"
......
.toast-close {
font-size: $default-icon-size !important;
}
---
title: Display a toast message when the Kubernetes runner has successfully upgraded.
merge_request: 27206
author:
type: changed
import Vue from 'vue'; import Vue from 'vue';
import eventHub from '~/clusters/event_hub'; 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 applicationRow from '~/clusters/components/application_row.vue';
import mountComponent from 'helpers/vue_mount_component_helper'; import mountComponent from 'helpers/vue_mount_component_helper';
import { DEFAULT_APPLICATION_STATE } from '../services/mock_data'; import { DEFAULT_APPLICATION_STATE } from '../services/mock_data';
...@@ -314,6 +319,22 @@ describe('Application Row', () => { ...@@ -314,6 +319,22 @@ describe('Application Row', () => {
'Update failed. Please check the logs and try again.', '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', () => { describe('Version', () => {
......
...@@ -663,10 +663,10 @@ ...@@ -663,10 +663,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.59.0.tgz#affcf9596d736836d37469bb4aea2226ac03e087" resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.59.0.tgz#affcf9596d736836d37469bb4aea2226ac03e087"
integrity sha512-dokGyyLRRsoBKO70KP1g+ZsDGyTK/RIHWDmvWI6Bx5AxQ3UqAzVXn2OIb3owjJAexyRG1uBmJrriiVVyHznQ4g== integrity sha512-dokGyyLRRsoBKO70KP1g+ZsDGyTK/RIHWDmvWI6Bx5AxQ3UqAzVXn2OIb3owjJAexyRG1uBmJrriiVVyHznQ4g==
"@gitlab/ui@^3.4.0": "@gitlab/ui@^3.5.0":
version "3.4.0" version "3.5.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.4.0.tgz#174681f210eb16c3d101a36968d5e4d163c0d014" resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.5.0.tgz#31ecfc16e3f7663545f31ddf07e02bba96a6d138"
integrity sha512-joXNz80IHMQxEGrqcNUTEKofjfZtkOKUe34HAFI71NEeYT6H0r/lYmJ5Gcz+MmwM1CvZOVbB3DnKzxQPDbN/hQ== integrity sha512-eDD++hhGJuH59g2QcGshuou9/NLcLfse4Abm9KOIWIaYI3NPWW2KRGwLHPB6H0d5W0/X5pyWYQvXgF7JE2ZXbA==
dependencies: dependencies:
"@babel/standalone" "^7.0.0" "@babel/standalone" "^7.0.0"
bootstrap-vue "^2.0.0-rc.11" bootstrap-vue "^2.0.0-rc.11"
...@@ -678,6 +678,7 @@ ...@@ -678,6 +678,7 @@
url-search-params-polyfill "^5.0.0" url-search-params-polyfill "^5.0.0"
vue "^2.5.21" vue "^2.5.21"
vue-loader "^15.4.2" vue-loader "^15.4.2"
vue-toasted "^1.1.26"
"@mrmlnc/readdir-enhanced@^2.2.1": "@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1" version "2.2.1"
...@@ -10982,6 +10983,11 @@ vue-template-es2015-compiler@^1.9.0: ...@@ -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" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== 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: vue-virtual-scroll-list@^1.3.1:
version "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" resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.3.1.tgz#efcb83d3a3dcc69cd886fa4de1130a65493e8f76"
......
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