diff --git a/.rubocop_todo/layout/first_array_element_indentation.yml b/.rubocop_todo/layout/first_array_element_indentation.yml
index a6d75b57b2f..7c07126f698 100644
--- a/.rubocop_todo/layout/first_array_element_indentation.yml
+++ b/.rubocop_todo/layout/first_array_element_indentation.yml
@@ -61,26 +61,6 @@ Layout/FirstArrayElementIndentation:
     - 'spec/models/ci/daily_build_group_report_result_spec.rb'
     - 'spec/models/ci/pipeline_spec.rb'
     - 'spec/models/ci/runner_version_spec.rb'
-    - 'spec/models/ci/unit_test_spec.rb'
-    - 'spec/models/clusters/applications/cert_manager_spec.rb'
-    - 'spec/models/clusters/platforms/kubernetes_spec.rb'
-    - 'spec/models/commit_collection_spec.rb'
-    - 'spec/models/compare_spec.rb'
-    - 'spec/models/concerns/id_in_ordered_spec.rb'
-    - 'spec/models/concerns/noteable_spec.rb'
-    - 'spec/models/diff_note_spec.rb'
-    - 'spec/models/discussion_spec.rb'
-    - 'spec/models/group_spec.rb'
-    - 'spec/models/integration_spec.rb'
-    - 'spec/models/integrations/chat_message/issue_message_spec.rb'
-    - 'spec/models/integrations/chat_message/wiki_page_message_spec.rb'
-    - 'spec/models/integrations/jira_spec.rb'
-    - 'spec/models/label_note_spec.rb'
-    - 'spec/models/merge_request/cleanup_schedule_spec.rb'
-    - 'spec/models/merge_request_diff_spec.rb'
-    - 'spec/models/merge_request_spec.rb'
-    - 'spec/models/operations/feature_flags/strategy_spec.rb'
-    - 'spec/models/project_group_link_spec.rb'
     - 'spec/models/repository_spec.rb'
     - 'spec/models/user_preference_spec.rb'
     - 'spec/models/user_spec.rb'
