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

Refactor(createFlash): use non-deprecated function

See merge request gitlab-org/gitlab!63867

app/assets/javascripts/ide/ide_router.js

 import Vue from 'vue';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import IdeRouter from '~/ide/ide_router_extension';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -111,14 +111,14 @@ export const createRouter = (store, defaultBranch) => {
           }
         })
         .catch((e) => {
-          flash(
-            __('Error while loading the project data. Please try again.'),
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
+          createFlash({
+            message: __('Error while loading the project data. Please try again.'),
+            type: 'alert',
+            parent: document,
+            actionConfig: null,
+            fadeTransition: false,
+            addBodyClass: true,
+          });
           throw e;
         });
     }

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

 import { escape } from 'lodash';
 import Vue from 'vue';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
 import {
@@ -36,16 +36,17 @@ export const createTempEntry = (
   const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
 
   if (getters.entryExists(name)) {
-    flash(
-      sprintf(__('The name "%{name}" is already taken in this directory.'), {
+    createFlash({
+      message: sprintf(__('The name "%{name}" is already taken in this directory.'), {
         name: name.split('/').pop(),
       }),
-      'alert',
-      document,
-      null,
-      false,
-      true,
-    );
+
+      type: 'alert',
+      parent: document,
+      actionConfig: null,
+      fadeTransition: false,
+      addBodyClass: true,
+    });
 
     return undefined;
   }
@@ -284,14 +285,14 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
           if (e.response.status === 404) {
             reject(e);
           } else {
-            flash(
-              __('Error loading branch data. Please try again.'),
-              'alert',
-              document,
-              null,
-              false,
-              true,
-            );
+            createFlash({
+              message: __('Error loading branch data. Please try again.'),
+              type: 'alert',
+              parent: document,
+              actionConfig: null,
+              fadeTransition: false,
+              addBodyClass: true,
+            });
 
             reject(
               new Error(

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

 import { escape } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __, sprintf } from '~/locale';
 import api from '../../../api';
 import service from '../../services';
@@ -19,14 +19,14 @@ export const getProjectData = ({ commit, state }, { namespace, projectId, force
           resolve(data);
         })
         .catch(() => {
-          flash(
-            __('Error loading project data. Please try again.'),
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
+          createFlash({
+            message: __('Error loading project data. Please try again.'),
+            type: 'alert',
+            parent: document,
+            actionConfig: null,
+            fadeTransition: false,
+            addBodyClass: true,
+          });
           reject(new Error(`Project not loaded ${namespace}/${projectId}`));
         });
     } else {
@@ -45,7 +45,14 @@ export const refreshLastCommitData = ({ commit }, { projectId, branchId } = {})
       });
     })
     .catch((e) => {
-      flash(__('Error loading last commit.'), 'alert', document, null, false, true);
+      createFlash({
+        message: __('Error loading last commit.'),
+        type: 'alert',
+        parent: document,
+        actionConfig: null,
+        fadeTransition: false,
+        addBodyClass: true,
+      });
       throw e;
     });
 

app/assets/javascripts/ide/stores/modules/commit/actions.js

-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { addNumericSuffix } from '~/ide/utils';
 import { sprintf, __ } from '~/locale';
 import { leftSidebarViews } from '../../../constants';
@@ -143,7 +143,14 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
       commit(types.UPDATE_LOADING, false);
 
       if (!data.short_id) {
-        flash(data.message, 'alert', document, null, false, true);
+        createFlash({
+          message: data.message,
+          type: 'alert',
+          parent: document,
+          actionConfig: null,
+          fadeTransition: false,
+          addBodyClass: true,
+        });
         return null;
       }
 

app/assets/javascripts/issuable_bulk_update_actions.js

 import $ from 'jquery';
 import { difference, intersection, union } from 'lodash';
-import { deprecatedCreateFlash as Flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
 
@@ -32,7 +32,9 @@ export default {
 
   onFormSubmitFailure() {
     this.form.find('[type="submit"]').enable();
-    return new Flash(__('Issue update failed'));
+    return createFlash({
+      message: __('Issue update failed'),
+    });
   },
 
   /**

app/assets/javascripts/issue.js

 import $ from 'jquery';
 import { joinPaths } from '~/lib/utils/url_utility';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
-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';
 import { addDelimiter } from './lib/utils/text_utility';
@@ -68,7 +68,9 @@ export default class Issue {
         this.createMergeRequestDropdown.checkAbilityToCreateBranch();
       }
     } else {
-      flash(issueFailMessage);
+      createFlash({
+        message: issueFailMessage,
+      });
     }
   }
 
@@ -102,6 +104,10 @@ export default class Issue {
           $container.html(data.html);
         }
       })
-      .catch(() => flash(__('Failed to load related branches')));
+      .catch(() =>
+        createFlash({
+          message: __('Failed to load related branches'),
+        }),
+      );
   }
 }

app/assets/javascripts/issues_list/components/issuables_list_app.vue

@@ -6,7 +6,7 @@ import {
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 import { toNumber, omit } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import {
   scrollToElement,
@@ -265,7 +265,9 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          return flash(__('An error occurred while loading issues'));
+          return createFlash({
+            message: __('An error occurred while loading issues'),
+          });
         });
     },
     getQueryObject() {

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

 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { setFaviconOverlay, resetFavicon } from '~/lib/utils/favicon';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -99,7 +99,9 @@ export const receiveJobSuccess = ({ commit }, data = {}) => {
 };
 export const receiveJobError = ({ commit }) => {
   commit(types.RECEIVE_JOB_ERROR);
-  flash(__('An error occurred while fetching the job.'));
+  createFlash({
+    message: __('An error occurred while fetching the job.'),
+  });
   resetFavicon();
 };
 
@@ -197,11 +199,15 @@ export const stopPollingTrace = ({ state, commit }) => {
 export const receiveTraceSuccess = ({ commit }, log) => commit(types.RECEIVE_TRACE_SUCCESS, log);
 export const receiveTraceError = ({ dispatch }) => {
   dispatch('stopPollingTrace');
-  flash(__('An error occurred while fetching the job log.'));
+  createFlash({
+    message: __('An error occurred while fetching the job log.'),
+  });
 };
 export const receiveTraceUnauthorizedError = ({ dispatch }) => {
   dispatch('stopPollingTrace');
-  flash(__('The current user is not authorized to access the job log.'));
+  createFlash({
+    message: __('The current user is not authorized to access the job log.'),
+  });
 };
 /**
  * When the user clicks a collapsible line in the job
@@ -240,7 +246,9 @@ export const receiveJobsForStageSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_JOBS_FOR_STAGE_SUCCESS, data);
 export const receiveJobsForStageError = ({ commit }) => {
   commit(types.RECEIVE_JOBS_FOR_STAGE_ERROR);
-  flash(__('An error occurred while fetching the jobs.'));
+  createFlash({
+    message: __('An error occurred while fetching the jobs.'),
+  });
 };
 
 export const triggerManualJob = ({ state }, variables) => {
@@ -254,5 +262,9 @@ export const triggerManualJob = ({ state }, variables) => {
     .post(state.job.status.action.path, {
       job_variables_attributes: parsedVariables,
     })
-    .catch(() => flash(__('An error occurred while triggering the job.')));
+    .catch(() =>
+      createFlash({
+        message: __('An error occurred while triggering the job.'),
+      }),
+    );
 };

app/assets/javascripts/label_manager.js

@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import { dispose } from '~/tooltips';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
 
@@ -111,7 +111,11 @@ export default class LabelManager {
   }
 
   onPrioritySortUpdate() {
-    this.savePrioritySort().catch(() => flash(this.errorMessage));
+    this.savePrioritySort().catch(() =>
+      createFlash({
+        message: this.errorMessage,
+      }),
+    );
   }
 
   savePrioritySort() {
@@ -123,7 +127,9 @@ export default class LabelManager {
   rollbackLabelPosition($label, originalAction) {
     const action = originalAction === 'remove' ? 'add' : 'remove';
     this.toggleLabelPriority($label, action, false);
-    flash(this.errorMessage);
+    createFlash({
+      message: this.errorMessage,
+    });
   }
 
   getSortedLabelsIds() {

app/assets/javascripts/labels_select.js

@@ -8,7 +8,7 @@ import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import boardsStore from './boards/stores/boards_store';
 import CreateLabelDropdown from './create_label';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import axios from './lib/utils/axios_utils';
 import { sprintf, __ } from './locale';
@@ -148,7 +148,11 @@ export default class LabelsSelect {
               container: 'body',
             });
           })
-          .catch(() => flash(__('Error saving label update.')));
+          .catch(() =>
+            createFlash({
+              message: __('Error saving label update.'),
+            }),
+          );
       };
       initDeprecatedJQueryDropdown($dropdown, {
         showMenuAbove,
@@ -183,7 +187,11 @@ export default class LabelsSelect {
                 $dropdown.data('deprecatedJQueryDropdown').positionMenuAbove();
               }
             })
-            .catch(() => flash(__('Error fetching labels.')));
+            .catch(() =>
+              createFlash({
+                message: __('Error fetching labels.'),
+              }),
+            );
         },
         renderRow(label) {
           let colorEl;

app/assets/javascripts/merge_conflicts/components/diff_file_editor.vue

@@ -2,7 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { mapActions } from 'vuex';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import { INTERACTIVE_RESOLVE_MODE } from '../constants';
@@ -75,7 +75,9 @@ export default {
           },
         )
         .catch(() => {
-          flash(__('An error occurred while loading the file'));
+          createFlash({
+            message: __('An error occurred while loading the file'),
+          });
         });
     },
     saveDiffResolution() {

app/assets/javascripts/merge_request_tabs.js

@@ -8,7 +8,7 @@ import createEventHub from '~/helpers/event_hub_factory';
 import initAddContextCommitsTriggers from './add_context_commits_modal';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import Diff from './diff';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import initChangesDropdown from './init_changes_dropdown';
 import axios from './lib/utils/axios_utils';
 import {
@@ -345,7 +345,9 @@ export default class MergeRequestTabs {
       })
       .catch(() => {
         this.toggleLoading(false);
-        flash(__('An error occurred while fetching this tab.'));
+        createFlash({
+          message: __('An error occurred while fetching this tab.'),
+        });
       });
   }
 
@@ -446,7 +448,9 @@ export default class MergeRequestTabs {
       })
       .catch(() => {
         this.toggleLoading(false);
-        flash(__('An error occurred while fetching this tab.'));
+        createFlash({
+          message: __('An error occurred while fetching this tab.'),
+        });
       });
   }
 

app/assets/javascripts/milestone.js

 import $ from 'jquery';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
 
@@ -39,7 +39,11 @@ export default class Milestone {
           $(tabElId).html(data.html);
           $target.addClass('is-loaded');
         })
-        .catch(() => flash(__('Error loading milestone tab')));
+        .catch(() =>
+          createFlash({
+            message: __('Error loading milestone tab'),
+          }),
+        );
     }
   }
 }

app/assets/javascripts/mirrors/mirror_repos.js

 import $ from 'jquery';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import { hide } from '~/tooltips';
@@ -111,7 +111,11 @@ export default class MirrorRepos {
     return axios
       .put(this.mirrorEndpoint, payload)
       .then(() => this.removeRow($target))
-      .catch(() => Flash(__('Failed to remove mirror.')));
+      .catch(() =>
+        createFlash({
+          message: __('Failed to remove mirror.'),
+        }),
+      );
   }
 
   /* eslint-disable class-methods-use-this */

app/assets/javascripts/mirrors/ssh_mirror.js

 import $ from 'jquery';
 import { escape } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { backOff } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
@@ -115,7 +115,9 @@ export default class SSHMirror {
         const failureMessage = response.data
           ? response.data.message
           : __('An error occurred while detecting host keys');
-        Flash(failureMessage);
+        createFlash({
+          message: failureMessage,
+        });
 
         $btnLoadSpinner.addClass('hidden');
         this.$btnDetectHostKeys.enable();

app/assets/javascripts/namespaces/leave_by_url.js

-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { initRails } from '~/lib/utils/rails_ujs';
 import { __, sprintf } from '~/locale';
@@ -18,8 +18,10 @@ export default function leaveByUrl(namespaceType) {
   if (leaveLink) {
     leaveLink.click();
   } else {
-    Flash(
-      sprintf(__('You do not have permission to leave this %{namespaceType}.'), { namespaceType }),
-    );
+    createFlash({
+      message: sprintf(__('You do not have permission to leave this %{namespaceType}.'), {
+        namespaceType,
+      }),
+    });
   }
 }

app/assets/javascripts/notes/components/comment_form.vue

@@ -14,7 +14,7 @@ import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Autosave from '~/autosave';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { statusBoxState } from '~/issuable/components/status_box.vue';
 import httpStatusCodes from '~/lib/utils/http_status';
 import {
@@ -293,7 +293,11 @@ export default {
       toggleState()
         .then(() => statusBoxState.updateStatus && statusBoxState.updateStatus())
         .then(refreshUserMergeRequestCounts)
-        .catch(() => Flash(constants.toggleStateErrorMessage[this.noteableType][this.openState]));
+        .catch(() =>
+          createFlash({
+            message: constants.toggleStateErrorMessage[this.noteableType][this.openState],
+          }),
+        );
     },
     discard(shouldClear = true) {
       // `blur` is needed to clear slash commands autocomplete cache if event fired.

app/assets/javascripts/notes/components/note_actions.vue

@@ -3,7 +3,7 @@ import { GlTooltipDirective, GlIcon, GlButton, GlDropdownItem } from '@gitlab/ui
 import { mapActions, mapGetters } from 'vuex';
 import Api from '~/api';
 import resolvedStatusMixin from '~/batch_comments/mixins/resolved_status';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { __, sprintf } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
@@ -234,7 +234,11 @@ export default {
           assignee_ids: assignees.map((assignee) => assignee.id),
         })
           .then(() => this.handleAssigneeUpdate(assignees))
-          .catch(() => flash(__('Something went wrong while updating assignees')));
+          .catch(() =>
+            createFlash({
+              message: __('Something went wrong while updating assignees'),
+            }),
+          );
       }
     },
     setAwardEmoji(awardName) {

app/assets/javascripts/notes/components/note_awards_list.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapGetters } from 'vuex';
 import { __ } from '~/locale';
 import AwardsList from '~/vue_shared/components/awards_list.vue';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import createFlash from '../../flash';
 
 export default {
   components: {
@@ -48,7 +48,11 @@ export default {
         awardName,
       };
 
-      this.toggleAwardRequest(data).catch(() => Flash(__('Something went wrong on our end.')));
+      this.toggleAwardRequest(data).catch(() =>
+        createFlash({
+          message: __('Something went wrong on our end.'),
+        }),
+      );
     },
   },
 };

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -6,7 +6,7 @@ import { clearDraft, getDiscussionReplyKey } from '~/lib/utils/autosave';
 import { s__, __ } from '~/locale';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import createFlash from '../../flash';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
@@ -220,7 +220,11 @@ export default {
           const msg = __(
             'Your comment could not be submitted! Please check your network connection and try again.',
           );
-          Flash(msg, 'alert', this.$el);
+          createFlash({
+            message: msg,
+            type: 'alert',
+            parent: this.$el,
+          });
           this.$refs.noteForm.note = noteText;
           callback(err);
         });

app/assets/javascripts/notes/components/noteable_note.vue

@@ -7,7 +7,7 @@ import { INLINE_DIFF_LINES_KEY } from '~/diffs/constants';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { truncateSha } from '~/lib/utils/text_utility';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import createFlash from '../../flash';
 import { __, s__, sprintf } from '../../locale';
 import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../event_hub';
@@ -247,7 +247,9 @@ export default {
             this.isDeleting = false;
           })
           .catch(() => {
-            Flash(__('Something went wrong while deleting your note. Please try again.'));
+            createFlash({
+              message: __('Something went wrong while deleting your note. Please try again.'),
+            });
             this.isDeleting = false;
           });
       }
@@ -316,7 +318,11 @@ export default {
             this.setSelectedCommentPositionHover();
             this.$nextTick(() => {
               const msg = __('Something went wrong while editing your comment. Please try again.');
-              Flash(msg, 'alert', this.$el);
+              createFlash({
+                message: msg,
+                type: 'alert',
+                parent: this.$el,
+              });
               this.recoverNoteContent(noteText);
               callback();
             });

app/assets/javascripts/notes/components/notes_app.vue

@@ -7,7 +7,7 @@ import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item
 import OrderedLayout from '~/vue_shared/components/ordered_layout.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import draftNote from '../../batch_comments/components/draft_note.vue';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import createFlash from '../../flash';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
 import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
 import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
@@ -216,7 +216,9 @@ export default {
         .catch(() => {
           this.setLoadingState(false);
           this.setNotesFetchedState(true);
-          Flash(__('Something went wrong while fetching comments. Please try again.'));
+          createFlash({
+            message: __('Something went wrong while fetching comments. Please try again.'),
+          });
         });
     },
     initPolling() {

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

-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 export default {
@@ -46,7 +46,11 @@ export default {
           this.isResolving = false;
 
           const msg = __('Something went wrong while resolving this discussion. Please try again.');
-          Flash(msg, 'alert', this.$el);
+          createFlash({
+            message: msg,
+            type: 'alert',
+            parent: this.$el,
+          });
         });
     },
   },

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

@@ -9,7 +9,7 @@ import { confidentialWidget } from '~/sidebar/components/confidential/sidebar_co
 import updateIssueLockMutation from '~/sidebar/components/lock/mutations/update_issue_lock.mutation.graphql';
 import updateMergeRequestLockMutation from '~/sidebar/components/lock/mutations/update_merge_request_lock.mutation.graphql';
 import loadAwardsHandler from '../../awards_handler';
-import { deprecatedCreateFlash as Flash } from '../../flash';
+import createFlash from '../../flash';
 import { isInViewport, scrollToElement, isInMRPage } from '../../lib/utils/common_utils';
 import Poll from '../../lib/utils/poll';
 import { create } from '../../lib/utils/recurrence';
@@ -354,7 +354,11 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
 
       $('.js-gfm-input').trigger('clear-commands-cache.atwho');
 
-      Flash(message || __('Commands applied'), 'notice', noteData.flashContainer);
+      createFlash({
+        message: message || __('Commands applied'),
+        type: 'notice',
+        parent: noteData.flashContainer,
+      });
     }
 
     return res;
