Merge branch 'gitlab-ui-integration-246-bootstrap-vue-toast' into 'master'

Update dependency @gitlab/ui to v30

See merge request gitlab-org/gitlab!63919

app/assets/javascripts/blob/file_template_mediator.js

@@ -145,7 +145,7 @@ export default class FileTemplateMediator {
             text: __('Undo'),
             onClick: (e, toastObj) => {
               self.restoreFromCache();
-              toastObj.goAway(0);
+              toastObj.hide();
             },
           },
         });

app/assets/javascripts/issuable/components/issuable_by_email.vue

@@ -78,7 +78,7 @@ export default {
         } = await axios.put(this.resetPath);
         this.email = newAddress;
       } catch {
-        this.$toast.show(__('There was an error when reseting email token.'), { type: 'error' });
+        this.$toast.show(__('There was an error when reseting email token.'));
       }
     },
     cancelHandler() {

app/assets/javascripts/notifications/components/custom_notifications_modal.vue

@@ -73,7 +73,7 @@ export default {
 
         this.events = this.buildEvents(events);
       } catch (error) {
-        this.$toast.show(this.$options.i18n.loadNotificationLevelErrorMessage, { type: 'error' });
+        this.$toast.show(this.$options.i18n.loadNotificationLevelErrorMessage);
       } finally {
         this.isLoading = false;
       }
@@ -93,7 +93,7 @@ export default {
 
         this.events = this.buildEvents(events);
       } catch (error) {
-        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage, { type: 'error' });
+        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage);
       }
     },
   },

app/assets/javascripts/notifications/components/notifications_dropdown.vue

@@ -104,7 +104,7 @@ export default {
         this.selectedNotificationLevel = level;
         this.openNotificationsModal();
       } catch (error) {
-        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage, { type: 'error' });
+        this.$toast.show(this.$options.i18n.updateNotificationLevelErrorMessage);
       } finally {
         this.isLoading = false;
       }

app/assets/javascripts/packages_and_registries/settings/group/components/group_settings_app.vue