diff --git a/GITALY_SERVER_VERSION b/GITALY_SERVER_VERSION
index 207b5d92e1e..b6ad514204b 100644
--- a/GITALY_SERVER_VERSION
+++ b/GITALY_SERVER_VERSION
@@ -1 +1 @@
-2ff0039f15ef06063925ff6c0406f6e092ad2435
+5cba52f4acb04ddbe27d8b7cb2e936ea0be45ae1
diff --git a/app/assets/javascripts/content_editor/components/reference_dropdown.vue b/app/assets/javascripts/content_editor/components/reference_dropdown.vue
new file mode 100644
index 00000000000..7869df31a4d
--- /dev/null
+++ b/app/assets/javascripts/content_editor/components/reference_dropdown.vue
@@ -0,0 +1,146 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlDropdownItem,
+  },
+
+  props: {
+    char: {
+      type: String,
+      required: true,
+    },
+
+    referenceProps: {
+      type: Object,
+      required: true,
+    },
+
+    items: {
+      type: Array,
+      required: true,
+    },
+
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    };
+  },
+
+  computed: {
+    isUser() {
+      return this.referenceProps.referenceType === 'user';
+    },
+
+    isIssue() {
+      return this.referenceProps.referenceType === 'issue';
+    },
+
+    isMergeRequest() {
+      return this.referenceProps.referenceType === 'merge_request';
+    },
+
+    isMilestone() {
+      return this.referenceProps.referenceType === 'milestone';
+    },
+  },
+
+  watch: {
+    items() {
+      this.selectedIndex = 0;
+    },
+  },
+
+  methods: {
+    getReferenceText(item) {
+      switch (this.referenceProps.referenceType) {
+        case 'user':
+          return `${this.char}${item.username}`;
+        case 'issue':
+        case 'merge_request':
+          return `${this.char}${item.iid}`;
+        case 'milestone':
+          return `${this.char}${item.title}`;
+        default:
+          return '';
+      }
+    },
+
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler();
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        this.downHandler();
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        this.enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+
+    upHandler() {
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;
+    },
+
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+    },
+
+    enterHandler() {
+      this.selectItem(this.selectedIndex);
+    },
+
+    selectItem(index) {
+      const item = this.items[index];
+
+      if (item) {
+        this.command({
+          text: this.getReferenceText(item),
+          href: '#',
+          ...this.referenceProps,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <ul
+    :class="{ show: items.length > 0 }"
+    class="gl-new-dropdown dropdown-men"
+    data-testid="content-editor-reference-dropdown"
+  >
+    <div class="gl-new-dropdown-inner gl-overflow-y-auto">
+      <gl-dropdown-item
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ 'gl-bg-gray-50': index === selectedIndex }"
+        @click="selectItem(index)"
+      >
+        <span v-if="isUser">
+          {{ item.username }}
+          <small>{{ item.name }}</small>
+        </span>
+        <span v-if="isIssue || isMergeRequest || isMilestone">
+          <small>{{ item.iid }}</small>
+          {{ item.title }}
+        </span>
+      </gl-dropdown-item>
+    </div>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/content_editor/extensions/heading.js b/app/assets/javascripts/content_editor/extensions/heading.js
index 48303cdeca4..41903162ba5 100644
--- a/app/assets/javascripts/content_editor/extensions/heading.js
+++ b/app/assets/javascripts/content_editor/extensions/heading.js
@@ -1 +1,15 @@
-export { Heading as default } from '@tiptap/extension-heading';
+import { Heading } from '@tiptap/extension-heading';
+import { textblockTypeInputRule } from '@tiptap/core';
+
+export default Heading.extend({
+  addInputRules() {
+    return this.options.levels.map((level) => {
+      return textblockTypeInputRule({
+        // make sure heading regex doesn't conflict with issue references
+        find: new RegExp(`^(#{1,${level}})[ \t]$`),
+        type: this.type,
+        getAttributes: { level },
+      });
+    });
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/reference.js b/app/assets/javascripts/content_editor/extensions/reference.js
index 5e459e65de2..9ac8129335e 100644
--- a/app/assets/javascripts/content_editor/extensions/reference.js
+++ b/app/assets/javascripts/content_editor/extensions/reference.js
@@ -57,7 +57,7 @@ export default Node.create({
       'a',
       {
         class: node.attrs.className,
-        href: node.attrs.href,
+        href: '#',
         'data-reference-type': node.attrs.referenceType,
         'data-original': node.attrs.originalText,
       },
diff --git a/app/assets/javascripts/content_editor/extensions/suggestions.js b/app/assets/javascripts/content_editor/extensions/suggestions.js
new file mode 100644
index 00000000000..b43357c1fb9
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/suggestions.js
@@ -0,0 +1,150 @@
+import { Node } from '@tiptap/core';
+import { VueRenderer } from '@tiptap/vue-2';
+import tippy from 'tippy.js';
+import Suggestion from '@tiptap/suggestion';
+import { PluginKey } from 'prosemirror-state';
+import { isFunction } from 'lodash';
+import axios from '~/lib/utils/axios_utils';
+import Reference from '../components/reference_dropdown.vue';
+
+function createSuggestionPlugin({ editor, char, dataSource, search, referenceProps }) {
+  return Suggestion({
+    editor,
+    char,
+    pluginKey: new PluginKey(`reference_${referenceProps.referenceType}`),
+    command: ({ editor: tiptapEditor, range, props }) => {
+      tiptapEditor
+        .chain()
+        .focus()
+        .insertContentAt(range, [{ type: 'reference', attrs: props }])
+        .run();
+    },
+
+    async items({ query }) {
+      if (!dataSource) return [];
+
+      try {
+        const items = await (isFunction(dataSource) ? dataSource() : axios.get(dataSource));
+        return items.data.filter(search(query));
+      } catch {
+        return [];
+      }
+    },
+
+    render: () => {
+      let component;
+      let popup;
+
+      return {
+        onStart: (props) => {
+          component = new VueRenderer(Reference, {
+            propsData: {
+              ...props,
+              char,
+              referenceProps,
+            },
+            editor: props.editor,
+          });
+
+          if (!props.clientRect) {
+            return;
+          }
+
+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          });
+        },
+
+        onUpdate(props) {
+          component.updateProps(props);
+
+          if (!props.clientRect) {
+            return;
+          }
+
+          popup?.[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          });
+        },
+
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup?.[0].hide();
+
+            return true;
+          }
+
+          return component.ref?.onKeyDown(props);
+        },
+
+        onExit() {
+          popup?.[0].destroy();
+          component.destroy();
+        },
+      };
+    },
+  });
+}
+
+export default Node.create({
+  name: 'suggestions',
+
+  addProseMirrorPlugins() {
+    return [
+      createSuggestionPlugin({
+        editor: this.editor,
+        char: '@',
+        dataSource: gl.GfmAutoComplete?.dataSources.members,
+        referenceProps: {
+          className: 'gfm gfm-project_member',
+          referenceType: 'user',
+        },
+        search: (query) => ({ name, username }) =>
+          name.toLocaleLowerCase().includes(query.toLocaleLowerCase()) ||
+          username.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      }),
+      createSuggestionPlugin({
+        editor: this.editor,
+        char: '#',
+        dataSource: gl.GfmAutoComplete?.dataSources.issues,
+        referenceProps: {
+          className: 'gfm gfm-issue',
+          referenceType: 'issue',
+        },
+        search: (query) => ({ iid, title }) =>
+          String(iid).toLocaleLowerCase().includes(query.toLocaleLowerCase()) ||
+          title.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      }),
+      createSuggestionPlugin({
+        editor: this.editor,
+        char: '!',
+        dataSource: gl.GfmAutoComplete?.dataSources.mergeRequests,
+        referenceProps: {
+          className: 'gfm gfm-issue',
+          referenceType: 'merge_request',
+        },
+        search: (query) => ({ iid, title }) =>
+          String(iid).toLocaleLowerCase().includes(query.toLocaleLowerCase()) ||
+          title.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      }),
+      createSuggestionPlugin({
+        editor: this.editor,
+        char: '%',
+        dataSource: gl.GfmAutoComplete?.dataSources.milestones,
+        referenceProps: {
+          className: 'gfm gfm-milestone',
+          referenceType: 'milestone',
+        },
+        search: (query) => ({ iid, title }) =>
+          String(iid).toLocaleLowerCase().includes(query.toLocaleLowerCase()) ||
+          title.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      }),
+    ];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index 5ed7f3dc23d..a4621ce0c04 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -46,6 +46,7 @@ import ReferenceDefinition from '../extensions/reference_definition';
 import Sourcemap from '../extensions/sourcemap';
 import Strike from '../extensions/strike';
 import Subscript from '../extensions/subscript';
+import Suggestions from '../extensions/suggestions';
 import Superscript from '../extensions/superscript';
 import Table from '../extensions/table';
 import TableCell from '../extensions/table_cell';
@@ -133,6 +134,7 @@ export const createContentEditor = ({
     Sourcemap,
     Strike,
     Subscript,
+    Suggestions,
     Superscript,
     TableCell,
     TableHeader,
diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index c2ab7c4f298..21bf11f7b93 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description.vue
@@ -38,7 +38,12 @@ export default {
     },
   },
   mounted() {
-    this.$refs.textarea.focus();
+    this.focus();
+  },
+  methods: {
+    focus() {
+      this.$refs.textarea?.focus();
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/issues/show/components/form.vue b/app/assets/javascripts/issues/show/components/form.vue
index f479c8ae78d..0c6b61fb893 100644
--- a/app/assets/javascripts/issues/show/components/form.vue
+++ b/app/assets/javascripts/issues/show/components/form.vue
@@ -1,7 +1,6 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import $ from 'jquery';
-import Autosave from '~/autosave';
+import { getDraft, updateDraft, getLockVersion, clearDraft } from '~/lib/utils/autosave';
 import { IssuableType } from '~/issues/constants';
 import eventHub from '../event_hub';
 import EditActions from './edit_actions.vue';
@@ -76,10 +75,17 @@ export default {
     },
   },
   data() {
+    const autosaveKey = [document.location.pathname, document.location.search];
+    const descriptionAutosaveKey = [...autosaveKey, 'description'];
+    const titleAutosaveKey = [...autosaveKey, 'title'];
+
     return {
+      titleAutosaveKey,
+      descriptionAutosaveKey,
+      autosaveReset: false,
       formData: {
-        title: this.formState.title,
-        description: this.formState.description,
+        title: getDraft(titleAutosaveKey) || this.formState.title,
+        description: getDraft(descriptionAutosaveKey) || this.formState.description,
       },
       showOutdatedDescriptionWarning: false,
     };
@@ -118,58 +124,40 @@ export default {
   },
   methods: {
     initAutosave() {
-      const {
-        description: {
-          $refs: { textarea },
-        },
-        title: {
-          $refs: { input },
-        },
-      } = this.$refs;
-
-      this.autosaveDescription = new Autosave(
-        $(textarea),
-        [document.location.pathname, document.location.search, 'description'],
-        null,
-        this.formState.lock_version,
-      );
-
-      const savedLockVersion = this.autosaveDescription.getSavedLockVersion();
+      const savedLockVersion = getLockVersion(this.descriptionAutosaveKey);
 
       this.showOutdatedDescriptionWarning =
         savedLockVersion && String(this.formState.lock_version) !== savedLockVersion;
-
-      this.autosaveTitle = new Autosave($(input), [
-        document.location.pathname,
-        document.location.search,
-        'title',
-      ]);
     },
     resetAutosave() {
-      this.autosaveDescription.reset();
-      this.autosaveTitle.reset();
+      this.autosaveReset = true;
+      clearDraft(this.descriptionAutosaveKey);
+      clearDraft(this.titleAutosaveKey);
     },
     keepAutosave() {
-      const {
-        description: {
-          $refs: { textarea },
-        },
-      } = this.$refs;
-
-      textarea.focus();
+      this.$refs.description.focus();
       this.showOutdatedDescriptionWarning = false;
     },
     discardAutosave() {
-      const {
-        description: {
-          $refs: { textarea },
-        },
-      } = this.$refs;
-
-      textarea.value = this.initialDescriptionText;
-      textarea.focus();
+      this.formData.description = this.initialDescriptionText;
+      clearDraft(this.descriptionAutosaveKey);
+      this.$refs.description.focus();
       this.showOutdatedDescriptionWarning = false;
     },
+    updateTitleDraft(title) {
+      updateDraft(this.titleAutosaveKey, title);
+    },
+    updateDescriptionDraft(description) {
+      /*
+       * This conditional statement prevents a race-condition
+       * between clearing the draft and submitting a new draft
+       * update while the user is typing. It happens when saving
+       * using the cmd + enter keyboard shortcut.
+       */
+      if (!this.autosaveReset) {
+        updateDraft(this.descriptionAutosaveKey, description, this.formState.lock_version);
+      }
+    },
   },
 };
 </script>
@@ -194,7 +182,7 @@ export default {
     >
     <div class="row gl-mb-3">
       <div class="col-12">
-        <issuable-title-field ref="title" v-model="formData.title" />
+        <issuable-title-field ref="title" v-model="formData.title" @input="updateTitleDraft" />
       </div>
     </div>
     <div class="row">
@@ -220,6 +208,7 @@ export default {
       :markdown-docs-path="markdownDocsPath"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
+      @input="updateDescriptionDraft"
     />
 
     <edit-actions :endpoint="endpoint" :form-state="formState" :issuable-type="issuableType" />
diff --git a/app/assets/javascripts/lib/utils/autosave.js b/app/assets/javascripts/lib/utils/autosave.js
index dac1da743a2..01316be06a2 100644
--- a/app/assets/javascripts/lib/utils/autosave.js
+++ b/app/assets/javascripts/lib/utils/autosave.js
@@ -1,8 +1,27 @@
+import { isString } from 'lodash';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
+const normalizeKey = (autosaveKey) => {
+  let normalizedKey;
+
+  if (Array.isArray(autosaveKey) && autosaveKey.every(isString)) {
+    normalizedKey = autosaveKey.join('/');
+  } else if (isString(autosaveKey)) {
+    normalizedKey = autosaveKey;
+  } else {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    throw new Error('Invalid autosave key');
+  }
+
+  return `autosave/${normalizedKey}`;
+};
+
+const lockVersionKey = (autosaveKey) => `${normalizeKey(autosaveKey)}/lockVersion`;
+
 export const clearDraft = (autosaveKey) => {
   try {
-    window.localStorage.removeItem(`autosave/${autosaveKey}`);
+    window.localStorage.removeItem(normalizeKey(autosaveKey));
+    window.localStorage.removeItem(lockVersionKey(autosaveKey));
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);
@@ -11,7 +30,7 @@ export const clearDraft = (autosaveKey) => {
 
 export const getDraft = (autosaveKey) => {
   try {
-    return window.localStorage.getItem(`autosave/${autosaveKey}`);
+    return window.localStorage.getItem(normalizeKey(autosaveKey));
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);
@@ -19,9 +38,22 @@ export const getDraft = (autosaveKey) => {
   }
 };
 
-export const updateDraft = (autosaveKey, text) => {
+export const getLockVersion = (autosaveKey) => {
   try {
-    window.localStorage.setItem(`autosave/${autosaveKey}`, text);
+    return window.localStorage.getItem(lockVersionKey(autosaveKey));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return null;
+  }
+};
+
+export const updateDraft = (autosaveKey, text, lockVersion) => {
+  try {
+    window.localStorage.setItem(normalizeKey(autosaveKey), text);
+    if (lockVersion) {
+      window.localStorage.setItem(lockVersionKey(autosaveKey), lockVersion);
+    }
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e);
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
index 9e8eb92d87a..597df2b9bc3 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlEmptyState } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { n__ } from '~/locale';
 import { joinPaths } from '~/lib/utils/url_utility';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
@@ -69,7 +69,7 @@ export default {
         return this.queryVariables;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
index 9ebbdfa920d..8b66165a57a 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/details.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlResizeObserverDirective, GlEmptyState } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
@@ -66,7 +66,7 @@ export default {
         this.updateBreadcrumb();
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
index c1bd71de646..794be8d5195 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import { get } from 'lodash';
 import getContainerRepositoriesQuery from 'shared_queries/container_registry/get_container_repositories.query.graphql';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import Tracking from '~/tracking';
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
@@ -100,7 +100,7 @@ export default {
         this.containerRepositoriesCount = data[this.graphqlResource]?.containerRepositoriesCount;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
     additionalDetails: {
@@ -115,7 +115,7 @@ export default {
         return data[this.graphqlResource]?.containerRepositories.nodes;
       },
       error() {
-        createFlash({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
+        createAlert({ message: FETCH_IMAGES_LIST_ERROR_MESSAGE });
       },
     },
   },
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
index 26d4aa13715..223f427ce0e 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/store/actions.js
@@ -1,5 +1,5 @@
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import {
   DELETE_PACKAGE_ERROR_MESSAGE,
   DELETE_PACKAGE_FILE_ERROR_MESSAGE,
@@ -20,7 +20,7 @@ export const fetchPackageVersions = ({ commit, state }) => {
       }
     })
     .catch(() => {
-      createFlash({ message: FETCH_PACKAGE_VERSIONS_ERROR, type: 'warning' });
+      createAlert({ message: FETCH_PACKAGE_VERSIONS_ERROR, variant: VARIANT_WARNING });
     })
     .finally(() => {
       commit(types.SET_LOADING, false);
@@ -33,7 +33,7 @@ export const deletePackage = ({
   },
 }) => {
   return Api.deleteProjectPackage(project_id, id).catch(() => {
-    createFlash({ message: DELETE_PACKAGE_ERROR_MESSAGE, type: 'warning' });
+    createAlert({ message: DELETE_PACKAGE_ERROR_MESSAGE, variant: VARIANT_WARNING });
   });
 };
 
@@ -51,9 +51,9 @@ export const deletePackageFile = (
     .then(() => {
       const filtered = packageFiles.filter((f) => f.id !== fileId);
       commit(types.UPDATE_PACKAGE_FILES, filtered);
-      createFlash({ message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, type: 'success' });
+      createAlert({ message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE, variant: VARIANT_SUCCESS });
     })
     .catch(() => {
-      createFlash({ message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, type: 'warning' });
+      createAlert({ message: DELETE_PACKAGE_FILE_ERROR_MESSAGE, variant: VARIANT_WARNING });
     });
 };
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
index 184a24047eb..2adf6187c4b 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import {
@@ -84,7 +84,7 @@ export default {
       const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
       if (showAlert) {
         // to be refactored to use gl-alert
-        createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' });
+        createAlert({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, variant: VARIANT_INFO });
         const cleanUrl = window.location.href.split('?')[0];
         historyReplaceState(cleanUrl);
       }
diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
index 51a38c434cb..37b51797490 100644
--- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
+++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/list/stores/actions.js
@@ -1,5 +1,5 @@
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages_and_registries/shared/constants';
 import {
@@ -43,7 +43,7 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
       dispatch('receivePackagesListSuccess', { data, headers });
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: FETCH_PACKAGES_LIST_ERROR_MESSAGE,
       });
     })
@@ -54,7 +54,7 @@ export const requestPackagesList = ({ dispatch, state }, params = {}) => {
 
 export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
   if (!_links || !_links.delete_api_path) {
-    createFlash({
+    createAlert({
       message: DELETE_PACKAGE_ERROR_MESSAGE,
     });
     const error = new Error(MISSING_DELETE_PATH_ERROR);
@@ -69,14 +69,14 @@ export const requestDeletePackage = ({ dispatch, state }, { _links }) => {
       const page = getNewPaginationPage(currentPage, perPage, total - 1);
 
       dispatch('requestPackagesList', { page });
-      createFlash({
+      createAlert({
         message: DELETE_PACKAGE_SUCCESS_MESSAGE,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     })
     .catch(() => {
       dispatch('setLoading', false);
-      createFlash({
+      createAlert({
         message: DELETE_PACKAGE_ERROR_MESSAGE,
       });
     });
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue
index 7a85fd3052e..e1cf4883029 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/functional/delete_package.vue
@@ -1,6 +1,6 @@
 <script>
 import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { s__ } from '~/locale';
 
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/package_registry/constants';
@@ -39,15 +39,15 @@ export default {
           throw data.destroyPackage.errors[0];
         }
         if (this.showSuccessAlert) {
-          createFlash({
+          createAlert({
             message: this.$options.i18n.successMessage,
-            type: 'success',
+            variant: VARIANT_SUCCESS,
           });
         }
       } catch (error) {
-        createFlash({
+        createAlert({
           message: this.$options.i18n.errorMessage,
-          type: 'warning',
+          variant: VARIANT_WARNING,
           captureError: true,
           error,
         });
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
index c10fc914d56..0225beefa13 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue
@@ -10,7 +10,7 @@ import {
   GlTabs,
   GlSprintf,
 } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { objectToQuery } from '~/lib/utils/url_utility';
@@ -101,7 +101,7 @@ export default {
         return data.package || {};
       },
       error(error) {
-        createFlash({
+        createAlert({
           message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
           captureError: true,
           error,
@@ -205,20 +205,20 @@ export default {
         if (data?.destroyPackageFiles?.errors[0]) {
           throw data.destroyPackageFiles.errors[0];
         }
-        createFlash({
+        createAlert({
           message:
             ids.length === 1
               ? DELETE_PACKAGE_FILE_SUCCESS_MESSAGE
               : DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
-          type: 'success',
+          variant: VARIANT_SUCCESS,
         });
       } catch (error) {
-        createFlash({
+        createAlert({
           message:
             ids.length === 1
               ? DELETE_PACKAGE_FILE_ERROR_MESSAGE
               : DELETE_PACKAGE_FILES_ERROR_MESSAGE,
-          type: 'warning',
+          variant: VARIANT_WARNING,
           captureError: true,
           error,
         });
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
index 38df701157a..ed9ab0367dd 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/list.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import { historyReplaceState } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages_and_registries/shared/constants';
@@ -105,7 +105,7 @@ export default {
       const showAlert = urlParams.get(SHOW_DELETE_SUCCESS_ALERT);
       if (showAlert) {
         // to be refactored to use gl-alert
-        createFlash({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, type: 'notice' });
+        createAlert({ message: DELETE_PACKAGE_SUCCESS_MESSAGE, variant: VARIANT_INFO });
         const cleanUrl = window.location.href.split('?')[0];
         historyReplaceState(cleanUrl);
       }
diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue
index 4ba7156b026..271694863e8 100644
--- a/app/assets/javascripts/projects/compare/components/app.vue
+++ b/app/assets/javascripts/projects/compare/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
 import { joinPaths } from '~/lib/utils/url_utility';
 import RevisionCard from './revision_card.vue';
@@ -9,6 +9,8 @@ export default {
   components: {
     RevisionCard,
     GlButton,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     projectCompareIndexPath: {
@@ -53,6 +55,10 @@ export default {
       type: Array,
       required: true,
     },
+    straight: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -67,8 +73,27 @@ export default {
         revision: this.paramsTo,
         refsProjectPath: this.sourceProjectRefsPath,
       },
+      isStraight: this.straight,
     };
   },
+  computed: {
+    straightModeDropdownItems() {
+      return [
+        {
+          modeType: 'off',
+          isEnabled: false,
+          content: '..',
+          testId: 'disableStraightModeButton',
+        },
+        {
+          modeType: 'on',
+          isEnabled: true,
+          content: '...',
+          testId: 'enableStraightModeButton',
+        },
+      ];
+    },
+  },
   methods: {
     onSubmit() {
       this.$refs.form.submit();
@@ -85,6 +110,9 @@ export default {
     onSwapRevision() {
       [this.from, this.to] = [this.to, this.from]; // swaps 'from' and 'to'
     },
+    setStraightMode(isStraight) {
+      this.isStraight = isStraight;
+    },
   },
 };
 </script>
@@ -112,10 +140,22 @@ export default {
         @selectRevision="onSelectRevision"
       />
       <div
-        class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-align-self-end gl-my-4 gl-md-my-0"
+        class="gl-display-flex gl-justify-content-center gl-align-items-center gl-align-self-end gl-my-3 gl-md-my-0 gl-pl-3 gl-pr-3"
         data-testid="ellipsis"
       >
-        ...
+        <input :value="isStraight ? 'true' : 'false'" type="hidden" name="straight" />
+        <gl-dropdown data-testid="modeDropdown" :text="isStraight ? '...' : '..'" size="small">
+          <gl-dropdown-item
+            v-for="mode in straightModeDropdownItems"
+            :key="mode.modeType"
+            :is-check-item="true"
+            :is-checked="isStraight == mode.isEnabled"
+            :data-testid="mode.testId"
+            @click="setStraightMode(mode.isEnabled)"
+          >
+            <span class="dropdown-menu-inner-content"> {{ mode.content }} </span>
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
       <revision-card
         data-testid="targetRevisionCard"
diff --git a/app/assets/javascripts/projects/compare/index.js b/app/assets/javascripts/projects/compare/index.js
index 074b8565c3c..284cee6d7f1 100644
--- a/app/assets/javascripts/projects/compare/index.js
+++ b/app/assets/javascripts/projects/compare/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import CompareApp from './components/app.vue';
 
 export default function init() {
@@ -9,6 +10,7 @@ export default function init() {
     targetProjectRefsPath,
     paramsFrom,
     paramsTo,
+    straight,
     projectCompareIndexPath,
     projectMergeRequestPath,
     createMrPath,
@@ -29,6 +31,7 @@ export default function init() {
           targetProjectRefsPath,
           paramsFrom,
           paramsTo,
+          straight: parseBoolean(straight),
           projectCompareIndexPath,
           projectMergeRequestPath,
           createMrPath,
diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
index 6c615109bb8..7126d69c8c6 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue
@@ -13,7 +13,7 @@ import {
   GlButton,
 } from '@gitlab/ui';
 import { kebabCase, snakeCase } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
@@ -125,7 +125,7 @@ export default {
         return data?.workspace?.issuable.attribute;
       },
       error(error) {
-        createFlash({
+        createAlert({
           message: this.i18n.currentFetchError,
           captureError: true,
           error,
@@ -179,7 +179,7 @@ export default {
         return [];
       },
       error(error) {
-        createFlash({ message: this.i18n.listFetchError, captureError: true, error });
+        createAlert({ message: this.i18n.listFetchError, captureError: true, error });
       },
     },
   },
@@ -280,7 +280,7 @@ export default {
         })
         .then(({ data }) => {
           if (data.issuableSetAttribute?.errors?.length) {
-            createFlash({
+            createAlert({
               message: data.issuableSetAttribute.errors[0],
               captureError: true,
               error: data.issuableSetAttribute.errors[0],
@@ -290,7 +290,7 @@ export default {
           }
         })
         .catch((error) => {
-          createFlash({ message: this.i18n.updateError, captureError: true, error });
+          createAlert({ message: this.i18n.updateError, captureError: true, error });
         })
         .finally(() => {
           this.updating = false;
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index 61e4aa5a8e6..99e7c825b72 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlDropdownForm, GlIcon, GlLoadingIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
@@ -74,7 +74,7 @@ export default {
         this.$emit('subscribedUpdated', data.workspace?.issuable?.subscribed);
       },
       error() {
-        createFlash({
+        createAlert({
           message: sprintf(
             __('Something went wrong while setting %{issuableType} notifications.'),
             {
@@ -138,7 +138,7 @@ export default {
             },
           }) => {
             if (errors.length) {
-              createFlash({
+              createAlert({
                 message: errors[0],
               });
             }
@@ -149,7 +149,7 @@ export default {
           },
         )
         .catch(() => {
-          createFlash({
+          createAlert({
             message: sprintf(
               __('Something went wrong while setting %{issuableType} notifications.'),
               {
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/report.vue b/app/assets/javascripts/sidebar/components/time_tracking/report.vue
index d751816bd94..124464088cf 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/report.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/report.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon, GlTableLite, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { formatDate, parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
@@ -47,7 +47,7 @@ export default {
         return this.extractTimelogs(data);
       },
       error() {
-        createFlash({ message: __('Something went wrong. Please try again.') });
+        createAlert({ message: __('Something went wrong. Please try again.') });
       },
     },
   },
@@ -105,7 +105,7 @@ export default {
           }
         })
         .catch((error) => {
-          createFlash({
+          createAlert({
             message: s__('TimeTracking|An error occurred while removing the timelog.'),
             captureError: true,
             error,
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
index 42e16aae312..5da2d65723a 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { produce } from 'immer';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __, sprintf } from '~/locale';
 import { todoQueries, TodoMutationTypes, todoMutations } from '~/sidebar/constants';
 import { todoLabel } from '~/vue_shared/components/sidebar/todo_toggle//utils';
@@ -73,7 +73,7 @@ export default {
         this.$emit('todoUpdated', currentUserTodos.length > 0);
       },
       error() {
-        createFlash({
+        createAlert({
           message: sprintf(__('Something went wrong while setting %{issuableType} to-do item.'), {
             issuableType: this.issuableType,
           }),
@@ -155,7 +155,7 @@ export default {
             },
           }) => {
             if (errors.length) {
-              createFlash({
+              createAlert({
                 message: errors[0],
               });
             }
@@ -166,7 +166,7 @@ export default {
           },
         )
         .catch(() => {
-          createFlash({
+          createAlert({
             message: sprintf(__('Something went wrong while setting %{issuableType} to-do item.'), {
               issuableType: this.issuableType,
             }),
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index 5a3122e83d0..2cce27df598 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { escape } from 'lodash';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 
 function isValidProjectId(id) {
@@ -44,7 +44,7 @@ class SidebarMoveIssue {
           .fetchAutocompleteProjects(searchTerm)
           .then(callback)
           .catch(() =>
-            createFlash({
+            createAlert({
               message: __('An error occurred while fetching projects autocomplete.'),
             }),
           );
@@ -79,7 +79,7 @@ class SidebarMoveIssue {
       this.$confirmButton.disable().addClass('is-loading');
 
       this.mediator.moveIssue().catch(() => {
-        createFlash({ message: __('An error occurred while moving the issue.') });
+        createAlert({ message: __('An error occurred while moving the issue.') });
         this.$confirmButton.enable().removeClass('is-loading');
       });
     }
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index f7c93b6903c..238960046a5 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -1,5 +1,5 @@
 import Store from '~/sidebar/stores/sidebar_store';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
 import { visitUrl } from '../lib/utils/url_utility';
@@ -97,7 +97,7 @@ export default class SidebarMediator {
         this.processFetchedData(restResponse.data, graphQlResponse.data);
       })
       .catch(() =>
-        createFlash({
+        createAlert({
           message: __('Error occurred when fetching sidebar data'),
         }),
       );
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 26838682fc8..6e5b2ce4dbe 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,10 +1,10 @@
 /* eslint-disable consistent-return */
 
 import $ from 'jquery';
+import { createAlert } from '~/flash';
 import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 import { spriteIcon } from '~/lib/utils/common_utils';
 import FilesCommentButton from './files_comment_button';
-import createFlash from './flash';
 import initImageDiffHelper from './image_diff/helpers/init_image_diff';
 import axios from './lib/utils/axios_utils';
 import { __ } from './locale';
@@ -96,7 +96,7 @@ export default class SingleFileDiff {
         if (cb) cb();
       })
       .catch(() => {
-        createFlash({
+        createAlert({
           message: __('An error occurred while retrieving diff'),
         });
       });
diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 2537ec78850..4a7528d9c8e 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -2,7 +2,7 @@
 import { GlButton, GlLoadingIcon, GlFormInput, GlFormGroup } from '@gitlab/ui';
 
 import eventHub from '~/blob/components/eventhub';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { redirectTo, joinPaths } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
 import {
@@ -145,7 +145,7 @@ export default {
       const defaultErrorMsg = this.newSnippet
         ? SNIPPET_CREATE_MUTATION_ERROR
         : SNIPPET_UPDATE_MUTATION_ERROR;
-      createFlash({
+      createAlert({
         message: sprintf(defaultErrorMsg, { err }),
       });
       this.isUpdating = false;
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index fe169775f96..7e80928cbea 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { getBaseURL, joinPaths } from '~/lib/utils/url_utility';
 import { sprintf } from '~/locale';
@@ -63,7 +63,7 @@ export default {
         .catch((e) => this.flashAPIFailure(e));
     },
     flashAPIFailure(err) {
-      createFlash({ message: sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }) });
+      createAlert({ message: sprintf(SNIPPET_BLOB_CONTENT_FETCH_ERROR, { err }) });
     },
   },
 };
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index dd8f2897018..759a3f31a05 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -19,7 +19,7 @@ import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { __, s__, sprintf } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_SUCCESS } from '~/flash';
 
 import DeleteSnippetMutation from '../mutations/delete_snippet.mutation.graphql';
 
@@ -196,12 +196,12 @@ export default {
       try {
         this.isSubmittingSpam = true;
         await axios.post(this.reportAbusePath);
-        createFlash({
+        createAlert({
           message: this.$options.i18n.snippetSpamSuccess,
-          type: FLASH_TYPES.SUCCESS,
+          variant: VARIANT_SUCCESS,
         });
       } catch (error) {
-        createFlash({ message: this.$options.i18n.snippetSpamFailure });
+        createAlert({ message: this.$options.i18n.snippetSpamFailure, variant: VARIANT_DANGER });
       } finally {
         this.isSubmittingSpam = false;
       }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 94a1b805b99..870972156c5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -26,16 +26,6 @@ export default {
       required: false,
       default: true,
     },
-    divergedCommitsCount: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    targetBranchPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     closesText() {
diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb
index d7fd65f02a8..61308f24412 100644
--- a/app/controllers/projects/compare_controller.rb
+++ b/app/controllers/projects/compare_controller.rb
@@ -47,7 +47,8 @@ class Projects::CompareController < Projects::ApplicationController
     from_to_vars = {
       from: compare_params[:from].presence,
       to: compare_params[:to].presence,
-      from_project_id: compare_params[:from_project_id].presence
+      from_project_id: compare_params[:from_project_id].presence,
+      straight: compare_params[:straight].presence
     }
 
     if from_to_vars[:from].blank? || from_to_vars[:to].blank?
@@ -112,7 +113,11 @@ class Projects::CompareController < Projects::ApplicationController
   def compare
     return @compare if defined?(@compare)
 
-    @compare = CompareService.new(source_project, head_ref).execute(target_project, start_ref)
+    @compare = CompareService.new(source_project, head_ref).execute(target_project, start_ref, straight: straight)
+  end
+
+  def straight
+    compare_params[:straight] == "true"
   end
 
   def start_ref
@@ -160,6 +165,6 @@ class Projects::CompareController < Projects::ApplicationController
   # rubocop: enable CodeReuse/ActiveRecord
 
   def compare_params
-    @compare_params ||= params.permit(:from, :to, :from_project_id)
+    @compare_params ||= params.permit(:from, :to, :from_project_id, :straight)
   end
 end
diff --git a/app/graphql/types/branch_protections/merge_access_level_type.rb b/app/graphql/types/branch_protections/merge_access_level_type.rb
index 85295e1ba25..e8fcd57ba80 100644
--- a/app/graphql/types/branch_protections/merge_access_level_type.rb
+++ b/app/graphql/types/branch_protections/merge_access_level_type.rb
@@ -4,7 +4,7 @@ module Types
   module BranchProtections
     class MergeAccessLevelType < BaseAccessLevelType # rubocop:disable Graphql/AuthorizeTypes
       graphql_name 'MergeAccessLevel'
-      description 'Represents the merge access level of a branch protection.'
+      description 'Defines which user roles, users, or groups can merge into a protected branch.'
       accepts ::ProtectedBranch::MergeAccessLevel
     end
   end
diff --git a/app/graphql/types/branch_protections/push_access_level_type.rb b/app/graphql/types/branch_protections/push_access_level_type.rb
index bfbdc4edbea..c5e21fad88d 100644
--- a/app/graphql/types/branch_protections/push_access_level_type.rb
+++ b/app/graphql/types/branch_protections/push_access_level_type.rb
@@ -4,7 +4,7 @@ module Types
   module BranchProtections
     class PushAccessLevelType < BaseAccessLevelType # rubocop:disable Graphql/AuthorizeTypes
       graphql_name 'PushAccessLevel'
-      description 'Represents the push access level of a branch protection.'
+      description 'Defines which user roles, users, or groups can push to a protected branch.'
       accepts ::ProtectedBranch::PushAccessLevel
     end
   end
diff --git a/app/helpers/compare_helper.rb b/app/helpers/compare_helper.rb
index e955ad4cfda..9ecf780f55b 100644
--- a/app/helpers/compare_helper.rb
+++ b/app/helpers/compare_helper.rb
@@ -42,7 +42,8 @@ module CompareHelper
       source_project_refs_path: refs_project_path(project),
       target_project_refs_path: refs_project_path(@target_project),
       params_from: params[:from],
-      params_to: params[:to]
+      params_to: params[:to],
+      straight: params[:straight]
     }.tap do |data|
       data[:projects_from] = target_projects(project).map do |target_project|
         { id: target_project.id, name: target_project.full_path }
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 84eb2706929..2ac926a7fc3 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -1,5 +1,5 @@
 - page_description brand_title unless page_description
-- site_name = "GitLab"
+- site_name = _('GitLab')
 %head{ prefix: "og: http://ogp.me/ns#" }
   %meta{ charset: "utf-8" }
 
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 95186b85838..1bdf3d1e6e3 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -5,7 +5,7 @@
   .js-signature-container{ data: { 'signatures-path' => signatures_namespace_project_compare_index_path } }
     #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
-- if @commits.present?
+- if @commits.present? || @diffs.present?
   -# Only show commit list in the first page
   - hide_commit_list = params[:page].present? && params[:page] != '1'
   = render "projects/commits/commit_list" unless hide_commit_list
diff --git a/config/feature_flags/development/usage_data_i_ci_secrets_management_vault_build_created.yml b/config/feature_flags/development/usage_data_i_ci_secrets_management_vault_build_created.yml
deleted file mode 100644
index 0019b949a98..00000000000
--- a/config/feature_flags/development/usage_data_i_ci_secrets_management_vault_build_created.yml
+++ /dev/null
@@ -1,8 +0,0 @@
----
-name: usage_data_i_ci_secrets_management_vault_build_created
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46515
-rollout_issue_url: 
-milestone: '13.6'
-type: development
-group: group::configure
-default_enabled: true
diff --git a/config/feature_flags/ops/jira_raise_timeouts.yml b/config/feature_flags/ops/jira_raise_timeouts.yml
index d1ab0ff0670..ac572b172fc 100644
--- a/config/feature_flags/ops/jira_raise_timeouts.yml
+++ b/config/feature_flags/ops/jira_raise_timeouts.yml
@@ -1,7 +1,7 @@
 ---
 name: jira_raise_timeouts
 introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/86439
-rollout_issue_url: 
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/375587
 milestone: '15.0'
 type: ops
 group: group::integrations
diff --git a/doc/.vale/gitlab/spelling-exceptions.txt b/doc/.vale/gitlab/spelling-exceptions.txt
index 84c4e668dcf..5d268fdb241 100644
--- a/doc/.vale/gitlab/spelling-exceptions.txt
+++ b/doc/.vale/gitlab/spelling-exceptions.txt
@@ -440,6 +440,7 @@ onboarding
 OpenID
 OpenShift
 Opsgenie
+outdent
 Overcommit
 Packagist
 parallelization
diff --git a/doc/api/graphql/reference/index.md b/doc/api/graphql/reference/index.md
index 935004ee3fd..8e56b86d741 100644
--- a/doc/api/graphql/reference/index.md
+++ b/doc/api/graphql/reference/index.md
@@ -9322,6 +9322,29 @@ The edge type for [`TreeEntry`](#treeentry).
 | <a id="treeentryedgecursor"></a>`cursor` | [`String!`](#string) | A cursor for use in pagination. |
 | <a id="treeentryedgenode"></a>`node` | [`TreeEntry`](#treeentry) | The item at the end of the edge. |
 
+#### `UnprotectAccessLevelConnection`
+
+The connection type for [`UnprotectAccessLevel`](#unprotectaccesslevel).
+
+##### Fields
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| <a id="unprotectaccesslevelconnectionedges"></a>`edges` | [`[UnprotectAccessLevelEdge]`](#unprotectaccessleveledge) | A list of edges. |
+| <a id="unprotectaccesslevelconnectionnodes"></a>`nodes` | [`[UnprotectAccessLevel]`](#unprotectaccesslevel) | A list of nodes. |
+| <a id="unprotectaccesslevelconnectionpageinfo"></a>`pageInfo` | [`PageInfo!`](#pageinfo) | Information to aid in pagination. |
+
+#### `UnprotectAccessLevelEdge`
+
+The edge type for [`UnprotectAccessLevel`](#unprotectaccesslevel).
+
+##### Fields
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| <a id="unprotectaccessleveledgecursor"></a>`cursor` | [`String!`](#string) | A cursor for use in pagination. |
+| <a id="unprotectaccessleveledgenode"></a>`node` | [`UnprotectAccessLevel`](#unprotectaccesslevel) | The item at the end of the edge. |
+
 #### `UploadRegistryConnection`
 
 The connection type for [`UploadRegistry`](#uploadregistry).
@@ -10204,6 +10227,7 @@ Branch protection details for a branch rule.
 | <a id="branchprotectioncodeownerapprovalrequired"></a>`codeOwnerApprovalRequired` | [`Boolean!`](#boolean) | Enforce code owner approvals before allowing a merge. |
 | <a id="branchprotectionmergeaccesslevels"></a>`mergeAccessLevels` | [`MergeAccessLevelConnection`](#mergeaccesslevelconnection) | Details about who can merge when this branch is the source branch. (see [Connections](#connections)) |
 | <a id="branchprotectionpushaccesslevels"></a>`pushAccessLevels` | [`PushAccessLevelConnection`](#pushaccesslevelconnection) | Details about who can push when this branch is the source branch. (see [Connections](#connections)) |
+| <a id="branchprotectionunprotectaccesslevels"></a>`unprotectAccessLevels` | [`UnprotectAccessLevelConnection`](#unprotectaccesslevelconnection) | Details about who can unprotect this branch. (see [Connections](#connections)) |
 
 ### `BranchRule`
 
@@ -13937,7 +13961,7 @@ Maven metadata.
 
 ### `MergeAccessLevel`
 
-Represents the merge access level of a branch protection.
+Defines which user roles, users, or groups can merge into a protected branch.
 
 #### Fields
 
@@ -17345,7 +17369,7 @@ Which group, user or role is allowed to execute deployments to the environment.
 
 ### `PushAccessLevel`
 
-Represents the push access level of a branch protection.
+Defines which user roles, users, or groups can push to a protected branch.
 
 #### Fields
 
@@ -18574,6 +18598,19 @@ Represents a directory.
 | <a id="treeentrywebpath"></a>`webPath` | [`String`](#string) | Web path for the tree entry (directory). |
 | <a id="treeentryweburl"></a>`webUrl` | [`String`](#string) | Web URL for the tree entry (directory). |
 
+### `UnprotectAccessLevel`
+
+Defines which user roles, users, or groups can unprotect a protected branch.
+
+#### Fields
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| <a id="unprotectaccesslevelaccesslevel"></a>`accessLevel` | [`Int!`](#int) | GitLab::Access level. |
+| <a id="unprotectaccesslevelaccessleveldescription"></a>`accessLevelDescription` | [`String!`](#string) | Human readable representation for this access level. |
+| <a id="unprotectaccesslevelgroup"></a>`group` | [`Group`](#group) | Group associated with this access level. |
+| <a id="unprotectaccessleveluser"></a>`user` | [`UserCore`](#usercore) | User associated with this access level. |
+
 ### `UploadRegistry`
 
 Represents the Geo replication and verification state of an upload.
diff --git a/doc/development/database/table_partitioning.md b/doc/development/database/table_partitioning.md
index 7d54d1919fd..b1bcb92cb73 100644
--- a/doc/development/database/table_partitioning.md
+++ b/doc/development/database/table_partitioning.md
@@ -321,26 +321,14 @@ class PreparePrimaryKeyForPartitioning < Gitlab::Database::Migration[2.0]
   NEW_INDEX_NAME = :new_index_name
 
   def up
-    with_lock_retries(raise_on_exhaustion: true) do
-      execute("ALTER TABLE #{TABLE_NAME} DROP CONSTRAINT #{PRIMARY_KEY} CASCADE")
-
-      rename_index(TABLE_NAME, NEW_INDEX_NAME, PRIMARY_KEY)
-
-      execute("ALTER TABLE #{TABLE_NAME} ADD CONSTRAINT #{PRIMARY_KEY} PRIMARY KEY USING INDEX #{PRIMARY_KEY}")
-    end
+    swap_primary_key(TABLE_NAME, PRIMARY_KEY, NEW_INDEX_NAME)
   end
 
   def down
     add_concurrent_index(TABLE_NAME, :id, unique: true, name: OLD_INDEX_NAME)
     add_concurrent_index(TABLE_NAME, [:id, :partition_id], unique: true, name: NEW_INDEX_NAME)
 
-    with_lock_retries(raise_on_exhaustion: true) do
-      execute("ALTER TABLE #{TABLE_NAME} DROP CONSTRAINT #{PRIMARY_KEY} CASCADE")
-
-      rename_index(TABLE_NAME, OLD_INDEX_NAME, PRIMARY_KEY)
-
-      execute("ALTER TABLE #{TABLE_NAME} ADD CONSTRAINT #{PRIMARY_KEY} PRIMARY KEY USING INDEX #{PRIMARY_KEY}")
-    end
+    unswap_primary_key(TABLE_NAME, PRIMARY_KEY, OLD_INDEX_NAME)
   end
 end
 ```
diff --git a/doc/development/migration_style_guide.md b/doc/development/migration_style_guide.md
index 4b5abfedbc4..26e2a09c0e2 100644
--- a/doc/development/migration_style_guide.md
+++ b/doc/development/migration_style_guide.md
@@ -982,6 +982,43 @@ NOTE:
 `add_sequence` should be avoided for columns with foreign keys.
 Adding sequence to these columns is **only allowed** in the down method (restore previous schema state).
 
+## Swapping primary key
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/98645) in GitLab 15.5.
+
+Swapping the primary key is required to partition a table as the **partition key must be included in the primary key**.
+
+You can use the `swap_primary_key` method provided by the database team.
+
+Under the hood, it works like this:
+
+- Drop the primary key constraint.
+- Add the primary key using the index defined beforehand.
+
+```ruby
+class SwapPrimaryKey < Gitlab::Database::Migration[2.0]
+  TABLE_NAME = :table_name
+  PRIMARY_KEY = :table_name_pkey
+  OLD_INDEX_NAME = :old_index_name
+  NEW_INDEX_NAME = :new_index_name
+
+  def up
+    swap_primary_key(TABLE_NAME, PRIMARY_KEY, NEW_INDEX_NAME)
+  end
+
+  def down
+    add_concurrent_index(TABLE_NAME, :id, unique: true, name: OLD_INDEX_NAME)
+    add_concurrent_index(TABLE_NAME, [:id, :partition_id], unique: true, name: NEW_INDEX_NAME)
+
+    unswap_primary_key(TABLE_NAME, PRIMARY_KEY, OLD_INDEX_NAME)
+  end
+end
+```
+
+NOTE:
+Make sure to introduce the new index beforehand in a separate migration in order
+to swap the primary key.
+
 ## Integer column type
 
 By default, an integer column can hold up to a 4-byte (32-bit) number. That is
diff --git a/doc/user/shortcuts.md b/doc/user/shortcuts.md
index 8296633a62e..bf233bef6a2 100644
--- a/doc/user/shortcuts.md
+++ b/doc/user/shortcuts.md
@@ -55,6 +55,8 @@ descriptions):
 | <kbd>Command</kbd> + <kbd>i</kbd>       | <kbd>Control</kbd> + <kbd>i</kbd> | Italicize the selected text (surround it with `_`). |
 | <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>x</kbd> | <kbd>Control</kbd> + <kbd>Shift</kbd> + <kbd>x</kbd> | Strike through the selected text (surround it with `~~`). |
 | <kbd>Command</kbd> + <kbd>k</kbd>       | <kbd>Control</kbd> + <kbd>k</kbd> | Add a link (surround the selected text with `[]()`). |
+| <kbd>Command</kbd> + <kbd>&#93;</kbd> | <kbd>Control</kbd> + <kbd>&#93;</kbd> |  Indent list item. [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/351924) in GitLab 15.3. |
+| <kbd>Command</kbd> + <kbd>&#91;</kbd> | <kbd>Control</kbd> + <kbd>&#91;</kbd> |  Outdent list item. [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/351924) in GitLab 15.3. |
 
 The shortcuts for editing in text fields are always enabled, even if other
 keyboard shortcuts are disabled.
diff --git a/lefthook.yml b/lefthook.yml
index 8a3a0d8c2cb..a2819358bdf 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -8,6 +8,11 @@ pre-push:
       files: git diff --name-only --diff-filter=d $(git merge-base origin/master HEAD)..HEAD
       glob: '*.{js,vue}'
       run: yarn run lint:eslint {files}
+    jsonlint:
+      tags: style
+      files: git diff --name-only --diff-filter=d $(git merge-base origin/master HEAD)..HEAD
+      glob: '*.{json}'
+      run: scripts/lint-json.sh {files}
     haml-lint:
       tags: view haml style
       files: git diff --name-only --diff-filter=d $(git merge-base origin/master HEAD)..HEAD
diff --git a/lib/gitlab/database/migration_helpers.rb b/lib/gitlab/database/migration_helpers.rb
index e574422ce11..0568e734c78 100644
--- a/lib/gitlab/database/migration_helpers.rb
+++ b/lib/gitlab/database/migration_helpers.rb
@@ -1503,6 +1503,26 @@ into similar problems in the future (e.g. when new tables are created).
         SQL
       end
 
+      def drop_constraint(table_name, constraint_name, cascade: false)
+        execute <<~SQL
+          ALTER TABLE #{quote_table_name(table_name)} DROP CONSTRAINT #{quote_column_name(constraint_name)} #{cascade_statement(cascade)}
+        SQL
+      end
+
+      def add_primary_key_using_index(table_name, pk_name, index_to_use)
+        execute <<~SQL
+          ALTER TABLE #{quote_table_name(table_name)} ADD CONSTRAINT #{quote_table_name(pk_name)} PRIMARY KEY USING INDEX #{quote_table_name(index_to_use)}
+        SQL
+      end
+
+      def swap_primary_key(table_name, primary_key_name, index_to_use)
+        with_lock_retries(raise_on_exhaustion: true) do
+          drop_constraint(table_name, primary_key_name, cascade: true)
+          add_primary_key_using_index(table_name, primary_key_name, index_to_use)
+        end
+      end
+      alias_method :unswap_primary_key, :swap_primary_key
+
       def drop_sequence(table_name, column_name, sequence_name)
         execute <<~SQL
           ALTER TABLE #{quote_table_name(table_name)} ALTER COLUMN #{quote_column_name(column_name)} DROP DEFAULT;
@@ -1519,6 +1539,10 @@ into similar problems in the future (e.g. when new tables are created).
 
       private
 
+      def cascade_statement(cascade)
+        cascade ? 'CASCADE' : ''
+      end
+
       def create_temporary_columns_and_triggers(table, columns, primary_key: :id, data_type: :bigint)
         unless table_exists?(table)
           raise "Table #{table} does not exist"
diff --git a/lib/gitlab/usage_data_counters/known_events/common.yml b/lib/gitlab/usage_data_counters/known_events/common.yml
index 50033fec939..bd9c9068632 100644
--- a/lib/gitlab/usage_data_counters/known_events/common.yml
+++ b/lib/gitlab/usage_data_counters/known_events/common.yml
@@ -261,11 +261,6 @@
   redis_slot: project_management
   aggregation: daily
 # Secrets Management
-- name: i_ci_secrets_management_vault_build_created
-  category: ci_secrets_management
-  redis_slot: ci_secrets_management
-  aggregation: weekly
-  feature_flag: usage_data_i_ci_secrets_management_vault_build_created
 - name: i_snippets_show
   category: snippets
   redis_slot: snippets
diff --git a/lib/tasks/gitlab/tw/codeowners.rake b/lib/tasks/gitlab/tw/codeowners.rake
index 148801254bf..c7353b9415d 100644
--- a/lib/tasks/gitlab/tw/codeowners.rake
+++ b/lib/tasks/gitlab/tw/codeowners.rake
@@ -39,7 +39,7 @@ namespace :tw do
       CodeOwnerRule.new('Documentation Guidelines', '@sselhorn'),
       CodeOwnerRule.new('Dynamic Analysis', '@rdickenson'),
       CodeOwnerRule.new('Ecosystem', '@kpaizee'),
-      CodeOwnerRule.new('Editor', '@aqualls'),
+      CodeOwnerRule.new('Editor', '@ashrafkhamis'),
       CodeOwnerRule.new('Foundations', '@rdickenson'),
       CodeOwnerRule.new('Fuzz Testing', '@rdickenson'),
       CodeOwnerRule.new('Geo', '@axil'),
diff --git a/package.json b/package.json
index b08616d586c..5eb03d64c10 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@tiptap/extension-task-item": "^2.0.0-beta.37",
     "@tiptap/extension-task-list": "^2.0.0-beta.29",
     "@tiptap/extension-text": "^2.0.0-beta.17",
+    "@tiptap/suggestion": "^2.0.0-beta.96",
     "@tiptap/vue-2": "^2.0.0-beta.84",
     "apollo-upload-client": "15.0.0",
     "autosize": "^5.0.1",
@@ -171,6 +172,7 @@
     "swagger-ui-dist": "4.12.0",
     "three": "^0.143.0",
     "timeago.js": "^4.0.2",
+    "tippy.js": "^6.3.7",
     "unified": "^10.1.2",
     "unist-builder": "^3.0.0",
     "unist-util-visit-parents": "^5.1.0",
@@ -233,6 +235,7 @@
     "jest-raw-loader": "^1.0.1",
     "jest-transform-graphql": "^2.1.0",
     "jest-util": "^27.5.1",
+    "jsonlint": "^1.6.3",
     "markdownlint-cli": "0.32.2",
     "miragejs": "^0.1.40",
     "mock-apollo-client": "1.2.0",
@@ -262,4 +265,4 @@
     "node": ">=12.22.1",
     "yarn": "^1.10.0"
   }
-}
+}
\ No newline at end of file
diff --git a/qa/qa/tools/ci/qa_changes.rb b/qa/qa/tools/ci/qa_changes.rb
index 75274961efe..846f4dc4769 100644
--- a/qa/qa/tools/ci/qa_changes.rb
+++ b/qa/qa/tools/ci/qa_changes.rb
@@ -11,6 +11,12 @@ module QA
 
         QA_PATTERN = %r{^qa/}.freeze
         SPEC_PATTERN = %r{^qa/qa/specs/features/}.freeze
+        DEPENDENCY_PATTERN = Regexp.union(
+          /_VERSION/,
+          /Gemfile\.lock/,
+          /yarn\.lock/,
+          /Dockerfile\.assets/
+        )
 
         def initialize(mr_diff, mr_labels)
           @mr_diff = mr_diff
@@ -21,7 +27,8 @@ module QA
         #
         # @return [String]
         def qa_tests
-          return if mr_diff.empty?
+          return if mr_diff.empty? || dependency_changes
+
           # make paths relative to qa directory
           return changed_files&.map { |path| path.delete_prefix("qa/") }&.join(" ") if only_spec_changes?
           return qa_spec_directories_for_devops_stage&.join(" ") if non_qa_changes? && mr_labels.any?
@@ -104,6 +111,13 @@ module QA
           Dir.glob("qa/specs/**/*/").select { |dir| dir =~ %r{\d+_#{devops_stage}/$} }
         end
 
+        # Changes to gitlab dependencies
+        #
+        # @return [Boolean]
+        def dependency_changes
+          changed_files.any? { |file| file.match?(DEPENDENCY_PATTERN) }
+        end
+
         # Change files in merge request
         #
         # @return [Array<String>]
diff --git a/qa/spec/tools/ci/qa_changes_spec.rb b/qa/spec/tools/ci/qa_changes_spec.rb
index bc98ec16d7f..a083ed79bdf 100644
--- a/qa/spec/tools/ci/qa_changes_spec.rb
+++ b/qa/spec/tools/ci/qa_changes_spec.rb
@@ -35,7 +35,7 @@ RSpec.describe QA::Tools::Ci::QaChanges do
   context "with framework changes" do
     let(:mr_diff) { [{ path: "qa/qa.rb" }] }
 
-    it ".qa_tests do not return specifix specs" do
+    it ".qa_tests do not return specific specs" do
       expect(qa_changes.qa_tests).to be_nil
     end
 
@@ -84,4 +84,14 @@ RSpec.describe QA::Tools::Ci::QaChanges do
       expect(qa_changes.quarantine_changes?).to eq(true)
     end
   end
+
+  %w[GITALY_SERVER_VERSION Gemfile.lock yarn.lock Dockerfile.assets].each do |dependency_file|
+    context "when #{dependency_file} change" do
+      let(:mr_diff) { [{ path: dependency_file }] }
+
+      it ".qa_tests do not return specific specs" do
+        expect(qa_changes.qa_tests).to be_nil
+      end
+    end
+  end
 end
diff --git a/scripts/lint-json.sh b/scripts/lint-json.sh
new file mode 100755
index 00000000000..685661c789a
--- /dev/null
+++ b/scripts/lint-json.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+for file in "$@"
+do
+  yarn run -s jsonlint -p "$file" | perl -pe 'chomp if eof' | diff "$file" -
+done
diff --git a/spec/controllers/projects/compare_controller_spec.rb b/spec/controllers/projects/compare_controller_spec.rb
index 6ed6f7017e3..3751b89951c 100644
--- a/spec/controllers/projects/compare_controller_spec.rb
+++ b/spec/controllers/projects/compare_controller_spec.rb
@@ -67,11 +67,13 @@ RSpec.describe Projects::CompareController do
         from: from_ref,
         to: to_ref,
         w: whitespace,
-        page: page
+        page: page,
+        straight: straight
       }
     end
 
     let(:whitespace) { nil }
+    let(:straight) { nil }
     let(:page) { nil }
 
     context 'when the refs exist in the same project' do
@@ -142,6 +144,58 @@ RSpec.describe Projects::CompareController do
       end
     end
 
+    context 'when comparing missing commits between source and target' do
+      let(:from_project_id) { nil }
+      let(:from_ref) { '5937ac0a7beb003549fc5fd26fc247adbce4a52e' }
+      let(:to_ref) { '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9' }
+      let(:page) { 1 }
+
+      context 'when comparing them in the other direction' do
+        let(:straight) { "false" }
+        let(:from_ref) { '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9' }
+        let(:to_ref) { '5937ac0a7beb003549fc5fd26fc247adbce4a52e' }
+
+        it 'the commits are there' do
+          show_request
+
+          expect(response).to be_successful
+          expect(assigns(:commits).length).to be >= 2
+          expect(assigns(:diffs).raw_diff_files.size).to be >= 2
+          expect(assigns(:diffs).diff_files.first).to be_present
+        end
+      end
+
+      context 'with straight mode true' do
+        let(:from_ref) { '5937ac0a7beb003549fc5fd26fc247adbce4a52e' }
+        let(:to_ref) { '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9' }
+
+        let(:straight) { "true" }
+
+        it 'the commits are empty, but the removed lines are visible as diffs' do
+          show_request
+
+          expect(response).to be_successful
+          expect(assigns(:commits).length).to be == 0
+          expect(assigns(:diffs).diff_files.size).to be >= 4
+        end
+      end
+
+      context 'with straight mode false' do
+        let(:from_ref) { '5937ac0a7beb003549fc5fd26fc247adbce4a52e' }
+        let(:to_ref) { '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9' }
+
+        let(:straight) { "false" }
+
+        it 'the additional commits are not visible in diffs and commits' do
+          show_request
+
+          expect(response).to be_successful
+          expect(assigns(:commits).length).to be == 0
+          expect(assigns(:diffs).diff_files.size).to be == 0
+        end
+      end
+    end
+
     context 'when the refs exist in different projects but the user cannot see' do
       let(:from_project_id) { private_fork.id }
       let(:from_ref) { 'improve%2Fmore-awesome' }
@@ -450,10 +504,13 @@ RSpec.describe Projects::CompareController do
         project_id: project,
         from: from_ref,
         to: to_ref,
+        straight: straight,
         format: :json
       }
     end
 
+    let(:straight) { nil }
+
     context 'when the source and target refs exist' do
       let(:from_ref) { 'improve%2Fawesome' }
       let(:to_ref) { 'feature' }
@@ -464,6 +521,39 @@ RSpec.describe Projects::CompareController do
         let(:signature_commit) { project.commit_by(oid: '0b4bc9a49b562e85de7cc9e834518ea6828729b9') }
         let(:non_signature_commit) { build(:commit, project: project, safe_message: "message", sha: 'non_signature_commit') }
 
+        before do
+          escaped_from_ref = Addressable::URI.unescape(from_ref)
+          escaped_to_ref = Addressable::URI.unescape(to_ref)
+
+          compare_service = CompareService.new(project, escaped_to_ref)
+          compare = compare_service.execute(project, escaped_from_ref, straight: false)
+
+          expect(CompareService).to receive(:new).with(project, escaped_to_ref).and_return(compare_service)
+          expect(compare_service).to receive(:execute).with(project, escaped_from_ref, straight: false).and_return(compare)
+
+          expect(compare).to receive(:commits).and_return(CommitCollection.new(project, [signature_commit, non_signature_commit]))
+          expect(non_signature_commit).to receive(:has_signature?).and_return(false)
+        end
+
+        it 'returns only the commit with a signature' do
+          signatures_request
+
+          expect(response).to have_gitlab_http_status(:ok)
+          signatures = json_response['signatures']
+
+          expect(signatures.size).to eq(1)
+          expect(signatures.first['commit_sha']).to eq(signature_commit.sha)
+          expect(signatures.first['html']).to be_present
+        end
+      end
+
+      context 'when the user has access to the project with straight compare' do
+        render_views
+
+        let(:signature_commit) { project.commit_by(oid: '0b4bc9a49b562e85de7cc9e834518ea6828729b9') }
+        let(:non_signature_commit) { build(:commit, project: project, safe_message: "message", sha: 'non_signature_commit') }
+        let(:straight) { "true" }
+
         before do
           escaped_from_ref = Addressable::URI.unescape(from_ref)
           escaped_to_ref = Addressable::URI.unescape(to_ref)
@@ -472,7 +562,7 @@ RSpec.describe Projects::CompareController do
           compare = compare_service.execute(project, escaped_from_ref)
 
           expect(CompareService).to receive(:new).with(project, escaped_to_ref).and_return(compare_service)
-          expect(compare_service).to receive(:execute).with(project, escaped_from_ref).and_return(compare)
+          expect(compare_service).to receive(:execute).with(project, escaped_from_ref, straight: true).and_return(compare)
 
           expect(compare).to receive(:commits).and_return(CommitCollection.new(project, [signature_commit, non_signature_commit]))
           expect(non_signature_commit).to receive(:has_signature?).and_return(false)
diff --git a/spec/factories/protected_branches.rb b/spec/factories/protected_branches.rb
index 425352783dd..19459d4a211 100644
--- a/spec/factories/protected_branches.rb
+++ b/spec/factories/protected_branches.rb
@@ -39,33 +39,13 @@ FactoryBot.define do
       end
     end
 
-    trait :maintainers_can_push do
+    trait :no_one_can_merge do
       transient do
-        default_push_level { false }
+        default_merge_level { false }
       end
 
       after(:build) do |protected_branch|
-        protected_branch.push_access_levels.new(access_level: Gitlab::Access::MAINTAINER)
-      end
-    end
-
-    trait :maintainers_can_merge do
-      transient do
-        default_push_level { false }
-      end
-
-      after(:build) do |protected_branch|
-        protected_branch.push_access_levels.new(access_level: Gitlab::Access::MAINTAINER)
-      end
-    end
-
-    trait :developers_can_push do
-      transient do
-        default_push_level { false }
-      end
-
-      after(:build) do |protected_branch|
-        protected_branch.push_access_levels.new(access_level: Gitlab::Access::DEVELOPER)
+        protected_branch.merge_access_levels.new(access_level: Gitlab::Access::NO_ACCESS)
       end
     end
 
@@ -79,6 +59,16 @@ FactoryBot.define do
       end
     end
 
+    trait :maintainers_can_merge do
+      transient do
+        default_merge_level { false }
+      end
+
+      after(:build) do |protected_branch|
+        protected_branch.merge_access_levels.new(access_level: Gitlab::Access::MAINTAINER)
+      end
+    end
+
     trait :no_one_can_push do
       transient do
         default_push_level { false }
@@ -89,13 +79,23 @@ FactoryBot.define do
       end
     end
 
-    trait :no_one_can_merge do
+    trait :developers_can_push do
       transient do
-        default_merge_level { false }
+        default_push_level { false }
       end
 
       after(:build) do |protected_branch|
-        protected_branch.merge_access_levels.new(access_level: Gitlab::Access::NO_ACCESS)
+        protected_branch.push_access_levels.new(access_level: Gitlab::Access::DEVELOPER)
+      end
+    end
+
+    trait :maintainers_can_push do
+      transient do
+        default_push_level { false }
+      end
+
+      after(:build) do |protected_branch|
+        protected_branch.push_access_levels.new(access_level: Gitlab::Access::MAINTAINER)
       end
     end
   end
diff --git a/spec/frontend/content_editor/extensions/heading_spec.js b/spec/frontend/content_editor/extensions/heading_spec.js
new file mode 100644
index 00000000000..2fa25e03cdc
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/heading_spec.js
@@ -0,0 +1,54 @@
+import Heading from '~/content_editor/extensions/heading';
+import { createTestEditor, createDocBuilder, triggerNodeInputRule } from '../test_utils';
+
+describe('content_editor/extensions/heading', () => {
+  let tiptapEditor;
+  let doc;
+  let p;
+  let heading;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [Heading] });
+    ({
+      builders: { doc, p, heading },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        heading: { nodeType: Heading.name },
+      },
+    }));
+  });
+
+  describe('when typing a valid heading input rule', () => {
+    it.each`
+      level | inputRuleText
+      ${1}  | ${'# '}
+      ${2}  | ${'## '}
+      ${3}  | ${'### '}
+      ${4}  | ${'#### '}
+      ${5}  | ${'##### '}
+      ${6}  | ${'###### '}
+    `('inserts a heading node for $inputRuleText', ({ level, inputRuleText }) => {
+      const expectedDoc = doc(heading({ level }));
+
+      triggerNodeInputRule({ tiptapEditor, inputRuleText });
+
+      expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    });
+  });
+
+  describe('when typing a invalid heading input rule', () => {
+    it.each`
+      inputRuleText
+      ${'#hi'}
+      ${'#\n'}
+    `('does not insert a heading node for $inputRuleText', ({ inputRuleText }) => {
+      const expectedDoc = doc(p());
+
+      triggerNodeInputRule({ tiptapEditor, inputRuleText });
+
+      // no change to the document
+      expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/markdown_processing_spec_helper.js b/spec/frontend/content_editor/markdown_processing_spec_helper.js
index 228d009e42c..38d384df235 100644
--- a/spec/frontend/content_editor/markdown_processing_spec_helper.js
+++ b/spec/frontend/content_editor/markdown_processing_spec_helper.js
@@ -1,7 +1,10 @@
 import fs from 'fs';
 import jsYaml from 'js-yaml';
 import { memoize } from 'lodash';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
 import { createContentEditor } from '~/content_editor';
+import httpStatus from '~/lib/utils/http_status';
 
 const getFocusedMarkdownExamples = memoize(
   () => process.env.FOCUSED_MARKDOWN_EXAMPLES?.split(',') || [],
@@ -42,6 +45,11 @@ const loadMarkdownApiExamples = (markdownYamlPath) => {
 };
 
 const testSerializesHtmlToMarkdownForElement = async ({ markdown, html }) => {
+  const mock = new MockAdapter(axios);
+
+  // Ignore any API requests from the suggestions plugin
+  mock.onGet().reply(httpStatus.OK, []);
+
   const contentEditor = createContentEditor({
     // Overwrite renderMarkdown to always return this specific html
     renderMarkdown: () => html,
@@ -55,6 +63,8 @@ const testSerializesHtmlToMarkdownForElement = async ({ markdown, html }) => {
   // Assert that the markdown we ended up with after sending it through all the ContentEditor
   // plumbing matches the original markdown from the YAML.
   expect(serializedContent.trim()).toBe(markdown.trim());
+
+  mock.restore();
 };
 
 // describeMarkdownProcesssing
diff --git a/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js b/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
index 459780cc7cf..8c1a3831a74 100644
--- a/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
+++ b/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
@@ -44,7 +44,7 @@ describe('content_editor/services/track_input_rules_and_shortcuts', () => {
 
     describe('when creating a heading using an keyboard shortcut', () => {
       it('sends a tracking event indicating that a heading was created using an input rule', async () => {
-        const shortcuts = Heading.config.addKeyboardShortcuts.call(Heading);
+        const shortcuts = Heading.parent.config.addKeyboardShortcuts.call(Heading);
         const [firstShortcut] = Object.keys(shortcuts);
         const nodeName = Heading.name;
 
diff --git a/spec/frontend/issues/show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js
index 5c0fe991b22..aedb974cbd0 100644
--- a/spec/frontend/issues/show/components/form_spec.js
+++ b/spec/frontend/issues/show/components/form_spec.js
@@ -1,14 +1,16 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Autosave from '~/autosave';
+import { getDraft, updateDraft, clearDraft, getLockVersion } from '~/lib/utils/autosave';
 import DescriptionTemplate from '~/issues/show/components/fields/description_template.vue';
+import IssuableTitleField from '~/issues/show/components/fields/title.vue';
+import DescriptionField from '~/issues/show/components/fields/description.vue';
 import IssueTypeField from '~/issues/show/components/fields/type.vue';
 import formComponent from '~/issues/show/components/form.vue';
 import LockedWarning from '~/issues/show/components/locked_warning.vue';
 import eventHub from '~/issues/show/event_hub';
 
-jest.mock('~/autosave');
+jest.mock('~/lib/utils/autosave');
 
 describe('Inline edit form component', () => {
   let wrapper;
@@ -38,9 +40,14 @@ describe('Inline edit form component', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        DescriptionField,
+      },
     });
   };
 
+  const findTitleField = () => wrapper.findComponent(IssuableTitleField);
+  const findDescriptionField = () => wrapper.findComponent(DescriptionField);
   const findDescriptionTemplate = () => wrapper.findComponent(DescriptionTemplate);
   const findIssuableTypeField = () => wrapper.findComponent(IssueTypeField);
   const findLockedWarning = () => wrapper.findComponent(LockedWarning);
@@ -108,16 +115,34 @@ describe('Inline edit form component', () => {
   });
 
   describe('autosave', () => {
-    let spy;
-
     beforeEach(() => {
-      spy = jest.spyOn(Autosave.prototype, 'reset');
+      getDraft.mockImplementation((autosaveKey) => {
+        return autosaveKey[autosaveKey.length - 1];
+      });
     });
 
-    it('initialized Autosave on mount', () => {
+    it('initializes title and description fields with saved drafts', () => {
       createComponent();
 
-      expect(Autosave).toHaveBeenCalledTimes(2);
+      expect(findTitleField().props().value).toBe('title');
+      expect(findDescriptionField().props().value).toBe('description');
+    });
+
+    it('updates local storage drafts when title and description change', () => {
+      const updatedTitle = 'updated title';
+      const updatedDescription = 'updated description';
+
+      createComponent();
+
+      findTitleField().vm.$emit('input', updatedTitle);
+      findDescriptionField().vm.$emit('input', updatedDescription);
+
+      expect(updateDraft).toHaveBeenCalledWith(expect.any(Array), updatedTitle);
+      expect(updateDraft).toHaveBeenCalledWith(
+        expect.any(Array),
+        updatedDescription,
+        defaultProps.formState.lock_version,
+      );
     });
 
     it('calls reset on autosave when eventHub emits appropriate events', () => {
@@ -125,33 +150,60 @@ describe('Inline edit form component', () => {
 
       eventHub.$emit('close.form');
 
-      expect(spy).toHaveBeenCalledTimes(2);
+      expect(clearDraft).toHaveBeenCalledTimes(2);
 
       eventHub.$emit('delete.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(4);
+      expect(clearDraft).toHaveBeenCalledTimes(4);
 
       eventHub.$emit('update.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(6);
+      expect(clearDraft).toHaveBeenCalledTimes(6);
     });
 
     describe('outdated description', () => {
+      const clientSideMockVersion = 'lock version from local storage';
+      const serverSideMockVersion = 'lock version from server';
+
+      const mockGetLockVersion = () => getLockVersion.mockResolvedValue(clientSideMockVersion);
+
       it('does not show warning if lock version from server is the same as the local lock version', () => {
         createComponent();
         expect(findAlert().exists()).toBe(false);
       });
 
       it('shows warning if lock version from server differs than the local lock version', async () => {
-        Autosave.prototype.getSavedLockVersion.mockResolvedValue('lock version from local storage');
+        mockGetLockVersion();
 
         createComponent({
-          formState: { ...defaultProps.formState, lock_version: 'lock version from server' },
+          formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
         });
 
         await nextTick();
         expect(findAlert().exists()).toBe(true);
       });
+
+      describe('when saved draft is discarded', () => {
+        beforeEach(async () => {
+          mockGetLockVersion();
+
+          createComponent({
+            formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
+          });
+
+          await nextTick();
+
+          findAlert().vm.$emit('secondaryAction');
+        });
+
+        it('hides the warning alert', () => {
+          expect(findAlert().exists()).toBe(false);
+        });
+
+        it('clears the description draft', () => {
+          expect(clearDraft).toHaveBeenCalledWith(expect.any(Array));
+        });
+      });
     });
   });
 });
diff --git a/spec/frontend/lib/utils/autosave_spec.js b/spec/frontend/lib/utils/autosave_spec.js
index 12e97f6cdec..afb49dd6db4 100644
--- a/spec/frontend/lib/utils/autosave_spec.js
+++ b/spec/frontend/lib/utils/autosave_spec.js
@@ -1,32 +1,42 @@
-import { clearDraft, getDraft, updateDraft } from '~/lib/utils/autosave';
+import { clearDraft, getDraft, updateDraft, getLockVersion } from '~/lib/utils/autosave';
 
 describe('autosave utils', () => {
   const autosaveKey = 'dummy-autosave-key';
   const text = 'some dummy text';
+  const lockVersion = '2';
+  const normalizedAutosaveKey = `autosave/${autosaveKey}`;
+  const lockVersionKey = `autosave/${autosaveKey}/lockVersion`;
 
   describe('clearDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
+      localStorage.setItem(lockVersionKey, lockVersion);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
     it('removes the draft from localStorage', () => {
       clearDraft(autosaveKey);
 
-      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(null);
+      expect(localStorage.getItem(normalizedAutosaveKey)).toBe(null);
+    });
+
+    it('removes the lockVersion from localStorage', () => {
+      clearDraft(autosaveKey);
+
+      expect(localStorage.getItem(lockVersionKey)).toBe(null);
     });
   });
 
   describe('getDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
     it('returns the draft from localStorage', () => {
@@ -36,7 +46,7 @@ describe('autosave utils', () => {
     });
 
     it('returns null if no entry exists in localStorage', () => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
 
       const result = getDraft(autosaveKey);
 
@@ -46,19 +56,44 @@ describe('autosave utils', () => {
 
   describe('updateDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
-    it('removes the draft from localStorage', () => {
+    it('updates the stored draft', () => {
       const newText = 'new text';
 
       updateDraft(autosaveKey, newText);
 
-      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(newText);
+      expect(localStorage.getItem(normalizedAutosaveKey)).toBe(newText);
+    });
+
+    describe('when lockVersion is provided', () => {
+      it('updates the stored lockVersion', () => {
+        const newText = 'new text';
+        const newLockVersion = '2';
+
+        updateDraft(autosaveKey, newText, lockVersion);
+
+        expect(localStorage.getItem(lockVersionKey)).toBe(newLockVersion);
+      });
+    });
+  });
+
+  describe('getLockVersion', () => {
+    beforeEach(() => {
+      localStorage.setItem(lockVersionKey, lockVersion);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(lockVersionKey);
+    });
+
+    it('returns the lockVersion from localStorage', () => {
+      expect(getLockVersion(autosaveKey)).toBe(lockVersion);
     });
   });
 });
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
index 31ab108558c..bb970336b94 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
@@ -1,6 +1,6 @@
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from '~/packages_and_registries/infrastructure_registry/details/constants';
 import {
   fetchPackageVersions,
@@ -67,9 +67,9 @@ describe('Actions Package details store', () => {
         [],
       );
       expect(Api.projectPackage).toHaveBeenCalledWith(packageEntity.project_id, packageEntity.id);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: FETCH_PACKAGE_VERSIONS_ERROR,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
@@ -87,9 +87,9 @@ describe('Actions Package details store', () => {
       Api.deleteProjectPackage = jest.fn().mockRejectedValue();
 
       await testAction(deletePackage, undefined, { packageEntity }, [], []);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_ERROR_MESSAGE,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
@@ -112,18 +112,18 @@ describe('Actions Package details store', () => {
         packageEntity.id,
         fileId,
       );
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     });
 
     it('should create flash on API error', async () => {
       Api.deleteProjectPackageFile = jest.fn().mockRejectedValue();
       await testAction(deletePackageFile, fileId, { packageEntity }, [], []);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
index db1d3f3f633..dff95364d7d 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import * as commonUtils from '~/lib/utils/common_utils';
 import PackageListApp from '~/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue';
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/infrastructure_registry/list/constants';
@@ -222,9 +222,9 @@ describe('packages_list_app', () => {
     it(`creates a flash if the query string contains ${SHOW_DELETE_SUCCESS_ALERT}`, () => {
       mountComponent();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_SUCCESS_MESSAGE,
-        type: 'notice',
+        variant: VARIANT_INFO,
       });
     });
 
@@ -238,7 +238,7 @@ describe('packages_list_app', () => {
       setWindowLocation('?');
       mountComponent();
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(commonUtils.historyReplaceState).not.toHaveBeenCalled();
     });
   });
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
index d596f2dae33..36417eaf793 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { MISSING_DELETE_PATH_ERROR } from '~/packages_and_registries/infrastructure_registry/list/constants';
 import * as actions from '~/packages_and_registries/infrastructure_registry/list/stores/actions';
 import * as types from '~/packages_and_registries/infrastructure_registry/list/stores/mutation_types';
@@ -107,7 +107,7 @@ describe('Actions Package list store', () => {
           { type: 'setLoading', payload: false },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it('should force the terraform_module type when forceTerraform is true', async () => {
@@ -209,17 +209,17 @@ describe('Actions Package list store', () => {
           { type: 'setLoading', payload: false },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it.each`
       property             | actionPayload
       ${'_links'}          | ${{}}
       ${'delete_api_path'} | ${{ _links: {} }}
-    `('should reject and createFlash when $property is missing', ({ actionPayload }) => {
+    `('should reject and createAlert when $property is missing', ({ actionPayload }) => {
       return testAction(actions.requestDeletePackage, actionPayload, null, [], []).catch((e) => {
         expect(e).toEqual(new Error(MISSING_DELETE_PATH_ERROR));
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: DELETE_PACKAGE_ERROR_MESSAGE,
         });
       });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
index 14a70def7d0..93c2196b210 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
 
 import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql';
@@ -104,22 +104,22 @@ describe('DeletePackage', () => {
       expect(wrapper.emitted('end')).toEqual([[]]);
     });
 
-    it('does not call createFlash', async () => {
+    it('does not call createAlert', async () => {
       createComponent();
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
 
-    it('calls createFlash with the success message when showSuccessAlert is true', async () => {
+    it('calls createAlert with the success message when showSuccessAlert is true', async () => {
       createComponent({ showSuccessAlert: true });
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DeletePackage.i18n.successMessage,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     });
   });
@@ -141,14 +141,14 @@ describe('DeletePackage', () => {
       expect(wrapper.emitted('end')).toEqual([[]]);
     });
 
-    it('calls createFlash with the error message', async () => {
+    it('calls createAlert with the error message', async () => {
       createComponent({ showSuccessAlert: true });
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DeletePackage.i18n.errorMessage,
-        type: 'warning',
+        variant: VARIANT_WARNING,
         captureError: true,
         error: expect.any(Error),
       });
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
index 83158d1cc5e..0ff49d62b03 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
@@ -6,7 +6,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 
 import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import PackagesApp from '~/packages_and_registries/package_registry/pages/details.vue';
@@ -149,7 +149,7 @@ describe('PackagesApp', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith(
+    expect(createAlert).toHaveBeenCalledWith(
       expect.objectContaining({
         message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
       }),
@@ -383,7 +383,7 @@ describe('PackagesApp', () => {
 
         await doDeleteFile();
 
-        expect(createFlash).toHaveBeenCalledWith(
+        expect(createAlert).toHaveBeenCalledWith(
           expect.objectContaining({
             message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE,
           }),
@@ -399,7 +399,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFile();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
             }),
@@ -416,7 +416,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFile();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
             }),
@@ -468,7 +468,7 @@ describe('PackagesApp', () => {
 
         await doDeleteFiles();
 
-        expect(createFlash).toHaveBeenCalledWith(
+        expect(createAlert).toHaveBeenCalledWith(
           expect.objectContaining({
             message: DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
           }),
@@ -484,7 +484,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFiles();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILES_ERROR_MESSAGE,
             }),
@@ -501,7 +501,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFiles();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILES_ERROR_MESSAGE,
             }),
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index 2dbecf7cc61..9b052a17caa 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -134,6 +134,40 @@ describe('CompareApp component', () => {
     });
   });
 
+  describe('mode dropdown', () => {
+    const findModeDropdownButton = () => wrapper.find('[data-testid="modeDropdown"]');
+    const findEnableStraightModeButton = () =>
+      wrapper.find('[data-testid="enableStraightModeButton"]');
+    const findDisableStraightModeButton = () =>
+      wrapper.find('[data-testid="disableStraightModeButton"]');
+
+    it('renders the mode dropdown button', () => {
+      expect(findModeDropdownButton().exists()).toBe(true);
+    });
+
+    it('has the correct text', () => {
+      expect(findEnableStraightModeButton().text()).toBe('...');
+      expect(findDisableStraightModeButton().text()).toBe('..');
+    });
+
+    it('straight mode button when clicked', async () => {
+      expect(wrapper.props('straight')).toBe(false);
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+
+      findEnableStraightModeButton().vm.$emit('click');
+
+      await nextTick();
+
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('true');
+
+      findDisableStraightModeButton().vm.$emit('click');
+
+      await nextTick();
+
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+    });
+  });
+
   describe('merge request buttons', () => {
     const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
     const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
diff --git a/spec/frontend/projects/compare/components/mock_data.js b/spec/frontend/projects/compare/components/mock_data.js
index 81d64469a2a..28d9a394038 100644
--- a/spec/frontend/projects/compare/components/mock_data.js
+++ b/spec/frontend/projects/compare/components/mock_data.js
@@ -17,6 +17,7 @@ export const appDefaultProps = {
   projects: [sourceProject],
   paramsFrom: 'main',
   paramsTo: 'target/branch',
+  straight: false,
   createMrPath: '',
   sourceProjectRefsPath,
   targetProjectRefsPath,
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index 6761731c093..8ab4d8ea051 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -15,7 +15,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
@@ -369,9 +369,9 @@ describe('SidebarDropdownWidget', () => {
                   findDropdownItemWithText('title').vm.$emit('click');
                 });
 
-                it(`calls createFlash with "${expectedMsg}"`, async () => {
+                it(`calls createAlert with "${expectedMsg}"`, async () => {
                   await nextTick();
-                  expect(createFlash).toHaveBeenCalledWith({
+                  expect(createAlert).toHaveBeenCalledWith({
                     message: expectedMsg,
                     captureError: true,
                     error: expectedMsg,
@@ -455,14 +455,14 @@ describe('SidebarDropdownWidget', () => {
         describe('milestones', () => {
           let projectMilestonesSpy;
 
-          it('should call createFlash if milestones query fails', async () => {
+          it('should call createAlert if milestones query fails', async () => {
             await createComponentWithApollo({
               projectMilestonesSpy: jest.fn().mockRejectedValue(error),
             });
 
             await clickEdit();
 
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: wrapper.vm.i18n.listFetchError,
               captureError: true,
               error: expect.any(Error),
@@ -514,12 +514,12 @@ describe('SidebarDropdownWidget', () => {
       });
 
       describe('currentAttributes', () => {
-        it('should call createFlash if currentAttributes query fails', async () => {
+        it('should call createAlert if currentAttributes query fails', async () => {
           await createComponentWithApollo({
             currentMilestoneSpy: jest.fn().mockRejectedValue(error),
           });
 
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: wrapper.vm.i18n.currentFetchError,
             captureError: true,
             error: expect.any(Error),
diff --git a/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js b/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
index 430acf9f9e7..c94f9918243 100644
--- a/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
+++ b/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import SidebarSubscriptionWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import issueSubscribedQuery from '~/sidebar/queries/issue_subscribed.query.graphql';
@@ -144,7 +144,7 @@ describe('Sidebar Subscriptions Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('merge request', () => {
diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js
index 4e619a4e609..af72122052f 100644
--- a/spec/frontend/sidebar/components/time_tracking/report_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/report_spec.js
@@ -6,7 +6,7 @@ import VueApollo from 'vue-apollo';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import Report from '~/sidebar/components/time_tracking/report.vue';
 import getIssueTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql';
 import getMrTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql';
@@ -65,7 +65,7 @@ describe('Issuable Time Tracking Report', () => {
     mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('for issue', () => {
@@ -153,7 +153,7 @@ describe('Issuable Time Tracking Report', () => {
       await findDeleteButton().trigger('click');
       await waitForPromises();
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(mutateSpy).toHaveBeenCalledWith({
         mutation: deleteTimelogMutation,
         variables: {
@@ -164,7 +164,7 @@ describe('Issuable Time Tracking Report', () => {
       });
     });
 
-    it('calls `createFlash` with errorMessage and does not remove the row on promise reject', async () => {
+    it('calls `createAlert` with errorMessage and does not remove the row on promise reject', async () => {
       const mutateSpy = jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue({});
 
       await waitForPromises();
@@ -180,7 +180,7 @@ describe('Issuable Time Tracking Report', () => {
         },
       });
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while removing the timelog.',
         captureError: true,
         error: expect.any(Object),
diff --git a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
index 71140279adf..f73491ca95f 100644
--- a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
+++ b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
@@ -4,7 +4,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import epicTodoQuery from '~/sidebar/queries/epic_todo.query.graphql';
 import TodoButton from '~/vue_shared/components/sidebar/todo_toggle/todo_button.vue';
@@ -83,7 +83,7 @@ describe('Sidebar Todo Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('collapsed', () => {
diff --git a/spec/frontend/sidebar/sidebar_move_issue_spec.js b/spec/frontend/sidebar/sidebar_move_issue_spec.js
index 2e6807ed9d8..195cc6ddeeb 100644
--- a/spec/frontend/sidebar/sidebar_move_issue_spec.js
+++ b/spec/frontend/sidebar/sidebar_move_issue_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
 import SidebarService from '~/sidebar/services/sidebar_service';
@@ -115,7 +115,7 @@ describe('SidebarMoveIssue', () => {
       // Wait for the move issue request to fail
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
       expect(test.$confirmButton.prop('disabled')).toBe(false);
       expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
     });
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index ea9d696599d..e7dab0ad79d 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -9,7 +9,7 @@ import { stubPerformanceWebAPI } from 'helpers/performance';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import * as urlUtils from '~/lib/utils/url_utility';
 import SnippetEditApp from '~/snippets/components/edit.vue';
 import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
@@ -361,7 +361,7 @@ describe('Snippet Edit app', () => {
           await waitForPromises();
 
           expect(urlUtils.redirectTo).not.toHaveBeenCalled();
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: `Can't create snippet: ${TEST_MUTATION_ERROR}`,
           });
         });
@@ -385,7 +385,7 @@ describe('Snippet Edit app', () => {
             });
 
             expect(urlUtils.redirectTo).not.toHaveBeenCalled();
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: `Can't update snippet: ${TEST_MUTATION_ERROR}`,
             });
           },
@@ -407,7 +407,7 @@ describe('Snippet Edit app', () => {
 
         it('should flash', () => {
           // Apollo automatically wraps the resolver's error in a NetworkError
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: `Can't update snippet: ${TEST_API_ERROR.message}`,
           });
         });
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index f5f86167f2b..33b8e2be969 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -4,7 +4,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
@@ -125,7 +125,7 @@ describe('Snippet Blob Edit component', () => {
     it('should call flash', async () => {
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: "Can't fetch content for the blob: Error: Request failed with status code 500",
       });
     });
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 3d64839a408..c930c9f635b 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -10,7 +10,7 @@ import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
 import SnippetHeader, { i18n } from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/delete_snippet.mutation.graphql';
 import axios from '~/lib/utils/axios_utils';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_SUCCESS } from '~/flash';
 
 jest.mock('~/flash');
 
@@ -267,9 +267,9 @@ describe('Snippet header component', () => {
     });
 
     it.each`
-      request | variant      | text
-      ${200}  | ${'SUCCESS'} | ${i18n.snippetSpamSuccess}
-      ${500}  | ${'DANGER'}  | ${i18n.snippetSpamFailure}
+      request | variant            | text
+      ${200}  | ${VARIANT_SUCCESS} | ${i18n.snippetSpamSuccess}
+      ${500}  | ${VARIANT_DANGER}  | ${i18n.snippetSpamFailure}
     `(
       'renders a "$variant" flash message with "$text" message for a request with a "$request" response',
       async ({ request, variant, text }) => {
@@ -278,9 +278,9 @@ describe('Snippet header component', () => {
         submitAsSpamBtn.trigger('click');
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenLastCalledWith({
+        expect(createAlert).toHaveBeenLastCalledWith({
           message: expect.stringContaining(text),
-          type: FLASH_TYPES[variant],
+          variant,
         });
       },
     );
diff --git a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
index 69964b2687d..6e0717c29d7 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -1,8 +1,6 @@
-import Vue, { nextTick } from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
-import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 
 describe('DiffViewer', () => {
   const requiredProps = {
@@ -14,37 +12,28 @@ describe('DiffViewer', () => {
     oldPath: RED_BOX_IMAGE_URL,
     oldSha: 'DEF',
   };
-  let vm;
+  let wrapper;
 
-  function createComponent(props) {
-    const DiffViewer = Vue.extend(diffViewer);
-
-    vm = mountComponent(DiffViewer, props);
+  function createComponent(propsData) {
+    wrapper = mount(DiffViewer, { propsData });
   }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('renders image diff', async () => {
+  it('renders image diff', () => {
     window.gon = {
       relative_url_root: '',
     };
 
     createComponent({ ...requiredProps, projectPath: '' });
 
-    await nextTick();
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(
-      `//-/raw/DEF/${RED_BOX_IMAGE_URL}`,
-    );
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(
-      `//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`,
-    );
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(`//-/raw/DEF/${RED_BOX_IMAGE_URL}`);
+    expect(wrapper.find('.added img').attributes('src')).toBe(`//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`);
   });
 
-  it('renders fallback download diff display', async () => {
+  it('renders fallback download diff display', () => {
     createComponent({
       ...requiredProps,
       diffViewerMode: 'added',
@@ -52,18 +41,10 @@ describe('DiffViewer', () => {
       oldPath: 'testold.abc',
     });
 
-    await nextTick();
-
-    expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain('testold.abc');
-
-    expect(vm.$el.querySelector('.deleted .btn.btn-default').textContent.trim()).toContain(
-      'Download',
-    );
-
-    expect(vm.$el.querySelector('.added .file-info').textContent.trim()).toContain('test.abc');
-    expect(vm.$el.querySelector('.added .btn.btn-default').textContent.trim()).toContain(
-      'Download',
-    );
+    expect(wrapper.find('.deleted .file-info').text()).toContain('testold.abc');
+    expect(wrapper.find('.deleted .btn.btn-default').text()).toContain('Download');
+    expect(wrapper.find('.added .file-info').text()).toContain('test.abc');
+    expect(wrapper.find('.added .btn.btn-default').text()).toContain('Download');
   });
 
   describe('renamed file', () => {
@@ -85,7 +66,7 @@ describe('DiffViewer', () => {
         oldPath: 'testold.abc',
       });
 
-      expect(vm.$el.textContent).toContain('File renamed with no changes.');
+      expect(wrapper.text()).toContain('File renamed with no changes.');
     });
   });
 
@@ -99,6 +80,6 @@ describe('DiffViewer', () => {
       bMode: '321',
     });
 
-    expect(vm.$el.textContent).toContain('File mode changed from 123 to 321');
+    expect(wrapper.text()).toContain('File mode changed from 123 to 321');
   });
 });
diff --git a/spec/frontend/vue_shared/components/file_finder/item_spec.js b/spec/frontend/vue_shared/components/file_finder/item_spec.js
index b69c33055c1..f0998b1b5c6 100644
--- a/spec/frontend/vue_shared/components/file_finder/item_spec.js
+++ b/spec/frontend/vue_shared/components/file_finder/item_spec.js
@@ -1,127 +1,119 @@
-import Vue, { nextTick } from 'vue';
-import createComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { file } from 'jest/ide/helpers';
 import ItemComponent from '~/vue_shared/components/file_finder/item.vue';
 
 describe('File finder item spec', () => {
-  const Component = Vue.extend(ItemComponent);
-  let vm;
-  let localFile;
+  let wrapper;
 
-  beforeEach(() => {
-    localFile = {
-      ...file(),
-      name: 'test file',
-      path: 'test/file',
-    };
-
-    vm = createComponent(Component, {
-      file: localFile,
-      focused: true,
-      searchText: '',
-      index: 0,
+  const createComponent = ({ file: customFileFields = {}, ...otherProps } = {}) => {
+    wrapper = mount(ItemComponent, {
+      propsData: {
+        file: {
+          ...file(),
+          name: 'test file',
+          path: 'test/file',
+          ...customFileFields,
+        },
+        focused: true,
+        searchText: '',
+        index: 0,
+        ...otherProps,
+      },
     });
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders file name & path', () => {
-    expect(vm.$el.textContent).toContain('test file');
-    expect(vm.$el.textContent).toContain('test/file');
+    createComponent();
+
+    expect(wrapper.text()).toContain('test file');
+    expect(wrapper.text()).toContain('test/file');
   });
 
   describe('focused', () => {
     it('adds is-focused class', () => {
-      expect(vm.$el.classList).toContain('is-focused');
+      createComponent();
+
+      expect(wrapper.classes()).toContain('is-focused');
     });
 
     it('does not have is-focused class when not focused', async () => {
-      vm.focused = false;
+      createComponent({ focused: false });
 
-      await nextTick();
-      expect(vm.$el.classList).not.toContain('is-focused');
+      expect(wrapper.classes()).not.toContain('is-focused');
     });
   });
 
   describe('changed file icon', () => {
     it('does not render when not a changed or temp file', () => {
-      expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
+      createComponent();
+
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(false);
     });
 
     it('renders when a changed file', async () => {
-      vm.file.changed = true;
+      createComponent({ file: { changed: true } });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(true);
     });
 
     it('renders when a temp file', async () => {
-      vm.file.tempFile = true;
+      createComponent({ file: { tempFile: true } });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(true);
     });
   });
 
-  it('emits event when clicked', () => {
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
+  it('emits event when clicked', async () => {
+    createComponent();
 
-    vm.$el.click();
+    await wrapper.find('*').trigger('click');
 
-    expect(vm.$emit).toHaveBeenCalledWith('click', vm.file);
+    expect(wrapper.emitted('click')[0]).toStrictEqual([wrapper.props('file')]);
   });
 
   describe('path', () => {
-    let el;
-
-    beforeEach(async () => {
-      vm.searchText = 'file';
-
-      el = vm.$el.querySelector('.diff-changed-file-path');
-
-      nextTick();
-    });
+    const findChangedFilePath = () => wrapper.find('.diff-changed-file-path');
 
     it('highlights text', () => {
-      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+      createComponent({ searchText: 'file' });
+
+      expect(findChangedFilePath().findAll('.highlighted')).toHaveLength(4);
     });
 
     it('adds ellipsis to long text', async () => {
-      vm.file.path = new Array(70)
+      const path = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
         .join('');
 
-      await nextTick();
-      expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`);
+      createComponent({ searchText: 'file', file: { path } });
+
+      expect(findChangedFilePath().text()).toBe(`...${path.substring(path.length - 60)}`);
     });
   });
 
   describe('name', () => {
-    let el;
-
-    beforeEach(async () => {
-      vm.searchText = 'file';
-
-      el = vm.$el.querySelector('.diff-changed-file-name');
-
-      await nextTick();
-    });
+    const findChangedFileName = () => wrapper.find('.diff-changed-file-name');
 
     it('highlights text', () => {
-      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+      createComponent({ searchText: 'file' });
+
+      expect(findChangedFileName().findAll('.highlighted')).toHaveLength(4);
     });
 
     it('does not add ellipsis to long text', async () => {
-      vm.file.name = new Array(70)
+      const name = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
         .join('');
 
-      await nextTick();
-      expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`);
+      createComponent({ searchText: 'file', file: { name } });
+
+      expect(findChangedFileName().text()).not.toBe(`...${name.substring(name.length - 60)}`);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/gl_countdown_spec.js b/spec/frontend/vue_shared/components/gl_countdown_spec.js
index 0d1d42082ab..af53d256236 100644
--- a/spec/frontend/vue_shared/components/gl_countdown_spec.js
+++ b/spec/frontend/vue_shared/components/gl_countdown_spec.js
@@ -1,10 +1,9 @@
 import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
 describe('GlCountdown', () => {
-  const Component = Vue.extend(GlCountdown);
-  let vm;
+  let wrapper;
   let now = '2000-01-01T00:00:00Z';
 
   beforeEach(() => {
@@ -12,21 +11,20 @@ describe('GlCountdown', () => {
   });
 
   afterEach(() => {
-    vm.$destroy();
-    jest.clearAllTimers();
+    wrapper.destroy();
   });
 
   describe('when there is time remaining', () => {
     beforeEach(async () => {
-      vm = mountComponent(Component, {
-        endDateString: '2000-01-01T01:02:03Z',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: '2000-01-01T01:02:03Z',
+        },
       });
-
-      await nextTick();
     });
 
     it('displays remaining time', () => {
-      expect(vm.$el.textContent).toContain('01:02:03');
+      expect(wrapper.text()).toContain('01:02:03');
     });
 
     it('updates remaining time', async () => {
@@ -34,21 +32,21 @@ describe('GlCountdown', () => {
       jest.advanceTimersByTime(1000);
 
       await nextTick();
-      expect(vm.$el.textContent).toContain('01:02:02');
+      expect(wrapper.text()).toContain('01:02:02');
     });
   });
 
   describe('when there is no time remaining', () => {
     beforeEach(async () => {
-      vm = mountComponent(Component, {
-        endDateString: '1900-01-01T00:00:00Z',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: '1900-01-01T00:00:00Z',
+        },
       });
-
-      await nextTick();
     });
 
     it('displays 00:00:00', () => {
-      expect(vm.$el.textContent).toContain('00:00:00');
+      expect(wrapper.text()).toContain('00:00:00');
     });
   });
 
@@ -62,8 +60,10 @@ describe('GlCountdown', () => {
     });
 
     it('throws a validation error', () => {
-      vm = mountComponent(Component, {
-        endDateString: 'this is invalid',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: 'this is invalid',
+        },
       });
 
       expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1);
diff --git a/spec/frontend/vue_shared/components/panel_resizer_spec.js b/spec/frontend/vue_shared/components/panel_resizer_spec.js
index d8b903e5bfd..0e261124cbf 100644
--- a/spec/frontend/vue_shared/components/panel_resizer_spec.js
+++ b/spec/frontend/vue_shared/components/panel_resizer_spec.js
@@ -1,12 +1,10 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import panelResizer from '~/vue_shared/components/panel_resizer.vue';
+import { mount } from '@vue/test-utils';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 
 describe('Panel Resizer component', () => {
-  let vm;
-  let PanelResizer;
+  let wrapper;
 
-  const triggerEvent = (eventName, el = vm.$el, clientX = 0) => {
+  const triggerEvent = (eventName, el = wrapper.element, clientX = 0) => {
     const event = document.createEvent('MouseEvents');
     event.initMouseEvent(
       eventName,
@@ -29,57 +27,64 @@ describe('Panel Resizer component', () => {
     el.dispatchEvent(event);
   };
 
-  beforeEach(() => {
-    PanelResizer = Vue.extend(panelResizer);
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render a div element with the correct classes and styles', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'left',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'left',
+      },
     });
 
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe(
-      'position-absolute position-top-0 position-bottom-0 drag-handle position-left-0',
-    );
+    expect(wrapper.element.tagName).toEqual('DIV');
+    expect(wrapper.classes().sort()).toStrictEqual([
+      'drag-handle',
+      'position-absolute',
+      'position-bottom-0',
+      'position-left-0',
+      'position-top-0',
+    ]);
 
-    expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;');
+    expect(wrapper.element.getAttribute('style')).toBe('cursor: ew-resize;');
   });
 
   it('should render a div element with the correct classes for a right side panel', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'right',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'right',
+      },
     });
 
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe(
-      'position-absolute position-top-0 position-bottom-0 drag-handle position-right-0',
-    );
+    expect(wrapper.element.tagName).toEqual('DIV');
+    expect(wrapper.classes().sort()).toStrictEqual([
+      'drag-handle',
+      'position-absolute',
+      'position-bottom-0',
+      'position-right-0',
+      'position-top-0',
+    ]);
   });
 
   it('drag the resizer', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'left',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'left',
+      },
     });
 
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    triggerEvent('mousedown', vm.$el);
+    triggerEvent('mousedown');
     triggerEvent('mousemove', document);
     triggerEvent('mouseup', document);
 
-    expect(vm.$emit.mock.calls).toEqual([
-      ['resize-start', 100],
-      ['update:size', 100],
-      ['resize-end', 100],
-    ]);
-
-    expect(vm.size).toBe(100);
+    expect(wrapper.emitted()).toEqual({
+      'resize-start': [[100]],
+      'update:size': [[100]],
+      'resize-end': [[100]],
+    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
index 69570b53b48..79b1f17afa0 100644
--- a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
@@ -1,121 +1,109 @@
-import Vue from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
-import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
-
-const createComponent = (config) => {
-  const Component = Vue.extend(stackedProgressBarComponent);
-  const defaultConfig = {
-    successLabel: 'Synced',
-    failureLabel: 'Failed',
-    neutralLabel: 'Out of sync',
-    successCount: 25,
-    failureCount: 10,
-    totalCount: 5000,
-    ...config,
-  };
-
-  return mountComponent(Component, defaultConfig);
-};
+import { mount } from '@vue/test-utils';
+import StackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
 
 describe('StackedProgressBarComponent', () => {
-  let vm;
+  let wrapper;
 
-  beforeEach(() => {
-    vm = createComponent();
-  });
+  const createComponent = (config) => {
+    const defaultConfig = {
+      successLabel: 'Synced',
+      failureLabel: 'Failed',
+      neutralLabel: 'Out of sync',
+      successCount: 25,
+      failureCount: 10,
+      totalCount: 5000,
+      ...config,
+    };
+
+    wrapper = mount(StackedProgressBarComponent, { propsData: defaultConfig });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const findSuccessBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-green').innerText.trim();
-  const findNeutralBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-neutral').innerText.trim();
-  const findFailureBarText = (wrapper) => wrapper.$el.querySelector('.status-red').innerText.trim();
-  const findUnavailableBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-unavailable').innerText.trim();
-
-  describe('computed', () => {
-    describe('neutralCount', () => {
-      it('returns neutralCount based on totalCount, successCount and failureCount', () => {
-        expect(vm.neutralCount).toBe(4965); // 5000 - 25 - 10
-      });
-    });
-  });
+  const findSuccessBar = () => wrapper.find('.status-green');
+  const findNeutralBar = () => wrapper.find('.status-neutral');
+  const findFailureBar = () => wrapper.find('.status-red');
+  const findUnavailableBar = () => wrapper.find('.status-unavailable');
 
   describe('template', () => {
     it('renders container element', () => {
-      expect(vm.$el.classList.contains('stacked-progress-bar')).toBe(true);
+      createComponent();
+
+      expect(wrapper.classes()).toContain('stacked-progress-bar');
     });
 
     it('renders empty state when count is unavailable', () => {
-      const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
+      createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
 
-      expect(findUnavailableBarText(vmX)).not.toBeUndefined();
+      expect(findUnavailableBar()).not.toBeUndefined();
     });
 
     it('renders bar elements when count is available', () => {
-      expect(findSuccessBarText(vm)).not.toBeUndefined();
-      expect(findNeutralBarText(vm)).not.toBeUndefined();
-      expect(findFailureBarText(vm)).not.toBeUndefined();
+      createComponent();
+
+      expect(findSuccessBar().exists()).toBe(true);
+      expect(findNeutralBar().exists()).toBe(true);
+      expect(findFailureBar().exists()).toBe(true);
     });
 
     describe('getPercent', () => {
       it('returns correct percentages from provided count based on `totalCount`', () => {
-        vm = createComponent({ totalCount: 100, successCount: 25, failureCount: 10 });
+        createComponent({ totalCount: 100, successCount: 25, failureCount: 10 });
 
-        expect(findSuccessBarText(vm)).toBe('25%');
-        expect(findNeutralBarText(vm)).toBe('65%');
-        expect(findFailureBarText(vm)).toBe('10%');
+        expect(findSuccessBar().text()).toBe('25%');
+        expect(findNeutralBar().text()).toBe('65%');
+        expect(findFailureBar().text()).toBe('10%');
       });
 
       it('returns percentage with decimal place when decimal is greater than 1', () => {
-        vm = createComponent({ successCount: 67 });
+        createComponent({ successCount: 67 });
 
-        expect(findSuccessBarText(vm)).toBe('1.3%');
+        expect(findSuccessBar().text()).toBe('1.3%');
       });
 
       it('returns percentage as `< 1%` from provided count based on `totalCount` when evaluated value is less than 1', () => {
-        vm = createComponent({ successCount: 10 });
+        createComponent({ successCount: 10 });
 
-        expect(findSuccessBarText(vm)).toBe('< 1%');
+        expect(findSuccessBar().text()).toBe('< 1%');
       });
 
       it('returns not available if totalCount is falsy', () => {
-        vm = createComponent({ totalCount: 0 });
+        createComponent({ totalCount: 0 });
 
-        expect(findUnavailableBarText(vm)).toBe('Not available');
+        expect(findUnavailableBar().text()).toBe('Not available');
       });
 
       it('returns 99.9% when numbers are extreme decimals', () => {
-        vm = createComponent({ totalCount: 1000000 });
+        createComponent({ totalCount: 1000000 });
 
-        expect(findNeutralBarText(vm)).toBe('99.9%');
+        expect(findNeutralBar().text()).toBe('99.9%');
       });
     });
 
-    describe('barStyle', () => {
-      it('returns style string based on percentage provided', () => {
-        expect(vm.barStyle(50)).toBe('width: 50%;');
+    describe('bar style', () => {
+      it('renders width based on percentage provided', () => {
+        createComponent({ totalCount: 100, successCount: 25 });
+
+        expect(findSuccessBar().element.style.width).toBe('25%');
       });
     });
 
-    describe('getTooltip', () => {
+    describe('tooltip', () => {
       describe('when hideTooltips is false', () => {
         it('returns label string based on label and count provided', () => {
-          expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10');
+          createComponent({ successCount: 10, successLabel: 'Synced', hideTooltips: false });
+
+          expect(findSuccessBar().attributes('title')).toBe('Synced: 10');
         });
       });
 
       describe('when hideTooltips is true', () => {
-        beforeEach(() => {
-          vm = createComponent({ hideTooltips: true });
-        });
-
         it('returns an empty string', () => {
-          expect(vm.getTooltip('Synced', 10)).toBe('');
+          createComponent({ successCount: 10, successLabel: 'Synced', hideTooltips: true });
+
+          expect(findSuccessBar().attributes('title')).toBe('');
         });
       });
     });
diff --git a/spec/lib/gitlab/database/migration_helpers_spec.rb b/spec/lib/gitlab/database/migration_helpers_spec.rb
index d73b478ee7c..ded0ce7eb88 100644
--- a/spec/lib/gitlab/database/migration_helpers_spec.rb
+++ b/spec/lib/gitlab/database/migration_helpers_spec.rb
@@ -3359,6 +3359,73 @@ RSpec.describe Gitlab::Database::MigrationHelpers do
     end
   end
 
+  describe '#drop_constraint' do
+    it "executes the statement to drop the constraint" do
+      expect(model).to receive(:execute).with("ALTER TABLE \"test_table\" DROP CONSTRAINT \"constraint_name\" CASCADE\n")
+
+      model.drop_constraint(:test_table, :constraint_name, cascade: true)
+    end
+
+    context 'when cascade option is false' do
+      it "executes the statement to drop the constraint without cascade" do
+        expect(model).to receive(:execute).with("ALTER TABLE \"test_table\" DROP CONSTRAINT \"constraint_name\" \n")
+
+        model.drop_constraint(:test_table, :constraint_name, cascade: false)
+      end
+    end
+  end
+
+  describe '#add_primary_key_using_index' do
+    it "executes the statement to add the primary key" do
+      expect(model).to receive(:execute).with /ALTER TABLE "test_table" ADD CONSTRAINT "old_name" PRIMARY KEY USING INDEX "new_name"/
+
+      model.add_primary_key_using_index(:test_table, :old_name, :new_name)
+    end
+  end
+
+  context 'when changing the primary key of a given table' do
+    before do
+      model.create_table(:test_table, primary_key: :id) do |t|
+        t.integer :partition_number, default: 1
+      end
+
+      model.add_index(:test_table, :id, unique: true, name: :old_index_name)
+      model.add_index(:test_table, [:id, :partition_number], unique: true, name: :new_index_name)
+    end
+
+    describe '#swap_primary_key' do
+      it 'executes statements to swap primary key', :aggregate_failures do
+        expect(model).to receive(:with_lock_retries).with(raise_on_exhaustion: true).ordered.and_yield
+        expect(model).to receive(:execute).with(/ALTER TABLE "test_table" DROP CONSTRAINT "test_table_pkey" CASCADE/).and_call_original
+        expect(model).to receive(:execute).with(/ALTER TABLE "test_table" ADD CONSTRAINT "test_table_pkey" PRIMARY KEY USING INDEX "new_index_name"/).and_call_original
+
+        model.swap_primary_key(:test_table, :test_table_pkey, :new_index_name)
+      end
+
+      context 'when new index does not exist' do
+        before do
+          model.remove_index(:test_table, column: [:id, :partition_number])
+        end
+
+        it 'raises ActiveRecord::StatementInvalid' do
+          expect do
+            model.swap_primary_key(:test_table, :test_table_pkey, :new_index_name)
+          end.to raise_error(ActiveRecord::StatementInvalid)
+        end
+      end
+    end
+
+    describe '#unswap_primary_key' do
+      it 'executes statements to unswap primary key' do
+        expect(model).to receive(:with_lock_retries).with(raise_on_exhaustion: true).ordered.and_yield
+        expect(model).to receive(:execute).with(/ALTER TABLE "test_table" DROP CONSTRAINT "test_table_pkey" CASCADE/).ordered.and_call_original
+        expect(model).to receive(:execute).with(/ALTER TABLE "test_table" ADD CONSTRAINT "test_table_pkey" PRIMARY KEY USING INDEX "old_index_name"/).ordered.and_call_original
+
+        model.unswap_primary_key(:test_table, :test_table_pkey, :old_index_name)
+      end
+    end
+  end
+
   describe '#drop_sequence' do
     it "executes the statement to drop the sequence" do
       expect(model).to receive(:execute).with /ALTER TABLE "test_table" ALTER COLUMN "test_column" DROP DEFAULT;\nDROP SEQUENCE IF EXISTS "test_table_id_seq"/
diff --git a/spec/lib/gitlab/usage_data_counters/hll_redis_counter_spec.rb b/spec/lib/gitlab/usage_data_counters/hll_redis_counter_spec.rb
index 3fb2532521a..e2685d92425 100644
--- a/spec/lib/gitlab/usage_data_counters/hll_redis_counter_spec.rb
+++ b/spec/lib/gitlab/usage_data_counters/hll_redis_counter_spec.rb
@@ -99,7 +99,6 @@ RSpec.describe Gitlab::UsageDataCounters::HLLRedisCounter, :clean_gitlab_redis_s
         'incident_management_oncall',
         'testing',
         'issues_edit',
-        'ci_secrets_management',
         'snippets',
         'code_review',
         'terraform',
diff --git a/spec/models/ci/unit_test_spec.rb b/spec/models/ci/unit_test_spec.rb
index 556cf93c266..b3180492a36 100644
--- a/spec/models/ci/unit_test_spec.rb
+++ b/spec/models/ci/unit_test_spec.rb
@@ -43,18 +43,19 @@ RSpec.describe Ci::UnitTest do
 
       result = described_class.find_or_create_by_batch(project, attrs)
 
-      expect(result).to match_array([
-        have_attributes(
-          key_hash: existing_test.key_hash,
-          suite_name: 'rspec',
-          name: 'Math#sum adds numbers'
-        ),
-        have_attributes(
-          key_hash: new_key,
-          suite_name: 'jest',
-          name: 'Component works'
-        )
-      ])
+      expect(result).to match_array(
+        [
+          have_attributes(
+            key_hash: existing_test.key_hash,
+            suite_name: 'rspec',
+            name: 'Math#sum adds numbers'
+          ),
+          have_attributes(
+            key_hash: new_key,
+            suite_name: 'jest',
+            name: 'Component works'
+          )
+        ])
 
       expect(result).to all(be_persisted)
     end
@@ -77,13 +78,14 @@ RSpec.describe Ci::UnitTest do
 
         result = described_class.find_or_create_by_batch(project, attrs)
 
-        expect(result).to match_array([
-          have_attributes(
-            key_hash: new_key,
-            suite_name: 'abc...',
-            name: 'abc...'
-          )
-        ])
+        expect(result).to match_array(
+          [
+            have_attributes(
+              key_hash: new_key,
+              suite_name: 'abc...',
+              name: 'abc...'
+            )
+          ])
 
         expect(result).to all(be_persisted)
       end
diff --git a/spec/models/clusters/applications/cert_manager_spec.rb b/spec/models/clusters/applications/cert_manager_spec.rb
index 3044260a000..05ab8c4108e 100644
--- a/spec/models/clusters/applications/cert_manager_spec.rb
+++ b/spec/models/clusters/applications/cert_manager_spec.rb
@@ -49,13 +49,15 @@ RSpec.describe Clusters::Applications::CertManager do
       expect(subject.version).to eq('v0.10.1')
       expect(subject).to be_rbac
       expect(subject.files).to eq(cert_manager.files.merge(cluster_issuer_file))
-      expect(subject.preinstall).to eq([
-        'kubectl apply -f https://raw.githubusercontent.com/jetstack/cert-manager/release-0.10/deploy/manifests/00-crds.yaml',
-        'kubectl label --overwrite namespace gitlab-managed-apps certmanager.k8s.io/disable-validation=true'
-      ])
-      expect(subject.postinstall).to eq([
-        "for i in $(seq 1 90); do kubectl apply -f /data/helm/certmanager/config/cluster_issuer.yaml && s=0 && break || s=$?; sleep 1s; echo \"Retrying ($i)...\"; done; (exit $s)"
-      ])
+      expect(subject.preinstall).to eq(
+        [
+          'kubectl apply -f https://raw.githubusercontent.com/jetstack/cert-manager/release-0.10/deploy/manifests/00-crds.yaml',
+          'kubectl label --overwrite namespace gitlab-managed-apps certmanager.k8s.io/disable-validation=true'
+        ])
+      expect(subject.postinstall).to eq(
+        [
+          "for i in $(seq 1 90); do kubectl apply -f /data/helm/certmanager/config/cluster_issuer.yaml && s=0 && break || s=$?; sleep 1s; echo \"Retrying ($i)...\"; done; (exit $s)"
+        ])
     end
 
     context 'for a specific user' do
@@ -99,15 +101,16 @@ RSpec.describe Clusters::Applications::CertManager do
     end
 
     it 'specifies a post delete command to remove custom resource definitions' do
-      expect(subject.postdelete).to eq([
-        'kubectl delete secret -n gitlab-managed-apps letsencrypt-prod --ignore-not-found',
-        'kubectl delete crd certificates.certmanager.k8s.io --ignore-not-found',
-        'kubectl delete crd certificaterequests.certmanager.k8s.io --ignore-not-found',
-        'kubectl delete crd challenges.certmanager.k8s.io --ignore-not-found',
-        'kubectl delete crd clusterissuers.certmanager.k8s.io --ignore-not-found',
-        'kubectl delete crd issuers.certmanager.k8s.io --ignore-not-found',
-        'kubectl delete crd orders.certmanager.k8s.io --ignore-not-found'
-      ])
+      expect(subject.postdelete).to eq(
+        [
+          'kubectl delete secret -n gitlab-managed-apps letsencrypt-prod --ignore-not-found',
+          'kubectl delete crd certificates.certmanager.k8s.io --ignore-not-found',
+          'kubectl delete crd certificaterequests.certmanager.k8s.io --ignore-not-found',
+          'kubectl delete crd challenges.certmanager.k8s.io --ignore-not-found',
+          'kubectl delete crd clusterissuers.certmanager.k8s.io --ignore-not-found',
+          'kubectl delete crd issuers.certmanager.k8s.io --ignore-not-found',
+          'kubectl delete crd orders.certmanager.k8s.io --ignore-not-found'
+        ])
     end
 
     context 'secret key name is not found' do
@@ -119,14 +122,15 @@ RSpec.describe Clusters::Applications::CertManager do
       end
 
       it 'does not try and delete the secret' do
-        expect(subject.postdelete).to eq([
-          'kubectl delete crd certificates.certmanager.k8s.io --ignore-not-found',
-          'kubectl delete crd certificaterequests.certmanager.k8s.io --ignore-not-found',
-          'kubectl delete crd challenges.certmanager.k8s.io --ignore-not-found',
-          'kubectl delete crd clusterissuers.certmanager.k8s.io --ignore-not-found',
-          'kubectl delete crd issuers.certmanager.k8s.io --ignore-not-found',
-          'kubectl delete crd orders.certmanager.k8s.io --ignore-not-found'
-        ])
+        expect(subject.postdelete).to eq(
+          [
+            'kubectl delete crd certificates.certmanager.k8s.io --ignore-not-found',
+            'kubectl delete crd certificaterequests.certmanager.k8s.io --ignore-not-found',
+            'kubectl delete crd challenges.certmanager.k8s.io --ignore-not-found',
+            'kubectl delete crd clusterissuers.certmanager.k8s.io --ignore-not-found',
+            'kubectl delete crd issuers.certmanager.k8s.io --ignore-not-found',
+            'kubectl delete crd orders.certmanager.k8s.io --ignore-not-found'
+          ])
       end
     end
   end
diff --git a/spec/models/clusters/platforms/kubernetes_spec.rb b/spec/models/clusters/platforms/kubernetes_spec.rb
index 7b9ff409edd..4ac2fd022ba 100644
--- a/spec/models/clusters/platforms/kubernetes_spec.rb
+++ b/spec/models/clusters/platforms/kubernetes_spec.rb
@@ -601,19 +601,27 @@ RSpec.describe Clusters::Platforms::Kubernetes do
 
       it 'creates a matching RolloutStatus' do
         expect(rollout_status).to be_kind_of(::Gitlab::Kubernetes::RolloutStatus)
-        expect(rollout_status.deployments.map(&:annotations)).to eq([
-          { 'app.gitlab.com/app' => project.full_path_slug, 'app.gitlab.com/env' => 'env-000000' }
-        ])
-        expect(rollout_status.instances).to eq([{ pod_name: "kube-pod",
-                                                  stable: true,
-                                                  status: "pending",
-                                                  tooltip: "kube-pod (Pending)",
-                                                  track: "stable" },
-                                                { pod_name: "Not provided",
-                                                  stable: true,
-                                                  status: "pending",
-                                                  tooltip: "Not provided (Pending)",
-                                                  track: "stable" }])
+        expect(rollout_status.deployments.map(&:annotations)).to eq(
+          [
+            { 'app.gitlab.com/app' => project.full_path_slug, 'app.gitlab.com/env' => 'env-000000' }
+          ])
+        expect(rollout_status.instances).to eq(
+          [
+            {
+              pod_name: "kube-pod",
+              stable: true,
+              status: "pending",
+              tooltip: "kube-pod (Pending)",
+              track: "stable"
+            },
+            {
+              pod_name: "Not provided",
+              stable: true,
+              status: "pending",
+              tooltip: "Not provided (Pending)",
+              track: "stable"
+            }
+          ])
       end
 
       context 'with canary ingress' do
@@ -720,11 +728,12 @@ RSpec.describe Clusters::Platforms::Kubernetes do
       end
 
       it 'returns a pending pod for each missing replica' do
-        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status) }).to eq([
-          { pod_name: 'pod-a-1', status: 'running' },
-          { pod_name: 'Not provided', status: 'pending' },
-          { pod_name: 'Not provided', status: 'pending' }
-        ])
+        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status) }).to eq(
+          [
+            { pod_name: 'pod-a-1', status: 'running' },
+            { pod_name: 'Not provided', status: 'pending' },
+            { pod_name: 'Not provided', status: 'pending' }
+          ])
       end
     end
 
@@ -743,12 +752,13 @@ RSpec.describe Clusters::Platforms::Kubernetes do
       end
 
       it 'returns the correct track for the pending pods' do
-        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status, :track) }).to eq([
-          { pod_name: 'pod-a-1', status: 'running', track: 'canary' },
-          { pod_name: 'Not provided', status: 'pending', track: 'canary' },
-          { pod_name: 'Not provided', status: 'pending', track: 'stable' },
-          { pod_name: 'Not provided', status: 'pending', track: 'stable' }
-        ])
+        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status, :track) }).to eq(
+          [
+            { pod_name: 'pod-a-1', status: 'running', track: 'canary' },
+            { pod_name: 'Not provided', status: 'pending', track: 'canary' },
+            { pod_name: 'Not provided', status: 'pending', track: 'stable' },
+            { pod_name: 'Not provided', status: 'pending', track: 'stable' }
+          ])
       end
     end
 
@@ -765,10 +775,11 @@ RSpec.describe Clusters::Platforms::Kubernetes do
       end
 
       it 'returns the correct number of pending pods' do
-        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status, :track) }).to eq([
-          { pod_name: 'Not provided', status: 'pending', track: 'mytrack' },
-          { pod_name: 'Not provided', status: 'pending', track: 'mytrack' }
-        ])
+        expect(rollout_status.instances.map { |p| p.slice(:pod_name, :status, :track) }).to eq(
+          [
+            { pod_name: 'Not provided', status: 'pending', track: 'mytrack' },
+            { pod_name: 'Not provided', status: 'pending', track: 'mytrack' }
+          ])
       end
     end
 
diff --git a/spec/models/commit_collection_spec.rb b/spec/models/commit_collection_spec.rb
index de9b72c1da2..93c696cae54 100644
--- a/spec/models/commit_collection_spec.rb
+++ b/spec/models/commit_collection_spec.rb
@@ -42,10 +42,7 @@ RSpec.describe CommitCollection do
       merge_commit = project.commit("60ecb67744cb56576c30214ff52294f8ce2def98")
       expect(merge_commit).to receive(:merge_commit?).and_return(true)
 
-      collection = described_class.new(project, [
-        commit,
-        merge_commit
-      ])
+      collection = described_class.new(project, [commit, merge_commit])
 
       expect(collection.without_merge_commits).to contain_exactly(commit)
     end
diff --git a/spec/models/compare_spec.rb b/spec/models/compare_spec.rb
index 0035fb8468a..dc8429fe77e 100644
--- a/spec/models/compare_spec.rb
+++ b/spec/models/compare_spec.rb
@@ -127,13 +127,14 @@ RSpec.describe Compare do
       end
 
       it 'returns affected file paths, without duplication' do
-        expect(subject.modified_paths).to contain_exactly(*%w{
-          foo/for_move.txt
-          foo/bar/for_move.txt
-          foo/for_create.txt
-          foo/for_delete.txt
-          foo/for_edit.txt
-        })
+        expect(subject.modified_paths).to contain_exactly(
+          *%w{
+            foo/for_move.txt
+            foo/bar/for_move.txt
+            foo/for_create.txt
+            foo/for_delete.txt
+            foo/for_edit.txt
+          })
       end
     end
 
diff --git a/spec/models/concerns/id_in_ordered_spec.rb b/spec/models/concerns/id_in_ordered_spec.rb
index a3b434caac6..15da079f2bc 100644
--- a/spec/models/concerns/id_in_ordered_spec.rb
+++ b/spec/models/concerns/id_in_ordered_spec.rb
@@ -12,9 +12,10 @@ RSpec.describe IdInOrdered do
         issue4 = create(:issue)
         issue5 = create(:issue)
 
-        expect(Issue.id_in_ordered([issue3.id, issue1.id, issue4.id, issue5.id, issue2.id])).to eq([
-          issue3, issue1, issue4, issue5, issue2
-        ])
+        expect(Issue.id_in_ordered([issue3.id, issue1.id, issue4.id, issue5.id, issue2.id])).to eq(
+          [
+            issue3, issue1, issue4, issue5, issue2
+          ])
       end
 
       context 'when the ids are not an array of integers' do
diff --git a/spec/models/concerns/noteable_spec.rb b/spec/models/concerns/noteable_spec.rb
index 81ae30b7116..82aca13c929 100644
--- a/spec/models/concerns/noteable_spec.rb
+++ b/spec/models/concerns/noteable_spec.rb
@@ -47,18 +47,19 @@ RSpec.describe Noteable do
     let(:discussions) { subject.discussions }
 
     it 'includes discussions for diff notes, commit diff notes, commit notes, and regular notes' do
-      expect(discussions).to eq([
-        DiffDiscussion.new([active_diff_note1, active_diff_note2], subject),
-        DiffDiscussion.new([active_diff_note3], subject),
-        DiffDiscussion.new([outdated_diff_note1, outdated_diff_note2], subject),
-        Discussion.new([discussion_note1, discussion_note2], subject),
-        DiffDiscussion.new([commit_diff_note1, commit_diff_note2], subject),
-        OutOfContextDiscussion.new([commit_note1, commit_note2], subject),
-        Discussion.new([commit_discussion_note1, commit_discussion_note2], subject),
-        Discussion.new([commit_discussion_note3], subject),
-        IndividualNoteDiscussion.new([note1], subject),
-        IndividualNoteDiscussion.new([note2], subject)
-      ])
+      expect(discussions).to eq(
+        [
+          DiffDiscussion.new([active_diff_note1, active_diff_note2], subject),
+          DiffDiscussion.new([active_diff_note3], subject),
+          DiffDiscussion.new([outdated_diff_note1, outdated_diff_note2], subject),
+          Discussion.new([discussion_note1, discussion_note2], subject),
+          DiffDiscussion.new([commit_diff_note1, commit_diff_note2], subject),
+          OutOfContextDiscussion.new([commit_note1, commit_note2], subject),
+          Discussion.new([commit_discussion_note1, commit_discussion_note2], subject),
+          Discussion.new([commit_discussion_note3], subject),
+          IndividualNoteDiscussion.new([note1], subject),
+          IndividualNoteDiscussion.new([note2], subject)
+        ])
     end
   end
 
@@ -88,23 +89,24 @@ RSpec.describe Noteable do
         { table_name: n.table_name, discussion_id: n.discussion_id, id: n.id }
       end
 
-      expect(discussions).to match([
-        a_hash_including(table_name: 'notes', discussion_id: active_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: active_diff_note3.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: outdated_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: discussion_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_note2.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note3.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: note2.discussion_id),
-        a_hash_including(table_name: 'resource_label_events', id: label_event.id),
-        a_hash_including(table_name: 'notes', discussion_id: system_note.discussion_id),
-        a_hash_including(table_name: 'resource_milestone_events', id: milestone_event.id),
-        a_hash_including(table_name: 'resource_state_events', id: state_event.id)
-      ])
+      expect(discussions).to match(
+        [
+          a_hash_including(table_name: 'notes', discussion_id: active_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: active_diff_note3.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: outdated_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: discussion_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_note2.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note3.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: note2.discussion_id),
+          a_hash_including(table_name: 'resource_label_events', id: label_event.id),
+          a_hash_including(table_name: 'notes', discussion_id: system_note.discussion_id),
+          a_hash_including(table_name: 'resource_milestone_events', id: milestone_event.id),
+          a_hash_including(table_name: 'resource_state_events', id: state_event.id)
+        ])
     end
 
     it 'filters by comments only' do
@@ -112,19 +114,20 @@ RSpec.describe Noteable do
         { table_name: n.table_name, discussion_id: n.discussion_id, id: n.id }
       end
 
-      expect(discussions).to match([
-        a_hash_including(table_name: 'notes', discussion_id: active_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: active_diff_note3.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: outdated_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: discussion_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_diff_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_note2.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note3.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: note1.discussion_id),
-        a_hash_including(table_name: 'notes', discussion_id: note2.discussion_id)
-      ])
+      expect(discussions).to match(
+        [
+          a_hash_including(table_name: 'notes', discussion_id: active_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: active_diff_note3.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: outdated_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: discussion_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_diff_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_note2.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: commit_discussion_note3.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: note1.discussion_id),
+          a_hash_including(table_name: 'notes', discussion_id: note2.discussion_id)
+        ])
     end
 
     it 'filters by system notes only' do
@@ -132,12 +135,13 @@ RSpec.describe Noteable do
         { table_name: n.table_name, discussion_id: n.discussion_id, id: n.id }
       end
 
-      expect(discussions).to match([
-        a_hash_including(table_name: 'resource_label_events', id: label_event.id),
-        a_hash_including(table_name: 'notes', discussion_id: system_note.discussion_id),
-        a_hash_including(table_name: 'resource_milestone_events', id: milestone_event.id),
-        a_hash_including(table_name: 'resource_state_events', id: state_event.id)
-      ])
+      expect(discussions).to match(
+        [
+          a_hash_including(table_name: 'resource_label_events', id: label_event.id),
+          a_hash_including(table_name: 'notes', discussion_id: system_note.discussion_id),
+          a_hash_including(table_name: 'resource_milestone_events', id: milestone_event.id),
+          a_hash_including(table_name: 'resource_state_events', id: state_event.id)
+        ])
     end
   end
 
diff --git a/spec/models/diff_note_spec.rb b/spec/models/diff_note_spec.rb
index d379ffeee02..a526f91ddc1 100644
--- a/spec/models/diff_note_spec.rb
+++ b/spec/models/diff_note_spec.rb
@@ -541,11 +541,12 @@ RSpec.describe DiffNote do
 
   describe '#shas' do
     it 'returns list of SHAs based on original_position' do
-      expect(subject.shas).to match_array([
-        position.base_sha,
-        position.start_sha,
-        position.head_sha
-      ])
+      expect(subject.shas).to match_array(
+        [
+          position.base_sha,
+          position.start_sha,
+          position.head_sha
+        ])
     end
 
     context 'when position changes' do
@@ -554,14 +555,15 @@ RSpec.describe DiffNote do
       end
 
       it 'includes the new position SHAs' do
-        expect(subject.shas).to match_array([
-          position.base_sha,
-          position.start_sha,
-          position.head_sha,
-          new_position.base_sha,
-          new_position.start_sha,
-          new_position.head_sha
-        ])
+        expect(subject.shas).to match_array(
+          [
+            position.base_sha,
+            position.start_sha,
+            position.head_sha,
+            new_position.base_sha,
+            new_position.start_sha,
+            new_position.head_sha
+          ])
       end
     end
   end
diff --git a/spec/models/discussion_spec.rb b/spec/models/discussion_spec.rb
index 212619a1c3d..7bd3c5743a6 100644
--- a/spec/models/discussion_spec.rb
+++ b/spec/models/discussion_spec.rb
@@ -37,10 +37,11 @@ RSpec.describe Discussion do
   describe '.build_collection' do
     it 'returns an array of discussions of the right type' do
       discussions = described_class.build_collection([first_note, second_note, third_note], merge_request)
-      expect(discussions).to eq([
-        DiffDiscussion.new([first_note, second_note], merge_request),
-        DiffDiscussion.new([third_note], merge_request)
-      ])
+      expect(discussions).to eq(
+        [
+          DiffDiscussion.new([first_note, second_note], merge_request),
+          DiffDiscussion.new([third_note], merge_request)
+        ])
     end
   end
 
diff --git a/spec/models/group_spec.rb b/spec/models/group_spec.rb
index 4284d24ced7..68c2d1d3995 100644
--- a/spec/models/group_spec.rb
+++ b/spec/models/group_spec.rb
@@ -2293,10 +2293,11 @@ RSpec.describe Group do
         it 'clears both self and descendant cache when the parent value is updated' do
           expect(Rails.cache).to receive(:delete_multi)
             .with(
-              match_array([
-                start_with("namespaces:{#{parent.traversal_ids.first}}:first_auto_devops_config:#{parent.id}"),
-                start_with("namespaces:{#{parent.traversal_ids.first}}:first_auto_devops_config:#{group.id}")
-              ])
+              match_array(
+                [
+                  start_with("namespaces:{#{parent.traversal_ids.first}}:first_auto_devops_config:#{parent.id}"),
+                  start_with("namespaces:{#{parent.traversal_ids.first}}:first_auto_devops_config:#{group.id}")
+                ])
             )
 
           parent.update!(auto_devops_enabled: true)
diff --git a/spec/models/integration_spec.rb b/spec/models/integration_spec.rb
index 950f2c639fb..baa3443b4c5 100644
--- a/spec/models/integration_spec.rb
+++ b/spec/models/integration_spec.rb
@@ -971,11 +971,12 @@ RSpec.describe Integration do
 
   describe '#secret_fields' do
     it 'returns all fields with type `password`' do
-      allow(subject).to receive(:fields).and_return([
-        { name: 'password', type: 'password' },
-        { name: 'secret', type: 'password' },
-        { name: 'public', type: 'text' }
-      ])
+      allow(subject).to receive(:fields).and_return(
+        [
+          { name: 'password', type: 'password' },
+          { name: 'secret', type: 'password' },
+          { name: 'public', type: 'text' }
+        ])
 
       expect(subject.secret_fields).to match_array(%w[password secret])
     end
diff --git a/spec/models/integrations/chat_message/issue_message_spec.rb b/spec/models/integrations/chat_message/issue_message_spec.rb
index 4a86322cdaf..ff9f30efdca 100644
--- a/spec/models/integrations/chat_message/issue_message_spec.rb
+++ b/spec/models/integrations/chat_message/issue_message_spec.rb
@@ -47,14 +47,15 @@ RSpec.describe Integrations::ChatMessage::IssueMessage do
       it 'returns a message regarding opening of issues' do
         expect(subject.pretext).to eq(
           '[<http://somewhere.com|project_name>] Issue <http://url.com|#100 Issue title> opened by Test User (test.user)')
-        expect(subject.attachments).to eq([
-          {
-            title: "#100 Issue title",
-            title_link: "http://url.com",
-            text: "issue description",
-            color: color
-          }
-        ])
+        expect(subject.attachments).to eq(
+          [
+            {
+              title: "#100 Issue title",
+              title_link: "http://url.com",
+              text: "issue description",
+              color: color
+            }
+          ])
       end
     end
 
diff --git a/spec/models/integrations/chat_message/wiki_page_message_spec.rb b/spec/models/integrations/chat_message/wiki_page_message_spec.rb
index 16659311c52..dae8d293354 100644
--- a/spec/models/integrations/chat_message/wiki_page_message_spec.rb
+++ b/spec/models/integrations/chat_message/wiki_page_message_spec.rb
@@ -71,12 +71,13 @@ RSpec.describe Integrations::ChatMessage::WikiPageMessage do
         end
 
         it 'returns the commit message for a new wiki page' do
-          expect(subject.attachments).to eq([
-            {
-              text: commit_message,
-              color: color
-            }
-          ])
+          expect(subject.attachments).to eq(
+            [
+              {
+                text: commit_message,
+                color: color
+              }
+            ])
         end
       end
 
@@ -86,12 +87,13 @@ RSpec.describe Integrations::ChatMessage::WikiPageMessage do
         end
 
         it 'returns the commit message for an updated wiki page' do
-          expect(subject.attachments).to eq([
-            {
-              text: commit_message,
-              color: color
-            }
-          ])
+          expect(subject.attachments).to eq(
+            [
+              {
+                text: commit_message,
+                color: color
+              }
+            ])
         end
       end
     end
diff --git a/spec/models/integrations/jira_spec.rb b/spec/models/integrations/jira_spec.rb
index a52a4514ebe..4dd6245fc2f 100644
--- a/spec/models/integrations/jira_spec.rb
+++ b/spec/models/integrations/jira_spec.rb
@@ -81,9 +81,10 @@ RSpec.describe Integrations::Jira do
         jira_integration.jira_issue_transition_id = 'foo bar'
 
         expect(jira_integration).not_to be_valid
-        expect(jira_integration.errors.full_messages).to eq([
-          'Jira issue transition IDs must be a list of numbers that can be split with , or ;'
-        ])
+        expect(jira_integration.errors.full_messages).to eq(
+          [
+            'Jira issue transition IDs must be a list of numbers that can be split with , or ;'
+          ])
       end
     end
   end
diff --git a/spec/models/label_note_spec.rb b/spec/models/label_note_spec.rb
index 145ddd44834..6658d42f25e 100644
--- a/spec/models/label_note_spec.rb
+++ b/spec/models/label_note_spec.rb
@@ -18,9 +18,10 @@ RSpec.describe LabelNote do
     it_behaves_like 'label note created from events'
 
     it 'includes a link to the list of issues filtered by the label' do
-      note = described_class.from_events([
-        create(:resource_label_event, label: label, issue: resource)
-      ])
+      note = described_class.from_events(
+        [
+          create(:resource_label_event, label: label, issue: resource)
+        ])
 
       expect(note.note_html).to include(project_issues_path(project, label_name: label.title))
     end
@@ -32,9 +33,10 @@ RSpec.describe LabelNote do
     it_behaves_like 'label note created from events'
 
     it 'includes a link to the list of merge requests filtered by the label' do
-      note = described_class.from_events([
-        create(:resource_label_event, label: label, merge_request: resource)
-      ])
+      note = described_class.from_events(
+        [
+          create(:resource_label_event, label: label, merge_request: resource)
+        ])
 
       expect(note.note_html).to include(project_merge_requests_path(project, label_name: label.title))
     end
diff --git a/spec/models/merge_request/cleanup_schedule_spec.rb b/spec/models/merge_request/cleanup_schedule_spec.rb
index 9c50b64f2bd..1f1f33db5ed 100644
--- a/spec/models/merge_request/cleanup_schedule_spec.rb
+++ b/spec/models/merge_request/cleanup_schedule_spec.rb
@@ -111,12 +111,13 @@ RSpec.describe MergeRequest::CleanupSchedule do
     let!(:cleanup_schedule_7) { create(:merge_request_cleanup_schedule, :failed, scheduled_at: 5.days.ago) }
 
     it 'returns records that are scheduled before or on current time and unstarted (ordered by scheduled first)' do
-      expect(described_class.scheduled_and_unstarted).to eq([
-        cleanup_schedule_2,
-        cleanup_schedule_1,
-        cleanup_schedule_5,
-        cleanup_schedule_4
-      ])
+      expect(described_class.scheduled_and_unstarted).to eq(
+        [
+          cleanup_schedule_2,
+          cleanup_schedule_1,
+          cleanup_schedule_5,
+          cleanup_schedule_4
+        ])
     end
   end
 
diff --git a/spec/models/merge_request_diff_spec.rb b/spec/models/merge_request_diff_spec.rb
index 007e84164a8..e9e8bd9bfea 100644
--- a/spec/models/merge_request_diff_spec.rb
+++ b/spec/models/merge_request_diff_spec.rb
@@ -466,19 +466,20 @@ RSpec.describe MergeRequestDiff do
           diff_with_commits.update!(sorted: false) # Mark as unsorted so it'll re-order
 
           # There will be 11 returned, as we have to take into account for new and old paths
-          expect(diff_with_commits.diffs_in_batch(0, 10, diff_options: diff_options).diff_paths).to eq([
-            'bar/branch-test.txt',
-            'custom-highlighting/test.gitlab-custom',
-            'encoding/iso8859.txt',
-            'files/images/wm.svg',
-            'files/js/commit.js.coffee',
-            'files/js/commit.coffee',
-            'files/lfs/lfs_object.iso',
-            'files/ruby/popen.rb',
-            'files/ruby/regex.rb',
-            'files/.DS_Store',
-            'files/whitespace'
-          ])
+          expect(diff_with_commits.diffs_in_batch(0, 10, diff_options: diff_options).diff_paths).to eq(
+            [
+              'bar/branch-test.txt',
+              'custom-highlighting/test.gitlab-custom',
+              'encoding/iso8859.txt',
+              'files/images/wm.svg',
+              'files/js/commit.js.coffee',
+              'files/js/commit.coffee',
+              'files/lfs/lfs_object.iso',
+              'files/ruby/popen.rb',
+              'files/ruby/regex.rb',
+              'files/.DS_Store',
+              'files/whitespace'
+            ])
         end
 
         context 'when diff_options include ignore_whitespace_change' do
@@ -555,29 +556,30 @@ RSpec.describe MergeRequestDiff do
         it 'sorts diff files directory first' do
           diff_with_commits.update!(sorted: false) # Mark as unsorted so it'll re-order
 
-          expect(diff_with_commits.diffs(diff_options).diff_paths).to eq([
-            'bar/branch-test.txt',
-            'custom-highlighting/test.gitlab-custom',
-            'encoding/iso8859.txt',
-            'files/images/wm.svg',
-            'files/js/commit.js.coffee',
-            'files/js/commit.coffee',
-            'files/lfs/lfs_object.iso',
-            'files/ruby/popen.rb',
-            'files/ruby/regex.rb',
-            'files/.DS_Store',
-            'files/whitespace',
-            'foo/bar/.gitkeep',
-            'with space/README.md',
-            '.DS_Store',
-            '.gitattributes',
-            '.gitignore',
-            '.gitmodules',
-            'CHANGELOG',
-            'README',
-            'gitlab-grack',
-            'gitlab-shell'
-          ])
+          expect(diff_with_commits.diffs(diff_options).diff_paths).to eq(
+            [
+              'bar/branch-test.txt',
+              'custom-highlighting/test.gitlab-custom',
+              'encoding/iso8859.txt',
+              'files/images/wm.svg',
+              'files/js/commit.js.coffee',
+              'files/js/commit.coffee',
+              'files/lfs/lfs_object.iso',
+              'files/ruby/popen.rb',
+              'files/ruby/regex.rb',
+              'files/.DS_Store',
+              'files/whitespace',
+              'foo/bar/.gitkeep',
+              'with space/README.md',
+              '.DS_Store',
+              '.gitattributes',
+              '.gitignore',
+              '.gitmodules',
+              'CHANGELOG',
+              'README',
+              'gitlab-grack',
+              'gitlab-shell'
+            ])
         end
       end
     end
@@ -661,28 +663,29 @@ RSpec.describe MergeRequestDiff do
         mr_diff = create(:merge_request).merge_request_diff
         diff_files_paths = mr_diff.merge_request_diff_files.map { |file| file.new_path.presence || file.old_path }
 
-        expect(diff_files_paths).to eq([
-          'bar/branch-test.txt',
-          'custom-highlighting/test.gitlab-custom',
-          'encoding/iso8859.txt',
-          'files/images/wm.svg',
-          'files/js/commit.coffee',
-          'files/lfs/lfs_object.iso',
-          'files/ruby/popen.rb',
-          'files/ruby/regex.rb',
-          'files/.DS_Store',
-          'files/whitespace',
-          'foo/bar/.gitkeep',
-          'with space/README.md',
-          '.DS_Store',
-          '.gitattributes',
-          '.gitignore',
-          '.gitmodules',
-          'CHANGELOG',
-          'README',
-          'gitlab-grack',
-          'gitlab-shell'
-        ])
+        expect(diff_files_paths).to eq(
+          [
+            'bar/branch-test.txt',
+            'custom-highlighting/test.gitlab-custom',
+            'encoding/iso8859.txt',
+            'files/images/wm.svg',
+            'files/js/commit.coffee',
+            'files/lfs/lfs_object.iso',
+            'files/ruby/popen.rb',
+            'files/ruby/regex.rb',
+            'files/.DS_Store',
+            'files/whitespace',
+            'foo/bar/.gitkeep',
+            'with space/README.md',
+            '.DS_Store',
+            '.gitattributes',
+            '.gitignore',
+            '.gitmodules',
+            'CHANGELOG',
+            'README',
+            'gitlab-grack',
+            'gitlab-shell'
+          ])
       end
 
       it 'expands collapsed diffs before saving' do
diff --git a/spec/models/merge_request_spec.rb b/spec/models/merge_request_spec.rb
index 54af9d922a5..be93cc79c70 100644
--- a/spec/models/merge_request_spec.rb
+++ b/spec/models/merge_request_spec.rb
@@ -1837,9 +1837,8 @@ RSpec.describe MergeRequest, factory_default: :keep do
     context 'persisted merge request' do
       context 'with a limit' do
         it 'returns a limited number of commit shas' do
-          expect(subject.commit_shas(limit: 2)).to eq(%w[
-            b83d6e391c22777fca1ed3012fce84f633d7fed0 498214de67004b1da3d820901307bed2a68a8ef6
-          ])
+          expect(subject.commit_shas(limit: 2)).to eq(
+            %w[b83d6e391c22777fca1ed3012fce84f633d7fed0 498214de67004b1da3d820901307bed2a68a8ef6])
         end
       end
 
@@ -4739,15 +4738,17 @@ RSpec.describe MergeRequest, factory_default: :keep do
     context 'persisted merge request' do
       context 'with a limit' do
         it 'returns a limited number of commits' do
-          expect(subject.commits(limit: 2).map(&:sha)).to eq(%w[
-            b83d6e391c22777fca1ed3012fce84f633d7fed0
-            498214de67004b1da3d820901307bed2a68a8ef6
-          ])
-          expect(subject.commits(limit: 3).map(&:sha)).to eq(%w[
-            b83d6e391c22777fca1ed3012fce84f633d7fed0
-            498214de67004b1da3d820901307bed2a68a8ef6
-            1b12f15a11fc6e62177bef08f47bc7b5ce50b141
-          ])
+          expect(subject.commits(limit: 2).map(&:sha)).to eq(
+            %w[
+              b83d6e391c22777fca1ed3012fce84f633d7fed0
+              498214de67004b1da3d820901307bed2a68a8ef6
+            ])
+          expect(subject.commits(limit: 3).map(&:sha)).to eq(
+            %w[
+              b83d6e391c22777fca1ed3012fce84f633d7fed0
+              498214de67004b1da3d820901307bed2a68a8ef6
+              1b12f15a11fc6e62177bef08f47bc7b5ce50b141
+            ])
         end
       end
 
@@ -4792,9 +4793,10 @@ RSpec.describe MergeRequest, factory_default: :keep do
     end
 
     it 'returns the safe number of commits' do
-      expect(subject.recent_commits.map(&:sha)).to eq(%w[
-        b83d6e391c22777fca1ed3012fce84f633d7fed0 498214de67004b1da3d820901307bed2a68a8ef6
-      ])
+      expect(subject.recent_commits.map(&:sha)).to eq(
+        %w[
+          b83d6e391c22777fca1ed3012fce84f633d7fed0 498214de67004b1da3d820901307bed2a68a8ef6
+        ])
     end
   end
 
diff --git a/spec/models/operations/feature_flags/strategy_spec.rb b/spec/models/operations/feature_flags/strategy_spec.rb
index de1b9d2c855..949f92b3b2a 100644
--- a/spec/models/operations/feature_flags/strategy_spec.rb
+++ b/spec/models/operations/feature_flags/strategy_spec.rb
@@ -130,14 +130,15 @@ RSpec.describe Operations::FeatureFlags::Strategy do
 
       context 'when the strategy name is flexibleRollout' do
         valid_parameters = { rollout: '40', groupId: 'mygroup', stickiness: 'default' }
-        where(invalid_parameters: [
-          nil,
-          {},
-          *valid_parameters.to_a.combination(1).to_a.map { |p| p.to_h },
-          *valid_parameters.to_a.combination(2).to_a.map { |p| p.to_h },
-          { **valid_parameters, userIds: '4' },
-          { **valid_parameters, extra: nil }
-        ])
+        where(
+          invalid_parameters: [
+            nil,
+            {},
+            *valid_parameters.to_a.combination(1).to_a.map { |p| p.to_h },
+            *valid_parameters.to_a.combination(2).to_a.map { |p| p.to_h },
+            { **valid_parameters, userIds: '4' },
+            { **valid_parameters, extra: nil }
+          ])
         with_them do
           it 'must have valid parameters for the strategy' do
             strategy = build(:operations_strategy,
@@ -180,9 +181,7 @@ RSpec.describe Operations::FeatureFlags::Strategy do
 
               expect(strategy).to be_invalid
 
-              expect(strategy.errors[:parameters]).to eq([
-                'rollout must be a string between 0 and 100 inclusive'
-              ])
+              expect(strategy.errors[:parameters]).to eq(['rollout must be a string between 0 and 100 inclusive'])
             end
           end
 
@@ -243,9 +242,8 @@ RSpec.describe Operations::FeatureFlags::Strategy do
 
               expect(strategy).to be_invalid
 
-              expect(strategy.errors[:parameters]).to eq([
-                'stickiness parameter must be default, userId, sessionId, or random'
-              ])
+              expect(strategy.errors[:parameters]).to eq(
+                ['stickiness parameter must be default, userId, sessionId, or random'])
             end
           end
 
diff --git a/spec/models/project_group_link_spec.rb b/spec/models/project_group_link_spec.rb
index 8b95b86b14b..f141b8e83d6 100644
--- a/spec/models/project_group_link_spec.rb
+++ b/spec/models/project_group_link_spec.rb
@@ -47,9 +47,9 @@ RSpec.describe ProjectGroupLink do
 
       it 'returns all records which are greater than Guests access' do
         expect(described_class.non_guests).to match_array([
-                                                           project_group_link_reporter,
-                                                           project_group_link_developer,
-                                                           project_group_link_maintainer
+                                                            project_group_link_reporter,
+                                                            project_group_link_developer,
+                                                            project_group_link_maintainer
                                                           ])
       end
     end
diff --git a/spec/requests/api/graphql/project/branch_protections/merge_access_levels_spec.rb b/spec/requests/api/graphql/project/branch_protections/merge_access_levels_spec.rb
index cb5006ec8e4..a80f683ea93 100644
--- a/spec/requests/api/graphql/project/branch_protections/merge_access_levels_spec.rb
+++ b/spec/requests/api/graphql/project/branch_protections/merge_access_levels_spec.rb
@@ -3,107 +3,5 @@
 require 'spec_helper'
 
 RSpec.describe 'getting merge access levels for a branch protection' do
-  include GraphqlHelpers
-
-  let_it_be(:current_user) { create(:user) }
-
-  let(:merge_access_level_data) { merge_access_levels_data[0] }
-
-  let(:merge_access_levels_data) do
-    graphql_data_at('project',
-                    'branchRules',
-                    'nodes',
-                    0,
-                    'branchProtection',
-                    'mergeAccessLevels',
-                    'nodes')
-  end
-
-  let(:project) { protected_branch.project }
-
-  let(:merge_access_levels_count) { protected_branch.merge_access_levels.size }
-
-  let(:variables) { { path: project.full_path } }
-
-  let(:fields) { all_graphql_fields_for('MergeAccessLevel') }
-
-  let(:query) do
-    <<~GQL
-    query($path: ID!) {
-      project(fullPath: $path) {
-        branchRules(first: 1) {
-          nodes {
-            branchProtection {
-              mergeAccessLevels {
-                nodes {
-                  #{fields}
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    GQL
-  end
-
-  context 'when the user does not have read_protected_branch abilities' do
-    let_it_be(:protected_branch) { create(:protected_branch) }
-
-    before do
-      project.add_guest(current_user)
-      post_graphql(query, current_user: current_user, variables: variables)
-    end
-
-    it_behaves_like 'a working graphql query'
-
-    it { expect(merge_access_levels_data).not_to be_present }
-  end
-
-  shared_examples 'merge access request' do
-    let(:merge_access) { protected_branch.merge_access_levels.first }
-
-    before do
-      project.add_maintainer(current_user)
-      post_graphql(query, current_user: current_user, variables: variables)
-    end
-
-    it_behaves_like 'a working graphql query'
-
-    it 'returns all merge access levels' do
-      expect(merge_access_levels_data.size).to eq(merge_access_levels_count)
-    end
-
-    it 'includes access_level' do
-      expect(merge_access_level_data['accessLevel'])
-        .to eq(merge_access.access_level)
-    end
-
-    it 'includes access_level_description' do
-      expect(merge_access_level_data['accessLevelDescription'])
-        .to eq(merge_access.humanize)
-    end
-  end
-
-  context 'when the user does have read_protected_branch abilities' do
-    let(:merge_access) { protected_branch.merge_access_levels.first }
-
-    context 'when no one has access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :no_one_can_merge) }
-
-      it_behaves_like 'merge access request'
-    end
-
-    context 'when developers have access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :developers_can_merge) }
-
-      it_behaves_like 'merge access request'
-    end
-
-    context 'when maintainers have access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :maintainers_can_merge) }
-
-      it_behaves_like 'merge access request'
-    end
-  end
+  include_examples 'perform graphql requests for AccessLevel type objects', :merge
 end
diff --git a/spec/requests/api/graphql/project/branch_protections/push_access_levels_spec.rb b/spec/requests/api/graphql/project/branch_protections/push_access_levels_spec.rb
index 59f9c7d61cb..cfdaf1096c3 100644
--- a/spec/requests/api/graphql/project/branch_protections/push_access_levels_spec.rb
+++ b/spec/requests/api/graphql/project/branch_protections/push_access_levels_spec.rb
@@ -3,107 +3,5 @@
 require 'spec_helper'
 
 RSpec.describe 'getting push access levels for a branch protection' do
-  include GraphqlHelpers
-
-  let_it_be(:current_user) { create(:user) }
-
-  let(:push_access_level_data) { push_access_levels_data[0] }
-
-  let(:push_access_levels_data) do
-    graphql_data_at('project',
-                    'branchRules',
-                    'nodes',
-                    0,
-                    'branchProtection',
-                    'pushAccessLevels',
-                    'nodes')
-  end
-
-  let(:project) { protected_branch.project }
-
-  let(:push_access_levels_count) { protected_branch.push_access_levels.size }
-
-  let(:variables) { { path: project.full_path } }
-
-  let(:fields) { all_graphql_fields_for('PushAccessLevel'.classify) }
-
-  let(:query) do
-    <<~GQL
-    query($path: ID!) {
-      project(fullPath: $path) {
-        branchRules(first: 1) {
-          nodes {
-            branchProtection {
-              pushAccessLevels {
-                nodes {
-                  #{fields}
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    GQL
-  end
-
-  context 'when the user does not have read_protected_branch abilities' do
-    let_it_be(:protected_branch) { create(:protected_branch) }
-
-    before do
-      project.add_guest(current_user)
-      post_graphql(query, current_user: current_user, variables: variables)
-    end
-
-    it_behaves_like 'a working graphql query'
-
-    it { expect(push_access_levels_data).not_to be_present }
-  end
-
-  shared_examples 'push access request' do
-    let(:push_access) { protected_branch.push_access_levels.first }
-
-    before do
-      project.add_maintainer(current_user)
-      post_graphql(query, current_user: current_user, variables: variables)
-    end
-
-    it_behaves_like 'a working graphql query'
-
-    it 'returns all push access levels' do
-      expect(push_access_levels_data.size).to eq(push_access_levels_count)
-    end
-
-    it 'includes access_level' do
-      expect(push_access_level_data['accessLevel'])
-        .to eq(push_access.access_level)
-    end
-
-    it 'includes access_level_description' do
-      expect(push_access_level_data['accessLevelDescription'])
-        .to eq(push_access.humanize)
-    end
-  end
-
-  context 'when the user does have read_protected_branch abilities' do
-    let(:push_access) { protected_branch.push_access_levels.first }
-
-    context 'when no one has access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :no_one_can_push) }
-
-      it_behaves_like 'push access request'
-    end
-
-    context 'when developers have access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :developers_can_push) }
-
-      it_behaves_like 'push access request'
-    end
-
-    context 'when maintainers have access' do
-      let_it_be(:protected_branch) { create(:protected_branch, :maintainers_can_push) }
-
-      it_behaves_like 'push access request'
-    end
-  end
+  include_examples 'perform graphql requests for AccessLevel type objects', :push
 end
diff --git a/spec/requests/api/graphql/project/branch_rules_spec.rb b/spec/requests/api/graphql/project/branch_rules_spec.rb
index 70fb37941e2..03b16cc4cfd 100644
--- a/spec/requests/api/graphql/project/branch_rules_spec.rb
+++ b/spec/requests/api/graphql/project/branch_rules_spec.rb
@@ -21,27 +21,24 @@ RSpec.describe 'getting list of branch rules for a project' do
 
   let(:branch_rules_data) { graphql_data_at('project', 'branchRules', 'edges') }
   let(:variables) { { path: project.full_path } }
-
-  let(:fields) do
-    <<~QUERY
-    pageInfo {
-      hasNextPage
-      hasPreviousPage
-    }
-    edges {
-      cursor
-      node {
-        #{all_graphql_fields_for('branch_rules'.classify)}
-      }
-    }
-    QUERY
-  end
+  let(:fields) { all_graphql_fields_for('BranchRule', max_depth: 2) }
 
   let(:query) do
     <<~GQL
     query($path: ID!, $n: Int, $cursor: String) {
       project(fullPath: $path) {
-        branchRules(first: $n, after: $cursor) { #{fields} }
+        branchRules(first: $n, after: $cursor) {
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+          }
+          edges {
+            cursor
+            node {
+              #{fields}
+            }
+          }
+        }
       }
     }
     GQL
@@ -64,15 +61,12 @@ RSpec.describe 'getting list of branch rules for a project' do
       post_graphql(query, current_user: current_user, variables: variables)
     end
 
-    it_behaves_like 'a working graphql query'
-
-    it 'includes a name' do
-      expect(branch_rules_data.dig(0, 'node', 'name')).to be_present
-    end
-
-    it 'includes created_at and updated_at' do
-      expect(branch_rules_data.dig(0, 'node', 'createdAt')).to be_present
-      expect(branch_rules_data.dig(1, 'node', 'updatedAt')).to be_present
+    it_behaves_like 'a working graphql query' do
+      it 'includes all fields', :aggregate_failures do
+        expect(branch_rules_data.dig(0, 'node', 'name')).to be_present
+        expect(branch_rules_data.dig(0, 'node', 'createdAt')).to be_present
+        expect(branch_rules_data.dig(0, 'node', 'updatedAt')).to be_present
+      end
     end
 
     context 'when limiting the number of results' do
diff --git a/spec/support/shared_examples/features/content_editor_shared_examples.rb b/spec/support/shared_examples/features/content_editor_shared_examples.rb
index 32590fbab8c..4eae4f31262 100644
--- a/spec/support/shared_examples/features/content_editor_shared_examples.rb
+++ b/spec/support/shared_examples/features/content_editor_shared_examples.rb
@@ -217,4 +217,87 @@ RSpec.shared_examples 'edits content using the content editor' do
       end
     end
   end
+
+  describe 'autocomplete suggestions' do
+    let(:reference_dropdown) { '[data-testid="content-editor-reference-dropdown"]' }
+
+    before do
+      if defined?(project)
+        create(:issue, project: project, title: 'My Cool Linked Issue')
+        create(:merge_request, source_project: project, title: 'My Cool Merge Request')
+        create(:label, project: project, title: 'My Cool Label')
+        create(:milestone, project: project, title: 'My Cool Milestone')
+
+        project.add_maintainer(create(:user, name: 'abc123', username: 'abc123'))
+      else # group wikis
+        project = create(:project, group: group)
+
+        create(:issue, project: project, title: 'My Cool Linked Issue')
+        create(:merge_request, source_project: project, title: 'My Cool Merge Request')
+        create(:group_label, group: group, title: 'My Cool Label')
+        create(:milestone, group: group, title: 'My Cool Milestone')
+
+        project.add_maintainer(create(:user, name: 'abc123', username: 'abc123'))
+      end
+
+      switch_to_content_editor
+
+      type_in_content_editor :enter
+    end
+
+    it 'shows suggestions for members' do
+      type_in_content_editor '@a'
+
+      expect(find(reference_dropdown)).to have_text('abc123')
+      expect(find(reference_dropdown)).to have_text('all')
+
+      send_keys [:arrow_down, :enter]
+
+      expect(page).not_to have_css(reference_dropdown)
+      expect(page).to have_text('@abc123')
+    end
+
+    it 'shows suggestions for merge requests' do
+      type_in_content_editor '!'
+
+      expect(find(reference_dropdown)).to have_text('My Cool Merge Request')
+
+      send_keys :enter
+
+      expect(page).not_to have_css(reference_dropdown)
+      expect(page).to have_text('!1')
+    end
+
+    it 'shows suggestions for issues' do
+      type_in_content_editor '#'
+
+      expect(find(reference_dropdown)).to have_text('My Cool Linked Issue')
+
+      send_keys :enter
+
+      expect(page).not_to have_css(reference_dropdown)
+      expect(page).to have_text('#1')
+    end
+
+    it 'shows suggestions for milestones' do
+      type_in_content_editor '%'
+
+      expect(find(reference_dropdown)).to have_text('My Cool Milestone')
+
+      send_keys :enter
+
+      expect(page).not_to have_css(reference_dropdown)
+      expect(page).to have_text('%My Cool Milestone')
+    end
+
+    it 'doesn\'t show suggestions dropdown if there are no suggestions to show' do
+      type_in_content_editor '%'
+
+      expect(find(reference_dropdown)).to have_text('My Cool Milestone')
+
+      type_in_content_editor 'x'
+
+      expect(page).not_to have_css(reference_dropdown)
+    end
+  end
 end
diff --git a/spec/support/shared_examples/requests/api/graphql/projects/branch_protections/access_level_request_examples.rb b/spec/support/shared_examples/requests/api/graphql/projects/branch_protections/access_level_request_examples.rb
new file mode 100644
index 00000000000..e30bdf8f655
--- /dev/null
+++ b/spec/support/shared_examples/requests/api/graphql/projects/branch_protections/access_level_request_examples.rb
@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+RSpec.shared_examples 'perform graphql requests for AccessLevel type objects' do |access_level_kind|
+  include GraphqlHelpers
+
+  let_it_be(:current_user) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let_it_be(:variables) { { path: project.full_path } }
+
+  let(:fields) { all_graphql_fields_for("#{access_level_kind.to_s.classify}AccessLevel", max_depth: 2) }
+  let(:access_levels) { protected_branch.public_send("#{access_level_kind}_access_levels") }
+  let(:access_levels_count) { access_levels.size }
+  let(:maintainer_access_level) { access_levels.for_role.first }
+  let(:user_access_level) { access_levels.for_user.first }
+  let(:group_access_level) { access_levels.for_group.first }
+  let(:user_access_level_data) { access_levels_data.find { |data| data['user'].present? } }
+  let(:group_access_level_data) { access_levels_data.find { |data| data['group'].present? } }
+  let(:maintainer_access_level_data) { access_levels_data.find { |data| data['user'].blank? && data['group'].blank? } }
+  let(:access_levels_data) do
+    graphql_data_at('project',
+                    'branchRules',
+                    'nodes',
+                    0,
+                    'branchProtection',
+                    "#{access_level_kind.to_s.camelize(:lower)}AccessLevels",
+                    'nodes')
+  end
+
+  let(:query) do
+    <<~GQL
+    query($path: ID!) {
+      project(fullPath: $path) {
+        branchRules(first: 1) {
+          nodes {
+            branchProtection {
+              #{access_level_kind.to_s.camelize(:lower)}AccessLevels {
+                nodes {
+                  #{fields}
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    GQL
+  end
+
+  describe 'requesting AccessLevel type objects as a guest user' do
+    let_it_be(:protected_branch) { create(:protected_branch, project: project) }
+
+    before do
+      create(:project_member, :guest, user: current_user, source: project)
+      post_graphql(query, current_user: current_user, variables: variables)
+    end
+
+    it_behaves_like 'a working graphql query'
+
+    it "does not return any #{access_level_kind.to_s.classify}AccessLevel objects" do
+      expect(access_levels_data).not_to be_present
+    end
+  end
+
+  describe 'requesting AccessLevel type objects as a maintainer' do
+    let_it_be(:protected_branch) do
+      create(:protected_branch,
+             "maintainers_can_#{access_level_kind}",
+             "user_can_#{access_level_kind}",
+             "group_can_#{access_level_kind}",
+             project: project)
+    end
+
+    before do
+      create(:project_member, :maintainer, user: current_user, source: project)
+      post_graphql(query, current_user: current_user, variables: variables)
+    end
+
+    it_behaves_like 'a working graphql query'
+
+    it "returns all #{access_level_kind} access level fields", :aggregate_failures do
+      expect(access_levels_count).to eq(3),
+        "Expected 3 #{access_level_kind.to_s.classify}AccessLevel records present, got #{access_levels_count}"
+      expect(access_levels_data.size).to eq(access_levels_count)
+
+      [:maintainer, :user, :group].each do |access_level_type|
+        access_level_data = public_send("#{access_level_type}_access_level_data")
+        access_level = public_send("#{access_level_type}_access_level")
+
+        expect(access_level_data['accessLevel']).to eq(access_level.access_level)
+        expect(access_level_data['accessLevelDescription']).to eq(access_level.humanize)
+
+        case access_level_type
+        when :user
+          expect(access_level_data.dig('user', 'name')).to eq(access_level.user.name)
+          expect(access_level_data.dig('group', 'name')).to be_nil
+        when :group
+          expect(access_level_data.dig('group', 'name')).to eq(access_level.group.name)
+          expect(access_level_data.dig('user', 'name')).to be_nil
+        else
+          expect(access_level_data.dig('group', 'name')).to be_nil
+          expect(access_level_data.dig('user', 'name')).to be_nil
+        end
+      end
+    end
+  end
+end
diff --git a/yarn.lock b/yarn.lock
index 187e18182c2..4f5d4a6fc73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1877,6 +1877,15 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.17.tgz#4fdd1bdf62c82c1af6feef91c689906a8f5b171e"
   integrity sha512-OyKL+pqWJEtjyd9/mrsuY1kZh2b3LWpOQDWKtd4aWR4EA0efmQG+7FPwcIeAVEh7ZoqM+/ABCnPjN6IjzIrSfg==
 
+"@tiptap/suggestion@^2.0.0-beta.96":
+  version "2.0.0-beta.98"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.0-beta.98.tgz#b953ae9153eab6ea07fa39ec5aafaa3eba695117"
+  integrity sha512-zdXMdLBt+i/LWu3ZxGV9/UpMCrArqhno73/Tfno+9Gz2Y+jrUsex01sPuf3L/e8YlySAdLmZImNtTc7LjXsvEQ==
+  dependencies:
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
+
 "@tiptap/vue-2@^2.0.0-beta.84":
   version "2.0.0-beta.84"
   resolved "https://registry.yarnpkg.com/@tiptap/vue-2/-/vue-2-2.0.0-beta.84.tgz#abf2e8e53759e9d7c69b6a7f62164a1a8be2c013"
@@ -2461,6 +2470,11 @@
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
+JSV@^4.0.x:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
+  integrity sha512-ZJ6wx9xaKJ3yFUhq5/sk82PJMuUyLk277I8mQeyDgCTjGdjWJIvPfaU5LIXaMuaN2UO1X3kZH4+lgphublZUHw==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -2624,6 +2638,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178"
+  integrity sha512-3iF4FIKdxaVYT3JqQuY3Wat/T2t7TRbbQ94Fu50ZUCbLy4TFbTzr90NOHQodQkNqmeEGCw8WbeP78WNi6SKYUA==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -3329,6 +3348,15 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
+  integrity sha512-sQfYDlfv2DGVtjdoQqxS0cEZDroyG8h6TamA6rvxwlrU5BaSLDx9xhatBYl2pxZ7gmpNaPFVwBtdGdu5rQ+tYQ==
+  dependencies:
+    ansi-styles "~1.0.0"
+    has-color "~0.1.0"
+    strip-ansi "~0.1.0"
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -6142,6 +6170,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
+has-color@~0.1.0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f"
+  integrity sha512-kaNz5OTAYYmt646Hkqw50/qyxP2vFnTVu5AQ1Zmk22Kk5+4Qx6BpO8+u7IKsML5fOsFk0ZT0AcCJNYwcvaLBvw==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -7599,6 +7632,14 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonlint@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/jsonlint/-/jsonlint-1.6.3.tgz#cb5e31efc0b78291d0d862fbef05900adf212988"
+  integrity sha512-jMVTMzP+7gU/IyC6hvKyWpUU8tmTkK5b3BPNuMI9U8Sit+YAWLlZwB6Y6YrdCxfg2kNz05p3XY3Bmm4m26Nv3A==
+  dependencies:
+    JSV "^4.0.x"
+    nomnom "^1.5.x"
+
 jszip@^3.1.3:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
@@ -9035,6 +9076,14 @@ nodemon@^2.0.19:
     touch "^3.1.0"
     undefsafe "^2.0.5"
 
+nomnom@^1.5.x:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7"
+  integrity sha512-5s0JxqhDx9/rksG2BTMVN1enjWSvPidpoSgViZU4ZXULyTe+7jxcCRLB6f42Z0l1xYJpleCBtSyY6Lwg3uu5CQ==
+  dependencies:
+    chalk "~0.4.0"
+    underscore "~1.6.0"
+
 nopt@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.3.tgz#a375cad9d02fd921278d954c2254d5aa57e15e48"
@@ -11014,6 +11063,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-ansi@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991"
+  integrity sha512-behete+3uqxecWlDAm5lmskaSaISA+ThQ4oNNBDTBJt0x2ppR6IPqfZNuj6BLaLJ/Sji4TPZlcRyOis8wXQTLg==
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -11597,6 +11651,11 @@ undefsafe@^2.0.5:
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
   integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
 
+underscore@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+  integrity sha512-z4o1fvKUojIWh9XuaVLUDdf86RQiq13AC1dmHbTpoyuu+bquHms76v16CjycCbec87J7z0k//SiQVk0sMdFmpQ==
+
 undici@^5.0.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/undici/-/undici-5.8.0.tgz#dec9a8ccd90e5a1d81d43c0eab6503146d649a4f"