Merge branch 'ek-replace-deprecated-create-flash-vue-files' into 'master'

Replace deprecated create flash in app/*.vue files

See merge request gitlab-org/gitlab!62785

app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue

@@ -2,7 +2,7 @@
 import { GlModal, GlTabs, GlTab, GlSearchBoxByType, GlSprintf } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import ReviewTabContainer from '~/add_context_commits_modal/components/review_tab_container.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
@@ -192,9 +192,11 @@ export default {
             window.location.reload();
           }
           if (!values[0] && !values[1]) {
-            createFlash(
-              s__('ContextCommits|Failed to create/remove context commits. Please try again.'),
-            );
+            createFlash({
+              message: s__(
+                'ContextCommits|Failed to create/remove context commits. Please try again.',
+              ),
+            });
           }
         });
       } else if (this.uniqueCommits.length > 0) {

app/assets/javascripts/analytics/usage_trends/components/usage_counts.vue

 <script>
-import * as Sentry from '@sentry/browser';
 import MetricCard from '~/analytics/shared/components/metric_card.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { number } from '~/lib/utils/unit_format';
 import { s__ } from '~/locale';
 import usageTrendsCountQuery from '../graphql/queries/usage_trends_count.query.graphql';
@@ -34,8 +33,11 @@ export default {
         });
       },
       error(error) {
-        createFlash(this.$options.i18n.loadCountsError);
-        Sentry.captureException(error);
+        createFlash({
+          message: this.$options.i18n.loadCountsError,
+          captureError: true,
+          error,
+        });
       },
     },
   },

app/assets/javascripts/badges/components/badge_form.vue

@@ -3,7 +3,7 @@
 import { GlLoadingIcon, GlFormInput, GlFormGroup, GlButton } from '@gitlab/ui';
 import { escape, debounce } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
@@ -134,26 +134,36 @@ export default {
       if (this.isEditing) {
         return this.saveBadge()
           .then(() => {
-            createFlash(s__('Badges|Badge saved.'), 'notice');
+            createFlash({
+              message: s__('Badges|Badge saved.'),
+              type: 'notice',
+            });
             this.wasValidated = false;
           })
           .catch((error) => {
-            createFlash(
-              s__('Badges|Saving the badge failed, please check the entered URLs and try again.'),
-            );
+            createFlash({
+              message: s__(
+                'Badges|Saving the badge failed, please check the entered URLs and try again.',
+              ),
+            });
             throw error;
           });
       }
 
       return this.addBadge()
         .then(() => {
-          createFlash(s__('Badges|New badge added.'), 'notice');
+          createFlash({
+            message: s__('Badges|New badge added.'),
+            type: 'notice',
+          });
           this.wasValidated = false;
         })
         .catch((error) => {
-          createFlash(
-            s__('Badges|Adding the badge failed, please check the entered URLs and try again.'),
-          );
+          createFlash({
+            message: s__(
+              'Badges|Adding the badge failed, please check the entered URLs and try again.',
+            ),
+          });
           throw error;
         });
     },

app/assets/javascripts/badges/components/badge_settings.vue

 <script>
 import { GlSprintf, GlModal } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
@@ -40,10 +40,15 @@ export default {
     onSubmitModal() {
       this.deleteBadge(this.badgeInModal)
         .then(() => {
-          createFlash(s__('Badges|The badge was deleted.'), 'notice');
+          createFlash({
+            message: s__('Badges|The badge was deleted.'),
+            type: 'notice',
+          });
         })
         .catch((error) => {
-          createFlash(s__('Badges|Deleting the badge failed, please try again.'));
+          createFlash({
+            message: s__('Badges|Deleting the badge failed, please try again.'),
+          });
           throw error;
         });
     },

app/assets/javascripts/boards/components/board_list_deprecated.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { Sortable, MultiDrag } from 'sortablejs';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { sprintf, __ } from '~/locale';
 import eventHub from '../eventhub';
@@ -295,7 +295,9 @@ export default {
         }
 
         if (!toList) {
-          createFlash(__('Something went wrong while performing the action.'));
+          createFlash({
+            message: __('Something went wrong while performing the action.'),
+          });
         }
 
         if (!isSameList) {

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

 <script>
 import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import Api from '../../api';
-import { deprecatedCreateFlash as createFlash } from '../../flash';
+import createFlash from '../../flash';
 import { __ } from '../../locale';
 import state from '../state';
 import Dropdown from './dropdown.vue';
@@ -79,7 +79,9 @@ export default {
           this.selectProject(this.projects[0]);
         })
         .catch((e) => {
-          createFlash(__('Error fetching forked projects. Please try again.'));
+          createFlash({
+            message: __('Error fetching forked projects. Please try again.'),
+          });
           throw e;
         });
     },

app/assets/javascripts/diffs/components/app.vue

@@ -12,7 +12,7 @@ import {
   MR_COMMITS_NEXT_COMMIT,
   MR_COMMITS_PREVIOUS_COMMIT,
 } from '~/behaviors/shortcuts/keybindings';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -424,7 +424,9 @@ export default {
           if (toggleTree) this.setTreeDisplay();
         })
         .catch(() => {
-          createFlash(__('Something went wrong on our end. Please try again!'));
+          createFlash({
+            message: __('Something went wrong on our end. Please try again!'),
+          });
         });
 
       this.fetchDiffFilesBatch()
@@ -437,7 +439,9 @@ export default {
           this.setDiscussions();
         })
         .catch(() => {
-          createFlash(__('Something went wrong on our end. Please try again!'));
+          createFlash({
+            message: __('Something went wrong on our end. Please try again!'),
+          });
         });
 
       if (this.endpointCoverage) {

app/assets/javascripts/diffs/components/diff_expansion_cell.vue

 <script>
 import { GlIcon } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, INLINE_DIFF_LINES_KEY } from '../constants';
@@ -95,7 +95,9 @@ export default {
           this.isRequesting = false;
         })
         .catch(() => {
-          createFlash(s__('Diffs|Something went wrong while fetching diff lines.'));
+          createFlash({
+            message: s__('Diffs|Something went wrong while fetching diff lines.'),
+          });
           this.isRequesting = false;
         });
     },

app/assets/javascripts/diffs/components/diff_file.vue

@@ -2,7 +2,7 @@
 import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml, GlSprintf } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
 import { diffViewerErrors } from '~/ide/constants';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -270,7 +270,9 @@ export default {
         })
         .catch(() => {
           this.isLoadingCollapsedDiff = false;
-          createFlash(this.$options.i18n.genericError);
+          createFlash({
+            message: this.$options.i18n.genericError,
+          });
         });
     },
     showForkMessage() {

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -13,7 +13,7 @@ import {
   GlIcon,
 } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __, sprintf, n__ } from '~/locale';
 import Tracking from '~/tracking';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -88,7 +88,10 @@ export default {
       },
       pollInterval: 2000,
       update: (data) => data.project.sentryErrors.detailedError,
-      error: () => createFlash(__('Failed to load error details from Sentry.')),
+      error: () =>
+        createFlash({
+          message: __('Failed to load error details from Sentry.'),
+        }),
       result(res) {
         if (res.data.project?.sentryErrors?.detailedError) {
           this.$apollo.queries.error.stopPolling();
@@ -225,7 +228,10 @@ export default {
       if (Date.now() > this.errorPollTimeout) {
         this.$apollo.queries.error.stopPolling();
         this.errorLoading = false;
-        createFlash(__('Could not connect to Sentry. Refresh the page to try again.'), 'warning');
+        createFlash({
+          message: __('Could not connect to Sentry. Refresh the page to try again.'),
+          type: 'warning',
+        });
       }
     },
     trackPageViews() {

app/assets/javascripts/feature_flags/components/environments_dropdown.vue

 <script>
 import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -87,7 +87,9 @@ export default {
         .catch(() => {
           this.isLoading = false;
           this.closeSuggestions();
-          createFlash(__('Something went wrong on our end. Please try again.'));
+          createFlash({
+            message: __('Something went wrong on our end. Please try again.'),
+          });
         });
     }, 250),
     /**

app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -8,7 +8,7 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 
@@ -52,7 +52,9 @@ export default {
           this.results = data || [];
         })
         .catch(() => {
-          createFlash(__('Something went wrong on our end. Please try again.'));
+          createFlash({
+            message: __('Something went wrong on our end. Please try again.'),
+          });
         })
         .finally(() => {
           this.isLoading = false;

app/assets/javascripts/issue_show/components/app.vue

 <script>
 import { GlIcon, GlIntersectionObserver } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, s__, sprintf } from '~/locale';
@@ -316,7 +316,9 @@ export default {
           this.store.updateState(data);
         })
         .catch(() => {
-          createFlash(this.defaultErrorMessage);
+          createFlash({
+            message: this.defaultErrorMessage,
+          });
         });
     },
 
@@ -341,7 +343,9 @@ export default {
           this.updateAndShowForm(res.data);
         })
         .catch(() => {
-          createFlash(this.defaultErrorMessage);
+          createFlash({
+            message: this.defaultErrorMessage,
+          });
           this.updateAndShowForm();
         });
     },
@@ -406,7 +410,9 @@ export default {
             errMsg += `. ${message}`;
           }
 
-          this.flashContainer = createFlash(errMsg);
+          this.flashContainer = createFlash({
+            message: errMsg,
+          });
         });
     },
 
@@ -421,9 +427,11 @@ export default {
           visitUrl(data.web_url);
         })
         .catch(() => {
-          createFlash(
-            sprintf(s__('Error deleting %{issuableType}'), { issuableType: this.issuableType }),
-          );
+          createFlash({
+            message: sprintf(s__('Error deleting %{issuableType}'), {
+              issuableType: this.issuableType,
+            }),
+          });
         });
     },
 

app/assets/javascripts/issue_show/components/description.vue

 <script>
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import $ from 'jquery';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import TaskList from '../../task_list';
 import animateMixin from '../mixins/animate';
@@ -92,8 +92,8 @@ export default {
     },
 
     taskListUpdateError() {
-      createFlash(
-        sprintf(
+      createFlash({
+        message: sprintf(
           s__(
             'Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again.',
           ),
@@ -101,7 +101,7 @@ export default {
             issueType: this.issuableType,
           },
         ),
-      );
+      });
 
       this.$emit('taskListUpdateFailed');
     },

app/assets/javascripts/monitoring/components/alert_widget.vue

 <script>
 import { GlBadge, GlLoadingIcon, GlModalDirective, GlIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
 import { values, get } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import { OPERATORS } from '../constants';
@@ -130,7 +130,9 @@ export default {
           this.isLoading = false;
         })
         .catch(() => {
-          createFlash(s__('PrometheusAlerts|Error fetching alert'));
+          createFlash({
+            message: s__('PrometheusAlerts|Error fetching alert'),
+          });
           this.isLoading = false;
         });
     },

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -3,7 +3,7 @@ import { GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/
 import Mousetrap from 'mousetrap';
 import VueDraggable from 'vuedraggable';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import invalidUrl from '~/lib/utils/invalid_url';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
@@ -176,11 +176,11 @@ export default {
           this.setExpandedPanel(expandedPanel);
         }
       } catch {
-        createFlash(
-          s__(
+        createFlash({
+          message: s__(
             'Metrics|Link contains invalid chart information, please verify the link to see the expanded panel.',
           ),
-        );
+        });
       }
     },
     expandedPanel: {
@@ -201,12 +201,13 @@ export default {
        * This watcher is set for future SPA behaviour of the dashboard
        */
       if (hasWarnings) {
-        createFlash(
-          s__(
+        createFlash({
+          message: s__(
             'Metrics|Your dashboard schema is invalid. Edit the dashboard to correct the YAML schema.',
           ),
-          'warning',
-        );
+
+          type: 'warning',
+        });
       }
     },
   },