@@ -375,11 +379,11 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
         awardsHandler.scrollToAwards();
       })
       .catch(() => {
-        Flash(
-          __('Something went wrong while adding your award. Please try again.'),
-          'alert',
-          noteData.flashContainer,
-        );
+        createFlash({
+          message: __('Something went wrong while adding your award. Please try again.'),
+          type: 'alert',
+          parent: noteData.flashContainer,
+        });
       })
       .then(() => res);
   };
@@ -417,7 +421,11 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
         const errorMsg = sprintf(__('Your comment could not be submitted because %{error}'), {
           error: base[0].toLowerCase(),
         });
-        Flash(errorMsg, 'alert', noteData.flashContainer);
+        createFlash({
+          message: errorMsg,
+          type: 'alert',
+          parent: noteData.flashContainer,
+        });
         return { ...data, hasFlash: true };
       }
     }
@@ -480,7 +488,9 @@ export const poll = ({ commit, state, getters, dispatch }) => {
   });
   notePollOccurrenceTracking.handle(2, () => {
     // On the second failure in a row, show the alert and try one more time (hoping to succeed and clear the error)
-    flashContainer = Flash(__('Something went wrong while fetching latest comments.'));
+    flashContainer = createFlash({
+      message: __('Something went wrong while fetching latest comments.'),
+    });
     setTimeout(() => eTagPoll.restart(), NOTES_POLLING_INTERVAL);
   });
 
