Merge branch '3895-mlunoe-migrate-away-from-deprecated-create-flash' into 'master'

Refactor(createFlash): use non-deprecated function

See merge request gitlab-org/gitlab!55549

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

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlButton, GlIcon } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 
@@ -77,7 +77,11 @@ export default {
     addToSlack() {
       GitlabSlackService.addToSlack(this.slackLinkPath, this.selectedProjectId)
         .then((response) => redirectTo(response.data.add_to_slack_link))
-        .catch(() => Flash(__('Unable to build Slack link.')));
+        .catch(() =>
+          createFlash({
+            message: __('Unable to build Slack link.'),
+          }),
+        );
     },
   },
 };

ee/app/assets/javascripts/analytics/code_review_analytics/store/modules/merge_requests/actions.js

 import API from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
@@ -40,7 +40,9 @@ export const fetchMergeRequests = ({ commit, state, rootState }) => {
     .catch(({ response }) => {
       const { status } = response;
       commit(types.RECEIVE_MERGE_REQUESTS_ERROR, status);
-      createFlash(__('An error occurred while loading merge requests.'));
+      createFlash({
+        message: __('An error occurred while loading merge requests.'),
+      });
     });
 };
 

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

@@ -10,7 +10,7 @@ import {
 import { debounce } from 'lodash';
 import { mapGetters } from 'vuex';
 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { DATA_REFETCH_DELAY } from '../../shared/constants';
 import { removeFlash } from '../utils';
@@ -104,7 +104,9 @@ export default {
           this.labels = data;
         })
         .catch(() => {
-          createFlash(__('There was an error fetching label data for the selected group'));
+          createFlash({
+            message: __('There was an error fetching label data for the selected group'),
+          });
         })
         .finally(() => {
           this.loading = false;

ee/app/assets/javascripts/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue

 <script>
 import { GlDropdownDivider, GlSegmentedControl, GlIcon, GlSprintf } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import {
   TASKS_BY_TYPE_FILTERS,
@@ -74,7 +74,10 @@ export default {
           s__('CycleAnalytics|Only %{maxLabels} labels can be selected at this time'),
           { maxLabels },
         );
-        createFlash(message, 'notice');
+        createFlash({
+          message,
+          type: 'notice',
+        });
       }
     },
   },

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

 <script>
 import Api from 'ee/api';
 import MetricCard from '~/analytics/shared/components/metric_card.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { sprintf, __, s__ } from '~/locale';
 import { OVERVIEW_METRICS } from '../constants';
 import { removeFlash, prepareTimeMetricsData } from '../utils';
@@ -65,14 +65,14 @@ export default {
             this.requestType === OVERVIEW_METRICS.TIME_SUMMARY
               ? __('time summary')
               : __('recent activity');
-          createFlash(
-            sprintf(
+          createFlash({
+            message: sprintf(
               s__(
                 'There was an error while fetching value stream analytics %{requestTypeName} data.',
               ),
               { requestTypeName },
             ),
-          );
+          });
         })
         .finally(() => {
           this.loading = false;

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import { __, sprintf } from '~/locale';
 import { FETCH_VALUE_STREAM_DATA, OVERVIEW_STAGE_CONFIG } from '../constants';
@@ -72,7 +72,9 @@ export const requestStageMedianValues = ({ commit }) => commit(types.REQUEST_STA
 
 export const receiveStageMedianValuesError = ({ commit }, error) => {
   commit(types.RECEIVE_STAGE_MEDIANS_ERROR, error);
-  createFlash(__('There was an error fetching median data for stages'));
+  createFlash({
+    message: __('There was an error fetching median data for stages'),
+  });
 };
 
 const fetchStageMedian = ({ groupId, valueStreamId, stageId, params }) =>
@@ -124,7 +126,9 @@ export const receiveCycleAnalyticsDataError = ({ commit }, { response = {} }) =>
 
   commit(types.RECEIVE_VALUE_STREAM_DATA_ERROR, status);
   if (status !== httpStatus.FORBIDDEN) {
-    createFlash(__('There was an error while fetching value stream analytics data.'));
+    createFlash({
+      message: __('There was an error while fetching value stream analytics data.'),
+    });
   }
 };
 
@@ -148,7 +152,9 @@ export const requestGroupStages = ({ commit }) => commit(types.REQUEST_GROUP_STA
 
 export const receiveGroupStagesError = ({ commit }, error) => {
   commit(types.RECEIVE_GROUP_STAGES_ERROR, error);
-  createFlash(__('There was an error fetching value stream analytics stages.'));
+  createFlash({
+    message: __('There was an error fetching value stream analytics stages.'),
+  });
 };
 
 export const setDefaultSelectedStage = ({ dispatch, getters, state: { featureFlags } = {} }) => {
@@ -166,7 +172,9 @@ export const setDefaultSelectedStage = ({ dispatch, getters, state: { featureFla
     ]);
   }
 
-  createFlash(__('There was an error while fetching value stream analytics data.'));
+  createFlash({
+    message: __('There was an error while fetching value stream analytics data.'),
+  });
   return Promise.resolve();
 };
 
@@ -207,12 +215,17 @@ export const fetchGroupStagesAndEvents = ({ dispatch, getters }) => {
 export const requestUpdateStage = ({ commit }) => commit(types.REQUEST_UPDATE_STAGE);
 export const receiveUpdateStageSuccess = ({ commit, dispatch }, updatedData) => {
   commit(types.RECEIVE_UPDATE_STAGE_SUCCESS);
-  createFlash(__('Stage data updated'), 'notice');
+  createFlash({
+    message: __('Stage data updated'),
+    type: 'notice',
+  });
   return Promise.resolve()
     .then(() => dispatch('fetchGroupStagesAndEvents'))
     .then(() => dispatch('customStages/showEditForm', updatedData))
     .catch(() => {
-      createFlash(__('There was a problem refreshing the data, please try again'));
+      createFlash({
+        message: __('There was a problem refreshing the data, please try again'),
+      });
     });
 };
 
@@ -228,7 +241,9 @@ export const receiveUpdateStageError = (
       ? sprintf(__(`'%{name}' stage already exists`), { name })
       : __('There was a problem saving your custom stage, please try again');
 
-  createFlash(__(message));
+  createFlash({
+    message: __(message),
+  });
   return dispatch('customStages/setStageFormErrors', errors);
 };
 
@@ -253,13 +268,18 @@ export const updateStage = ({ dispatch, getters }, { id, ...params }) => {
 export const requestRemoveStage = ({ commit }) => commit(types.REQUEST_REMOVE_STAGE);
 export const receiveRemoveStageSuccess = ({ commit, dispatch }) => {
   commit(types.RECEIVE_REMOVE_STAGE_RESPONSE);
-  createFlash(__('Stage removed'), 'notice');
+  createFlash({
+    message: __('Stage removed'),
+    type: 'notice',
+  });
   return dispatch('fetchCycleAnalyticsData');
 };
 
 export const receiveRemoveStageError = ({ commit }) => {
   commit(types.RECEIVE_REMOVE_STAGE_RESPONSE);
-  createFlash(__('There was an error removing your custom stage, please try again'));
+  createFlash({
+    message: __('There was an error removing your custom stage, please try again'),
+  });
 };
 
 export const removeStage = ({ dispatch, getters }, stageId) => {
@@ -319,7 +339,9 @@ export const receiveReorderStageSuccess = ({ commit }) =>
 
 export const receiveReorderStageError = ({ commit }) => {
   commit(types.RECEIVE_REORDER_STAGE_ERROR);
-  createFlash(__('There was an error updating the stage order. Please try reloading the page.'));
+  createFlash({
+    message: __('There was an error updating the stage order. Please try reloading the page.'),
+  });
 };
 
 export const reorderStage = ({ dispatch, getters }, initialData) => {

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/custom_stages/actions.js

 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { __, sprintf } from '~/locale';
 import { removeFlash, isStageNameExistsError } from '../../../utils';
@@ -40,13 +40,18 @@ export const clearSavingCustomStage = ({ commit }) => commit(types.CLEAR_SAVING_
 
 export const receiveCreateStageSuccess = ({ commit, dispatch }, { data: { title } }) => {
   commit(types.RECEIVE_CREATE_STAGE_SUCCESS);
-  createFlash(sprintf(__(`Your custom stage '%{title}' was created`), { title }), 'notice');
+  createFlash({
+    message: sprintf(__(`Your custom stage '%{title}' was created`), { title }),
+    type: 'notice',
+  });
 
   return Promise.resolve()
     .then(() => dispatch('fetchGroupStagesAndEvents', null, { root: true }))
     .then(() => dispatch('clearSavingCustomStage'))
     .catch(() => {
-      createFlash(__('There was a problem refreshing the data, please try again'));
+      createFlash({
+        message: __('There was a problem refreshing the data, please try again'),
+      });
     });
 };
 
@@ -61,7 +66,9 @@ export const receiveCreateStageError = (
       ? sprintf(__(`'%{name}' stage already exists`), { name })
       : __('There was a problem saving your custom stage, please try again');
 
-  createFlash(flashMessage);
+  createFlash({
+    message: flashMessage,
+  });
   return dispatch('setStageFormErrors', errors);
 };
 

ee/app/assets/javascripts/analytics/cycle_analytics/utils.js

 import dateFormat from 'dateformat';
 import { isNumber } from 'lodash';
-import { hideFlash, deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash, { hideFlash } from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import {
   newDate,
@@ -327,7 +327,9 @@ const buildDataError = ({ status = httpStatus.INTERNAL_SERVER_ERROR, error }) =>
  */
 export const flashErrorIfStatusNotOk = ({ error, message }) => {
   if (error?.errorCode !== httpStatus.OK) {
-    createFlash(message);
+    createFlash({
+      message,
+    });
   }
 };
 

ee/app/assets/javascripts/analytics/group_analytics/components/group_activity_card.vue

 <script>
 import Api from 'ee/api';
 import MetricCard from '~/analytics/shared/components/metric_card.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __, s__ } from '~/locale';
 
 export default {
@@ -54,7 +54,9 @@ export default {
           this.isLoading = false;
         })
         .catch(() => {
-          createFlash(__('Failed to load group activity metrics. Please try again.'));
+          createFlash({
+            message: __('Failed to load group activity metrics. Please try again.'),
+          });
           this.isLoading = false;
         });
     },

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

@@ -3,7 +3,7 @@ import {
   mapApprovalSettingsResponse,
   mapApprovalFallbackRuleRequest,
 } from 'ee/approvals/mappers';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from '../base/mutation_types';
@@ -21,7 +21,11 @@ export const fetchRules = ({ rootState, dispatch, commit }) => {
   return axios
     .get(settingsPath)
     .then((response) => dispatch('receiveRulesSuccess', mapApprovalSettingsResponse(response.data)))
-    .catch(() => createFlash(__('An error occurred fetching the approval rules.')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred fetching the approval rules.'),
+      }),
+    );
 };
 
 export const postRule = ({ rootState, dispatch }, rule) => {
@@ -30,7 +34,11 @@ export const postRule = ({ rootState, dispatch }, rule) => {
   return axios
     .post(rulesPath, mapApprovalRuleRequest(rule))
     .then(() => dispatch('fetchRules'))
-    .catch(() => createFlash(__('An error occurred while adding approvers')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while adding approvers'),
+      }),
+    );
 };
 
 export const putRule = ({ rootState, dispatch }, { id, ...newRule }) => {
@@ -39,7 +47,11 @@ export const putRule = ({ rootState, dispatch }, { id, ...newRule }) => {
   return axios
     .put(`${rulesPath}/${id}`, mapApprovalRuleRequest(newRule))
     .then(() => dispatch('fetchRules'))
-    .catch(() => createFlash(__('An error occurred while updating approvers')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while updating approvers'),
+      }),
+    );
 };
 
 export const deleteRule = ({ rootState, dispatch }, id) => {
@@ -48,7 +60,11 @@ export const deleteRule = ({ rootState, dispatch }, id) => {
   return axios
     .delete(`${rulesPath}/${id}`)
     .then(() => dispatch('fetchRules'))
-    .catch(() => createFlash(__('An error occurred while deleting the approvers group')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while deleting the approvers group'),
+      }),
+    );
 };
 
 export const putFallbackRule = ({ rootState, dispatch }, fallback) => {
@@ -57,5 +73,9 @@ export const putFallbackRule = ({ rootState, dispatch }, fallback) => {
   return axios
     .put(projectPath, mapApprovalFallbackRuleRequest(fallback))
     .then(() => dispatch('fetchRules'))
-    .catch(() => createFlash(__('An error occurred while deleting the approvers group')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while deleting the approvers group'),
+      }),
+    );
 };

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

 import { memoize, uniqBy, uniqueId, flatten } from 'lodash';
 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 { RULE_TYPE_ANY_APPROVER } from '../../../constants';
@@ -56,7 +56,9 @@ export const receiveRulesSuccess = ({ commit }, { resetToDefault, settings }) =>
 };
 
 export const receiveRulesError = () => {
-  createFlash(__('An error occurred fetching the approval rules.'));
+  createFlash({
+    message: __('An error occurred fetching the approval rules.'),
+  });
 };
 
 export const fetchRules = (
@@ -95,7 +97,9 @@ export const postRule = ({ commit, dispatch }, rule) =>
       dispatch('createModal/close');
     })
     .catch((e) => {
-      createFlash(__('An error occurred fetching the approvers for the new rule.'));
+      createFlash({
+        message: __('An error occurred fetching the approvers for the new rule.'),
+      });
       throw e;
     });
 
@@ -106,7 +110,9 @@ export const putRule = ({ commit, dispatch }, rule) =>
       dispatch('createModal/close');
     })
     .catch((e) => {
-      createFlash(__('An error occurred fetching the approvers for the new rule.'));
+      createFlash({
+        message: __('An error occurred fetching the approvers for the new rule.'),
+      });
       throw e;
     });
 
@@ -137,7 +143,9 @@ export const postRegularRule = ({ commit, dispatch }, rule) =>
       dispatch('createModal/close');
     })
     .catch((e) => {
-      createFlash(__('An error occurred fetching the approvers for the new rule.'));
+      createFlash({
+        message: __('An error occurred fetching the approvers for the new rule.'),
+      });
       throw e;
     });
 

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

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import {
@@ -18,7 +18,9 @@ export const receiveRulesSuccess = ({ commit }, approvalSettings) => {
 };
 
 export const receiveRulesError = () => {
-  createFlash(__('An error occurred fetching the approval rules.'));
+  createFlash({
+    message: __('An error occurred fetching the approval rules.'),
+  });
 };
 
 export const fetchRules = ({ rootState, dispatch }) => {
@@ -59,7 +61,9 @@ export const deleteRuleSuccess = ({ dispatch }) => {
 };
 
 export const deleteRuleError = () => {
-  createFlash(__('An error occurred while deleting the approvers group'));
+  createFlash({
+    message: __('An error occurred while deleting the approvers group'),
+  });
 };
 
 export const deleteRule = ({ rootState, dispatch }, id) => {

ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue

@@ -6,7 +6,7 @@ import {
   GlAvatar,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { isNumeric } from '~/lib/utils/number_utils';
 import { sprintf, s__, __ } from '~/locale';
@@ -102,7 +102,9 @@ export default {
       } else {
         message = s__('AuditLogs|Failed to find %{type}. Please try again.');
       }
-      createFlash(sprintf(message, { type }));
+      createFlash({
+        message: sprintf(message, { type }),
+      });
     },
     selectActiveItem(id) {
       this.activeItem = this.suggestions.find((u) => u.id === id);

ee/app/assets/javascripts/boards/components/board_settings_wip_limit.vue

@@ -3,7 +3,7 @@ import { GlButton, GlFormInput } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import boardsStoreEE from 'ee/boards/stores/boards_store_ee';
 import { inactiveId } from '~/boards/constants';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __, n__ } from '~/locale';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
 
@@ -84,7 +84,9 @@ export default {
           })
           .catch(() => {
             this.unsetActiveId();
-            flash(__('Something went wrong while updating your list settings'));
+            createFlash({
+              message: __('Something went wrong while updating your list settings'),
+            });
           })
           .finally(() => {
             this.resetStateAfterUpdate();
@@ -102,7 +104,9 @@ export default {
         })
         .catch(() => {
           this.unsetActiveId();
-          flash(__('Something went wrong while updating your list settings'));
+          createFlash({
+            message: __('Something went wrong while updating your list settings'),
+          });
         })
         .finally(() => {
           this.resetStateAfterUpdate();

ee/app/assets/javascripts/boards/stores/boards_store_ee.js

@@ -4,7 +4,7 @@
   modify the passed parameter in conformity with non-ee BoardsStore.
 */
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
@@ -192,7 +192,9 @@ class BoardsStoreEE {
         })
         .catch(() => {
           issue.setLoadingState('weight', false);
-          createFlash(__('An error occurred when updating the issue weight'));
+          createFlash({
+            message: __('An error occurred when updating the issue weight'),
+          });
         });
     }
   }
@@ -208,11 +210,11 @@ class BoardsStoreEE {
         this.store.state[listType] = data;
       })
       .catch(() => {
-        createFlash(
-          sprintf(__('Something went wrong while fetching %{listType} list'), {
+        createFlash({
+          message: sprintf(__('Something went wrong while fetching %{listType} list'), {
             listType,
           }),
-        );
+        });
       });
   }
 }

ee/app/assets/javascripts/burndown_chart/components/burn_charts.vue

 <script>
 import { GlAlert, GlButton, GlButtonGroup, GlSprintf } from '@gitlab/ui';
 import dateFormat from 'dateformat';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getDayDifference, nDaysAfter, newDateAsLocaleTime } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
@@ -183,7 +183,9 @@ export default {
         })
         .catch(() => {
           this.fetchedLegacyData = false;
-          createFlash(__('Error loading burndown chart data'));
+          createFlash({
+            message: __('Error loading burndown chart data'),
+          });
         });
     },
     pluckBurnupDataProperties(total, completed) {

ee/app/assets/javascripts/codequality_report/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 { s__ } from '~/locale';
 
@@ -33,6 +33,8 @@ export const fetchReport = ({ state, dispatch }) => {
     })
     .catch((error) => {
       dispatch('receiveReportError', error);
-      createFlash(s__('ciReport|There was an error fetching the codequality report.'));
+      createFlash({
+        message: s__('ciReport|There was an error fetching the codequality report.'),
+      });
     });
 };

