Add latest changes from gitlab-org/gitlab@master

31 files changed, 256 insertions, 66 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 833fbb8789e..23eb470503e 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { merge } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import FilesCommentButton from './files_comment_button';
@@ -82,7 +82,7 @@ export default class Diff {
       .get(link, { params })
       .then(({ data }) => $target.parent().replaceWith(data))
       .catch(() =>
-        createFlash({
+        createAlert({
           message: __('An error occurred while loading diff'),
         }),
       );
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index f5c0776ca35..380aa137a7c 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -11,7 +11,7 @@ import {
   MR_COMMITS_NEXT_COMMIT,
   MR_COMMITS_PREVIOUS_COMMIT,
 } from '~/behaviors/shortcuts/keybindings';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { isSingleViewStyle } from '~/helpers/diffs_helper';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -480,7 +480,7 @@ export default {
           this.updateChangesTabCount();
         })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: __('Something went wrong on our end. Please try again!'),
           });
         });
@@ -495,7 +495,7 @@ export default {
           this.setDiscussions();
         })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: __('Something went wrong on our end. Please try again!'),
           });
         });
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
index c5f263eb5f1..b2098b9e82d 100644
--- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlTooltipDirective, GlSafeHtmlDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import { UNFOLD_COUNT, INLINE_DIFF_LINES_KEY } from '../constants';
 import * as utils from '../store/utils';
@@ -92,7 +92,7 @@ export default {
     ) {
       this.loadMoreLines({ endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: s__('Diffs|Something went wrong while fetching diff lines.'),
           });
         })
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index aec608007d5..422bf52a1fa 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -10,7 +10,7 @@ import { escape } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { IdState } from 'vendor/vue-virtual-scroller';
 import DiffContent from 'jh_else_ce/diffs/components/diff_content.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
 import { diffViewerErrors } from '~/ide/constants';
 import { scrollToElement } from '~/lib/utils/common_utils';
