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

Replace deprecatedCreateFlash function calls in app/*.js files [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!63123

app/assets/javascripts/add_context_commits_modal/store/actions.js

 import _ from 'lodash';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import * as types from './mutation_types';
@@ -71,7 +71,9 @@ export const createContextCommits = ({ state }, { commits, forceReload = false }
     })
     .catch(() => {
       if (forceReload) {
-        createFlash(s__('ContextCommits|Failed to create context commits. Please try again.'));
+        createFlash({
+          message: s__('ContextCommits|Failed to create context commits. Please try again.'),
+        });
       }
 
       return false;
@@ -111,7 +113,9 @@ export const removeContextCommits = ({ state }, forceReload = false) =>
     })
     .catch(() => {
       if (forceReload) {
-        createFlash(s__('ContextCommits|Failed to delete context commits. Please try again.'));
+        createFlash({
+          message: s__('ContextCommits|Failed to delete context commits. Please try again.'),
+        });
       }
 
       return false;

app/assets/javascripts/admin/statistics_panel/store/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import * as types from './mutation_types';
@@ -21,5 +21,7 @@ export const receiveStatisticsSuccess = ({ commit }, statistics) =>
 
 export const receiveStatisticsError = ({ commit }, error) => {
   commit(types.RECEIVE_STATISTICS_ERROR, error);
-  createFlash(s__('AdminDashboard|Error loading the statistics. Please try again'));
+  createFlash({
+    message: s__('AdminDashboard|Error loading the statistics. Please try again'),
+  });
 };

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
 import initCodeQualityWalkthrough from '~/code_quality_walkthrough';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { disableButtonIfEmptyField, setCookie } from '~/lib/utils/common_utils';
 import Tracking from '~/tracking';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
@@ -84,7 +84,11 @@ export default () => {
         initPopovers();
         initCodeQualityWalkthroughStep();
       })
-      .catch((e) => createFlash(e));
+      .catch((e) =>
+        createFlash({
+          message: e,
+        }),
+      );
 
     cancelLink.on('click', () => {
       window.onbeforeunload = null;

app/assets/javascripts/blob_edit/edit_blob.js

 import $ from 'jquery';
 import EditorLite from '~/editor/editor_lite';
 import { FileTemplateExtension } from '~/editor/extensions/editor_file_template_ext';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
 import { insertFinalNewline } from '~/lib/utils/text_utility';
@@ -21,7 +21,11 @@ export default class EditBlob {
           this.editor.use(new MarkdownExtension());
           addEditorMarkdownListeners(this.editor);
         })
-        .catch((e) => createFlash(`${BLOB_EDITOR_ERROR}: ${e}`));
+        .catch((e) =>
+          createFlash({
+            message: `${BLOB_EDITOR_ERROR}: ${e}`,
+          }),
+        );
     }
 
     this.initModePanesAndLinks();
@@ -94,7 +98,11 @@ export default class EditBlob {
           currentPane.empty().append(data);
           currentPane.renderGFM();
         })
-        .catch(() => createFlash(BLOB_PREVIEW_ERROR));
+        .catch(() =>
+          createFlash({
+            message: BLOB_PREVIEW_ERROR,
+          }),
+        );
     }
 
     this.$toggleButton.show();

app/assets/javascripts/branches/divergence_graph.js

 import Vue from 'vue';
-import { deprecatedCreateFlash as createFlash } from '../flash';
+import createFlash from '../flash';
 import axios from '../lib/utils/axios_utils';
 import { __ } from '../locale';
 import DivergenceGraph from './components/divergence_graph.vue';
@@ -51,6 +51,8 @@ export default (endpoint, defaultBranch) => {
       });
     })
     .catch(() =>
-      createFlash(__('Error fetching diverging counts for branches. Please try again.')),
+      createFlash({
+        message: __('Error fetching diverging counts for branches. Please try again.'),
+      }),
     );
 };

app/assets/javascripts/ci_variable_list/store/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -48,7 +48,9 @@ export const addVariable = ({ state, dispatch }) => {
       dispatch('fetchVariables');
     })
     .catch((error) => {
-      createFlash(error.response.data[0]);
+      createFlash({
+        message: error.response.data[0],
+      });
       dispatch('receiveAddVariableError', error);
     });
 };
@@ -78,7 +80,9 @@ export const updateVariable = ({ state, dispatch }) => {
       dispatch('fetchVariables');
     })
     .catch((error) => {
-      createFlash(error.response.data[0]);
+      createFlash({
+        message: error.response.data[0],
+      });
       dispatch('receiveUpdateVariableError', error);
     });
 };
@@ -105,7 +109,9 @@ export const fetchVariables = ({ dispatch, state }) => {
       dispatch('receiveVariablesSuccess', prepareDataForDisplay(data.variables));
     })
     .catch(() => {
-      createFlash(__('There was an error fetching the variables.'));
+      createFlash({
+        message: __('There was an error fetching the variables.'),
+      });
     });
 };
 
@@ -133,7 +139,9 @@ export const deleteVariable = ({ dispatch, state }) => {
       dispatch('fetchVariables');
     })
     .catch((error) => {
-      createFlash(error.response.data[0]);
+      createFlash({
+        message: error.response.data[0],
+      });
       dispatch('receiveDeleteVariableError', error);
     });
 };
@@ -154,7 +162,9 @@ export const fetchEnvironments = ({ dispatch, state }) => {
       dispatch('receiveEnvironmentsSuccess', prepareEnvironments(res.data));
     })
     .catch(() => {
-      createFlash(__('There was an error fetching the environments information.'));
+      createFlash({
+        message: __('There was an error fetching the environments information.'),
+      });
     });
 };
 

app/assets/javascripts/create_cluster/eks_cluster/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { DEFAULT_REGION } from '../constants';
@@ -102,7 +102,9 @@ export const createClusterSuccess = (_, location) => {
 
 export const createClusterError = ({ commit }, error) => {
   commit(types.CREATE_CLUSTER_ERROR, error);
-  createFlash(getErrorMessage(error));
+  createFlash({
+    message: getErrorMessage(error),
+  });
 };
 
 export const setRegion = ({ commit }, payload) => {

app/assets/javascripts/deploy_freeze/store/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
@@ -26,7 +26,9 @@ const receiveFreezePeriod = (store, request) => {
       dispatch('fetchFreezePeriods');
     })
     .catch((error) => {
-      createFlash(__('Error: Unable to create deploy freeze'));
+      createFlash({
+        message: __('Error: Unable to create deploy freeze'),
+      });
       dispatch('receiveFreezePeriodError', error);
     });
 };
@@ -58,7 +60,9 @@ export const fetchFreezePeriods = ({ commit, state }) => {
       commit(types.RECEIVE_FREEZE_PERIODS_SUCCESS, data);
     })
     .catch(() => {
-      createFlash(__('There was an error fetching the deploy freezes.'));
+      createFlash({
+        message: __('There was an error fetching the deploy freezes.'),
+      });
     });
 };
 

app/assets/javascripts/diffs/store/actions.js

 import Cookies from 'js-cookie';
 import Vue from 'vue';
 import api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils';
@@ -240,7 +240,10 @@ export const fetchCoverageFiles = ({ commit, state }) => {
         coveragePoll.stop();
       }
     },
-    errorCallback: () => createFlash(__('Something went wrong on our end. Please try again!')),
+    errorCallback: () =>
+      createFlash({
+        message: __('Something went wrong on our end. Please try again!'),
+      }),
   });
 
   coveragePoll.makeRequest();
@@ -504,7 +507,11 @@ export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => {
     .then((discussion) => dispatch('assignDiscussionsToDiff', [discussion]))
     .then(() => dispatch('updateResolvableDiscussionsCounts', null, { root: true }))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
-    .catch(() => createFlash(s__('MergeRequests|Saving the comment failed')));
+    .catch(() =>
+      createFlash({
+        message: s__('MergeRequests|Saving the comment failed'),
+      }),
+    );
 };
 
 export const toggleTreeOpen = ({ commit }, path) => {
@@ -595,7 +602,9 @@ export const cacheTreeListWidth = (_, size) => {
 
 export const receiveFullDiffError = ({ commit }, filePath) => {
   commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
-  createFlash(s__('MergeRequest|Error loading full diff. Please try again.'));
+  createFlash({
+    message: s__('MergeRequest|Error loading full diff. Please try again.'),
+  });
 };
 
 export const setExpandedDiffLines = ({ commit }, { file, data }) => {
@@ -727,7 +736,9 @@ export const setSuggestPopoverDismissed = ({ commit, state }) =>
       commit(types.SET_SHOW_SUGGEST_POPOVER);
     })
     .catch(() => {
-      createFlash(s__('MergeRequest|Error dismissing suggestion popover. Please try again.'));
+      createFlash({
+        message: s__('MergeRequest|Error dismissing suggestion popover. Please try again.'),
+      });
     });
 
 export function changeCurrentCommit({ dispatch, commit, state }, { commitId }) {

app/assets/javascripts/error_tracking/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import service from '../services';
@@ -17,7 +17,11 @@ export const updateStatus = ({ commit }, { endpoint, redirectUrl, status }) =>
 
       return resp.data.result;
     })
-    .catch(() => createFlash(__('Failed to update issue status')));
+    .catch(() =>
+      createFlash({
+        message: __('Failed to update issue status'),
+      }),
+    );
 
 export const updateResolveStatus = ({ commit, dispatch }, params) => {
   commit(types.SET_UPDATING_RESOLVE_STATUS, true);

app/assets/javascripts/error_tracking/store/details/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
 import service from '../../services';
@@ -26,7 +26,9 @@ export function startPollingStacktrace({ commit }, endpoint) {
     },
     errorCallback: () => {
       commit(types.SET_LOADING_STACKTRACE, false);
-      createFlash(__('Failed to load stacktrace.'));
+      createFlash({
+        message: __('Failed to load stacktrace.'),
+      });
     },
   });
 

app/assets/javascripts/error_tracking/store/list/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
 import Service from '../../services';
@@ -33,7 +33,9 @@ export function startPolling({ state, commit, dispatch }) {
     },
     errorCallback: () => {
       commit(types.SET_LOADING, false);
-      createFlash(__('Failed to load errors from Sentry.'));
+      createFlash({
+        message: __('Failed to load errors from Sentry.'),
+      });
     },
   });
 

app/assets/javascripts/error_tracking_settings/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -46,7 +46,10 @@ export const requestSettings = ({ commit }) => {
 export const receiveSettingsError = ({ commit }, { response = {} }) => {
   const message = response.data && response.data.message ? response.data.message : '';
 
-  createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert');
+  createFlash({
+    message: `${__('There was an error saving your changes.')} ${message}`,
+    type: 'alert',
+  });
   commit(types.UPDATE_SETTINGS_LOADING, false);
 };
 

app/assets/javascripts/feature_flags/store/edit/actions.js

-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 { __ } from '~/locale';
@@ -55,7 +55,9 @@ export const receiveFeatureFlagSuccess = ({ commit }, response) =>
   commit(types.RECEIVE_FEATURE_FLAG_SUCCESS, response);
 export const receiveFeatureFlagError = ({ commit }) => {
   commit(types.RECEIVE_FEATURE_FLAG_ERROR);
-  createFlash(__('Something went wrong on our end. Please try again!'));
+  createFlash({
+    message: __('Something went wrong on our end. Please try again!'),
+  });
 };
 
 export const toggleActive = ({ commit }, active) => commit(types.TOGGLE_ACTIVE, active);

app/assets/javascripts/filtered_search/dropdown_ajax_filter.js

 import { __ } from '~/locale';
 import AjaxFilter from '../droplab/plugins/ajax_filter';
-import { deprecatedCreateFlash as createFlash } from '../flash';
+import createFlash from '../flash';
 import DropdownUtils from './dropdown_utils';
 import FilteredSearchDropdown from './filtered_search_dropdown';
 import FilteredSearchTokenizer from './filtered_search_tokenizer';
@@ -27,7 +27,9 @@ export default class DropdownAjaxFilter extends FilteredSearchDropdown {
       searchValueFunction: this.getSearchInput.bind(this),
       loadingTemplate: this.loadingTemplate,
       onError() {
-        createFlash(__('An error occurred fetching the dropdown data.'));
+        createFlash({
+          message: __('An error occurred fetching the dropdown data.'),
+        });
       },
     };
   }

app/assets/javascripts/gpg_badges.js

 import $ from 'jquery';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseQueryStringIntoObject } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -16,7 +16,10 @@ export default class GpgBadges {
     badges.html('<span class="gl-spinner gl-spinner-orange gl-spinner-sm"></span>');
     badges.children().attr('aria-label', __('Loading'));
 
-    const displayError = () => createFlash(__('An error occurred while loading commit signatures'));
+    const displayError = () =>
+      createFlash({
+        message: __('An error occurred while loading commit signatures'),
+      });
 
     const endpoint = tag.data('signaturesPath');
     if (!endpoint) {

app/assets/javascripts/grafana_integration/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -38,5 +38,8 @@ export const receiveGrafanaIntegrationUpdateError = (_, error) => {
   const { response } = error;
   const message = response.data && response.data.message ? response.data.message : '';
 
-  createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert');
+  createFlash({
+    message: `${__('There was an error saving your changes.')} ${message}`,
+    type: 'alert',
+  });
 };

app/assets/javascripts/ide/components/new_dropdown/modal.vue

 <script>
 import { GlModal, GlButton } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
 import { modalTypes } from '../../constants';
 import { trimPathComponents, getPathParent } from '../../utils';
@@ -57,16 +57,16 @@ export default {
 
       if (this.modalType === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
-          flash(
-            sprintf(s__('The name "%{name}" is already taken in this directory.'), {
+          createFlash({
+            message: sprintf(s__('The name "%{name}" is already taken in this directory.'), {
               name: this.entryName,
             }),
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
+            type: 'alert',
+            parent: document,
+            actionConfig: null,
+            fadeTransition: false,
+            addBodyClass: true,
+          });
         } else {
           let parentPath = this.entryName.split('/');
           const name = parentPath.pop();

app/assets/javascripts/ide/stores/actions/merge_request.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '../../constants';
 import service from '../../services';
@@ -34,14 +34,14 @@ export const getMergeRequestsForBranch = (
       }
     })
     .catch((e) => {
-      flash(
-        __(`Error fetching merge requests for ${branchId}`),
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      );
+      createFlash({
+        message: __(`Error fetching merge requests for ${branchId}`),
+        type: 'alert',
+        parent: document,
+        actionConfig: null,
+        fadeTransition: false,
+        addBodyClass: true,
+      });
       throw e;
     });
 };
@@ -236,7 +236,7 @@ export const openMergeRequest = async (
 
     await dispatch('openMergeRequestChanges', changes);
   } catch (e) {
-    flash(__('Error while loading the merge request. Please try again.'));
+    createFlash({ message: __('Error while loading the merge request. Please try again.') });
     throw e;
   }
 };

app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import * as terminalService from '../../../../services/terminals';
@@ -26,7 +26,7 @@ export const receiveStartSessionSuccess = ({ commit, dispatch }, data) => {
 };
 
 export const receiveStartSessionError = ({ dispatch }) => {
-  flash(messages.UNEXPECTED_ERROR_STARTING);
+  createFlash({ message: messages.UNEXPECTED_ERROR_STARTING });
   dispatch('killSession');
 };
 
@@ -59,7 +59,7 @@ export const receiveStopSessionSuccess = ({ dispatch }) => {
 };
 
 export const receiveStopSessionError = ({ dispatch }) => {
-  flash(messages.UNEXPECTED_ERROR_STOPPING);
+  createFlash({ message: messages.UNEXPECTED_ERROR_STOPPING });
   dispatch('killSession');
 };
 

app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as messages from '../messages';
 import * as types from '../mutation_types';
@@ -42,7 +42,7 @@ export const receiveSessionStatusSuccess = ({ commit, dispatch }, data) => {
 };
 
 export const receiveSessionStatusError = ({ dispatch }) => {
-  flash(messages.UNEXPECTED_ERROR_STATUS);
+  createFlash({ message: messages.UNEXPECTED_ERROR_STATUS });
   dispatch('killSession');
 };
 

app/assets/javascripts/import_entities/import_projects/store/actions.js

 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -75,19 +75,19 @@ const fetchReposFactory = ({ reposPath = isRequired() }) => ({ state, commit })
       if (hasRedirectInError(e)) {
         redirectToUrlInError(e);
       } else if (tooManyRequests(e)) {
-        createFlash(
-          sprintf(s__('ImportProjects|%{provider} rate limit exceeded. Try again later'), {
+        createFlash({
+          message: sprintf(s__('ImportProjects|%{provider} rate limit exceeded. Try again later'), {
             provider: capitalizeFirstCharacter(provider),
           }),
-        );
+        });
 
         commit(types.RECEIVE_REPOS_ERROR);
       } else {
-        createFlash(
-          sprintf(s__('ImportProjects|Requesting your %{provider} repositories failed'), {
+        createFlash({
+          message: sprintf(s__('ImportProjects|Requesting your %{provider} repositories failed'), {
             provider,
           }),
-        );
+        });
 
         commit(types.RECEIVE_REPOS_ERROR);
       }
@@ -126,7 +126,9 @@ const fetchImportFactory = (importPath = isRequired()) => ({ state, commit, gett
           )
         : s__('ImportProjects|Importing the project failed');
 
-      createFlash(flashMessage);
+      createFlash({
+        message: flashMessage,
+      });
 
       commit(types.RECEIVE_IMPORT_ERROR, repoId);
     });
@@ -149,7 +151,9 @@ export const fetchJobsFactory = (jobsPath = isRequired()) => ({ state, commit, d
       if (hasRedirectInError(e)) {
         redirectToUrlInError(e);
       } else {
-        createFlash(s__('ImportProjects|Update of imported projects with realtime changes failed'));
+        createFlash({
+          message: s__('ImportProjects|Update of imported projects with realtime changes failed'),
+        });
       }
     },
   });
@@ -175,7 +179,9 @@ const fetchNamespacesFactory = (namespacesPath = isRequired()) => ({ commit }) =
       commit(types.RECEIVE_NAMESPACES_SUCCESS, convertObjectPropsToCamelCase(data, { deep: true })),
     )
     .catch(() => {
-      createFlash(s__('ImportProjects|Requesting namespaces failed'));
+      createFlash({
+        message: s__('ImportProjects|Requesting namespaces failed'),
+      });
 
       commit(types.RECEIVE_NAMESPACES_ERROR);
     });

app/assets/javascripts/incidents_settings/incidents_settings_service.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { ERROR_MSG } from './constants';
@@ -22,7 +22,10 @@ export default class IncidentsSettingsService {
       .catch(({ response }) => {
         const message = response?.data?.message || '';
 
-        createFlash(`${ERROR_MSG} ${message}`, 'alert');
+        createFlash({
+          message: `${ERROR_MSG} ${message}`,
+          type: 'alert',
+        });
       });
   }
 

app/assets/javascripts/manual_ordering.js

@@ -3,7 +3,7 @@ import {
   getBoardSortableDefaultOptions,
   sortableStart,
 } from '~/boards/mixins/sortable_default_options';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 
@@ -15,7 +15,9 @@ const updateIssue = (url, issueList, { move_before_id, move_after_id }) =>
       group_full_path: issueList.dataset.groupFullPath,
     })
     .catch(() => {
-      createFlash(s__("ManualOrdering|Couldn't save the order of the issues"));
+      createFlash({
+        message: s__("ManualOrdering|Couldn't save the order of the issues"),
+      });
     });
 
 const initManualOrdering = (draggableSelector = 'li.issue') => {

app/assets/javascripts/merge_request.js

 /* eslint-disable func-names, no-underscore-dangle, consistent-return */
 
 import $ from 'jquery';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import axios from './lib/utils/axios_utils';