ee/app/assets/javascripts/dependencies/store/modules/list/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -50,7 +50,9 @@ export const fetchDependencies = ({ state, dispatch }, params = {}) => {
     })
     .catch((error) => {
       dispatch('receiveDependenciesError', error);
-      createFlash(FETCH_ERROR_MESSAGE);
+      createFlash({
+        message: FETCH_ERROR_MESSAGE,
+      });
     });
 };
 

ee/app/assets/javascripts/epic/components/epic_form.vue

@@ -7,7 +7,7 @@ import {
   GlFormGroup,
   GlFormInput,
 } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -80,7 +80,9 @@ export default {
         .then(({ data }) => {
           const { errors, epic } = data.createEpic;
           if (errors?.length > 0) {
-            createFlash(errors[0]);
+            createFlash({
+              message: errors[0],
+            });
             this.loading = false;
             return;
           }
@@ -89,7 +91,9 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          createFlash(s__('Epics|Unable to save epic. Please try again'));
+          createFlash({
+            message: s__('Epics|Unable to save epic. Please try again'),
+          });
         });
     },
     updateDueDate(val) {

ee/app/assets/javascripts/epic/store/actions.js

 import epicDetailsQuery from 'shared_queries/epic/epic_details.query.graphql';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 
 import axios from '~/lib/utils/axios_utils';
@@ -42,7 +42,9 @@ export const fetchEpicDetails = ({ state, dispatch }) => {
 };
 
 export const requestEpicParticipantsFailure = () => {
-  flash(__('There was an error getting the epic participants.'));
+  createFlash({
+    message: __('There was an error getting the epic participants.'),
+  });
 };
 
 export const requestEpicStatusChange = ({ commit }) => commit(types.REQUEST_EPIC_STATUS_CHANGE);
@@ -52,7 +54,9 @@ export const requestEpicStatusChangeSuccess = ({ commit }, data) =>
 
 export const requestEpicStatusChangeFailure = ({ commit }) => {
   commit(types.REQUEST_EPIC_STATUS_CHANGE_FAILURE);
-  flash(__('Unable to update this epic at this time.'));
+  createFlash({
+    message: __('Unable to update this epic at this time.'),
+  });
 };
 
 export const triggerIssuableEvent = (_, { isEpicOpen }) => {
@@ -106,9 +110,13 @@ export const requestEpicTodoToggleFailure = ({ commit, state }, data) => {
   commit(types.REQUEST_EPIC_TODO_TOGGLE_FAILURE, data);
 
   if (state.todoExists) {
-    flash(__('There was an error deleting the To Do.'));
+    createFlash({
+      message: __('There was an error deleting the To Do.'),
+    });
   } else {
-    flash(__('There was an error adding a To Do.'));
+    createFlash({
+      message: __('There was an error adding a To Do.'),
+    });
   }
 };
 export const triggerTodoToggleEvent = (_, { count }) => {
@@ -150,11 +158,11 @@ export const requestEpicDateSaveSuccess = ({ commit }, data) =>
   commit(types.REQUEST_EPIC_DATE_SAVE_SUCCESS, data);
 export const requestEpicDateSaveFailure = ({ commit }, data) => {
   commit(types.REQUEST_EPIC_DATE_SAVE_FAILURE, data);
-  flash(
-    sprintf(s__('Epics|An error occurred while saving the %{epicDateType} date'), {
+  createFlash({
+    message: sprintf(s__('Epics|An error occurred while saving the %{epicDateType} date'), {
       epicDateType: dateTypes.start === data.dateType ? s__('Epics|start') : s__('Epics|due'),
     }),
-  );
+  });
 };
 export const saveDate = ({ state, dispatch }, { dateType, dateTypeIsFixed, newDate }) => {
   const updateEpicInput = {
@@ -207,7 +215,9 @@ export const receiveEpicLabelsSelectSuccess = ({ commit }, labels) =>
   commit(types.RECEIVE_EPIC_LABELS_SELECT_SUCCESS, labels);
 export const receiveEpicLabelsSelectFailure = ({ commit }) => {
   commit(types.RECEIVE_EPIC_LABELS_SELECT_FAILURE);
-  flash(s__('Epics|An error occurred while updating labels.'));
+  createFlash({
+    message: s__('Epics|An error occurred while updating labels.'),
+  });
 };
 export const updateEpicLabels = ({ dispatch, state }, labels) => {
   const addLabelIds = labels.filter((label) => label.set).map((label) => label.id);
@@ -250,9 +260,13 @@ export const requestEpicSubscriptionToggleSuccess = ({ commit }, data) =>
 export const requestEpicSubscriptionToggleFailure = ({ commit, state }) => {
   commit(types.REQUEST_EPIC_SUBSCRIPTION_TOGGLE_FAILURE);
   if (state.subscribed) {
-    flash(__('An error occurred while unsubscribing to notifications.'));
+    createFlash({
+      message: __('An error occurred while unsubscribing to notifications.'),
+    });
   } else {
-    flash(__('An error occurred while subscribing to notifications.'));
+    createFlash({
+      message: __('An error occurred while subscribing to notifications.'),
+    });
   }
 };
 export const toggleEpicSubscription = ({ state, dispatch }) => {
@@ -293,7 +307,9 @@ export const requestEpicCreate = ({ commit }) => commit(types.REQUEST_EPIC_CREAT
 export const requestEpicCreateSuccess = (_, webUrl) => visitUrl(webUrl);
 export const requestEpicCreateFailure = ({ commit }) => {
   commit(types.REQUEST_EPIC_CREATE_FAILURE);
-  flash(s__('Error creating epic'));
+  createFlash({
+    message: s__('Error creating epic'),
+  });
 };
 export const createEpic = ({ state, dispatch }) => {
   dispatch('requestEpicCreate');

ee/app/assets/javascripts/geo_node_form/store/actions.js

 import { flatten } from 'lodash';
 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -21,7 +21,9 @@ export const requestSyncNamespaces = ({ commit }) => commit(types.REQUEST_SYNC_N
 export const receiveSyncNamespacesSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_SYNC_NAMESPACES_SUCCESS, data);
 export const receiveSyncNamespacesError = ({ commit }) => {
-  createFlash(__("There was an error fetching the Node's Groups"));
+  createFlash({
+    message: __("There was an error fetching the Node's Groups"),
+  });
   commit(types.RECEIVE_SYNC_NAMESPACES_ERROR);
 };
 
@@ -49,7 +51,9 @@ export const receiveSaveGeoNodeError = ({ commit }, data) => {
     errorMessage += ` ${getSaveErrorMessage(data.message)}`;
   }
 
-  createFlash(errorMessage);
+  createFlash({
+    message: errorMessage,
+  });
   commit(types.RECEIVE_SAVE_GEO_NODE_COMPLETE);
 };
 

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

 <script>
 import { GlLoadingIcon, GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { __, s__ } from '~/locale';
 import SmartInterval from '~/smart_interval';
@@ -96,7 +96,9 @@ export default {
         })
         .catch(() => {
           this.isLoading = false;
-          Flash(s__('GeoNodes|Something went wrong while fetching nodes'));
+          createFlash({
+            message: s__('GeoNodes|Something went wrong while fetching nodes'),
+          });
         });
     },
     fetchNodeDetails(node) {
@@ -135,7 +137,9 @@ export default {
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
-          Flash(s__('GeoNodes|Something went wrong while repairing node'));
+          createFlash({
+            message: s__('GeoNodes|Something went wrong while repairing node'),
+          });
         });
     },
     toggleNode(targetNode) {
@@ -151,7 +155,9 @@ export default {
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
-          Flash(s__('GeoNodes|Something went wrong while changing node status'));
+          createFlash({
+            message: s__('GeoNodes|Something went wrong while changing node status'),
+          });
         });
     },
     removeNode(targetNode) {
@@ -164,7 +170,9 @@ export default {
         })
         .catch(() => {
           this.setNodeActionStatus(targetNode, false);
-          Flash(s__('GeoNodes|Something went wrong while removing node'));
+          createFlash({
+            message: s__('GeoNodes|Something went wrong while removing node'),
+          });
         });
     },
     handleNodeAction() {

ee/app/assets/javascripts/geo_replicable/store/actions.js

 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import {
   parseIntPagination,
   normalizeHeaders,
@@ -17,11 +17,11 @@ export const requestReplicableItems = ({ commit }) => commit(types.REQUEST_REPLI
 export const receiveReplicableItemsSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_REPLICABLE_ITEMS_SUCCESS, data);
 export const receiveReplicableItemsError = ({ state, commit }) => {
-  createFlash(
-    sprintf(__('There was an error fetching the %{replicableType}'), {
+  createFlash({
+    message: sprintf(__('There was an error fetching the %{replicableType}'), {
       replicableType: state.replicableType,
     }),
-  );
+  });
   commit(types.RECEIVE_REPLICABLE_ITEMS_ERROR);
 };
 
@@ -115,11 +115,11 @@ export const receiveInitiateAllReplicableSyncsSuccess = (
   dispatch('fetchReplicableItems');
 };
 export const receiveInitiateAllReplicableSyncsError = ({ state, commit }) => {
-  createFlash(
-    sprintf(__('There was an error syncing the %{replicableType}'), {
+  createFlash({
+    message: sprintf(__('There was an error syncing the %{replicableType}'), {
       replicableType: state.replicableType,
     }),
-  );
+  });
   commit(types.RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_ERROR);
 };
 
@@ -142,7 +142,9 @@ export const receiveInitiateReplicableSyncSuccess = ({ commit, dispatch }, { nam
   dispatch('fetchReplicableItems');
 };
 export const receiveInitiateReplicableSyncError = ({ commit }, { name }) => {
-  createFlash(sprintf(__('There was an error syncing project %{name}'), { name }));
+  createFlash({
+    message: sprintf(__('There was an error syncing project %{name}'), { name }),
+  });
   commit(types.RECEIVE_INITIATE_REPLICABLE_SYNC_ERROR);
 };
 

ee/app/assets/javascripts/geo_settings/store/actions.js

 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
 
@@ -13,7 +13,9 @@ export const fetchGeoSettings = ({ commit }) => {
       });
     })
     .catch(() => {
-      createFlash(__('There was an error fetching the Geo Settings'));
+      createFlash({
+        message: __('There was an error fetching the Geo Settings'),
+      });
       commit(types.RECEIVE_GEO_SETTINGS_ERROR);
     });
 };
@@ -31,7 +33,9 @@ export const updateGeoSettings = ({ commit, state }) => {
       });
     })
     .catch(() => {
-      createFlash(__('There was an error updating the Geo Settings'));
+      createFlash({
+        message: __('There was an error updating the Geo Settings'),
+      });
       commit(types.RECEIVE_UPDATE_GEO_SETTINGS_ERROR);
     });
 };

ee/app/assets/javascripts/group_member_contributions/store/group_member_store.js

-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -75,7 +75,9 @@ export default class GroupMemberStore {
       })
       .catch((e) => {
         this.state.isLoading = false;
-        Flash(__('Something went wrong while fetching group member contributions'));
+        createFlash({
+          message: __('Something went wrong while fetching group member contributions'),
+        });
         throw e;
       });
   }

ee/app/assets/javascripts/insights/stores/modules/insights/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -10,7 +10,9 @@ export const receiveConfigSuccess = ({ commit }, data) =>
 export const receiveConfigError = ({ commit }, errorMessage) => {
   const error = errorMessage || __('Unknown Error');
   const message = `${__('There was an error fetching configuration for charts')}: ${error}`;
-  createFlash(message);
+  createFlash({
+    message,
+  });
   commit(types.RECEIVE_CONFIG_ERROR);
 };
 
@@ -51,7 +53,9 @@ export const fetchChartData = ({ dispatch }, { endpoint, chart }) =>
       if (error.response.data && error.response.data.message) {
         message += `: ${error.response.data.message}`;
       }
-      createFlash(message);
+      createFlash({
+        message,
+      });
       dispatch('receiveChartDataError', { chart, error: message });
     });
 
@@ -65,7 +69,9 @@ export const setActiveTab = ({ commit, state }, key) => {
       commit(types.SET_ACTIVE_TAB, key);
       commit(types.SET_ACTIVE_PAGE, page);
     } else {
-      createFlash(__('The specified tab is invalid, please select another'));
+      createFlash({
+        message: __('The specified tab is invalid, please select another'),
+      });
     }
   }
 };

ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue

@@ -12,7 +12,7 @@ import {
   GlLabel,
 } from '@gitlab/ui';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getDayDifference } from '~/lib/utils/datetime_utility';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -120,7 +120,9 @@ export default {
           this.isLoading = false;
         })
         .catch(() => {
-          createFlash(s__('IssueAnalytics|Failed to load issues. Please try again.'));
+          createFlash({
+            message: s__('IssueAnalytics|Failed to load issues. Please try again.'),
+          });
           this.isLoading = false;
         });
     },

ee/app/assets/javascripts/issues_analytics/stores/modules/issue_analytics/actions.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import service from '../../../services/issue_analytics_service';
 import * as types from './mutation_types';
@@ -19,5 +19,9 @@ export const fetchChartData = ({ commit, dispatch, getters }, endpoint) => {
     .then((res) => res.data)
     .then((data) => commit(types.SET_CHART_DATA, data))
     .then(() => dispatch('setLoadingState', false))
-    .catch(() => flash(__('An error occurred while loading chart data')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while loading chart data'),
+      }),
+    );
 };

ee/app/assets/javascripts/iterations/components/iteration_form.vue

 <script>
 import { GlButton, GlForm, GlFormInput } from '@gitlab/ui';
 import DueDateSelectors from '~/due_date_select';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -90,7 +90,9 @@ export default {
           const { errors, iteration } = data.createIteration;
           if (errors.length > 0) {
             this.loading = false;
-            createFlash(errors[0]);
+            createFlash({
+              message: errors[0],
+            });
             return;
           }
 
@@ -98,7 +100,9 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          createFlash(__('Unable to save iteration. Please try again'));
+          createFlash({
+            message: __('Unable to save iteration. Please try again'),
+          });
         });
     },
     updateIteration() {
@@ -115,14 +119,18 @@ export default {
         .then(({ data }) => {
           const { errors } = data.updateIteration;
           if (errors.length > 0) {
-            createFlash(errors[0]);
+            createFlash({
+              message: errors[0],
+            });
             return;
           }
 
           this.$emit('updated');
         })
         .catch(() => {
-          createFlash(__('Unable to save iteration. Please try again'));
+          createFlash({
+            message: __('Unable to save iteration. Please try again'),
+          });
         })
         .finally(() => {
           this.loading = false;

ee/app/assets/javascripts/license_compliance/store/modules/list/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -46,5 +46,7 @@ export const receiveLicensesSuccess = ({ commit }, { headers, data }) => {
 
 export const receiveLicensesError = ({ commit }) => {
   commit(types.RECEIVE_LICENSES_ERROR);
-  createFlash(FETCH_ERROR_MESSAGE);
+  createFlash({
+    message: FETCH_ERROR_MESSAGE,
+  });
 };

ee/app/assets/javascripts/pages/groups/saml_providers/saml_members/store/actions.js

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -22,6 +22,8 @@ export function fetchPage({ commit, state }, newPage) {
       });
     })
     .catch(() => {
-      createFlash(__('An error occurred while loading group members.'));
+      createFlash({
+        message: __('An error occurred while loading group members.'),
+      });
     });
 }

ee/app/assets/javascripts/pages/projects/settings/repository/show/ee_mirror_repos.js

 import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { loadCSSFile } from '~/lib/utils/css_utils';
 import { __ } from '~/locale';
 import MirrorRepos from '~/mirrors/mirror_repos';
@@ -32,7 +32,9 @@ export default class EEMirrorRepos extends MirrorRepos {
         this.showForm();
       })
       .catch(() => {
-        Flash(__('Something went wrong on our end.'));
+        createFlash({
+          message: __('Something went wrong on our end.'),
+        });
       });
   }
 

ee/app/assets/javascripts/pages/trial_registrations/new/username_suggester.js

 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -66,7 +66,9 @@ export default class UsernameSuggester {
         this.usernameElement.value = data.username;
       })
       .catch(() => {
-        Flash(__('An error occurred while generating a username. Please try again.'));
+        createFlash({
+          message: __('An error occurred while generating a username. Please try again.'),
+        });
       })
       .finally(() => {
         this.isLoading = false;

ee/app/assets/javascripts/pages/trials/country_select.js

 import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -21,5 +21,9 @@ if (selectElement?.dataset) {
       });
       $(selectElement).val(selectedOption).trigger('change.select2');
     })
-    .catch(() => new Flash(__('Error loading countries data.')));
+    .catch(() =>
+      createFlash({
+        message: __('Error loading countries data.'),
+      }),
+    );
 }

ee/app/assets/javascripts/path_locks.js

 import $ from 'jquery';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { sprintf, __ } from '~/locale';
 
@@ -25,6 +25,10 @@ export default function initPathLocks(url, path) {
       .then(() => {
         window.location.reload();
       })
-      .catch(() => flash(__('An error occurred while initializing path locks')));
+      .catch(() =>
+        createFlash({
+          message: __('An error occurred while initializing path locks'),
+        }),
+      );
   });
 }

ee/app/assets/javascripts/protected_environments/protected_environment_create.js

 import $ from 'jquery';
 import CreateItemDropdown from '~/create_item_dropdown';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import AccessorUtilities from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -67,7 +67,9 @@ export default class ProtectedEnvironmentCreate {
         callback(results);
       })
       .catch(() => {
-        Flash(__('An error occurred while fetching environments.'));
+        createFlash({
+          message: __('An error occurred while fetching environments.'),
+        });
         callback([]);
       });
   }
@@ -115,6 +117,10 @@ export default class ProtectedEnvironmentCreate {
         window.location.hash = 'js-protected-environments-settings';
         window.location.reload();
       })
-      .catch(() => Flash(__('Failed to protect the environment')));
+      .catch(() =>
+        createFlash({
+          message: __('Failed to protect the environment'),
+        }),
+      );
   }
 }

ee/app/assets/javascripts/protected_environments/protected_environment_edit.js

 import $ from 'jquery';
 import { find } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import AccessDropdown from '~/projects/settings/access_dropdown';
@@ -70,7 +70,11 @@ export default class ProtectedEnvironmentEdit {
       })
       .catch(() => {
         this.$allowedToDeployDropdown.enable();
-        Flash(__('Failed to update environment!'), null, $('.js-protected-environments-list'));
+        createFlash({
+          message: __('Failed to update environment!'),
+          type: null,
+          parent: $('.js-protected-environments-list'),
+        });
       });
   }
 

ee/app/assets/javascripts/protected_tags/protected_tag_create.js

 import $ from 'jquery';
 import CreateItemDropdown from '~/create_item_dropdown';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { s__, __ } from '~/locale';
 import AccessDropdown from '~/projects/settings/access_dropdown';
@@ -98,6 +98,10 @@ export default class ProtectedTagCreate {
       .then(() => {
         window.location.reload();
       })
-      .catch(() => createFlash(s__('ProjectSettings|Failed to protect the tag')));
+      .catch(() =>
+        createFlash({
+          message: s__('ProjectSettings|Failed to protect the tag'),
+        }),
+      );
   }
 }

ee/app/assets/javascripts/protected_tags/protected_tag_edit.js

 import { find } from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import AccessDropdown from '~/projects/settings/access_dropdown';
 import { FAILED_TO_UPDATE_TAG_MESSAGE } from '~/protected_tags/constants';
@@ -67,7 +67,9 @@ export default class ProtectedTagEdit {
       })
       .catch(() => {
         window.scrollTo({ top: 0, behavior: 'smooth' });
-        createFlash(FAILED_TO_UPDATE_TAG_MESSAGE);
+        createFlash({
+          message: FAILED_TO_UPDATE_TAG_MESSAGE,
+        });
       });
   }
 

ee/app/assets/javascripts/related_items_tree/store/actions.js

 import Api from 'ee/api';
 import epicChildren from 'shared_queries/epic/epic_children.query.graphql';