@@ -318,11 +319,11 @@ export default {
       this.isRearrangingPanels = isRearrangingPanels;
     },
     onDateTimePickerInvalid() {
-      createFlash(
-        s__(
+      createFlash({
+        message: s__(
           'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.',
         ),
-      );
+      });
       // As a fallback, switch to default time range instead
       this.selectedTimeRange = defaultTimeRange;
     },

app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue

 <script>
 import { GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
@@ -31,7 +31,9 @@ export default {
           redirectTo(response.request.responseURL);
         })
         .catch((error) => {
-          createFlash(s__('AdminArea|Stopping jobs failed'));
+          createFlash({
+            message: s__('AdminArea|Stopping jobs failed'),
+          });
           throw error;
         });
     },

app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue

 <script>
 import { GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
@@ -63,7 +63,9 @@ export default {
           visitUrl(response.data.url);
         })
         .catch((error) => {
-          createFlash(error);
+          createFlash({
+            message: error,
+          });
         })
         .finally(() => {
           this.visible = false;

app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue

 <script>
 import { GlTabs, GlTab, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import ForkGroupsListItem from './fork_groups_list_item.vue';
@@ -44,7 +44,11 @@ export default {
         .then((response) => {
           this.namespaces = response.data.namespaces;
         })
-        .catch(() => createFlash(__('There was a problem fetching groups.')));
+        .catch(() =>
+          createFlash({
+            message: __('There was a problem fetching groups.'),
+          }),
+        );
     },
   },
 

app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue

 <script>
 import { GlSprintf, GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__, __, sprintf } from '~/locale';
@@ -70,7 +70,9 @@ export default {
             labelUrl: this.url,
             successful: false,
           });
-          createFlash(error);
+          createFlash({
+            message: error,
+          });
         });
     },
   },