@@ -36,11 +36,11 @@ function MergeRequest(opts) {
         document.querySelector('#task_status_short').innerText = result.task_status_short;
       },
       onError: () => {
-        createFlash(
-          __(
+        createFlash({
+          message: __(
             'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
           ),
-        );
+        });
       },
     });
   }
@@ -93,7 +93,9 @@ MergeRequest.prototype.initMRBtnListeners = function () {
           })
           .catch(() => {
             draftToggle.removeAttribute('disabled');
-            createFlash(__('Something went wrong. Please try again.'));
+            createFlash({
+              message: __('Something went wrong. Please try again.'),
+            });
           });
       });
     });
@@ -169,7 +171,10 @@ MergeRequest.hideCloseButton = function () {
 
 MergeRequest.toggleDraftStatus = function (title, isReady) {
   if (isReady) {
-    createFlash(__('The merge request can now be merged.'), 'notice');
+    createFlash({
+      message: __('The merge request can now be merged.'),
+      type: 'notice',
+    });
   }
   const titleEl = document.querySelector('.merge-request .detail-page-description .title');
 

app/assets/javascripts/monitoring/stores/actions.js

 import * as Sentry from '@sentry/browser';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
@@ -134,15 +134,17 @@ export const fetchDashboard = ({ state, commit, dispatch, getters }) => {
       if (state.showErrorBanner) {
         if (error.response.data && error.response.data.message) {
           const { message } = error.response.data;
-          createFlash(
-            sprintf(
+          createFlash({
+            message: sprintf(
               s__('Metrics|There was an error while retrieving metrics. %{message}'),
               { message },
               false,
             ),
-          );
+          });
         } else {
-          createFlash(s__('Metrics|There was an error while retrieving metrics'));
+          createFlash({
+            message: s__('Metrics|There was an error while retrieving metrics'),
+          });
         }
       }
     });
@@ -174,7 +176,10 @@ export const fetchDashboardData = ({ state, dispatch, getters }) => {
   dispatch('fetchDeploymentsData');
 
   if (!state.timeRange) {
-    createFlash(s__(`Metrics|Invalid time range, please verify.`), 'warning');
+    createFlash({
+      message: s__(`Metrics|Invalid time range, please verify.`),
+      type: 'warning',
+    });
     return Promise.reject();
   }
 
@@ -202,7 +207,10 @@ export const fetchDashboardData = ({ state, dispatch, getters }) => {
       });
     })
     .catch(() => {
-      createFlash(s__(`Metrics|There was an error while retrieving metrics`), 'warning');
+      createFlash({
+        message: s__(`Metrics|There was an error while retrieving metrics`),
+        type: 'warning',
+      });
     });
 };
 
