Merge branch '199988_02-replace-notice-with-toast-vue' into 'master'

Replace Geo Notice with Toast (Frontend)

See merge request gitlab-org/gitlab!24407

ee/app/assets/javascripts/geo_designs/store/actions.js

 import Api from 'ee/api';
 import createFlash from '~/flash';
+import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
 import {
   parseIntPagination,
@@ -50,7 +51,8 @@ export const fetchDesigns = ({ state, dispatch }) => {
 // Initiate All Design Syncs
 export const requestInitiateAllDesignSyncs = ({ commit }) =>
   commit(types.REQUEST_INITIATE_ALL_DESIGN_SYNCS);
-export const receiveInitiateAllDesignSyncsSuccess = ({ commit, dispatch }) => {
+export const receiveInitiateAllDesignSyncsSuccess = ({ commit, dispatch }, { action }) => {
+  toast(__(`All designs are being scheduled for ${action}`));
   commit(types.RECEIVE_INITIATE_ALL_DESIGN_SYNCS_SUCCESS);
   dispatch('fetchDesigns');
 };
@@ -63,7 +65,7 @@ export const initiateAllDesignSyncs = ({ dispatch }, action) => {
   dispatch('requestInitiateAllDesignSyncs');
 
   Api.initiateAllGeoDesignSyncs(action)
-    .then(() => dispatch('receiveInitiateAllDesignSyncsSuccess'))
+    .then(() => dispatch('receiveInitiateAllDesignSyncsSuccess', { action }))
     .catch(() => {
       dispatch('receiveInitiateAllDesignSyncsError');
     });
@@ -71,7 +73,8 @@ export const initiateAllDesignSyncs = ({ dispatch }, action) => {
 
 // Initiate Design Sync
 export const requestInitiateDesignSync = ({ commit }) => commit(types.REQUEST_INITIATE_DESIGN_SYNC);
-export const receiveInitiateDesignSyncSuccess = ({ commit, dispatch }) => {
+export const receiveInitiateDesignSyncSuccess = ({ commit, dispatch }, { name, action }) => {
+  toast(__(`${name} is scheduled for ${action}`));
   commit(types.RECEIVE_INITIATE_DESIGN_SYNC_SUCCESS);
   dispatch('fetchDesigns');
 };
@@ -84,7 +87,7 @@ export const initiateDesignSync = ({ dispatch }, { projectId, name, action }) =>
   dispatch('requestInitiateDesignSync');
 
   Api.initiateGeoDesignSync({ projectId, action })
-    .then(() => dispatch('receiveInitiateDesignSyncSuccess'))
+    .then(() => dispatch('receiveInitiateDesignSyncSuccess', { name, action }))
     .catch(() => {
       dispatch('receiveInitiateDesignSyncError', { name });
     });

ee/app/assets/javascripts/geo_nodes/components/app.vue

@@ -131,7 +131,7 @@ export default {
         .repairNode(targetNode)
         .then(() => {
           this.setNodeActionStatus(targetNode, false);
-          Flash(s__('GeoNodes|Node Authentication was successfully repaired.'), 'notice');
+          this.$toast.show(s__('GeoNodes|Node Authentication was successfully repaired.'));
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
@@ -160,7 +160,7 @@ export default {
         .removeNode(targetNode)
         .then(() => {
           this.store.removeNode(targetNode);
-          Flash(s__('GeoNodes|Node was successfully removed.'), 'notice');
+          this.$toast.show(s__('GeoNodes|Node was successfully removed.'));
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);

ee/app/assets/javascripts/geo_nodes/index.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 
 import Translate from '~/vue_shared/translate';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -9,6 +10,7 @@ import GeoNodesService from './service/geo_nodes_service';
 import geoNodesApp from './components/app.vue';
 
 Vue.use(Translate);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-geo-nodes');

ee/spec/frontend/geo_designs/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import flash from '~/flash';
+import toast from '~/vue_shared/plugins/global_toast';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from 'ee/geo_designs/store/actions';
 import * as types from 'ee/geo_designs/store/mutation_types';
@@ -13,6 +14,7 @@ import {
 } from '../mock_data';
 
 jest.mock('~/flash');
+jest.mock('~/vue_shared/plugins/global_toast');
 
 describe('GeoDesigns Store Actions', () => {
   let state;
@@ -182,14 +184,17 @@ describe('GeoDesigns Store Actions', () => {
   });
 
   describe('receiveInitiateAllDesignSyncsSuccess', () => {
-    it('should commit mutation RECEIVE_INITIATE_ALL_DESIGN_SYNCS_SUCCESS and fetchDesigns', done => {
+    it('should commit mutation RECEIVE_INITIATE_ALL_DESIGN_SYNCS_SUCCESS and call fetchDesigns and toast', () => {
       testAction(
         actions.receiveInitiateAllDesignSyncsSuccess,
-        null,
+        { action: ACTION_TYPES.RESYNC },
         state,
         [{ type: types.RECEIVE_INITIATE_ALL_DESIGN_SYNCS_SUCCESS }],
         [{ type: 'fetchDesigns' }],
-        done,
+        () => {
+          expect(toast).toHaveBeenCalledTimes(1);
+          toast.mockClear();
+        },
       );
     });
   });
@@ -228,7 +233,7 @@ describe('GeoDesigns Store Actions', () => {
           [],
           [
             { type: 'requestInitiateAllDesignSyncs' },
-            { type: 'receiveInitiateAllDesignSyncsSuccess' },
+            { type: 'receiveInitiateAllDesignSyncsSuccess', payload: { action } },
           ],
           done,
         );
@@ -272,14 +277,17 @@ describe('GeoDesigns Store Actions', () => {
   });
 
   describe('receiveInitiateDesignSyncSuccess', () => {
-    it('should commit mutation RECEIVE_INITIATE_DESIGN_SYNC_SUCCESS and fetchDesigns', done => {
+    it('should commit mutation RECEIVE_INITIATE_DESIGN_SYNC_SUCCESS and call fetchDesigns and toast', () => {
       testAction(
         actions.receiveInitiateDesignSyncSuccess,
-        null,
+        { action: ACTION_TYPES.RESYNC, projectName: 'test' },
         state,
         [{ type: types.RECEIVE_INITIATE_DESIGN_SYNC_SUCCESS }],
         [{ type: 'fetchDesigns' }],
-        done,
+        () => {
+          expect(toast).toHaveBeenCalledTimes(1);
+          toast.mockClear();
+        },
       );
     });
   });
@@ -320,7 +328,10 @@ describe('GeoDesigns Store Actions', () => {
           { projectId, name, action },
           state,
           [],
-          [{ type: 'requestInitiateDesignSync' }, { type: 'receiveInitiateDesignSyncSuccess' }],
+          [
+            { type: 'requestInitiateDesignSync' },
+            { type: 'receiveInitiateDesignSyncSuccess', payload: { name, action } },
+          ],
           done,
         );
       });

ee/spec/frontend/geo_nodes/components/app_spec.js

@@ -8,6 +8,8 @@ import GeoNodesService from 'ee/geo_nodes/service/geo_nodes_service';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { NODE_ACTIONS } from 'ee/geo_nodes/constants';
 import axios from '~/lib/utils/axios_utils';
+import '~/vue_shared/plugins/global_toast';
+
 import {
   PRIMARY_VERSION,
   NODE_DETAILS_PATH,
@@ -33,6 +35,9 @@ const createComponent = () => {
   });
 };
 
+const getToastMessage = () => document.querySelector('.gl-toast').innerText.trim();
+const cleanupToastMessage = () => document.querySelector('.gl-toast').remove();
+
 describe('AppComponent', () => {
   let vm;
   let mock;
@@ -46,6 +51,7 @@ describe('AppComponent', () => {
     mock = new MockAdapter(axios);
 
     document.body.innerHTML += '<div class="flash-container"></div>';
+
     mock.onGet(/(.*)\/geo_nodes$/).reply(() => [statusCode, response]);
     vm = createComponent();
   });
@@ -193,7 +199,7 @@ describe('AppComponent', () => {
     });
 
     describe('repairNode', () => {
-      it('calls service.repairNode and shows success Flash message on request success', done => {
+      it('calls service.repairNode and shows success Toast message on request success', done => {
         const node = { ...mockNode };
         mock.onPost(node.repairPath).reply(() => {
           expect(node.nodeActionActive).toBe(true);
@@ -204,9 +210,8 @@ describe('AppComponent', () => {
         vm.repairNode(node)
           .then(() => {
             expect(vm.service.repairNode).toHaveBeenCalledWith(node);
-            expect(document.querySelector('.flash-text').innerText.trim()).toBe(
-              'Node Authentication was successfully repaired.',
-            );
+            expect(getToastMessage()).toBe('Node Authentication was successfully repaired.');
+            cleanupToastMessage();
 
             expect(node.nodeActionActive).toBe(false);
           })
@@ -285,7 +290,7 @@ describe('AppComponent', () => {
     });
 
     describe('removeNode', () => {
-      it('calls service.removeNode for removing node and shows Flash message on request success', done => {
+      it('calls service.removeNode for removing node and shows Toast message on request success', done => {
         const node = { ...mockNode };
         mock.onDelete(node.basePath).reply(() => {
           expect(node.nodeActionActive).toBe(true);
@@ -298,9 +303,8 @@ describe('AppComponent', () => {
           .then(() => {
             expect(vm.service.removeNode).toHaveBeenCalledWith(node);
             expect(vm.store.removeNode).toHaveBeenCalledWith(node);
-            expect(document.querySelector('.flash-text').innerText.trim()).toBe(
-              'Node was successfully removed.',
-            );
+            expect(getToastMessage()).toBe('Node was successfully removed.');
+            cleanupToastMessage();
           })
           .then(done)
           .catch(done.fail);