Add latest changes from gitlab-org/gitlab@master

32 files changed, 186 insertions, 79 deletions

diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js
index 3b24c2c128b..9e93f709937 100644
--- a/app/assets/javascripts/pages/projects/project.js
+++ b/app/assets/javascripts/pages/projects/project.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Cookies from 'js-cookie';
 import initClonePanel from '~/clone_panel';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { serializeForm } from '~/lib/utils/forms';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -78,7 +78,11 @@ export default class Project {
               },
             })
             .then(({ data }) => callback(data))
-            .catch(() => flash(__('An error occurred while getting projects')));
+            .catch(() =>
+              createFlash({
+                message: __('An error occurred while getting projects'),
+              }),
+            );
         },
         selectable: true,
         filterable: true,
diff --git a/app/assets/javascripts/pages/sessions/new/username_validator.js b/app/assets/javascripts/pages/sessions/new/username_validator.js
index 338fe1b66f2..7ea744a68a6 100644
--- a/app/assets/javascripts/pages/sessions/new/username_validator.js
+++ b/app/assets/javascripts/pages/sessions/new/username_validator.js
@@ -1,6 +1,6 @@
 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 InputValidator from '~/validators/input_validator';
@@ -50,7 +50,11 @@ export default class UsernameValidator extends InputValidator {
             usernameTaken ? unavailableMessageSelector : successMessageSelector,
           );
         })
-        .catch(() => flash(__('An error occurred while validating username')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while validating username'),
+          }),
+        );
     }
   }
 
diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 03dba699461..0fab4678bc3 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -2,7 +2,7 @@ import { select } from 'd3-selection';
 import dateFormat from 'dateformat';
 import $ from 'jquery';
 import { last } from 'lodash';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { n__, s__, __ } from '~/locale';
@@ -295,7 +295,11 @@ export default class ActivityCalendar {
           responseType: 'text',
         })
         .then(({ data }) => $(this.activitiesContainer).html(data))
-        .catch(() => flash(__('An error occurred while retrieving calendar activity')));
+        .catch(() =>
+          createFlash({
+            message: __('An error occurred while retrieving calendar activity'),
+          }),
+        );
     } else {
       this.currentSelectedDate = '';
       $(this.activitiesContainer).html('');
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
index e845c8b9df4..bc83844b8b9 100644
--- a/app/assets/javascripts/persistent_user_callout.js
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as Flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { parseBoolean } from './lib/utils/common_utils';
 import { __ } from './locale';
@@ -62,7 +62,11 @@ export default class PersistentUserCallout {
         }
       })
       .catch(() => {
-        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
+        createFlash({
+          message: __(
+            'An error occurred while dismissing the alert. Refresh the page and try again.',
+          ),
+        });
       });
   }
 