@@ -254,7 +262,9 @@ export const fetchDeploymentsData = ({ state, dispatch }) => {
     .then((resp) => resp.data)
     .then((response) => {
       if (!response || !response.deployments) {
-        createFlash(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+        createFlash({
+          message: s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
+        });
       }
 
       dispatch('receiveDeploymentsDataSuccess', response.deployments);
@@ -262,7 +272,9 @@ export const fetchDeploymentsData = ({ state, dispatch }) => {
     .catch((error) => {
       Sentry.captureException(error);
       dispatch('receiveDeploymentsDataFailure');
-      createFlash(s__('Metrics|There was an error getting deployment information.'));
+      createFlash({
+        message: s__('Metrics|There was an error getting deployment information.'),
+      });
     });
 };
 export const receiveDeploymentsDataSuccess = ({ commit }, data) => {
@@ -290,9 +302,11 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
     )
     .then((environments) => {
       if (!environments) {
-        createFlash(
-          s__('Metrics|There was an error fetching the environments data, please try again'),
-        );
+        createFlash({
+          message: s__(
+            'Metrics|There was an error fetching the environments data, please try again',
+          ),
+        });
       }
 
       dispatch('receiveEnvironmentsDataSuccess', environments);
@@ -300,7 +314,9 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
     .catch((err) => {
       Sentry.captureException(err);
       dispatch('receiveEnvironmentsDataFailure');
-      createFlash(s__('Metrics|There was an error getting environments information.'));
+      createFlash({
+        message: s__('Metrics|There was an error getting environments information.'),
+      });
     });
 };
 export const requestEnvironmentsData = ({ commit }) => {
@@ -332,7 +348,9 @@ export const fetchAnnotations = ({ state, dispatch, getters }) => {
     .then(parseAnnotationsResponse)
     .then((annotations) => {
       if (!annotations) {
-        createFlash(s__('Metrics|There was an error fetching annotations. Please try again.'));
+        createFlash({
+          message: s__('Metrics|There was an error fetching annotations. Please try again.'),
+        });
       }
 
       dispatch('receiveAnnotationsSuccess', annotations);
@@ -340,7 +358,9 @@ export const fetchAnnotations = ({ state, dispatch, getters }) => {
     .catch((err) => {
       Sentry.captureException(err);
       dispatch('receiveAnnotationsFailure');
-      createFlash(s__('Metrics|There was an error getting annotations information.'));
+      createFlash({
+        message: s__('Metrics|There was an error getting annotations information.'),
+      });
     });
 };
 
@@ -377,9 +397,11 @@ export const fetchDashboardValidationWarnings = ({ state, dispatch, getters }) =
     .catch((err) => {
       Sentry.captureException(err);
       dispatch('receiveDashboardValidationWarningsFailure');
-      createFlash(
-        s__('Metrics|There was an error getting dashboard validation warnings information.'),
-      );
+      createFlash({
+        message: s__(
+          'Metrics|There was an error getting dashboard validation warnings information.',
+        ),
+      });
     });
 };
 
@@ -480,11 +502,14 @@ export const fetchVariableMetricLabelValues = ({ state, commit }, { defaultQuery
           commit(types.UPDATE_VARIABLE_METRIC_LABEL_VALUES, { variable, label, data });
         })
         .catch(() => {
-          createFlash(
-            sprintf(s__('Metrics|There was an error getting options for variable "%{name}".'), {
-              name: variable.name,
-            }),
-          );
+          createFlash({
+            message: sprintf(
+              s__('Metrics|There was an error getting options for variable "%{name}".'),
+              {
+                name: variable.name,
+              },
+            ),
+          });
         });
       optionsRequests.push(optionsRequest);
     }

app/assets/javascripts/notes/mixins/diff_line_note_form.js

 import { mapActions, mapGetters, mapState } from 'vuex';
 import { getDraftReplyFormData, getDraftFormData } from '~/batch_comments/utils';
 import { TEXT_DIFF_POSITION_TYPE, IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { clearDraft } from '~/lib/utils/autosave';
 import { s__ } from '~/locale';
 import { formatLineRange } from '~/notes/components/multiline_comment_utils';
@@ -42,7 +42,9 @@ export default {
           this.handleClearForm(this.discussion.line_code);
         })
         .catch(() => {
-          createFlash(s__('MergeRequests|An error occurred while saving the draft comment.'));
+          createFlash({
+            message: s__('MergeRequests|An error occurred while saving the draft comment.'),
+          });
         });
     },
     addToReview(note) {
@@ -80,7 +82,9 @@ export default {
           }
         })
         .catch(() => {
-          createFlash(s__('MergeRequests|An error occurred while saving the draft comment.'));
+          createFlash({
+            message: s__('MergeRequests|An error occurred while saving the draft comment.'),
+          });
         });
     },
     handleClearForm(lineCode) {

app/assets/javascripts/operation_settings/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -35,5 +35,8 @@ export const receiveSaveChangesError = (_, error) => {
   const { response = {} } = error;
   const message = response.data && response.data.message ? response.data.message : '';
 
-  createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert');
+  createFlash({
+    message: `${__('There was an error saving your changes.')} ${message}`,
+    type: 'alert',
+  });
 };

app/assets/javascripts/packages/list/stores/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages/shared/constants';
 import {
@@ -43,7 +43,9 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
       dispatch('receivePackagesListSuccess', { data, headers });
     })
     .catch(() => {
-      createFlash(FETCH_PACKAGES_LIST_ERROR_MESSAGE);
+      createFlash({
+        message: FETCH_PACKAGES_LIST_ERROR_MESSAGE,
+      });
     })
     .finally(() => {
       dispatch('setLoading', false);
@@ -52,7 +54,9 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
 
 export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
   if (!_links || !_links.delete_api_path) {
-    createFlash(DELETE_PACKAGE_ERROR_MESSAGE);
+    createFlash({
+      message: DELETE_PACKAGE_ERROR_MESSAGE,
+    });
     const error = new Error(MISSING_DELETE_PATH_ERROR);
     return Promise.reject(error);
   }
@@ -65,10 +69,15 @@ export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
       const page = getNewPaginationPage(currentPage, perPage, total - 1);
 
       dispatch('requestPackagesList', { page });
-      createFlash(DELETE_PACKAGE_SUCCESS_MESSAGE, 'success');
+      createFlash({
+        message: DELETE_PACKAGE_SUCCESS_MESSAGE,
+        type: 'success',
+      });
     })
     .catch(() => {
       dispatch('setLoading', false);
-      createFlash(DELETE_PACKAGE_ERROR_MESSAGE);
+      createFlash({
+        message: DELETE_PACKAGE_ERROR_MESSAGE,
+      });
     });
 };

app/assets/javascripts/pages/profiles/show/index.js

@@ -2,7 +2,7 @@ import emojiRegex from 'emoji-regex';
 import $ from 'jquery';
 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 { __ } from '~/locale';
 import EmojiMenu from './emoji_menu';
 
@@ -81,4 +81,8 @@ Emoji.initEmojiMap()
       }
     });
   })