@@ -309,7 +309,7 @@ export default {
         })
         .catch(() => {
           idState.isLoadingCollapsedDiff = false;
-          createFlash({
+          createAlert({
             message: this.$options.i18n.genericError,
           });
         });
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 5e74a7206b3..7b523c95c74 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -5,7 +5,7 @@ import {
   historyPushState,
   scrollToElement,
 } from '~/lib/utils/common_utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { diffViewerModes } from '~/ide/constants';
 import axios from '~/lib/utils/axios_utils';
 
@@ -246,7 +246,7 @@ export const fetchCoverageFiles = ({ commit, state }) => {
       }
     },
     errorCallback: () =>
-      createFlash({
+      createAlert({
         message: __('Something went wrong on our end. Please try again!'),
       }),
   });
@@ -509,7 +509,7 @@ export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => {
     .then(() => dispatch('updateResolvableDiscussionsCounts', null, { root: true }))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
     .catch(() =>
-      createFlash({
+      createAlert({
         message: s__('MergeRequests|Saving the comment failed'),
       }),
     );
@@ -619,7 +619,7 @@ export const cacheTreeListWidth = (_, size) => {
 
 export const receiveFullDiffError = ({ commit }, filePath) => {
   commit(types.RECEIVE_FULL_DIFF_ERROR, filePath);
-  createFlash({
+  createAlert({
     message: s__('MergeRequest|Error loading full diff. Please try again.'),
   });
 };
@@ -757,7 +757,7 @@ export const setSuggestPopoverDismissed = ({ commit, state }) =>
       commit(types.SET_SHOW_SUGGEST_POPOVER);
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: s__('MergeRequest|Error dismissing suggestion popover. Please try again.'),
       });
     });
diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
index bc3cb163c39..999e91eed19 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
@@ -1,7 +1,7 @@
 import { KeyMod, KeyCode } from 'monaco-editor';
 import { debounce } from 'lodash';
 import { BLOB_PREVIEW_ERROR } from '~/blob_edit/constants';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
 import syntaxHighlight from '~/syntax_highlight';
@@ -152,7 +152,7 @@ export class EditorMarkdownPreviewExtension {
         syntaxHighlight(previewEl.querySelectorAll('.js-syntax-highlight'));
         previewEl.style.display = 'block';
       })
-      .catch(() => createFlash(BLOB_PREVIEW_ERROR));
+      .catch(() => createAlert(BLOB_PREVIEW_ERROR));
   }
 
   setupPreviewAction(instance) {
diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue
index 3173c2bd644..78e1b8d5cb2 100644
--- a/app/assets/javascripts/environments/components/delete_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTooltipDirective, GlModal } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __, s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 import deleteEnvironmentMutation from '../graphql/mutations/delete_environment.mutation.graphql';
@@ -65,11 +65,11 @@ export default {
           .then(({ data }) => {
             const [message] = data?.deleteEvironment?.errors ?? [];
             if (message) {
-              createFlash({ message });
+              createAlert({ message });
             }
           })
           .catch((error) =>
-            createFlash({
+            createAlert({
               message: s__(
                 'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
               ),
diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index 3475b38c8c9..b00a0777a03 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/app/assets/javascripts/environments/components/deployment.vue
@@ -10,7 +10,7 @@ import {
 import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import deploymentDetails from '../graphql/queries/deployment_details.query.graphql';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
 import Commit from './commit.vue';
@@ -119,7 +119,7 @@ export default {
         return data?.project?.deployment?.tags;
       },
       error(error) {
-        createFlash({
+        createAlert({
           message: this.$options.i18n.LOAD_ERROR_MESSAGE,
           captureError: true,
           error,
diff --git a/app/assets/javascripts/environments/components/edit_environment.vue b/app/assets/javascripts/environments/components/edit_environment.vue
index 96742a11ebb..901d0f5b34d 100644
--- a/app/assets/javascripts/environments/components/edit_environment.vue
+++ b/app/assets/javascripts/environments/components/edit_environment.vue
@@ -1,5 +1,5 @@
 <script>
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import EnvironmentForm from './environment_form.vue';
@@ -39,7 +39,7 @@ export default {
         .then(({ data: { path } }) => visitUrl(path))
         .catch((error) => {
           const message = error.response.data.message[0];
-          createFlash({ message });
+          createAlert({ message });
           this.loading = false;
         });
     },
diff --git a/app/assets/javascripts/environments/components/new_environment.vue b/app/assets/javascripts/environments/components/new_environment.vue
index 14da2668417..bb4d6ab3428 100644
--- a/app/assets/javascripts/environments/components/new_environment.vue
+++ b/app/assets/javascripts/environments/components/new_environment.vue
@@ -1,5 +1,5 @@
 <script>
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 import EnvironmentForm from './environment_form.vue';
@@ -32,7 +32,7 @@ export default {
         .then(({ data: { path } }) => visitUrl(path))
         .catch((error) => {
           const message = error.response.data.message[0];
-          createFlash({ message });
+          createAlert({ message });
           this.loading = false;
         });
     },
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 8957a3074ed..5e936ad8c96 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -3,7 +3,7 @@
  */
 import { isEqual, isFunction, omitBy } from 'lodash';
 import Visibility from 'visibilityjs';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import Poll from '~/lib/utils/poll';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import { s__, __ } from '~/locale';
@@ -94,7 +94,7 @@ export default {
 
     errorCallback() {
       this.isLoading = false;
-      createFlash({
+      createAlert({
         message: s__('Environments|An error occurred while fetching the environments.'),
       });
     },
@@ -123,7 +123,7 @@ export default {
           })
           .catch((err) => {
             this.isLoading = false;
-            createFlash({
+            createAlert({
               message: isFunction(errorMessage) ? errorMessage(err.response.data) : errorMessage,
             });
           });
@@ -179,7 +179,7 @@ export default {
           window.location.href = url.join('/');
         })
         .catch(() => {
-          createFlash({
+          createAlert({
             message: errorMessage,
           });
         });
diff --git a/app/assets/javascripts/notes/components/discussion_notes.vue b/app/assets/javascripts/notes/components/discussion_notes.vue
index 00ed7f0291b..2dbc9b10836 100644
--- a/app/assets/javascripts/notes/components/discussion_notes.vue
+++ b/app/assets/javascripts/notes/components/discussion_notes.vue
@@ -142,7 +142,7 @@ export default {
               :edited-at="discussion.resolved_at"
               :edited-by="discussion.resolved_by"
               :action-text="resolvedText"
-              class-name="discussion-headline-light js-discussion-headline discussion-resolved-text gl-mb-2"
+              class-name="discussion-headline-light js-discussion-headline discussion-resolved-text gl-mb-2 gl-ml-3"
             />
           </template>
           <template #avatar-badge>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 6fdafe34d67..930876e90b1 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -281,6 +281,7 @@ export default {
     >
       {{ __('Contributor') }}
     </user-access-role-badge>
+    <span class="note-actions__mobile-spacer"></span>
     <gl-button
       v-if="canResolve"
       ref="resolveButton"
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
new file mode 100644
index 00000000000..ec70ab88870
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection.vue
@@ -0,0 +1,84 @@
+<script>
+import { GlCard, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ProtectionRow from './protection_row.vue';
+
+export const i18n = {
+  rolesTitle: s__('BranchRules|Roles'),
+  usersTitle: s__('BranchRules|Users'),
+  groupsTitle: s__('BranchRules|Groups'),
+};
+
+export default {
+  name: 'ProtectionDetail',
+  i18n,
+  components: { GlCard, GlLink, ProtectionRow },
+  props: {
+    header: {
+      type: String,
+      required: true,
+    },
+    headerLinkTitle: {
+      type: String,
+      required: true,
+    },
+    headerLinkHref: {
+      type: String,
+      required: true,
+    },
+    roles: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    users: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    groups: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    showUsersDivider() {
+      return Boolean(this.roles.length);
+    },
+    showGroupsDivider() {
+      return Boolean(this.roles.length || this.users.length);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-card class="gl-mb-5" body-class="gl-py-0">
+    <template #header>
+      <div class="gl-display-flex gl-justify-content-space-between">
+        <strong>{{ header }}</strong>
+        <gl-link :href="headerLinkHref" target="_blank">{{ headerLinkTitle }}</gl-link>
+      </div>
+    </template>
+
+    <!-- Roles -->
+    <protection-row v-if="roles.length" :title="$options.i18n.rolesTitle" :access-levels="roles" />
+
+    <!-- Users -->
+    <protection-row
+      v-if="users.length"
+      :show-divider="showUsersDivider"
+      :users="users"
+      :title="$options.i18n.usersTitle"
+    />
+
+    <!-- Groups -->
+    <protection-row
+      v-if="groups.length"
+      :show-divider="showGroupsDivider"
+      :title="$options.i18n.groupsTitle"
+      :access-levels="groups"
+    />
+  </gl-card>
+</template>
diff --git a/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
new file mode 100644
index 00000000000..56be0198574
--- /dev/null
+++ b/app/assets/javascripts/projects/settings/branch_rules/components/view/protection_row.vue
@@ -0,0 +1,86 @@
+<script>
+import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '@gitlab/ui';
+import { n__ } from '~/locale';
+
+const AVATAR_TOOLTIP_MAX_CHARS = 100;
+export const MAX_VISIBLE_AVATARS = 4;
+export const AVATAR_SIZE = 32;
+
+export default {
+  name: 'ProtectionRow',
+  AVATAR_TOOLTIP_MAX_CHARS,
+  MAX_VISIBLE_AVATARS,
+  AVATAR_SIZE,
+  components: { GlAvatarsInline, GlAvatar, GlAvatarLink },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    accessLevels: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    showDivider: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    users: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    avatarBadgeSrOnlyText() {
+      return n__(
+        '%d additional user',
+        '%d additional users',
+        this.users.length - this.$options.MAX_VISIBLE_AVATARS,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-display-flex gl-align-items-center gl-border-gray-100 gl-mb-4 gl-pt-4"
+    :class="{ 'gl-border-t-solid': showDivider }"
+  >
+    <div class="gl-mr-7">{{ title }}</div>
+
+    <gl-avatars-inline
+      v-if="users.length"
+      :avatars="users"
+      :collapsed="true"
+      :max-visible="$options.MAX_VISIBLE_AVATARS"
+      :avatar-size="$options.AVATAR_SIZE"
+      badge-tooltip-prop="name"
+      :badge-tooltip-max-chars="$options.AVATAR_TOOLTIP_MAX_CHARS"
+      :badge-sr-only-text="avatarBadgeSrOnlyText"
+    >
+      <template #avatar="{ avatar }">
+        <gl-avatar-link
+          :key="avatar.username"
+          v-gl-tooltip
+          target="_blank"
+          :href="avatar.webUrl"
+          :title="avatar.name"
+        >
+          <gl-avatar :src="avatar.avatarUrl" :label="avatar.name" :size="$options.AVATAR_SIZE" />
+        </gl-avatar-link>
+      </template>
+    </gl-avatars-inline>
+
+    <div v-for="(item, index) in accessLevels" :key="index" data-testid="access-level">
+      {{ item.accessLevelDescription }}
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue
index 30a0e7c383c..f3186723a49 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex">
     <gl-dropdown
       v-if="tertiaryButtons.length"
       :text="dropdownLabel"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
index 7ba387c79b1..fbd0f6235ba 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue
@@ -4,6 +4,7 @@ import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_m
 import { visitUrl } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import eventHub from '../../event_hub';
 import MRWidgetService from '../../services/mr_widget_service';
 import {
   MANUAL_DEPLOY,
@@ -134,6 +135,7 @@ export default {
             });
           })
           .finally(() => {
+            eventHub.$emit('FetchDeployments');
             this.actionInProgress = null;
           });
       }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 300e2a672cb..7d69a2d78b1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -324,7 +324,7 @@ export default {
       @mouseup="onRowMouseUp"
     >
       <div
-        class="media-body gl-display-flex gl-flex-direction-row! gl-align-self-center"
+        class="media-body gl-display-flex gl-flex-direction-row! gl-w-full"
         data-testid="widget-extension-top-level"
       >
         <div class="gl-flex-grow-1" data-testid="widget-extension-top-level-summary">
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index c8a2a8d119b..4ff2643057f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -506,6 +506,13 @@ export default {
       eventHub.$on('DisablePolling', () => {
         this.stopPolling();
       });
+
+      eventHub.$on('FetchDeployments', () => {
+        this.fetchPreMergeDeployments();
+        if (this.shouldRenderMergedPipeline) {
+          this.fetchPostMergeDeployments();
+        }
+      });
     },
     dismissSuggestPipelines() {
       this.mr.isDismissedSuggestPipeline = true;
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 32b3a0e22c2..657e4498b53 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -3,7 +3,7 @@ import { GlIcon, GlSafeHtmlDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
 import { debounce, unescape } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import GLForm from '~/gl_form';
 import axios from '~/lib/utils/axios_utils';
 import { stripHtml } from '~/lib/utils/text_utility';
@@ -272,7 +272,7 @@ export default {
         this.fetchMarkdown()
           .then((data) => this.renderMarkdown(data))
           .catch(() =>
-            createFlash({
+            createAlert({
               message: __('Error loading markdown preview'),
             }),
           );
@@ -315,7 +315,7 @@ export default {
       this.$nextTick()
         .then(() => $(this.$refs['markdown-preview']).renderGFM())
         .catch(() =>
-          createFlash({
+          createAlert({
             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 9b81444fc04..30d72332c90 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import SuggestionDiff from './suggestion_diff.vue';
 
@@ -91,7 +91,7 @@ export default {
       const suggestionElements = container.querySelectorAll('.js-render-suggestion');
 
       if (this.lineType === 'old') {
-        createFlash({
+        createAlert({
           message: __('Unable to apply suggestions to a deleted line.'),
           parent: this.$el,
         });
diff --git a/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js b/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js
index 832fb891838..1c4e8d332a9 100644
--- a/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js
+++ b/app/assets/javascripts/vue_shared/components/metric_images/store/actions.js
@@ -1,4 +1,4 @@
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__ } from '~/locale';
 import * as types from './mutation_types';
 
@@ -11,7 +11,7 @@ export const fetchImagesFactory = (service) => async ({ state, commit }) => {
     commit(types.RECEIVE_METRIC_IMAGES_SUCCESS, response);
   } catch (error) {
     commit(types.RECEIVE_METRIC_IMAGES_ERROR);
-    createFlash({ message: s__('MetricImages|There was an issue loading metric images.') });
+    createAlert({ message: s__('MetricImages|There was an issue loading metric images.') });
   }
 };
 
@@ -34,7 +34,7 @@ export const uploadImageFactory = (service) => async (
     commit(types.RECEIVE_METRIC_UPLOAD_SUCCESS, response);
   } catch (error) {
     commit(types.RECEIVE_METRIC_UPLOAD_ERROR);
-    createFlash({ message: s__('MetricImages|There was an issue uploading your image.') });
+    createAlert({ message: s__('MetricImages|There was an issue uploading your image.') });
   }
 };
 
@@ -57,7 +57,7 @@ export const updateImageFactory = (service) => async (
     commit(types.RECEIVE_METRIC_UPDATE_SUCCESS, response);
   } catch (error) {
     commit(types.RECEIVE_METRIC_UPLOAD_ERROR);
-    createFlash({ message: s__('MetricImages|There was an issue updating your image.') });
+    createAlert({ message: s__('MetricImages|There was an issue updating your image.') });
   }
 };
 
@@ -68,7 +68,7 @@ export const deleteImageFactory = (service) => async ({ state, commit }, imageId
     await service.deleteMetricImage({ imageId, id: projectId, modelIid });
     commit(types.RECEIVE_METRIC_DELETE_SUCCESS, imageId);
   } catch (error) {
-    createFlash({ message: s__('MetricImages|There was an issue deleting the image.') });
+    createAlert({ message: s__('MetricImages|There was an issue deleting the image.') });
   }
 };
 
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 0c697e624ab..2dab97826b9 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import * as types from './mutation_types';
@@ -16,7 +16,7 @@ export const receiveLabelsSuccess = ({ commit }, labels) =>
   commit(types.RECEIVE_SET_LABELS_SUCCESS, labels);
 export const receiveLabelsFailure = ({ commit }) => {
   commit(types.RECEIVE_SET_LABELS_FAILURE);
-  createFlash({
+  createAlert({
     message: __('Error fetching labels.'),
   });
 };
@@ -38,7 +38,7 @@ 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);
-  createFlash({
+  createAlert({
     message: __('Error creating label.'),
   });
 };
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
index 5f344ae4214..ce93ad216ec 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue
@@ -8,7 +8,7 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import produce from 'immer';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import createLabelMutation from './graphql/create_label.mutation.graphql';
@@ -129,7 +129,7 @@ export default {
           this.$emit('hideCreateView');
         }
       } catch {
-        createFlash({ message: errorMessage });
+        createAlert({ message: errorMessage });
       }
       this.labelCreateInProgress = false;
     },
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
index 8d3d4d5f86a..1d854505d11 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlDropdownForm, GlDropdownItem, GlLoadingIcon, GlIntersectionObserver } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
@@ -62,7 +62,7 @@ export default {
       },
       update: (data) => data.workspace?.labels?.nodes || [],
       error() {
-        createFlash({ message: __('Error fetching labels.') });
+        createAlert({ message: __('Error fetching labels.') });
       },
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
index 522fbc07f5e..0e8da7281d8 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue
@@ -2,7 +2,7 @@
 import { debounce } from 'lodash';
 import issuableLabelsSubscription from 'ee_else_ce/sidebar/queries/issuable_labels.subscription.graphql';
 import { MutationOperationMode, getIdFromGraphQLId } from '~/graphql_shared/utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IssuableType } from '~/issues/constants';
 
@@ -151,7 +151,7 @@ export default {
         return data.workspace?.issuable;
       },
       error() {
-        createFlash({ message: __('Error fetching labels.') });
+        createAlert({ message: __('Error fetching labels.') });
       },
       subscribeToMore: {
         document() {
@@ -275,7 +275,7 @@ export default {
           });
         })
         .catch((error) =>
-          createFlash({
+          createAlert({
             message: __('An error occurred while updating labels.'),
             captureError: true,
             error,
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index 9c6c12eac7d..536b2c8a281 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -53,7 +53,7 @@ export default {
   },
   computed: {
     splitContent() {
-      return this.content.split('\n');
+      return this.content.split(/\r?\n/);
     },
     lineNumbers() {
       return this.splitContent.length;
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index 79021161a65..6151d2ff85c 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -10,7 +10,7 @@ import {
   GlAvatarLabeled,
 } from '@gitlab/ui';
 import { glEmojiTag } from '~/emoji';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { followUser, unfollowUser } from '~/rest_api';
 import { isUserBusy } from '~/set_status_modal/utils';
 import Tracking from '~/tracking';
@@ -141,7 +141,7 @@ export default {
         await followUser(this.user.id);
         this.$emit('follow');
       } catch (error) {
-        createFlash({
+        createAlert({
           message: I18N_ERROR_FOLLOW,
           error,
           captureError: true,
@@ -161,7 +161,7 @@ export default {
         await unfollowUser(this.user.id);
         this.$emit('unfollow');
       } catch (error) {
-        createFlash({
+        createAlert({
           message: I18N_ERROR_UNFOLLOW,
           error,
           captureError: true,
diff --git a/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue
index e0669b3ed27..a4fb30a03a1 100644
--- a/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue
+++ b/app/assets/javascripts/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue
@@ -1,6 +1,6 @@
 <script>
 import { reportTypeToSecurityReportTypeEnum } from 'ee_else_ce/vue_shared/security_reports/constants';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__ } from '~/locale';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
 import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
@@ -67,7 +67,7 @@ export default {
   },
   methods: {
     showError(error) {
-      createFlash({
+      createAlert({
         message: this.$options.i18n.apiError,
         captureError: true,
         error,
diff --git a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
index f6d85599dba..0e1975e1c09 100644
--- a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
+++ b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__ } from '~/locale';
 import ReportSection from '~/reports/components/report_section.vue';
 import { ERROR, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '~/reports/constants';
@@ -160,7 +160,7 @@ export default {
       this.fetchCounts();
     },
     showError(error) {
-      createFlash({
+      createAlert({
         message: this.$options.i18n.apiError,
         captureError: true,
         error,
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 84095819db9..82fe307bde9 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -98,7 +98,14 @@ $system-note-svg-size: 1rem;
             border-left: 1px solid $border-color;
             border-right: 1px solid $border-color;
             background-color: $white;
-            padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+
+            .timeline-content {
+              padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
+            }
+
+            .timeline-avatar {
+              margin: $gl-padding-8 0 0 $gl-padding;
+            }
 
             .timeline-discussion-body {
               margin-left: 2rem;
@@ -252,7 +259,7 @@ $system-note-svg-size: 1rem;
     }
 
     .note-body {
-      padding: $gl-padding-8;
+      padding: 0 $gl-padding-8 $gl-padding-8;
       overflow-x: auto;
       overflow-y: hidden;
 
@@ -281,7 +288,7 @@ $system-note-svg-size: 1rem;
     padding: $gl-padding-8 0;
     margin: $gl-padding 0;
     background-color: transparent;
-    font-size: $gl-font-size-sm;
+    font-size: $gl-font-size;
 
     .note-header-info {
       padding-bottom: 0;
@@ -815,17 +822,20 @@ $system-note-svg-size: 1rem;
 }
 
 .note-actions {
-  align-self: flex-start;
   justify-content: flex-end;
   flex-shrink: 1;
   display: inline-flex;
   align-items: center;
-  margin-left: 10px;
+  margin-left: $gl-padding-8;
   color: $gray-400;
 
   @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
+    justify-content: flex-start;
     float: none;
-    margin-left: 0;
+
+    .note-actions__mobile-spacer {
+      flex-grow: 1;
+    }
   }
 }