Update approval settings to toast on success

Updates the group and project-level approval settings to display
a toast on success rather than rendering a in-page alert.

Changelog: changed
EE: true

ee/app/assets/javascripts/approvals/components/approval_settings.vue

@@ -45,7 +45,6 @@ export default {
   computed: {
     ...mapState({
       isLoading: (state) => state.approvalSettings.isLoading,
-      isUpdated: (state) => state.approvalSettings.isUpdated,
       settings: (state) => state.approvalSettings.settings,
       errorMessage: (state) => state.approvalSettings.errorMessage,
       preventAuthorApproval: (state) => state.approvalSettings.settings.preventAuthorApproval,
@@ -73,7 +72,6 @@ export default {
       'fetchSettings',
       'updateSettings',
       'dismissErrorMessage',
-      'dismissSuccessMessage',
       'setPreventAuthorApproval',
       'setPreventCommittersApproval',
       'setPreventMrApprovalRuleEdit',
@@ -82,6 +80,7 @@ export default {
     ]),
     async onSubmit() {
       await this.updateSettings(this.approvalSettingsPath);
+      this.$toast.show(APPROVAL_SETTINGS_I18N.savingSuccessMessage);
     },
     lockedText({ locked, inheritedFrom }) {
       if (!locked) {
@@ -115,17 +114,6 @@ export default {
     >
       {{ errorMessage }}
     </gl-alert>
-    <gl-alert
-      v-if="isUpdated"
-      variant="success"
-      :dismissible="true"
-      :contained="true"
-      class="gl-mb-6"
-      data-testid="success-alert"
-      @dismiss="dismissSuccessMessage"
-    >
-      {{ $options.i18n.savingSuccessMessage }}
-    </gl-alert>
     <gl-form v-if="hasSettings" @submit.prevent="onSubmit">
       <label class="label-bold"> {{ $options.i18n.approvalSettingsHeader }} </label>
       <p>

ee/app/assets/javascripts/approvals/mount_group_settings.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import GroupSettingsApp from './components/group_settings/app.vue';
 import { mergeRequestApprovalSettingsMappers } from './mappers';
@@ -15,6 +16,8 @@ const mountGroupApprovalSettings = (el) => {
     approvalSettings: approvalSettingsModule(mergeRequestApprovalSettingsMappers),
   });
 
+  Vue.use(GlToast);
+
   return new Vue({
     el,
     store,

ee/app/assets/javascripts/approvals/mount_project_settings.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import ProjectSettingsApp from './components/project_settings/app.vue';
 import { projectApprovalsMappers, mergeRequestApprovalSettingsMappers } from './mappers';
@@ -39,6 +40,8 @@ export default function mountProjectSettingsApprovals(el) {
     canModifyCommiterSettings: parseBoolean(el.dataset.canModifyCommiterSettings),
   });
 
+  Vue.use(GlToast);
+
   return new Vue({
     el,
     store,

ee/app/assets/javascripts/approvals/stores/modules/approval_settings/actions.js

@@ -38,10 +38,6 @@ export default (mapStateToPayload, updateMethod = 'put') => ({
       });
   },
 
-  dismissSuccessMessage({ commit }) {
-    commit(types.DISMISS_SUCCESS_MESSAGE);
-  },
-
   dismissErrorMessage({ commit }) {
     commit(types.DISMISS_ERROR_MESSAGE);
   },

ee/app/assets/javascripts/approvals/stores/modules/approval_settings/mutations.js

@@ -18,22 +18,17 @@ export default (mapDataToState) => ({
   },
   [types.REQUEST_UPDATE_SETTINGS](state) {
     state.isLoading = true;
-    state.isUpdated = false;
     state.errorMessage = '';
   },
   [types.UPDATE_SETTINGS_SUCCESS](state, data) {
     state.settings = mapDataToState(data);
     state.initialSettings = cloneDeep(state.settings);
     state.isLoading = false;
-    state.isUpdated = true;
   },
   [types.UPDATE_SETTINGS_ERROR](state) {
     state.isLoading = false;
     state.errorMessage = APPROVAL_SETTINGS_I18N.savingErrorMessage;
   },
-  [types.DISMISS_SUCCESS_MESSAGE](state) {
-    state.isUpdated = false;
-  },
   [types.DISMISS_ERROR_MESSAGE](state) {
     state.errorMessage = '';
   },

ee/app/assets/javascripts/approvals/stores/modules/approval_settings/state.js

@@ -2,6 +2,5 @@ export default () => ({
   settings: {},
   initialSettings: {},
   isLoading: false,
-  isUpdated: false,
   errorMessage: '',
 });

ee/spec/frontend/approvals/components/approval_settings_spec.js

@@ -36,11 +36,17 @@ describe('ApprovalSettings', () => {
     jest.spyOn(actions, 'fetchSettings').mockImplementation();
     jest.spyOn(actions, 'updateSettings').mockImplementation();
     jest.spyOn(actions, 'dismissErrorMessage').mockImplementation();
-    jest.spyOn(actions, 'dismissSuccessMessage').mockImplementation();
 
     store = createStore({ approvalSettings: module, approvals: projectSettingsModule() });
   };
 
+  const showToast = jest.fn();
+  const mocks = {
+    $toast: {
+      show: showToast,
+    },
+  };
+
   const createWrapper = (props = {}) => {
     wrapper = extendedWrapper(
       shallowMount(ApprovalSettings, {
@@ -51,6 +57,7 @@ describe('ApprovalSettings', () => {
           ...props,
         },
         stubs: { GlButton },
+        mocks,
       }),
     );
   };
@@ -254,6 +261,10 @@ describe('ApprovalSettings', () => {
 
           expect(actions.dismissErrorMessage).toHaveBeenCalled();
         });
+
+        it('does not show a toast message', () => {
+          expect(showToast).not.toHaveBeenCalled();
+        });
       });
 
       describe('if the form updates', () => {
@@ -272,15 +283,8 @@ describe('ApprovalSettings', () => {
           );
         });
 
-        it('renders the alert', () => {
-          expect(findErrorAlert().exists()).toBe(false);
-          expect(findSuccessAlert().text()).toBe(APPROVAL_SETTINGS_I18N.savingSuccessMessage);
-        });
-
-        it('dismisses the alert', async () => {
-          await findSuccessAlert().vm.$emit('dismiss');
-
-          expect(actions.dismissSuccessMessage).toHaveBeenCalled();
+        it('shows the success toast', () => {
+          expect(showToast).toHaveBeenCalledWith(APPROVAL_SETTINGS_I18N.savingSuccessMessage);
         });
       });
     });

ee/spec/frontend/approvals/stores/modules/approval_settings/actions_spec.js

@@ -117,18 +117,6 @@ describe('EE approvals group settings module actions', () => {
     });
   });
 
-  describe('dismissSuccessMessage', () => {
-    it('commits DISMISS_SUCCESS_MESSAGE', () => {
-      return testAction(
-        actions.dismissSuccessMessage,
-        {},
-        state,
-        [{ type: types.DISMISS_SUCCESS_MESSAGE }],
-        [],
-      );
-    });
-  });
-
   describe('dismissErrorMessage', () => {
     it('commits DISMISS_ERROR_MESSAGE', () => {
       return testAction(

ee/spec/frontend/approvals/stores/modules/approval_settings/mutations_spec.js

@@ -52,7 +52,6 @@ describe('Group settings store mutations', () => {
       mutations.REQUEST_UPDATE_SETTINGS(state);
 
       expect(state.isLoading).toBe(true);
-      expect(state.isUpdated).toBe(false);
       expect(state.errorMessage).toBe('');
     });
   });
@@ -64,7 +63,6 @@ describe('Group settings store mutations', () => {
       expect(mapperFn).toHaveBeenCalledWith(settings);
       expect(state.settings).toStrictEqual(settings);
       expect(state.isLoading).toBe(false);
-      expect(state.isUpdated).toBe(true);
     });
   });
 
@@ -77,14 +75,6 @@ describe('Group settings store mutations', () => {
     });
   });
 
-  describe('DISMISS_SUCCESS_MESSAGE', () => {
-    it('resets isUpdated', () => {
-      mutations.DISMISS_SUCCESS_MESSAGE(state);
-
-      expect(state.isUpdated).toBe(false);
-    });
-  });
-
   describe('DISMISS_ERROR_MESSAGE', () => {
     it('resets errorMessage', () => {
       mutations.DISMISS_ERROR_MESSAGE(state);