app/assets/javascripts/pipelines/components/jobs_shared/action_component.vue

 <script>
 import { GlTooltipDirective, GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { dasherize } from '~/lib/utils/text_utility';
@@ -81,7 +81,9 @@ export default {
 
           reportToSentry('action_component', err);
 
-          createFlash(__('An error occurred while making the request.'));
+          createFlash({
+            message: __('An error occurred while making the request.'),
+          });
         });
     },
   },

app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue

 <script>
 import { GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { isEqual } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -249,11 +249,16 @@ export default {
         .postAction(endpoint)
         .then(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash(s__('Pipelines|Project cache successfully reset.'), 'notice');
+          createFlash({
+            message: s__('Pipelines|Project cache successfully reset.'),
+            type: 'notice',
+          });
         })
         .catch(() => {
           this.isResetCacheButtonLoading = false;
-          createFlash(s__('Pipelines|Something went wrong while cleaning runners cache.'));
+          createFlash({
+            message: s__('Pipelines|Something went wrong while cleaning runners cache.'),
+          });
         });
     },
     resetRequestData() {
@@ -278,7 +283,10 @@ export default {
         }
 
         if (!filter.type) {
-          createFlash(RAW_TEXT_WARNING, 'warning');
+          createFlash({
+            message: RAW_TEXT_WARNING,
+            type: 'warning',
+          });
         }
       });
 

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_branch_name_token.vue