-  .catch(() => createFlash(__('Failed to load emoji list.')));
+  .catch(() =>
+    createFlash({
+      message: __('Failed to load emoji list.'),
+    }),
+  );

app/assets/javascripts/pipelines/mixins/pipelines_mixin.js

 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { historyPushState, buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
 import Poll from '~/lib/utils/poll';
 import { __ } from '~/locale';
@@ -169,7 +169,11 @@ export default {
       this.service
         .postAction(endpoint)
         .then(() => this.updateTable())
-        .catch(() => createFlash(__('An error occurred while making the request.')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while making the request.'),
+          }),
+        );
     },
 
     /**
@@ -189,9 +193,11 @@ export default {
         .runMRPipeline(options)
         .then(() => this.updateTable())
         .catch(() => {
-          createFlash(
-            __('An error occurred while trying to run a new pipeline for this merge request.'),
-          );
+          createFlash({
+            message: __(
+              'An error occurred while trying to run a new pipeline for this merge request.',
+            ),
+          });
         })
         .finally(() => this.store.toggleIsRunningPipeline(false));
     },

app/assets/javascripts/pipelines/stores/test_reports/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import * as types from './mutation_types';
@@ -12,7 +12,9 @@ export const fetchSummary = ({ state, commit, dispatch }) => {
       commit(types.SET_SUMMARY, data);
     })
     .catch(() => {
-      createFlash(s__('TestReports|There was an error fetching the summary.'));
+      createFlash({
+        message: s__('TestReports|There was an error fetching the summary.'),
+      });
     })
     .finally(() => {
       dispatch('toggleLoading');
@@ -36,7 +38,9 @@ export const fetchTestSuite = ({ state, commit, dispatch }, index) => {
     .get(state.suiteEndpoint, { params: { build_ids } })
     .then(({ data }) => commit(types.SET_SUITE, { suite: data, index }))
     .catch(() => {
-      createFlash(s__('TestReports|There was an error fetching the test suite.'));
+      createFlash({
+        message: s__('TestReports|There was an error fetching the test suite.'),
+      });
     })
     .finally(() => {
       dispatch('toggleLoading');

app/assets/javascripts/profile/account/components/update_username.vue

 <script>
 import { GlSafeHtmlDirective as SafeHtml, GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__, sprintf } from '~/locale';
 
@@ -85,15 +85,16 @@ Please update your Git repository remotes as soon as possible.`),
       return axios
         .put(this.actionUrl, putData)
         .then((result) => {
-          Flash(result.data.message, 'notice');
+          createFlash({ message: result.data.message, type: 'notice' });
           this.username = username;
           this.isRequestPending = false;
         })
         .catch((error) => {
-          Flash(
-            error?.response?.data?.message ||
+          createFlash({
+            message:
+              error?.response?.data?.message ||
               s__('Profiles|An error occurred while updating your username, please try again.'),
-          );
+          });
           this.isRequestPending = false;
           throw error;
         });

app/assets/javascripts/projects/commits/store/actions.js

 import * as Sentry from '@sentry/browser';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -13,7 +13,9 @@ export default {
     commit(types.COMMITS_AUTHORS, authors);
   },
   receiveAuthorsError() {
-    createFlash(__('An error occurred fetching the project authors.'));
+    createFlash({
+      message: __('An error occurred fetching the project authors.'),
+    });
   },
   fetchAuthors({ dispatch, state }, author = null) {
     const { projectId } = state;

app/assets/javascripts/related_issues/components/related_issues_root.vue

@@ -23,7 +23,7 @@ Your caret can stop touching a `rawReference` can happen in a variety of ways:
    and hide the `AddIssuableForm` area.
 
 */
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import {
   relatedIssuesRemoveErrorMap,
@@ -122,11 +122,11 @@ export default {
           })
           .catch((res) => {
             if (res && res.status !== 404) {
-              Flash(relatedIssuesRemoveErrorMap[this.issuableType]);
+              createFlash({ message: relatedIssuesRemoveErrorMap[this.issuableType] });
             }
           });
       } else {
-        Flash(pathIndeterminateErrorMap[this.issuableType]);
+        createFlash({ message: pathIndeterminateErrorMap[this.issuableType] });
       }
     },
     onToggleAddRelatedIssuesForm() {
@@ -155,7 +155,7 @@ export default {
             if (response && response.data && response.data.message) {
               errorMessage = response.data.message;
             }
-            Flash(errorMessage);
+            createFlash({ message: errorMessage });
           })
           .finally(() => {
             this.isSubmitting = false;
@@ -176,7 +176,7 @@ export default {
         })
         .catch(() => {
           this.store.setRelatedIssues([]);
-          Flash(__('An error occurred while fetching issues.'));
+          createFlash({ message: __('An error occurred while fetching issues.') });
         })
         .finally(() => {
           this.isFetching = false;
@@ -197,7 +197,7 @@ export default {
             }
           })
           .catch(() => {
-            Flash(__('An error occurred while reordering issues.'));
+            createFlash({ message: __('An error occurred while reordering issues.') });
           });
       }
     },