@@ -79,11 +83,11 @@ export default class PersistentUserCallout {
         window.location.assign(href);
       })
       .catch(() => {
-        Flash(
-          __(
+        createFlash({
+          message: __(
             'An error occurred while acknowledging the notification. Refresh the page and try again.',
           ),
-        );
+        });
       });
   }
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
index bf992b84387..b433b078457 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stage.vue
@@ -13,7 +13,7 @@
  */
 
 import { GlDropdown, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import eventHub from '../../event_hub';
@@ -83,7 +83,9 @@ export default {
           this.$refs.dropdown.hide();
           this.isLoading = false;
 
-          Flash(__('Something went wrong on our end.'));
+          createFlash({
+            message: __('Something went wrong on our end.'),
+          });
         });
     },
     isDropdownOpen() {
diff --git a/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
index 9f15b6c4ae3..5c34f4e4f7e 100644
--- a/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 
 export default {
@@ -13,7 +13,9 @@ export default {
         })
         .catch(() => {
           this.mediator.store.toggleLoading(pipeline);
-          flash(__('An error occurred while fetching the pipeline.'));
+          createFlash({
+            message: __('An error occurred while fetching the pipeline.'),
+          });
         });
     },
     /**
@@ -53,9 +55,11 @@ export default {
     requestRefreshPipelineGraph() {
       // When an action is clicked
       // (whether in the dropdown or in the main nodes, we refresh the big graph)
-      this.mediator
-        .refreshPipeline()
-        .catch(() => flash(__('An error occurred while making the request.')));
+      this.mediator.refreshPipeline().catch(() =>
+        createFlash({
+          message: __('An error occurred while making the request.'),
+        }),
+      );
     },
   },
 };
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 9ab4753fec8..e8d5ed175ba 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import Translate from '~/vue_shared/translate';
@@ -96,14 +96,18 @@ export default async function initPipelineDetailsBundle() {
   try {
     createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
   } catch {
-    Flash(__('An error occurred while loading a section of this page.'));
+    createFlash({
+      message: __('An error occurred while loading a section of this page.'),
+    });
   }
 
   if (canShowNewPipelineDetails) {
     try {
       createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);
     } catch {
-      Flash(__('An error occurred while loading the pipeline.'));
+      createFlash({
+        message: __('An error occurred while loading the pipeline.'),
+      });
     }
   } else {
     const { default: PipelinesMediator } = await import(
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediator.js b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
index 09637c25654..9797fe44bb0 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediator.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediator.js
@@ -1,5 +1,5 @@
 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as Flash } from '../flash';
+import createFlash from '../flash';
 import Poll from '../lib/utils/poll';
 import { __ } from '../locale';
 import PipelineService from './services/pipeline_service';
@@ -47,7 +47,9 @@ export default class pipelinesMediator {
 
   errorCallback() {
     this.state.isLoading = false;
-    Flash(__('An error occurred while fetching the pipeline.'));
+    createFlash({
+      message: __('An error occurred while fetching the pipeline.'),
+    });
   }
 
   refreshPipeline() {
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index dad2c18fb18..4a0c278853f 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -5,7 +5,7 @@ import { Rails } from '~/lib/utils/rails_ujs';
 import TimezoneDropdown, {
   formatTimezone,
 } from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
-import { deprecatedCreateFlash as flash } from '../flash';
+import createFlash from '../flash';
 
 export default class Profile {
   constructor({ form } = {}) {
@@ -83,14 +83,21 @@ export default class Profile {
           this.updateHeaderAvatar();
         }
 
-        flash(data.message, 'notice');
+        createFlash({
+          message: data.message,
+          type: 'notice',
+        });
       })
       .then(() => {
         window.scrollTo(0, 0);
         // Enable submit button after requests ends
         self.form.find(':input[disabled]').enable();
       })
-      .catch((error) => flash(error.message));
+      .catch((error) =>
+        createFlash({
+          message: error.message,
+        }),
+      );
   }
 
   updateHeaderAvatar() {
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index f44661cb139..d295c06928f 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -2,7 +2,7 @@
 
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import $ from 'jquery';
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
 import { spriteIcon } from '~/lib/utils/common_utils';
@@ -88,7 +88,11 @@ export default class ProjectFindFile {
         this.findFile();
         this.element.find('.files-slider tr.tree-item').eq(0).addClass('selected').focus();
       })
-      .catch(() => flash(__('An error occurred while loading filenames')));
+      .catch(() =>
+        createFlash({
+          message: __('An error occurred while loading filenames'),
+        }),
+      );
   }
 
   // render result
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index e6dd4145cb8..f7804c2faa4 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { fixTitle } from '~/tooltips';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
 
@@ -60,7 +60,11 @@ export default class ProjectLabelSubscription {
           return button;
         });
       })
-      .catch(() => flash(__('There was an error subscribing to this label.')));
+      .catch(() =>
+        createFlash({
+          message: __('There was an error subscribing to this label.'),
+        }),
+      );
   }
 
   static setNewTitle($button, originalTitle, newStatus) {
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index f3d12e0dd00..f6f409873c8 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Visibility from 'visibilityjs';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { __, s__, sprintf } from '~/locale';
 import ciIcon from '~/vue_shared/components/ci_icon.vue';
@@ -57,7 +57,9 @@ export default {
         group: 'notfound',
       };
       this.isLoading = false;
-      Flash(s__('Something went wrong on our end'));
+      createFlash({
+        message: s__('Something went wrong on our end'),
+      });
     },
     initPolling() {
       this.poll = new Poll({
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 726ddba1014..d0d2c1400a7 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -1,6 +1,6 @@
 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';
@@ -135,6 +135,10 @@ export default class ProtectedBranchCreate {
       .then(() => {
         window.location.reload();
       })
-      .catch(() => Flash(__('Failed to protect the branch')));
+      .catch(() =>
+        createFlash({
+          message: __('Failed to protect the branch'),
+        }),
+      );
   }
 }
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
index ae7855d4638..bf9810c7789 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_edit.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as flash } from '../flash';
+import createFlash from '../flash';
 import axios from '../lib/utils/axios_utils';
 import { FAILED_TO_UPDATE_TAG_MESSAGE } from './constants';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
@@ -49,7 +49,9 @@ export default class ProtectedTagEdit {
         this.$allowedToCreateDropdownButton.enable();
 
         window.scrollTo({ top: 0, behavior: 'smooth' });
-        flash(FAILED_TO_UPDATE_TAG_MESSAGE);
+        createFlash({
+          message: FAILED_TO_UPDATE_TAG_MESSAGE,
+        });
       });
   }
 }
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 6cdd89ad431..24041a60e3d 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import { fixTitle, hide } from '~/tooltips';
-import { deprecatedCreateFlash as flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { sprintf, s__, __ } from './locale';
 
@@ -98,12 +98,12 @@ Sidebar.prototype.toggleTodo = function (e) {
       this.todoUpdateDone(data);
     })
     .catch(() =>
-      flash(
-        sprintf(__('There was an error %{message} todo.'), {
+      createFlash({
+        message: sprintf(__('There was an error %{message} todo.'), {
           message:
             ajaxType === 'post' ? s__('RightSidebar|adding a') : s__('RightSidebar|deleting the'),
         }),
-      ),
+      }),
     );
 };
 
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index 9840aa4ed66..c6877226b7d 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -1,6 +1,6 @@
 <script>
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
 import Store from '~/sidebar/stores/sidebar_store';
@@ -113,7 +113,9 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          return new Flash(__('Error occurred when saving assignees'));
+          return createFlash({
+            message: __('Error occurred when saving assignees'),
+          });
         });
     },
     exposeAvailabilityStatus(users) {
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index c3f31a3d220..42d2e456a07 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -2,7 +2,7 @@
 import { GlButton } from '@gitlab/ui';
 import $ from 'jquery';
 import { mapActions } from 'vuex';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __, sprintf } from '../../../locale';
 import eventHub from '../../event_hub';
 
@@ -52,7 +52,9 @@ export default {
           const flashMessage = __(
             'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
           );
-          Flash(sprintf(flashMessage, { issuableDisplayName: this.issuableDisplayName }));
+          createFlash({
+            message: sprintf(flashMessage, { issuableDisplayName: this.issuableDisplayName }),
+          });
         })
         .finally(() => {
           this.closeForm();
diff --git a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
index c0bd54c60da..e414aaf719b 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
@@ -2,7 +2,7 @@
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
 import Store from '~/sidebar/stores/sidebar_store';
@@ -80,7 +80,9 @@ export default {
         })
         .catch(() => {
           this.loading = false;
-          return new Flash(__('Error occurred when saving reviewers'));
+          return createFlash({
+            message: __('Error occurred when saving reviewers'),
+          });
         });
     },
     requestReview(data) {
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 3595354da80..23d3d3cdb9d 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -1,7 +1,7 @@
 import Store from 'ee_else_ce/sidebar/stores/sidebar_store';
 import { __ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
-import { deprecatedCreateFlash as Flash } from '../flash';
+import createFlash from '../flash';
 import { visitUrl } from '../lib/utils/url_utility';
 import Service from './services/sidebar_service';
 
@@ -74,7 +74,11 @@ export default class SidebarMediator {
       .then(([restResponse, graphQlResponse]) => {
         this.processFetchedData(restResponse.data, graphQlResponse.data);
       })
-      .catch(() => new Flash(__('Error occurred when fetching sidebar data')));
+      .catch(() =>
+        createFlash({
+          message: __('Error occurred when fetching sidebar data'),
+        }),
+      );
   }
 
   processFetchedData(data) {
diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index c53d0575752..f07fb9d926a 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -2,7 +2,7 @@
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 
 import eventHub from '~/blob/components/eventhub';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { redirectTo, joinPaths } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
 import {
@@ -135,7 +135,9 @@ export default {
       const defaultErrorMsg = this.newSnippet
         ? SNIPPET_CREATE_MUTATION_ERROR
         : SNIPPET_UPDATE_MUTATION_ERROR;
-      Flash(sprintf(defaultErrorMsg, { err }));
+      createFlash({
+        message: sprintf(defaultErrorMsg, { err }),
+      });
       this.isUpdating = false;
     },
     getAttachedFiles() {
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index eb3eaa66df5..7cba445d9b1 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 import { spriteIcon } from './lib/utils/common_utils';
 import { __, s__ } from './locale';
@@ -28,7 +28,11 @@ export default class Star {
             $this.prepend(spriteIcon('star', iconClasses));
           }
         })
-        .catch(() => Flash(__('Star toggle failed. Try again later.')));
+        .catch(() =>
+          createFlash({
+            message: __('Star toggle failed. Try again later.'),
+          }),
+        );
     });
   }
 }
diff --git a/app/assets/javascripts/static_site_editor/image_repository.js b/app/assets/javascripts/static_site_editor/image_repository.js
index 57f32ab4847..4ad2e2618ac 100644
--- a/app/assets/javascripts/static_site_editor/image_repository.js
+++ b/app/assets/javascripts/static_site_editor/image_repository.js
@@ -1,10 +1,13 @@
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { getBinary } from './services/image_service';
 
 const imageRepository = () => {
   const images = new Map();
-  const flash = (message) => new Flash(message);
+  const flash = (message) =>
+    createFlash({
+      message,
+    });
 
   const add = (file, url) => {
     getBinary(file)
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index 3b2210b9ef2..4d1051cc9f2 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import 'deckar01-task_list';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as Flash } from './flash';
+import createFlash from './flash';
 import axios from './lib/utils/axios_utils';
 
 export default class TaskList {
@@ -22,7 +22,10 @@ export default class TaskList {
           errorMessages = e.response.data.errors.join(' ');
         }
 
-        return new Flash(errorMessages || __('Update failed'), 'alert');
+        return createFlash({
+          message: errorMessages || __('Update failed'),
+          type: 'alert',
+        });
       };
 
     this.init();
diff --git a/app/assets/javascripts/toggle_buttons.js b/app/assets/javascripts/toggle_buttons.js
index 03c975d5fe8..5b85107991a 100644
--- a/app/assets/javascripts/toggle_buttons.js
+++ b/app/assets/javascripts/toggle_buttons.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { deprecatedCreateFlash as Flash } from './flash';
+import createFlash from './flash';
 import { parseBoolean } from './lib/utils/common_utils';
 import { __ } from './locale';
 
@@ -42,7 +42,9 @@ function onToggleClicked(toggle, input, clickCallback) {
       $(input).trigger('trigger-change');
     })
     .catch(() => {
-      Flash(__('Something went wrong when toggling the button'));
+      createFlash({
+        message: __('Something went wrong when toggling the button'),
+      });
     });
 }
 
diff --git a/app/assets/javascripts/usage_ping_consent.js b/app/assets/javascripts/usage_ping_consent.js
index 3876aa62b75..621a8d9d3b6 100644
--- a/app/assets/javascripts/usage_ping_consent.js
+++ b/app/assets/javascripts/usage_ping_consent.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import { deprecatedCreateFlash as Flash, hideFlash } from './flash';
+import createFlash, { hideFlash } from './flash';
 import axios from './lib/utils/axios_utils';
 import { parseBoolean } from './lib/utils/common_utils';
 import { __ } from './locale';
@@ -26,7 +26,9 @@ export default () => {
       })
       .catch(() => {
         hideConsentMessage();
-        Flash(__('Something went wrong. Try again later.'));
+        createFlash({
+          message: __('Something went wrong. Try again later.'),
+        });
       });
   });
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index 0cd280c42d2..471edcbdc9e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -5,7 +5,7 @@ import autoMergeEnabledQuery from 'ee_else_ce/vue_merge_request_widget/queries/s
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { deprecatedCreateFlash as Flash } from '../../../flash';
+import createFlash from '../../../flash';
 import { AUTO_MERGE_STRATEGIES } from '../../constants';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
@@ -109,7 +109,9 @@ export default {
         })
         .catch(() => {
           this.isCancellingAutoMerge = false;
-          Flash(__('Something went wrong. Please try again.'));
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          });
         });
     },
     removeSourceBranch() {
@@ -135,7 +137,9 @@ export default {
         })
         .catch(() => {
           this.isRemovingSourceBranch = false;
-          Flash(__('Something went wrong. Please try again.'));
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          });
         });
     },
   },
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 9da3bea9362..dbd9dbf7513 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -1,7 +1,7 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { s__, __ } from '~/locale';
 import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
 import modalEventHub from '~/projects/commit/event_hub';
@@ -100,7 +100,9 @@ export default {
         })
         .catch(() => {
           this.isMakingRequest = false;
-          Flash(__('Something went wrong. Please try again.'));
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          });
         });
     },
     openRevertModal() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index a82a8a22873..363bccaf551 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -4,7 +4,7 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { deprecatedCreateFlash as Flash } from '../../../flash';
+import createFlash from '../../../flash';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
@@ -113,7 +113,9 @@ export default {
           if (error.response && error.response.data && error.response.data.merge_error) {
             this.rebasingError = error.response.data.merge_error;
           } else {
-            Flash(__('Something went wrong. Please try again.'));
+            createFlash({
+              message: __('Something went wrong. Please try again.'),
+            });
           }
         });
     },
@@ -129,7 +131,9 @@ export default {
 
             if (res.merge_error && res.merge_error.length) {
               this.rebasingError = res.merge_error;
-              Flash(__('Something went wrong. Please try again.'));
+              createFlash({
+                message: __('Something went wrong. Please try again.'),
+              });
             }
 
             eventHub.$emit('MRWidgetRebaseSuccess');
@@ -138,7 +142,9 @@ export default {
         })
         .catch(() => {
           this.isMakingRequest = false;
-          Flash(__('Something went wrong. Please try again.'));
+          createFlash({
+            message: __('Something went wrong. Please try again.'),
+          });
           stopPolling();
         });
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 80b7a9b7d05..9ea48050079 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -4,7 +4,7 @@ import { GlIcon } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { unescape } from 'lodash';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import GLForm from '~/gl_form';
 import axios from '~/lib/utils/axios_utils';
 import { stripHtml } from '~/lib/utils/text_utility';
@@ -222,7 +222,11 @@ export default {
         axios
           .post(this.markdownPreviewPath, { text: this.textareaValue })
           .then((response) => this.renderMarkdown(response.data))
-          .catch(() => new Flash(__('Error loading markdown preview')));
+          .catch(() =>
+            createFlash({
+              message: __('Error loading markdown preview'),
+            }),
+          );
       } else {
         this.renderMarkdown();
       }
@@ -245,7 +249,11 @@ export default {
 
       this.$nextTick()
         .then(() => $(this.$refs['markdown-preview']).renderGFM())
-        .catch(() => new Flash(__('Error rendering markdown preview')));
+        .catch(() =>
+          createFlash({
+            message: __('Error rendering markdown preview'),
+          }),
+        );
     },
   },
 };
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index 53d1cca7af3..8102865e8fc 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import Vue from 'vue';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import SuggestionDiff from './suggestion_diff.vue';
 
@@ -79,7 +79,11 @@ export default {
       const suggestionElements = container.querySelectorAll('.js-render-suggestion');
 
       if (this.lineType === 'old') {
-        Flash(__('Unable to apply suggestions to a deleted line.'), 'alert', this.$el);
+        createFlash({
+          message: __('Unable to apply suggestions to a deleted line.'),
+          type: 'alert',
+          parent: this.$el,
+        });
       }
 
       suggestionElements.forEach((suggestionEl, i) => {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js
index 89f96ab916b..178be0f6da0 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -16,7 +16,9 @@ export const receiveLabelsSuccess = ({ commit }, labels) =>
   commit(types.RECEIVE_SET_LABELS_SUCCESS, labels);
 export const receiveLabelsFailure = ({ commit }) => {
   commit(types.RECEIVE_SET_LABELS_FAILURE);
-  flash(__('Error fetching labels.'));
+  createFlash({
+    message: __('Error fetching labels.'),
+  });
 };
 export const fetchLabels = ({ state, dispatch }) => {
   dispatch('requestLabels');
@@ -32,7 +34,9 @@ export const requestCreateLabel = ({ commit }) => commit(types.REQUEST_CREATE_LA
 export const receiveCreateLabelSuccess = ({ commit }) => commit(types.RECEIVE_CREATE_LABEL_SUCCESS);
 export const receiveCreateLabelFailure = ({ commit }) => {
   commit(types.RECEIVE_CREATE_LABEL_FAILURE);
-  flash(__('Error creating label.'));
+  createFlash({
+    message: __('Error creating label.'),
+  });
 };
 export const createLabel = ({ state, dispatch }, label) => {
   dispatch('requestCreateLabel');
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
index 2b96b159ca3..935f020f559 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/store/actions.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as flash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -16,7 +16,9 @@ export const receiveLabelsSuccess = ({ commit }, labels) =>
   commit(types.RECEIVE_SET_LABELS_SUCCESS, labels);
 export const receiveLabelsFailure = ({ commit }) => {
   commit(types.RECEIVE_SET_LABELS_FAILURE);
-  flash(__('Error fetching labels.'));
+  createFlash({
+    message: __('Error fetching labels.'),
+  });
 };
 export const fetchLabels = ({ state, dispatch }) => {
   dispatch('requestLabels');