@@ -2,7 +2,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { FETCH_BRANCH_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -38,7 +38,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_BRANCH_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_BRANCH_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_tag_name_token.vue

@@ -2,7 +2,7 @@
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../../constants';
 
 export default {
@@ -38,7 +38,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_TAG_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_TAG_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import {
   ANY_TRIGGER_AUTHOR,
   FETCH_AUTHOR_ERROR_MESSAGE,
@@ -61,7 +61,9 @@ export default {
           this.loading = false;
         })
         .catch((err) => {
-          createFlash(FETCH_AUTHOR_ERROR_MESSAGE);
+          createFlash({
+            message: FETCH_AUTHOR_ERROR_MESSAGE,
+          });
           this.loading = false;
           throw err;
         });

app/assets/javascripts/prometheus_alerts/components/reset_key.vue

 <script>
 /* eslint-disable vue/no-v-html */
 import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -65,7 +65,9 @@ export default {
           this.authorizationKey = res.data.token;
         })
         .catch(() => {
-          createFlash(__('Failed to reset key. Please try again.'));
+          createFlash({
+            message: __('Failed to reset key. Please try again.'),
+          });
         });
     },
   },

app/assets/javascripts/protected_branches/protected_branch_edit.js

 import { find } from 'lodash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import AccessDropdown from '~/projects/settings/access_dropdown';
-import { deprecatedCreateFlash as flash } from '../flash';
 import { ACCESS_LEVELS, LEVEL_TYPES } from './constants';
 
 export default class ProtectedBranchEdit {
@@ -64,7 +64,7 @@ export default class ProtectedBranchEdit {
       })
       .then(callback)
       .catch(() => {
-        flash(__('Failed to update branch!'));
+        createFlash({ message: __('Failed to update branch!') });
       });
   }
 