-import { deprecatedCreateFlash as flash } 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,7 +75,9 @@ export const setIssuePageInfo = ({ commit }, data) => commit(types.SET_ISSUE_PAG
 export const requestItems = ({ commit }, data) => commit(types.REQUEST_ITEMS, data);
 export const receiveItemsSuccess = ({ commit }, data) => commit(types.RECEIVE_ITEMS_SUCCESS, data);
 export const receiveItemsFailure = ({ commit }, data) => {
-  flash(s__('Epics|Something went wrong while fetching child epics.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while fetching child epics.'),
+  });
   commit(types.RECEIVE_ITEMS_FAILURE, data);
 };
 export const fetchItems = ({ dispatch }, { parentItem, isSubItem = false }) => {
@@ -135,7 +137,9 @@ export const fetchItems = ({ dispatch }, { parentItem, isSubItem = false }) => {
 };
 
 export const receiveNextPageItemsFailure = () => {
-  flash(s__('Epics|Something went wrong while fetching child epics.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while fetching child epics.'),
+  });
 };
 export const fetchNextPageItems = ({ dispatch, state }, { parentItem, isSubItem = false }) => {
   const { iid, fullPath } = parentItem;
@@ -224,11 +228,12 @@ export const receiveRemoveItemSuccess = ({ commit }, data) =>
 export const receiveRemoveItemFailure = ({ commit }, { item, status }) => {
   commit(types.RECEIVE_REMOVE_ITEM_FAILURE, item);
   const issuableType = issuableTypesMap[item.type.toUpperCase()];
-  flash(
-    status === httpStatusCodes.NOT_FOUND
-      ? pathIndeterminateErrorMap[issuableType]
-      : relatedIssuesRemoveErrorMap[issuableType],
-  );
+  createFlash({
+    message:
+      status === httpStatusCodes.NOT_FOUND
+        ? pathIndeterminateErrorMap[issuableType]
+        : relatedIssuesRemoveErrorMap[issuableType],
+  });
 };
 export const removeItem = ({ dispatch }, { parentItem, item }) => {
   dispatch('requestRemoveItem', {
@@ -383,7 +388,9 @@ export const receiveCreateItemSuccess = ({ state, commit, dispatch, getters }, {
 };
 export const receiveCreateItemFailure = ({ commit }) => {
   commit(types.RECEIVE_CREATE_ITEM_FAILURE);
-  flash(s__('Epics|Something went wrong while creating child epics.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while creating child epics.'),
+  });
 };
 export const createItem = ({ state, dispatch }, { itemTitle, groupFullPath }) => {
   dispatch('requestCreateItem');
@@ -415,7 +422,9 @@ export const createItem = ({ state, dispatch }, { itemTitle, groupFullPath }) =>
 
 export const receiveReorderItemFailure = ({ commit }, data) => {
   commit(types.REORDER_ITEM, data);
-  flash(s__('Epics|Something went wrong while ordering item.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while ordering item.'),
+  });
 };
 export const reorderItem = (
   { dispatch, commit },
@@ -460,7 +469,9 @@ export const reorderItem = (
 
 export const receiveMoveItemFailure = ({ commit }, data) => {
   commit(types.MOVE_ITEM_FAILURE, data);
-  flash(s__('Epics|Something went wrong while moving item.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while moving item.'),
+  });
 };
 
 export const moveItem = (
@@ -540,7 +551,9 @@ export const receiveCreateIssueSuccess = ({ commit }) =>
   commit(types.RECEIVE_CREATE_ITEM_SUCCESS, { insertAt: 0, items: [] });
 export const receiveCreateIssueFailure = ({ commit }) => {
   commit(types.RECEIVE_CREATE_ITEM_FAILURE);
-  flash(s__('Epics|Something went wrong while creating issue.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while creating issue.'),
+  });
 };
 export const createNewIssue = ({ state, dispatch }, { issuesEndpoint, title }) => {
   const { parentItem } = state;
@@ -568,7 +581,9 @@ export const receiveProjectsSuccess = ({ commit }, data) =>
   commit(types.RECIEVE_PROJECTS_SUCCESS, data);
 export const receiveProjectsFailure = ({ commit }) => {
   commit(types.RECIEVE_PROJECTS_FAILURE);
-  flash(__('Something went wrong while fetching projects.'));
+  createFlash({
+    message: __('Something went wrong while fetching projects.'),
+  });
 };
 export const fetchProjects = ({ state, dispatch }, searchKey = '') => {
   const params = {

ee/app/assets/javascripts/repository/index.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import initTree from '~/repository';
@@ -34,7 +34,9 @@ export default () => {
         .then(() => window.location.reload())
         .catch(() => {
           toggleBtn.removeAttribute('disabled');
-          createFlash(__('An error occurred while initializing path locks'));
+          createFlash({
+            message: __('An error occurred while initializing path locks'),
+          });
         });
     });
   }

ee/app/assets/javascripts/roadmap/store/actions.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { s__ } from '~/locale';
 
 import { EXTEND_AS } from '../constants';
@@ -119,7 +119,9 @@ export const receiveEpicsSuccess = (
 };
 export const receiveEpicsFailure = ({ commit }) => {
   commit(types.RECEIVE_EPICS_FAILURE);
-  flash(s__('GroupRoadmap|Something went wrong while fetching epics'));
+  createFlash({
+    message: s__('GroupRoadmap|Something went wrong while fetching epics'),
+  });
 };
 
 export const requestChildrenEpics = ({ commit }, { parentItemId }) => {
@@ -335,7 +337,9 @@ export const receiveMilestonesSuccess = (
 
 export const receiveMilestonesFailure = ({ commit }) => {
   commit(types.RECEIVE_MILESTONES_FAILURE);
-  flash(s__('GroupRoadmap|Something went wrong while fetching milestones'));
+  createFlash({
+    message: s__('GroupRoadmap|Something went wrong while fetching milestones'),
+  });
 };
 
 export const refreshMilestoneDates = ({ commit, state }) => {

ee/app/assets/javascripts/saml_providers/scim_token_toggle_area.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import SCIMTokenService from './scim_token_service';
 
@@ -72,7 +72,9 @@ export default class SCIMTokenToggleArea {
         this.setTokenAndToggleSCIMForm(response.data);
       })
       .catch((error) => {
-        createFlash(error);
+        createFlash({
+          message: error,
+        });
         this.toggleLoading();
         this.toggleFormVisibility(container);
 

ee/app/assets/javascripts/security_configuration/components/auto_fix_settings.vue

 <script>
 import { GlIcon, GlLink, GlCard, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -77,9 +77,11 @@ export default {
         })
         .catch((e) => {
           Sentry.captureException(e);
-          createFlash(
-            __('Something went wrong while toggling auto-fix settings, please try again later.'),
-          );
+          createFlash({
+            message: __(
+              'Something went wrong while toggling auto-fix settings, please try again later.',
+            ),
+          });
           this.isChecked = !enabled;
         })
         .finally(() => {

ee/app/assets/javascripts/security_dashboard/components/csv_export_button.vue

 <script>
 import { GlPopover, GlIcon, GlLink, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import AccessorUtils from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -62,7 +62,9 @@ export default {
           });
         })
         .catch(() => {
-          createFlash(s__('SecurityReports|There was an error while generating the report.'));
+          createFlash({
+            message: s__('SecurityReports|There was an error while generating the report.'),
+          });
         })
         .finally(() => {
           this.isPreparingCsvExport = false;

ee/app/assets/javascripts/security_dashboard/components/first_class_project_manager/project_manager.vue

@@ -6,7 +6,7 @@ import deleteProjectFromSecurityDashboard from 'ee/security_dashboard/graphql/mu
 import projectsQuery from 'ee/security_dashboard/graphql/queries/get_instance_security_dashboard_projects.query.graphql';
 import getProjects from 'ee/security_dashboard/graphql/queries/get_projects.query.graphql';
 import { createInvalidProjectMessage } from 'ee/security_dashboard/utils/first_class_project_manager_utils';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { __, s__, sprintf } from '~/locale';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 import ProjectList from './project_list.vue';
@@ -136,7 +136,9 @@ export default {
               },
             );
 
-            createFlash(errorMessages.join('<br/>'));
+            createFlash({
+              message: errorMessages.join('<br/>'),
+            });
           }
         })
         .finally(() => {
@@ -167,7 +169,11 @@ export default {
         .then(() => {
           this.$emit('handleProjectManipulation', false);
         })
-        .catch(() => createFlash(__('Something went wrong, unable to delete project')));
+        .catch(() =>
+          createFlash({
+            message: __('Something went wrong, unable to delete project'),
+          }),
+        );
     },
     searched(query) {
       this.searchQuery = query;

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

 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__, sprintf } from '~/locale';
 import * as types from './mutation_types';
@@ -76,11 +76,11 @@ export const receiveAddProjectsSuccess = ({ commit, dispatch, state }, data) =>
     } else {
       invalidProjects = firstProject;
     }
-    createFlash(
-      sprintf(s__('SecurityReports|Unable to add %{invalidProjects}'), {
+    createFlash({
+      message: sprintf(s__('SecurityReports|Unable to add %{invalidProjects}'), {
         invalidProjects,
       }),
-    );
+    });
   }
 
   if (added.length) {
@@ -91,7 +91,9 @@ export const receiveAddProjectsSuccess = ({ commit, dispatch, state }, data) =>
 export const receiveAddProjectsError = ({ commit }) => {
   commit(types.RECEIVE_ADD_PROJECTS_ERROR);
 
-  createFlash(__('Something went wrong, unable to add projects to dashboard'));
+  createFlash({
+    message: __('Something went wrong, unable to add projects to dashboard'),
+  });
 };
 
 export const fetchProjects = ({ state, dispatch }) => {
@@ -116,7 +118,9 @@ export const receiveProjectsSuccess = ({ commit }, { projects }) => {
 export const receiveProjectsError = ({ commit }) => {
   commit(types.RECEIVE_PROJECTS_ERROR);
 
-  createFlash(__('Something went wrong, unable to get projects'));
+  createFlash({
+    message: __('Something went wrong, unable to get projects'),
+  });
 };
 
 export const removeProject = ({ dispatch }, removePath) => {
@@ -142,7 +146,9 @@ export const receiveRemoveProjectSuccess = ({ commit, dispatch }) => {
 export const receiveRemoveProjectError = ({ commit }) => {
   commit(types.RECEIVE_REMOVE_PROJECT_ERROR);
 
-  createFlash(__('Something went wrong, unable to delete project'));
+  createFlash({
+    message: __('Something went wrong, unable to delete project'),
+  });
 };
 
 export const fetchSearchResults = ({ state, dispatch, commit }) => {

ee/app/assets/javascripts/security_dashboard/store/modules/unscanned_projects/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 { __ } from '~/locale';
@@ -31,7 +31,9 @@ export const receiveUnscannedProjectsSuccess = ({ commit }, payload) => {
 };
 
 export const receiveUnscannedProjectsError = ({ commit }) => {
-  createFlash(__('Unable to fetch unscanned projects'));
+  createFlash({
+    message: __('Unable to fetch unscanned projects'),
+  });
 
   commit(RECEIVE_UNSCANNED_PROJECTS_ERROR);
 };

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

 import _ from 'lodash';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import download from '~/lib/utils/downloader';
@@ -125,11 +125,11 @@ export const receiveCreateIssueError = ({ commit }, { flashError }) => {
   commit(types.RECEIVE_CREATE_ISSUE_ERROR);
 
   if (flashError) {
-    createFlash(
-      s__('SecurityReports|There was an error creating the issue.'),
-      'alert',
-      document.querySelector('.ci-table'),
-    );
+    createFlash({
+      message: s__('SecurityReports|There was an error creating the issue.'),
+      type: 'alert',
+      parent: document.querySelector('.ci-table'),
+    });
   }
 };
 
@@ -197,11 +197,11 @@ export const receiveDismissSelectedVulnerabilitiesSuccess = ({ commit, getters }
 export const receiveDismissSelectedVulnerabilitiesError = ({ commit }, { flashError }) => {
   commit(types.RECEIVE_DISMISS_SELECTED_VULNERABILITIES_ERROR);
   if (flashError) {
-    createFlash(
-      s__('SecurityReports|There was an error dismissing the vulnerabilities.'),
-      'alert',
-      document.querySelector('.ci-table'),
-    );
+    createFlash({
+      message: s__('SecurityReports|There was an error dismissing the vulnerabilities.'),
+      type: 'alert',
+      parent: document.querySelector('.ci-table'),
+    });
   }
 };
 
@@ -284,11 +284,11 @@ export const receiveDismissVulnerabilitySuccess = ({ commit }, payload) => {
 export const receiveDismissVulnerabilityError = ({ commit }, { flashError }) => {
   commit(types.RECEIVE_DISMISS_VULNERABILITY_ERROR);
   if (flashError) {
-    createFlash(
-      s__('SecurityReports|There was an error dismissing the vulnerability.'),
-      'alert',
-      document.querySelector('.ci-table'),
-    );
+    createFlash({
+      message: s__('SecurityReports|There was an error dismissing the vulnerability.'),
+      type: 'alert',
+      parent: document.querySelector('.ci-table'),
+    });
   }
 };
 
@@ -407,11 +407,11 @@ export const receiveUndoDismissSuccess = ({ commit }, payload) => {
 export const receiveUndoDismissError = ({ commit }, { flashError }) => {
   commit(types.RECEIVE_REVERT_DISMISSAL_ERROR);
   if (flashError) {
-    createFlash(
-      s__('SecurityReports|There was an error reverting this dismissal.'),
-      'alert',
-      document.querySelector('.ci-table'),
-    );
+    createFlash({
+      message: s__('SecurityReports|There was an error reverting this dismissal.'),
+      type: 'alert',
+      parent: document.querySelector('.ci-table'),
+    });
   }
 };
 
@@ -475,11 +475,11 @@ export const receiveCreateMergeRequestError = ({ commit }, { flashError }) => {
   commit(types.RECEIVE_CREATE_MERGE_REQUEST_ERROR);
 
   if (flashError) {
-    createFlash(
-      s__('SecurityReports|There was an error creating the merge request.'),
-      'alert',
-      document.querySelector('.ci-table'),
-    );
+    createFlash({
+      message: s__('SecurityReports|There was an error creating the merge request.'),
+      type: 'alert',
+      parent: document.querySelector('.ci-table'),
+    });
   }
 };
 

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

 import axios from 'axios';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -34,7 +34,9 @@ export const receiveProjectsSuccess = ({ commit }, payload) => {
 };
 
 export const receiveProjectsError = ({ commit }) => {
-  createFlash(__('Unable to fetch vulnerable projects'));
+  createFlash({
+    message: __('Unable to fetch vulnerable projects'),
+  });
 
   commit(SET_HAS_ERROR, true);
 };

ee/app/assets/javascripts/sidebar/components/status/sidebar_status.vue

 <script>
 import { mapGetters } from 'vuex';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { OPENED, REOPENED } from '~/notes/constants';
 import Status from './status.vue';
@@ -27,7 +27,9 @@ export default {
   methods: {
     handleDropdownClick(status) {
       this.mediator.updateStatus(status).catch(() => {
-        Flash(__('Error occurred while updating the issue status'));
+        createFlash({
+          message: __('Error occurred while updating the issue status'),
+        });
       });
     },
   },

ee/app/assets/javascripts/sidebar/components/weight/sidebar_weight.vue

 <script>
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
 import weightComponent from './weight.vue';
@@ -29,7 +29,9 @@ export default {
   methods: {
     onUpdateWeight(newWeight) {
       this.mediator.updateWeight(newWeight).catch(() => {
-        Flash(__('Error occurred while updating the issue weight'));
+        createFlash({
+          message: __('Error occurred while updating the issue weight'),
+        });
       });
     },
   },

ee/app/assets/javascripts/status_page_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';
@@ -50,5 +50,8 @@ export const receiveStatusPageSettingsUpdateError = (_, error) => {
   const { response } = error;
   const 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',
+  });
 };

ee/app/assets/javascripts/subscriptions/new/store/actions.js

 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
 import { STEPS, PAYMENT_FORM_ID } from '../constants';
@@ -55,7 +55,9 @@ export const fetchCountriesSuccess = ({ commit }, data = []) => {
 };
 
 export const fetchCountriesError = () => {
-  createFlash(s__('Checkout|Failed to load countries. Please try again.'));
+  createFlash({
+    message: s__('Checkout|Failed to load countries. Please try again.'),
+  });
 };
 
 export const fetchStates = ({ state, dispatch }) => {
@@ -77,7 +79,9 @@ export const fetchStatesSuccess = ({ commit }, data = {}) => {
 };
 
 export const fetchStatesError = () => {
-  createFlash(s__('Checkout|Failed to load states. Please try again.'));
+  createFlash({
+    message: s__('Checkout|Failed to load states. Please try again.'),
+  });
 };
 
 export const resetStates = ({ commit }) => {
@@ -119,22 +123,24 @@ export const fetchPaymentFormParams = ({ dispatch }) =>
 
 export const fetchPaymentFormParamsSuccess = ({ commit }, data) => {
   if (data.errors) {
-    createFlash(
-      sprintf(
+    createFlash({
+      message: sprintf(
         s__('Checkout|Credit card form failed to load: %{message}'),
         {
           message: data.errors,
         },
         false,
       ),
-    );
+    });
   } else {
     commit(types.UPDATE_PAYMENT_FORM_PARAMS, data);
   }
 };
 
 export const fetchPaymentFormParamsError = () => {
-  createFlash(s__('Checkout|Credit card form failed to load. Please try again.'));
+  createFlash({
+    message: s__('Checkout|Credit card form failed to load. Please try again.'),
+  });
 };
 
 export const zuoraIframeRendered = ({ commit }) =>
@@ -157,15 +163,15 @@ export const paymentFormSubmittedSuccess = ({ commit, dispatch }, paymentMethodI
 };
 
 export const paymentFormSubmittedError = (_, response) => {
-  createFlash(
-    sprintf(
+  createFlash({
+    message: sprintf(
       s__(
         'Checkout|Submitting the credit card form failed with code %{errorCode}: %{errorMessage}',
       ),
       response,
       false,
     ),
-  );
+  });
 };
 
 export const fetchPaymentMethodDetails = ({ state, dispatch, commit }) =>
@@ -181,7 +187,9 @@ export const fetchPaymentMethodDetailsSuccess = ({ commit, dispatch }, creditCar
 };
 
 export const fetchPaymentMethodDetailsError = () => {
-  createFlash(s__('Checkout|Failed to register credit card. Please try again.'));
+  createFlash({
+    message: s__('Checkout|Failed to register credit card. Please try again.'),
+  });
 };
 
 export const confirmOrder = ({ getters, dispatch, commit }) => {
@@ -211,5 +219,7 @@ export const confirmOrderError = ({ commit }, message = null) => {
     ? s__('Checkout|Failed to confirm your order: %{message}. Please try again.')
     : s__('Checkout|Failed to confirm your order! Please try again.');
 
-  createFlash(sprintf(errorString, { message }, false));
+  createFlash({
+    message: sprintf(errorString, { message }, false),
+  });
 };

ee/app/assets/javascripts/threat_monitoring/store/modules/network_policies/actions.js

-import { deprecatedCreateFlash as createFlash, FLASH_TYPES } from '~/flash';
+import createFlash, { FLASH_TYPES } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { s__, sprintf } from '~/locale';
@@ -13,7 +13,9 @@ const commitReceivePoliciesError = (commit, data) => {
     data?.error || s__('NetworkPolicies|Something went wrong, unable to fetch policies');
   const policies = data?.payload?.length ? data.payload : [];
   commit(types.RECEIVE_POLICIES_ERROR, policies);
-  createFlash(error);
+  createFlash({
+    message: error,
+  });
 };
 
 export const fetchPolicies = ({ state, commit }, environmentId) => {
@@ -35,7 +37,9 @@ const commitPolicyError = (commit, type, payload) => {
   const error =
     payload?.error || s__('NetworkPolicies|Something went wrong, failed to update policy');
   commit(type, error);
-  createFlash(error);
+  createFlash({
+    message: error,
+  });
 };
 
 export const createPolicy = ({ state, commit }, { environmentId, policy }) => {
@@ -52,12 +56,13 @@ export const createPolicy = ({ state, commit }, { environmentId, policy }) => {
     })
     .then(({ data }) => {
       commit(types.RECEIVE_CREATE_POLICY_SUCCESS, data);
-      createFlash(
-        sprintf(s__('NetworkPolicies|Policy %{policyName} was successfully changed'), {
+      createFlash({
+        message: sprintf(s__('NetworkPolicies|Policy %{policyName} was successfully changed'), {
           policyName: policy.name,
         }),
-        FLASH_TYPES.SUCCESS,
-      );
+
+        type: FLASH_TYPES.SUCCESS,
+      });
     })
     .catch((error) =>
       commitPolicyError(commit, types.RECEIVE_CREATE_POLICY_ERROR, error?.response?.data),
@@ -82,12 +87,13 @@ export const updatePolicy = ({ state, commit }, { environmentId, policy }) => {
         policy,
         updatedPolicy: data,
       });
-      createFlash(
-        sprintf(s__('NetworkPolicies|Policy %{policyName} was successfully changed'), {
+      createFlash({
+        message: sprintf(s__('NetworkPolicies|Policy %{policyName} was successfully changed'), {
           policyName: policy.name,
         }),
-        FLASH_TYPES.SUCCESS,
-      );
+
+        type: FLASH_TYPES.SUCCESS,
+      });
     })
     .catch((error) =>
       commitPolicyError(commit, types.RECEIVE_UPDATE_POLICY_ERROR, error?.response?.data),

ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring/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';
@@ -20,7 +20,9 @@ export const receiveEnvironmentsSuccess = ({ commit }, environments) =>
   commit(types.RECEIVE_ENVIRONMENTS_SUCCESS, environments);
 export const receiveEnvironmentsError = ({ commit }) => {
   commit(types.RECEIVE_ENVIRONMENTS_ERROR);
-  createFlash(s__('ThreatMonitoring|Something went wrong, unable to fetch environments'));
+  createFlash({
+    message: s__('ThreatMonitoring|Something went wrong, unable to fetch environments'),
+  });
 };
 
 const getAllEnvironments = (url, page = 1) =>

ee/app/assets/javascripts/threat_monitoring/store/modules/threat_monitoring_statistics/actions.js

-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import pollUntilComplete from '~/lib/utils/poll_until_complete';
 import { s__ } from '~/locale';
@@ -13,7 +13,9 @@ export const receiveStatisticsSuccess = ({ commit }, statistics) =>
   commit(types.RECEIVE_STATISTICS_SUCCESS, statistics);
 export const receiveStatisticsError = ({ commit }) => {
   commit(types.RECEIVE_STATISTICS_ERROR);
-  createFlash(s__('ThreatMonitoring|Something went wrong, unable to fetch statistics'));
+  createFlash({
+    message: s__('ThreatMonitoring|Something went wrong, unable to fetch statistics'),
+  });
 };
 
 export const fetchStatistics = ({ state, dispatch, rootState }) => {

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

 <script>
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_HIDE_MODAL } from '~/lib/utils/constants';
 import Approvals from '~/vue_merge_request_widget/components/approvals/approvals.vue';
 import { FETCH_ERROR } from '~/vue_merge_request_widget/components/approvals/messages';
@@ -67,7 +67,9 @@ export default {
       if (this.isBasic) return Promise.resolve();
 
       return Promise.all([this.refreshRules(), this.refreshApprovals()]).catch(() =>
-        createFlash(FETCH_ERROR),
+        createFlash({
+          message: FETCH_ERROR,
+        }),
       );
     },
     refreshRules() {

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/store/actions.js

 import Api from 'ee/api';
 import { noneEpic } from 'ee/vue_shared/constants';
 import boardsStore from '~/boards/stores/boards_store';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { formatDate, timeFor } from '~/lib/utils/datetime_utility';
@@ -35,7 +35,9 @@ export const receiveEpicsSuccess = ({ commit }, data) => {
   commit(types.RECEIVE_EPICS_SUCCESS, { epics });
 };
 export const receiveEpicsFailure = ({ commit }) => {
-  flash(s__('Epics|Something went wrong while fetching group epics.'));
+  createFlash({
+    message: s__('Epics|Something went wrong while fetching group epics.'),
+  });
   commit(types.RECEIVE_EPICS_FAILURE);
 };
 export const fetchEpics = ({ state, dispatch }, search = '') => {
@@ -108,7 +110,9 @@ export const receiveIssueUpdateSuccess = ({ state, commit }, { data, epic, isRem
  * @param {string} errorMessage
  */
 export const receiveIssueUpdateFailure = ({ commit }, errorMessage) => {
-  flash(errorMessage);
+  createFlash({
+    message: errorMessage,
+  });
   commit(types.RECEIVE_ISSUE_UPDATE_FAILURE);
 };
 

ee/app/assets/javascripts/vue_shared/dashboards/store/actions.js

 import { find } from 'lodash';
 import Visibility from 'visibilityjs';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
 import { __, s__, n__, sprintf } from '~/locale';
@@ -70,8 +70,8 @@ export const receiveAddProjectsToDashboardSuccess = ({ dispatch, state }, data)
     } else {
       invalidProjects = firstProject;
     }
-    createFlash(
-      sprintf(
+    createFlash({
+      message: sprintf(
         s__(
           'Dashboard|Unable to add %{invalidProjects}. This dashboard is available for public projects, and private projects in groups with a Premium plan.',
         ),
@@ -79,7 +79,7 @@ export const receiveAddProjectsToDashboardSuccess = ({ dispatch, state }, data)
           invalidProjects,
         },
       ),
-    );
+    });
   }
 
   if (added.length) {
@@ -88,11 +88,11 @@ export const receiveAddProjectsToDashboardSuccess = ({ dispatch, state }, data)
 };
 
 export const receiveAddProjectsToDashboardError = ({ state }) => {
-  createFlash(
-    sprintf(__('Something went wrong, unable to add %{project} to dashboard'), {
+  createFlash({
+    message: sprintf(__('Something went wrong, unable to add %{project} to dashboard'), {
       project: n__('project', 'projects', state.selectedProjects.length),
     }),
-  );
+  });
 };
 
 export const fetchProjects = ({ state, dispatch, commit }, page) => {
@@ -134,7 +134,9 @@ export const requestProjects = ({ commit }) => {
 
 export const receiveProjectsError = ({ commit }) => {
   commit(types.RECEIVE_PROJECTS_ERROR);
-  createFlash(__('Something went wrong, unable to get projects'));
+  createFlash({
+    message: __('Something went wrong, unable to get projects'),
+  });
 };
 
 export const removeProject = ({ dispatch }, removePath) => {
@@ -147,7 +149,9 @@ export const removeProject = ({ dispatch }, removePath) => {
 export const receiveRemoveProjectSuccess = ({ dispatch }) => dispatch('forceProjectsRequest');
 
 export const receiveRemoveProjectError = () => {
-  createFlash(__('Something went wrong, unable to delete project'));
+  createFlash({
+    message: __('Something went wrong, unable to delete project'),
+  });
 };
 
 export const setSearchQuery = ({ commit }, query) => commit(types.SET_SEARCH_QUERY, query);

ee/app/assets/javascripts/vue_shared/dashboards/store/mutations.js

 import Vue from 'vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -29,10 +29,10 @@ export default {
         state.projects.map((p) => p.id),
       );
     } else {
-      createFlash(
-        __('Project order will not be saved as local storage is not available.'),
-        'warning',
-      );
+      createFlash({
+        message: __('Project order will not be saved as local storage is not available.'),
+        type: 'warning',
+      });
     }
   },
   [types.SET_SEARCH_QUERY](state, query) {

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -5,7 +5,7 @@ import Api from 'ee/api';
 import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_request_note.vue';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
 import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants';
-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 Poll from '~/lib/utils/poll';
@@ -138,11 +138,11 @@ export default {
           });
         })
         .catch(() => {
-          createFlash(
-            s__(
+          createFlash({
+            message: s__(
               'VulnerabilityManagement|Something went wrong while trying to retrieve the vulnerability history. Please try again later.',
             ),
-          );
+          });
         });
     },
     createNotesPoll() {
@@ -161,7 +161,9 @@ export default {
           this.lastFetchedAt = lastFetchedAt;
         },
         errorCallback: () =>
-          createFlash(__('Something went wrong while fetching latest comments.')),
+          createFlash({
+            message: __('Something went wrong while fetching latest comments.'),
+          }),
       });
     },
     updateNotes(notes) {

ee/app/assets/javascripts/vulnerabilities/components/header.vue

@@ -3,7 +3,7 @@ import { GlLoadingIcon, GlButton, GlBadge } from '@gitlab/ui';
 import fetchHeaderVulnerabilityQuery from 'ee/security_dashboard/graphql/header_vulnerability.graphql';
 import vulnerabilityStateMutations from 'ee/security_dashboard/graphql/mutate_vulnerability_state';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import download from '~/lib/utils/downloader';
@@ -80,11 +80,11 @@ export default {
         };
       },
       error() {
-        createFlash(
-          s__(
+        createFlash({
+          message: s__(
             'VulnerabilityManagement|Something went wrong while trying to refresh the vulnerability. Please try again later.',
           ),
-        );
+        });
       },
       skip() {
         return !this.shouldRefreshVulnerability;
@@ -155,7 +155,9 @@ export default {
             this.user = userData;
           })
           .catch(() => {
-            createFlash(s__('VulnerabilityManagement|Something went wrong, could not get user.'));
+            createFlash({
+              message: s__('VulnerabilityManagement|Something went wrong, could not get user.'),
+            });
           })
           .finally(() => {
             this.isLoadingUser = false;
@@ -188,11 +190,13 @@ export default {
         this.$emit('vulnerability-state-change');
       } catch (error) {
         createFlash({
-          error,
-          captureError: true,
-          message: s__(
-            'VulnerabilityManagement|Something went wrong, could not update vulnerability state.',
-          ),
+          message: {
+            error,
+            captureError: true,
+            message: s__(
+              'VulnerabilityManagement|Something went wrong, could not update vulnerability state.',
+            ),
+          },
         });
       } finally {
         this.isLoadingVulnerability = false;
@@ -228,9 +232,11 @@ export default {
         })
         .catch(() => {
           this.isProcessingAction = false;
-          createFlash(
-            s__('ciReport|There was an error creating the merge request. Please try again.'),
-          );
+          createFlash({
+            message: s__(
+              'ciReport|There was an error creating the merge request. Please try again.',
+            ),
+          });
         });
     },
     downloadPatch() {

ee/app/assets/javascripts/vulnerabilities/components/history_comment.vue

 <script>
 import { GlButton, GlSafeHtmlDirective as SafeHtml, GlLoadingIcon } from '@gitlab/ui';
 import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__ } from '~/locale';
 import HistoryCommentEditor from './history_comment_editor.vue';
@@ -108,11 +108,11 @@ export default {
           this.$emit(emitName, responseData, this.comment);
         })
         .catch(() => {
-          createFlash(
-            s__(
+          createFlash({
+            message: s__(
               'VulnerabilityManagement|Something went wrong while trying to save the comment. Please try again later.',
             ),
-          );
+          });
         });
     },
     deleteComment() {
@@ -125,11 +125,11 @@ export default {
           this.$emit('onCommentDeleted', this.comment);
         })
         .catch(() =>
-          createFlash(
-            s__(
+          createFlash({
+            message: s__(
               'VulnerabilityManagement|Something went wrong while trying to delete the comment. Please try again later.',
             ),
-          ),
+          }),
         )
         .finally(() => {
           this.isDeletingComment = false;

ee/app/assets/javascripts/vulnerabilities/components/related_issues.vue

 <script>
 import { GlButton } from '@gitlab/ui';
 import axios from 'axios';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { joinPaths, redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, __, s__ } from '~/locale';
 import RelatedIssuesBlock from '~/related_issues/components/related_issues_block.vue';
@@ -135,7 +135,9 @@ export default {
 
         if (hasErrors) {
           const messages = errors.map((error) => sprintf(RELATED_ISSUES_ERRORS.LINK_ERROR, error));
-          createFlash(messages.join(' '));
+          createFlash({
+            message: messages.join(' '),
+          });
         }
       });
     },
@@ -150,7 +152,9 @@ export default {
           this.store.removeRelatedIssue(issue);
         })
         .catch(() => {
-          createFlash(RELATED_ISSUES_ERRORS.UNLINK_ERROR);
+          createFlash({
+            message: RELATED_ISSUES_ERRORS.UNLINK_ERROR,
+          });
         });
     },
     fetchRelatedIssues() {
@@ -177,7 +181,9 @@ export default {
           );
         })
         .catch(() => {
-          createFlash(__('An error occurred while fetching issues.'));
+          createFlash({
+            message: __('An error occurred while fetching issues.'),
+          });
         })
         .finally(() => {
           this.isFetching = false;

ee/spec/frontend/analytics/code_review_analytics/store/modules/merge_requests/actions_spec.js

@@ -4,7 +4,7 @@ import * as actions from 'ee/analytics/code_review_analytics/store/modules/merge
 import * as types from 'ee/analytics/code_review_analytics/store/modules/merge_requests/mutation_types';
 import getInitialState from 'ee/analytics/code_review_analytics/store/modules/merge_requests/state';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { mockMergeRequests } from '../../../mock_data';
 
 jest.mock('~/flash');

ee/spec/frontend/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters_spec.js

@@ -13,7 +13,7 @@ import {
 import createStore from 'ee/analytics/cycle_analytics/store';
 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { groupLabels } from '../../mock_data';
 
 const selectedLabelIds = [groupLabels[0].id];
@@ -174,10 +174,10 @@ describe('TasksByTypeFilters', () => {
       });
 
       it('should display a message', () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Only 2 labels can be selected at this time',
-          'notice',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Only 2 labels can be selected at this time',
+          type: 'notice',
+        });
       });
     });
   });

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

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import TimeMetricsCard from 'ee/analytics/cycle_analytics/components/time_metrics_card.vue';
 import { OVERVIEW_METRICS } from 'ee/analytics/cycle_analytics/constants';
 import Api from 'ee/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { group, timeMetricsData, recentActivityData } from '../mock_data';
 
 jest.mock('~/flash');
@@ -59,9 +59,9 @@ describe('TimeMetricsCard', () => {
       });
 
       it('should render an error message', () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          `There was an error while fetching value stream analytics ${metric.toLowerCase()} data.`,
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `There was an error while fetching value stream analytics ${metric.toLowerCase()} data.`,
+        });
       });
     });
 

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -5,7 +5,7 @@ import * as actions from 'ee/analytics/cycle_analytics/store/actions';
 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import {
   currentGroup,
@@ -54,11 +54,6 @@ describe('Value Stream Analytics actions', () => {
   let state;
   let mock;
 
-  const shouldFlashAMessage = (msg, type = null) => {
-    const args = type ? [msg, type] : [msg];
-    expect(createFlash).toHaveBeenCalledWith(...args);
-  };
-
   beforeEach(() => {
     state = {
       startDate,
@@ -229,7 +224,9 @@ describe('Value Stream Analytics actions', () => {
 
     it('will flash an error message', () => {
       actions.receiveStageDataError({ commit: () => {} }, {});
-      shouldFlashAMessage('There was an error fetching data for the selected stage');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching data for the selected stage',
+      });
     });
   });
 
@@ -296,7 +293,9 @@ describe('Value Stream Analytics actions', () => {
           commit: () => {},
         })
         .then(() => {
-          shouldFlashAMessage('There was an error fetching median data for stages');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching median data for stages',
+          });
         });
     });
 
@@ -320,7 +319,9 @@ describe('Value Stream Analytics actions', () => {
           commit: () => {},
         })
         .then(() => {
-          shouldFlashAMessage('There was an error fetching value stream analytics stages.');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching value stream analytics stages.',
+          });
         });
     });
   });
@@ -367,7 +368,7 @@ describe('Value Stream Analytics actions', () => {
         { response },
       );
 
-      shouldFlashAMessage(flashErrorMessage);
+      expect(createFlash).toHaveBeenCalledWith({ message: flashErrorMessage });
     });
   });
 
@@ -452,7 +453,7 @@ describe('Value Stream Analytics actions', () => {
           { getters: { activeStages: data }, dispatch: () => {} },
           {},
         );
-        shouldFlashAMessage(flashErrorMessage);
+        expect(createFlash).toHaveBeenCalledWith({ message: flashErrorMessage });
       });
 
       it('will select the first active stage', () => {
@@ -548,7 +549,9 @@ describe('Value Stream Analytics actions', () => {
             },
           )
           .then(() => {
-            shouldFlashAMessage(`'${stageId}' stage already exists`);
+            expect(createFlash).toHaveBeenCalledWith({
+              message: `'${stageId}' stage already exists`,
+            });
           });
       });
 
@@ -563,7 +566,9 @@ describe('Value Stream Analytics actions', () => {
             { status: httpStatusCodes.BAD_REQUEST },
           )
           .then(() => {
-            shouldFlashAMessage('There was a problem saving your custom stage, please try again');
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'There was a problem saving your custom stage, please try again',
+            });
           });
       });
     });
@@ -595,7 +600,10 @@ describe('Value Stream Analytics actions', () => {
             response,
           )
           .then(() => {
-            shouldFlashAMessage('Stage data updated', 'notice');
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'Stage data updated',
+              type: 'notice',
+            });
           });
       });
 
@@ -610,7 +618,9 @@ describe('Value Stream Analytics actions', () => {
               response,
             )
             .then(() => {
-              shouldFlashAMessage('There was a problem refreshing the data, please try again');
+              expect(createFlash).toHaveBeenCalledWith({
+                message: 'There was a problem refreshing the data, please try again',
+              });
             }));
       });
     });
