Merge branch '331162-change-alert-to-toast-for-confirmation-under-user-settings' into 'master'

Use toast for preferences saved notification

See merge request !139587



Merged-by: Chad Lavimoniere <clavimoniere@gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Approved-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Ammar Alakkad <aalakkad@gitlab.com>
Reviewed-by: Justin Ho Tuan Duong <hduong@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: Chad Lavimoniere <clavimoniere@gitlab.com>

app/assets/javascripts/profile/preferences/components/profile_preferences.vue

 <script>
 import { GlButton } from '@gitlab/ui';
-import { createAlert, VARIANT_DANGER, VARIANT_INFO } from '~/alert';
+import { createAlert, VARIANT_DANGER } from '~/alert';
 import { INTEGRATION_VIEW_CONFIGS, i18n } from '../constants';
 import IntegrationView from './integration_view.vue';
 
@@ -94,9 +94,8 @@ export default {
         return;
       }
       updateClasses(this.bodyClasses, this.getSelectedTheme().css_class, this.selectedLayout);
-      const { message = this.$options.i18n.defaultSuccess, variant = VARIANT_INFO } =
-        customEvent?.detail?.[0] || {};
-      createAlert({ message, variant });
+      const message = customEvent?.detail?.[0]?.message || this.$options.i18n.defaultSuccess || '';
+      this.$toast.show(message);
       this.isSubmitEnabled = true;
     },
     handleError(customEvent) {

app/assets/javascripts/profile/preferences/profile_preferences_bundle.js

 import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
 import { initListboxInputs } from '~/vue_shared/components/listbox_input/init_listbox_inputs';
 import ProfilePreferences from './components/profile_preferences.vue';
 
@@ -21,6 +22,8 @@ export default () => {
     { formEl },
   );
 
+  Vue.use(GlToast);
+
   return new Vue({
     el,
     name: 'ProfilePreferencesApp',

spec/features/profiles/user_visits_profile_preferences_page_spec.rb

@@ -94,7 +94,7 @@ def render_whitespace_field
   end
 
   def expect_preferences_saved_message
-    page.within('.flash-container') do
+    page.within('.b-toaster') do
       expect(page).to have_content('Preferences saved.')
     end
   end

spec/frontend/profile/preferences/components/profile_preferences_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import { createAlert, VARIANT_DANGER, VARIANT_INFO } from '~/alert';
+import { createAlert, VARIANT_DANGER } from '~/alert';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
 import { i18n } from '~/profile/preferences/constants';
@@ -32,11 +32,17 @@ describe('ProfilePreferences component', () => {
     profilePreferencesPath: '/update-profile',
     formEl: document.createElement('form'),
   };
+  const showToast = jest.fn();
 
   function createComponent(options = {}) {
     const { props = {}, provide = {}, attachTo } = options;
     return extendedWrapper(
       shallowMount(ProfilePreferences, {
+        mocks: {
+          $toast: {
+            show: showToast,
+          },
+        },
         provide: {
           ...defaultProvide,
           ...provide,
@@ -136,10 +142,7 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success');
       form.dispatchEvent(successEvent);
 
-      expect(createAlert).toHaveBeenCalledWith({
-        message: i18n.defaultSuccess,
-        variant: VARIANT_INFO,
-      });
+      expect(showToast).toHaveBeenCalledWith(i18n.defaultSuccess);
     });
 
     it('displays the custom success message', () => {
@@ -147,7 +150,7 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success', { detail: [{ message }] });
       form.dispatchEvent(successEvent);
 
-      expect(createAlert).toHaveBeenCalledWith({ message, variant: VARIANT_INFO });
+      expect(showToast).toHaveBeenCalledWith(message);
     });
 
     it('displays the default error message', () => {