@@ -131,7 +131,7 @@ export default class ProtectedBranchEdit {
       .catch(() => {
         this.$allowedToMergeDropdown.enable();
         this.$allowedToPushDropdown.enable();
-        flash(__('Failed to update branch!'));
+        createFlash({ message: __('Failed to update branch!') });
       });
   }
 

app/assets/javascripts/repository/components/tree_content.vue

 <script>
 import filesQuery from 'shared_queries/repository/files.query.graphql';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '../../locale';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
@@ -114,7 +114,9 @@ export default {
           }
         })
         .catch((error) => {
-          createFlash(__('An error occurred while fetching folder content.'));
+          createFlash({
+            message: __('An error occurred while fetching folder content.'),
+          });
           throw error;
         });
     },

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -13,7 +13,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import * as Emoji from '~/emoji';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { __, s__, sprintf } from '~/locale';
 import { updateUserStatus } from '~/rest_api';
@@ -138,7 +138,11 @@ export default {
 
           this.setDefaultEmoji();
         })
-        .catch(() => createFlash(__('Failed to load emoji list.')));
+        .catch(() =>
+          createFlash({
+            message: __('Failed to load emoji list.'),
+          }),
+        );
     },
     showEmojiMenu(e) {
       e.stopPropagation();
@@ -217,9 +221,11 @@ export default {
       window.location.reload();
     },
     onUpdateFail() {
-      createFlash(
-        s__("SetStatusModal|Sorry, we weren't able to set your status. Please try again later."),
-      );
+      createFlash({
+        message: s__(
+          "SetStatusModal|Sorry, we weren't able to set your status. Please try again later.",
+        ),
+      });
 
       this.closeModal();
     },

app/assets/javascripts/static_site_editor/pages/home.vue

 <script>
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import Tracking from '~/tracking';
 
 import EditArea from '../components/edit_area.vue';
@@ -45,7 +45,9 @@ export default {
         return !this.appData.isSupportedContent;
       },
       error() {
-        createFlash(LOAD_CONTENT_ERROR);
+        createFlash({
+          message: LOAD_CONTENT_ERROR,
+        });
       },
     },
   },

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

 <script>
 import { GlButton } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import eventHub from '../../event_hub';
@@ -120,7 +120,11 @@ export default {
       .then(() => {
         this.fetchingApprovals = false;
       })
-      .catch(() => createFlash(FETCH_ERROR));
+      .catch(() =>
+        createFlash({
+          message: FETCH_ERROR,
+        }),
+      );
   },
   methods: {
     approve() {
@@ -131,7 +135,10 @@ export default {
 
       this.updateApproval(
         () => this.service.approveMergeRequest(),
-        () => createFlash(APPROVE_ERROR),
+        () =>
+          createFlash({
+            message: APPROVE_ERROR,
+          }),
       );
     },
     approveWithAuth(data) {
@@ -142,14 +149,19 @@ export default {
             this.hasApprovalAuthError = true;
             return;
           }
-          createFlash(APPROVE_ERROR);
+          createFlash({
+            message: APPROVE_ERROR,
+          });
         },
       );
     },
     unapprove() {
       this.updateApproval(
         () => this.service.unapproveMergeRequest(),
-        () => createFlash(UNAPPROVE_ERROR),
+        () =>
+          createFlash({
+            message: UNAPPROVE_ERROR,
+          }),
       );
     },
     updateApproval(serviceFn, errFn) {

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue

 <script>
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -128,7 +128,9 @@ export default {
             }
           })
           .catch(() => {
-            createFlash(errorMessage);
+            createFlash({
+              message: errorMessage,
+            });
           })
           .finally(() => {
             this.actionInProgress = null;

app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue

@@ -2,7 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 import { produce } from 'immer';
 import $ from 'jquery';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import MergeRequest from '~/merge_request';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -76,7 +76,9 @@ export default {
             },
           ) {
             if (errors?.length) {
-              createFlash(__('Something went wrong. Please try again.'));
+              createFlash({
+                message: __('Something went wrong. Please try again.'),
+              });
 
               return;
             }
@@ -121,11 +123,18 @@ export default {
               },
             },
           }) => {
-            createFlash(__('The merge request can now be merged.'), 'notice');
+            createFlash({
+              message: __('The merge request can now be merged.'),
+              type: 'notice',
+            });
             $('.merge-request .detail-page-description .title').text(title);
           },
         )