@@ -662,7 +672,9 @@ describe('Value Stream Analytics actions', () => {
 
       it('flashes an error message', () => {
         actions.receiveRemoveStageError({ commit: () => {}, state }, {});
-        shouldFlashAMessage('There was an error removing your custom stage, please try again');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error removing your custom stage, please try again',
+        });
       });
     });
   });
@@ -695,7 +707,9 @@ describe('Value Stream Analytics actions', () => {
           },
           {},
         )
-        .then(() => shouldFlashAMessage('Stage removed', 'notice'));
+        .then(() =>
+          expect(createFlash).toHaveBeenCalledWith({ message: 'Stage removed', type: 'notice' }),
+        );
     });
   });
 
@@ -795,7 +809,9 @@ describe('Value Stream Analytics actions', () => {
 
     it('will flash an error message', () => {
       actions.receiveStageMedianValuesError({ commit: () => {} });
-      shouldFlashAMessage('There was an error fetching median data for stages');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error fetching median data for stages',
+      });
     });
   });
 
@@ -933,9 +949,9 @@ describe('Value Stream Analytics actions', () => {
         ],
         [],
       ).then(() => {
-        shouldFlashAMessage(
-          'There was an error updating the stage order. Please try reloading the page.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error updating the stage order. Please try reloading the page.',
+        });
       });
     });
   });