@@ -86,7 +86,7 @@ export default {
             this.alertMessage = ERROR_UPDATING_SETTINGS;
           } else {
             this.dismissAlert();
-            this.$toast.show(SUCCESS_UPDATING_SETTINGS, { type: 'success' });
+            this.$toast.show(SUCCESS_UPDATING_SETTINGS);
           }
         })
         .catch((e) => {

app/assets/javascripts/packages_and_registries/settings/project/components/settings_form.vue

@@ -158,14 +158,14 @@ export default {
         .then(({ data }) => {
           const errorMessage = data?.updateContainerExpirationPolicy?.errors[0];
           if (errorMessage) {
-            this.$toast.show(errorMessage, { type: 'error' });
+            this.$toast.show(errorMessage);
           } else {
-            this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE, { type: 'success' });
+            this.$toast.show(UPDATE_SETTINGS_SUCCESS_MESSAGE);
           }
         })
         .catch((error) => {
           this.setApiErrors(error);
-          this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE, { type: 'error' });
+          this.$toast.show(UPDATE_SETTINGS_ERROR_MESSAGE);
         })
         .finally(() => {
           this.mutationLoading = false;

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

@@ -82,7 +82,7 @@ export default {
               text: this.alertContent.actionText,
               onClick: (_, toastObject) => {
                 this[this.alertContent.actionName]();
-                toastObject.goAway(0);
+                toastObject.hide();
               },
             },
           };

app/assets/javascripts/vue_shared/plugins/global_toast.js

@@ -2,7 +2,7 @@ import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 
 Vue.use(GlToast);
-const instance = new Vue();
+export const instance = new Vue();
 
 export default function showGlobalToast(...args) {
   return instance.$toast.show(...args);

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_form.vue

@@ -168,9 +168,7 @@ export default {
           const msg = this.isEditing
             ? this.$options.i18n.FORM_EDITED
             : this.$options.i18n.FORM_CREATED;
-          this.$toast.show(sprintf(msg, { name: this.name }), {
-            position: 'top-center',
-          });
+          this.$toast.show(sprintf(msg, { name: this.name }));
           this.name = '';
           this.nameError = [];
           this.stages = initializeStages(this.defaultStageConfig, this.selectedPreset);

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

@@ -84,7 +84,7 @@ export default {
   methods: {
     ...mapActions(['setSelectedValueStream', 'deleteValueStream']),
     onSuccess(message) {
-      this.$toast.show(message, { position: 'top-center' });
+      this.$toast.show(message);
     },
     isSelected(id) {
       return Boolean(this.selectedValueStreamId && this.selectedValueStreamId === id);

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

@@ -44,12 +44,12 @@ export default {
       const { targetBranch } = this;
 
       return this.fetchRules({ targetBranch, resetToDefault: true }).then(() => {
-        const toast = showToast(__('Approval rules reset to project defaults'), {
+        showToast(__('Approval rules reset to project defaults'), {
           action: {
             text: __('Undo'),
-            onClick: () => {
+            onClick: (_, toast) => {
               this.undoRulesChange();
-              toast.goAway(0);
+              toast.hide();
             },
           },
         });

ee/app/assets/javascripts/pages/admin/users/pipeline_minutes/reset_button.vue

@@ -22,11 +22,7 @@ export default {
             this.$toast.show(__('User pipeline minutes were successfully reset.'));
           }
         })
-        .catch(() =>
-          this.$toast.show(__('There was an error resetting user pipeline minutes.'), {
-            type: 'error',
-          }),
-        );
+        .catch(() => this.$toast.show(__('There was an error resetting user pipeline minutes.')));
     },
   },
 };

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/actions.js

@@ -243,7 +243,7 @@ export const dismissVulnerability = (
               dispatch('revertDismissVulnerability', { vulnerability })
                 .then(() => dispatch('fetchVulnerabilities', { page }))
                 .catch(() => {});
-              toastObject.goAway(0);
+              toastObject.hide();
             }
           },
         },

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_form_spec.js

@@ -315,9 +315,7 @@ describe('ValueStreamForm', () => {
           });
 
           it('displays a toast message', () => {
-            expect(mockToastShow).toHaveBeenCalledWith(`'${initialData.name}' Value Stream saved`, {
-              position: 'top-center',
-            });
+            expect(mockToastShow).toHaveBeenCalledWith(`'${initialData.name}' Value Stream saved`);
           });
 
           it('sends tracking information', () => {
@@ -411,9 +409,7 @@ describe('ValueStreamForm', () => {
       });
 
       it('displays a toast message', () => {
-        expect(mockToastShow).toHaveBeenCalledWith(`'${streamName}' Value Stream created`, {
-          position: 'top-center',
-        });
+        expect(mockToastShow).toHaveBeenCalledWith(`'${streamName}' Value Stream created`);
       });
 
       it('sends tracking information', () => {

ee/spec/frontend/analytics/cycle_analytics/components/value_stream_select_spec.js

@@ -202,9 +202,6 @@ describe('ValueStreamSelect', () => {
       it('displays a toast message', () => {
         expect(mockToastShow).toHaveBeenCalledWith(
           `'${selectedValueStream.name}' Value Stream deleted`,
-          {
-            position: 'top-center',
-          },
         );
       });
 

ee/spec/frontend/pages/admin/users/reset_button_spec.js

@@ -87,9 +87,6 @@ describe('Reset pipeline minutes button', () => {
         expect(axiosSpy).toHaveBeenCalled();
         expect($toast.show).toHaveBeenCalledWith(
           'There was an error resetting user pipeline minutes.',
-          {
-            type: 'error',
-          },
         );
       });
     });

package.json

@@ -59,7 +59,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.199.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "29.38.1",
+    "@gitlab/ui": "30.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.3-2",
     "@rails/ujs": "6.1.3-2",

spec/features/projects/files/undo_template_spec.rb

@@ -47,11 +47,11 @@ end
 
 def check_undo_button_display
   expect(page).to have_content('template applied')
-  expect(page).to have_css('.toasted-container')
+  expect(page).to have_css('.b-toaster')
 end
 
 def check_content_reverted(template_content)
-  find('.toasted-container a', text: 'Undo').click
+  find('.b-toaster a', text: 'Undo').click
   expect(page).not_to have_content(template_content)
   expect(page).to have_css('.template-type-selector .dropdown-toggle-text')
 end

spec/frontend/emoji/awards_app/store/actions_spec.js

@@ -5,6 +5,7 @@ import * as actions from '~/emoji/awards_app/store/actions';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('@sentry/browser');
+jest.mock('~/vue_shared/plugins/global_toast');
 
 describe('Awards app actions', () => {
   afterEach(() => {

spec/frontend/issuable/components/issuable_by_email_spec.js

@@ -154,10 +154,7 @@ describe('IssuableByEmail', () => {
 
         await clickResetEmail();
 
-        expect(mockToastShow).toHaveBeenCalledWith(
-          'There was an error when reseting email token.',
-          { type: 'error' },
-        );
+        expect(mockToastShow).toHaveBeenCalledWith('There was an error when reseting email token.');
         expect(findFormInputGroup().props('value')).toBe('user@gitlab.com');
       });
     });

spec/frontend/notifications/components/custom_notifications_modal_spec.js

@@ -177,11 +177,8 @@ describe('CustomNotificationsModal', () => {
 
         await waitForPromises();
 
-        expect(
-          mockToastShow,
-        ).toHaveBeenCalledWith(
+        expect(mockToastShow).toHaveBeenCalledWith(
           'An error occurred while loading the notification settings. Please try again.',
-          { type: 'error' },
         );
       });
     });
@@ -255,11 +252,8 @@ describe('CustomNotificationsModal', () => {
 
         await waitForPromises();
 
-        expect(
-          mockToastShow,
-        ).toHaveBeenCalledWith(
+        expect(mockToastShow).toHaveBeenCalledWith(
           'An error occurred while updating the notification settings. Please try again.',
-          { type: 'error' },
         );
       });
     });

spec/frontend/notifications/components/notifications_dropdown_spec.js

@@ -242,11 +242,8 @@ describe('NotificationsDropdown', () => {
       await clickDropdownItemAt(1);
 
       expect(wrapper.vm.selectedNotificationLevel).toBe('global');
-      expect(
-        mockToastShow,
-      ).toHaveBeenCalledWith(
+      expect(mockToastShow).toHaveBeenCalledWith(
         'An error occurred while updating the notification settings. Please try again.',
-        { type: 'error' },
       );
     });
 

spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js

@@ -244,9 +244,7 @@ describe('Group Settings App', () => {
 
         await waitForPromises();
 
-        expect(show).toHaveBeenCalledWith(SUCCESS_UPDATING_SETTINGS, {
-          type: 'success',
-        });
+        expect(show).toHaveBeenCalledWith(SUCCESS_UPDATING_SETTINGS);
       });
 
       it('has an optimistic response', async () => {

spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js

@@ -321,9 +321,7 @@ describe('Settings Form', () => {
         await waitForPromises();
         await wrapper.vm.$nextTick();
 
-        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE, {
-          type: 'success',
-        });
+        expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE);
       });
 
       describe('when submit fails', () => {
@@ -339,9 +337,7 @@ describe('Settings Form', () => {
             await waitForPromises();
             await wrapper.vm.$nextTick();
 
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('foo', {
-              type: 'error',
-            });
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('foo');
           });
         });
 
@@ -355,9 +351,7 @@ describe('Settings Form', () => {
             await waitForPromises();
             await wrapper.vm.$nextTick();
 
-            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE, {
-              type: 'error',
-            });
+            expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
           });
 
           it('parses the error messages', async () => {

spec/frontend/vue_shared/plugins/global_toast_spec.js

-import Vue from 'vue';
-import toast from '~/vue_shared/plugins/global_toast';
+import toast, { instance } from '~/vue_shared/plugins/global_toast';
 
 describe('Global toast', () => {
   let spyFunc;
 
   beforeEach(() => {
-    spyFunc = jest.spyOn(Vue.prototype.$toast, 'show').mockImplementation(() => {});
+    spyFunc = jest.spyOn(instance.$toast, 'show').mockImplementation(() => {});
   });
 
   afterEach(() => {
@@ -18,7 +17,7 @@ describe('Global toast', () => {
 
     toast(arg1, arg2);
 
-    expect(Vue.prototype.$toast.show).toHaveBeenCalledTimes(1);
-    expect(Vue.prototype.$toast.show).toHaveBeenCalledWith(arg1, arg2);
+    expect(instance.$toast.show).toHaveBeenCalledTimes(1);
+    expect(instance.$toast.show).toHaveBeenCalledWith(arg1, arg2);
   });
 });

yarn.lock

@@ -908,13 +908,12 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@29.38.1":
-  version "29.38.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-29.38.1.tgz#93ab2ad7cb8008b3050599b452b626c109630e97"
-  integrity sha512-5sKdbZI9Q9S7KW3/ybN40tFS/KInm76cog8O0SMe2Ne026ZZ18CAHEMvkfoVXTN3XMkWZnMlk92s8f/WqM5//A==
+"@gitlab/ui@30.0.0":
+  version "30.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-30.0.0.tgz#1f7c4bb2dfa1a987f5673f865384ebcbbe3d7a3e"
+  integrity sha512-+o8t4TVm8MOV6llX6zq9HKuggRWKuPDZfbmjptNJA0CwW3IGPV/WcgFuSozHW8x2lxE0ZfrD7vMwI0dfTwghwQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
-    "@gitlab/vue-toasted" "^1.3.0"
     bootstrap-vue "2.18.1"
     copy-to-clipboard "^3.0.8"
     dompurify "^2.2.9"
@@ -932,11 +931,6 @@
   resolved "https://registry.yarnpkg.com/@gitlab/visual-review-tools/-/visual-review-tools-1.6.1.tgz#0d8f3ff9f51b05f7c80b9a107727703d48997e4e"
   integrity sha512-vY8K1igwZFoEOmU0h4E7XTLlilsQ4ylPr27O01UsSe6ZTKi6oEMREsRAEpNIUgRlxUARCsf+Opp4pgSFzFkFcw==
 
-"@gitlab/vue-toasted@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/vue-toasted/-/vue-toasted-1.3.0.tgz#f21550d4ce406ee5f99447a02abf36250ecc922d"
-  integrity sha512-xexu7YbbIkQS5FDqPaewrOTQ4/myth5VyU8+hWZ+Tj1e5CuAlDNha3dHbvwyLW8/2flm/2mfslFNPAX2DRe8ZQ==
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"