app/assets/javascripts/related_merge_requests/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
@@ -29,6 +29,8 @@ export const fetchMergeRequests = ({ state, dispatch }) => {
     })
     .catch(() => {
       dispatch('receiveDataError');
-      createFlash(s__('Something went wrong while fetching related merge requests.'));
+      createFlash({
+        message: s__('Something went wrong while fetching related merge requests.'),
+      });
     });
 };

app/assets/javascripts/releases/stores/modules/edit_new/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import createReleaseMutation from '~/releases/graphql/mutations/create_release.mutation.graphql';
@@ -39,7 +39,9 @@ export const fetchRelease = async ({ commit, state }) => {
     commit(types.RECEIVE_RELEASE_SUCCESS, release);
   } catch (error) {
     commit(types.RECEIVE_RELEASE_ERROR, error);
-    createFlash(s__('Release|Something went wrong while getting the release details.'));
+    createFlash({
+      message: s__('Release|Something went wrong while getting the release details.'),
+    });
   }
 };
 
@@ -124,7 +126,9 @@ export const createRelease = async ({ commit, dispatch, state, getters }) => {
     dispatch('receiveSaveReleaseSuccess', response.data.releaseCreate.release.links.selfUrl);
   } catch (error) {
     commit(types.RECEIVE_SAVE_RELEASE_ERROR, error);
-    createFlash(s__('Release|Something went wrong while creating a new release.'));
+    createFlash({
+      message: s__('Release|Something went wrong while creating a new release.'),
+    });
   }
 };
 