ee/spec/frontend/analytics/cycle_analytics/store/modules/custom_stages/actions_spec.js

@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import * as actions from 'ee/analytics/cycle_analytics/store/modules/custom_stages/actions';
 import * as types from 'ee/analytics/cycle_analytics/store/modules/custom_stages/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { currentGroup, endpoints, rawCustomStage } from '../../../mock_data';
 
@@ -14,11 +14,6 @@ describe('Custom stage actions', () => {
   let mock;
   const selectedStage = rawCustomStage;
 
-  const shouldFlashAMessage = (msg, type = null) => {
-    const args = type ? [msg, type] : [msg];
-    expect(createFlash).toHaveBeenCalledWith(...args);
-  };
-
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
@@ -128,7 +123,9 @@ describe('Custom stage actions', () => {
           response,
         )
         .then(() => {
-          shouldFlashAMessage('There was a problem saving your custom stage, please try again');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was a problem saving your custom stage, please try again',
+          });
         });
     });
 
@@ -147,7 +144,7 @@ describe('Custom stage actions', () => {
             },
           )
           .then(() => {
-            shouldFlashAMessage("'uh oh' stage already exists");
+            expect(createFlash).toHaveBeenCalledWith({ message: "'uh oh' stage already exists" });
           });
       });
     });
@@ -180,7 +177,9 @@ describe('Custom stage actions', () => {
             response,
           )
           .then(() => {
-            shouldFlashAMessage('There was a problem refreshing the data, please try again');
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'There was a problem refreshing the data, please try again',
+            });
           }));
     });
   });

ee/spec/frontend/analytics/cycle_analytics/store/modules/type_of_work/actions_spec.js

@@ -9,17 +9,12 @@ import * as actions from 'ee/analytics/cycle_analytics/store/modules/type_of_wor
 import * as getters from 'ee/analytics/cycle_analytics/store/modules/type_of_work/getters';
 import * as types from 'ee/analytics/cycle_analytics/store/modules/type_of_work/mutation_types';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { groupLabels, endpoints, startDate, endDate, rawTasksByTypeData } from '../../../mock_data';
 
 jest.mock('~/flash');
 
-const shouldFlashAMessage = (msg, type = null) => {
-  const args = type ? [msg, type] : [msg];
-  expect(deprecatedCreateFlash).toHaveBeenCalledWith(...args);
-};
-
 const error = new Error(`Request failed with status code ${httpStatusCodes.NOT_FOUND}`);
 
 describe('Type of work actions', () => {
@@ -147,7 +142,9 @@ describe('Type of work actions', () => {
           commit: () => {},
         });
 
-        shouldFlashAMessage('There was an error fetching the top labels for the selected group');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error fetching the top labels for the selected group',
+        });
       });
     });
   });
@@ -217,7 +214,9 @@ describe('Type of work actions', () => {
           commit: () => {},
         });
 
-        shouldFlashAMessage('There was an error fetching data for the tasks by type chart');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was an error fetching data for the tasks by type chart',
+        });
       });
     });
   });

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

@@ -3,7 +3,7 @@ import { mapApprovalSettingsResponse } from 'ee/approvals/mappers';
 import * as baseMutationTypes from 'ee/approvals/stores/modules/base/mutation_types';
 import * as actions from 'ee/approvals/stores/modules/license_compliance/actions';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -77,7 +77,7 @@ describe('EE approvals license-compliance actions', () => {
 
       await actions.fetchRules({ rootState: state, dispatch: () => {}, commit: () => {} });
 
-      expect(createFlash).toHaveBeenNthCalledWith(1, expect.any(String));
+      expect(createFlash).toHaveBeenNthCalledWith(1, { message: expect.any(String) });
     });
   });
 
@@ -114,7 +114,7 @@ describe('EE approvals license-compliance actions', () => {
 
       await actions.postRule({ rootState: state, dispatch: () => {}, commit: () => {} }, []);
 
-      expect(createFlash).toHaveBeenNthCalledWith(1, expect.any(String));
+      expect(createFlash).toHaveBeenNthCalledWith(1, { message: expect.any(String) });
     });
   });
 
@@ -155,7 +155,7 @@ describe('EE approvals license-compliance actions', () => {
 
       await actions.putRule({ rootState: state, dispatch: () => {} }, { id });
 
-      expect(createFlash).toHaveBeenNthCalledWith(1, expect.any(String));
+      expect(createFlash).toHaveBeenNthCalledWith(1, { message: expect.any(String) });
     });
   });
 
@@ -184,7 +184,7 @@ describe('EE approvals license-compliance actions', () => {
 
       await actions.deleteRule({ rootState: state, dispatch: () => {} }, deleteUrl);
 
-      expect(createFlash).toHaveBeenNthCalledWith(1, expect.any(String));
+      expect(createFlash).toHaveBeenNthCalledWith(1, { message: expect.any(String) });
     });
   });
 
@@ -219,7 +219,7 @@ describe('EE approvals license-compliance actions', () => {
 
       await actions.putFallbackRule({ rootState: state, dispatch: () => {} }, {});
 
-      expect(createFlash).toHaveBeenNthCalledWith(1, expect.any(String));
+      expect(createFlash).toHaveBeenNthCalledWith(1, { message: expect.any(String) });
     });
   });
 });

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

@@ -3,7 +3,7 @@ import { mapApprovalRuleRequest, mapApprovalSettingsResponse } from 'ee/approval
 import * as types from 'ee/approvals/stores/modules/base/mutation_types';
 import * as actions from 'ee/approvals/stores/modules/project_settings/actions';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -82,7 +82,9 @@ describe('EE approvals project settings module actions', () => {
       actions.receiveRulesError();
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith(expect.stringMatching('error occurred'));
+      expect(createFlash).toHaveBeenCalledWith({
+        message: expect.stringMatching('error occurred'),
+      });
     });
   });
 
@@ -193,7 +195,9 @@ describe('EE approvals project settings module actions', () => {
 
       actions.deleteRuleError();
 
-      expect(createFlash.mock.calls[0]).toEqual([expect.stringMatching('error occurred')]);
+      expect(createFlash.mock.calls[0]).toEqual([
+        { message: expect.stringMatching('error occurred') },
+      ]);
     });
   });
 

ee/spec/frontend/audit_events/components/tokens/audit_filter_token_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AuditFilterToken from 'ee/audit_events/components/tokens/shared/audit_filter_token.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 jest.mock('~/flash');
@@ -139,9 +139,9 @@ describe('AuditFilterToken', () => {
       });
 
       it('shows a flash error message', () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Failed to find foo. Please search for another foo.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to find foo. Please search for another foo.',
+        });
       });
     });
 
@@ -152,9 +152,9 @@ describe('AuditFilterToken', () => {
       });
 
       it('shows a flash error message', () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Failed to find foo bar. Please search for another foo bar.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to find foo bar. Please search for another foo bar.',
+        });
       });
     });
   });
@@ -193,9 +193,9 @@ describe('AuditFilterToken', () => {
       });
 
       it('shows a flash error message', () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Failed to find foo. Please search for another foo.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to find foo. Please search for another foo.',
+        });
       });
     });
   });

ee/spec/frontend/boards/components/board_settings_wip_limit_spec.js