-        .catch(() => createFlash(__('Something went wrong. Please try again.')))
+        .catch(() =>
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          }),
+        )
         .finally(() => {
           this.isMakingRequest = false;
         });
@@ -144,7 +153,9 @@ export default {
           })
           .catch(() => {
             this.isMakingRequest = false;
-            createFlash(__('Something went wrong. Please try again.'));
+            createFlash({
+              message: __('Something went wrong. Please try again.'),
+            });
           });
       }
     },

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -10,7 +10,7 @@ import notify from '~/lib/utils/notify';
 import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
-import { deprecatedCreateFlash as createFlash } from '../flash';
+import createFlash from '../flash';
 import { setFaviconOverlay } from '../lib/utils/favicon';
 import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grouped_accessibility_reports_app.vue';
 import GroupedCodequalityReportsApp from '../reports/codequality_report/grouped_codequality_reports_app.vue';
@@ -217,7 +217,9 @@ export default {
         this.initWidget(data);
       })
       .catch(() =>
-        createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
+        createFlash({
+          message: __('Unable to load the merge request widget. Try reloading the page.'),
+        }),
       );
   },
   beforeDestroy() {
@@ -298,7 +300,11 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => createFlash(__('Something went wrong. Please try again.')));
+        .catch(() =>
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          }),
+        );
     },
     setFaviconHelper() {
       if (this.mr.ciStatusFaviconPath) {
@@ -352,11 +358,11 @@ export default {
         .catch(() => this.throwDeploymentsError());
     },
     throwDeploymentsError() {
-      createFlash(
-        __(
+      createFlash({
+        message: __(
           'Something went wrong while fetching the environments for this merge request. Please try again.',
         ),
-      );
+      });
     },
     fetchActionsContent() {
       this.service
@@ -370,7 +376,11 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => createFlash(__('Something went wrong. Please try again.')));
+        .catch(() =>
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          }),
+        );
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -12,7 +12,7 @@ import {
 import RecentSearchesStorageKeys from 'ee_else_ce/filtered_search/recent_searches_storage_keys';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 import { SortDirection } from './constants';
@@ -211,7 +211,9 @@ export default {
         .catch((error) => {
           if (error.name === 'RecentSearchesServiceError') return undefined;
 
-          createFlash(__('An error occurred while parsing recent searches'));
+          createFlash({
+            message: __('An error occurred while parsing recent searches'),
+          });
 
           // Gracefully fail to empty array
           return [];

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 import { DEFAULT_LABEL_ANY, DEBOUNCE_DELAY } from '../constants';
@@ -80,7 +80,11 @@ export default {
           // return response differently.
           this.authors = Array.isArray(res) ? res : res.data;
         })
-        .catch(() => createFlash(__('There was a problem fetching users.')))
+        .catch(() =>
+          createFlash({
+            message: __('There was a problem fetching users.'),
+          }),
+        )
         .finally(() => {
           this.loading = false;
         });

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue

@@ -7,7 +7,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 import { DEBOUNCE_DELAY, DEFAULT_NONE_ANY } from '../constants';
@@ -65,7 +65,11 @@ export default {
         .then((res) => {
           this.emojis = Array.isArray(res) ? res : res.data;
         })
-        .catch(() => createFlash(__('There was a problem fetching emojis.')))
+        .catch(() =>
+          createFlash({
+            message: __('There was a problem fetching emojis.'),
+          }),
+        )
         .finally(() => {
           this.loading = false;
         });

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue

 <script>
 import { GlToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 
@@ -78,7 +78,11 @@ export default {
           // return response differently.
           this.labels = Array.isArray(res) ? res : res.data;
         })
-        .catch(() => createFlash(__('There was a problem fetching labels.')))
+        .catch(() =>
+          createFlash({
+            message: __('There was a problem fetching labels.'),
+          }),
+        )
         .finally(() => {
           this.loading = false;
         });

ee/spec/frontend/protected_branches/protected_branch_edit_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 
@@ -71,7 +71,7 @@ describe('EE ProtectedBranchEdit', () => {
           expect(mock.history.patch).toHaveLength(1);
 
           expect(toggle).not.toBeDisabled();
-          expect(flash).not.toHaveBeenCalled();
+          expect(createFlash).not.toHaveBeenCalled();
         }));
     });
 
@@ -83,7 +83,7 @@ describe('EE ProtectedBranchEdit', () => {
 
       it('flashes error', () =>
         axios.waitForAll().then(() => {
-          expect(flash).toHaveBeenCalled();
+          expect(createFlash).toHaveBeenCalled();
         }));
     });
   });

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsAuth from 'ee/vue_merge_request_widget/components/approvals/approvals_auth.vue';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import ApprovalsFoss from '~/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import ApprovalsSummaryOptional from '~/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
@@ -147,7 +147,7 @@ describe('EE MRWidget approvals', () => {
     });
 
     it('flashes error', () => {
-      expect(createFlash).toHaveBeenCalledWith(FETCH_ERROR);
+      expect(createFlash).toHaveBeenCalledWith({ message: FETCH_ERROR });
     });
   });
 