@@ -214,6 +218,8 @@ export const updateRelease = async ({ commit, dispatch, state, getters }) => {
     dispatch('receiveSaveReleaseSuccess', state.release._links.self);
   } catch (error) {
     commit(types.RECEIVE_SAVE_RELEASE_ERROR, error);
-    createFlash(s__('Release|Something went wrong while saving the release details.'));
+    createFlash({
+      message: s__('Release|Something went wrong while saving the release details.'),
+    });
   }
 };

app/assets/javascripts/releases/stores/modules/index/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { PAGE_SIZE } from '~/releases/constants';
 import allReleasesQuery from '~/releases/graphql/queries/all_releases.query.graphql';
@@ -57,7 +57,9 @@ export const fetchReleases = ({ dispatch, commit, state }, { before, after }) =>
 
 export const receiveReleasesError = ({ commit }) => {
   commit(types.RECEIVE_RELEASES_ERROR);
-  createFlash(__('An error occurred while fetching the releases. Please try again.'));
+  createFlash({
+    message: __('An error occurred while fetching the releases. Please try again.'),
+  });
 };
 
 export const setSorting = ({ commit }, data) => commit(types.SET_SORTING, data);

app/assets/javascripts/serverless/store/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { backOff } from '~/lib/utils/common_utils';
 import statusCodes from '~/lib/utils/http_status';
@@ -59,7 +59,9 @@ export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
     .then((data) => {
       if (data === TIMEOUT) {
         dispatch('receiveFunctionsTimeout');
-        createFlash(__('Loading functions timed out. Please reload the page to try again.'));
+        createFlash({
+          message: __('Loading functions timed out. Please reload the page to try again.'),
+        });
       } else if (data.functions !== null && data.functions.length) {
         dispatch('receiveFunctionsSuccess', data);
       } else {
@@ -68,7 +70,9 @@ export const fetchFunctions = ({ dispatch }, { functionsPath }) => {
     })
     .catch((error) => {
       dispatch('receiveFunctionsError', error);
-      createFlash(error);
+      createFlash({
+        message: error,
+      });
     });
 };
 
@@ -120,6 +124,8 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => {
     })
     .catch((error) => {
       dispatch('receiveMetricsError', error);
-      createFlash(error);
+      createFlash({
+        message: error,
+      });
     });
 };

app/assets/javascripts/single_file_diff.js

@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import FilesCommentButton from './files_comment_button';
-import { deprecatedCreateFlash as createFlash } from './flash';
+import createFlash from './flash';
 import initImageDiffHelper from './image_diff/helpers/init_image_diff';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
@@ -95,7 +95,9 @@ export default class SingleFileDiff {
         if (cb) cb();
       })
       .catch(() => {
-        createFlash(__('An error occurred while retrieving diff'));
+        createFlash({
+          message: __('An error occurred while retrieving diff'),
+        });
       });
   }
 }

app/assets/javascripts/snippets/components/snippet_blob_edit.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getBaseURL, joinPaths } from '~/lib/utils/url_utility';
 import { sprintf } from '~/locale';
@@ -63,7 +63,7 @@ export default {
         .catch((e) => this.flashAPIFailure(e));
     },
     flashAPIFailure(err) {
-      Flash(sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }));
+      createFlash({ message: sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }) });
     },
   },
 };

app/assets/javascripts/vue_shared/components/filtered_search_bar/store/modules/filters/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -24,7 +24,9 @@ export function fetchBranches({ commit, state }, search = '') {
     .catch(({ response }) => {
       const { status } = response;
       commit(types.RECEIVE_BRANCHES_ERROR, status);
-      createFlash(__('Failed to load branches. Please try again.'));
+      createFlash({
+        message: __('Failed to load branches. Please try again.'),
+      });
     });
 }
 
@@ -41,7 +43,9 @@ export const fetchMilestones = ({ commit, state }, search_title = '') => {
     .catch(({ response }) => {
       const { status } = response;
       commit(types.RECEIVE_MILESTONES_ERROR, status);
-      createFlash(__('Failed to load milestones. Please try again.'));
+      createFlash({
+        message: __('Failed to load milestones. Please try again.'),
+      });
     });
 };
 
@@ -57,7 +61,9 @@ export const fetchLabels = ({ commit, state }, search = '') => {
     .catch(({ response }) => {
       const { status } = response;
       commit(types.RECEIVE_LABELS_ERROR, status);
-      createFlash(__('Failed to load labels. Please try again.'));
+      createFlash({
+        message: __('Failed to load labels. Please try again.'),
+      });
     });
 };
 
@@ -80,7 +86,9 @@ function fetchUser(options = {}) {
     .catch(({ response }) => {
       const { status } = response;
       commit(`RECEIVE_${action}_ERROR`, status);
-      createFlash(errorMessage);
+      createFlash({
+        message: errorMessage,
+      });
     });
 }
 

spec/frontend/ci_variable_list/store/actions_spec.js

@@ -5,7 +5,7 @@ import * as actions from '~/ci_variable_list/store/actions';
 import * as types from '~/ci_variable_list/store/mutation_types';
 import getInitialState from '~/ci_variable_list/store/state';
 import { prepareDataForDisplay, prepareEnvironments } from '~/ci_variable_list/store/utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import mockData from '../services/mock_data';
 
@@ -240,7 +240,9 @@ describe('CI variable list store actions', () => {
       mock.onGet(state.endpoint).reply(500);
 
       testAction(actions.fetchVariables, {}, state, [], [{ type: 'requestVariables' }], () => {
-        expect(createFlash).toHaveBeenCalledWith('There was an error fetching the variables.');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error fetching the variables.',
+        });
         done();
       });
     });
@@ -278,9 +280,9 @@ describe('CI variable list store actions', () => {
         [],
         [{ type: 'requestEnvironments' }],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'There was an error fetching the environments information.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching the environments information.',
+          });
           done();
         },
       );

spec/frontend/create_cluster/eks_cluster/store/actions_spec.js

@@ -24,7 +24,7 @@ import {
   CREATE_CLUSTER_ERROR,
 } from '~/create_cluster/eks_cluster/store/mutation_types';
 import createState from '~/create_cluster/eks_cluster/store/state';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -358,7 +358,9 @@ describe('EKS Cluster Store Actions', () => {
       testAction(actions.createClusterError, payload, state, [
         { type: CREATE_CLUSTER_ERROR, payload },
       ]).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(payload.name[0]);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: payload.name[0],
+        });
       }));
   });
 });

spec/frontend/deploy_freeze/store/actions_spec.js

@@ -4,7 +4,7 @@ import Api from '~/api';
 import * as actions from '~/deploy_freeze/store/actions';
 import * as types from '~/deploy_freeze/store/mutation_types';
 import getInitialState from '~/deploy_freeze/store/state';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { freezePeriodsFixture, timezoneDataFixture } from '../helpers';
 
@@ -189,9 +189,9 @@ describe('deploy freeze store actions', () => {
         [{ type: types.REQUEST_FREEZE_PERIODS }],
         [],
         () =>
-          expect(createFlash).toHaveBeenCalledWith(
-            'There was an error fetching the deploy freezes.',
-          ),
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching the deploy freezes.',
+          }),
       );
     });
   });