@@ -8,7 +8,7 @@ import Vuex from 'vuex';
 import BoardSettingsWipLimit from 'ee_component/boards/components/board_settings_wip_limit.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import boardsStore from '~/boards/stores/boards_store';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 
 jest.mock('~/flash');
 
@@ -185,7 +185,7 @@ describe('BoardSettingsWipLimit', () => {
     });
 
     afterEach(() => {
-      flash.mockReset();
+      createFlash.mockReset();
       boardsStore.removeList(listId);
     });
 
@@ -296,7 +296,7 @@ describe('BoardSettingsWipLimit', () => {
           });
 
           it('calls flash with expected error', () => {
-            expect(flash).toHaveBeenCalledTimes(1);
+            expect(createFlash).toHaveBeenCalledTimes(1);
           });
         });
       });

ee/spec/frontend/boards/stores/boards_store_ee_spec.js

 import AxiosMockAdapter from 'axios-mock-adapter';
 import BoardsStoreEE from 'ee_else_ce/boards/stores/boards_store_ee';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');

ee/spec/frontend/codequality_report/store/actions_spec.js

@@ -5,7 +5,7 @@ import * as types from 'ee/codequality_report/store/mutation_types';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { unparsedIssues, parsedIssues } from '../mock_data';
 
@@ -110,9 +110,9 @@ describe('Codequality report actions', () => {
         [],
         [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'There was an error fetching the codequality report.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching the codequality report.',
+          });
           done();
         },
       );
@@ -126,9 +126,9 @@ describe('Codequality report actions', () => {
         [],
         [{ type: 'requestReport' }, { type: 'receiveReportError', payload: new Error() }],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'There was an error fetching the codequality report.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error fetching the codequality report.',
+          });
           done();
         },
       );

ee/spec/frontend/dependencies/store/modules/list/actions_spec.js

@@ -11,7 +11,7 @@ import * as types from 'ee/dependencies/store/modules/list/mutation_types';
 import getInitialState from 'ee/dependencies/store/modules/list/state';
 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 mockDependenciesResponse from './data/mock_dependencies.json';
 
@@ -250,7 +250,9 @@ describe('Dependencies actions', () => {
           ],
         ).then(() => {
           expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith(FETCH_ERROR_MESSAGE);
+          expect(createFlash).toHaveBeenCalledWith({
+            message: FETCH_ERROR_MESSAGE,
+          });
         }));
     });
   });

ee/spec/frontend/geo_node_form/store/actions_spec.js

@@ -3,7 +3,7 @@ import * as actions from 'ee/geo_node_form/store/actions';
 import * as types from 'ee/geo_node_form/store/mutation_types';
 import createState from 'ee/geo_node_form/store/state';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { MOCK_SYNC_NAMESPACES, MOCK_NODE, MOCK_ERROR_MESSAGE } from '../mock_data';
@@ -20,8 +20,8 @@ describe('GeoNodeForm Store Actions', () => {
 
   const noCallback = () => {};
   const flashCallback = () => {
-    expect(flash).toHaveBeenCalledTimes(1);
-    flash.mockClear();
+    expect(createFlash).toHaveBeenCalledTimes(1);
+    createFlash.mockClear();
   };
   const visitUrlCallback = () => {
     expect(visitUrl).toHaveBeenCalledWith('/admin/geo/nodes');
@@ -86,8 +86,10 @@ describe('GeoNodeForm Store Actions', () => {
         [],
       ).then(() => {
         const errors = "Errors: name can't be blank, url can't be blank, url must be a valid URL";
-        expect(flash).toHaveBeenCalledWith(`${defaultErrorMessage} ${errors}`);
-        flash.mockClear();
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `${defaultErrorMessage} ${errors}`,
+        });
+        createFlash.mockClear();
       });
     });
 
@@ -99,8 +101,10 @@ describe('GeoNodeForm Store Actions', () => {
         [{ type: types.RECEIVE_SAVE_GEO_NODE_COMPLETE }],
         [],
       ).then(() => {
-        expect(flash).toHaveBeenCalledWith(defaultErrorMessage);
-        flash.mockClear();
+        expect(createFlash).toHaveBeenCalledWith({
+          message: defaultErrorMessage,
+        });
+        createFlash.mockClear();
       });
     });
   });

ee/spec/frontend/geo_replicable/store/actions_spec.js

@@ -6,7 +6,7 @@ import * as types from 'ee/geo_replicable/store/mutation_types';
 import createState from 'ee/geo_replicable/store/state';
 import { gqClient } from 'ee/geo_replicable/utils';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import toast from '~/vue_shared/plugins/global_toast';
 import {
@@ -70,7 +70,7 @@ describe('GeoReplicable Store Actions', () => {
         [{ type: types.RECEIVE_REPLICABLE_ITEMS_ERROR }],
         [],
         () => {
-          expect(flash).toHaveBeenCalledTimes(1);
+          expect(createFlash).toHaveBeenCalledTimes(1);
         },
       );
     });
@@ -396,7 +396,7 @@ describe('GeoReplicable Store Actions', () => {
         [{ type: types.RECEIVE_INITIATE_ALL_REPLICABLE_SYNCS_ERROR }],
         [],
         () => {
-          expect(flash).toHaveBeenCalledTimes(1);
+          expect(createFlash).toHaveBeenCalledTimes(1);
         },
       );
     });
@@ -493,7 +493,7 @@ describe('GeoReplicable Store Actions', () => {
         [{ type: types.RECEIVE_INITIATE_REPLICABLE_SYNC_ERROR }],
         [],
         () => {
-          expect(flash).toHaveBeenCalledTimes(1);
+          expect(createFlash).toHaveBeenCalledTimes(1);
         },
       );
     });

ee/spec/frontend/geo_settings/store/actions_spec.js

@@ -3,7 +3,7 @@ import * as actions from 'ee/geo_settings/store/actions';
 import * as types from 'ee/geo_settings/store/mutation_types';
 import state from 'ee/geo_settings/store/state';
 import testAction from 'helpers/vuex_action_helper';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { MOCK_BASIC_SETTINGS_DATA, MOCK_APPLICATION_SETTINGS_FETCH_RESPONSE } from '../mock_data';
 
@@ -14,8 +14,8 @@ describe('GeoSettings Store Actions', () => {
 
   const noCallback = () => {};
   const flashCallback = () => {
-    expect(flash).toHaveBeenCalledTimes(1);
-    flash.mockClear();
+    expect(createFlash).toHaveBeenCalledTimes(1);
+    createFlash.mockClear();
   };
 
   beforeEach(() => {

ee/spec/frontend/group_member_contributions/store/group_member_store_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import defaultColumns from 'ee/group_member_contributions/constants';
 import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { rawMembers, contributionsPath } from '../mock_data';
@@ -97,9 +97,9 @@ describe('GroupMemberStore', () => {
         .catch((e) => {
           expect(e.message).toBe('Request failed with status code 500');
           expect(store.isLoading).toBe(false);
-          expect(createFlash).toHaveBeenCalledWith(
-            'Something went wrong while fetching group member contributions',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Something went wrong while fetching group member contributions',
+          });
         })
         .then(done)
         .catch(done.fail);

ee/spec/frontend/insights/stores/insights/actions_spec.js

@@ -5,7 +5,7 @@ import * as actions from 'ee/insights/stores/modules/insights/actions';
 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';
 
 const ERROR_MESSAGE = 'TEST_ERROR_MESSAGE';
@@ -62,9 +62,9 @@ describe('Insights store actions', () => {
         [{ type: 'RECEIVE_CONFIG_ERROR' }],
         [],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            `There was an error fetching configuration for charts: ${ERROR_MESSAGE}`,
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: `There was an error fetching configuration for charts: ${ERROR_MESSAGE}`,
+          });
         },
       );
     });
@@ -77,9 +77,9 @@ describe('Insights store actions', () => {
         expect.any(Array),
         expect.any(Array),
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            `There was an error fetching configuration for charts: Unknown Error`,
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: `There was an error fetching configuration for charts: Unknown Error`,
+          });
         },
       );
     });

ee/spec/frontend/issues_analytics/components/issues_analytics_table_spec.js

@@ -4,7 +4,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import IssuesAnalyticsTable from 'ee/issues_analytics/components/issues_analytics_table.vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { mockIssuesApiResponse, tableHeaders, endpoints } from '../mock_data';
 
@@ -107,7 +107,9 @@ describe('IssuesAnalyticsTable', () => {
     });
 
     it('displays an error', () => {
-      expect(createFlash).toHaveBeenCalledWith('Failed to load issues. Please try again.');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Failed to load issues. Please try again.',
+      });
     });
   });
 });

ee/spec/frontend/license_compliance/store/modules/list/actions_spec.js

@@ -11,7 +11,7 @@ import getInitialState from 'ee/license_compliance/store/modules/list/state';
 
 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 mockLicensesResponse from './data/mock_licenses.json';
 
@@ -107,7 +107,9 @@ describe('Licenses actions', () => {
         [],
       ).then(() => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(FETCH_ERROR_MESSAGE);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: FETCH_ERROR_MESSAGE,
+        });
       });
     });
   });

ee/spec/frontend/pages/groups/saml_providers/saml_members/store/actions_spec.js

@@ -4,7 +4,7 @@ import createInitialState from 'ee/pages/groups/saml_providers/saml_members/stor
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
 
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 
 jest.mock('~/flash');
 jest.mock('~/api', () => ({
@@ -19,7 +19,7 @@ const state = {
 describe('saml_members actions', () => {
   afterEach(() => {
     Api.groupMembers.mockClear();
-    flash.mockClear();
+    createFlash.mockClear();
   });
 
   describe('fetchPage', () => {
@@ -75,7 +75,7 @@ describe('saml_members actions', () => {
     it('should show flash on wrong data', (done) => {
       Api.groupMembers.mockReturnValue(Promise.reject(new Error()));
       testAction(fetchPage, undefined, state, [], [], () => {
-        expect(flash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalledTimes(1);
         done();
       });
     });

ee/spec/frontend/related_items_tree/store/actions_spec.js

@@ -8,7 +8,7 @@ import * as epicUtils from 'ee/related_items_tree/utils/epic_utils';
 
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import {
   issuableTypesMap,
@@ -324,7 +324,9 @@ describe('RelatedItemTree', () => {
             {},
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -458,7 +460,9 @@ describe('RelatedItemTree', () => {
             {},
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -665,7 +669,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith('An error occurred while removing epics.');
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'An error occurred while removing epics.',
+          });
         });
       });
 
@@ -1047,7 +1053,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -1136,7 +1144,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -1281,7 +1291,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -1478,7 +1490,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 
@@ -1604,7 +1618,9 @@ describe('RelatedItemTree', () => {
             },
           );
 
-          expect(createFlash).toHaveBeenCalledWith(message);
+          expect(createFlash).toHaveBeenCalledWith({
+            message,
+          });
         });
       });
 

ee/spec/frontend/roadmap/store/actions_spec.js

@@ -8,7 +8,7 @@ import * as epicUtils from 'ee/roadmap/utils/epic_utils';
 import * as roadmapItemUtils from 'ee/roadmap/utils/roadmap_item_utils';
 import { getTimeframeForMonthsView } from 'ee/roadmap/utils/roadmap_utils';
 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 {
   mockGroupId,
@@ -147,7 +147,9 @@ describe('Roadmap Vuex Actions', () => {
     it('should show flash error', () => {
       actions.receiveEpicsFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith('Something went wrong while fetching epics');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Something went wrong while fetching epics',
+      });
     });
   });
 
@@ -670,7 +672,9 @@ describe('Roadmap Vuex Actions', () => {
     it('should show flash error', () => {
       actions.receiveMilestonesFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith('Something went wrong while fetching milestones');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Something went wrong while fetching milestones',
+      });
     });
   });
 

ee/spec/frontend/security_configuration/components/auto_fix_settings_spec.js

@@ -3,7 +3,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import AutoFixSettings from 'ee/security_configuration/components/auto_fix_settings.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash.js');
@@ -152,9 +152,10 @@ describe('Auto-fix Settings', () => {
             itShowsInitialState();
 
             it('shows error flash', () => {
-              expect(createFlash).toHaveBeenCalledWith(
-                'Something went wrong while toggling auto-fix settings, please try again later.',
-              );
+              expect(createFlash).toHaveBeenCalledWith({
+                message:
+                  'Something went wrong while toggling auto-fix settings, please try again later.',
+              });
             });
           });
         });

ee/spec/frontend/security_dashboard/components/csv_export_button_spec.js

@@ -6,7 +6,7 @@ import CsvExportButton, {
 } from 'ee/security_dashboard/components/csv_export_button.vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import AccessorUtils from '~/lib/utils/accessor';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -93,7 +93,9 @@ describe('Csv Button Export', () => {
       await axios.waitForAll();
 
       expect(downloader).not.toHaveBeenCalled();
-      expect(createFlash).toHaveBeenCalledWith('There was an error while generating the report.');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error while generating the report.',
+      });
     });
 
     it('shows the flash error when backend fails to generate the export', async () => {
@@ -102,7 +104,9 @@ describe('Csv Button Export', () => {
       findCsvExportButton().vm.$emit('click');
       await axios.waitForAll();
 
-      expect(createFlash).toHaveBeenCalledWith('There was an error while generating the report.');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'There was an error while generating the report.',
+      });
     });
 
     it('displays the export icon when not loading and the loading icon when loading', async () => {

ee/spec/frontend/security_dashboard/components/first_class_project_manager/project_manager_spec.js

@@ -5,7 +5,7 @@ import ProjectList from 'ee/security_dashboard/components/first_class_project_ma
 import ProjectManager from 'ee/security_dashboard/components/first_class_project_manager/project_manager.vue';
 import getProjects from 'ee/security_dashboard/graphql/queries/get_projects.query.graphql';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 
 jest.mock('~/flash');
@@ -163,9 +163,10 @@ describe('Project Manager component', () => {
       findAddProjectsButton().vm.$emit('click');
       return waitForPromises().then(() => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(
-          'Unable to add Sample Project 1: Project was not found or you do not have permission to add this project to Security Dashboards.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message:
+            'Unable to add Sample Project 1: Project was not found or you do not have permission to add this project to Security Dashboards.',
+        });
       });
     });
 