@@ -302,7 +302,7 @@ describe('EE MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith(APPROVE_ERROR);
+            expect(createFlash).toHaveBeenCalledWith({ message: APPROVE_ERROR });
           });
         });
       });
@@ -355,7 +355,7 @@ describe('EE MRWidget approvals', () => {
             });
 
             it('shows flash if general error', () => {
-              expect(createFlash).toHaveBeenCalledWith(APPROVE_ERROR);
+              expect(createFlash).toHaveBeenCalledWith({ message: APPROVE_ERROR });
             });
           });
         });
@@ -414,7 +414,7 @@ describe('EE MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith(UNAPPROVE_ERROR);
+            expect(createFlash).toHaveBeenCalledWith({ message: UNAPPROVE_ERROR });
           });
         });
       });

spec/frontend/error_tracking/components/error_details_spec.js

@@ -21,7 +21,7 @@ import {
   trackErrorDetailsViewsOptions,
   trackErrorStatusUpdateOptions,
 } from '~/error_tracking/utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -160,10 +160,10 @@ describe('ErrorDetails', () => {
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
         expect(wrapper.find(GlLink).exists()).toBe(false);
-        expect(createFlash).toHaveBeenCalledWith(
-          'Could not connect to Sentry. Refresh the page to try again.',
-          'warning',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Could not connect to Sentry. Refresh the page to try again.',
+          type: 'warning',
+        });
         expect(mocks.$apollo.queries.error.stopPolling).toHaveBeenCalled();
       });
     });

spec/frontend/monitoring/alert_widget_spec.js

 import { GlLoadingIcon, GlTooltip, GlSprintf, GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import AlertWidget from '~/monitoring/components/alert_widget.vue';
 
 const mockReadAlert = jest.fn();

spec/frontend/monitoring/components/dashboard_spec.js

@@ -3,7 +3,7 @@ import { shallowMount, mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import VueDraggable from 'vuedraggable';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { objectToQuery } from '~/lib/utils/url_utility';

spec/frontend/monitoring/components/dashboard_url_time_spec.js

 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import {
   queryToObject,

spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import * as flash from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import PromoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue';
@@ -103,7 +103,7 @@ describe('Promote milestone modal', () => {
       wrapper.findComponent(GlModal).vm.$emit('primary');
       await waitForPromises();
 
-      expect(flash.deprecatedCreateFlash).toHaveBeenCalledWith(dummyError);
+      expect(createFlash).toHaveBeenCalledWith({ message: dummyError });
     });
   });
 });

spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import ForkGroupsList from '~/pages/projects/forks/new/components/fork_groups_list.vue';
 import ForkGroupsListItem from '~/pages/projects/forks/new/components/fork_groups_list_item.vue';

spec/frontend/pipelines/pipelines_spec.js

@@ -8,7 +8,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
 import { getExperimentVariant } from '~/experimentation/utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