spec/frontend/diffs/store/actions_spec.js

@@ -54,7 +54,7 @@ import {
 } from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import * as utils from '~/diffs/store/utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -293,7 +293,9 @@ describe('DiffsStoreActions', () => {
 
       testAction(fetchCoverageFiles, {}, { endpointCoverage }, [], [], () => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(expect.stringMatching('Something went wrong'));
+        expect(createFlash).toHaveBeenCalledWith({
+          message: expect.stringMatching('Something went wrong'),
+        });
         done();
       });
     });

spec/frontend/error_tracking/store/actions_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/actions';
 import * as types from '~/error_tracking/store/mutation_types';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 

spec/frontend/error_tracking/store/details/actions_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/details/actions';
 import * as types from '~/error_tracking/store/details/mutation_types';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
 

spec/frontend/error_tracking/store/list/actions_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/list/actions';
 import * as types from '~/error_tracking/store/list/mutation_types';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 

spec/frontend/grafana_integration/components/grafana_integration_spec.js

@@ -2,7 +2,7 @@ import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
 import axios from '~/lib/utils/axios_utils';
@@ -112,10 +112,10 @@ describe('grafana integration component', () => {
           .$nextTick()
           .then(jest.runAllTicks)
           .then(() =>
-            expect(createFlash).toHaveBeenCalledWith(
-              `There was an error saving your changes. ${message}`,
-              'alert',
-            ),
+            expect(createFlash).toHaveBeenCalledWith({
+              message: `There was an error saving your changes. ${message}`,
+              type: 'alert',
+            }),
           );
       });
     });

spec/frontend/ide/components/new_dropdown/modal_spec.js

 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import modal from '~/ide/components/new_dropdown/modal.vue';
 import { createStore } from '~/ide/stores';
 
@@ -182,14 +182,14 @@ describe('new file modal component', () => {
 
       vm.submitForm();
 
-      expect(createFlash).toHaveBeenCalledWith(
-        'The name "test-path/test" is already taken in this directory.',
-        'alert',
-        expect.anything(),
-        null,
-        false,
-        true,
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'The name "test-path/test" is already taken in this directory.',
+        type: 'alert',
+        parent: expect.anything(),
+        actionConfig: null,
+        fadeTransition: false,
+        addBodyClass: true,
+      });
     });
 
     it('does not throw error when target entry does not exist', () => {

spec/frontend/ide/stores/actions/merge_request_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { range } from 'lodash';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '~/ide/constants';
 import service from '~/ide/services';
 import { createStore } from '~/ide/stores';
@@ -145,7 +145,9 @@ describe('IDE store merge request actions', () => {
           .dispatch('getMergeRequestsForBranch', { projectId: TEST_PROJECT, branchId: 'bar' })
           .catch(() => {
             expect(createFlash).toHaveBeenCalled();
-            expect(createFlash.mock.calls[0][0]).toBe('Error fetching merge requests for bar');
+            expect(createFlash.mock.calls[0][0].message).toBe(
+              'Error fetching merge requests for bar',
+            );
           })
           .then(done)
           .catch(done.fail);
@@ -562,7 +564,9 @@ describe('IDE store merge request actions', () => {
 
       openMergeRequest(store, mr)
         .catch(() => {
-          expect(createFlash).toHaveBeenCalledWith(expect.any(String));
+          expect(createFlash).toHaveBeenCalledWith({
+            message: expect.any(String),
+          });
         })
         .then(done)
         .catch(done.fail);

spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import * as actions from '~/ide/stores/modules/terminal/actions/session_controls';
 import { STARTING, PENDING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants';
 import * as messages from '~/ide/stores/modules/terminal/messages';
@@ -89,7 +89,9 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveStartSessionError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STARTING);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: messages.UNEXPECTED_ERROR_STARTING,
+      });
     });
 
     it('sets session status', () => {
@@ -161,7 +163,9 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveStopSessionError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STOPPING);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: messages.UNEXPECTED_ERROR_STOPPING,
+      });
     });
 
     it('kills the session', () => {

spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import * as actions from '~/ide/stores/modules/terminal/actions/session_status';
 import { PENDING, RUNNING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants';
 import * as messages from '~/ide/stores/modules/terminal/messages';
@@ -115,7 +115,9 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveSessionStatusError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith(messages.UNEXPECTED_ERROR_STATUS);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: messages.UNEXPECTED_ERROR_STATUS,
+      });
     });
 
     it('kills the session', () => {

spec/frontend/import_entities/import_projects/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { STATUSES } from '~/import_entities/constants';
 import actionsFactory from '~/import_entities/import_projects/store/actions';
 import { getImportTarget } from '~/import_entities/import_projects/store/getters';
@@ -168,7 +168,9 @@ describe('import_projects store actions', () => {
           [],
         );
 
-        expect(createFlash).toHaveBeenCalledWith('Provider rate limit exceeded. Try again later');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Provider rate limit exceeded. Try again later',
+        });
       });
     });
 
@@ -245,7 +247,9 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith('Importing the project failed');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Importing the project failed',
+      });
     });
 
     it('commits REQUEST_IMPORT and RECEIVE_IMPORT_ERROR and shows detailed error message on an unsuccessful request with errors fields in response', async () => {
@@ -266,7 +270,9 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith(`Importing the project failed: ${ERROR_MESSAGE}`);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: `Importing the project failed: ${ERROR_MESSAGE}`,
+      });
     });
   });
 
@@ -365,7 +371,9 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith('Requesting namespaces failed');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Requesting namespaces failed',
+      });
     });
   });
 

spec/frontend/incidents_settings/components/incidents_settings_service_spec.js

 import AxiosMockAdapter from 'axios-mock-adapter';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { ERROR_MSG } from '~/incidents_settings/constants';
 import IncidentsSettingsService from '~/incidents_settings/incidents_settings_service';
 import axios from '~/lib/utils/axios_utils';
@@ -37,7 +37,10 @@ describe('IncidentsSettingsService', () => {
       mock.onPatch().reply(httpStatusCodes.BAD_REQUEST);
 
       return service.updateSettings({}).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(expect.stringContaining(ERROR_MSG), 'alert');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: expect.stringContaining(ERROR_MSG),
+          type: 'alert',
+        });
       });
     });
   });

spec/frontend/issuable/related_issues/components/related_issues_root_spec.js

@@ -6,7 +6,7 @@ import {
   issuable1,
   issuable2,
 } from 'jest/vue_shared/components/issue/related_issuable_mock_data';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
 import { linkedIssueTypesMap } from '~/related_issues/constants';
@@ -195,7 +195,9 @@ describe('RelatedIssuesRoot', () => {
         wrapper.vm.onPendingFormSubmit(input);
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
     });

spec/frontend/monitoring/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { backoffMockImplementation } from 'helpers/backoff_helper';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import statusCodes from '~/lib/utils/http_status';
@@ -257,9 +257,9 @@ describe('Monitoring store actions', () => {
               'receiveMetricsDashboardFailure',
               new Error('Request failed with status code 500'),
             );
-            expect(createFlash).toHaveBeenCalledWith(
-              expect.stringContaining(mockDashboardsErrorResponse.message),
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: expect.stringContaining(mockDashboardsErrorResponse.message),
+            });
             done();
           })
           .catch(done.fail);