@@ -570,7 +580,9 @@ export const filterDiscussion = ({ dispatch }, { path, filter, persistFilter })
     .catch(() => {
       dispatch('setLoadingState', false);
       dispatch('setNotesFetchedState', true);
-      Flash(__('Something went wrong while fetching comments. Please try again.'));
+      createFlash({
+        message: __('Something went wrong while fetching comments. Please try again.'),
+      });
     });
 };
 
@@ -613,7 +625,11 @@ export const submitSuggestion = (
 
       const flashMessage = errorMessage || defaultMessage;
 
-      Flash(__(flashMessage), 'alert', flashContainer);
+      createFlash({
+        message: __(flashMessage),
+        type: 'alert',
+        parent: flashContainer,
+      });
     })
     .finally(() => {
       commit(types.SET_RESOLVING_DISCUSSION, false);
@@ -646,7 +662,11 @@ export const submitSuggestionBatch = ({ commit, dispatch, state }, { flashContai
 
       const flashMessage = errorMessage || defaultMessage;
 
-      Flash(__(flashMessage), 'alert', flashContainer);
+      createFlash({
+        message: __(flashMessage),
+        type: 'alert',
+        parent: flashContainer,
+      });
     })
     .finally(() => {
       commit(types.SET_APPLYING_BATCH_STATE, false);
@@ -685,7 +705,9 @@ export const fetchDescriptionVersion = ({ dispatch }, { endpoint, startingVersio
     })
     .catch((error) => {
       dispatch('receiveDescriptionVersionError', error);
-      Flash(__('Something went wrong while fetching description changes. Please try again.'));
+      createFlash({
+        message: __('Something went wrong while fetching description changes. Please try again.'),
+      });
     });
 };
 
@@ -717,7 +739,9 @@ export const softDeleteDescriptionVersion = (
     })
     .catch((error) => {
       dispatch('receiveDeleteDescriptionVersionError', error);
-      Flash(__('Something went wrong while deleting description changes. Please try again.'));
+      createFlash({
+        message: __('Something went wrong while deleting description changes. Please try again.'),
+      });
 
       // Throw an error here because a component like SystemNote -
       //  needs to know if the request failed to reset its internal state.

app/assets/javascripts/pages/admin/application_settings/payload_previewer.js

-import { deprecatedCreateFlash as flash } from '../../../flash';
+import createFlash from '../../../flash';
 import axios from '../../../lib/utils/axios_utils';
 import { __ } from '../../../locale';
 
@@ -38,7 +38,9 @@ export default class PayloadPreviewer {
       })
       .catch(() => {
         this.spinner.classList.remove('d-inline-flex');
-        flash(__('Error fetching payload data.'));
+        createFlash({
+          message: __('Error fetching payload data.'),
+        });
       });
   }
 

app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js

 import $ from 'jquery';
 import { debounce } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { textColorForBackground } from '~/lib/utils/color_utils';
 import { __ } from '~/locale';
@@ -30,7 +30,11 @@ export default () => {
         .then(({ data }) => {
           $jsBroadcastMessagePreview.html(data.message);
         })
-        .catch(() => flash(__('An error occurred while rendering preview broadcast message')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while rendering preview broadcast message'),
+          }),
+        );
     }
   };
 