@@ -349,7 +349,7 @@ describe('Pipelines', () => {
 
         it('displays a warning message if raw text search is used', () => {
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(RAW_TEXT_WARNING, 'warning');
+          expect(createFlash).toHaveBeenCalledWith({ message: RAW_TEXT_WARNING, type: 'warning' });
         });
 
         it('should update browser bar', () => {

spec/frontend/protected_branches/protected_branch_edit_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 
@@ -69,7 +69,7 @@ describe('ProtectedBranchEdit', () => {
           expect(mock.history.patch).toHaveLength(1);
 
           expect(toggle).not.toBeDisabled();
-          expect(flash).not.toHaveBeenCalled();
+          expect(createFlash).not.toHaveBeenCalled();
         }));
     });
 
@@ -81,7 +81,7 @@ describe('ProtectedBranchEdit', () => {
 
       it('flashes error', () =>
         axios.waitForAll().then(() => {
-          expect(flash).toHaveBeenCalled();
+          expect(createFlash).toHaveBeenCalled();
         }));
     });
   });

spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { initEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
 import EmojiPicker from '~/emoji/components/picker.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import SetStatusModalWrapper, {
   AVAILABILITY_STATUS,
 } from '~/set_status_modal/set_status_modal_wrapper.vue';
@@ -289,9 +289,9 @@ describe('SetStatusModalWrapper', () => {
         findModal().vm.$emit('ok');
         await wrapper.vm.$nextTick();
 
-        expect(createFlash).toHaveBeenCalledWith(
-          "Sorry, we weren't able to set your status. Please try again later.",
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: "Sorry, we weren't able to set your status. Please try again later.",
+        });
       });
     });
   });

spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import Approvals from '~/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import ApprovalsSummaryOptional from '~/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
@@ -125,7 +125,7 @@ describe('MRWidget approvals', () => {
     });
 
     it('flashes error', () => {
-      expect(createFlash).toHaveBeenCalledWith(FETCH_ERROR);
+      expect(createFlash).toHaveBeenCalledWith({ message: FETCH_ERROR });
     });
   });
 
@@ -264,7 +264,7 @@ describe('MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith(APPROVE_ERROR);
+            expect(createFlash).toHaveBeenCalledWith({ message: APPROVE_ERROR });
           });
         });
       });
@@ -315,7 +315,7 @@ describe('MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith(UNAPPROVE_ERROR);
+            expect(createFlash).toHaveBeenCalledWith({ message: UNAPPROVE_ERROR });
           });
         });
       });

spec/frontend/vue_mr_widget/deployment/deployment_actions_spec.js

 import { mount } from '@vue/test-utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import {
   CREATED,
@@ -203,9 +203,9 @@ describe('DeploymentAction component', () => {
 
                 it('should call createFlash with error message', () => {
                   expect(createFlash).toHaveBeenCalled();
-                  expect(createFlash).toHaveBeenCalledWith(
-                    actionButtonMocks[configConst].errorMessage,
-                  );
+                  expect(createFlash).toHaveBeenCalledWith({
+                    message: actionButtonMocks[configConst].errorMessage,
+                  });
                 });
               });
             });

spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js

@@ -8,7 +8,7 @@ import {
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import {
@@ -137,7 +137,9 @@ describe('AuthorToken', () => {
       wrapper.vm.fetchAuthorBySearchTerm('root');
 
       return waitForPromises().then(() => {
-        expect(createFlash).toHaveBeenCalledWith('There was a problem fetching users.');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was a problem fetching users.',
+        });
       });
     });
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js

@@ -7,7 +7,7 @@ import {
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import {
@@ -121,7 +121,9 @@ describe('EmojiToken', () => {
         wrapper.vm.fetchEmojiBySearchTerm('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith('There was a problem fetching emojis.');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was a problem fetching emojis.',
+          });
         });
       });
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js

@@ -10,7 +10,7 @@ import {
   mockRegularLabel,
   mockLabels,
 } from 'jest/vue_shared/components/sidebar/labels_select_vue/mock_data';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import {
@@ -121,7 +121,9 @@ describe('LabelToken', () => {
         wrapper.vm.fetchLabelBySearchTerm('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith('There was a problem fetching labels.');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was a problem fetching labels.',
+          });
         });
       });