Implement toast component

Implemented the toast component for success messages

app/assets/javascripts/clusters/clusters_bundle.js

 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;

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">
-            &times;
-          </button>
-        </div>
-
         <loading-button
           v-if="upgradeAvailable || upgradeFailed || isUpgrading"
           class="btn btn-primary js-cluster-application-upgrade-button mt-2"

app/assets/stylesheets/components/toast.scss

+.toast-close {
+  font-size: $default-icon-size !important;
+}

changelogs/unreleased/57017-add-toast-success-message.yml

+---
+title: Display a toast message when the Kubernetes runner has successfully upgraded.
+merge_request: 27206
+author:
+type: changed

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",

spec/frontend/clusters/components/application_row_spec.js

 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', () => {

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"