app/assets/javascripts/pages/dashboard/todos/index/todos.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import { getGroups } from '~/api/groups_api';
 import { getProjects } from '~/api/projects_api';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isMetaClick } from '~/lib/utils/common_utils';
 import { addDelimiter } from '~/lib/utils/text_utility';
@@ -103,7 +103,9 @@ export default class Todos {
       })
       .catch(() => {
         this.updateRowState(target, true);
-        return flash(__('Error updating status of to-do item.'));
+        return createFlash({
+          message: __('Error updating status of to-do item.'),
+        });
       });
   }
 
@@ -145,7 +147,11 @@ export default class Todos {
         this.updateAllState(target, data);
         this.updateBadges(data);
       })
-      .catch(() => flash(__('Error updating status for all to-do items.')));
+      .catch(() =>
+        createFlash({
+          message: __('Error updating status for all to-do items.'),
+        }),
+      );
   }
 
   updateAllState(target, data) {

app/assets/javascripts/pages/groups/new/group_path_validator.js

 import { debounce } from 'lodash';
 
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import InputValidator from '~/validators/input_validator';
 import fetchGroupPathAvailability from './fetch_group_path_availability';
@@ -60,7 +60,11 @@ export default class GroupPathValidator extends InputValidator {
             GroupPathValidator.showSuggestions(inputDomElement, data.suggests);
           }
         })