@@ -1148,9 +1148,9 @@ describe('Monitoring store actions', () => {
       return testAction(fetchVariableMetricLabelValues, { defaultQueryParams }, state, [], []).then(
         () => {
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(
-            expect.stringContaining('error getting options for variable "label1"'),
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: expect.stringContaining('error getting options for variable "label1"'),
+          });
         },
       );
     });

spec/frontend/operation_settings/components/metrics_settings_spec.js

 import { GlButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 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 { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { timezones } from '~/monitoring/format_date';
@@ -203,10 +203,10 @@ describe('operation settings external dashboard component', () => {
           .$nextTick()
           .then(jest.runAllTicks)
           .then(() =>
-            expect(createFlash).toHaveBeenCalledWith(
-              `There was an error saving your changes. ${message}`,
-              'alert',
-            ),
+            expect(createFlash).toHaveBeenCalledWith({
+              message: `There was an error saving your changes. ${message}`,
+              type: 'alert',
+            }),
           );
       });
     });

spec/frontend/packages/list/stores/actions_spec.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { MISSING_DELETE_PATH_ERROR } from '~/packages/list/constants';
 import * as actions from '~/packages/list/stores/actions';
 import * as types from '~/packages/list/stores/mutation_types';
@@ -241,7 +241,9 @@ describe('Actions Package list store', () => {
     `('should reject and createFlash when $property is missing', ({ actionPayload }, done) => {
       testAction(actions.requestDeletePackage, actionPayload, null, [], []).catch((e) => {
         expect(e).toEqual(new Error(MISSING_DELETE_PATH_ERROR));
-        expect(createFlash).toHaveBeenCalledWith(DELETE_PACKAGE_ERROR_MESSAGE);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: DELETE_PACKAGE_ERROR_MESSAGE,
+        });
         done();
       });
     });

spec/frontend/pipelines/test_reports/stores/actions_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { getJSONFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/pipelines/stores/test_reports/actions';
 import * as types from '~/pipelines/stores/test_reports/mutation_types';

spec/frontend/profile/account/components/update_username_spec.js

@@ -2,7 +2,7 @@ import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 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 UpdateUsername from '~/profile/account/components/update_username.vue';
@@ -146,7 +146,9 @@ describe('UpdateUsername component', () => {
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
 
-      expect(createFlash).toBeCalledWith('Invalid username');
+      expect(createFlash).toBeCalledWith({
+        message: 'Invalid username',
+      });
     });
 
     it("shows a fallback error message if the error response doesn't have a `message` property", async () => {
@@ -156,9 +158,9 @@ describe('UpdateUsername component', () => {
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
 
-      expect(createFlash).toBeCalledWith(
-        'An error occurred while updating your username, please try again.',
-      );
+      expect(createFlash).toBeCalledWith({
+        message: 'An error occurred while updating your username, please try again.',
+      });
     });
   });
 });

spec/frontend/projects/commits/store/actions_spec.js

 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import actions from '~/projects/commits/store/actions';
 import * as types from '~/projects/commits/store/mutation_types';
 import createState from '~/projects/commits/store/state';
@@ -39,7 +39,9 @@ describe('Project commits actions', () => {
       actions.receiveAuthorsError(mockDispatchContext);
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith('An error occurred fetching the project authors.');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'An error occurred fetching the project authors.',
+      });
     });
   });
 

spec/frontend/related_merge_requests/store/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/related_merge_requests/store/actions';
 import * as types from '~/related_merge_requests/store/mutation_types';
@@ -100,7 +100,9 @@ describe('RelatedMergeRequest store actions', () => {
           [{ type: 'requestData' }, { type: 'receiveDataError' }],
           () => {
             expect(createFlash).toHaveBeenCalledTimes(1);
-            expect(createFlash).toHaveBeenCalledWith(expect.stringMatching('Something went wrong'));
+            expect(createFlash).toHaveBeenCalledWith({
+              message: expect.stringMatching('Something went wrong'),
+            });
 
             done();
           },

spec/frontend/releases/stores/modules/detail/actions_spec.js

 import { cloneDeep } from 'lodash';
 import { getJSONFixture } from 'helpers/fixtures';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { ASSET_LINK_TYPE } from '~/releases/constants';
 import createReleaseAssetLinkMutation from '~/releases/graphql/mutations/create_release_link.mutation.graphql';
@@ -151,9 +151,9 @@ describe('Release edit/new actions', () => {
         it(`shows a flash message`, () => {
           return actions.fetchRelease({ commit: jest.fn(), state, rootState: state }).then(() => {
             expect(createFlash).toHaveBeenCalledTimes(1);
-            expect(createFlash).toHaveBeenCalledWith(
-              'Something went wrong while getting the release details.',
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'Something went wrong while getting the release details.',
+            });
           });
         });
       });
@@ -352,9 +352,9 @@ describe('Release edit/new actions', () => {
             .createRelease({ commit: jest.fn(), dispatch: jest.fn(), state, getters: {} })
             .then(() => {
               expect(createFlash).toHaveBeenCalledTimes(1);
-              expect(createFlash).toHaveBeenCalledWith(
-                'Something went wrong while creating a new release.',
-              );
+              expect(createFlash).toHaveBeenCalledWith({
+                message: 'Something went wrong while creating a new release.',
+              });
             });
         });
       });
@@ -483,9 +483,9 @@ describe('Release edit/new actions', () => {
           await actions.updateRelease({ commit, dispatch, state, getters });
 
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(
-            'Something went wrong while saving the release details.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Something went wrong while saving the release details.',
+          });
         });
       });
 
@@ -503,9 +503,9 @@ describe('Release edit/new actions', () => {
             await actions.updateRelease({ commit, dispatch, state, getters });
 
             expect(createFlash).toHaveBeenCalledTimes(1);
-            expect(createFlash).toHaveBeenCalledWith(
-              'Something went wrong while saving the release details.',
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'Something went wrong while saving the release details.',
+            });
           });
         };
 

spec/frontend/snippets/components/snippet_blob_edit_spec.js

@@ -4,7 +4,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
@@ -125,9 +125,9 @@ describe('Snippet Blob Edit component', () => {
     it('should call flash', async () => {
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith(
-        "Can't fetch content for the blob: Error: Request failed with status code 500",
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: "Can't fetch content for the blob: Error: Request failed with status code 500",
+      });
     });
   });
 

spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js

 import Vue from 'vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
@@ -63,10 +63,10 @@ describe('Wip', () => {
         setImmediate(() => {
           expect(vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
-          expect(createFlash).toHaveBeenCalledWith(
-            'The merge request can now be merged.',
-            'notice',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'The merge request can now be merged.',
+            type: 'notice',
+          });
           done();
         });
       });

spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/actions_spec.js

@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { mockBranches } from 'jest/vue_shared/components/filtered_search_bar/mock_data';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import * as actions from '~/vue_shared/components/filtered_search_bar/store/modules/filters/actions';
 import * as types from '~/vue_shared/components/filtered_search_bar/store/modules/filters/mutation_types';