@@ -179,9 +180,10 @@ describe('Project Manager component', () => {
       findAddProjectsButton().vm.$emit('click');
       return waitForPromises().then(() => {
         expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith(
-          'Unable to add Sample Project 2 and Sample Project 3: Project was not found or you do not have permission to add this project to Security Dashboards.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message:
+            'Unable to add Sample Project 2 and Sample Project 3: Project was not found or you do not have permission to add this project to Security Dashboards.',
+        });
       });
     });
   });

ee/spec/frontend/security_dashboard/store/modules/project_selector/actions_spec.js

@@ -4,7 +4,7 @@ import * as types from 'ee/security_dashboard/store/modules/project_selector/mut
 import createState from 'ee/security_dashboard/store/modules/project_selector/state';
 import testAction from 'helpers/vuex_action_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -199,7 +199,9 @@ describe('EE projectSelector actions', () => {
         [{ type: types.RECEIVE_ADD_PROJECTS_SUCCESS }],
         [],
       ).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(`Unable to add ${invalidProject.name}`);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `Unable to add ${invalidProject.name}`,
+        });
       });
     });
 
@@ -218,9 +220,9 @@ describe('EE projectSelector actions', () => {
         [{ type: types.RECEIVE_ADD_PROJECTS_SUCCESS }],
         [],
       ).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(
-          `Unable to add ${invalidProject1.name} and ${invalidProject2.name}`,
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `Unable to add ${invalidProject1.name} and ${invalidProject2.name}`,
+        });
       });
     });
 
@@ -240,9 +242,9 @@ describe('EE projectSelector actions', () => {
         [{ type: types.RECEIVE_ADD_PROJECTS_SUCCESS }],
         [],
       ).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(
-          `Unable to add ${invalidProject1.name}, ${invalidProject2.name}, and ${invalidProject3.name}`,
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `Unable to add ${invalidProject1.name}, ${invalidProject2.name}, and ${invalidProject3.name}`,
+        });
       });
     });
   });
@@ -265,9 +267,9 @@ describe('EE projectSelector actions', () => {
       actions.receiveAddProjectsError(mockDispatchContext);
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith(
-        'Something went wrong, unable to add projects to dashboard',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Something went wrong, unable to add projects to dashboard',
+      });
     });
   });
 
@@ -353,7 +355,9 @@ describe('EE projectSelector actions', () => {
         ],
         [],
       ).then(() => {
-        expect(createFlash).toHaveBeenCalledWith('Something went wrong, unable to get projects');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Something went wrong, unable to get projects',
+        });
       }));
   });
 
@@ -433,7 +437,9 @@ describe('EE projectSelector actions', () => {
       actions.receiveRemoveProjectError(mockDispatchContext);
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith('Something went wrong, unable to delete project');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Something went wrong, unable to delete project',
+      });
     });
   });
 

ee/spec/frontend/security_dashboard/store/modules/unscanned_projects/actions_spec.js

@@ -5,7 +5,7 @@ import * as types from 'ee/security_dashboard/store/modules/unscanned_projects/m
 import createState from 'ee/security_dashboard/store/modules/unscanned_projects/state';
 import testAction from 'helpers/vuex_action_helper';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -114,7 +114,9 @@ describe('EE Unscanned Projects actions', () => {
       actions.receiveUnscannedProjectsError(mockDispatchContext);
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith('Unable to fetch unscanned projects');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Unable to fetch unscanned projects',
+      });
     });
   });
 });

ee/spec/frontend/security_dashboard/store/modules/vulnerable_projects/actions_spec.js

@@ -5,7 +5,7 @@ import * as types from 'ee/security_dashboard/store/modules/vulnerable_projects/
 import createState from 'ee/security_dashboard/store/modules/vulnerable_projects/state';
 import testAction from 'helpers/vuex_action_helper';
 
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash');
@@ -127,7 +127,9 @@ describe('Vulnerable Projects actions', () => {
       actions.receiveProjectsError(mockDispatchContext);
 
       expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith('Unable to fetch vulnerable projects');
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Unable to fetch vulnerable projects',
+      });
     });
   });
 });

ee/spec/frontend/status_page_settings/store/actions_spec.js

@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import * as actions from 'ee/status_page_settings/store/actions';
 import * as types from 'ee/status_page_settings/store/mutation_types';
 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 { refreshCurrentPage } from '~/lib/utils/url_utility';
 
@@ -110,10 +110,10 @@ describe('Status Page actions', () => {
     const error = { response: { data: { message: 'Update error' } } };
     it('should handle error update', (done) => {
       testAction(actions.receiveStatusPageSettingsUpdateError, error, null, [], [], () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          `There was an error saving your changes. ${error.response.data.message}`,
-          'alert',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: `There was an error saving your changes. ${error.response.data.message}`,
+          type: 'alert',
+        });
         done();
       });
     });

ee/spec/frontend/subscriptions/new/store/actions_spec.js

@@ -4,7 +4,7 @@ import * as constants from 'ee/subscriptions/new/constants';
 import * as actions from 'ee/subscriptions/new/store/actions';
 import { useMockLocationHelper } from 'helpers/mock_window_location_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';
 
 const {
@@ -193,7 +193,9 @@ describe('Subscriptions Actions', () => {
   describe('fetchCountriesError', () => {
     it('creates a flash', (done) => {
       testAction(actions.fetchCountriesError, null, {}, [], [], () => {
-        expect(createFlash).toHaveBeenCalledWith('Failed to load countries. Please try again.');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to load countries. Please try again.',
+        });
         done();
       });
     });
@@ -262,7 +264,9 @@ describe('Subscriptions Actions', () => {
   describe('fetchStatesError', () => {
     it('creates a flash', (done) => {
       testAction(actions.fetchStatesError, null, {}, [], [], () => {
-        expect(createFlash).toHaveBeenCalledWith('Failed to load states. Please try again.');
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to load states. Please try again.',
+        });
         done();
       });
     });
@@ -425,9 +429,9 @@ describe('Subscriptions Actions', () => {
         [],
         [],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'Credit card form failed to load: error message',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Credit card form failed to load: error message',
+          });
           done();
         },
       );
@@ -437,9 +441,9 @@ describe('Subscriptions Actions', () => {
   describe('fetchPaymentFormParamsError', () => {
     it('creates a flash', (done) => {
       testAction(actions.fetchPaymentFormParamsError, null, {}, [], [], () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Credit card form failed to load. Please try again.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Credit card form failed to load. Please try again.',
+        });
         done();
       });
     });
@@ -508,9 +512,10 @@ describe('Subscriptions Actions', () => {
         [],
         [],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'Submitting the credit card form failed with code codeFromResponse: messageFromResponse',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message:
+              'Submitting the credit card form failed with code codeFromResponse: messageFromResponse',
+          });
           done();
         },
       );
@@ -578,9 +583,9 @@ describe('Subscriptions Actions', () => {
   describe('fetchPaymentMethodDetailsError', () => {
     it('creates a flash', (done) => {
       testAction(actions.fetchPaymentMethodDetailsError, null, {}, [], [], () => {
-        expect(createFlash).toHaveBeenCalledWith(
-          'Failed to register credit card. Please try again.',
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Failed to register credit card. Please try again.',
+        });
         done();
       });
     });
@@ -650,9 +655,9 @@ describe('Subscriptions Actions', () => {
         [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: false }],
         [],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'Failed to confirm your order! Please try again.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Failed to confirm your order! Please try again.',
+          });
           done();
         },
       );
@@ -666,9 +671,9 @@ describe('Subscriptions Actions', () => {
         [{ type: 'UPDATE_IS_CONFIRMING_ORDER', payload: false }],
         [],
         () => {
-          expect(createFlash).toHaveBeenCalledWith(
-            'Failed to confirm your order: "Error". Please try again.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'Failed to confirm your order: "Error". Please try again.',
+          });
           done();
         },
       );

ee/spec/frontend/threat_monitoring/store/modules/network_policies/actions_spec.js

@@ -3,7 +3,7 @@ import * as actions from 'ee/threat_monitoring/store/modules/network_policies/ac
 import * as types from 'ee/threat_monitoring/store/modules/network_policies/mutation_types';
 import getInitialState from 'ee/threat_monitoring/store/modules/network_policies/state';
 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 httpStatus from '~/lib/utils/http_status';
 import { joinPaths } from '~/lib/utils/url_utility';

ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring/actions_spec.js

@@ -4,7 +4,7 @@ import * as actions from 'ee/threat_monitoring/store/modules/threat_monitoring/a
 import * as types from 'ee/threat_monitoring/store/modules/threat_monitoring/mutation_types';
 import getInitialState from 'ee/threat_monitoring/store/modules/threat_monitoring/state';
 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 httpStatus from '~/lib/utils/http_status';
 

ee/spec/frontend/threat_monitoring/store/modules/threat_monitoring_statistics/actions_spec.js

@@ -4,7 +4,7 @@ import * as actions from 'ee/threat_monitoring/store/modules/threat_monitoring_s
 import * as types from 'ee/threat_monitoring/store/modules/threat_monitoring_statistics/mutation_types';
 import getInitialState from 'ee/threat_monitoring/store/modules/threat_monitoring_statistics/state';
 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 httpStatus from '~/lib/utils/http_status';
 

ee/spec/frontend/vue_shared/dashboards/store/actions_spec.js

@@ -4,7 +4,7 @@ import createStore from 'ee/vue_shared/dashboards/store/index';
 import * as types from 'ee/vue_shared/dashboards/store/mutation_types';
 import { mockHeaders, mockText, mockProjectData } from 'ee_jest/vue_shared/dashboards/mock_data';
 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 clearState from '../helpers';
@@ -139,25 +139,27 @@ describe('actions', () => {
       selectProjects(1);
       addInvalidProjects([0]);
 
-      expect(createFlash).toHaveBeenCalledWith(`Unable to add mock-name. ${errorMessage}`);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: `Unable to add mock-name. ${errorMessage}`,
+      });
     });
 
     it('displays an error when user tries to add two invalid projects to dashboard', () => {
       selectProjects(2);
       addInvalidProjects([0, 1]);
 
-      expect(createFlash).toHaveBeenCalledWith(
-        `Unable to add mock-name and mock-name. ${errorMessage}`,
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: `Unable to add mock-name and mock-name. ${errorMessage}`,
+      });
     });
 
     it('displays an error when user tries to add more than two invalid projects to dashboard', () => {
       selectProjects(3);
       addInvalidProjects([0, 1, 2]);
 
-      expect(createFlash).toHaveBeenCalledWith(
-        `Unable to add mock-name, mock-name, and mock-name. ${errorMessage}`,
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: `Unable to add mock-name, mock-name, and mock-name. ${errorMessage}`,
+      });
     });
   });
 
@@ -165,7 +167,9 @@ describe('actions', () => {
     it('shows error message', () => {
       store.dispatch('receiveAddProjectsToDashboardError');
 
-      expect(createFlash).toHaveBeenCalledWith(mockText.ADD_PROJECTS_ERROR);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: mockText.ADD_PROJECTS_ERROR,
+      });
     });
   });
 
@@ -261,7 +265,9 @@ describe('actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith(mockText.RECEIVE_PROJECTS_ERROR);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: mockText.RECEIVE_PROJECTS_ERROR,
+      });
     });
   });
 
@@ -308,7 +314,9 @@ describe('actions', () => {
   describe('receiveRemoveProjectError', () => {
     it('displays project removal error', () => {
       return testAction(actions.receiveRemoveProjectError, null, null, [], []).then(() => {
-        expect(createFlash).toHaveBeenCalledWith(mockText.REMOVE_PROJECT_ERROR);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: mockText.REMOVE_PROJECT_ERROR,
+        });
       });
     });
   });

ee/spec/frontend/vue_shared/dashboards/store/mutations_spec.js

@@ -3,7 +3,7 @@ import mutations from 'ee/vue_shared/dashboards/store/mutations';
 import state from 'ee/vue_shared/dashboards/store/state';
 import { mockProjectData } from 'ee_jest/vue_shared/dashboards/mock_data';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 
 jest.mock('~/flash');
@@ -61,10 +61,10 @@ describe('mutations', () => {
 
       mutations[types.SET_PROJECTS](localState, projects);
 
-      expect(createFlash).toHaveBeenCalledWith(
-        'Project order will not be saved as local storage is not available.',
-        'warning',
-      );
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Project order will not be saved as local storage is not available.',
+        type: 'warning',
+      });
     });
   });
 

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -10,7 +10,7 @@ import RelatedIssues from 'ee/vulnerabilities/components/related_issues.vue';
 import RelatedJiraIssues from 'ee/vulnerabilities/components/related_jira_issues.vue';
 import StatusDescription from 'ee/vulnerabilities/components/status_description.vue';
 import { VULNERABILITY_STATES } from 'ee/vulnerabilities/constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import initUserPopovers from '~/user_popovers';
 

ee/spec/frontend/vulnerabilities/header_spec.js

@@ -14,7 +14,7 @@ import { FEEDBACK_TYPES, VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/
 import createMockApollo from 'helpers/mock_apollo_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 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 { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import download from '~/lib/utils/downloader';
@@ -260,9 +260,9 @@ describe('Vulnerability Header', () => {
         findGlButton().vm.$emit('click');
         return waitForPromises().then(() => {
           expect(mockAxios.history.post).toHaveLength(1);
-          expect(createFlash).toHaveBeenCalledWith(
-            'There was an error creating the merge request. Please try again.',
-          );
+          expect(createFlash).toHaveBeenCalledWith({
+            message: 'There was an error creating the merge request. Please try again.',
+          });
         });
       });
     });

ee/spec/frontend/vulnerabilities/history_comment_spec.js

@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import EventItem from 'ee/vue_shared/security_reports/components/event_item.vue';
 import HistoryComment from 'ee/vulnerabilities/components/history_comment.vue';
 import HistoryCommentEditor from 'ee/vulnerabilities/components/history_comment_editor.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 const mockAxios = new MockAdapter(axios);

ee/spec/frontend/vulnerabilities/related_issues_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import RelatedIssues from 'ee/vulnerabilities/components/related_issues.vue';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import * as urlUtility from '~/lib/utils/url_utility';