-        .catch(() => flash(__('An error occurred while validating group path')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while validating group path'),
+          }),
+        );
     }
   }
 

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

 <script>
 import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -98,17 +98,17 @@ Once deleted, it cannot be undone or recovered.`),
           });
 
           if (error.response && error.response.status === 404) {
-            Flash(
-              sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
+            createFlash({
+              message: sprintf(s__('Milestones|Milestone %{milestoneTitle} was not found'), {
                 milestoneTitle: this.milestoneTitle,
               }),
-            );
+            });
           } else {
-            Flash(
-              sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
+            createFlash({
+              message: sprintf(s__('Milestones|Failed to delete milestone %{milestoneTitle}'), {
                 milestoneTitle: this.milestoneTitle,
               }),
-            );
+            });
           }
           throw error;
         });

app/assets/javascripts/pages/projects/merge_requests/creations/new/compare_autocomplete.js

@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
@@ -37,7 +37,11 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
               callback(data);
             }
           })
-          .catch(() => flash(__('Error fetching refs')));
+          .catch(() =>
+            createFlash({
+              message: __('Error fetching refs'),
+            }),
+          );
       },
       selectable: true,
       filterable: true,

spec/frontend/issues_list/components/issuables_list_app_spec.js

@@ -8,7 +8,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import Issuable from '~/issues_list/components/issuable.vue';
 import IssuablesListApp from '~/issues_list/components/issuables_list_app.vue';
 import { PAGE_SIZE, PAGE_SIZE_MANUAL, RELATIVE_POSITION } from '~/issues_list/constants';
@@ -104,7 +104,7 @@ describe('Issuables list component', () => {
     });
 
     it('flashes an error', () => {
-      expect(flash).toHaveBeenCalledTimes(1);
+      expect(createFlash).toHaveBeenCalledTimes(1);
     });
   });
 

spec/frontend/notes/components/comment_form_spec.js

@@ -7,7 +7,7 @@ import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import CommentForm from '~/notes/components/comment_form.vue';
 import * as constants from '~/notes/constants';
@@ -464,9 +464,9 @@ describe('issue_comment_form component', () => {
               await wrapper.vm.$nextTick;
               await wrapper.vm.$nextTick;
 
-              expect(flash).toHaveBeenCalledWith(
-                `Something went wrong while closing the ${type}. Please try again later.`,
-              );
+              expect(createFlash).toHaveBeenCalledWith({
+                message: `Something went wrong while closing the ${type}. Please try again later.`,
+              });
             });
           });
 
@@ -500,9 +500,9 @@ describe('issue_comment_form component', () => {
             await wrapper.vm.$nextTick;
             await wrapper.vm.$nextTick;
 
-            expect(flash).toHaveBeenCalledWith(
-              `Something went wrong while reopening the ${type}. Please try again later.`,
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: `Something went wrong while reopening the ${type}. Please try again later.`,
+            });
           });
         });
 

spec/frontend/notes/stores/actions_spec.js

@@ -2,7 +2,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import Api from '~/api';
-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';
 import * as notesConstants from '~/notes/constants';
@@ -33,10 +33,7 @@ jest.mock('~/flash', () => {
     };
   });
 
-  return {
-    createFlash: flash,
-    deprecatedCreateFlash: flash,
-  };
+  return flash;
 });
 
 describe('Actions Notes Store', () => {
@@ -348,13 +345,13 @@ describe('Actions Notes Store', () => {
         await startPolling();
 
         expect(axiosMock.history.get).toHaveLength(1);
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
 
         await advanceXMoreIntervals(1);
 
         expect(axiosMock.history.get).toHaveLength(2);
-        expect(Flash).toHaveBeenCalled();
-        expect(Flash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledTimes(1);
       });
 
       it('resets the failure counter on success', async () => {
@@ -375,14 +372,14 @@ describe('Actions Notes Store', () => {
         await advanceXMoreIntervals(1); // Failure #2
 
         // That was the first failure AFTER a success, so we should NOT see the error displayed
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
 
         // Now we'll allow another failure
         await advanceXMoreIntervals(1); // Failure #3
 
         // Since this is the second failure in a row, the error should happen
-        expect(Flash).toHaveBeenCalled();
-        expect(Flash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledTimes(1);
       });
 
       it('hides the error display if it exists on success', async () => {
@@ -393,8 +390,8 @@ describe('Actions Notes Store', () => {
         await advanceXMoreIntervals(2);
 
         // After two errors, the error should be displayed
-        expect(Flash).toHaveBeenCalled();
-        expect(Flash).toHaveBeenCalledTimes(1);
+        expect(createFlash).toHaveBeenCalled();
+        expect(createFlash).toHaveBeenCalledTimes(1);
 
         axiosMock.reset();
         successMock();
@@ -906,7 +903,7 @@ describe('Actions Notes Store', () => {
           .then(() => done.fail('Expected error to be thrown!'))
           .catch((err) => {
             expect(err).toBe(error);
-            expect(Flash).not.toHaveBeenCalled();
+            expect(createFlash).not.toHaveBeenCalled();
           })
           .then(done)
           .catch(done.fail);
@@ -928,11 +925,11 @@ describe('Actions Notes Store', () => {
           )
           .then((resp) => {
             expect(resp.hasFlash).toBe(true);
-            expect(Flash).toHaveBeenCalledWith(
-              'Your comment could not be submitted because something went wrong',
-              'alert',
-              flashContainer,
-            );
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'Your comment could not be submitted because something went wrong',
+              type: 'alert',
+              parent: flashContainer,
+            });
           })
           .catch(() => done.fail('Expected success response!'))
           .then(done)
@@ -954,7 +951,7 @@ describe('Actions Notes Store', () => {
           )
           .then((data) => {
             expect(data).toBe(res);
-            expect(Flash).not.toHaveBeenCalled();
+            expect(createFlash).not.toHaveBeenCalled();
           })
           .then(done)
           .catch(done.fail);
@@ -997,7 +994,7 @@ describe('Actions Notes Store', () => {
           ['resolveDiscussion', { discussionId }],
           ['restartPolling'],
         ]);
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
       });
     });
 
@@ -1012,7 +1009,11 @@ describe('Actions Notes Store', () => {
           [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
         expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
-        expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: TEST_ERROR_MESSAGE,
+          type: 'alert',
+          parent: flashContainer,
+        });
       });
     });
 
@@ -1027,11 +1028,11 @@ describe('Actions Notes Store', () => {
           [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
         expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
-        expect(Flash).toHaveBeenCalledWith(
-          'Something went wrong while applying the suggestion. Please try again.',
-          'alert',
-          flashContainer,
-        );
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'Something went wrong while applying the suggestion. Please try again.',
+          type: 'alert',
+          parent: flashContainer,
+        });
       });
     });
 
@@ -1039,7 +1040,7 @@ describe('Actions Notes Store', () => {
       dispatch.mockReturnValue(Promise.reject());
 
       testSubmitSuggestion(done, () => {
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
       });
     });
   });
@@ -1083,7 +1084,7 @@ describe('Actions Notes Store', () => {
           ['restartPolling'],
         ]);
 
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
       });
     });
 
@@ -1101,7 +1102,11 @@ describe('Actions Notes Store', () => {
         ]);
 
         expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
-        expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer);
+        expect(createFlash).toHaveBeenCalledWith({
+          message: TEST_ERROR_MESSAGE,
+          type: 'alert',
+          parent: flashContainer,
+        });
       });
     });
 
@@ -1119,11 +1124,12 @@ describe('Actions Notes Store', () => {
         ]);
 
         expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
-        expect(Flash).toHaveBeenCalledWith(
+        expect(createFlash).toHaveBeenCalledWith({
+          message:
             'Something went wrong while applying the batch of suggestions. Please try again.',
-          'alert',
-          flashContainer,
-        );
+          type: 'alert',
+          parent: flashContainer,
+        });
       });
     });
 
@@ -1139,7 +1145,7 @@ describe('Actions Notes Store', () => {
           [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
-        expect(Flash).not.toHaveBeenCalled();
+        expect(createFlash).not.toHaveBeenCalled();
       });
     });
   });
@@ -1283,7 +1289,7 @@ describe('Actions Notes Store', () => {
         )
           .then(() => done.fail('Expected error to be thrown'))
           .catch(() => {
-            expect(Flash).toHaveBeenCalled();
+            expect(createFlash).toHaveBeenCalled();
             done();
           });
       });