Add latest changes from gitlab-org/gitlab@15-10-stable-eev15.10.0-rc42

1634 files changed, 18131 insertions, 11415 deletions

diff --git a/spec/frontend/.eslintrc.yml b/spec/frontend/.eslintrc.yml
index 45639f4c948..200f539fb3e 100644
--- a/spec/frontend/.eslintrc.yml
+++ b/spec/frontend/.eslintrc.yml
@@ -12,6 +12,7 @@ settings:
     jest:
       jestConfigFile: 'jest.config.js'
 rules:
+  '@gitlab/vtu-no-explicit-wrapper-destroy': error
   jest/expect-expect:
     - off
     - assertFunctionNames:
diff --git a/spec/frontend/__helpers__/create_mock_source_editor_extension.js b/spec/frontend/__helpers__/create_mock_source_editor_extension.js
new file mode 100644
index 00000000000..fa529604d6f
--- /dev/null
+++ b/spec/frontend/__helpers__/create_mock_source_editor_extension.js
@@ -0,0 +1,12 @@
+export const createMockSourceEditorExtension = (ActualExtension) => {
+  const { extensionName } = ActualExtension;
+  const providedKeys = Object.keys(new ActualExtension().provides());
+
+  const mockedMethods = Object.fromEntries(providedKeys.map((key) => [key, jest.fn()]));
+  const MockExtension = function MockExtension() {};
+  MockExtension.extensionName = extensionName;
+  MockExtension.mockedMethods = mockedMethods;
+  MockExtension.prototype.provides = jest.fn().mockReturnValue(mockedMethods);
+
+  return MockExtension;
+};
diff --git a/spec/frontend/__helpers__/experimentation_helper.js b/spec/frontend/__helpers__/experimentation_helper.js
index d5044be88d7..7e8dd463d28 100644
--- a/spec/frontend/__helpers__/experimentation_helper.js
+++ b/spec/frontend/__helpers__/experimentation_helper.js
@@ -2,16 +2,9 @@ import { merge } from 'lodash';
 
 // This helper is for specs that use `gitlab/experimentation` module
 export function withGonExperiment(experimentKey, value = true) {
-  let origGon;
-
   beforeEach(() => {
-    origGon = window.gon;
     window.gon = merge({}, window.gon || {}, { experiments: { [experimentKey]: value } });
   });
-
-  afterEach(() => {
-    window.gon = origGon;
-  });
 }
 
 // The following helper is for specs that use `gitlab-experiment` utilities,
diff --git a/spec/frontend/__helpers__/gon_helper.js b/spec/frontend/__helpers__/gon_helper.js
new file mode 100644
index 00000000000..51d5ece5fc1
--- /dev/null
+++ b/spec/frontend/__helpers__/gon_helper.js
@@ -0,0 +1,5 @@
+export const createGon = (IS_EE) => {
+  return {
+    ee: IS_EE,
+  };
+};
diff --git a/spec/frontend/__helpers__/keep_alive_component_helper_spec.js b/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
index 54d397d0997..8b6cdedfd9f 100644
--- a/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
+++ b/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
@@ -12,10 +12,6 @@ describe('keepAlive', () => {
     wrapper = mount(keepAlive(component));
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('converts a component to a keep-alive component', async () => {
     const { element } = wrapper.findComponent(component);
 
diff --git a/spec/frontend/__helpers__/shared_test_setup.js b/spec/frontend/__helpers__/shared_test_setup.js
index 2fe9fe89a90..0217835b2a3 100644
--- a/spec/frontend/__helpers__/shared_test_setup.js
+++ b/spec/frontend/__helpers__/shared_test_setup.js
@@ -1,10 +1,12 @@
 /* Common setup for both unit and integration test environments */
+import { ReadableStream, WritableStream } from 'node:stream/web';
 import * as jqueryMatchers from 'custom-jquery-matchers';
 import Vue from 'vue';
 import { enableAutoDestroy } from '@vue/test-utils';
 import 'jquery';
 import Translate from '~/vue_shared/translate';
 import setWindowLocation from './set_window_location_helper';
+import { createGon } from './gon_helper';
 import { setGlobalDateToFakeDate } from './fake_date';
 import { TEST_HOST } from './test_constants';
 import * as customMatchers from './matchers';
@@ -13,6 +15,9 @@ import './dom_shims';
 import './jquery';
 import '~/commons/bootstrap';
 
+global.ReadableStream = ReadableStream;
+global.WritableStream = WritableStream;
+
 enableAutoDestroy(afterEach);
 
 // This module has some fairly decent visual test coverage in it's own repository.
@@ -67,8 +72,13 @@ beforeEach(() => {
   // eslint-disable-next-line jest/no-standalone-expect
   expect.hasAssertions();
 
-  // Reset the mocked window.location. This ensures tests don't interfere with
-  // each other, and removes the need to tidy up if it was changed for a given
-  // test.
+  // Reset globals: This ensures tests don't interfere with
+  // each other, and removes the need to tidy up if it was
+  // changed for a given test.
+
+  // Reset the mocked window.location
   setWindowLocation(TEST_HOST);
+
+  // Reset window.gon object
+  window.gon = createGon(window.IS_EE);
 });
diff --git a/spec/frontend/__helpers__/vue_mock_directive.js b/spec/frontend/__helpers__/vue_mock_directive.js
index e952f258c4d..e7a2aa7f10d 100644
--- a/spec/frontend/__helpers__/vue_mock_directive.js
+++ b/spec/frontend/__helpers__/vue_mock_directive.js
@@ -2,7 +2,7 @@ export const getKey = (name) => `$_gl_jest_${name}`;
 
 export const getBinding = (el, name) => el[getKey(name)];
 
-const writeBindingToElement = (el, { name, value, arg, modifiers }) => {
+const writeBindingToElement = (el, name, { value, arg, modifiers }) => {
   el[getKey(name)] = {
     value,
     arg,
@@ -10,16 +10,24 @@ const writeBindingToElement = (el, { name, value, arg, modifiers }) => {
   };
 };
 
-export const createMockDirective = () => ({
-  bind(el, binding) {
-    writeBindingToElement(el, binding);
-  },
+export const createMockDirective = (name) => {
+  if (!name) {
+    throw new Error(
+      'Vue 3 no longer passes the name of the directive to its hooks, an explicit name is required',
+    );
+  }
 
-  update(el, binding) {
-    writeBindingToElement(el, binding);
-  },
+  return {
+    bind(el, binding) {
+      writeBindingToElement(el, name, binding);
+    },
 
-  unbind(el, { name }) {
-    delete el[getKey(name)];
-  },
-});
+    update(el, binding) {
+      writeBindingToElement(el, name, binding);
+    },
+
+    unbind(el) {
+      delete el[getKey(name)];
+    },
+  };
+};
diff --git a/spec/frontend/__helpers__/vuex_action_helper.js b/spec/frontend/__helpers__/vuex_action_helper.js
index bdd5a0a9034..94164814879 100644
--- a/spec/frontend/__helpers__/vuex_action_helper.js
+++ b/spec/frontend/__helpers__/vuex_action_helper.js
@@ -78,6 +78,8 @@ export default (
     }
 
     actions.push(dispatchedAction);
+
+    return Promise.resolve();
   };
 
   const validateResults = () => {
diff --git a/spec/frontend/__helpers__/vuex_action_helper_spec.js b/spec/frontend/__helpers__/vuex_action_helper_spec.js
index 4bd21ff150a..64081ca11a3 100644
--- a/spec/frontend/__helpers__/vuex_action_helper_spec.js
+++ b/spec/frontend/__helpers__/vuex_action_helper_spec.js
@@ -83,6 +83,20 @@ describe.each([testActionFn, testActionFnWithOptionsArg])(
       });
     });
 
+    describe('given an async action (chaining off a dispatch)', () => {
+      it('mocks dispatch accurately', () => {
+        const asyncAction = ({ commit, dispatch }) => {
+          return dispatch('ACTION').then(() => {
+            commit('MUTATION');
+          });
+        };
+
+        assertion = { actions: [{ type: 'ACTION' }], mutations: [{ type: 'MUTATION' }] };
+
+        return testAction(asyncAction, null, {}, assertion.mutations, assertion.actions);
+      });
+    });
+
     describe('given an async action (returning a promise)', () => {
       const data = { FOO: 'BAR' };
 
diff --git a/spec/frontend/__mocks__/@gitlab/ui.js b/spec/frontend/__mocks__/@gitlab/ui.js
index 4d893bcd0bd..c51f37db384 100644
--- a/spec/frontend/__mocks__/@gitlab/ui.js
+++ b/spec/frontend/__mocks__/@gitlab/ui.js
@@ -13,13 +13,18 @@ export * from '@gitlab/ui';
  * are imported internally in `@gitlab/ui`.
  */
 
-jest.mock('@gitlab/ui/dist/directives/tooltip.js', () => ({
+/* eslint-disable global-require */
+
+jest.mock('@gitlab/ui/src/directives/tooltip.js', () => ({
   GlTooltipDirective: {
     bind() {},
   },
 }));
+jest.mock('@gitlab/ui/dist/directives/tooltip.js', () =>
+  require('@gitlab/ui/src/directives/tooltip'),
+);
 
-jest.mock('@gitlab/ui/dist/components/base/tooltip/tooltip.js', () => ({
+jest.mock('@gitlab/ui/src/components/base/tooltip/tooltip.vue', () => ({
   props: ['target', 'id', 'triggers', 'placement', 'container', 'boundary', 'disabled', 'show'],
   render(h) {
     return h(
@@ -33,7 +38,11 @@ jest.mock('@gitlab/ui/dist/components/base/tooltip/tooltip.js', () => ({
   },
 }));
 
-jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () => ({
+jest.mock('@gitlab/ui/dist/components/base/tooltip/tooltip.js', () =>
+  require('@gitlab/ui/src/components/base/tooltip/tooltip.vue'),
+);
+
+jest.mock('@gitlab/ui/src/components/base/popover/popover.vue', () => ({
   props: {
     cssClasses: {
       type: Array,
@@ -65,3 +74,6 @@ jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () => ({
     );
   },
 }));
+jest.mock('@gitlab/ui/dist/components/base/popover/popover.js', () =>
+  require('@gitlab/ui/src/components/base/popover/popover.vue'),
+);
diff --git a/spec/frontend/__mocks__/lodash/debounce.js b/spec/frontend/__mocks__/lodash/debounce.js
index d4fe2ce5406..15f806fc31a 100644
--- a/spec/frontend/__mocks__/lodash/debounce.js
+++ b/spec/frontend/__mocks__/lodash/debounce.js
@@ -9,9 +9,22 @@
 // Further reference: https://github.com/facebook/jest/issues/3465
 
 export default (fn) => {
-  const debouncedFn = jest.fn().mockImplementation(fn);
-  debouncedFn.cancel = jest.fn();
-  debouncedFn.flush = jest.fn().mockImplementation(() => {
+  let id;
+  const debouncedFn = jest.fn(function run(...args) {
+    // this is calculated in runtime so beforeAll hook works in tests
+    const timeout = global.JEST_DEBOUNCE_THROTTLE_TIMEOUT;
+    if (timeout) {
+      id = setTimeout(() => {
+        fn.apply(this, args);
+      }, timeout);
+    } else {
+      fn.apply(this, args);
+    }
+  });
+  debouncedFn.cancel = jest.fn(() => {
+    clearTimeout(id);
+  });
+  debouncedFn.flush = jest.fn(() => {
     const errorMessage =
       "The .flush() method returned by lodash.debounce is not yet implemented/mocked by the mock in 'spec/frontend/__mocks__/lodash/debounce.js'.";
 
diff --git a/spec/frontend/__mocks__/lodash/throttle.js b/spec/frontend/__mocks__/lodash/throttle.js
index e8a82654c78..b1014662918 100644
--- a/spec/frontend/__mocks__/lodash/throttle.js
+++ b/spec/frontend/__mocks__/lodash/throttle.js
@@ -1,4 +1,4 @@
 // Similar to `lodash/debounce`, `lodash/throttle` also causes flaky specs.
 // See `./debounce.js` for more details.
 
-export default (fn) => fn;
+export { default } from './debounce';
diff --git a/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js b/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js
index ec20088c443..5de5f495f01 100644
--- a/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js
+++ b/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js
@@ -33,10 +33,6 @@ describe('AbuseCategorySelector', () => {
     createComponent({ showDrawer: true });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDrawer = () => wrapper.findComponent(GlDrawer);
   const findTitle = () => wrapper.findByTestId('category-drawer-title');
 
diff --git a/spec/frontend/access_tokens/components/expires_at_field_spec.js b/spec/frontend/access_tokens/components/expires_at_field_spec.js
index 491d2a0e323..6605faadc17 100644
--- a/spec/frontend/access_tokens/components/expires_at_field_spec.js
+++ b/spec/frontend/access_tokens/components/expires_at_field_spec.js
@@ -25,10 +25,6 @@ describe('~/access_tokens/components/expires_at_field', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render datepicker with input info', () => {
     createComponent();
 
diff --git a/spec/frontend/access_tokens/components/new_access_token_app_spec.js b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
index e4313bdfa26..fb92cc34ce9 100644
--- a/spec/frontend/access_tokens/components/new_access_token_app_spec.js
+++ b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
@@ -4,12 +4,12 @@ import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import NewAccessTokenApp from '~/access_tokens/components/new_access_token_app.vue';
 import { EVENT_ERROR, EVENT_SUCCESS, FORM_SELECTOR } from '~/access_tokens/components/constants';
-import { createAlert, VARIANT_INFO } from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/alert';
 import { __, sprintf } from '~/locale';
 import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
 import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('~/access_tokens/components/new_access_token_app', () => {
   let wrapper;
@@ -52,7 +52,6 @@ describe('~/access_tokens/components/new_access_token_app', () => {
 
   afterEach(() => {
     resetHTMLFixture();
-    wrapper.destroy();
     createAlert.mockClear();
   });
 
diff --git a/spec/frontend/access_tokens/components/token_spec.js b/spec/frontend/access_tokens/components/token_spec.js
index 1af21aaa8cd..f62f7d72e3b 100644
--- a/spec/frontend/access_tokens/components/token_spec.js
+++ b/spec/frontend/access_tokens/components/token_spec.js
@@ -23,10 +23,6 @@ describe('Token', () => {
     wrapper = mountExtended(Token, { propsData: defaultPropsData, slots: defaultSlots });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders title slot', () => {
     createComponent();
 
diff --git a/spec/frontend/access_tokens/components/tokens_app_spec.js b/spec/frontend/access_tokens/components/tokens_app_spec.js
index d7acfbb47eb..6e7dee6a2cc 100644
--- a/spec/frontend/access_tokens/components/tokens_app_spec.js
+++ b/spec/frontend/access_tokens/components/tokens_app_spec.js
@@ -54,10 +54,6 @@ describe('TokensApp', () => {
     expect(container.props()).toMatchObject(expectedProps);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all enabled tokens', () => {
     createComponent();
 
diff --git a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
index 1d57473943b..5e96da9af7e 100644
--- a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
+++ b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
@@ -55,10 +55,6 @@ describe('AddContextCommitsModal', () => {
     wrapper = createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders modal with 2 tabs', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
index f679576182f..975f115c4bb 100644
--- a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
+++ b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
@@ -26,10 +26,6 @@ describe('ReviewTabContainer', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows loading icon when commits are being loaded', () => {
     createWrapper({ isLoading: true });
     expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
diff --git a/spec/frontend/add_context_commits_modal/store/actions_spec.js b/spec/frontend/add_context_commits_modal/store/actions_spec.js
index 27c8d760a96..3863eee3795 100644
--- a/spec/frontend/add_context_commits_modal/store/actions_spec.js
+++ b/spec/frontend/add_context_commits_modal/store/actions_spec.js
@@ -31,10 +31,10 @@ describe('AddContextCommitsModalStoreActions', () => {
     short_id: 'abcdef',
     committed_date: '2020-06-12',
   };
-  gon.api_version = 'v4';
   let mock;
 
   beforeEach(() => {
+    gon.api_version = 'v4';
     mock = new MockAdapter(axios);
   });
 
diff --git a/spec/frontend/admin/abuse_reports/components/abuse_report_row_spec.js b/spec/frontend/admin/abuse_reports/components/abuse_report_row_spec.js
new file mode 100644
index 00000000000..d32fa25d238
--- /dev/null
+++ b/spec/frontend/admin/abuse_reports/components/abuse_report_row_spec.js
@@ -0,0 +1,43 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import AbuseReportRow from '~/admin/abuse_reports/components/abuse_report_row.vue';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import { mockAbuseReports } from '../mock_data';
+
+describe('AbuseReportRow', () => {
+  let wrapper;
+  const mockAbuseReport = mockAbuseReports[0];
+
+  const findListItem = () => wrapper.findComponent(ListItem);
+  const findTitle = () => wrapper.findByTestId('title');
+  const findUpdatedAt = () => wrapper.findByTestId('updated-at');
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(AbuseReportRow, {
+      propsData: {
+        report: mockAbuseReport,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders a ListItem', () => {
+    expect(findListItem().exists()).toBe(true);
+  });
+
+  it('displays correctly formatted title', () => {
+    const { reporter, reportedUser, category } = mockAbuseReport;
+    expect(findTitle().text()).toMatchInterpolatedText(
+      `${reportedUser.name} reported for ${category} by ${reporter.name}`,
+    );
+  });
+
+  it('displays correctly formatted updated at', () => {
+    expect(findUpdatedAt().text()).toMatchInterpolatedText(
+      `Updated ${getTimeago().format(mockAbuseReport.updatedAt)}`,
+    );
+  });
+});
diff --git a/spec/frontend/admin/abuse_reports/components/abuse_reports_filtered_search_bar_spec.js b/spec/frontend/admin/abuse_reports/components/abuse_reports_filtered_search_bar_spec.js
new file mode 100644
index 00000000000..9efab8403a0
--- /dev/null
+++ b/spec/frontend/admin/abuse_reports/components/abuse_reports_filtered_search_bar_spec.js
@@ -0,0 +1,214 @@
+import { shallowMount } from '@vue/test-utils';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { redirectTo, updateHistory } from '~/lib/utils/url_utility';
+import AbuseReportsFilteredSearchBar from '~/admin/abuse_reports/components/abuse_reports_filtered_search_bar.vue';
+import {
+  FILTERED_SEARCH_TOKENS,
+  FILTERED_SEARCH_TOKEN_USER,
+  FILTERED_SEARCH_TOKEN_REPORTER,
+  FILTERED_SEARCH_TOKEN_STATUS,
+  FILTERED_SEARCH_TOKEN_CATEGORY,
+  DEFAULT_SORT,
+  SORT_OPTIONS,
+} from '~/admin/abuse_reports/constants';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
+import { buildFilteredSearchCategoryToken } from '~/admin/abuse_reports/utils';
+
+jest.mock('~/lib/utils/url_utility', () => {
+  const urlUtility = jest.requireActual('~/lib/utils/url_utility');
+
+  return {
+    __esModule: true,
+    ...urlUtility,
+    redirectTo: jest.fn(),
+    updateHistory: jest.fn(),
+  };
+});
+
+describe('AbuseReportsFilteredSearchBar', () => {
+  let wrapper;
+
+  const CATEGORIES = ['spam', 'phishing'];
+
+  const createComponent = () => {
+    wrapper = shallowMount(AbuseReportsFilteredSearchBar, {
+      provide: { categories: CATEGORIES },
+    });
+  };
+
+  const findFilteredSearchBar = () => wrapper.findComponent(FilteredSearchBar);
+
+  beforeEach(() => {
+    setWindowLocation('https://localhost');
+  });
+
+  it('passes correct props to `FilteredSearchBar` component', () => {
+    createComponent();
+
+    const categoryToken = buildFilteredSearchCategoryToken(CATEGORIES);
+
+    expect(findFilteredSearchBar().props()).toMatchObject({
+      namespace: 'abuse_reports',
+      recentSearchesStorageKey: 'abuse_reports',
+      searchInputPlaceholder: 'Filter reports',
+      tokens: [...FILTERED_SEARCH_TOKENS, categoryToken],
+      initialSortBy: DEFAULT_SORT,
+      sortOptions: SORT_OPTIONS,
+    });
+  });
+
+  it('sets status=open query when there is no initial status query', () => {
+    createComponent();
+
+    expect(updateHistory).toHaveBeenCalledWith({
+      url: 'https://localhost/?status=open',
+      replace: true,
+    });
+
+    expect(findFilteredSearchBar().props('initialFilterValue')).toMatchObject([
+      {
+        type: FILTERED_SEARCH_TOKEN_STATUS.type,
+        value: { data: 'open', operator: '=' },
+      },
+    ]);
+  });
+
+  it('parses and passes search param to `FilteredSearchBar` component as `initialFilterValue` prop', () => {
+    setWindowLocation('?status=closed&user=mr_abuser&reporter=ms_nitch');
+
+    createComponent();
+
+    expect(findFilteredSearchBar().props('initialFilterValue')).toMatchObject([
+      {
+        type: FILTERED_SEARCH_TOKEN_USER.type,
+        value: { data: 'mr_abuser', operator: '=' },
+      },
+      {
+        type: FILTERED_SEARCH_TOKEN_REPORTER.type,
+        value: { data: 'ms_nitch', operator: '=' },
+      },
+      {
+        type: FILTERED_SEARCH_TOKEN_STATUS.type,
+        value: { data: 'closed', operator: '=' },
+      },
+    ]);
+  });
+
+  describe('initial sort', () => {
+    it.each(
+      SORT_OPTIONS.flatMap(({ sortDirection: { descending, ascending } }) => [
+        descending,
+        ascending,
+      ]),
+    )(
+      'parses sort=%s query and passes it to `FilteredSearchBar` component as initialSortBy',
+      (sortBy) => {
+        setWindowLocation(`?sort=${sortBy}`);
+
+        createComponent();
+
+        expect(findFilteredSearchBar().props('initialSortBy')).toEqual(sortBy);
+      },
+    );
+
+    it(`uses ${DEFAULT_SORT} as initialSortBy when sort query param is invalid`, () => {
+      setWindowLocation(`?sort=unknown`);
+
+      createComponent();
+
+      expect(findFilteredSearchBar().props('initialSortBy')).toEqual(DEFAULT_SORT);
+    });
+  });
+
+  describe('onFilter', () => {
+    const USER_FILTER_TOKEN = {
+      type: FILTERED_SEARCH_TOKEN_USER.type,
+      value: { data: 'mr_abuser', operator: '=' },
+    };
+    const REPORTER_FILTER_TOKEN = {
+      type: FILTERED_SEARCH_TOKEN_REPORTER.type,
+      value: { data: 'ms_nitch', operator: '=' },
+    };
+    const STATUS_FILTER_TOKEN = {
+      type: FILTERED_SEARCH_TOKEN_STATUS.type,
+      value: { data: 'open', operator: '=' },
+    };
+    const CATEGORY_FILTER_TOKEN = {
+      type: FILTERED_SEARCH_TOKEN_CATEGORY.type,
+      value: { data: 'spam', operator: '=' },
+    };
+
+    const createComponentAndFilter = (filterTokens, initialLocation) => {
+      if (initialLocation) {
+        setWindowLocation(initialLocation);
+      }
+
+      createComponent();
+
+      findFilteredSearchBar().vm.$emit('onFilter', filterTokens);
+    };
+
+    it.each([USER_FILTER_TOKEN, REPORTER_FILTER_TOKEN, STATUS_FILTER_TOKEN, CATEGORY_FILTER_TOKEN])(
+      'redirects with $type query param',
+      (filterToken) => {
+        createComponentAndFilter([filterToken]);
+        const { type, value } = filterToken;
+        expect(redirectTo).toHaveBeenCalledWith(`https://localhost/?${type}=${value.data}`);
+      },
+    );
+
+    it('ignores search query param', () => {
+      const searchFilterToken = { type: FILTERED_SEARCH_TERM, value: { data: 'ignored' } };
+      createComponentAndFilter([USER_FILTER_TOKEN, searchFilterToken]);
+      expect(redirectTo).toHaveBeenCalledWith('https://localhost/?user=mr_abuser');
+    });
+
+    it('redirects without page query param', () => {
+      createComponentAndFilter([USER_FILTER_TOKEN], '?page=2');
+      expect(redirectTo).toHaveBeenCalledWith('https://localhost/?user=mr_abuser');
+    });
+
+    it('redirects with existing sort query param', () => {
+      createComponentAndFilter([USER_FILTER_TOKEN], `?sort=${DEFAULT_SORT}`);
+      expect(redirectTo).toHaveBeenCalledWith(
+        `https://localhost/?user=mr_abuser&sort=${DEFAULT_SORT}`,
+      );
+    });
+  });
+
+  describe('onSort', () => {
+    const SORT_VALUE = 'updated_at_asc';
+    const EXISTING_QUERY = 'status=closed&user=mr_abuser';
+
+    const createComponentAndSort = (initialLocation) => {
+      setWindowLocation(initialLocation);
+      createComponent();
+      findFilteredSearchBar().vm.$emit('onSort', SORT_VALUE);
+    };
+
+    it('redirects to URL with existing query params and the sort query param', () => {
+      createComponentAndSort(`?${EXISTING_QUERY}`);
+
+      expect(redirectTo).toHaveBeenCalledWith(
+        `https://localhost/?${EXISTING_QUERY}&sort=${SORT_VALUE}`,
+      );
+    });
+
+    it('redirects without page query param', () => {
+      createComponentAndSort(`?${EXISTING_QUERY}&page=2`);
+
+      expect(redirectTo).toHaveBeenCalledWith(
+        `https://localhost/?${EXISTING_QUERY}&sort=${SORT_VALUE}`,
+      );
+    });
+
+    it('redirects with existing sort query param replaced with the new one', () => {
+      createComponentAndSort(`?${EXISTING_QUERY}&sort=created_at_desc`);
+
+      expect(redirectTo).toHaveBeenCalledWith(
+        `https://localhost/?${EXISTING_QUERY}&sort=${SORT_VALUE}`,
+      );
+    });
+  });
+});
diff --git a/spec/frontend/admin/abuse_reports/components/app_spec.js b/spec/frontend/admin/abuse_reports/components/app_spec.js
new file mode 100644
index 00000000000..41728baaf33
--- /dev/null
+++ b/spec/frontend/admin/abuse_reports/components/app_spec.js
@@ -0,0 +1,104 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlPagination } from '@gitlab/ui';
+import { queryToObject, objectToQuery } from '~/lib/utils/url_utility';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import AbuseReportsApp from '~/admin/abuse_reports/components/app.vue';
+import AbuseReportsFilteredSearchBar from '~/admin/abuse_reports/components/abuse_reports_filtered_search_bar.vue';
+import AbuseReportRow from '~/admin/abuse_reports/components/abuse_report_row.vue';
+import { mockAbuseReports } from '../mock_data';
+
+describe('AbuseReportsApp', () => {
+  let wrapper;
+
+  const findFilteredSearchBar = () => wrapper.findComponent(AbuseReportsFilteredSearchBar);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findAbuseReportRows = () => wrapper.findAllComponents(AbuseReportRow);
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(AbuseReportsApp, {
+      propsData: {
+        abuseReports: mockAbuseReports,
+        pagination: { currentPage: 1, perPage: 20, totalItems: mockAbuseReports.length },
+        ...props,
+      },
+    });
+  };
+
+  it('renders AbuseReportsFilteredSearchBar', () => {
+    createComponent();
+
+    expect(findFilteredSearchBar().exists()).toBe(true);
+  });
+
+  it('renders one AbuseReportRow for each abuse report', () => {
+    createComponent();
+
+    expect(findEmptyState().exists()).toBe(false);
+    expect(findAbuseReportRows().length).toBe(mockAbuseReports.length);
+  });
+
+  it('renders empty state when there are no reports', () => {
+    createComponent({
+      abuseReports: [],
+      pagination: { currentPage: 1, perPage: 20, totalItems: 0 },
+    });
+
+    expect(findEmptyState().exists()).toBe(true);
+  });
+
+  describe('pagination', () => {
+    const pagination = {
+      currentPage: 1,
+      perPage: 1,
+      totalItems: mockAbuseReports.length,
+    };
+
+    it('renders GlPagination with the correct props when needed', () => {
+      createComponent({ pagination });
+
+      expect(findPagination().exists()).toBe(true);
+      expect(findPagination().props()).toMatchObject({
+        value: pagination.currentPage,
+        perPage: pagination.perPage,
+        totalItems: pagination.totalItems,
+        prevText: 'Prev',
+        nextText: 'Next',
+        labelNextPage: 'Go to next page',
+        labelPrevPage: 'Go to previous page',
+        align: 'center',
+      });
+    });
+
+    it('does not render GlPagination when not needed', () => {
+      createComponent({ pagination: { currentPage: 1, perPage: 2, totalItems: 2 } });
+
+      expect(findPagination().exists()).toBe(false);
+    });
+
+    describe('linkGen prop', () => {
+      const existingQuery = {
+        user: 'mr_okay',
+        status: 'closed',
+      };
+      const expectedGeneratedQuery = {
+        ...existingQuery,
+        page: '2',
+      };
+
+      beforeEach(() => {
+        setWindowLocation(`https://localhost?${objectToQuery(existingQuery)}`);
+      });
+
+      it('generates the correct page URL', () => {
+        createComponent({ pagination });
+
+        const linkGen = findPagination().props('linkGen');
+        const generatedUrl = linkGen(expectedGeneratedQuery.page);
+        const [, generatedQuery] = generatedUrl.split('?');
+
+        expect(queryToObject(generatedQuery)).toMatchObject(expectedGeneratedQuery);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/admin/abuse_reports/mock_data.js b/spec/frontend/admin/abuse_reports/mock_data.js
new file mode 100644
index 00000000000..778f055eb82
--- /dev/null
+++ b/spec/frontend/admin/abuse_reports/mock_data.js
@@ -0,0 +1,14 @@
+export const mockAbuseReports = [
+  {
+    category: 'spam',
+    updatedAt: '2022-12-07T06:45:39.977Z',
+    reporter: { name: 'Ms. Admin' },
+    reportedUser: { name: 'Mr. Abuser' },
+  },
+  {
+    category: 'phishing',
+    updatedAt: '2022-12-07T06:45:39.977Z',
+    reporter: { name: 'Ms. Reporter' },
+    reportedUser: { name: 'Mr. Phisher' },
+  },
+];
diff --git a/spec/frontend/admin/abuse_reports/utils_spec.js b/spec/frontend/admin/abuse_reports/utils_spec.js
new file mode 100644
index 00000000000..17f0b9acb26
--- /dev/null
+++ b/spec/frontend/admin/abuse_reports/utils_spec.js
@@ -0,0 +1,13 @@
+import { FILTERED_SEARCH_TOKEN_CATEGORY } from '~/admin/abuse_reports/constants';
+import { buildFilteredSearchCategoryToken } from '~/admin/abuse_reports/utils';
+
+describe('buildFilteredSearchCategoryToken', () => {
+  it('adds correctly formatted options to FILTERED_SEARCH_TOKEN_CATEGORY', () => {
+    const categories = ['tuxedo', 'tabby'];
+
+    expect(buildFilteredSearchCategoryToken(categories)).toMatchObject({
+      ...FILTERED_SEARCH_TOKEN_CATEGORY,
+      options: categories.map((c) => ({ value: c, title: c })),
+    });
+  });
+});
diff --git a/spec/frontend/admin/analytics/devops_score/components/devops_score_callout_spec.js b/spec/frontend/admin/analytics/devops_score/components/devops_score_callout_spec.js
index c9a899ab78b..06f9ffeffcd 100644
--- a/spec/frontend/admin/analytics/devops_score/components/devops_score_callout_spec.js
+++ b/spec/frontend/admin/analytics/devops_score/components/devops_score_callout_spec.js
@@ -19,10 +19,6 @@ describe('DevopsScoreCallout', () => {
 
   const findBanner = () => wrapper.findComponent(GlBanner);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with no cookie set', () => {
     beforeEach(() => {
       utils.setCookie = jest.fn();
diff --git a/spec/frontend/admin/application_settings/inactive_project_deletion/components/form_spec.js b/spec/frontend/admin/application_settings/inactive_project_deletion/components/form_spec.js
index 2db997942a7..969844f981c 100644
--- a/spec/frontend/admin/application_settings/inactive_project_deletion/components/form_spec.js
+++ b/spec/frontend/admin/application_settings/inactive_project_deletion/components/form_spec.js
@@ -29,10 +29,6 @@ describe('Form component', () => {
     wrapper = mountFn(SettingsForm, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Enable inactive project deletion', () => {
     it('has the checkbox', () => {
       createComponent();
diff --git a/spec/frontend/admin/application_settings/network_outbound_spec.js b/spec/frontend/admin/application_settings/network_outbound_spec.js
new file mode 100644
index 00000000000..2c06a3fd67f
--- /dev/null
+++ b/spec/frontend/admin/application_settings/network_outbound_spec.js
@@ -0,0 +1,70 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+
+import initNetworkOutbound from '~/admin/application_settings/network_outbound';
+
+describe('initNetworkOutbound', () => {
+  const findAllowCheckboxes = () => document.querySelectorAll('.js-allow-local-requests');
+  const findDenyCheckbox = () => document.querySelector('.js-deny-all-requests');
+  const findWarningBanner = () => document.querySelector('.js-deny-all-requests-warning');
+  const clickDenyCheckbox = () => {
+    findDenyCheckbox().click();
+  };
+
+  const createFixture = (denyAll = false) => {
+    setHTMLFixture(`
+      <input class="js-deny-all-requests" type="checkbox" name="application_setting[deny_all_requests_except_allowed]" ${
+        denyAll ? 'checked="checked"' : ''
+      }/>
+      <div class="js-deny-all-requests-warning ${denyAll ? '' : 'gl-display-none'}"></div>
+      <input class="js-allow-local-requests" type="checkbox" name="application_setting[allow_local_requests_from_web_hooks_and_services]" />
+      <input class="js-allow-local-requests" type="checkbox" name="application_setting[allow_local_requests_from_system_hooks]" />
+    `);
+  };
+
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
+  describe('when the checkbox is not checked', () => {
+    beforeEach(() => {
+      createFixture();
+      initNetworkOutbound();
+    });
+
+    it('shows banner and disables allow checkboxes on change', () => {
+      expect(findDenyCheckbox().checked).toBe(false);
+      expect(findWarningBanner().classList).toContain('gl-display-none');
+
+      clickDenyCheckbox();
+
+      expect(findDenyCheckbox().checked).toBe(true);
+      expect(findWarningBanner().classList).not.toContain('gl-display-none');
+      const allowCheckboxes = findAllowCheckboxes();
+      allowCheckboxes.forEach((checkbox) => {
+        expect(checkbox.checked).toBe(false);
+        expect(checkbox.disabled).toBe(true);
+      });
+    });
+  });
+
+  describe('when the checkbox is checked', () => {
+    beforeEach(() => {
+      createFixture(true);
+      initNetworkOutbound();
+    });
+
+    it('hides banner and enables allow checkboxes on change', () => {
+      expect(findDenyCheckbox().checked).toBe(true);
+      expect(findWarningBanner().classList).not.toContain('gl-display-none');
+
+      clickDenyCheckbox();
+
+      expect(findDenyCheckbox().checked).toBe(false);
+      expect(findWarningBanner().classList).toContain('gl-display-none');
+      const allowCheckboxes = findAllowCheckboxes();
+      allowCheckboxes.forEach((checkbox) => {
+        expect(checkbox.disabled).toBe(false);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/admin/applications/components/delete_application_spec.js b/spec/frontend/admin/applications/components/delete_application_spec.js
index 1a400a101b5..315c38a2bbc 100644
--- a/spec/frontend/admin/applications/components/delete_application_spec.js
+++ b/spec/frontend/admin/applications/components/delete_application_spec.js
@@ -31,7 +31,6 @@ describe('DeleteApplication', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/admin/background_migrations/components/database_listbox_spec.js b/spec/frontend/admin/background_migrations/components/database_listbox_spec.js
index 212f4c0842c..d7b319a3d5e 100644
--- a/spec/frontend/admin/background_migrations/components/database_listbox_spec.js
+++ b/spec/frontend/admin/background_migrations/components/database_listbox_spec.js
@@ -26,10 +26,6 @@ describe('BackgroundMigrationsDatabaseListbox', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
   describe('template always', () => {
diff --git a/spec/frontend/admin/broadcast_messages/components/base_spec.js b/spec/frontend/admin/broadcast_messages/components/base_spec.js
index d69bf4a22bf..50d8eeb563d 100644
--- a/spec/frontend/admin/broadcast_messages/components/base_spec.js
+++ b/spec/frontend/admin/broadcast_messages/components/base_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 { useMockLocationHelper } from 'helpers/mock_window_location_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -12,7 +12,7 @@ import BroadcastMessagesBase from '~/admin/broadcast_messages/components/base.vu
 import MessagesTable from '~/admin/broadcast_messages/components/messages_table.vue';
 import { generateMockMessages, MOCK_MESSAGES } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 describe('BroadcastMessagesBase', () => {
@@ -41,7 +41,6 @@ describe('BroadcastMessagesBase', () => {
 
   afterEach(() => {
     axiosMock.restore();
-    wrapper.destroy();
   });
 
   it('renders the table and pagination when there are existing messages', () => {
diff --git a/spec/frontend/admin/broadcast_messages/components/message_form_spec.js b/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
index 36c0ac303ba..292575c984b 100644
--- a/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
+++ b/spec/frontend/admin/broadcast_messages/components/message_form_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { GlBroadcastMessage, GlForm } from '@gitlab/ui';
 import AxiosMockAdapter from 'axios-mock-adapter';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST } from '~/lib/utils/http_status';
 import MessageForm from '~/admin/broadcast_messages/components/message_form.vue';
@@ -15,7 +15,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MOCK_TARGET_ACCESS_LEVELS } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('MessageForm', () => {
   let wrapper;
diff --git a/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
index 349fab03853..432bfefeb18 100644
--- a/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
+++ b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
@@ -21,10 +21,6 @@ describe('MessagesTable', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a table row for each message', () => {
     createComponent();
 
diff --git a/spec/frontend/admin/deploy_keys/components/table_spec.js b/spec/frontend/admin/deploy_keys/components/table_spec.js
index 4d4a2caedde..a05654a1d25 100644
--- a/spec/frontend/admin/deploy_keys/components/table_spec.js
+++ b/spec/frontend/admin/deploy_keys/components/table_spec.js
@@ -9,10 +9,10 @@ import { stubComponent } from 'helpers/stub_component';
 import DeployKeysTable from '~/admin/deploy_keys/components/table.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import Api, { DEFAULT_PER_PAGE } from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 jest.mock('~/api');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 describe('DeployKeysTable', () => {
@@ -91,10 +91,6 @@ describe('DeployKeysTable', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders page title', () => {
     createComponent();
 
@@ -242,7 +238,7 @@ describe('DeployKeysTable', () => {
 
     itRendersTheEmptyState();
 
-    it('displays flash', () => {
+    it('displays alert', () => {
       expect(createAlert).toHaveBeenCalledWith({
         message: DeployKeysTable.i18n.apiErrorMessage,
         captureError: true,
diff --git a/spec/frontend/admin/signup_restrictions/components/signup_checkbox_spec.js b/spec/frontend/admin/signup_restrictions/components/signup_checkbox_spec.js
index eecc21e206b..9e55716cc30 100644
--- a/spec/frontend/admin/signup_restrictions/components/signup_checkbox_spec.js
+++ b/spec/frontend/admin/signup_restrictions/components/signup_checkbox_spec.js
@@ -28,10 +28,6 @@ describe('Signup Form', () => {
   const findCheckboxLabel = () => findByTestId('label');
   const findHelpText = () => findByTestId('helpText');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Signup Checkbox', () => {
     beforeEach(() => {
       mountComponent();
diff --git a/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js b/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
index f2a951bcc76..9192fc12401 100644
--- a/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
+++ b/spec/frontend/admin/signup_restrictions/components/signup_form_spec.js
@@ -40,8 +40,6 @@ describe('Signup Form', () => {
   const findModal = () => wrapper.findComponent(GlModal);
 
   afterEach(() => {
-    wrapper.destroy();
-
     formSubmitSpy = null;
   });
 
diff --git a/spec/frontend/admin/statistics_panel/components/app_spec.js b/spec/frontend/admin/statistics_panel/components/app_spec.js
index 4c362a31068..60e46cddd7e 100644
--- a/spec/frontend/admin/statistics_panel/components/app_spec.js
+++ b/spec/frontend/admin/statistics_panel/components/app_spec.js
@@ -30,10 +30,6 @@ describe('Admin statistics app', () => {
     store = createStore();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findStats = (idx) => wrapper.findAll('.js-stats').at(idx);
 
   describe('template', () => {
diff --git a/spec/frontend/admin/topics/components/remove_avatar_spec.js b/spec/frontend/admin/topics/components/remove_avatar_spec.js
index 97d257c682c..c069203d046 100644
--- a/spec/frontend/admin/topics/components/remove_avatar_spec.js
+++ b/spec/frontend/admin/topics/components/remove_avatar_spec.js
@@ -20,7 +20,7 @@ describe('RemoveAvatar', () => {
         name,
       },
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
       stubs: {
         GlSprintf,
@@ -36,10 +36,6 @@ describe('RemoveAvatar', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('the button component', () => {
     it('displays the remove button', () => {
       const button = findButton();
diff --git a/spec/frontend/admin/topics/components/topic_select_spec.js b/spec/frontend/admin/topics/components/topic_select_spec.js
index 738cbd88c4c..113a0e3d404 100644
--- a/spec/frontend/admin/topics/components/topic_select_spec.js
+++ b/spec/frontend/admin/topics/components/topic_select_spec.js
@@ -59,7 +59,6 @@ describe('TopicSelect', () => {
   }
 
   afterEach(() => {
-    wrapper.destroy();
     jest.clearAllMocks();
   });
 
diff --git a/spec/frontend/admin/users/components/actions/actions_spec.js b/spec/frontend/admin/users/components/actions/actions_spec.js
index 8e9652332c1..4aeaa5356b4 100644
--- a/spec/frontend/admin/users/components/actions/actions_spec.js
+++ b/spec/frontend/admin/users/components/actions/actions_spec.js
@@ -22,11 +22,6 @@ describe('Action components', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('CONFIRMATION_ACTIONS', () => {
     it.each(CONFIRMATION_ACTIONS)('renders a dropdown item for "%s"', (action) => {
       initComponent({
diff --git a/spec/frontend/admin/users/components/app_spec.js b/spec/frontend/admin/users/components/app_spec.js
index 913732aae42..d40089edc82 100644
--- a/spec/frontend/admin/users/components/app_spec.js
+++ b/spec/frontend/admin/users/components/app_spec.js
@@ -17,11 +17,6 @@ describe('AdminUsersApp component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when initialized', () => {
     beforeEach(() => {
       initComponent();
diff --git a/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js b/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js
index 2e892e292d7..efb951f4ad2 100644
--- a/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js
+++ b/spec/frontend/admin/users/components/modals/delete_user_modal_spec.js
@@ -73,11 +73,6 @@ describe('Delete user modal', () => {
     formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders modal with form included', () => {
     createComponent();
     expect(findForm().element).toMatchSnapshot();
diff --git a/spec/frontend/admin/users/components/user_actions_spec.js b/spec/frontend/admin/users/components/user_actions_spec.js
index 1b080b05c95..1a2cc3e5c34 100644
--- a/spec/frontend/admin/users/components/user_actions_spec.js
+++ b/spec/frontend/admin/users/components/user_actions_spec.js
@@ -32,16 +32,11 @@ describe('AdminUserActions component', () => {
         showButtonLabels,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('edit button', () => {
     describe('when the user has an edit action attached', () => {
       beforeEach(() => {
diff --git a/spec/frontend/admin/users/components/user_avatar_spec.js b/spec/frontend/admin/users/components/user_avatar_spec.js
index 94fac875fbe..02e648d2b77 100644
--- a/spec/frontend/admin/users/components/user_avatar_spec.js
+++ b/spec/frontend/admin/users/components/user_avatar_spec.js
@@ -26,7 +26,7 @@ describe('AdminUserAvatar component', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       stubs: {
         GlAvatarLabeled,
@@ -34,11 +34,6 @@ describe('AdminUserAvatar component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when initialized', () => {
     beforeEach(() => {
       initComponent();
diff --git a/spec/frontend/admin/users/components/user_date_spec.js b/spec/frontend/admin/users/components/user_date_spec.js
index 73be33d5a9d..19c1cd38a50 100644
--- a/spec/frontend/admin/users/components/user_date_spec.js
+++ b/spec/frontend/admin/users/components/user_date_spec.js
@@ -17,11 +17,6 @@ describe('FormatDate component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     date         | dateFormat          | output
     ${mockDate}  | ${undefined}        | ${'Nov 13, 2020'}
diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js
index a0aec347b6b..6f658fd2e59 100644
--- a/spec/frontend/admin/users/components/users_table_spec.js
+++ b/spec/frontend/admin/users/components/users_table_spec.js
@@ -10,12 +10,12 @@ import AdminUserActions from '~/admin/users/components/user_actions.vue';
 import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
 import AdminUsersTable from '~/admin/users/components/users_table.vue';
 import getUsersGroupCountsQuery from '~/admin/users/graphql/queries/get_users_group_counts.query.graphql';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import AdminUserDate from '~/vue_shared/components/user_date.vue';
 
 import { users, paths, createGroupCountResponse } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -57,11 +57,6 @@ describe('AdminUsersTable component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when there are users', () => {
     beforeEach(() => {
       initComponent();
@@ -134,7 +129,7 @@ describe('AdminUsersTable component', () => {
         await waitForPromises();
       });
 
-      it('creates a flash message and captures the error', () => {
+      it('creates an alert message and captures the error', () => {
         expect(createAlert).toHaveBeenCalledWith({
           message: 'Could not load user group counts. Please refresh the page to try again.',
           captureError: true,
diff --git a/spec/frontend/admin/users/index_spec.js b/spec/frontend/admin/users/index_spec.js
index b51858d5129..d8a94ee5e1d 100644
--- a/spec/frontend/admin/users/index_spec.js
+++ b/spec/frontend/admin/users/index_spec.js
@@ -19,8 +19,6 @@ describe('initAdminUsersApp', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     el = null;
   });
 
@@ -47,8 +45,6 @@ describe('initAdminUserActions', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     el = null;
   });
 
diff --git a/spec/frontend/airflow/dags/components/dags_spec.js b/spec/frontend/airflow/dags/components/dags_spec.js
deleted file mode 100644
index f9cf4fc87af..00000000000
--- a/spec/frontend/airflow/dags/components/dags_spec.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { GlAlert, GlPagination, GlTableLite } from '@gitlab/ui';
-import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { TEST_HOST } from 'helpers/test_constants';
-import AirflowDags from '~/airflow/dags/components/dags.vue';
-import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import { mockDags } from './mock_data';
-
-describe('AirflowDags', () => {
-  let wrapper;
-
-  const createWrapper = (
-    dags = [],
-    pagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 0 },
-  ) => {
-    wrapper = mountExtended(AirflowDags, {
-      propsData: {
-        dags,
-        pagination,
-      },
-    });
-  };
-
-  const findAlert = () => wrapper.findComponent(GlAlert);
-  const findEmptyState = () => wrapper.findByText('There are no DAGs to show');
-  const findPagination = () => wrapper.findComponent(GlPagination);
-
-  describe('default (no dags)', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
-
-    it('shows incubation warning', () => {
-      expect(findAlert().exists()).toBe(true);
-    });
-
-    it('shows empty state', () => {
-      expect(findEmptyState().exists()).toBe(true);
-    });
-
-    it('does not show pagination', () => {
-      expect(findPagination().exists()).toBe(false);
-    });
-  });
-
-  describe('with dags', () => {
-    const createWrapperWithDags = (pagination = {}) => {
-      createWrapper(mockDags, {
-        page: 1,
-        isLastPage: false,
-        per_page: 2,
-        totalItems: 5,
-        ...pagination,
-      });
-    };
-
-    const findDagsData = () => {
-      return wrapper
-        .findComponent(GlTableLite)
-        .findAll('tbody tr')
-        .wrappers.map((tr) => {
-          return tr.findAll('td').wrappers.map((td) => {
-            const timeAgo = td.findComponent(TimeAgo);
-
-            if (timeAgo.exists()) {
-              return {
-                type: 'time',
-                value: timeAgo.props('time'),
-              };
-            }
-
-            return {
-              type: 'text',
-              value: td.text(),
-            };
-          });
-        });
-    };
-
-    it('renders the table of Dags with data', () => {
-      createWrapperWithDags();
-
-      expect(findDagsData()).toEqual(
-        mockDags.map((x) => [
-          { type: 'text', value: x.dag_name },
-          { type: 'text', value: x.schedule },
-          { type: 'time', value: x.next_run },
-          { type: 'text', value: String(x.is_active) },
-          { type: 'text', value: String(x.is_paused) },
-          { type: 'text', value: x.fileloc },
-        ]),
-      );
-    });
-
-    describe('Pagination behaviour', () => {
-      it.each`
-        pagination                       | expected
-        ${{}}                            | ${{ value: 1, prevPage: null, nextPage: 2 }}
-        ${{ page: 2 }}                   | ${{ value: 2, prevPage: 1, nextPage: 3 }}
-        ${{ isLastPage: true, page: 2 }} | ${{ value: 2, prevPage: 1, nextPage: null }}
-      `('with $pagination, sets pagination props', ({ pagination, expected }) => {
-        createWrapperWithDags({ ...pagination });
-
-        expect(findPagination().props()).toMatchObject(expected);
-      });
-
-      it('generates link for each page', () => {
-        createWrapperWithDags();
-
-        const generateLink = findPagination().props('linkGen');
-
-        expect(generateLink(3)).toBe(`${TEST_HOST}/?page=3`);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/airflow/dags/components/mock_data.js b/spec/frontend/airflow/dags/components/mock_data.js
deleted file mode 100644
index 9547282517d..00000000000
--- a/spec/frontend/airflow/dags/components/mock_data.js
+++ /dev/null
@@ -1,67 +0,0 @@
-export const mockDags = [
-  {
-    id: 1,
-    project_id: 7,
-    created_at: '2023-01-05T14:07:02.975Z',
-    updated_at: '2023-01-05T14:07:02.975Z',
-    has_import_errors: false,
-    is_active: false,
-    is_paused: true,
-    next_run: '2023-01-05T14:07:02.975Z',
-    dag_name: 'Dag number 1',
-    schedule: 'Manual',
-    fileloc: '/opt/dag.py',
-  },
-  {
-    id: 2,
-    project_id: 7,
-    created_at: '2023-01-05T14:07:02.975Z',
-    updated_at: '2023-01-05T14:07:02.975Z',
-    has_import_errors: false,
-    is_active: false,
-    is_paused: true,
-    next_run: '2023-01-05T14:07:02.975Z',
-    dag_name: 'Dag number 2',
-    schedule: 'Manual',
-    fileloc: '/opt/dag.py',
-  },
-  {
-    id: 3,
-    project_id: 7,
-    created_at: '2023-01-05T14:07:02.975Z',
-    updated_at: '2023-01-05T14:07:02.975Z',
-    has_import_errors: false,
-    is_active: false,
-    is_paused: true,
-    next_run: '2023-01-05T14:07:02.975Z',
-    dag_name: 'Dag number 3',
-    schedule: 'Manual',
-    fileloc: '/opt/dag.py',
-  },
-  {
-    id: 4,
-    project_id: 7,
-    created_at: '2023-01-05T14:07:02.975Z',
-    updated_at: '2023-01-05T14:07:02.975Z',
-    has_import_errors: false,
-    is_active: false,
-    is_paused: true,
-    next_run: '2023-01-05T14:07:02.975Z',
-    dag_name: 'Dag number 4',
-    schedule: 'Manual',
-    fileloc: '/opt/dag.py',
-  },
-  {
-    id: 5,
-    project_id: 7,
-    created_at: '2023-01-05T14:07:02.975Z',
-    updated_at: '2023-01-05T14:07:02.975Z',
-    has_import_errors: false,
-    is_active: false,
-    is_paused: true,
-    next_run: '2023-01-05T14:07:02.975Z',
-    dag_name: 'Dag number 5',
-    schedule: 'Manual',
-    fileloc: '/opt/dag.py',
-  },
-];
diff --git a/spec/frontend/alert_management/components/alert_management_table_spec.js b/spec/frontend/alert_management/components/alert_management_table_spec.js
index 7fb4f2d2463..3f709d8c9f5 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -68,7 +68,7 @@ describe('AlertManagementTable', () => {
         },
         stubs,
         directives: {
-          GlTooltip: createMockDirective(),
+          GlTooltip: createMockDirective('gl-tooltip'),
         },
       }),
     );
diff --git a/spec/frontend/flash_spec.js b/spec/frontend/alert_spec.js
index 17d6cea23df..1ae8373016b 100644
--- a/spec/frontend/flash_spec.js
+++ b/spec/frontend/alert_spec.js
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/browser';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { createAlert, VARIANT_WARNING } from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/alert';
 
 jest.mock('@sentry/browser');
 
diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
index 0e402e61bcc..4a60d605cae 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
@@ -51,36 +51,23 @@ exports[`Alert integration settings form default state should match the default
         </gl-link-stub>
       </label>
        
-      <gl-dropdown-stub
+      <gl-collapsible-listbox-stub
         block="true"
         category="primary"
-        clearalltext="Clear all"
-        clearalltextclass="gl-px-5"
         data-qa-selector="incident_templates_dropdown"
         headertext=""
-        hideheaderborder="true"
-        highlighteditemstitle="Selected"
-        highlighteditemstitleclass="gl-px-5"
+        icon=""
         id="alert-integration-settings-issue-template"
+        items="[object Object]"
+        noresultstext="No results found"
+        placement="left"
+        resetbuttonlabel=""
+        searchplaceholder="Search"
+        selected="selecte_tmpl"
         size="medium"
-        text="selecte_tmpl"
+        toggletext=""
         variant="default"
-      >
-        <gl-dropdown-item-stub
-          avatarurl=""
-          data-qa-selector="incident_templates_item"
-          iconcolor=""
-          iconname=""
-          iconrightarialabel=""
-          iconrightname=""
-          ischeckitem="true"
-          secondarytext=""
-        >
-          
-          No template selected
-        
-        </gl-dropdown-item-stub>
-      </gl-dropdown-stub>
+      />
     </gl-form-group-stub>
      
     <gl-form-group-stub
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index a15c78cc456..67d8619f157 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
@@ -30,7 +30,7 @@ import {
   INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR,
   DELETE_INTEGRATION_ERROR,
 } from '~/alerts_settings/utils/error_messages';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_FORBIDDEN, HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
 import {
@@ -48,7 +48,7 @@ import {
 } from './mocks/apollo_mock';
 import mockIntegrations from './mocks/integrations.json';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('AlertsSettingsWrapper', () => {
   let wrapper;
@@ -128,10 +128,6 @@ describe('AlertsSettingsWrapper', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     beforeEach(() => {
       createComponent({
@@ -478,7 +474,7 @@ describe('AlertsSettingsWrapper', () => {
       expect(destroyIntegrationHandler).toHaveBeenCalled();
     });
 
-    it('displays flash if mutation had a recoverable error', async () => {
+    it('displays alert if mutation had a recoverable error', async () => {
       createComponentWithApollo({
         destroyHandler: jest.fn().mockResolvedValue(destroyIntegrationResponseWithErrors),
       });
@@ -489,7 +485,7 @@ describe('AlertsSettingsWrapper', () => {
       expect(createAlert).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
 
-    it('displays flash if mutation had a non-recoverable error', async () => {
+    it('displays alert if mutation had a non-recoverable error', async () => {
       createComponentWithApollo({
         destroyHandler: jest.fn().mockRejectedValue('Error'),
       });
diff --git a/spec/frontend/analytics/components/activity_chart_spec.js b/spec/frontend/analytics/components/activity_chart_spec.js
index c26407f5c1d..4f8126aaacf 100644
--- a/spec/frontend/analytics/components/activity_chart_spec.js
+++ b/spec/frontend/analytics/components/activity_chart_spec.js
@@ -13,11 +13,6 @@ describe('Activity Chart Bundle', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findChart = () => wrapper.findComponent(GlColumnChart);
   const findNoData = () => wrapper.find('[data-testid="noActivityChartData"]');
 
diff --git a/spec/frontend/analytics/cycle_analytics/base_spec.js b/spec/frontend/analytics/cycle_analytics/base_spec.js
index 58588ff49ce..033916eabcd 100644
--- a/spec/frontend/analytics/cycle_analytics/base_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/base_spec.js
@@ -31,13 +31,15 @@ Vue.use(Vuex);
 
 let wrapper;
 
-const { id: groupId, path: groupPath } = currentGroup;
+const { path } = currentGroup;
+const groupPath = `groups/${path}`;
 const defaultState = {
   currentGroup,
   createdBefore,
   createdAfter,
   stageCounts,
-  endpoints: { fullPath, groupId, groupPath },
+  groupPath,
+  namespace: { fullPath },
 };
 
 function createStore({ initialState = {}, initialGetters = {} }) {
@@ -93,11 +95,6 @@ describe('Value stream analytics component', () => {
     wrapper = createComponent({ initialState: { selectedStage, selectedStageEvents, pagination } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders the path navigation component', () => {
     expect(findPathNavigation().exists()).toBe(true);
   });
@@ -139,7 +136,6 @@ describe('Value stream analytics component', () => {
 
   it('passes the paths to the filter bar', () => {
     expect(findFilters().props()).toEqual({
-      groupId,
       groupPath,
       endDate: createdBefore,
       hasDateRangeFilter: true,
@@ -157,6 +153,10 @@ describe('Value stream analytics component', () => {
     expect(findPagination().exists()).toBe(true);
   });
 
+  it('does not render a link to the value streams dashboard', () => {
+    expect(findOverviewMetrics().props('dashboardsPath')).toBeNull();
+  });
+
   describe('with `cycleAnalyticsForGroups=true` license', () => {
     beforeEach(() => {
       wrapper = createComponent({ initialState: { features: { cycleAnalyticsForGroups: true } } });
@@ -167,6 +167,23 @@ describe('Value stream analytics component', () => {
     });
   });
 
+  describe('with `groupAnalyticsDashboardsPage=true` and `groupLevelAnalyticsDashboard=true` license', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        initialState: {
+          features: { groupAnalyticsDashboardsPage: true, groupLevelAnalyticsDashboard: true },
+        },
+      });
+    });
+
+    it('renders a link to the value streams dashboard', () => {
+      expect(findOverviewMetrics().props('dashboardsPath')).toBeDefined();
+      expect(findOverviewMetrics().props('dashboardsPath')).toBe(
+        '/groups/foo/-/analytics/dashboards/value_streams_dashboard?query=full/path/to/foo',
+      );
+    });
+  });
+
   describe('isLoading = true', () => {
     beforeEach(() => {
       wrapper = createComponent({
diff --git a/spec/frontend/analytics/cycle_analytics/filter_bar_spec.js b/spec/frontend/analytics/cycle_analytics/filter_bar_spec.js
index 2b26b202882..da7824adbf9 100644
--- a/spec/frontend/analytics/cycle_analytics/filter_bar_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/filter_bar_spec.js
@@ -98,7 +98,6 @@ describe('Filter bar', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/analytics/cycle_analytics/formatted_stage_count_spec.js b/spec/frontend/analytics/cycle_analytics/formatted_stage_count_spec.js
index 9be92bb92bc..6dd7e2e6223 100644
--- a/spec/frontend/analytics/cycle_analytics/formatted_stage_count_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/formatted_stage_count_spec.js
@@ -16,10 +16,6 @@ describe('Formatted Stage Count', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     stageCount | expectedOutput
     ${null}    | ${'-'}
diff --git a/spec/frontend/analytics/cycle_analytics/mock_data.js b/spec/frontend/analytics/cycle_analytics/mock_data.js
index f820f755400..216e07844b8 100644
--- a/spec/frontend/analytics/cycle_analytics/mock_data.js
+++ b/spec/frontend/analytics/cycle_analytics/mock_data.js
@@ -219,6 +219,8 @@ export const group = {
 };
 
 export const currentGroup = convertObjectPropsToCamelCase(group, { deep: true });
+export const groupNamespace = { id: currentGroup.id, fullPath: `groups/${currentGroup.path}` };
+export const projectNamespace = { fullPath: 'some/cool/path' };
 
 export const selectedProjects = [
   {
diff --git a/spec/frontend/analytics/cycle_analytics/path_navigation_spec.js b/spec/frontend/analytics/cycle_analytics/path_navigation_spec.js
index 107e62035c3..9a598ee0ad1 100644
--- a/spec/frontend/analytics/cycle_analytics/path_navigation_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/path_navigation_spec.js
@@ -50,8 +50,6 @@ describe('Project PathNavigation', () => {
 
   afterEach(() => {
     unmockTracking();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   describe('displays correctly', () => {
diff --git a/spec/frontend/analytics/cycle_analytics/stage_table_spec.js b/spec/frontend/analytics/cycle_analytics/stage_table_spec.js
index cfccce7eae9..fbc63a80de8 100644
--- a/spec/frontend/analytics/cycle_analytics/stage_table_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/stage_table_spec.js
@@ -51,10 +51,6 @@ function createComponent(props = {}, shallow = false) {
 }
 
 describe('StageTable', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('is loaded with data', () => {
     beforeEach(() => {
       wrapper = createComponent();
@@ -258,7 +254,6 @@ describe('StageTable', () => {
 
     afterEach(() => {
       unmockTracking();
-      wrapper.destroy();
     });
 
     it('will display the pagination component', () => {
@@ -305,7 +300,6 @@ describe('StageTable', () => {
 
     afterEach(() => {
       unmockTracking();
-      wrapper.destroy();
     });
 
     it('can sort the end event or duration', () => {
diff --git a/spec/frontend/analytics/cycle_analytics/store/actions_spec.js b/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
index 3030fca126b..b2ce8596c22 100644
--- a/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/store/actions_spec.js
@@ -13,21 +13,13 @@ import {
   createdBefore,
   initialPaginationState,
   reviewEvents,
+  projectNamespace as namespace,
 } from '../mock_data';
 
-const { id: groupId, path: groupPath } = currentGroup;
-const mockMilestonesPath = 'mock-milestones.json';
-const mockLabelsPath = 'mock-labels.json';
-const mockRequestPath = 'some/cool/path';
+const { path: groupPath } = currentGroup;
+const mockMilestonesPath = `/${namespace.fullPath}/-/milestones.json`;
+const mockLabelsPath = `/${namespace.fullPath}/-/labels.json`;
 const mockFullPath = '/namespace/-/analytics/value_stream_analytics/value_streams';
-const mockEndpoints = {
-  fullPath: mockFullPath,
-  requestPath: mockRequestPath,
-  labelsPath: mockLabelsPath,
-  milestonesPath: mockMilestonesPath,
-  groupId,
-  groupPath,
-};
 const mockSetDateActionCommit = {
   payload: { createdAfter, createdBefore },
   type: 'SET_DATE_RANGE',
@@ -35,6 +27,7 @@ const mockSetDateActionCommit = {
 
 const defaultState = {
   ...getters,
+  namespace,
   selectedValueStream,
   createdAfter,
   createdBefore,
@@ -81,7 +74,8 @@ describe('Project Value Stream Analytics actions', () => {
     const selectedAssigneeList = ['Assignee 1', 'Assignee 2'];
     const selectedLabelList = ['Label 1', 'Label 2'];
     const payload = {
-      endpoints: mockEndpoints,
+      namespace,
+      groupPath,
       selectedAuthor,
       selectedMilestone,
       selectedAssigneeList,
@@ -92,7 +86,7 @@ describe('Project Value Stream Analytics actions', () => {
       groupEndpoint: 'foo',
       labelsEndpoint: mockLabelsPath,
       milestonesEndpoint: mockMilestonesPath,
-      projectEndpoint: '/namespace/-/analytics/value_stream_analytics/value_streams',
+      projectEndpoint: namespace.fullPath,
     };
 
     it('will dispatch fetchValueStreams actions and commit SET_LOADING and INITIALIZE_VSA', () => {
@@ -193,7 +187,6 @@ describe('Project Value Stream Analytics actions', () => {
     beforeEach(() => {
       state = {
         ...defaultState,
-        endpoints: mockEndpoints,
         selectedStage,
       };
       mock = new MockAdapter(axios);
@@ -219,7 +212,6 @@ describe('Project Value Stream Analytics actions', () => {
       beforeEach(() => {
         state = {
           ...defaultState,
-          endpoints: mockEndpoints,
           selectedStage,
         };
         mock = new MockAdapter(axios);
@@ -243,7 +235,6 @@ describe('Project Value Stream Analytics actions', () => {
       beforeEach(() => {
         state = {
           ...defaultState,
-          endpoints: mockEndpoints,
           selectedStage,
         };
         mock = new MockAdapter(axios);
@@ -265,9 +256,7 @@ describe('Project Value Stream Analytics actions', () => {
     const mockValueStreamPath = /\/analytics\/value_stream_analytics\/value_streams/;
 
     beforeEach(() => {
-      state = {
-        endpoints: mockEndpoints,
-      };
+      state = { namespace };
       mock = new MockAdapter(axios);
       mock.onGet(mockValueStreamPath).reply(HTTP_STATUS_OK);
     });
@@ -333,7 +322,7 @@ describe('Project Value Stream Analytics actions', () => {
 
     beforeEach(() => {
       state = {
-        endpoints: mockEndpoints,
+        namespace,
         selectedValueStream,
       };
       mock = new MockAdapter(axios);
diff --git a/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js b/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js
index 567fac81e1f..70b7454f4a0 100644
--- a/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js
@@ -17,12 +17,14 @@ import {
   rawStageCounts,
   stageCounts,
   initialPaginationState as pagination,
+  projectNamespace as mockNamespace,
 } from '../mock_data';
 
 let state;
 const rawEvents = rawIssueEvents.events;
 const convertedEvents = issueEvents.events;
-const mockRequestPath = 'fake/request/path';
+const mockGroupPath = 'groups/path';
+const mockFeatures = { some: 'feature' };
 const mockCreatedAfter = '2020-06-18';
 const mockCreatedBefore = '2020-07-18';
 
@@ -64,19 +66,22 @@ describe('Project Value Stream Analytics mutations', () => {
 
   const mockSetDatePayload = { createdAfter: mockCreatedAfter, createdBefore: mockCreatedBefore };
   const mockInitialPayload = {
-    endpoints: { requestPath: mockRequestPath },
     currentGroup: { title: 'cool-group' },
     id: 1337,
+    groupPath: mockGroupPath,
+    namespace: mockNamespace,
+    features: mockFeatures,
     ...mockSetDatePayload,
   };
   const mockInitializedObj = {
-    endpoints: { requestPath: mockRequestPath },
     ...mockSetDatePayload,
   };
 
   it.each`
     mutation                | stateKey           | value
-    ${types.INITIALIZE_VSA} | ${'endpoints'}     | ${{ requestPath: mockRequestPath }}
+    ${types.INITIALIZE_VSA} | ${'features'}      | ${mockFeatures}
+    ${types.INITIALIZE_VSA} | ${'namespace'}     | ${mockNamespace}
+    ${types.INITIALIZE_VSA} | ${'groupPath'}     | ${mockGroupPath}
     ${types.INITIALIZE_VSA} | ${'createdAfter'}  | ${mockCreatedAfter}
     ${types.INITIALIZE_VSA} | ${'createdBefore'} | ${mockCreatedBefore}
   `('$mutation will set $stateKey', ({ mutation, stateKey, value }) => {
diff --git a/spec/frontend/analytics/cycle_analytics/total_time_spec.js b/spec/frontend/analytics/cycle_analytics/total_time_spec.js
index 47ee7aad8c4..6597b6fa3d5 100644
--- a/spec/frontend/analytics/cycle_analytics/total_time_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/total_time_spec.js
@@ -10,10 +10,6 @@ describe('TotalTime', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with a valid time object', () => {
     it.each`
       time
diff --git a/spec/frontend/analytics/cycle_analytics/utils_spec.js b/spec/frontend/analytics/cycle_analytics/utils_spec.js
index fe412bf7498..e6d17edcadc 100644
--- a/spec/frontend/analytics/cycle_analytics/utils_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/utils_spec.js
@@ -91,9 +91,9 @@ describe('Value stream analytics utils', () => {
     const projectId = '5';
     const createdAfter = '2021-09-01';
     const createdBefore = '2021-11-06';
-    const groupId = '146';
     const groupPath = 'fake-group';
-    const fullPath = 'fake-group/fake-project';
+    const namespaceName = 'Fake project';
+    const namespaceFullPath = 'fake-group/fake-project';
     const labelsPath = '/fake-group/fake-project/-/labels.json';
     const milestonesPath = '/fake-group/fake-project/-/milestones.json';
     const requestPath = '/fake-group/fake-project/-/value_stream_analytics';
@@ -102,11 +102,11 @@ describe('Value stream analytics utils', () => {
       projectId,
       createdBefore,
       createdAfter,
-      fullPath,
+      namespaceName,
+      namespaceFullPath,
       requestPath,
       labelsPath,
       milestonesPath,
-      groupId,
       groupPath,
     };
 
@@ -124,14 +124,13 @@ describe('Value stream analytics utils', () => {
         expect(res.createdAfter).toEqual(new Date(createdAfter));
       });
 
+      it('sets the namespace', () => {
+        expect(res.namespace.name).toBe(namespaceName);
+        expect(res.namespace.fullPath).toBe(namespaceFullPath);
+      });
+
       it('sets the endpoints', () => {
-        const { endpoints } = res;
-        expect(endpoints.fullPath).toBe(fullPath);
-        expect(endpoints.requestPath).toBe(requestPath);
-        expect(endpoints.labelsPath).toBe(labelsPath);
-        expect(endpoints.milestonesPath).toBe(milestonesPath);
-        expect(endpoints.groupId).toBe(parseInt(groupId, 10));
-        expect(endpoints.groupPath).toBe(groupPath);
+        expect(res.groupPath).toBe(`groups/${groupPath}`);
       });
 
       it('returns null when there is no stage', () => {
@@ -164,7 +163,7 @@ describe('Value stream analytics utils', () => {
           ...rawData,
           gon: { licensed_features: fakeFeatures },
         });
-        expect(res.features).toEqual(fakeFeatures);
+        expect(res.features).toMatchObject(fakeFeatures);
       });
     });
   });
diff --git a/spec/frontend/analytics/cycle_analytics/value_stream_filters_spec.js b/spec/frontend/analytics/cycle_analytics/value_stream_filters_spec.js
index 4f333e95d89..160f6ce0563 100644
--- a/spec/frontend/analytics/cycle_analytics/value_stream_filters_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/value_stream_filters_spec.js
@@ -34,11 +34,6 @@ describe('ValueStreamFilters', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('will render the filter bar', () => {
     expect(findFilterBar().exists()).toBe(true);
   });
diff --git a/spec/frontend/analytics/cycle_analytics/value_stream_metrics_spec.js b/spec/frontend/analytics/cycle_analytics/value_stream_metrics_spec.js
index 948dc5c9be2..6a64737bc80 100644
--- a/spec/frontend/analytics/cycle_analytics/value_stream_metrics_spec.js
+++ b/spec/frontend/analytics/cycle_analytics/value_stream_metrics_spec.js
@@ -8,10 +8,11 @@ import { METRIC_TYPE_SUMMARY } from '~/api/analytics_api';
 import { VSA_METRICS_GROUPS, METRICS_POPOVER_CONTENT } from '~/analytics/shared/constants';
 import { prepareTimeMetricsData } from '~/analytics/shared/utils';
 import MetricTile from '~/analytics/shared/components/metric_tile.vue';
-import { createAlert } from '~/flash';
+import ValueStreamsDashboardLink from '~/analytics/shared/components/value_streams_dashboard_link.vue';
+import { createAlert } from '~/alert';
 import { group } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('ValueStreamMetrics', () => {
   let wrapper;
@@ -37,6 +38,7 @@ describe('ValueStreamMetrics', () => {
     });
   };
 
+  const findVSDLink = () => wrapper.findComponent(ValueStreamsDashboardLink);
   const findMetrics = () => wrapper.findAllComponents(MetricTile);
   const findMetricsGroups = () => wrapper.findAllByTestId('vsa-metrics-group');
 
@@ -48,10 +50,6 @@ describe('ValueStreamMetrics', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with successful requests', () => {
     beforeEach(() => {
       mockGetValueStreamSummaryMetrics = jest.fn().mockResolvedValue({ data: metricsData });
@@ -168,6 +166,25 @@ describe('ValueStreamMetrics', () => {
     });
   });
 
+  describe('Value Streams Dashboard Link', () => {
+    it('will render when a dashboardsPath is set', async () => {
+      wrapper = createComponent({ groupBy: VSA_METRICS_GROUPS, dashboardsPath: 'fake-group-path' });
+      await waitForPromises();
+
+      const vsdLink = findVSDLink();
+
+      expect(vsdLink.exists()).toBe(true);
+      expect(vsdLink.props()).toEqual({ requestPath: 'fake-group-path' });
+    });
+
+    it('does not render without a dashboardsPath', async () => {
+      wrapper = createComponent({ groupBy: VSA_METRICS_GROUPS });
+      await waitForPromises();
+
+      expect(findVSDLink().exists()).toBe(false);
+    });
+  });
+
   describe('with a request failing', () => {
     beforeEach(async () => {
       mockGetValueStreamSummaryMetrics = jest.fn().mockRejectedValue();
diff --git a/spec/frontend/analytics/devops_reports/components/service_ping_disabled_spec.js b/spec/frontend/analytics/devops_reports/components/service_ping_disabled_spec.js
index c62bfb11f7b..70bfce41c82 100644
--- a/spec/frontend/analytics/devops_reports/components/service_ping_disabled_spec.js
+++ b/spec/frontend/analytics/devops_reports/components/service_ping_disabled_spec.js
@@ -6,10 +6,6 @@ import ServicePingDisabled from '~/analytics/devops_reports/components/service_p
 describe('~/analytics/devops_reports/components/service_ping_disabled.vue', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createWrapper = ({ isAdmin = false } = {}) => {
     wrapper = mountExtended(ServicePingDisabled, {
       provide: {
diff --git a/spec/frontend/analytics/shared/components/daterange_spec.js b/spec/frontend/analytics/shared/components/daterange_spec.js
index 562e86529ee..5f0847e0db6 100644
--- a/spec/frontend/analytics/shared/components/daterange_spec.js
+++ b/spec/frontend/analytics/shared/components/daterange_spec.js
@@ -22,10 +22,6 @@ describe('Daterange component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDaterangePicker = () => wrapper.findComponent(GlDaterangePicker);
   const findDateRangeIndicator = () => wrapper.findByTestId('daterange-picker-indicator');
 
@@ -90,18 +86,19 @@ describe('Daterange component', () => {
       });
 
       describe('set', () => {
-        it('emits the change event with an object containing startDate and endDate', () => {
+        it('emits the change event with an object containing startDate and endDate', async () => {
           const startDate = new Date('2019-10-01');
           const endDate = new Date('2019-10-05');
-          wrapper.vm.dateRange = { startDate, endDate };
 
-          expect(wrapper.emitted().change).toEqual([[{ startDate, endDate }]]);
+          await findDaterangePicker().vm.$emit('input', { startDate, endDate });
+
+          expect(wrapper.emitted('change')).toEqual([[{ startDate, endDate }]]);
         });
       });
 
       describe('get', () => {
-        it("returns value of dateRange from state's startDate and endDate", () => {
-          expect(wrapper.vm.dateRange).toEqual({
+        it("datepicker to have default of dateRange from state's startDate and endDate", () => {
+          expect(findDaterangePicker().props('value')).toEqual({
             startDate: defaultProps.startDate,
             endDate: defaultProps.endDate,
           });
diff --git a/spec/frontend/analytics/shared/components/metric_popover_spec.js b/spec/frontend/analytics/shared/components/metric_popover_spec.js
index e0bfff3e664..d7e6606cdc6 100644
--- a/spec/frontend/analytics/shared/components/metric_popover_spec.js
+++ b/spec/frontend/analytics/shared/components/metric_popover_spec.js
@@ -34,10 +34,6 @@ describe('MetricPopover', () => {
   const findMetricDocsLinkIcon = () => findMetricDocsLink().findComponent(GlIcon);
   const findMetricDetailsIcon = () => findMetricLink().findComponent(GlIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the metric label', () => {
     wrapper = createComponent({ metric: MOCK_METRIC });
     expect(findMetricLabel().text()).toBe(MOCK_METRIC.label);
diff --git a/spec/frontend/analytics/shared/components/metric_tile_spec.js b/spec/frontend/analytics/shared/components/metric_tile_spec.js
index 980dfad9eb0..00e82cff0f0 100644
--- a/spec/frontend/analytics/shared/components/metric_tile_spec.js
+++ b/spec/frontend/analytics/shared/components/metric_tile_spec.js
@@ -21,10 +21,6 @@ describe('MetricTile', () => {
   const findSingleStat = () => wrapper.findComponent(GlSingleStat);
   const findPopover = () => wrapper.findComponent(MetricPopover);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     describe('links', () => {
       it('when the metric has links, it redirects the user on click', () => {
diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
index 3871fd530d8..d2cbe0d39e4 100644
--- a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -70,10 +70,6 @@ describe('ProjectsDropdownFilter component', () => {
     return waitForPromises();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findHighlightedItems = () => wrapper.findByTestId('vsa-highlighted-items');
   const findUnhighlightedItems = () => wrapper.findByTestId('vsa-default-items');
   const findClearAllButton = () => wrapper.findByText('Clear all');
diff --git a/spec/frontend/analytics/shared/utils_spec.js b/spec/frontend/analytics/shared/utils_spec.js
index b48e2d971b5..24af7b836d5 100644
--- a/spec/frontend/analytics/shared/utils_spec.js
+++ b/spec/frontend/analytics/shared/utils_spec.js
@@ -5,6 +5,7 @@ import {
   extractPaginationQueryParameters,
   getDataZoomOption,
   prepareTimeMetricsData,
+  generateValueStreamsDashboardLink,
 } from '~/analytics/shared/utils';
 import { slugify } from '~/lib/utils/text_utility';
 import { objectToQuery } from '~/lib/utils/url_utility';
@@ -212,3 +213,30 @@ describe('prepareTimeMetricsData', () => {
     ]);
   });
 });
+
+describe('generateValueStreamsDashboardLink', () => {
+  it.each`
+    groupPath              | projectPaths                                      | result
+    ${''}                  | ${[]}                                             | ${''}
+    ${'groups/fake-group'} | ${[]}                                             | ${'/groups/fake-group/-/analytics/dashboards/value_streams_dashboard'}
+    ${'groups/fake-group'} | ${['fake-path/project_1']}                        | ${'/groups/fake-group/-/analytics/dashboards/value_streams_dashboard?query=fake-path/project_1'}
+    ${'groups/fake-group'} | ${['fake-path/project_1', 'fake-path/project_2']} | ${'/groups/fake-group/-/analytics/dashboards/value_streams_dashboard?query=fake-path/project_1,fake-path/project_2'}
+  `(
+    'generates the dashboard link when groupPath=$groupPath and projectPaths=$projectPaths',
+    ({ groupPath, projectPaths, result }) => {
+      expect(generateValueStreamsDashboardLink(groupPath, projectPaths)).toBe(result);
+    },
+  );
+
+  describe('with a relative url rool set', () => {
+    beforeEach(() => {
+      gon.relative_url_root = '/foobar';
+    });
+
+    it('with includes a relative path if one is set', () => {
+      expect(generateValueStreamsDashboardLink('groups/fake-path', ['project_1'])).toBe(
+        '/foobar/groups/fake-path/-/analytics/dashboards/value_streams_dashboard?query=project_1',
+      );
+    });
+  });
+});
diff --git a/spec/frontend/analytics/usage_trends/components/app_spec.js b/spec/frontend/analytics/usage_trends/components/app_spec.js
index c732dc22322..f9338661ebf 100644
--- a/spec/frontend/analytics/usage_trends/components/app_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/app_spec.js
@@ -15,11 +15,6 @@ describe('UsageTrendsApp', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('displays the usage counts component', () => {
     expect(wrapper.findComponent(UsageCounts).exists()).toBe(true);
   });
diff --git a/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js b/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js
index f4cbc56be5c..a71ce090955 100644
--- a/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/usage_counts_spec.js
@@ -26,10 +26,6 @@ describe('UsageCounts', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findAllSingleStats = () => wrapper.findAllComponents(GlSingleStat);
 
diff --git a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
index ad6089f74b5..322d05e663a 100644
--- a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
@@ -45,11 +45,6 @@ describe('UsageTrendsCountChart', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findLoader = () => wrapper.findComponent(ChartSkeletonLoader);
   const findChart = () => wrapper.findComponent(GlLineChart);
   const findAlert = () => wrapper.findComponent(GlAlert);
diff --git a/spec/frontend/analytics/usage_trends/components/users_chart_spec.js b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
index e7abd4d4323..20836d7cc70 100644
--- a/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
@@ -42,11 +42,6 @@ describe('UsersChart', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findLoader = () => wrapper.findComponent(ChartSkeletonLoader);
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findChart = () => wrapper.findComponent(GlAreaChart);
diff --git a/spec/frontend/api/alert_management_alerts_api_spec.js b/spec/frontend/api/alert_management_alerts_api_spec.js
index 507f659a170..86052a05b76 100644
--- a/spec/frontend/api/alert_management_alerts_api_spec.js
+++ b/spec/frontend/api/alert_management_alerts_api_spec.js
@@ -9,7 +9,6 @@ import {
 
 describe('~/api/alert_management_alerts_api.js', () => {
   let mock;
-  let originalGon;
 
   const projectId = 1;
   const alertIid = 2;
@@ -19,13 +18,11 @@ describe('~/api/alert_management_alerts_api.js', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
-    originalGon = window.gon;
     window.gon = { api_version: 'v4' };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('fetchAlertMetricImages', () => {
diff --git a/spec/frontend/api/groups_api_spec.js b/spec/frontend/api/groups_api_spec.js
index 0315db02cf2..642edb33624 100644
--- a/spec/frontend/api/groups_api_spec.js
+++ b/spec/frontend/api/groups_api_spec.js
@@ -10,23 +10,18 @@ const mockUrlRoot = '/gitlab';
 const mockGroupId = '99';
 
 describe('GroupsApi', () => {
-  let originalGon;
   let mock;
 
-  const dummyGon = {
-    api_version: mockApiVersion,
-    relative_url_root: mockUrlRoot,
-  };
-
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    originalGon = window.gon;
-    window.gon = { ...dummyGon };
+    window.gon = {
+      api_version: mockApiVersion,
+      relative_url_root: mockUrlRoot,
+    };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('updateGroup', () => {
diff --git a/spec/frontend/api/packages_api_spec.js b/spec/frontend/api/packages_api_spec.js
index 5f517bcf358..37c4b926ec2 100644
--- a/spec/frontend/api/packages_api_spec.js
+++ b/spec/frontend/api/packages_api_spec.js
@@ -6,22 +6,18 @@ import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 describe('Api', () => {
   const dummyApiVersion = 'v3000';
   const dummyUrlRoot = '/gitlab';
-  const dummyGon = {
-    api_version: dummyApiVersion,
-    relative_url_root: dummyUrlRoot,
-  };
-  let originalGon;
   let mock;
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    originalGon = window.gon;
-    window.gon = { ...dummyGon };
+    window.gon = {
+      api_version: dummyApiVersion,
+      relative_url_root: dummyUrlRoot,
+    };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('packages', () => {
diff --git a/spec/frontend/api/projects_api_spec.js b/spec/frontend/api/projects_api_spec.js
index 2d4ed39dad0..2de56fae0c2 100644
--- a/spec/frontend/api/projects_api_spec.js
+++ b/spec/frontend/api/projects_api_spec.js
@@ -7,7 +7,6 @@ import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('~/api/projects_api.js', () => {
   let mock;
-  let originalGon;
 
   const projectId = 1;
   const setfullPathProjectSearch = (value) => {
@@ -17,13 +16,11 @@ describe('~/api/projects_api.js', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
-    originalGon = window.gon;
     window.gon = { api_version: 'v7', features: { fullPathProjectSearch: true } };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('getProjects', () => {
diff --git a/spec/frontend/api/tags_api_spec.js b/spec/frontend/api/tags_api_spec.js
index af3533f52b7..0a1177d4f60 100644
--- a/spec/frontend/api/tags_api_spec.js
+++ b/spec/frontend/api/tags_api_spec.js
@@ -5,20 +5,17 @@ import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
 describe('~/api/tags_api.js', () => {
   let mock;
-  let originalGon;
 
   const projectId = 1;
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
-    originalGon = window.gon;
     window.gon = { api_version: 'v7' };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('getTag', () => {
diff --git a/spec/frontend/api/user_api_spec.js b/spec/frontend/api/user_api_spec.js
index 4d0252aad23..6636d77a09b 100644
--- a/spec/frontend/api/user_api_spec.js
+++ b/spec/frontend/api/user_api_spec.js
@@ -12,19 +12,16 @@ import { timeRanges } from '~/vue_shared/constants';
 
 describe('~/api/user_api', () => {
   let axiosMock;
-  let originalGon;
 
   beforeEach(() => {
     axiosMock = new MockAdapter(axios);
 
-    originalGon = window.gon;
     window.gon = { api_version: 'v4' };
   });
 
   afterEach(() => {
     axiosMock.restore();
     axiosMock.resetHistory();
-    window.gon = originalGon;
   });
 
   describe('followUser', () => {
diff --git a/spec/frontend/api_spec.js b/spec/frontend/api_spec.js
index 6fd106502c4..4ef37311e51 100644
--- a/spec/frontend/api_spec.js
+++ b/spec/frontend/api_spec.js
@@ -10,27 +10,22 @@ import {
   HTTP_STATUS_OK,
 } from '~/lib/utils/http_status';
 
-jest.mock('~/flash');
-
 describe('Api', () => {
   const dummyApiVersion = 'v3000';
   const dummyUrlRoot = '/gitlab';
-  const dummyGon = {
-    api_version: dummyApiVersion,
-    relative_url_root: dummyUrlRoot,
-  };
-  let originalGon;
+
   let mock;
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    originalGon = window.gon;
-    window.gon = { ...dummyGon };
+    window.gon = {
+      api_version: dummyApiVersion,
+      relative_url_root: dummyUrlRoot,
+    };
   });
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('buildUrl', () => {
@@ -1423,7 +1418,7 @@ describe('Api', () => {
 
     describe('when service data increment counter is called with feature flag disabled', () => {
       beforeEach(() => {
-        gon.features = { ...gon.features, usageDataApi: false };
+        gon.features = { usageDataApi: false };
       });
 
       it('returns null', () => {
@@ -1437,7 +1432,7 @@ describe('Api', () => {
 
     describe('when service data increment counter is called', () => {
       beforeEach(() => {
-        gon.features = { ...gon.features, usageDataApi: true };
+        gon.features = { usageDataApi: true };
       });
 
       it('resolves the Promise', () => {
@@ -1468,7 +1463,7 @@ describe('Api', () => {
 
       describe('when service data increment unique users is called with feature flag disabled', () => {
         beforeEach(() => {
-          gon.features = { ...gon.features, usageDataApi: false };
+          gon.features = { usageDataApi: false };
         });
 
         it('returns null and does not call the endpoint', () => {
@@ -1483,7 +1478,7 @@ describe('Api', () => {
 
       describe('when service data increment unique users is called', () => {
         beforeEach(() => {
-          gon.features = { ...gon.features, usageDataApi: true };
+          gon.features = { usageDataApi: true };
         });
 
         it('resolves the Promise', () => {
@@ -1500,7 +1495,7 @@ describe('Api', () => {
 
     describe('when user is not set and feature flag enabled', () => {
       beforeEach(() => {
-        gon.features = { ...gon.features, usageDataApi: true };
+        gon.features = { usageDataApi: true };
       });
 
       it('returns null and does not call the endpoint', () => {
diff --git a/spec/frontend/approvals/mock_data.js b/spec/frontend/approvals/mock_data.js
new file mode 100644
index 00000000000..e0e90c09791
--- /dev/null
+++ b/spec/frontend/approvals/mock_data.js
@@ -0,0 +1,10 @@
+import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
+
+export const createCanApproveResponse = () => {
+  const response = JSON.parse(JSON.stringify(approvedByCurrentUser));
+  response.data.project.mergeRequest.userPermissions.canApprove = true;
+  response.data.project.mergeRequest.approved = false;
+  response.data.project.mergeRequest.approvedBy.nodes = [];
+
+  return response;
+};
diff --git a/spec/frontend/artifacts/components/artifact_row_spec.js b/spec/frontend/artifacts/components/artifact_row_spec.js
index 2a7156bf480..268772ed4c0 100644
--- a/spec/frontend/artifacts/components/artifact_row_spec.js
+++ b/spec/frontend/artifacts/components/artifact_row_spec.js
@@ -1,9 +1,10 @@
-import { GlBadge, GlButton, GlFriendlyWrap } from '@gitlab/ui';
+import { GlBadge, GlButton, GlFriendlyWrap, GlFormCheckbox } from '@gitlab/ui';
 import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import ArtifactRow from '~/artifacts/components/artifact_row.vue';
+import { BULK_DELETE_FEATURE_FLAG } from '~/artifacts/constants';
 
 describe('ArtifactRow component', () => {
   let wrapper;
@@ -15,23 +16,21 @@ describe('ArtifactRow component', () => {
   const findSize = () => wrapper.findByTestId('job-artifact-row-size');
   const findDownloadButton = () => wrapper.findByTestId('job-artifact-row-download-button');
   const findDeleteButton = () => wrapper.findByTestId('job-artifact-row-delete-button');
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
-  const createComponent = ({ canDestroyArtifacts = true } = {}) => {
+  const createComponent = ({ canDestroyArtifacts = true, glFeatures = {} } = {}) => {
     wrapper = shallowMountExtended(ArtifactRow, {
       propsData: {
         artifact,
+        isSelected: false,
         isLoading: false,
         isLastRow: false,
       },
-      provide: { canDestroyArtifacts },
+      provide: { canDestroyArtifacts, glFeatures },
       stubs: { GlBadge, GlButton, GlFriendlyWrap },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('artifact details', () => {
     beforeEach(async () => {
       createComponent();
@@ -77,4 +76,30 @@ describe('ArtifactRow component', () => {
       expect(wrapper.emitted('delete')).toBeDefined();
     });
   });
+
+  describe('bulk delete checkbox', () => {
+    describe('with permission and feature flag enabled', () => {
+      beforeEach(() => {
+        createComponent({ glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true } });
+      });
+
+      it('emits selectArtifact when toggled', () => {
+        findCheckbox().vm.$emit('input', true);
+
+        expect(wrapper.emitted('selectArtifact')).toStrictEqual([[artifact, true]]);
+      });
+    });
+
+    it('is not shown without permission', () => {
+      createComponent({ canDestroyArtifacts: false });
+
+      expect(findCheckbox().exists()).toBe(false);
+    });
+
+    it('is not shown with feature flag disabled', () => {
+      createComponent();
+
+      expect(findCheckbox().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js b/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js
new file mode 100644
index 00000000000..876906b2c3c
--- /dev/null
+++ b/spec/frontend/artifacts/components/artifacts_bulk_delete_spec.js
@@ -0,0 +1,96 @@
+import { GlSprintf, GlModal } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue';
+import bulkDestroyArtifactsMutation from '~/artifacts/graphql/mutations/bulk_destroy_job_artifacts.mutation.graphql';
+
+Vue.use(VueApollo);
+
+describe('ArtifactsBulkDelete component', () => {
+  let wrapper;
+  let requestHandlers;
+
+  const projectId = '123';
+  const selectedArtifacts = [
+    mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes[0].id,
+    mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes[1].id,
+  ];
+
+  const findText = () => wrapper.findComponent(GlSprintf).text();
+  const findDeleteButton = () => wrapper.findByTestId('bulk-delete-delete-button');
+  const findClearButton = () => wrapper.findByTestId('bulk-delete-clear-button');
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  const createComponent = ({
+    handlers = {
+      bulkDestroyArtifactsMutation: jest.fn(),
+    },
+  } = {}) => {
+    requestHandlers = handlers;
+    wrapper = mountExtended(ArtifactsBulkDelete, {
+      apolloProvider: createMockApollo([
+        [bulkDestroyArtifactsMutation, requestHandlers.bulkDestroyArtifactsMutation],
+      ]),
+      propsData: {
+        selectedArtifacts,
+        queryVariables: {},
+        isLoading: false,
+        isLastRow: false,
+      },
+      provide: { projectId },
+    });
+  };
+
+  describe('selected artifacts box', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('displays selected artifacts count', () => {
+      expect(findText()).toContain(String(selectedArtifacts.length));
+    });
+
+    it('opens the confirmation modal when the delete button is clicked', async () => {
+      expect(findModal().props('visible')).toBe(false);
+
+      findDeleteButton().trigger('click');
+      await waitForPromises();
+
+      expect(findModal().props('visible')).toBe(true);
+    });
+
+    it('emits clearSelectedArtifacts event when the clear button is clicked', () => {
+      findClearButton().trigger('click');
+
+      expect(wrapper.emitted('clearSelectedArtifacts')).toBeDefined();
+    });
+  });
+
+  describe('bulk delete confirmation modal', () => {
+    beforeEach(async () => {
+      createComponent();
+      findDeleteButton().trigger('click');
+      await waitForPromises();
+    });
+
+    it('calls the bulk delete mutation with the selected artifacts on confirm', () => {
+      findModal().vm.$emit('primary');
+
+      expect(requestHandlers.bulkDestroyArtifactsMutation).toHaveBeenCalledWith({
+        projectId: `gid://gitlab/Project/${projectId}`,
+        ids: selectedArtifacts,
+      });
+    });
+
+    it('does not call the bulk delete mutation on cancel', () => {
+      findModal().vm.$emit('cancel');
+
+      expect(requestHandlers.bulkDestroyArtifactsMutation).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
index d006e0285d2..6bf3498f9b0 100644
--- a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
+++ b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js
@@ -10,9 +10,9 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import destroyArtifactMutation from '~/artifacts/graphql/mutations/destroy_artifact.mutation.graphql';
 import { I18N_DESTROY_ERROR, I18N_MODAL_TITLE } from '~/artifacts/constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const { artifacts } = getJobArtifactsResponse.data.project.jobs.nodes[0];
 const refetchArtifacts = jest.fn();
@@ -25,11 +25,12 @@ describe('ArtifactsTableRowDetails component', () => {
 
   const findModal = () => wrapper.findComponent(GlModal);
 
-  const createComponent = (
+  const createComponent = ({
     handlers = {
       destroyArtifactMutation: jest.fn(),
     },
-  ) => {
+    selectedArtifacts = [],
+  } = {}) => {
     requestHandlers = handlers;
     wrapper = mountExtended(ArtifactsTableRowDetails, {
       apolloProvider: createMockApollo([
@@ -37,6 +38,7 @@ describe('ArtifactsTableRowDetails component', () => {
       ]),
       propsData: {
         artifacts,
+        selectedArtifacts,
         refetchArtifacts,
         queryVariables: {},
       },
@@ -47,10 +49,6 @@ describe('ArtifactsTableRowDetails component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('passes correct props', () => {
     beforeEach(() => {
       createComponent();
@@ -92,7 +90,7 @@ describe('ArtifactsTableRowDetails component', () => {
       });
     });
 
-    it('displays a flash message and refetches artifacts when the mutation fails', async () => {
+    it('displays an alert message and refetches artifacts when the mutation fails', async () => {
       createComponent({
         destroyArtifactMutation: jest.fn().mockRejectedValue(new Error('Error!')),
       });
@@ -120,4 +118,20 @@ describe('ArtifactsTableRowDetails component', () => {
       expect(requestHandlers.destroyArtifactMutation).not.toHaveBeenCalled();
     });
   });
+
+  describe('bulk delete selection', () => {
+    it('is not selected for unselected artifact', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(wrapper.findAllComponents(ArtifactRow).at(0).props('isSelected')).toBe(false);
+    });
+
+    it('is selected for selected artifacts', async () => {
+      createComponent({ selectedArtifacts: [artifacts.nodes[0].id] });
+      await waitForPromises();
+
+      expect(wrapper.findAllComponents(ArtifactRow).at(0).props('isSelected')).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/artifacts/components/feedback_banner_spec.js b/spec/frontend/artifacts/components/feedback_banner_spec.js
index 3421486020a..af9599daefa 100644
--- a/spec/frontend/artifacts/components/feedback_banner_spec.js
+++ b/spec/frontend/artifacts/components/feedback_banner_spec.js
@@ -32,10 +32,6 @@ describe('Artifacts management feedback banner', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('is displayed with the correct props', () => {
     createComponent();
 
diff --git a/spec/frontend/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
index dbe4598f599..40f3c9633ab 100644
--- a/spec/frontend/artifacts/components/job_artifacts_table_spec.js
+++ b/spec/frontend/artifacts/components/job_artifacts_table_spec.js
@@ -1,4 +1,12 @@
-import { GlLoadingIcon, GlTable, GlLink, GlBadge, GlPagination, GlModal } from '@gitlab/ui';
+import {
+  GlLoadingIcon,
+  GlTable,
+  GlLink,
+  GlBadge,
+  GlPagination,
+  GlModal,
+  GlFormCheckbox,
+} from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
@@ -8,15 +16,22 @@ import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue';
 import FeedbackBanner from '~/artifacts/components/feedback_banner.vue';
 import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue';
 import ArtifactDeleteModal from '~/artifacts/components/artifact_delete_modal.vue';
+import ArtifactsBulkDelete from '~/artifacts/components/artifacts_bulk_delete.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import getJobArtifactsQuery from '~/artifacts/graphql/queries/get_job_artifacts.query.graphql';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { ARCHIVE_FILE_TYPE, JOBS_PER_PAGE, I18N_FETCH_ERROR } from '~/artifacts/constants';
+import {
+  ARCHIVE_FILE_TYPE,
+  JOBS_PER_PAGE,
+  I18N_FETCH_ERROR,
+  INITIAL_CURRENT_PAGE,
+  BULK_DELETE_FEATURE_FLAG,
+} from '~/artifacts/constants';
 import { totalArtifactsSizeForJob } from '~/artifacts/utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -24,6 +39,8 @@ describe('JobArtifactsTable component', () => {
   let wrapper;
   let requestHandlers;
 
+  const mockToastShow = jest.fn();
+
   const findBanner = () => wrapper.findComponent(FeedbackBanner);
 
   const findLoadingState = () => wrapper.findComponent(GlLoadingIcon);
@@ -55,6 +72,11 @@ describe('JobArtifactsTable component', () => {
   const findDeleteButton = () => wrapper.findByTestId('job-artifacts-delete-button');
   const findArtifactDeleteButton = () => wrapper.findByTestId('job-artifact-row-delete-button');
 
+  // first checkbox is a "select all", this finder should get the first job checkbox
+  const findJobCheckbox = () => wrapper.findAllComponents(GlFormCheckbox).at(1);
+  const findAnyCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findBulkDelete = () => wrapper.findComponent(ArtifactsBulkDelete);
+
   const findPagination = () => wrapper.findComponent(GlPagination);
   const setPage = async (page) => {
     findPagination().vm.$emit('input', page);
@@ -69,7 +91,14 @@ describe('JobArtifactsTable component', () => {
     ];
   }
   const getJobArtifactsResponseThatPaginates = {
-    data: { project: { jobs: { nodes: enoughJobsToPaginate } } },
+    data: {
+      project: {
+        jobs: {
+          nodes: enoughJobsToPaginate,
+          pageInfo: { ...getJobArtifactsResponse.data.project.jobs.pageInfo, hasNextPage: true },
+        },
+      },
+    },
   };
 
   const job = getJobArtifactsResponse.data.project.jobs.nodes[0];
@@ -77,13 +106,14 @@ describe('JobArtifactsTable component', () => {
     (artifact) => artifact.fileType === ARCHIVE_FILE_TYPE,
   );
 
-  const createComponent = (
+  const createComponent = ({
     handlers = {
       getJobArtifactsQuery: jest.fn().mockResolvedValue(getJobArtifactsResponse),
     },
     data = {},
     canDestroyArtifacts = true,
-  ) => {
+    glFeatures = {},
+  } = {}) => {
     requestHandlers = handlers;
     wrapper = mountExtended(JobArtifactsTable, {
       apolloProvider: createMockApollo([
@@ -91,8 +121,15 @@ describe('JobArtifactsTable component', () => {
       ]),
       provide: {
         projectPath: 'project/path',
+        projectId: 'gid://projects/id',
         canDestroyArtifacts,
         artifactsManagementFeedbackImagePath: 'banner/image/path',
+        glFeatures,
+      },
+      mocks: {
+        $toast: {
+          show: mockToastShow,
+        },
       },
       data() {
         return data;
@@ -100,10 +137,6 @@ describe('JobArtifactsTable component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders feedback banner', () => {
     createComponent();
 
@@ -118,7 +151,9 @@ describe('JobArtifactsTable component', () => {
 
   it('on error, shows an alert', async () => {
     createComponent({
-      getJobArtifactsQuery: jest.fn().mockRejectedValue(new Error('Error!')),
+      handlers: {
+        getJobArtifactsQuery: jest.fn().mockRejectedValue(new Error('Error!')),
+      },
     });
 
     await waitForPromises();
@@ -259,10 +294,10 @@ describe('JobArtifactsTable component', () => {
         archive: { downloadPath: null },
       };
 
-      createComponent(
-        { getJobArtifactsQuery: jest.fn() },
-        { jobArtifacts: [jobWithoutDownloadPath] },
-      );
+      createComponent({
+        handlers: { getJobArtifactsQuery: jest.fn() },
+        data: { jobArtifacts: [jobWithoutDownloadPath] },
+      });
 
       await waitForPromises();
 
@@ -285,10 +320,10 @@ describe('JobArtifactsTable component', () => {
         browseArtifactsPath: null,
       };
 
-      createComponent(
-        { getJobArtifactsQuery: jest.fn() },
-        { jobArtifacts: [jobWithoutBrowsePath] },
-      );
+      createComponent({
+        handlers: { getJobArtifactsQuery: jest.fn() },
+        data: { jobArtifacts: [jobWithoutBrowsePath] },
+      });
 
       await waitForPromises();
 
@@ -298,7 +333,7 @@ describe('JobArtifactsTable component', () => {
 
   describe('delete button', () => {
     it('does not show when user does not have permission', async () => {
-      createComponent({}, {}, false);
+      createComponent({ canDestroyArtifacts: false });
 
       await waitForPromises();
 
@@ -314,50 +349,125 @@ describe('JobArtifactsTable component', () => {
     });
   });
 
+  describe('bulk delete', () => {
+    describe('with permission and feature flag enabled', () => {
+      beforeEach(async () => {
+        createComponent({
+          canDestroyArtifacts: true,
+          glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true },
+        });
+
+        await waitForPromises();
+      });
+
+      it('shows selected artifacts when a job is checked', async () => {
+        expect(findBulkDelete().exists()).toBe(false);
+
+        await findJobCheckbox().vm.$emit('input', true);
+
+        expect(findBulkDelete().exists()).toBe(true);
+        expect(findBulkDelete().props('selectedArtifacts')).toStrictEqual(
+          job.artifacts.nodes.map((node) => node.id),
+        );
+      });
+
+      it('disappears when selected artifacts are cleared', async () => {
+        await findJobCheckbox().vm.$emit('input', true);
+
+        expect(findBulkDelete().exists()).toBe(true);
+
+        await findBulkDelete().vm.$emit('clearSelectedArtifacts');
+
+        expect(findBulkDelete().exists()).toBe(false);
+      });
+
+      it('shows a toast when artifacts are deleted', async () => {
+        const count = job.artifacts.nodes.length;
+
+        await findJobCheckbox().vm.$emit('input', true);
+        findBulkDelete().vm.$emit('deleted', count);
+
+        expect(mockToastShow).toHaveBeenCalledWith(`${count} selected artifacts deleted`);
+      });
+    });
+
+    it('shows no checkboxes without permission', async () => {
+      createComponent({
+        canDestroyArtifacts: false,
+        glFeatures: { [BULK_DELETE_FEATURE_FLAG]: true },
+      });
+
+      await waitForPromises();
+
+      expect(findAnyCheckbox().exists()).toBe(false);
+    });
+
+    it('shows no checkboxes with feature flag disabled', async () => {
+      createComponent({
+        canDestroyArtifacts: true,
+        glFeatures: { [BULK_DELETE_FEATURE_FLAG]: false },
+      });
+
+      await waitForPromises();
+
+      expect(findAnyCheckbox().exists()).toBe(false);
+    });
+  });
+
   describe('pagination', () => {
-    const { pageInfo } = getJobArtifactsResponse.data.project.jobs;
+    const { pageInfo } = getJobArtifactsResponseThatPaginates.data.project.jobs;
+    const query = jest.fn().mockResolvedValue(getJobArtifactsResponseThatPaginates);
 
     beforeEach(async () => {
-      createComponent(
-        {
-          getJobArtifactsQuery: jest.fn().mockResolvedValue(getJobArtifactsResponseThatPaginates),
+      createComponent({
+        handlers: {
+          getJobArtifactsQuery: query,
         },
-        {
-          count: enoughJobsToPaginate.length,
-          pageInfo,
-        },
-      );
+        data: { pageInfo },
+      });
 
       await waitForPromises();
     });
 
     it('renders pagination and passes page props', () => {
-      expect(findPagination().exists()).toBe(true);
       expect(findPagination().props()).toMatchObject({
-        value: wrapper.vm.pagination.currentPage,
-        prevPage: wrapper.vm.prevPage,
-        nextPage: wrapper.vm.nextPage,
+        value: INITIAL_CURRENT_PAGE,
+        prevPage: Number(pageInfo.hasPreviousPage),
+        nextPage: Number(pageInfo.hasNextPage),
+      });
+
+      expect(query).toHaveBeenCalledWith({
+        projectPath: 'project/path',
+        firstPageSize: JOBS_PER_PAGE,
+        lastPageSize: null,
+        nextPageCursor: '',
+        prevPageCursor: '',
       });
     });
 
-    it('updates query variables when going to previous page', () => {
-      return setPage(1).then(() => {
-        expect(wrapper.vm.queryVariables).toMatchObject({
-          projectPath: 'project/path',
-          nextPageCursor: undefined,
-          prevPageCursor: pageInfo.startCursor,
-        });
+    it('updates query variables when going to previous page', async () => {
+      await setPage(1);
+
+      expect(query).toHaveBeenLastCalledWith({
+        projectPath: 'project/path',
+        firstPageSize: null,
+        lastPageSize: JOBS_PER_PAGE,
+        prevPageCursor: pageInfo.startCursor,
       });
+      expect(findPagination().props('value')).toEqual(1);
     });
 
-    it('updates query variables when going to next page', () => {
-      return setPage(2).then(() => {
-        expect(wrapper.vm.queryVariables).toMatchObject({
-          lastPageSize: null,
-          nextPageCursor: pageInfo.endCursor,
-          prevPageCursor: '',
-        });
+    it('updates query variables when going to next page', async () => {
+      await setPage(2);
+
+      expect(query).toHaveBeenLastCalledWith({
+        projectPath: 'project/path',
+        firstPageSize: JOBS_PER_PAGE,
+        lastPageSize: null,
+        prevPageCursor: '',
+        nextPageCursor: pageInfo.endCursor,
       });
+      expect(findPagination().props('value')).toEqual(2);
     });
   });
 });
diff --git a/spec/frontend/artifacts/components/job_checkbox_spec.js b/spec/frontend/artifacts/components/job_checkbox_spec.js
new file mode 100644
index 00000000000..95cc548b8c8
--- /dev/null
+++ b/spec/frontend/artifacts/components/job_checkbox_spec.js
@@ -0,0 +1,71 @@
+import { GlFormCheckbox } from '@gitlab/ui';
+import mockGetJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/queries/get_job_artifacts.query.graphql.json';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import JobCheckbox from '~/artifacts/components/job_checkbox.vue';
+
+describe('JobCheckbox component', () => {
+  let wrapper;
+
+  const mockArtifactNodes = mockGetJobArtifactsResponse.data.project.jobs.nodes[0].artifacts.nodes;
+  const mockSelectedArtifacts = [mockArtifactNodes[0], mockArtifactNodes[1]];
+  const mockUnselectedArtifacts = [mockArtifactNodes[2]];
+
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+
+  const createComponent = ({
+    hasArtifacts = true,
+    selectedArtifacts = mockSelectedArtifacts,
+    unselectedArtifacts = mockUnselectedArtifacts,
+  } = {}) => {
+    wrapper = shallowMountExtended(JobCheckbox, {
+      propsData: {
+        hasArtifacts,
+        selectedArtifacts,
+        unselectedArtifacts,
+      },
+      mocks: { GlFormCheckbox },
+    });
+  };
+
+  it('is disabled when the job has no artifacts', () => {
+    createComponent({ hasArtifacts: false });
+
+    expect(findCheckbox().attributes('disabled')).toBe('true');
+  });
+
+  describe('when some artifacts are selected', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('is indeterminate', () => {
+      expect(findCheckbox().attributes('indeterminate')).toBe('true');
+      expect(findCheckbox().attributes('checked')).toBeUndefined();
+    });
+
+    it('selects the unselected artifacts on click', () => {
+      findCheckbox().vm.$emit('input', true);
+
+      expect(wrapper.emitted('selectArtifact')).toMatchObject([[mockUnselectedArtifacts[0], true]]);
+    });
+  });
+
+  describe('when all artifacts are selected', () => {
+    beforeEach(() => {
+      createComponent({ unselectedArtifacts: [] });
+    });
+
+    it('is checked', () => {
+      expect(findCheckbox().attributes('checked')).toBe('true');
+    });
+
+    it('deselects the selected artifacts on click', () => {
+      findCheckbox().vm.$emit('input', false);
+
+      expect(wrapper.emitted('selectArtifact')).toMatchObject([
+        [mockSelectedArtifacts[0], false],
+        [mockSelectedArtifacts[1], false],
+      ]);
+    });
+  });
+});
diff --git a/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js b/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
index ca94acfa444..efdebe5f3b0 100644
--- a/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
+++ b/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
@@ -78,8 +78,6 @@ describe('Keep latest artifact checkbox', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     apolloProvider = null;
   });
 
diff --git a/spec/frontend/authentication/u2f/authenticate_spec.js b/spec/frontend/authentication/u2f/authenticate_spec.js
deleted file mode 100644
index 3ae7fcf1c49..00000000000
--- a/spec/frontend/authentication/u2f/authenticate_spec.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import $ from 'jquery';
-import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import U2FAuthenticate from '~/authentication/u2f/authenticate';
-import 'vendor/u2f';
-import MockU2FDevice from './mock_u2f_device';
-
-describe('U2FAuthenticate', () => {
-  let u2fDevice;
-  let container;
-  let component;
-
-  beforeEach(() => {
-    loadHTMLFixture('u2f/authenticate.html');
-    u2fDevice = new MockU2FDevice();
-    container = $('#js-authenticate-token-2fa');
-    component = new U2FAuthenticate(
-      container,
-      '#js-login-token-2fa-form',
-      {
-        sign_requests: [],
-      },
-      document.querySelector('#js-login-2fa-device'),
-      document.querySelector('.js-2fa-form'),
-    );
-  });
-
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  describe('with u2f unavailable', () => {
-    let oldu2f;
-
-    beforeEach(() => {
-      jest.spyOn(component, 'switchToFallbackUI').mockImplementation(() => {});
-      oldu2f = window.u2f;
-      window.u2f = null;
-    });
-
-    afterEach(() => {
-      window.u2f = oldu2f;
-    });
-
-    it('falls back to normal 2fa', async () => {
-      await component.start();
-      expect(component.switchToFallbackUI).toHaveBeenCalled();
-    });
-  });
-
-  describe('with u2f available', () => {
-    beforeEach(() => {
-      // bypass automatic form submission within renderAuthenticated
-      jest.spyOn(component, 'renderAuthenticated').mockReturnValue(true);
-      u2fDevice = new MockU2FDevice();
-
-      return component.start();
-    });
-
-    it('allows authenticating via a U2F device', () => {
-      const inProgressMessage = container.find('p');
-
-      expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
-      u2fDevice.respondToAuthenticateRequest({
-        deviceData: 'this is data from the device',
-      });
-
-      expect(component.renderAuthenticated).toHaveBeenCalledWith(
-        '{"deviceData":"this is data from the device"}',
-      );
-    });
-
-    describe('errors', () => {
-      it('displays an error message', () => {
-        const setupButton = container.find('#js-login-2fa-device');
-        setupButton.trigger('click');
-        u2fDevice.respondToAuthenticateRequest({
-          errorCode: 'error!',
-        });
-        const errorMessage = container.find('p');
-
-        expect(errorMessage.text()).toContain('There was a problem communicating with your device');
-      });
-
-      it('allows retrying authentication after an error', () => {
-        let setupButton = container.find('#js-login-2fa-device');
-        setupButton.trigger('click');
-        u2fDevice.respondToAuthenticateRequest({
-          errorCode: 'error!',
-        });
-        const retryButton = container.find('#js-token-2fa-try-again');
-        retryButton.trigger('click');
-        setupButton = container.find('#js-login-2fa-device');
-        setupButton.trigger('click');
-        u2fDevice.respondToAuthenticateRequest({
-          deviceData: 'this is data from the device',
-        });
-
-        expect(component.renderAuthenticated).toHaveBeenCalledWith(
-          '{"deviceData":"this is data from the device"}',
-        );
-      });
-    });
-  });
-});
diff --git a/spec/frontend/authentication/u2f/mock_u2f_device.js b/spec/frontend/authentication/u2f/mock_u2f_device.js
deleted file mode 100644
index ec8425a4e3e..00000000000
--- a/spec/frontend/authentication/u2f/mock_u2f_device.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable no-unused-expressions */
-
-export default class MockU2FDevice {
-  constructor() {
-    this.respondToAuthenticateRequest = this.respondToAuthenticateRequest.bind(this);
-    this.respondToRegisterRequest = this.respondToRegisterRequest.bind(this);
-    window.u2f || (window.u2f = {});
-    window.u2f.register = (appId, registerRequests, signRequests, callback) => {
-      this.registerCallback = callback;
-    };
-    window.u2f.sign = (appId, challenges, signRequests, callback) => {
-      this.authenticateCallback = callback;
-    };
-  }
-
-  respondToRegisterRequest(params) {
-    return this.registerCallback(params);
-  }
-
-  respondToAuthenticateRequest(params) {
-    return this.authenticateCallback(params);
-  }
-}
diff --git a/spec/frontend/authentication/u2f/register_spec.js b/spec/frontend/authentication/u2f/register_spec.js
deleted file mode 100644
index 23d1e5c7dee..00000000000
--- a/spec/frontend/authentication/u2f/register_spec.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import $ from 'jquery';
-import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { trimText } from 'helpers/text_helper';
-import U2FRegister from '~/authentication/u2f/register';
-import 'vendor/u2f';
-import MockU2FDevice from './mock_u2f_device';
-
-describe('U2FRegister', () => {
-  let u2fDevice;
-  let container;
-  let component;
-
-  beforeEach(() => {
-    loadHTMLFixture('u2f/register.html');
-    u2fDevice = new MockU2FDevice();
-    container = $('#js-register-token-2fa');
-    component = new U2FRegister(container, {});
-    return component.start();
-  });
-
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  it('allows registering a U2F device', () => {
-    const setupButton = container.find('#js-setup-token-2fa-device');
-
-    expect(trimText(setupButton.text())).toBe('Set up new device');
-    setupButton.trigger('click');
-    const inProgressMessage = container.children('p');
-
-    expect(inProgressMessage.text()).toContain('Trying to communicate with your device');
-    u2fDevice.respondToRegisterRequest({
-      deviceData: 'this is data from the device',
-    });
-    const registeredMessage = container.find('p');
-    const deviceResponse = container.find('#js-device-response');
-
-    expect(registeredMessage.text()).toContain('Your device was successfully set up!');
-    expect(deviceResponse.val()).toBe('{"deviceData":"this is data from the device"}');
-  });
-
-  describe('errors', () => {
-    it("doesn't allow the same device to be registered twice (for the same user", () => {
-      const setupButton = container.find('#js-setup-token-2fa-device');
-      setupButton.trigger('click');
-      u2fDevice.respondToRegisterRequest({
-        errorCode: 4,
-      });
-      const errorMessage = container.find('p');
-
-      expect(errorMessage.text()).toContain('already been registered with us');
-    });
-
-    it('displays an error message for other errors', () => {
-      const setupButton = container.find('#js-setup-token-2fa-device');
-      setupButton.trigger('click');
-      u2fDevice.respondToRegisterRequest({
-        errorCode: 'error!',
-      });
-      const errorMessage = container.find('p');
-
-      expect(errorMessage.text()).toContain('There was a problem communicating with your device');
-    });
-
-    it('allows retrying registration after an error', () => {
-      let setupButton = container.find('#js-setup-token-2fa-device');
-      setupButton.trigger('click');
-      u2fDevice.respondToRegisterRequest({
-        errorCode: 'error!',
-      });
-      const retryButton = container.find('#js-token-2fa-try-again');
-      retryButton.trigger('click');
-      setupButton = container.find('#js-setup-token-2fa-device');
-      setupButton.trigger('click');
-      u2fDevice.respondToRegisterRequest({
-        deviceData: 'this is data from the device',
-      });
-      const registeredMessage = container.find('p');
-
-      expect(registeredMessage.text()).toContain('Your device was successfully set up!');
-    });
-  });
-});
diff --git a/spec/frontend/authentication/u2f/util_spec.js b/spec/frontend/authentication/u2f/util_spec.js
deleted file mode 100644
index 67fd4c73243..00000000000
--- a/spec/frontend/authentication/u2f/util_spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { canInjectU2fApi } from '~/authentication/u2f/util';
-
-describe('U2F Utils', () => {
-  describe('canInjectU2fApi', () => {
-    it('returns false for Chrome < 41', () => {
-      const userAgent =
-        'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.28 Safari/537.36';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-
-    it('returns true for Chrome >= 41', () => {
-      const userAgent =
-        'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36';
-
-      expect(canInjectU2fApi(userAgent)).toBe(true);
-    });
-
-    it('returns false for Opera < 40', () => {
-      const userAgent =
-        'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-
-    it('returns true for Opera >= 40', () => {
-      const userAgent =
-        'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 OPR/43.0.2442.991';
-
-      expect(canInjectU2fApi(userAgent)).toBe(true);
-    });
-
-    it('returns false for Safari', () => {
-      const userAgent =
-        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-
-    it('returns false for Chrome on Android', () => {
-      const userAgent =
-        'Mozilla/5.0 (Linux; Android 7.0; VS988 Build/NRD90U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3145.0 Mobile Safari/537.36';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-
-    it('returns false for Chrome on iOS', () => {
-      const userAgent =
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-
-    it('returns false for Safari on iOS', () => {
-      const userAgent =
-        'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1';
-
-      expect(canInjectU2fApi(userAgent)).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/authentication/webauthn/components/registration_spec.js b/spec/frontend/authentication/webauthn/components/registration_spec.js
new file mode 100644
index 00000000000..1221626db7d
--- /dev/null
+++ b/spec/frontend/authentication/webauthn/components/registration_spec.js
@@ -0,0 +1,255 @@
+import { nextTick } from 'vue';
+import { GlAlert, GlButton, GlForm, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import Registration from '~/authentication/webauthn/components/registration.vue';
+import {
+  I18N_BUTTON_REGISTER,
+  I18N_BUTTON_SETUP,
+  I18N_BUTTON_TRY_AGAIN,
+  I18N_ERROR_HTTP,
+  I18N_ERROR_UNSUPPORTED_BROWSER,
+  I18N_INFO_TEXT,
+  I18N_STATUS_SUCCESS,
+  I18N_STATUS_WAITING,
+  STATE_ERROR,
+  STATE_READY,
+  STATE_SUCCESS,
+  STATE_UNSUPPORTED,
+  STATE_WAITING,
+  WEBAUTHN_REGISTER,
+} from '~/authentication/webauthn/constants';
+import * as WebAuthnUtils from '~/authentication/webauthn/util';
+import WebAuthnError from '~/authentication/webauthn/error';
+
+const csrfToken = 'mock-csrf-token';
+jest.mock('~/lib/utils/csrf', () => ({ token: csrfToken }));
+jest.mock('~/authentication/webauthn/util');
+jest.mock('~/authentication/webauthn/error');
+
+describe('Registration', () => {
+  const initialError = null;
+  const passwordRequired = true;
+  const targetPath = '/-/profile/two_factor_auth/create_webauthn';
+  let wrapper;
+
+  const createComponent = (provide = {}) => {
+    wrapper = shallowMountExtended(Registration, {
+      provide: { initialError, passwordRequired, targetPath, ...provide },
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  describe(`when ${STATE_UNSUPPORTED} state`, () => {
+    it('shows an error if using unsecure scheme (HTTP)', () => {
+      // `supported` function returns false for HTTP because `navigator.credentials` is undefined.
+      WebAuthnUtils.supported.mockReturnValue(false);
+      WebAuthnUtils.isHTTPS.mockReturnValue(false);
+      createComponent();
+
+      const alert = wrapper.findComponent(GlAlert);
+      expect(alert.props('variant')).toBe('danger');
+      expect(alert.text()).toBe(I18N_ERROR_HTTP);
+    });
+
+    it('shows an error if using unsupported browser', () => {
+      WebAuthnUtils.supported.mockReturnValue(false);
+      WebAuthnUtils.isHTTPS.mockReturnValue(true);
+      createComponent();
+
+      const alert = wrapper.findComponent(GlAlert);
+      expect(alert.props('variant')).toBe('danger');
+      expect(alert.text()).toBe(I18N_ERROR_UNSUPPORTED_BROWSER);
+    });
+  });
+
+  describe('when scheme or browser are supported', () => {
+    const mockCreate = jest.fn();
+
+    const clickSetupDeviceButton = () => {
+      findButton().vm.$emit('click');
+      return nextTick();
+    };
+
+    const setupDevice = () => {
+      clickSetupDeviceButton();
+      return waitForPromises();
+    };
+
+    beforeEach(() => {
+      WebAuthnUtils.isHTTPS.mockReturnValue(true);
+      WebAuthnUtils.supported.mockReturnValue(true);
+      global.navigator.credentials = { create: mockCreate };
+      gon.webauthn = { options: {} };
+    });
+
+    afterEach(() => {
+      global.navigator.credentials = undefined;
+    });
+
+    describe(`when ${STATE_READY} state`, () => {
+      it('shows button and explanation text', () => {
+        createComponent();
+
+        expect(findButton().text()).toBe(I18N_BUTTON_SETUP);
+        expect(wrapper.text()).toContain(I18N_INFO_TEXT);
+      });
+    });
+
+    describe(`when ${STATE_WAITING} state`, () => {
+      it('shows loading icon and message after pressing the button', async () => {
+        createComponent();
+
+        await clickSetupDeviceButton();
+
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+        expect(wrapper.text()).toContain(I18N_STATUS_WAITING);
+      });
+    });
+
+    describe(`when ${STATE_SUCCESS} state`, () => {
+      const credentials = 1;
+
+      const findCurrentPasswordInput = () => wrapper.findByTestId('current-password-input');
+      const findDeviceNameInput = () => wrapper.findByTestId('device-name-input');
+
+      beforeEach(() => {
+        mockCreate.mockResolvedValueOnce(true);
+        WebAuthnUtils.convertCreateResponse.mockReturnValue(credentials);
+      });
+
+      describe('registration form', () => {
+        it('has correct action', async () => {
+          createComponent();
+
+          await setupDevice();
+
+          expect(wrapper.findComponent(GlForm).attributes('action')).toBe(targetPath);
+        });
+
+        describe('when password is required', () => {
+          it('shows device name and password fields', async () => {
+            createComponent();
+
+            await setupDevice();
+
+            expect(wrapper.text()).toContain(I18N_STATUS_SUCCESS);
+
+            // Visible inputs
+            expect(findCurrentPasswordInput().attributes('name')).toBe('current_password');
+            expect(findDeviceNameInput().attributes('name')).toBe('device_registration[name]');
+
+            // Hidden inputs
+            expect(
+              wrapper
+                .find('input[name="device_registration[device_response]"]')
+                .attributes('value'),
+            ).toBe(`${credentials}`);
+            expect(wrapper.find('input[name=authenticity_token]').attributes('value')).toBe(
+              csrfToken,
+            );
+
+            expect(findButton().text()).toBe(I18N_BUTTON_REGISTER);
+          });
+
+          it('enables the register device button when device name and password are filled', async () => {
+            createComponent();
+
+            await setupDevice();
+
+            expect(findButton().props('disabled')).toBe(true);
+
+            // Visible inputs
+            findCurrentPasswordInput().vm.$emit('input', 'my current password');
+            findDeviceNameInput().vm.$emit('input', 'my device name');
+            await nextTick();
+
+            expect(findButton().props('disabled')).toBe(false);
+          });
+        });
+
+        describe('when password is not required', () => {
+          it('shows a device name field', async () => {
+            createComponent({ passwordRequired: false });
+
+            await setupDevice();
+
+            expect(wrapper.text()).toContain(I18N_STATUS_SUCCESS);
+
+            // Visible inputs
+            expect(findCurrentPasswordInput().exists()).toBe(false);
+            expect(findDeviceNameInput().attributes('name')).toBe('device_registration[name]');
+
+            // Hidden inputs
+            expect(
+              wrapper
+                .find('input[name="device_registration[device_response]"]')
+                .attributes('value'),
+            ).toBe(`${credentials}`);
+            expect(wrapper.find('input[name=authenticity_token]').attributes('value')).toBe(
+              csrfToken,
+            );
+
+            expect(findButton().text()).toBe(I18N_BUTTON_REGISTER);
+          });
+
+          it('enables the register device button when device name is filled', async () => {
+            createComponent({ passwordRequired: false });
+
+            await setupDevice();
+
+            expect(findButton().props('disabled')).toBe(true);
+
+            findDeviceNameInput().vm.$emit('input', 'my device name');
+            await nextTick();
+
+            expect(findButton().props('disabled')).toBe(false);
+          });
+        });
+      });
+    });
+
+    describe(`when ${STATE_ERROR} state`, () => {
+      it('shows an initial error message and a retry button', async () => {
+        const myError = 'my error';
+        createComponent({ initialError: myError });
+
+        const alert = wrapper.findComponent(GlAlert);
+        expect(alert.props()).toMatchObject({
+          variant: 'danger',
+          secondaryButtonText: I18N_BUTTON_TRY_AGAIN,
+        });
+        expect(alert.text()).toContain(myError);
+      });
+
+      it('shows an error message and a retry button', async () => {
+        createComponent();
+        const error = new Error();
+        mockCreate.mockRejectedValueOnce(error);
+
+        await setupDevice();
+
+        expect(WebAuthnError).toHaveBeenCalledWith(error, WEBAUTHN_REGISTER);
+        expect(wrapper.findComponent(GlAlert).props()).toMatchObject({
+          variant: 'danger',
+          secondaryButtonText: I18N_BUTTON_TRY_AGAIN,
+        });
+      });
+
+      it('recovers after an error (error to success state)', async () => {
+        createComponent();
+        mockCreate.mockRejectedValueOnce(new Error()).mockResolvedValueOnce(true);
+
+        await setupDevice();
+
+        expect(wrapper.findComponent(GlAlert).props('variant')).toBe('danger');
+
+        wrapper.findComponent(GlAlert).vm.$emit('secondaryAction');
+        await waitForPromises();
+
+        expect(wrapper.findComponent(GlAlert).props('variant')).toBe('info');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/authentication/webauthn/error_spec.js b/spec/frontend/authentication/webauthn/error_spec.js
index 9b71f77dde2..b979173edc6 100644
--- a/spec/frontend/authentication/webauthn/error_spec.js
+++ b/spec/frontend/authentication/webauthn/error_spec.js
@@ -1,16 +1,17 @@
 import setWindowLocation from 'helpers/set_window_location_helper';
 import WebAuthnError from '~/authentication/webauthn/error';
+import { WEBAUTHN_AUTHENTICATE, WEBAUTHN_REGISTER } from '~/authentication/webauthn/constants';
 
 describe('WebAuthnError', () => {
   it.each([
     [
       'NotSupportedError',
       'Your device is not compatible with GitLab. Please try another device',
-      'authenticate',
+      WEBAUTHN_AUTHENTICATE,
     ],
-    ['InvalidStateError', 'This device has not been registered with us.', 'authenticate'],
-    ['InvalidStateError', 'This device has already been registered with us.', 'register'],
-    ['UnknownError', 'There was a problem communicating with your device.', 'register'],
+    ['InvalidStateError', 'This device has not been registered with us.', WEBAUTHN_AUTHENTICATE],
+    ['InvalidStateError', 'This device has already been registered with us.', WEBAUTHN_REGISTER],
+    ['UnknownError', 'There was a problem communicating with your device.', WEBAUTHN_REGISTER],
   ])('exception %s will have message %s, flow type: %s', (exception, expectedMessage, flowType) => {
     expect(new WebAuthnError(new DOMException('', exception), flowType).message()).toEqual(
       expectedMessage,
@@ -24,7 +25,7 @@ describe('WebAuthnError', () => {
       const expectedMessage =
         'WebAuthn only works with HTTPS-enabled websites. Contact your administrator for more details.';
       expect(
-        new WebAuthnError(new DOMException('', 'SecurityError'), 'authenticate').message(),
+        new WebAuthnError(new DOMException('', 'SecurityError'), WEBAUTHN_AUTHENTICATE).message(),
       ).toEqual(expectedMessage);
     });
 
@@ -33,7 +34,7 @@ describe('WebAuthnError', () => {
 
       const expectedMessage = 'There was a problem communicating with your device.';
       expect(
-        new WebAuthnError(new DOMException('', 'SecurityError'), 'authenticate').message(),
+        new WebAuthnError(new DOMException('', 'SecurityError'), WEBAUTHN_AUTHENTICATE).message(),
       ).toEqual(expectedMessage);
     });
   });
diff --git a/spec/frontend/authentication/webauthn/util_spec.js b/spec/frontend/authentication/webauthn/util_spec.js
index bc44b47d0ba..831d1636b8c 100644
--- a/spec/frontend/authentication/webauthn/util_spec.js
+++ b/spec/frontend/authentication/webauthn/util_spec.js
@@ -1,4 +1,9 @@
-import { base64ToBuffer, bufferToBase64, base64ToBase64Url } from '~/authentication/webauthn/util';
+import {
+  base64ToBuffer,
+  bufferToBase64,
+  base64ToBase64Url,
+  supported,
+} from '~/authentication/webauthn/util';
 
 const encodedString = 'SGVsbG8gd29ybGQh';
 const stringBytes = [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33];
@@ -31,4 +36,28 @@ describe('Webauthn utils', () => {
       expect(base64ToBase64Url(argument)).toBe(expectedResult);
     });
   });
+
+  describe('supported', () => {
+    afterEach(() => {
+      global.navigator.credentials = undefined;
+      window.PublicKeyCredential = undefined;
+    });
+
+    it.each`
+      credentials                    | PublicKeyCredential | expected
+      ${undefined}                   | ${undefined}        | ${false}
+      ${{}}                          | ${undefined}        | ${false}
+      ${{ create: true }}            | ${undefined}        | ${false}
+      ${{ create: true, get: true }} | ${undefined}        | ${false}
+      ${{ create: true, get: true }} | ${true}             | ${true}
+    `(
+      'returns $expected when credentials is $credentials and PublicKeyCredential is $PublicKeyCredential',
+      ({ credentials, PublicKeyCredential, expected }) => {
+        global.navigator.credentials = credentials;
+        window.PublicKeyCredential = PublicKeyCredential;
+
+        expect(supported()).toBe(expected);
+      },
+    );
+  });
 });
diff --git a/spec/frontend/awards_handler_spec.js b/spec/frontend/awards_handler_spec.js
index 1a54b9909ba..35a1603d375 100644
--- a/spec/frontend/awards_handler_spec.js
+++ b/spec/frontend/awards_handler_spec.js
@@ -6,10 +6,8 @@ import { useFakeRequestAnimationFrame } from 'helpers/fake_request_animation_fra
 import loadAwardsHandler from '~/awards_handler';
 
 window.gl = window.gl || {};
-window.gon = window.gon || {};
 
 let awardsHandler = null;
-const urlRoot = gon.relative_url_root;
 
 describe('AwardsHandler', () => {
   useFakeRequestAnimationFrame();
@@ -95,9 +93,6 @@ describe('AwardsHandler', () => {
   });
 
   afterEach(() => {
-    // restore original url root value
-    gon.relative_url_root = urlRoot;
-
     clearEmojiMock();
 
     // Undo what we did to the shared <body>
diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js
index 0a736df7075..d7519f1f80d 100644
--- a/spec/frontend/badges/components/badge_form_spec.js
+++ b/spec/frontend/badges/components/badge_form_spec.js
@@ -43,7 +43,6 @@ describe('BadgeForm component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js
index ee7ccac974a..cbbeb36ff33 100644
--- a/spec/frontend/badges/components/badge_list_row_spec.js
+++ b/spec/frontend/badges/components/badge_list_row_spec.js
@@ -43,7 +43,6 @@ describe('BadgeListRow component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 606b1bc9cce..374b7b50af4 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -38,10 +38,6 @@ describe('BadgeList component', () => {
     wrapper = mount(BadgeList, { store });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('for project badges', () => {
     it('renders a header with the badge count', () => {
       createComponent({
diff --git a/spec/frontend/badges/components/badge_settings_spec.js b/spec/frontend/badges/components/badge_settings_spec.js
index bddb6d3801c..7ad2c99869c 100644
--- a/spec/frontend/badges/components/badge_settings_spec.js
+++ b/spec/frontend/badges/components/badge_settings_spec.js
@@ -32,10 +32,6 @@ describe('BadgeSettings component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays modal if button for deleting a badge is clicked', async () => {
     const button = wrapper.find('[data-testid="delete-badge"]');
 
diff --git a/spec/frontend/badges/components/badge_spec.js b/spec/frontend/badges/components/badge_spec.js
index b468e38f19e..c933c1b5434 100644
--- a/spec/frontend/badges/components/badge_spec.js
+++ b/spec/frontend/badges/components/badge_spec.js
@@ -24,10 +24,6 @@ describe('Badge component', () => {
     wrapper = mount(Badge, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     return createComponent({ ...dummyProps }, '#dummy-element');
   });
diff --git a/spec/frontend/batch_comments/components/diff_file_drafts_spec.js b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js
index c922d6a9809..f667ebc0fcb 100644
--- a/spec/frontend/batch_comments/components/diff_file_drafts_spec.js
+++ b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js
@@ -28,10 +28,6 @@ describe('Batch comments diff file drafts component', () => {
     });
   }
 
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders list of draft notes', () => {
     factory();
 
diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js
index 924d88866ee..159e36c1364 100644
--- a/spec/frontend/batch_comments/components/draft_note_spec.js
+++ b/spec/frontend/batch_comments/components/draft_note_spec.js
@@ -49,10 +49,6 @@ describe('Batch comments draft note component', () => {
     draft = createDraft();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders template', () => {
     createComponent();
     expect(wrapper.findComponent(GlBadge).exists()).toBe(true);
diff --git a/spec/frontend/batch_comments/components/drafts_count_spec.js b/spec/frontend/batch_comments/components/drafts_count_spec.js
index c3a7946c85c..850a7efb4ed 100644
--- a/spec/frontend/batch_comments/components/drafts_count_spec.js
+++ b/spec/frontend/batch_comments/components/drafts_count_spec.js
@@ -15,10 +15,6 @@ describe('Batch comments drafts count component', () => {
     wrapper = mount(DraftsCount, { store });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders count', () => {
     expect(wrapper.text()).toContain('1');
   });
diff --git a/spec/frontend/batch_comments/components/preview_dropdown_spec.js b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
index f86e003ab5f..3a28bf4ade8 100644
--- a/spec/frontend/batch_comments/components/preview_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
@@ -1,7 +1,6 @@
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { GlDisclosureDropdown } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import { visitUrl } from '~/lib/utils/url_utility';
 import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
@@ -46,9 +45,11 @@ function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts =
     },
   });
 
-  wrapper = shallowMount(PreviewDropdown, {
+  wrapper = mount(PreviewDropdown, {
     store,
-    stubs: { GlDisclosureDropdown },
+    stubs: {
+      PreviewItem: true,
+    },
   });
 }
 
@@ -59,12 +60,12 @@ describe('Batch comments preview dropdown', () => {
         viewDiffsFileByFile: true,
         sortedDrafts: [{ id: 1, file_hash: 'hash' }],
       });
-
-      findPreviewItem().vm.$emit('click');
-
+      findPreviewItem().trigger('click');
       await nextTick();
 
       expect(setCurrentFileHash).toHaveBeenCalledWith(expect.anything(), 'hash');
+
+      await nextTick();
       expect(scrollToDraft).toHaveBeenCalledWith(
         expect.anything(),
         expect.objectContaining({ id: 1, file_hash: 'hash' }),
@@ -77,7 +78,7 @@ describe('Batch comments preview dropdown', () => {
         sortedDrafts: [{ id: 1 }],
       });
 
-      findPreviewItem().vm.$emit('click');
+      findPreviewItem().trigger('click');
 
       await nextTick();
 
@@ -93,7 +94,7 @@ describe('Batch comments preview dropdown', () => {
         sortedDrafts: [{ id: 1, position: { head_sha: '1234' } }],
       });
 
-      findPreviewItem().vm.$emit('click');
+      findPreviewItem().trigger('click');
 
       await nextTick();
 
diff --git a/spec/frontend/batch_comments/components/preview_item_spec.js b/spec/frontend/batch_comments/components/preview_item_spec.js
index 6a99294f855..a19a72af813 100644
--- a/spec/frontend/batch_comments/components/preview_item_spec.js
+++ b/spec/frontend/batch_comments/components/preview_item_spec.js
@@ -26,10 +26,6 @@ describe('Batch comments draft preview item component', () => {
     wrapper = mount(PreviewItem, { store, propsData: { draft, isLast } });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders text content', () => {
     createComponent(false, { note_html: '<img src="" /><p>Hello world</p>' });
 
diff --git a/spec/frontend/batch_comments/components/review_bar_spec.js b/spec/frontend/batch_comments/components/review_bar_spec.js
index 0a4c9ff62e4..923e86a7e64 100644
--- a/spec/frontend/batch_comments/components/review_bar_spec.js
+++ b/spec/frontend/batch_comments/components/review_bar_spec.js
@@ -20,10 +20,6 @@ describe('Batch comments review bar component', () => {
     document.body.className = '';
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('adds review-bar-visible class to body when review bar is mounted', async () => {
     expect(document.body.classList.contains(REVIEW_BAR_VISIBLE_CLASS_NAME)).toBe(false);
 
diff --git a/spec/frontend/batch_comments/components/submit_dropdown_spec.js b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
index 003a6d86371..ac6198ec8b5 100644
--- a/spec/frontend/batch_comments/components/submit_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
@@ -47,7 +47,6 @@ const findForm = () => wrapper.findByTestId('submit-gl-form');
 
 describe('Batch comments submit dropdown', () => {
   afterEach(() => {
-    wrapper.destroy();
     window.mrTabs = null;
   });
 
diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
index 20eedcbb25b..57bafb51cd6 100644
--- a/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
+++ b/spec/frontend/batch_comments/stores/modules/batch_comments/actions_spec.js
@@ -317,4 +317,10 @@ describe('Batch comments store actions', () => {
       expect(window.mrTabs.tabShown).toHaveBeenCalledWith('diffs');
     });
   });
+
+  describe('clearDrafts', () => {
+    it('commits CLEAR_DRAFTS', () => {
+      return testAction(actions.clearDrafts, null, null, [{ type: 'CLEAR_DRAFTS' }], []);
+    });
+  });
 });
diff --git a/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js b/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js
index fe01de638c2..ad6a1a38164 100644
--- a/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js
+++ b/spec/frontend/batch_comments/stores/modules/batch_comments/mutations_spec.js
@@ -104,4 +104,14 @@ describe('Batch comments mutations', () => {
       ]);
     });
   });
+
+  describe(types.CLEAR_DRAFTS, () => {
+    it('clears drafts array', () => {
+      state.drafts.push({ id: 1 });
+
+      mutations[types.CLEAR_DRAFTS](state);
+
+      expect(state.drafts).toEqual([]);
+    });
+  });
 });
diff --git a/spec/frontend/behaviors/components/diagram_performance_warning_spec.js b/spec/frontend/behaviors/components/diagram_performance_warning_spec.js
index c58c2bc55a9..7e6b20da4d4 100644
--- a/spec/frontend/behaviors/components/diagram_performance_warning_spec.js
+++ b/spec/frontend/behaviors/components/diagram_performance_warning_spec.js
@@ -11,10 +11,6 @@ describe('DiagramPerformanceWarning component', () => {
     wrapper = shallowMount(DiagramPerformanceWarning);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders warning alert with button', () => {
     expect(findAlert().props()).toMatchObject({
       primaryButtonText: DiagramPerformanceWarning.i18n.buttonText,
diff --git a/spec/frontend/behaviors/components/json_table_spec.js b/spec/frontend/behaviors/components/json_table_spec.js
index 42b4a051d4d..a82310873ed 100644
--- a/spec/frontend/behaviors/components/json_table_spec.js
+++ b/spec/frontend/behaviors/components/json_table_spec.js
@@ -59,10 +59,6 @@ describe('behaviors/components/json_table', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTable = () => wrapper.findComponent(GlTable);
   const findTableCaption = () => wrapper.findByTestId('slot-table-caption');
   const findFilterInput = () => wrapper.findComponent(GlFormInput);
diff --git a/spec/frontend/behaviors/copy_to_clipboard_spec.js b/spec/frontend/behaviors/copy_to_clipboard_spec.js
index c5beaa0ba5d..74a396eb8cb 100644
--- a/spec/frontend/behaviors/copy_to_clipboard_spec.js
+++ b/spec/frontend/behaviors/copy_to_clipboard_spec.js
@@ -31,7 +31,7 @@ describe('initCopyToClipboard', () => {
   const defaultButtonAttributes = {
     'data-clipboard-text': 'foo bar',
     title,
-    'data-title': title,
+    'data-original-title': title,
   };
   const createButton = (attributes = {}) => {
     const combinedAttributes = { ...defaultButtonAttributes, ...attributes };
diff --git a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
index 38d19ac3808..ad70efdf7c3 100644
--- a/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
+++ b/spec/frontend/behaviors/markdown/highlight_current_user_spec.js
@@ -22,14 +22,9 @@ describe('highlightCurrentUser', () => {
 
   describe('without current user', () => {
     beforeEach(() => {
-      window.gon = window.gon || {};
       window.gon.current_user_id = null;
     });
 
-    afterEach(() => {
-      delete window.gon.current_user_id;
-    });
-
     it('does not highlight the user', () => {
       const initialHtml = rootElement.outerHTML;
 
@@ -41,14 +36,9 @@ describe('highlightCurrentUser', () => {
 
   describe('with current user', () => {
     beforeEach(() => {
-      window.gon = window.gon || {};
       window.gon.current_user_id = 2;
     });
 
-    afterEach(() => {
-      delete window.gon.current_user_id;
-    });
-
     it('highlights current user', () => {
       highlightCurrentUser(elements);
 
diff --git a/spec/frontend/behaviors/markdown/render_observability_spec.js b/spec/frontend/behaviors/markdown/render_observability_spec.js
index c87d11742dc..f464c01ac15 100644
--- a/spec/frontend/behaviors/markdown/render_observability_spec.js
+++ b/spec/frontend/behaviors/markdown/render_observability_spec.js
@@ -1,38 +1,43 @@
+import Vue from 'vue';
+import { createWrapper } from '@vue/test-utils';
 import renderObservability from '~/behaviors/markdown/render_observability';
-import * as ColorUtils from '~/lib/utils/color_utils';
+import { INLINE_EMBED_DIMENSIONS, SKELETON_VARIANT_EMBED } from '~/observability/constants';
+import ObservabilityApp from '~/observability/components/observability_app.vue';
 
-describe('Observability iframe renderer', () => {
-  const findObservabilityIframes = (theme = 'light') =>
-    document.querySelectorAll(`iframe[src="https://observe.gitlab.com/?theme=${theme}&kiosk"]`);
-
-  const renderEmbeddedObservability = () => {
-    renderObservability([...document.querySelectorAll('.js-render-observability')]);
-    jest.runAllTimers();
-  };
+describe('renderObservability', () => {
+  let subject;
 
   beforeEach(() => {
-    document.body.dataset.page = '';
-    document.body.innerHTML = '';
+    subject = document.createElement('div');
+    subject.classList.add('js-render-observability');
+    subject.dataset.frameUrl = 'https://observe.gitlab.com/';
+    document.body.appendChild(subject);
   });
 
-  it('renders an observability iframe', () => {
-    document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`;
-
-    expect(findObservabilityIframes()).toHaveLength(0);
-
-    renderEmbeddedObservability();
-
-    expect(findObservabilityIframes()).toHaveLength(1);
+  afterEach(() => {
+    subject.remove();
   });
 
-  it('renders iframe with dark param when GL has dark theme', () => {
-    document.body.innerHTML = `<div class="js-render-observability" data-frame-url="https://observe.gitlab.com/"></div>`;
-    jest.spyOn(ColorUtils, 'darkModeEnabled').mockImplementation(() => true);
+  it('should return an array of Vue instances', () => {
+    const vueInstances = renderObservability([
+      ...document.querySelectorAll('.js-render-observability'),
+    ]);
+    expect(vueInstances).toEqual([expect.any(Vue)]);
+  });
 
-    expect(findObservabilityIframes('dark')).toHaveLength(0);
+  it('should correctly pass props to the ObservabilityApp component', () => {
+    const vueInstances = renderObservability([
+      ...document.querySelectorAll('.js-render-observability'),
+    ]);
 
-    renderEmbeddedObservability();
+    const wrapper = createWrapper(vueInstances[0]);
 
-    expect(findObservabilityIframes('dark')).toHaveLength(1);
+    expect(wrapper.findComponent(ObservabilityApp).props()).toMatchObject({
+      observabilityIframeSrc: 'https://observe.gitlab.com/',
+      skeletonVariant: SKELETON_VARIANT_EMBED,
+      inlineEmbed: true,
+      height: INLINE_EMBED_DIMENSIONS.HEIGHT,
+      width: INLINE_EMBED_DIMENSIONS.WIDTH,
+    });
   });
 });
diff --git a/spec/frontend/blame/blame_redirect_spec.js b/spec/frontend/blame/blame_redirect_spec.js
index beb10139b3a..326f60a5b13 100644
--- a/spec/frontend/blame/blame_redirect_spec.js
+++ b/spec/frontend/blame/blame_redirect_spec.js
@@ -1,8 +1,8 @@
 import redirectToCorrectPage from '~/blame/blame_redirect';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Blame page redirect', () => {
   beforeEach(() => {
diff --git a/spec/frontend/blame/streaming/index_spec.js b/spec/frontend/blame/streaming/index_spec.js
new file mode 100644
index 00000000000..e048ce3f70e
--- /dev/null
+++ b/spec/frontend/blame/streaming/index_spec.js
@@ -0,0 +1,110 @@
+import waitForPromises from 'helpers/wait_for_promises';
+import { renderBlamePageStreams } from '~/blame/streaming';
+import { setHTMLFixture } from 'helpers/fixtures';
+import { renderHtmlStreams } from '~/streaming/render_html_streams';
+import { rateLimitStreamRequests } from '~/streaming/rate_limit_stream_requests';
+import { handleStreamedAnchorLink } from '~/streaming/handle_streamed_anchor_link';
+import { toPolyfillReadable } from '~/streaming/polyfills';
+import { createAlert } from '~/alert';
+
+jest.mock('~/streaming/render_html_streams');
+jest.mock('~/streaming/rate_limit_stream_requests');
+jest.mock('~/streaming/handle_streamed_anchor_link');
+jest.mock('~/streaming/polyfills');
+jest.mock('~/sentry');
+jest.mock('~/alert');
+
+global.fetch = jest.fn();
+
+describe('renderBlamePageStreams', () => {
+  let stopAnchor;
+  const PAGES_URL = 'https://example.com/';
+  const findStreamContainer = () => document.querySelector('#blame-stream-container');
+  const findStreamLoadingIndicator = () => document.querySelector('#blame-stream-loading');
+
+  const setupHtml = (totalExtraPages = 0) => {
+    setHTMLFixture(`
+      <div id="blob-content-holder"
+        data-total-extra-pages="${totalExtraPages}"
+        data-pages-url="${PAGES_URL}"
+      ></div>
+      <div id="blame-stream-container"></div>
+      <div id="blame-stream-loading"></div>
+    `);
+  };
+
+  handleStreamedAnchorLink.mockImplementation(() => stopAnchor);
+  rateLimitStreamRequests.mockImplementation(({ factory, total }) => {
+    return Array.from({ length: total }, (_, i) => {
+      return Promise.resolve(factory(i));
+    });
+  });
+  toPolyfillReadable.mockImplementation((obj) => obj);
+
+  beforeEach(() => {
+    stopAnchor = jest.fn();
+    fetch.mockClear();
+  });
+
+  it('does nothing for an empty page', async () => {
+    await renderBlamePageStreams();
+
+    expect(handleStreamedAnchorLink).not.toHaveBeenCalled();
+    expect(renderHtmlStreams).not.toHaveBeenCalled();
+  });
+
+  it('renders a single stream', async () => {
+    let res;
+    const stream = new Promise((resolve) => {
+      res = resolve;
+    });
+    renderHtmlStreams.mockImplementationOnce(() => stream);
+    setupHtml();
+
+    renderBlamePageStreams(stream);
+
+    expect(handleStreamedAnchorLink).toHaveBeenCalledTimes(1);
+    expect(stopAnchor).toHaveBeenCalledTimes(0);
+    expect(renderHtmlStreams).toHaveBeenCalledWith([stream], findStreamContainer());
+    expect(findStreamLoadingIndicator()).not.toBe(null);
+
+    res();
+    await waitForPromises();
+
+    expect(stopAnchor).toHaveBeenCalledTimes(1);
+    expect(findStreamLoadingIndicator()).toBe(null);
+  });
+
+  it('renders rest of the streams', async () => {
+    const stream = Promise.resolve();
+    const stream2 = Promise.resolve({ body: null });
+    fetch.mockImplementationOnce(() => stream2);
+    setupHtml(1);
+
+    await renderBlamePageStreams(stream);
+
+    expect(fetch.mock.calls[0][0].toString()).toBe(`${PAGES_URL}?page=3`);
+    expect(renderHtmlStreams).toHaveBeenCalledWith([stream, stream2], findStreamContainer());
+  });
+
+  it('shows an error message when failed', async () => {
+    const stream = Promise.resolve();
+    const error = new Error();
+    renderHtmlStreams.mockImplementationOnce(() => Promise.reject(error));
+    setupHtml();
+
+    try {
+      await renderBlamePageStreams(stream);
+    } catch (err) {
+      expect(err).toBe(error);
+    }
+
+    expect(createAlert).toHaveBeenCalledWith({
+      message: 'Blame could not be loaded as a single page.',
+      primaryButton: {
+        text: 'View blame as separate pages',
+        clickHandler: expect.any(Function),
+      },
+    });
+  });
+});
diff --git a/spec/frontend/blob/components/blob_content_error_spec.js b/spec/frontend/blob/components/blob_content_error_spec.js
index 0f5885c2acf..203fab94a5c 100644
--- a/spec/frontend/blob/components/blob_content_error_spec.js
+++ b/spec/frontend/blob/components/blob_content_error_spec.js
@@ -18,10 +18,6 @@ describe('Blob Content Error component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('collapsed and too large blobs', () => {
     it.each`
       error                                   | reason                           | options
diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js
index f7b819b6e94..91af5f7bfed 100644
--- a/spec/frontend/blob/components/blob_content_spec.js
+++ b/spec/frontend/blob/components/blob_content_spec.js
@@ -29,10 +29,6 @@ describe('Blob Content component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     it('renders loader if `loading: true`', () => {
       createComponent({ loading: true });
diff --git a/spec/frontend/blob/components/blob_edit_header_spec.js b/spec/frontend/blob/components/blob_edit_header_spec.js
index c84b5896348..2b1bd1ac4ad 100644
--- a/spec/frontend/blob/components/blob_edit_header_spec.js
+++ b/spec/frontend/blob/components/blob_edit_header_spec.js
@@ -22,10 +22,6 @@ describe('Blob Header Editing', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     it('matches the snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/blob/components/blob_header_default_actions_spec.js b/spec/frontend/blob/components/blob_header_default_actions_spec.js
index 0f015715dc2..e12021a48d2 100644
--- a/spec/frontend/blob/components/blob_header_default_actions_spec.js
+++ b/spec/frontend/blob/components/blob_header_default_actions_spec.js
@@ -34,10 +34,6 @@ describe('Blob Header Default Actions', () => {
     buttons = wrapper.findAllComponents(GlButton);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('renders', () => {
     const findCopyButton = () => wrapper.findByTestId('copyContentsButton');
     const findViewRawButton = () => wrapper.findByTestId('viewRawButton');
diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js
index 8c32cba1ba4..be49146ff8a 100644
--- a/spec/frontend/blob/components/blob_header_filepath_spec.js
+++ b/spec/frontend/blob/components/blob_header_filepath_spec.js
@@ -21,10 +21,6 @@ describe('Blob Header Filepath', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findBadge = () => wrapper.findComponent(GlBadge);
 
   describe('rendering', () => {
diff --git a/spec/frontend/blob/components/blob_header_spec.js b/spec/frontend/blob/components/blob_header_spec.js
index 46740958090..47e09bb38bc 100644
--- a/spec/frontend/blob/components/blob_header_spec.js
+++ b/spec/frontend/blob/components/blob_header_spec.js
@@ -1,9 +1,14 @@
 import { shallowMount, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
 import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
 import ViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
+import {
+  RICH_BLOB_VIEWER_TITLE,
+  SIMPLE_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER_TITLE,
+} from '~/blob/components/constants';
 import TableContents from '~/blob/components/table_contents.vue';
 
 import { Blob } from './mock_data';
@@ -11,12 +16,26 @@ import { Blob } from './mock_data';
 describe('Blob Header Default Actions', () => {
   let wrapper;
 
-  function createComponent(blobProps = {}, options = {}, propsData = {}, shouldMount = false) {
-    const method = shouldMount ? mount : shallowMount;
-    const blobHash = 'foo-bar';
-    wrapper = method.call(this, BlobHeader, {
+  const defaultProvide = {
+    blobHash: 'foo-bar',
+  };
+
+  const findDefaultActions = () => wrapper.findComponent(DefaultActions);
+  const findTableContents = () => wrapper.findComponent(TableContents);
+  const findViewSwitcher = () => wrapper.findComponent(ViewerSwitcher);
+  const findBlobFilePath = () => wrapper.findComponent(BlobFilepath);
+  const findRichTextEditorBtn = () => wrapper.findByLabelText(RICH_BLOB_VIEWER_TITLE);
+  const findSimpleTextEditorBtn = () => wrapper.findByLabelText(SIMPLE_BLOB_VIEWER_TITLE);
+
+  function createComponent({
+    blobProps = {},
+    options = {},
+    propsData = {},
+    mountFn = shallowMount,
+  } = {}) {
+    wrapper = mountFn(BlobHeader, {
       provide: {
-        blobHash,
+        ...defaultProvide,
       },
       propsData: {
         blob: { ...Blob, ...blobProps },
@@ -26,143 +45,123 @@ describe('Blob Header Default Actions', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
-    const findDefaultActions = () => wrapper.findComponent(DefaultActions);
-
-    const slots = {
-      prepend: 'Foo Prepend',
-      actions: 'Actions Bar',
-    };
-
     it('matches the snapshot', () => {
       createComponent();
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('renders all components', () => {
-      createComponent();
-      expect(wrapper.findComponent(TableContents).exists()).toBe(true);
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(true);
-      expect(findDefaultActions().exists()).toBe(true);
-      expect(wrapper.findComponent(BlobFilepath).exists()).toBe(true);
+    describe('default render', () => {
+      it.each`
+        findComponent         | componentName
+        ${findTableContents}  | ${'TableContents'}
+        ${findViewSwitcher}   | ${'ViewSwitcher'}
+        ${findDefaultActions} | ${'DefaultActions'}
+        ${findBlobFilePath}   | ${'BlobFilePath'}
+      `('renders $componentName component by default', ({ findComponent }) => {
+        createComponent();
+
+        expect(findComponent().exists()).toBe(true);
+      });
     });
 
     it('does not render viewer switcher if the blob has only the simple viewer', () => {
       createComponent({
-        richViewer: null,
+        blobProps: {
+          richViewer: null,
+        },
       });
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(false);
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('does not render viewer switcher if a corresponding prop is passed', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hideViewerSwitcher: true,
         },
-      );
-      expect(wrapper.findComponent(ViewerSwitcher).exists()).toBe(false);
+      });
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('does not render default actions is corresponding prop is passed', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hideDefaultActions: true,
         },
-      );
-      expect(wrapper.findComponent(DefaultActions).exists()).toBe(false);
+      });
+      expect(findDefaultActions().exists()).toBe(false);
     });
 
-    Object.keys(slots).forEach((slot) => {
-      it('renders the slots', () => {
-        const slotContent = slots[slot];
-        createComponent(
-          {},
-          {
-            scopedSlots: {
-              [slot]: `<span>${slotContent}</span>`,
-            },
+    it.each`
+      slotContent      | key
+      ${'Foo Prepend'} | ${'prepend'}
+      ${'Actions Bar'} | ${'actions'}
+    `('renders the slot $key', ({ key, slotContent }) => {
+      createComponent({
+        options: {
+          scopedSlots: {
+            [key]: `<span>${slotContent}</span>`,
           },
-          {},
-          true,
-        );
-        expect(wrapper.text()).toContain(slotContent);
+        },
+        mountFn: mount,
       });
+      expect(wrapper.text()).toContain(slotContent);
     });
 
     it('passes information about render error down to default actions', () => {
-      createComponent(
-        {},
-        {},
-        {
+      createComponent({
+        propsData: {
           hasRenderError: true,
         },
-      );
+      });
       expect(findDefaultActions().props('hasRenderError')).toBe(true);
     });
 
     it('passes the correct isBinary value to default actions when viewing a binary file', () => {
-      createComponent({}, {}, { isBinary: true });
+      createComponent({ propsData: { isBinary: true } });
 
       expect(findDefaultActions().props('isBinary')).toBe(true);
     });
   });
 
   describe('functionality', () => {
-    const newViewer = 'Foo Bar';
-    const activeViewerType = 'Alpha Beta';
-
     const factory = (hideViewerSwitcher = false) => {
-      createComponent(
-        {},
-        {},
-        {
-          activeViewerType,
+      createComponent({
+        propsData: {
+          activeViewerType: SIMPLE_BLOB_VIEWER,
           hideViewerSwitcher,
         },
-      );
+        mountFn: mountExtended,
+      });
     };
 
-    it('by default sets viewer data based on activeViewerType', () => {
+    it('shows the correctly selected view by default', () => {
       factory();
-      expect(wrapper.vm.viewer).toBe(activeViewerType);
+
+      expect(findViewSwitcher().exists()).toBe(true);
+      expect(findRichTextEditorBtn().props().selected).toBe(false);
+      expect(findSimpleTextEditorBtn().props().selected).toBe(true);
     });
 
-    it('sets viewer to null if the viewer switcher should be hidden', () => {
+    it('Does not show the viewer switcher should be hidden', () => {
       factory(true);
-      expect(wrapper.vm.viewer).toBe(null);
+
+      expect(findViewSwitcher().exists()).toBe(false);
     });
 
     it('watches the changes in viewer data and emits event when the change is registered', async () => {
       factory();
-      jest.spyOn(wrapper.vm, '$emit');
-      wrapper.vm.viewer = newViewer;
 
-      await nextTick();
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('viewer-changed', newViewer);
-    });
-
-    it('does not emit event if the switcher is not rendered', async () => {
-      factory(true);
-
-      expect(wrapper.vm.showViewerSwitcher).toBe(false);
-      jest.spyOn(wrapper.vm, '$emit');
-      wrapper.vm.viewer = newViewer;
+      await findRichTextEditorBtn().trigger('click');
 
-      await nextTick();
-      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+      expect(wrapper.emitted('viewer-changed')).toBeDefined();
     });
 
     it('sets different icons depending on the blob file type', async () => {
       factory();
-      expect(wrapper.vm.blobSwitcherDocIcon).toBe('document');
+
+      expect(findViewSwitcher().props('docIcon')).toBe('document');
+
       await wrapper.setProps({
         blob: {
           ...Blob,
@@ -172,7 +171,8 @@ describe('Blob Header Default Actions', () => {
           },
         },
       });
-      expect(wrapper.vm.blobSwitcherDocIcon).toBe('table');
+
+      expect(findViewSwitcher().props('docIcon')).toBe('table');
     });
   });
 });
diff --git a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
index 1eac0733646..2ef87f6664b 100644
--- a/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
+++ b/spec/frontend/blob/components/blob_header_viewer_switcher_spec.js
@@ -18,14 +18,14 @@ describe('Blob Header Viewer Switcher', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findSimpleViewerButton = () => wrapper.findComponent('[data-viewer="simple"]');
+  const findRichViewerButton = () => wrapper.findComponent('[data-viewer="rich"]');
 
   describe('intiialization', () => {
     it('is initialized with simple viewer as active', () => {
       createComponent();
-      expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
+      expect(findSimpleViewerButton().props('selected')).toBe(true);
+      expect(findRichViewerButton().props('selected')).toBe(false);
     });
   });
 
@@ -52,45 +52,34 @@ describe('Blob Header Viewer Switcher', () => {
   });
 
   describe('viewer changes', () => {
-    let buttons;
-    let simpleBtn;
-    let richBtn;
+    it('does not switch the viewer if the selected one is already active', async () => {
+      createComponent();
+      expect(findSimpleViewerButton().props('selected')).toBe(true);
 
-    function factory(propsData = {}) {
-      createComponent(propsData);
-      buttons = wrapper.findAllComponents(GlButton);
-      simpleBtn = buttons.at(0);
-      richBtn = buttons.at(1);
-
-      jest.spyOn(wrapper.vm, '$emit');
-    }
-
-    it('does not switch the viewer if the selected one is already active', () => {
-      factory();
-      expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
-      simpleBtn.vm.$emit('click');
-      expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
-      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+      findSimpleViewerButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findSimpleViewerButton().props('selected')).toBe(true);
+      expect(wrapper.emitted('input')).toBe(undefined);
     });
 
     it('emits an event when a Rich Viewer button is clicked', async () => {
-      factory();
-      expect(wrapper.vm.value).toBe(SIMPLE_BLOB_VIEWER);
-
-      richBtn.vm.$emit('click');
+      createComponent();
+      expect(findSimpleViewerButton().props('selected')).toBe(true);
 
+      findRichViewerButton().vm.$emit('click');
       await nextTick();
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', RICH_BLOB_VIEWER);
+
+      expect(wrapper.emitted('input')).toEqual([[RICH_BLOB_VIEWER]]);
     });
 
     it('emits an event when a Simple Viewer button is clicked', async () => {
-      factory({
-        value: RICH_BLOB_VIEWER,
-      });
-      simpleBtn.vm.$emit('click');
+      createComponent({ value: RICH_BLOB_VIEWER });
 
+      findSimpleViewerButton().vm.$emit('click');
       await nextTick();
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', SIMPLE_BLOB_VIEWER);
+
+      expect(wrapper.emitted('input')).toEqual([[SIMPLE_BLOB_VIEWER]]);
     });
   });
 });
diff --git a/spec/frontend/blob/components/table_contents_spec.js b/spec/frontend/blob/components/table_contents_spec.js
index 6af9cdcae7d..acfcef9704c 100644
--- a/spec/frontend/blob/components/table_contents_spec.js
+++ b/spec/frontend/blob/components/table_contents_spec.js
@@ -31,7 +31,6 @@ describe('Markdown table of contents component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/blob/csv/csv_viewer_spec.js b/spec/frontend/blob/csv/csv_viewer_spec.js
index 9364f76da5e..8f105f04aa7 100644
--- a/spec/frontend/blob/csv/csv_viewer_spec.js
+++ b/spec/frontend/blob/csv/csv_viewer_spec.js
@@ -29,10 +29,6 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAlert = () => wrapper.findComponent(PapaParseAlert);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render loading spinner', () => {
     createComponent();
 
diff --git a/spec/frontend/blob/notebook/notebook_viever_spec.js b/spec/frontend/blob/notebook/notebook_viever_spec.js
index 2e7eadc912d..97b32a42afe 100644
--- a/spec/frontend/blob/notebook/notebook_viever_spec.js
+++ b/spec/frontend/blob/notebook/notebook_viever_spec.js
@@ -42,8 +42,6 @@ describe('iPython notebook renderer', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mock.restore();
   });
 
diff --git a/spec/frontend/blob/pdf/pdf_viewer_spec.js b/spec/frontend/blob/pdf/pdf_viewer_spec.js
index 23227df6357..19d404f504b 100644
--- a/spec/frontend/blob/pdf/pdf_viewer_spec.js
+++ b/spec/frontend/blob/pdf/pdf_viewer_spec.js
@@ -26,11 +26,6 @@ describe('PDF renderer', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('shows loading icon', () => {
     expect(findLoading().exists()).toBe(true);
   });
diff --git a/spec/frontend/blob/pipeline_tour_success_modal_spec.js b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
index 81b38cfc278..84efa6041e4 100644
--- a/spec/frontend/blob/pipeline_tour_success_modal_spec.js
+++ b/spec/frontend/blob/pipeline_tour_success_modal_spec.js
@@ -38,7 +38,6 @@ describe('PipelineTourSuccessModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     unmockTracking();
     Cookies.remove(modalProps.commitCookie);
   });
diff --git a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
index 6b329dc078a..b30b0287a34 100644
--- a/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
+++ b/spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js
@@ -36,11 +36,6 @@ describe('Suggest gitlab-ci.yml Popover', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when no dismiss cookie is set', () => {
     beforeEach(() => {
       createWrapper(defaultTrackLabel);
diff --git a/spec/frontend/blob_edit/blob_bundle_spec.js b/spec/frontend/blob_edit/blob_bundle_spec.js
index ed42322b0e6..89d507b4ec5 100644
--- a/spec/frontend/blob_edit/blob_bundle_spec.js
+++ b/spec/frontend/blob_edit/blob_bundle_spec.js
@@ -5,10 +5,10 @@ import waitForPromises from 'helpers/wait_for_promises';
 import blobBundle from '~/blob_edit/blob_bundle';
 
 import SourceEditor from '~/blob_edit/edit_blob';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 jest.mock('~/blob_edit/edit_blob');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('BlobBundle', () => {
   it('does not load SourceEditor by default', () => {
diff --git a/spec/frontend/blob_edit/edit_blob_spec.js b/spec/frontend/blob_edit/edit_blob_spec.js
index dda46e97b85..9ab20fc2cd7 100644
--- a/spec/frontend/blob_edit/edit_blob_spec.js
+++ b/spec/frontend/blob_edit/edit_blob_spec.js
@@ -20,9 +20,9 @@ jest.mock('~/editor/extensions/source_editor_toolbar_ext');
 
 const PREVIEW_MARKDOWN_PATH = '/foo/bar/preview_markdown';
 const defaultExtensions = [
+  { definition: ToolbarExtension },
   { definition: SourceEditorExtension },
   { definition: FileTemplateExtension },
-  { definition: ToolbarExtension },
 ];
 const markdownExtensions = [
   { definition: EditorMarkdownExtension },
diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js
index 1e823e3321a..a612e863d46 100644
--- a/spec/frontend/boards/board_card_inner_spec.js
+++ b/spec/frontend/boards/board_card_inner_spec.js
@@ -84,7 +84,7 @@ describe('Board card component', () => {
         BoardCardMoveToPosition: true,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       provide: {
         rootPath: '/',
@@ -110,8 +110,6 @@ describe('Board card component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     store = null;
     jest.clearAllMocks();
   });
@@ -314,10 +312,6 @@ describe('Board card component', () => {
         });
       });
 
-      afterEach(() => {
-        global.gon.default_avatar_url = null;
-      });
-
       it('displays defaults avatar if users avatar is null', () => {
         expect(wrapper.find('.board-card-assignee img').exists()).toBe(true);
         expect(wrapper.find('.board-card-assignee img').attributes('src')).toBe(
diff --git a/spec/frontend/boards/board_list_helper.js b/spec/frontend/boards/board_list_helper.js
index d882ff071b7..43cf6ead1c1 100644
--- a/spec/frontend/boards/board_list_helper.js
+++ b/spec/frontend/boards/board_list_helper.js
@@ -92,6 +92,7 @@ export default function createComponent({
       boardItems: [issue],
       canAdminList: true,
       boardId: 'gid://gitlab/Board/1',
+      filterParams: {},
       ...componentProps,
     },
     provide: {
diff --git a/spec/frontend/boards/board_list_spec.js b/spec/frontend/boards/board_list_spec.js
index fc8dbf8dc3a..9ec43c6e892 100644
--- a/spec/frontend/boards/board_list_spec.js
+++ b/spec/frontend/boards/board_list_spec.js
@@ -36,10 +36,6 @@ describe('Board list component', () => {
 
   useFakeRequestAnimationFrame();
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('When Expanded', () => {
     beforeEach(() => {
       wrapper = createComponent({ issuesCount: 1 });
diff --git a/spec/frontend/boards/components/board_add_new_column_form_spec.js b/spec/frontend/boards/components/board_add_new_column_form_spec.js
index 0b3c6cb24c4..4fc9a6859a6 100644
--- a/spec/frontend/boards/components/board_add_new_column_form_spec.js
+++ b/spec/frontend/boards/components/board_add_new_column_form_spec.js
@@ -1,15 +1,13 @@
-import { GlDropdown, GlFormGroup, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
 import defaultState from '~/boards/stores/state';
 import { mockLabelList } from '../mock_data';
 
 Vue.use(Vuex);
 
-describe('Board card layout', () => {
+describe('BoardAddNewColumnForm', () => {
   let wrapper;
 
   const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
@@ -23,56 +21,30 @@ describe('Board card layout', () => {
     });
   };
 
-  const mountComponent = ({
-    loading = false,
-    noneSelected = '',
-    searchLabel = '',
-    searchPlaceholder = '',
-    selectedId,
-    actions,
-    slots,
-  } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(BoardAddNewColumnForm, {
-        propsData: {
-          loading,
-          noneSelected,
-          searchLabel,
-          searchPlaceholder,
-          selectedId,
-        },
-        slots,
-        store: createStore({
-          actions: {
-            setAddColumnFormVisibility: jest.fn(),
-            ...actions,
-          },
-        }),
-        stubs: {
-          GlDropdown,
+  const mountComponent = ({ searchLabel = '', selectedIdValid = true, actions, slots } = {}) => {
+    wrapper = shallowMountExtended(BoardAddNewColumnForm, {
+      propsData: {
+        searchLabel,
+        selectedIdValid,
+      },
+      slots,
+      store: createStore({
+        actions: {
+          setAddColumnFormVisibility: jest.fn(),
+          ...actions,
         },
       }),
-    );
+    });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const formTitle = () => wrapper.findByTestId('board-add-column-form-title').text();
-  const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
-  const findSearchLabelFormGroup = () => wrapper.findComponent(GlFormGroup);
   const cancelButton = () => wrapper.findByTestId('cancelAddNewColumn');
   const submitButton = () => wrapper.findByTestId('addNewColumnButton');
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
 
-  it('shows form title & search input', () => {
+  it('shows form title', () => {
     mountComponent();
 
-    findDropdown().vm.$emit('show');
-
     expect(formTitle()).toEqual(BoardAddNewColumnForm.i18n.newList);
-    expect(findSearchInput().exists()).toBe(true);
   });
 
   it('clicking cancel hides the form', () => {
@@ -88,61 +60,6 @@ describe('Board card layout', () => {
     expect(setAddColumnFormVisibility).toHaveBeenCalledWith(expect.anything(), false);
   });
 
-  describe('items', () => {
-    const mountWithItems = (loading) =>
-      mountComponent({
-        loading,
-        slots: {
-          items: '<div class="item-slot">Some kind of list</div>',
-        },
-      });
-
-    it('hides items slot and shows skeleton while loading', () => {
-      mountWithItems(true);
-
-      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
-      expect(wrapper.find('.item-slot').exists()).toBe(false);
-    });
-
-    it('shows items slot and hides skeleton while not loading', () => {
-      mountWithItems(false);
-
-      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
-      expect(wrapper.find('.item-slot').exists()).toBe(true);
-    });
-  });
-
-  describe('search box', () => {
-    it('sets label and placeholder text from props', () => {
-      const props = {
-        searchLabel: 'Some items',
-        searchPlaceholder: 'Search for an item',
-      };
-
-      mountComponent(props);
-
-      expect(findSearchLabelFormGroup().attributes('label')).toEqual(props.searchLabel);
-      expect(findSearchInput().attributes('placeholder')).toEqual(props.searchPlaceholder);
-    });
-
-    it('does not show the dropdown as invalid by default', () => {
-      mountComponent();
-
-      expect(findSearchLabelFormGroup().attributes('state')).toBe('true');
-      expect(findDropdown().props('toggleClass')).not.toContain('gl-inset-border-1-red-400!');
-    });
-
-    it('emits filter event on input', () => {
-      mountComponent();
-
-      const searchText = 'some text';
-
-      findSearchInput().vm.$emit('input', searchText);
-
-      expect(wrapper.emitted('filter-items')).toEqual([[searchText]]);
-    });
-  });
-
   describe('Add list button', () => {
     it('is enabled by default', () => {
       mountComponent();
@@ -159,16 +76,5 @@ describe('Board card layout', () => {
 
       expect(wrapper.emitted('add-list')).toEqual([[]]);
     });
-
-    it('does not emit the add-list event on click and shows the dropdown as invalid when no ID is selected', async () => {
-      mountComponent();
-
-      await submitButton().vm.$emit('click');
-
-      expect(findSearchLabelFormGroup().attributes('state')).toBeUndefined();
-      expect(findDropdown().props('toggleClass')).toContain('gl-inset-border-1-red-400!');
-
-      expect(wrapper.emitted('add-list')).toBeUndefined();
-    });
   });
 });
diff --git a/spec/frontend/boards/components/board_add_new_column_spec.js b/spec/frontend/boards/components/board_add_new_column_spec.js
index a3b2988ce75..a09c3aaa55e 100644
--- a/spec/frontend/boards/components/board_add_new_column_spec.js
+++ b/spec/frontend/boards/components/board_add_new_column_spec.js
@@ -1,8 +1,7 @@
-import { GlFormRadioGroup } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BoardAddNewColumn from '~/boards/components/board_add_new_column.vue';
 import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
 import defaultState from '~/boards/stores/state';
@@ -13,8 +12,9 @@ Vue.use(Vuex);
 describe('Board card layout', () => {
   let wrapper;
 
+  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
   const selectLabel = (id) => {
-    wrapper.findComponent(GlFormRadioGroup).vm.$emit('change', id);
+    findDropdown().vm.$emit('select', id);
   };
 
   const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
@@ -34,33 +34,34 @@ describe('Board card layout', () => {
     getListByLabelId = jest.fn(),
     actions = {},
   } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(BoardAddNewColumn, {
-        data() {
-          return {
-            selectedId,
-          };
+    wrapper = shallowMountExtended(BoardAddNewColumn, {
+      data() {
+        return {
+          selectedId,
+        };
+      },
+      store: createStore({
+        actions: {
+          fetchLabels: jest.fn(),
+          setAddColumnFormVisibility: jest.fn(),
+          ...actions,
         },
-        store: createStore({
-          actions: {
-            fetchLabels: jest.fn(),
-            setAddColumnFormVisibility: jest.fn(),
-            ...actions,
-          },
-          getters: {
-            getListByLabelId: () => getListByLabelId,
-          },
-          state: {
-            labels,
-            labelsLoading: false,
-          },
-        }),
-        provide: {
-          scopedLabelsAvailable: true,
-          isEpicBoard: false,
+        getters: {
+          getListByLabelId: () => getListByLabelId,
+        },
+        state: {
+          labels,
+          labelsLoading: false,
         },
       }),
-    );
+      provide: {
+        scopedLabelsAvailable: true,
+        isEpicBoard: false,
+      },
+      stubs: {
+        GlCollapsibleListbox,
+      },
+    });
 
     // trigger change event
     if (selectedId) {
@@ -68,10 +69,6 @@ describe('Board card layout', () => {
     }
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Add list button', () => {
     it('calls addList', async () => {
       const getListByLabelId = jest.fn().mockReturnValue(null);
diff --git a/spec/frontend/boards/components/board_add_new_column_trigger_spec.js b/spec/frontend/boards/components/board_add_new_column_trigger_spec.js
index 354eb7bff16..d8b93e1f3b6 100644
--- a/spec/frontend/boards/components/board_add_new_column_trigger_spec.js
+++ b/spec/frontend/boards/components/board_add_new_column_trigger_spec.js
@@ -17,7 +17,7 @@ describe('BoardAddNewColumnTrigger', () => {
   const mountComponent = () => {
     wrapper = mountExtended(BoardAddNewColumnTrigger, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       store: createStore(),
     });
@@ -27,10 +27,6 @@ describe('BoardAddNewColumnTrigger', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when button is active', () => {
     it('does not show the tooltip', () => {
       const tooltip = findTooltipText();
diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js
index 12318fb5d16..148e696b57b 100644
--- a/spec/frontend/boards/components/board_app_spec.js
+++ b/spec/frontend/boards/components/board_app_spec.js
@@ -28,13 +28,12 @@ describe('BoardApp', () => {
       store,
       provide: {
         initialBoardId: 'gid://gitlab/Board/1',
+        initialFilterParams: {},
       },
     });
   };
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     store = null;
   });
 
diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js
index 84e6318d98e..46116bed4cf 100644
--- a/spec/frontend/boards/components/board_card_spec.js
+++ b/spec/frontend/boards/components/board_card_spec.js
@@ -82,8 +82,6 @@ describe('Board card', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     store = null;
   });
 
diff --git a/spec/frontend/boards/components/board_column_spec.js b/spec/frontend/boards/components/board_column_spec.js
index c0bb51620f2..011665eee68 100644
--- a/spec/frontend/boards/components/board_column_spec.js
+++ b/spec/frontend/boards/components/board_column_spec.js
@@ -10,11 +10,6 @@ describe('Board Column Component', () => {
   let wrapper;
   let store;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const initStore = () => {
     store = createStore();
   };
@@ -36,6 +31,7 @@ describe('Board Column Component', () => {
       propsData: {
         list: listMock,
         boardId: 'gid://gitlab/Board/1',
+        filters: {},
       },
       provide: {
         isApolloBoard: false,
diff --git a/spec/frontend/boards/components/board_configuration_options_spec.js b/spec/frontend/boards/components/board_configuration_options_spec.js
index 6f0971a9458..d2948daf121 100644
--- a/spec/frontend/boards/components/board_configuration_options_spec.js
+++ b/spec/frontend/boards/components/board_configuration_options_spec.js
@@ -16,10 +16,6 @@ describe('BoardConfigurationOptions', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const backlogListCheckbox = () => wrapper.find('[data-testid="backlog-list-checkbox"]');
   const closedListCheckbox = () => wrapper.find('[data-testid="closed-list-checkbox"]');
 
diff --git a/spec/frontend/boards/components/board_content_sidebar_spec.js b/spec/frontend/boards/components/board_content_sidebar_spec.js
index 955267a415c..90376a4a553 100644
--- a/spec/frontend/boards/components/board_content_sidebar_spec.js
+++ b/spec/frontend/boards/components/board_content_sidebar_spec.js
@@ -89,10 +89,6 @@ describe('BoardContentSidebar', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('confirms we render GlDrawer', () => {
     expect(wrapper.findComponent(GlDrawer).exists()).toBe(true);
   });
diff --git a/spec/frontend/boards/components/board_content_spec.js b/spec/frontend/boards/components/board_content_spec.js
index 97596c86198..33351bf8efd 100644
--- a/spec/frontend/boards/components/board_content_spec.js
+++ b/spec/frontend/boards/components/board_content_spec.js
@@ -4,6 +4,8 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Draggable from 'vuedraggable';
 import Vuex from 'vuex';
+
+import eventHub from '~/boards/eventhub';
 import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
@@ -24,7 +26,6 @@ const actions = {
 describe('BoardContent', () => {
   let wrapper;
   let fakeApollo;
-  window.gon = {};
 
   const defaultState = {
     isShowingEpicsSwimlanes: false,
@@ -61,6 +62,8 @@ describe('BoardContent', () => {
       apolloProvider: fakeApollo,
       propsData: {
         boardId: 'gid://gitlab/Board/1',
+        filterParams: {},
+        isSwimlanesOn: false,
         ...props,
       },
       provide: {
@@ -102,7 +105,6 @@ describe('BoardContent', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -203,5 +205,14 @@ describe('BoardContent', () => {
     it('renders BoardContentSidebar', () => {
       expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(true);
     });
+
+    it('refetches lists when updateBoard event is received', async () => {
+      jest.spyOn(eventHub, '$on').mockImplementation(() => {});
+
+      createComponent({ isApolloBoard: true });
+      await waitForPromises();
+
+      expect(eventHub.$on).toHaveBeenCalledWith('updateBoard', wrapper.vm.refetchLists);
+    });
   });
 });
diff --git a/spec/frontend/boards/components/board_filtered_search_spec.js b/spec/frontend/boards/components/board_filtered_search_spec.js
index 4c0cc36889c..d8bc7f95f18 100644
--- a/spec/frontend/boards/components/board_filtered_search_spec.js
+++ b/spec/frontend/boards/components/board_filtered_search_spec.js
@@ -55,10 +55,10 @@ describe('BoardFilteredSearch', () => {
     },
   ];
 
-  const createComponent = ({ initialFilterParams = {}, props = {} } = {}) => {
+  const createComponent = ({ initialFilterParams = {}, props = {}, provide = {} } = {}) => {
     store = createStore();
     wrapper = shallowMount(BoardFilteredSearch, {
-      provide: { initialFilterParams, fullPath: '' },
+      provide: { initialFilterParams, fullPath: '', isApolloBoard: false, ...provide },
       store,
       propsData: {
         ...props,
@@ -69,10 +69,6 @@ describe('BoardFilteredSearch', () => {
 
   const findFilteredSearch = () => wrapper.findComponent(FilteredSearchBarRoot);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
@@ -191,4 +187,24 @@ describe('BoardFilteredSearch', () => {
       ]);
     });
   });
+
+  describe('when Apollo boards FF is on', () => {
+    beforeEach(() => {
+      createComponent({ provide: { isApolloBoard: true } });
+    });
+
+    it('emits setFilters and updates URL when onFilter is emitted', () => {
+      jest.spyOn(urlUtility, 'updateHistory');
+
+      findFilteredSearch().vm.$emit('onFilter', [{ value: { data: '' } }]);
+
+      expect(urlUtility.updateHistory).toHaveBeenCalledWith({
+        title: '',
+        replace: true,
+        url: 'http://test.host/',
+      });
+
+      expect(wrapper.emitted('setFilters')).toHaveLength(1);
+    });
+  });
 });
diff --git a/spec/frontend/boards/components/board_form_spec.js b/spec/frontend/boards/components/board_form_spec.js
index f8154145d43..62db59f8f57 100644
--- a/spec/frontend/boards/components/board_form_spec.js
+++ b/spec/frontend/boards/components/board_form_spec.js
@@ -10,12 +10,14 @@ import { formType } from '~/boards/constants';
 import createBoardMutation from '~/boards/graphql/board_create.mutation.graphql';
 import destroyBoardMutation from '~/boards/graphql/board_destroy.mutation.graphql';
 import updateBoardMutation from '~/boards/graphql/board_update.mutation.graphql';
+import eventHub from '~/boards/eventhub';
 import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
   visitUrl: jest.fn().mockName('visitUrlMock'),
 }));
+jest.mock('~/boards/eventhub');
 
 Vue.use(Vuex);
 
@@ -59,18 +61,14 @@ describe('BoardForm', () => {
     },
   });
 
-  const createComponent = (props, data) => {
+  const createComponent = (props, provide) => {
     wrapper = shallowMountExtended(BoardForm, {
       propsData: { ...defaultProps, ...props },
-      data() {
-        return {
-          ...data,
-        };
-      },
       provide: {
         boardBaseUrl: 'root',
         isGroupBoard: true,
         isProjectBoard: false,
+        ...provide,
       },
       mocks: {
         $apollo: {
@@ -83,8 +81,6 @@ describe('BoardForm', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mutate = null;
   });
 
@@ -140,7 +136,7 @@ describe('BoardForm', () => {
 
       it('passes correct primary action text and variant', () => {
         expect(findModalActionPrimary().text).toBe('Create board');
-        expect(findModalActionPrimary().attributes[0].variant).toBe('confirm');
+        expect(findModalActionPrimary().attributes.variant).toBe('confirm');
       });
 
       it('does not render delete confirmation message', () => {
@@ -209,6 +205,30 @@ describe('BoardForm', () => {
         expect(setBoardMock).not.toHaveBeenCalled();
         expect(setErrorMock).toHaveBeenCalled();
       });
+
+      describe('when Apollo boards FF is on', () => {
+        it('calls a correct GraphQL mutation and emits addBoard event when creating a board', async () => {
+          createComponent(
+            { canAdminBoard: true, currentPage: formType.new },
+            { isApolloBoard: true },
+          );
+          fillForm();
+
+          await waitForPromises();
+
+          expect(mutate).toHaveBeenCalledWith({
+            mutation: createBoardMutation,
+            variables: {
+              input: expect.objectContaining({
+                name: 'test',
+              }),
+            },
+          });
+
+          await waitForPromises();
+          expect(wrapper.emitted('addBoard')).toHaveLength(1);
+        });
+      });
     });
   });
 
@@ -228,7 +248,7 @@ describe('BoardForm', () => {
 
       it('passes correct primary action text and variant', () => {
         expect(findModalActionPrimary().text).toBe('Save changes');
-        expect(findModalActionPrimary().attributes[0].variant).toBe('confirm');
+        expect(findModalActionPrimary().attributes.variant).toBe('confirm');
       });
 
       it('does not render delete confirmation message', () => {
@@ -308,13 +328,48 @@ describe('BoardForm', () => {
       expect(setBoardMock).not.toHaveBeenCalled();
       expect(setErrorMock).toHaveBeenCalled();
     });
+
+    describe('when Apollo boards FF is on', () => {
+      it('calls a correct GraphQL mutation and emits updateBoard event when updating a board', async () => {
+        mutate = jest.fn().mockResolvedValue({
+          data: {
+            updateBoard: { board: { id: 'gid://gitlab/Board/321', webPath: 'test-path' } },
+          },
+        });
+        setWindowLocation('https://test/boards/1');
+
+        createComponent(
+          { canAdminBoard: true, currentPage: formType.edit },
+          { isApolloBoard: true },
+        );
+        findInput().trigger('keyup.enter', { metaKey: true });
+
+        await waitForPromises();
+
+        expect(mutate).toHaveBeenCalledWith({
+          mutation: updateBoardMutation,
+          variables: {
+            input: expect.objectContaining({
+              id: currentBoard.id,
+            }),
+          },
+        });
+
+        await waitForPromises();
+        expect(eventHub.$emit).toHaveBeenCalledTimes(1);
+        expect(eventHub.$emit).toHaveBeenCalledWith('updateBoard', {
+          id: 'gid://gitlab/Board/321',
+          webPath: 'test-path',
+        });
+      });
+    });
   });
 
   describe('when deleting a board', () => {
     it('passes correct primary action text and variant', () => {
       createComponent({ canAdminBoard: true, currentPage: formType.delete });
       expect(findModalActionPrimary().text).toBe('Delete');
-      expect(findModalActionPrimary().attributes[0].variant).toBe('danger');
+      expect(findModalActionPrimary().attributes.variant).toBe('danger');
     });
 
     it('renders delete confirmation message', () => {
diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index 9e65e900440..466321cf1cc 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -1,10 +1,9 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { boardListQueryResponse, mockLabelList } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
 import { ListType } from '~/boards/constants';
@@ -22,8 +21,6 @@ describe('Board List Header Component', () => {
   const toggleListCollapsedSpy = jest.fn();
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     fakeApollo = null;
 
     localStorage.clear();
@@ -64,31 +61,34 @@ describe('Board List Header Component', () => {
 
     fakeApollo = createMockApollo([[listQuery, listQueryHandler]]);
 
-    wrapper = extendedWrapper(
-      shallowMount(BoardListHeader, {
-        apolloProvider: fakeApollo,
-        store,
-        propsData: {
-          list: listMock,
-        },
-        provide: {
-          boardId,
-          weightFeatureAvailable: false,
-          currentUserId,
-          isEpicBoard: false,
-          disabled: false,
-          ...injectedProps,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(BoardListHeader, {
+      apolloProvider: fakeApollo,
+      store,
+      propsData: {
+        list: listMock,
+        filterParams: {},
+      },
+      provide: {
+        boardId,
+        weightFeatureAvailable: false,
+        currentUserId,
+        isEpicBoard: false,
+        disabled: false,
+        ...injectedProps,
+      },
+      stubs: {
+        GlDisclosureDropdown,
+        GlDisclosureDropdownItem,
+      },
+    });
   };
 
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const isCollapsed = () => wrapper.vm.list.collapsed;
-
-  const findAddIssueButton = () => wrapper.findComponent({ ref: 'newIssueBtn' });
   const findTitle = () => wrapper.find('.board-title');
   const findCaret = () => wrapper.findByTestId('board-title-caret');
-  const findSettingsButton = () => wrapper.findComponent({ ref: 'settingsBtn' });
+  const findNewIssueButton = () => wrapper.findByTestId('newIssueBtn');
+  const findSettingsButton = () => wrapper.findByTestId('settingsBtn');
 
   describe('Add issue button', () => {
     const hasNoAddButton = [ListType.closed];
@@ -100,59 +100,49 @@ describe('Board List Header Component', () => {
       ListType.assignee,
     ];
 
-    it.each(hasNoAddButton)('does not render when List Type is `%s`', (listType) => {
+    it.each(hasNoAddButton)('does not render dropdown when List Type is `%s`', (listType) => {
       createComponent({ listType });
 
-      expect(findAddIssueButton().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
 
     it.each(hasAddButton)('does render when List Type is `%s`', (listType) => {
       createComponent({ listType });
 
-      expect(findAddIssueButton().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(true);
+      expect(findNewIssueButton().exists()).toBe(true);
     });
 
-    it('has a test for each list type', () => {
-      createComponent();
-
-      Object.values(ListType).forEach((value) => {
-        expect([...hasAddButton, ...hasNoAddButton]).toContain(value);
-      });
-    });
-
-    it('does not render when logged out', () => {
+    it('does not render dropdown when logged out', () => {
       createComponent({
         currentUserId: null,
       });
 
-      expect(findAddIssueButton().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
   });
 
   describe('Settings Button', () => {
-    describe('with disabled=true', () => {
-      const hasSettings = [
-        ListType.assignee,
-        ListType.milestone,
-        ListType.iteration,
-        ListType.label,
-      ];
-      const hasNoSettings = [ListType.backlog, ListType.closed];
-
-      it.each(hasSettings)('does render for List Type `%s` when disabled=true', (listType) => {
-        createComponent({ listType, injectedProps: { disabled: true } });
-
-        expect(findSettingsButton().exists()).toBe(true);
-      });
+    const hasSettings = [ListType.assignee, ListType.milestone, ListType.iteration, ListType.label];
 
-      it.each(hasNoSettings)(
-        'does not render for List Type `%s` when disabled=true',
-        (listType) => {
-          createComponent({ listType });
+    it.each(hasSettings)('does render for List Type `%s`', (listType) => {
+      createComponent({ listType });
 
-          expect(findSettingsButton().exists()).toBe(false);
-        },
-      );
+      expect(findDropdown().exists()).toBe(true);
+      expect(findSettingsButton().exists()).toBe(true);
+    });
+
+    it('does not render dropdown when ListType `closed`', () => {
+      createComponent({ listType: ListType.closed });
+
+      expect(findDropdown().exists()).toBe(false);
+    });
+
+    it('renders dropdown but not the Settings button when ListType `backlog`', () => {
+      createComponent({ listType: ListType.backlog });
+
+      expect(findDropdown().exists()).toBe(true);
+      expect(findSettingsButton().exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/boards/components/board_new_issue_spec.js b/spec/frontend/boards/components/board_new_issue_spec.js
index c3e69ba0e40..651d1daee52 100644
--- a/spec/frontend/boards/components/board_new_issue_spec.js
+++ b/spec/frontend/boards/components/board_new_issue_spec.js
@@ -51,10 +51,6 @@ describe('Issue boards new issue form', () => {
     await nextTick();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders board-new-item component', () => {
     const boardNewItem = findBoardNewItem();
     expect(boardNewItem.exists()).toBe(true);
diff --git a/spec/frontend/boards/components/board_new_item_spec.js b/spec/frontend/boards/components/board_new_item_spec.js
index f4e9901aad2..f11eb2baca7 100644
--- a/spec/frontend/boards/components/board_new_item_spec.js
+++ b/spec/frontend/boards/components/board_new_item_spec.js
@@ -35,10 +35,6 @@ describe('BoardNewItem', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     describe('when the user provides a valid input', () => {
       it('finds an enabled create button', async () => {
diff --git a/spec/frontend/boards/components/board_settings_sidebar_spec.js b/spec/frontend/boards/components/board_settings_sidebar_spec.js
index 7d602042685..d0928485caf 100644
--- a/spec/frontend/boards/components/board_settings_sidebar_spec.js
+++ b/spec/frontend/boards/components/board_settings_sidebar_spec.js
@@ -48,7 +48,7 @@ describe('BoardSettingsSidebar', () => {
           isIssueBoard: true,
         },
         directives: {
-          GlModal: createMockDirective(),
+          GlModal: createMockDirective('gl-modal'),
         },
         stubs: {
           GlDrawer: stubComponent(GlDrawer, {
@@ -65,8 +65,6 @@ describe('BoardSettingsSidebar', () => {
 
   afterEach(() => {
     jest.restoreAllMocks();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   it('finds a MountingPortal component', () => {
diff --git a/spec/frontend/boards/components/board_top_bar_spec.js b/spec/frontend/boards/components/board_top_bar_spec.js
index 8258d9fe7f4..d97a1dbff47 100644
--- a/spec/frontend/boards/components/board_top_bar_spec.js
+++ b/spec/frontend/boards/components/board_top_bar_spec.js
@@ -11,7 +11,7 @@ import ConfigToggle from '~/boards/components/config_toggle.vue';
 import IssueBoardFilteredSearch from '~/boards/components/issue_board_filtered_search.vue';
 import NewBoardButton from '~/boards/components/new_board_button.vue';
 import ToggleFocus from '~/boards/components/toggle_focus.vue';
-import { BoardType } from '~/boards/constants';
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 
 import groupBoardQuery from '~/boards/graphql/group_board.query.graphql';
 import projectBoardQuery from '~/boards/graphql/project_board.query.graphql';
@@ -43,8 +43,9 @@ describe('BoardTopBar', () => {
     wrapper = shallowMount(BoardTopBar, {
       store,
       apolloProvider: mockApollo,
-      props: {
+      propsData: {
         boardId: 'gid://gitlab/Board/1',
+        isSwimlanesOn: false,
       },
       provide: {
         swimlanesFeatureAvailable: false,
@@ -64,7 +65,6 @@ describe('BoardTopBar', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     mockApollo = null;
   });
 
@@ -96,6 +96,11 @@ describe('BoardTopBar', () => {
     it('does not render BoardAddNewColumnTrigger component', () => {
       expect(wrapper.findComponent(BoardAddNewColumnTrigger).exists()).toBe(false);
     });
+
+    it('emits setFilters when setFilters is emitted by filtered search', () => {
+      wrapper.findComponent(IssueBoardFilteredSearch).vm.$emit('setFilters');
+      expect(wrapper.emitted('setFilters')).toHaveLength(1);
+    });
   });
 
   describe('when user can admin list', () => {
@@ -111,14 +116,14 @@ describe('BoardTopBar', () => {
   describe('Apollo boards', () => {
     it.each`
       boardType            | queryHandler                       | notCalledHandler
-      ${BoardType.group}   | ${groupBoardQueryHandlerSuccess}   | ${projectBoardQueryHandlerSuccess}
-      ${BoardType.project} | ${projectBoardQueryHandlerSuccess} | ${groupBoardQueryHandlerSuccess}
+      ${WORKSPACE_GROUP}   | ${groupBoardQueryHandlerSuccess}   | ${projectBoardQueryHandlerSuccess}
+      ${WORKSPACE_PROJECT} | ${projectBoardQueryHandlerSuccess} | ${groupBoardQueryHandlerSuccess}
     `('fetches $boardType boards', async ({ boardType, queryHandler, notCalledHandler }) => {
       createComponent({
         provide: {
           boardType,
-          isProjectBoard: boardType === BoardType.project,
-          isGroupBoard: boardType === BoardType.group,
+          isProjectBoard: boardType === WORKSPACE_PROJECT,
+          isGroupBoard: boardType === WORKSPACE_GROUP,
           isApolloBoard: true,
         },
       });
diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index 28f51e0ecbf..aa146eb4609 100644
--- a/spec/frontend/boards/components/boards_selector_spec.js
+++ b/spec/frontend/boards/components/boards_selector_spec.js
@@ -5,11 +5,11 @@ import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
-import { BoardType } from '~/boards/constants';
 import groupBoardsQuery from '~/boards/graphql/group_boards.query.graphql';
 import projectBoardsQuery from '~/boards/graphql/project_boards.query.graphql';
 import groupRecentBoardsQuery from '~/boards/graphql/group_recent_boards.query.graphql';
 import projectRecentBoardsQuery from '~/boards/graphql/project_recent_boards.query.graphql';
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import {
@@ -116,7 +116,6 @@ describe('BoardsSelector', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -228,13 +227,13 @@ describe('BoardsSelector', () => {
   describe('fetching all boards', () => {
     it.each`
       boardType            | queryHandler                        | notCalledHandler
-      ${BoardType.group}   | ${groupBoardsQueryHandlerSuccess}   | ${projectBoardsQueryHandlerSuccess}
-      ${BoardType.project} | ${projectBoardsQueryHandlerSuccess} | ${groupBoardsQueryHandlerSuccess}
+      ${WORKSPACE_GROUP}   | ${groupBoardsQueryHandlerSuccess}   | ${projectBoardsQueryHandlerSuccess}
+      ${WORKSPACE_PROJECT} | ${projectBoardsQueryHandlerSuccess} | ${groupBoardsQueryHandlerSuccess}
     `('fetches $boardType boards', async ({ boardType, queryHandler, notCalledHandler }) => {
       createStore();
       createComponent({
-        isGroupBoard: boardType === BoardType.group,
-        isProjectBoard: boardType === BoardType.project,
+        isGroupBoard: boardType === WORKSPACE_GROUP,
+        isProjectBoard: boardType === WORKSPACE_PROJECT,
       });
 
       await nextTick();
diff --git a/spec/frontend/boards/components/config_toggle_spec.js b/spec/frontend/boards/components/config_toggle_spec.js
index 47d4692453d..5330721451e 100644
--- a/spec/frontend/boards/components/config_toggle_spec.js
+++ b/spec/frontend/boards/components/config_toggle_spec.js
@@ -23,10 +23,6 @@ describe('ConfigToggle', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a button with label `View scope` when `canAdminList` is `false`', () => {
     wrapper = createComponent({ canAdminList: false });
     expect(findButton().text()).toBe('View scope');
diff --git a/spec/frontend/boards/components/issue_board_filtered_search_spec.js b/spec/frontend/boards/components/issue_board_filtered_search_spec.js
index 57a30ddc512..5b5b68d5dbe 100644
--- a/spec/frontend/boards/components/issue_board_filtered_search_spec.js
+++ b/spec/frontend/boards/components/issue_board_filtered_search_spec.js
@@ -2,10 +2,10 @@ import { orderBy } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
 import BoardFilteredSearch from 'ee_else_ce/boards/components/board_filtered_search.vue';
 import IssueBoardFilteredSpec from '~/boards/components/issue_board_filtered_search.vue';
-import issueBoardFilters from '~/boards/issue_board_filters';
+import issueBoardFilters from 'ee_else_ce/boards/issue_board_filters';
 import { mockTokens } from '../mock_data';
 
-jest.mock('~/boards/issue_board_filters');
+jest.mock('ee_else_ce/boards/issue_board_filters');
 
 describe('IssueBoardFilter', () => {
   let wrapper;
@@ -14,6 +14,9 @@ describe('IssueBoardFilter', () => {
 
   const createComponent = ({ isSignedIn = false } = {}) => {
     wrapper = shallowMount(IssueBoardFilteredSpec, {
+      propsData: {
+        boardId: 'gid://gitlab/Board/1',
+      },
       provide: {
         isSignedIn,
         releasesFetchPath: '/releases',
@@ -35,10 +38,6 @@ describe('IssueBoardFilter', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
@@ -48,6 +47,11 @@ describe('IssueBoardFilter', () => {
       expect(findBoardsFilteredSearch().exists()).toBe(true);
     });
 
+    it('emits setFilters when setFilters is emitted', () => {
+      findBoardsFilteredSearch().vm.$emit('setFilters');
+      expect(wrapper.emitted('setFilters')).toHaveLength(1);
+    });
+
     it.each`
       isSignedIn
       ${true}
diff --git a/spec/frontend/boards/components/issue_due_date_spec.js b/spec/frontend/boards/components/issue_due_date_spec.js
index 45fa10bf03a..dee8febfe4d 100644
--- a/spec/frontend/boards/components/issue_due_date_spec.js
+++ b/spec/frontend/boards/components/issue_due_date_spec.js
@@ -20,10 +20,6 @@ describe('Issue Due Date component', () => {
     date = new Date();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render "Today" if the due date is today', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/boards/components/issue_time_estimate_spec.js b/spec/frontend/boards/components/issue_time_estimate_spec.js
index 948a7a20f7f..42507ef560b 100644
--- a/spec/frontend/boards/components/issue_time_estimate_spec.js
+++ b/spec/frontend/boards/components/issue_time_estimate_spec.js
@@ -7,10 +7,6 @@ describe('Issue Time Estimate component', () => {
 
   const findIssueTimeEstimate = () => wrapper.find('[data-testid="issue-time-estimate"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when limitToHours is false', () => {
     beforeEach(() => {
       wrapper = shallowMount(IssueTimeEstimate, {
diff --git a/spec/frontend/boards/components/item_count_spec.js b/spec/frontend/boards/components/item_count_spec.js
index 0c0c7f66933..f2cc8eb1167 100644
--- a/spec/frontend/boards/components/item_count_spec.js
+++ b/spec/frontend/boards/components/item_count_spec.js
@@ -41,10 +41,6 @@ describe('IssueCount', () => {
       createComponent({ maxIssueCount, itemsSize });
     });
 
-    afterEach(() => {
-      vm.destroy();
-    });
-
     it('contains issueSize in the template', () => {
       expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
     });
@@ -66,10 +62,6 @@ describe('IssueCount', () => {
       createComponent({ maxIssueCount, itemsSize });
     });
 
-    afterEach(() => {
-      vm.destroy();
-    });
-
     it('contains issueSize in the template', () => {
       expect(vm.find('[data-testid="board-items-count"]').text()).toEqual(String(itemsSize));
     });
diff --git a/spec/frontend/boards/components/sidebar/board_editable_item_spec.js b/spec/frontend/boards/components/sidebar/board_editable_item_spec.js
index 5e2222ac3d7..6dbeac3864f 100644
--- a/spec/frontend/boards/components/sidebar/board_editable_item_spec.js
+++ b/spec/frontend/boards/components/sidebar/board_editable_item_spec.js
@@ -21,11 +21,6 @@ describe('boards sidebar remove issue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('template', () => {
     it('renders title', () => {
       const title = 'Sidebar item title';
diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js
index e2e4baefad0..b01ee01120e 100644
--- a/spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js
+++ b/spec/frontend/boards/components/sidebar/board_sidebar_time_tracker_spec.js
@@ -37,11 +37,6 @@ describe('BoardSidebarTimeTracker', () => {
     store.state.activeId = '1';
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     timeTrackingLimitToHours | canUpdate
     ${true}                  | ${false}
diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
index bc66a0515aa..a20884baf3b 100644
--- a/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
+++ b/spec/frontend/boards/components/sidebar/board_sidebar_title_spec.js
@@ -27,9 +27,7 @@ describe('~/boards/components/sidebar/board_sidebar_title.vue', () => {
 
   afterEach(() => {
     localStorage.clear();
-    wrapper.destroy();
     store = null;
-    wrapper = null;
   });
 
   const createWrapper = (item = TEST_ISSUE_A) => {
diff --git a/spec/frontend/boards/components/toggle_focus_spec.js b/spec/frontend/boards/components/toggle_focus_spec.js
index 3cbaac91f8d..cad287954d7 100644
--- a/spec/frontend/boards/components/toggle_focus_spec.js
+++ b/spec/frontend/boards/components/toggle_focus_spec.js
@@ -10,7 +10,7 @@ describe('ToggleFocus', () => {
   const createComponent = () => {
     wrapper = shallowMountExtended(ToggleFocus, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       attachTo: document.body,
     });
@@ -18,10 +18,6 @@ describe('ToggleFocus', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a button with `maximize` icon', () => {
     createComponent();
 
diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js
index 1d011eacf1c..e5167120542 100644
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -477,6 +477,9 @@ export const mockList = {
   loading: false,
   issuesCount: 1,
   maxIssueCount: 0,
+  metadata: {
+    epicsCount: 1,
+  },
   __typename: 'BoardList',
 };
 
@@ -915,6 +918,7 @@ export const epicBoardListQueryResponse = (totalWeight = 5) => ({
       __typename: 'EpicList',
       id: 'gid://gitlab/Boards::EpicList/3',
       metadata: {
+        epicsCount: 1,
         totalWeight,
       },
     },
diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js
index 4324e7068e0..74ce4b6b786 100644
--- a/spec/frontend/boards/project_select_spec.js
+++ b/spec/frontend/boards/project_select_spec.js
@@ -71,11 +71,6 @@ describe('ProjectSelect component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('displays a header title', () => {
     createWrapper();
 
diff --git a/spec/frontend/boards/stores/actions_spec.js b/spec/frontend/boards/stores/actions_spec.js
index ab959abaa99..f430062bb73 100644
--- a/spec/frontend/boards/stores/actions_spec.js
+++ b/spec/frontend/boards/stores/actions_spec.js
@@ -2,13 +2,7 @@ import * as Sentry from '@sentry/browser';
 import { cloneDeep } from 'lodash';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import {
-  inactiveId,
-  ISSUABLE,
-  ListType,
-  BoardType,
-  DraggableItemTypes,
-} from 'ee_else_ce/boards/constants';
+import { inactiveId, ISSUABLE, ListType, DraggableItemTypes } from 'ee_else_ce/boards/constants';
 import issueMoveListMutation from 'ee_else_ce/boards/graphql/issue_move_list.mutation.graphql';
 import testAction from 'helpers/vuex_action_helper';
 import {
@@ -26,7 +20,7 @@ import actions from '~/boards/stores/actions';
 import * as types from '~/boards/stores/mutation_types';
 import mutations from '~/boards/stores/mutations';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 
 import projectBoardMilestones from '~/boards/graphql/project_board_milestones.query.graphql';
 import groupBoardMilestones from '~/boards/graphql/group_board_milestones.query.graphql';
@@ -49,7 +43,7 @@ import {
   mockMilestones,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 // We need this helper to make sure projectPath is including
 // subgroups when the movIssue action is called.
@@ -300,8 +294,8 @@ describe('fetchLists', () => {
 
   it.each`
     issuableType  | boardType            | fullBoardId               | isGroup  | isProject
-    ${TYPE_ISSUE} | ${BoardType.group}   | ${'gid://gitlab/Board/1'} | ${true}  | ${false}
-    ${TYPE_ISSUE} | ${BoardType.project} | ${'gid://gitlab/Board/1'} | ${false} | ${true}
+    ${TYPE_ISSUE} | ${WORKSPACE_GROUP}   | ${'gid://gitlab/Board/1'} | ${true}  | ${false}
+    ${TYPE_ISSUE} | ${WORKSPACE_PROJECT} | ${'gid://gitlab/Board/1'} | ${false} | ${true}
   `(
     'calls $issuableType query with correct variables',
     async ({ issuableType, boardType, fullBoardId, isGroup, isProject }) => {
@@ -336,7 +330,7 @@ describe('fetchLists', () => {
 describe('fetchMilestones', () => {
   const queryResponse = {
     data: {
-      project: {
+      workspace: {
         milestones: {
           nodes: mockMilestones,
         },
@@ -346,7 +340,7 @@ describe('fetchMilestones', () => {
 
   const queryErrors = {
     data: {
-      project: {
+      workspace: {
         errors: ['You cannot view these milestones'],
         milestones: {},
       },
diff --git a/spec/frontend/boards/stores/getters_spec.js b/spec/frontend/boards/stores/getters_spec.js
index c86a256bd96..944a7493504 100644
--- a/spec/frontend/boards/stores/getters_spec.js
+++ b/spec/frontend/boards/stores/getters_spec.js
@@ -31,10 +31,6 @@ describe('Boards - Getters', () => {
   });
 
   describe('isSwimlanesOn', () => {
-    afterEach(() => {
-      window.gon = { features: {} };
-    });
-
     it('returns false', () => {
       expect(getters.isSwimlanesOn()).toBe(false);
     });
@@ -171,10 +167,6 @@ describe('Boards - Getters', () => {
   });
 
   describe('isEpicBoard', () => {
-    afterEach(() => {
-      window.gon = { features: {} };
-    });
-
     it('returns false', () => {
       expect(getters.isEpicBoard()).toBe(false);
     });
diff --git a/spec/frontend/branches/components/delete_branch_button_spec.js b/spec/frontend/branches/components/delete_branch_button_spec.js
index b029f34c3d7..5b2ec443c59 100644
--- a/spec/frontend/branches/components/delete_branch_button_spec.js
+++ b/spec/frontend/branches/components/delete_branch_button_spec.js
@@ -25,10 +25,6 @@ describe('Delete branch button', () => {
     eventHubSpy = jest.spyOn(eventHub, '$emit');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the button with default tooltip, style, and icon', () => {
     createComponent();
 
diff --git a/spec/frontend/branches/components/delete_branch_modal_spec.js b/spec/frontend/branches/components/delete_branch_modal_spec.js
index c977868ca93..dd5b7fca564 100644
--- a/spec/frontend/branches/components/delete_branch_modal_spec.js
+++ b/spec/frontend/branches/components/delete_branch_modal_spec.js
@@ -52,10 +52,6 @@ describe('Delete branch modal', () => {
   const expectedUnmergedWarning =
     "This branch hasn't been merged into default. To avoid data loss, consider merging this branch before deleting it.";
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Deleting a regular branch', () => {
     const expectedTitle = 'Delete branch. Are you ABSOLUTELY SURE?';
     const expectedWarning = "You're about to permanently delete the branch test_modal.";
diff --git a/spec/frontend/branches/components/delete_merged_branches_spec.js b/spec/frontend/branches/components/delete_merged_branches_spec.js
index 4f1e772f4a4..75a669c78f2 100644
--- a/spec/frontend/branches/components/delete_merged_branches_spec.js
+++ b/spec/frontend/branches/components/delete_merged_branches_spec.js
@@ -27,7 +27,7 @@ const createComponent = (mountFn = shallowMountExtended, stubs = {}) => {
       ...propsDataMock,
     },
     directives: {
-      GlTooltip: createMockDirective(),
+      GlTooltip: createMockDirective('gl-tooltip'),
     },
     stubs,
   });
@@ -78,10 +78,6 @@ describe('Delete merged branches component', () => {
       createComponent(shallowMountExtended, stubsData);
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders correct modal title and text', () => {
       const modalText = findModal().text();
       expect(findModal().props('title')).toBe(i18n.modalTitle);
diff --git a/spec/frontend/branches/components/divergence_graph_spec.js b/spec/frontend/branches/components/divergence_graph_spec.js
index 9429a6e982c..66193c2ebf0 100644
--- a/spec/frontend/branches/components/divergence_graph_spec.js
+++ b/spec/frontend/branches/components/divergence_graph_spec.js
@@ -9,10 +9,6 @@ function factory(propsData = {}) {
 }
 
 describe('Branch divergence graph component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders ahead and behind count', () => {
     factory({
       defaultBranch: 'main',
diff --git a/spec/frontend/branches/components/graph_bar_spec.js b/spec/frontend/branches/components/graph_bar_spec.js
index 61c051b49c6..585b376081b 100644
--- a/spec/frontend/branches/components/graph_bar_spec.js
+++ b/spec/frontend/branches/components/graph_bar_spec.js
@@ -8,10 +8,6 @@ function factory(propsData = {}) {
 }
 
 describe('Branch divergence graph bar component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it.each`
     position   | positionClass
     ${'left'}  | ${'position-right-0'}
diff --git a/spec/frontend/captcha/captcha_modal_spec.js b/spec/frontend/captcha/captcha_modal_spec.js
index 20e69b5a834..6d6d8043797 100644
--- a/spec/frontend/captcha/captcha_modal_spec.js
+++ b/spec/frontend/captcha/captcha_modal_spec.js
@@ -1,6 +1,5 @@
 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { stubComponent } from 'helpers/stub_component';
 import CaptchaModal from '~/captcha/captcha_modal.vue';
 import { initRecaptchaScript } from '~/captcha/init_recaptcha_script';
@@ -9,10 +8,11 @@ jest.mock('~/captcha/init_recaptcha_script');
 
 describe('Captcha Modal', () => {
   let wrapper;
-  let modal;
   let grecaptcha;
 
   const captchaSiteKey = 'abc123';
+  const showSpy = jest.fn();
+  const hideSpy = jest.fn();
 
   function createComponent({ props = {} } = {}) {
     wrapper = shallowMount(CaptchaModal, {
@@ -21,11 +21,18 @@ describe('Captcha Modal', () => {
         ...props,
       },
       stubs: {
-        GlModal: stubComponent(GlModal),
+        GlModal: stubComponent(GlModal, {
+          methods: {
+            show: showSpy,
+            hide: hideSpy,
+          },
+        }),
       },
     });
   }
 
+  const findGlModal = () => wrapper.findComponent(GlModal);
+
   beforeEach(() => {
     grecaptcha = {
       render: jest.fn(),
@@ -34,38 +41,17 @@ describe('Captcha Modal', () => {
     initRecaptchaScript.mockResolvedValue(grecaptcha);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const findGlModal = () => {
-    const glModal = wrapper.findComponent(GlModal);
-
-    jest.spyOn(glModal.vm, 'show').mockImplementation(() => glModal.vm.$emit('shown'));
-    jest
-      .spyOn(glModal.vm, 'hide')
-      .mockImplementation(() => glModal.vm.$emit('hide', { trigger: '' }));
-
-    return glModal;
-  };
-
-  const showModal = () => {
-    wrapper.setProps({ needsCaptchaResponse: true });
-  };
-
-  beforeEach(() => {
-    createComponent();
-    modal = findGlModal();
-  });
-
   describe('rendering', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders', () => {
-      expect(modal.exists()).toBe(true);
+      expect(findGlModal().exists()).toBe(true);
     });
 
     it('assigns the modal a unique ID', () => {
-      const firstInstanceModalId = modal.props('modalId');
+      const firstInstanceModalId = findGlModal().props('modalId');
       createComponent();
       const secondInstanceModalId = findGlModal().props('modalId');
       expect(firstInstanceModalId).not.toEqual(secondInstanceModalId);
@@ -76,13 +62,12 @@ describe('Captcha Modal', () => {
     describe('when modal is shown', () => {
       describe('when initRecaptchaScript promise resolves successfully', () => {
         beforeEach(async () => {
-          showModal();
-
-          await nextTick();
+          createComponent({ props: { needsCaptchaResponse: true } });
+          findGlModal().vm.$emit('shown');
         });
 
         it('shows modal', async () => {
-          expect(findGlModal().vm.show).toHaveBeenCalled();
+          expect(showSpy).toHaveBeenCalled();
         });
 
         it('renders window.grecaptcha', () => {
@@ -108,7 +93,7 @@ describe('Captcha Modal', () => {
           it('hides modal with null trigger', async () => {
             // Assert that hide is called with zero args, so that we don't trigger the logic
             // for hiding the modal via cancel, esc, headerclose, etc, without a captcha response
-            expect(modal.vm.hide).toHaveBeenCalledWith();
+            expect(hideSpy).toHaveBeenCalledWith();
           });
         });
 
@@ -127,7 +112,7 @@ describe('Captcha Modal', () => {
               const bvModalEvent = {
                 trigger,
               };
-              modal.vm.$emit('hide', bvModalEvent);
+              findGlModal().vm.$emit('hide', bvModalEvent);
             });
 
             it(`emits receivedCaptchaResponse with ${JSON.stringify(expected)}`, () => {
@@ -141,21 +126,24 @@ describe('Captcha Modal', () => {
         const fakeError = {};
 
         beforeEach(() => {
-          initRecaptchaScript.mockImplementation(() => Promise.reject(fakeError));
+          createComponent({
+            props: { needsCaptchaResponse: true },
+          });
 
+          initRecaptchaScript.mockImplementation(() => Promise.reject(fakeError));
           jest.spyOn(console, 'error').mockImplementation();
 
-          showModal();
+          findGlModal().vm.$emit('shown');
         });
 
         it('emits receivedCaptchaResponse exactly once with null', () => {
           expect(wrapper.emitted('receivedCaptchaResponse')).toEqual([[null]]);
         });
 
-        it('hides modal with null trigger', async () => {
+        it('hides modal with null trigger', () => {
           // Assert that hide is called with zero args, so that we don't trigger the logic
           // for hiding the modal via cancel, esc, headerclose, etc, without a captcha response
-          expect(modal.vm.hide).toHaveBeenCalledWith();
+          expect(hideSpy).toHaveBeenCalledWith();
         });
 
         it('calls console.error with a message and the exception', () => {
diff --git a/spec/frontend/ci/ci_lint/components/ci_lint_spec.js b/spec/frontend/ci/ci_lint/components/ci_lint_spec.js
index d4f588a0e09..4b7ca36f331 100644
--- a/spec/frontend/ci/ci_lint/components/ci_lint_spec.js
+++ b/spec/frontend/ci/ci_lint/components/ci_lint_spec.js
@@ -48,7 +48,6 @@ describe('CI Lint', () => {
 
   afterEach(() => {
     mockMutate.mockClear();
-    wrapper.destroy();
   });
 
   it('displays the editor', () => {
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_admin_variables_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_admin_variables_spec.js
index 5e0c35c9f90..8e012883f09 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_admin_variables_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_admin_variables_spec.js
@@ -16,10 +16,6 @@ describe('Ci Project Variable wrapper', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Passes down the correct props to ci_variable_shared', () => {
     expect(findCiShared().props()).toEqual({
       areScopedVariablesAvailable: false,
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
index 2fd395a1230..7181398c2a6 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js
@@ -27,10 +27,6 @@ describe('Ci environments dropdown', () => {
     findListbox().vm.$emit('search', searchTerm);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('No environments found', () => {
     beforeEach(() => {
       createComponent({ searchTerm: 'stable' });
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js
index c0fb133b9b1..77d90a7667d 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js
@@ -24,10 +24,6 @@ describe('Ci Group Variable wrapper', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Props', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js
index bd1e6b17d6b..ce5237a84f7 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js
@@ -25,10 +25,6 @@ describe('Ci Project Variable wrapper', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Passes down the correct props to ci_variable_shared', () => {
     expect(findCiShared().props()).toEqual({
       id: convertToGraphQLId(TYPENAME_PROJECT, mockProvide.projectId),
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js
index 508af964ca3..8f3fccc2804 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js
@@ -85,10 +85,6 @@ describe('Ci variable modal', () => {
   const findVariableTypeDropdown = () => wrapper.find('#ci-variable-type');
   const findEnvironmentScopeText = () => wrapper.findByText('Environment scope');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Adding a variable', () => {
     describe('when no key/value pair are present', () => {
       beforeEach(() => {
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
index 32af2ec4de9..0141232a299 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js
@@ -22,6 +22,7 @@ describe('Ci variable table', () => {
     hideEnvironmentScope: false,
     isLoading: false,
     maxVariableLimit: 5,
+    pageInfo: { after: '' },
     variables: mockVariablesWithScopes(projectString),
   };
 
@@ -37,10 +38,6 @@ describe('Ci variable table', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('props passing', () => {
     it('passes props down correctly to the ci table', () => {
       createComponent();
@@ -49,6 +46,7 @@ describe('Ci variable table', () => {
         entity: 'project',
         isLoading: defaultProps.isLoading,
         maxVariableLimit: defaultProps.maxVariableLimit,
+        pageInfo: defaultProps.pageInfo,
         variables: defaultProps.variables,
       });
     });
@@ -144,4 +142,22 @@ describe('Ci variable table', () => {
       expect(wrapper.emitted(eventName)).toEqual([[newVariable]]);
     });
   });
+
+  describe('pages events', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it.each`
+      eventName             | args
+      ${'handle-prev-page'} | ${undefined}
+      ${'handle-next-page'} | ${undefined}
+      ${'sort-changed'}     | ${{ sortDesc: true }}
+    `('bubbles up the $eventName event', async ({ args, eventName }) => {
+      findCiVariableTable().vm.$emit(eventName, args);
+      await nextTick();
+
+      expect(wrapper.emitted(eventName)).toEqual([[args]]);
+    });
+  });
 });
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
index c977ae773db..87192006efc 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js
@@ -4,7 +4,7 @@ import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { resolvers } from '~/ci/ci_variable_list/graphql/settings';
 import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -41,7 +41,7 @@ import {
   mockAdminVariables,
 } from '../mocks';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -53,6 +53,7 @@ const mockProvide = {
 
 const defaultProps = {
   areScopedVariablesAvailable: true,
+  pageInfo: {},
   hideEnvironmentScope: false,
   refetchAfterMutation: false,
 };
@@ -105,345 +106,378 @@ describe('Ci Variable Shared Component', () => {
     mockVariables = jest.fn();
   });
 
-  describe('while queries are being fetch', () => {
-    beforeEach(() => {
-      createComponentWithApollo({ isLoading: true });
-    });
-
-    it('shows a loading icon', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
-      expect(findCiTable().exists()).toBe(false);
-    });
-  });
-
-  describe('when queries are resolved', () => {
-    describe('successfully', () => {
-      beforeEach(async () => {
-        mockEnvironments.mockResolvedValue(mockProjectEnvironments);
-        mockVariables.mockResolvedValue(mockProjectVariables);
-
-        await createComponentWithApollo({ provide: createProjectProvide() });
+  describe.each`
+    isVariablePagesEnabled | text
+    ${true}                | ${'enabled'}
+    ${false}               | ${'disabled'}
+  `('When Pages FF is $text', ({ isVariablePagesEnabled }) => {
+    const featureFlagProvide = isVariablePagesEnabled
+      ? { glFeatures: { ciVariablesPages: true } }
+      : {};
+
+    describe('while queries are being fetch', () => {
+      beforeEach(() => {
+        createComponentWithApollo({ isLoading: true });
       });
 
-      it('passes down the expected max variable limit as props', () => {
-        expect(findCiSettings().props('maxVariableLimit')).toBe(
-          mockProjectVariables.data.project.ciVariables.limit,
-        );
+      it('shows a loading icon', () => {
+        expect(findLoadingIcon().exists()).toBe(true);
+        expect(findCiTable().exists()).toBe(false);
       });
+    });
 
-      it('passes down the expected environments as props', () => {
-        expect(findCiSettings().props('environments')).toEqual([prodName, devName]);
-      });
+    describe('when queries are resolved', () => {
+      describe('successfully', () => {
+        beforeEach(async () => {
+          mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+          mockVariables.mockResolvedValue(mockProjectVariables);
 
-      it('passes down the expected variables as props', () => {
-        expect(findCiSettings().props('variables')).toEqual(
-          mockProjectVariables.data.project.ciVariables.nodes,
-        );
-      });
+          await createComponentWithApollo({
+            provide: { ...createProjectProvide(), ...featureFlagProvide },
+          });
+        });
 
-      it('createAlert was not called', () => {
-        expect(createAlert).not.toHaveBeenCalled();
-      });
-    });
+        it('passes down the expected max variable limit as props', () => {
+          expect(findCiSettings().props('maxVariableLimit')).toBe(
+            mockProjectVariables.data.project.ciVariables.limit,
+          );
+        });
 
-    describe('with an error for variables', () => {
-      beforeEach(async () => {
-        mockEnvironments.mockResolvedValue(mockProjectEnvironments);
-        mockVariables.mockRejectedValue();
+        it('passes down the expected environments as props', () => {
+          expect(findCiSettings().props('environments')).toEqual([prodName, devName]);
+        });
 
-        await createComponentWithApollo();
-      });
+        it('passes down the expected variables as props', () => {
+          expect(findCiSettings().props('variables')).toEqual(
+            mockProjectVariables.data.project.ciVariables.nodes,
+          );
+        });
 
-      it('calls createAlert with the expected error message', () => {
-        expect(createAlert).toHaveBeenCalledWith({ message: variableFetchErrorText });
+        it('createAlert was not called', () => {
+          expect(createAlert).not.toHaveBeenCalled();
+        });
       });
-    });
 
-    describe('with an error for environments', () => {
-      beforeEach(async () => {
-        mockEnvironments.mockRejectedValue();
-        mockVariables.mockResolvedValue(mockProjectVariables);
+      describe('with an error for variables', () => {
+        beforeEach(async () => {
+          mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+          mockVariables.mockRejectedValue();
 
-        await createComponentWithApollo();
-      });
+          await createComponentWithApollo({ provide: featureFlagProvide });
+        });
 
-      it('calls createAlert with the expected error message', () => {
-        expect(createAlert).toHaveBeenCalledWith({ message: environmentFetchErrorText });
+        it('calls createAlert with the expected error message', () => {
+          expect(createAlert).toHaveBeenCalledWith({ message: variableFetchErrorText });
+        });
       });
-    });
-  });
 
-  describe('environment query', () => {
-    describe('when there is an environment key in queryData', () => {
-      beforeEach(async () => {
-        mockEnvironments.mockResolvedValue(mockProjectEnvironments);
-        mockVariables.mockResolvedValue(mockProjectVariables);
+      describe('with an error for environments', () => {
+        beforeEach(async () => {
+          mockEnvironments.mockRejectedValue();
+          mockVariables.mockResolvedValue(mockProjectVariables);
 
-        await createComponentWithApollo({ props: { ...createProjectProps() } });
-      });
+          await createComponentWithApollo({ provide: featureFlagProvide });
+        });
 
-      it('is executed', () => {
-        expect(mockVariables).toHaveBeenCalled();
+        it('calls createAlert with the expected error message', () => {
+          expect(createAlert).toHaveBeenCalledWith({ message: environmentFetchErrorText });
+        });
       });
     });
 
-    describe('when there isnt an environment key in queryData', () => {
-      beforeEach(async () => {
-        mockVariables.mockResolvedValue(mockGroupVariables);
+    describe('environment query', () => {
+      describe('when there is an environment key in queryData', () => {
+        beforeEach(async () => {
+          mockEnvironments.mockResolvedValue(mockProjectEnvironments);
+          mockVariables.mockResolvedValue(mockProjectVariables);
 
-        await createComponentWithApollo({ props: { ...createGroupProps() } });
-      });
+          await createComponentWithApollo({
+            props: { ...createProjectProps() },
+            provide: featureFlagProvide,
+          });
+        });
 
-      it('is skipped', () => {
-        expect(mockVariables).not.toHaveBeenCalled();
+        it('is executed', () => {
+          expect(mockVariables).toHaveBeenCalled();
+        });
       });
-    });
-  });
 
-  describe('mutations', () => {
-    const groupProps = createGroupProps();
+      describe('when there isnt an environment key in queryData', () => {
+        beforeEach(async () => {
+          mockVariables.mockResolvedValue(mockGroupVariables);
 
-    beforeEach(async () => {
-      mockVariables.mockResolvedValue(mockGroupVariables);
+          await createComponentWithApollo({
+            props: { ...createGroupProps() },
+            provide: featureFlagProvide,
+          });
+        });
 
-      await createComponentWithApollo({
-        customHandlers: [[getGroupVariables, mockVariables]],
-        props: groupProps,
+        it('is skipped', () => {
+          expect(mockVariables).not.toHaveBeenCalled();
+        });
       });
     });
-    it.each`
-      actionName  | mutation                                           | event
-      ${'add'}    | ${groupProps.mutationData[ADD_MUTATION_ACTION]}    | ${'add-variable'}
-      ${'update'} | ${groupProps.mutationData[UPDATE_MUTATION_ACTION]} | ${'update-variable'}
-      ${'delete'} | ${groupProps.mutationData[DELETE_MUTATION_ACTION]} | ${'delete-variable'}
-    `(
-      'calls the right mutation from propsData when user performs $actionName variable',
-      async ({ event, mutation }) => {
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
-
-        await findCiSettings().vm.$emit(event, newVariable);
-
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation,
-          variables: {
-            endpoint: mockProvide.endpoint,
-            fullPath: groupProps.fullPath,
-            id: convertToGraphQLId(TYPENAME_GROUP, groupProps.id),
-            variable: newVariable,
-          },
-        });
-      },
-    );
-
-    it.each`
-      actionName  | event
-      ${'add'}    | ${'add-variable'}
-      ${'update'} | ${'update-variable'}
-      ${'delete'} | ${'delete-variable'}
-    `(
-      'throws with the specific graphql error if present when user performs $actionName variable',
-      async ({ event }) => {
-        const graphQLErrorMessage = 'There is a problem with this graphQL action';
-        jest
-          .spyOn(wrapper.vm.$apollo, 'mutate')
-          .mockResolvedValue({ data: { ciVariableMutation: { errors: [graphQLErrorMessage] } } });
-        await findCiSettings().vm.$emit(event, newVariable);
-        await nextTick();
-
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createAlert).toHaveBeenCalledWith({ message: graphQLErrorMessage });
-      },
-    );
-
-    it.each`
-      actionName  | event
-      ${'add'}    | ${'add-variable'}
-      ${'update'} | ${'update-variable'}
-      ${'delete'} | ${'delete-variable'}
-    `(
-      'throws generic error on failure with no graphql errors and user performs $actionName variable',
-      async ({ event }) => {
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementationOnce(() => {
-          throw new Error();
-        });
-        await findCiSettings().vm.$emit(event, newVariable);
 
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createAlert).toHaveBeenCalledWith({ message: genericMutationErrorText });
-      },
-    );
+    describe('mutations', () => {
+      const groupProps = createGroupProps();
 
-    describe('without fullpath and ID props', () => {
       beforeEach(async () => {
-        mockVariables.mockResolvedValue(mockAdminVariables);
+        mockVariables.mockResolvedValue(mockGroupVariables);
 
         await createComponentWithApollo({
-          customHandlers: [[getAdminVariables, mockVariables]],
-          props: createInstanceProps(),
+          customHandlers: [[getGroupVariables, mockVariables]],
+          props: groupProps,
+          provide: featureFlagProvide,
         });
       });
-
-      it('does not pass fullPath and ID to the mutation', async () => {
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
-
-        await findCiSettings().vm.$emit('add-variable', newVariable);
-
-        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-          mutation: wrapper.props().mutationData[ADD_MUTATION_ACTION],
-          variables: {
-            endpoint: mockProvide.endpoint,
-            variable: newVariable,
-          },
-        });
-      });
-    });
-  });
-
-  describe('Props', () => {
-    const mockGroupCiVariables = mockGroupVariables.data.group.ciVariables;
-    const mockProjectCiVariables = mockProjectVariables.data.project.ciVariables;
-
-    describe('in a specific context as', () => {
       it.each`
-        name          | mockVariablesValue      | mockEnvironmentsValue      | withEnvironments | expectedEnvironments | propsFn                | provideFn               | mutation             | maxVariableLimit
-        ${'project'}  | ${mockProjectVariables} | ${mockProjectEnvironments} | ${true}          | ${['prod', 'dev']}   | ${createProjectProps}  | ${createProjectProvide} | ${null}              | ${mockProjectCiVariables.limit}
-        ${'group'}    | ${mockGroupVariables}   | ${[]}                      | ${false}         | ${[]}                | ${createGroupProps}    | ${createGroupProvide}   | ${getGroupVariables} | ${mockGroupCiVariables.limit}
-        ${'instance'} | ${mockAdminVariables}   | ${[]}                      | ${false}         | ${[]}                | ${createInstanceProps} | ${() => {}}             | ${getAdminVariables} | ${0}
+        actionName  | mutation                                           | event
+        ${'add'}    | ${groupProps.mutationData[ADD_MUTATION_ACTION]}    | ${'add-variable'}
+        ${'update'} | ${groupProps.mutationData[UPDATE_MUTATION_ACTION]} | ${'update-variable'}
+        ${'delete'} | ${groupProps.mutationData[DELETE_MUTATION_ACTION]} | ${'delete-variable'}
       `(
-        'passes down all the required props when its a $name component',
-        async ({
-          mutation,
-          maxVariableLimit,
-          mockVariablesValue,
-          mockEnvironmentsValue,
-          withEnvironments,
-          expectedEnvironments,
-          propsFn,
-          provideFn,
-        }) => {
-          const props = propsFn();
-          const provide = provideFn();
-
-          mockVariables.mockResolvedValue(mockVariablesValue);
-
-          if (withEnvironments) {
-            mockEnvironments.mockResolvedValue(mockEnvironmentsValue);
-          }
-
-          let customHandlers = null;
-
-          if (mutation) {
-            customHandlers = [[mutation, mockVariables]];
-          }
+        'calls the right mutation from propsData when user performs $actionName variable',
+        async ({ event, mutation }) => {
+          jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
+
+          await findCiSettings().vm.$emit(event, newVariable);
+
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+            mutation,
+            variables: {
+              endpoint: mockProvide.endpoint,
+              fullPath: groupProps.fullPath,
+              id: convertToGraphQLId(TYPENAME_GROUP, groupProps.id),
+              variable: newVariable,
+            },
+          });
+        },
+      );
 
-          await createComponentWithApollo({ customHandlers, props, provide });
+      it.each`
+        actionName  | event
+        ${'add'}    | ${'add-variable'}
+        ${'update'} | ${'update-variable'}
+        ${'delete'} | ${'delete-variable'}
+      `(
+        'throws with the specific graphql error if present when user performs $actionName variable',
+        async ({ event }) => {
+          const graphQLErrorMessage = 'There is a problem with this graphQL action';
+          jest
+            .spyOn(wrapper.vm.$apollo, 'mutate')
+            .mockResolvedValue({ data: { ciVariableMutation: { errors: [graphQLErrorMessage] } } });
+          await findCiSettings().vm.$emit(event, newVariable);
+          await nextTick();
+
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+        },
+      );
 
-          expect(findCiSettings().props()).toEqual({
-            areScopedVariablesAvailable: wrapper.props().areScopedVariablesAvailable,
-            hideEnvironmentScope: defaultProps.hideEnvironmentScope,
-            isLoading: false,
-            maxVariableLimit,
-            variables: wrapper.props().queryData.ciVariables.lookup(mockVariablesValue.data)?.nodes,
-            entity: props.entity,
-            environments: expectedEnvironments,
+      it.each`
+        actionName  | event
+        ${'add'}    | ${'add-variable'}
+        ${'update'} | ${'update-variable'}
+        ${'delete'} | ${'delete-variable'}
+      `(
+        'throws generic error on failure with no graphql errors and user performs $actionName variable',
+        async ({ event }) => {
+          jest.spyOn(wrapper.vm.$apollo, 'mutate').mockImplementationOnce(() => {
+            throw new Error();
           });
+          await findCiSettings().vm.$emit(event, newVariable);
+
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalledWith({ message: genericMutationErrorText });
         },
       );
-    });
 
-    describe('refetchAfterMutation', () => {
-      it.each`
-        bool     | text
-        ${true}  | ${'refetches the variables'}
-        ${false} | ${'does not refetch the variables'}
-      `('when $bool it $text', async ({ bool }) => {
-        await createComponentWithApollo({
-          props: { ...createInstanceProps(), refetchAfterMutation: bool },
-        });
+      describe('without fullpath and ID props', () => {
+        beforeEach(async () => {
+          mockVariables.mockResolvedValue(mockAdminVariables);
 
-        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({ data: {} });
-        jest.spyOn(wrapper.vm.$apollo.queries.ciVariables, 'refetch').mockImplementation(jest.fn());
+          await createComponentWithApollo({
+            customHandlers: [[getAdminVariables, mockVariables]],
+            props: createInstanceProps(),
+            provide: featureFlagProvide,
+          });
+        });
 
-        await findCiSettings().vm.$emit('add-variable', newVariable);
+        it('does not pass fullPath and ID to the mutation', async () => {
+          jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue();
 
-        await nextTick();
+          await findCiSettings().vm.$emit('add-variable', newVariable);
 
-        if (bool) {
-          expect(wrapper.vm.$apollo.queries.ciVariables.refetch).toHaveBeenCalled();
-        } else {
-          expect(wrapper.vm.$apollo.queries.ciVariables.refetch).not.toHaveBeenCalled();
-        }
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+            mutation: wrapper.props().mutationData[ADD_MUTATION_ACTION],
+            variables: {
+              endpoint: mockProvide.endpoint,
+              variable: newVariable,
+            },
+          });
+        });
       });
     });
 
-    describe('Validators', () => {
-      describe('queryData', () => {
-        let error;
+    describe('Props', () => {
+      const mockGroupCiVariables = mockGroupVariables.data.group.ciVariables;
+      const mockProjectCiVariables = mockProjectVariables.data.project.ciVariables;
+
+      describe('in a specific context as', () => {
+        it.each`
+          name          | mockVariablesValue      | mockEnvironmentsValue      | withEnvironments | expectedEnvironments | propsFn                | provideFn               | mutation             | maxVariableLimit
+          ${'project'}  | ${mockProjectVariables} | ${mockProjectEnvironments} | ${true}          | ${['prod', 'dev']}   | ${createProjectProps}  | ${createProjectProvide} | ${null}              | ${mockProjectCiVariables.limit}
+          ${'group'}    | ${mockGroupVariables}   | ${[]}                      | ${false}         | ${[]}                | ${createGroupProps}    | ${createGroupProvide}   | ${getGroupVariables} | ${mockGroupCiVariables.limit}
+          ${'instance'} | ${mockAdminVariables}   | ${[]}                      | ${false}         | ${[]}                | ${createInstanceProps} | ${() => {}}             | ${getAdminVariables} | ${0}
+        `(
+          'passes down all the required props when its a $name component',
+          async ({
+            mutation,
+            maxVariableLimit,
+            mockVariablesValue,
+            mockEnvironmentsValue,
+            withEnvironments,
+            expectedEnvironments,
+            propsFn,
+            provideFn,
+          }) => {
+            const props = propsFn();
+            const provide = provideFn();
 
-        beforeEach(async () => {
-          mockVariables.mockResolvedValue(mockGroupVariables);
-        });
+            mockVariables.mockResolvedValue(mockVariablesValue);
+
+            if (withEnvironments) {
+              mockEnvironments.mockResolvedValue(mockEnvironmentsValue);
+            }
+
+            let customHandlers = null;
+
+            if (mutation) {
+              customHandlers = [[mutation, mockVariables]];
+            }
 
-        it('will mount component with right data', async () => {
-          try {
             await createComponentWithApollo({
-              customHandlers: [[getGroupVariables, mockVariables]],
-              props: { ...createGroupProps() },
+              customHandlers,
+              props,
+              provide: { ...provide, ...featureFlagProvide },
             });
-          } catch (e) {
-            error = e;
-          } finally {
-            expect(wrapper.exists()).toBe(true);
-            expect(error).toBeUndefined();
-          }
-        });
 
-        it('will not mount component with wrong data', async () => {
-          try {
-            await createComponentWithApollo({
-              customHandlers: [[getGroupVariables, mockVariables]],
-              props: { ...createGroupProps(), queryData: { wrongKey: {} } },
+            expect(findCiSettings().props()).toEqual({
+              areScopedVariablesAvailable: wrapper.props().areScopedVariablesAvailable,
+              hideEnvironmentScope: defaultProps.hideEnvironmentScope,
+              pageInfo: defaultProps.pageInfo,
+              isLoading: false,
+              maxVariableLimit,
+              variables: wrapper.props().queryData.ciVariables.lookup(mockVariablesValue.data)
+                ?.nodes,
+              entity: props.entity,
+              environments: expectedEnvironments,
             });
-          } catch (e) {
-            error = e;
-          } finally {
-            expect(wrapper.exists()).toBe(false);
-            expect(error.toString()).toContain('custom validator check failed for prop');
+          },
+        );
+      });
+
+      describe('refetchAfterMutation', () => {
+        it.each`
+          bool     | text
+          ${true}  | ${'refetches the variables'}
+          ${false} | ${'does not refetch the variables'}
+        `('when $bool it $text', async ({ bool }) => {
+          await createComponentWithApollo({
+            props: { ...createInstanceProps(), refetchAfterMutation: bool },
+            provide: featureFlagProvide,
+          });
+
+          jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({ data: {} });
+          jest
+            .spyOn(wrapper.vm.$apollo.queries.ciVariables, 'refetch')
+            .mockImplementation(jest.fn());
+
+          await findCiSettings().vm.$emit('add-variable', newVariable);
+
+          await nextTick();
+
+          if (bool) {
+            expect(wrapper.vm.$apollo.queries.ciVariables.refetch).toHaveBeenCalled();
+          } else {
+            expect(wrapper.vm.$apollo.queries.ciVariables.refetch).not.toHaveBeenCalled();
           }
         });
       });
 
-      describe('mutationData', () => {
-        let error;
+      describe('Validators', () => {
+        describe('queryData', () => {
+          let error;
 
-        beforeEach(async () => {
-          mockVariables.mockResolvedValue(mockGroupVariables);
-        });
+          beforeEach(async () => {
+            mockVariables.mockResolvedValue(mockGroupVariables);
+          });
 
-        it('will mount component with right data', async () => {
-          try {
-            await createComponentWithApollo({
-              props: { ...createGroupProps() },
-            });
-          } catch (e) {
-            error = e;
-          } finally {
-            expect(wrapper.exists()).toBe(true);
-            expect(error).toBeUndefined();
-          }
+          it('will mount component with right data', async () => {
+            try {
+              await createComponentWithApollo({
+                customHandlers: [[getGroupVariables, mockVariables]],
+                props: { ...createGroupProps() },
+                provide: featureFlagProvide,
+              });
+            } catch (e) {
+              error = e;
+            } finally {
+              expect(wrapper.exists()).toBe(true);
+              expect(error).toBeUndefined();
+            }
+          });
+
+          it('will not mount component with wrong data', async () => {
+            try {
+              await createComponentWithApollo({
+                customHandlers: [[getGroupVariables, mockVariables]],
+                props: { ...createGroupProps(), queryData: { wrongKey: {} } },
+                provide: featureFlagProvide,
+              });
+            } catch (e) {
+              error = e;
+            } finally {
+              expect(wrapper.exists()).toBe(false);
+              expect(error.toString()).toContain('custom validator check failed for prop');
+            }
+          });
         });
 
-        it('will not mount component with wrong data', async () => {
-          try {
-            await createComponentWithApollo({
-              props: { ...createGroupProps(), mutationData: { wrongKey: {} } },
-            });
-          } catch (e) {
-            error = e;
-          } finally {
-            expect(wrapper.exists()).toBe(false);
-            expect(error.toString()).toContain('custom validator check failed for prop');
-          }
+        describe('mutationData', () => {
+          let error;
+
+          beforeEach(async () => {
+            mockVariables.mockResolvedValue(mockGroupVariables);
+          });
+
+          it('will mount component with right data', async () => {
+            try {
+              await createComponentWithApollo({
+                props: { ...createGroupProps() },
+                provide: featureFlagProvide,
+              });
+            } catch (e) {
+              error = e;
+            } finally {
+              expect(wrapper.exists()).toBe(true);
+              expect(error).toBeUndefined();
+            }
+          });
+
+          it('will not mount component with wrong data', async () => {
+            try {
+              await createComponentWithApollo({
+                props: { ...createGroupProps(), mutationData: { wrongKey: {} } },
+                provide: featureFlagProvide,
+              });
+            } catch (e) {
+              error = e;
+            } finally {
+              expect(wrapper.exists()).toBe(false);
+              expect(error.toString()).toContain('custom validator check failed for prop');
+            }
+          });
         });
       });
     });
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
index 9e2508c56ee..2ef789e89c3 100644
--- a/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
+++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_table_spec.js
@@ -12,18 +12,25 @@ describe('Ci variable table', () => {
     entity: 'project',
     isLoading: false,
     maxVariableLimit: mockVariables(projectString).length + 1,
+    pageInfo: {},
     variables: mockVariables(projectString),
   };
 
   const mockMaxVariableLimit = defaultProps.variables.length;
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, provide = {} } = {}) => {
     wrapper = mountExtended(CiVariableTable, {
       attachTo: document.body,
       propsData: {
         ...defaultProps,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          ciVariablesPages: false,
+        },
+        ...provide,
+      },
     });
   };
 
@@ -41,132 +48,136 @@ describe('Ci variable table', () => {
     return sprintf(EXCEEDS_VARIABLE_LIMIT_TEXT, { entity, currentVariableCount, maxVariableLimit });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('When table is empty', () => {
-    beforeEach(() => {
-      createComponent({ props: { variables: [] } });
-    });
+  describe.each`
+    isVariablePagesEnabled | text
+    ${true}                | ${'enabled'}
+    ${false}               | ${'disabled'}
+  `('When Pages FF is $text', ({ isVariablePagesEnabled }) => {
+    const provide = isVariablePagesEnabled ? { glFeatures: { ciVariablesPages: true } } : {};
 
-    it('displays empty message', () => {
-      expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
-    });
-
-    it('hides the reveal button', () => {
-      expect(findRevealButton().exists()).toBe(false);
-    });
-  });
+    describe('When table is empty', () => {
+      beforeEach(() => {
+        createComponent({ props: { variables: [] }, provide });
+      });
 
-  describe('When table has variables', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+      it('displays empty message', () => {
+        expect(findEmptyVariablesPlaceholder().exists()).toBe(true);
+      });
 
-    it('does not display the empty message', () => {
-      expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
+      it('hides the reveal button', () => {
+        expect(findRevealButton().exists()).toBe(false);
+      });
     });
 
-    it('displays the reveal button', () => {
-      expect(findRevealButton().exists()).toBe(true);
-    });
+    describe('When table has variables', () => {
+      beforeEach(() => {
+        createComponent({ provide });
+      });
 
-    it('displays the correct amount of variables', async () => {
-      expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(defaultProps.variables.length);
-    });
+      it('does not display the empty message', () => {
+        expect(findEmptyVariablesPlaceholder().exists()).toBe(false);
+      });
 
-    it('displays the correct variable options', async () => {
-      expect(findOptionsValues(0)).toBe('Protected, Expanded');
-      expect(findOptionsValues(1)).toBe('Masked');
-    });
+      it('displays the reveal button', () => {
+        expect(findRevealButton().exists()).toBe(true);
+      });
 
-    it('enables the Add Variable button', () => {
-      expect(findAddButton().props('disabled')).toBe(false);
-    });
-  });
+      it('displays the correct amount of variables', async () => {
+        expect(wrapper.findAll('.js-ci-variable-row')).toHaveLength(defaultProps.variables.length);
+      });
 
-  describe('When variables have exceeded the max limit', () => {
-    beforeEach(() => {
-      createComponent({ props: { maxVariableLimit: mockVariables(projectString).length } });
-    });
+      it('displays the correct variable options', async () => {
+        expect(findOptionsValues(0)).toBe('Protected, Expanded');
+        expect(findOptionsValues(1)).toBe('Masked');
+      });
 
-    it('disables the Add Variable button', () => {
-      expect(findAddButton().props('disabled')).toBe(true);
+      it('enables the Add Variable button', () => {
+        expect(findAddButton().props('disabled')).toBe(false);
+      });
     });
-  });
 
-  describe('max limit reached alert', () => {
-    describe('when there is no variable limit', () => {
+    describe('When variables have exceeded the max limit', () => {
       beforeEach(() => {
         createComponent({
-          props: { maxVariableLimit: 0 },
+          props: { maxVariableLimit: mockVariables(projectString).length },
+          provide,
         });
       });
 
-      it('hides alert', () => {
-        expect(findLimitReachedAlerts().length).toBe(0);
+      it('disables the Add Variable button', () => {
+        expect(findAddButton().props('disabled')).toBe(true);
       });
     });
 
-    describe('when variable limit exists', () => {
-      it('hides alert when limit has not been reached', () => {
-        createComponent();
+    describe('max limit reached alert', () => {
+      describe('when there is no variable limit', () => {
+        beforeEach(() => {
+          createComponent({
+            props: { maxVariableLimit: 0 },
+            provide,
+          });
+        });
 
-        expect(findLimitReachedAlerts().length).toBe(0);
+        it('hides alert', () => {
+          expect(findLimitReachedAlerts().length).toBe(0);
+        });
       });
 
-      it('shows alert when limit has been reached', () => {
-        const exceedsVariableLimitText = generateExceedsVariableLimitText(
-          defaultProps.entity,
-          defaultProps.variables.length,
-          mockMaxVariableLimit,
-        );
+      describe('when variable limit exists', () => {
+        it('hides alert when limit has not been reached', () => {
+          createComponent({ provide });
 
-        createComponent({
-          props: { maxVariableLimit: mockMaxVariableLimit },
+          expect(findLimitReachedAlerts().length).toBe(0);
         });
 
-        expect(findLimitReachedAlerts().length).toBe(2);
+        it('shows alert when limit has been reached', () => {
+          const exceedsVariableLimitText = generateExceedsVariableLimitText(
+            defaultProps.entity,
+            defaultProps.variables.length,
+            mockMaxVariableLimit,
+          );
+
+          createComponent({
+            props: { maxVariableLimit: mockMaxVariableLimit },
+          });
 
-        expect(findLimitReachedAlerts().at(0).props('dismissible')).toBe(false);
-        expect(findLimitReachedAlerts().at(0).text()).toContain(exceedsVariableLimitText);
+          expect(findLimitReachedAlerts().length).toBe(2);
 
-        expect(findLimitReachedAlerts().at(1).props('dismissible')).toBe(false);
-        expect(findLimitReachedAlerts().at(1).text()).toContain(exceedsVariableLimitText);
+          expect(findLimitReachedAlerts().at(0).props('dismissible')).toBe(false);
+          expect(findLimitReachedAlerts().at(0).text()).toContain(exceedsVariableLimitText);
+
+          expect(findLimitReachedAlerts().at(1).props('dismissible')).toBe(false);
+          expect(findLimitReachedAlerts().at(1).text()).toContain(exceedsVariableLimitText);
+        });
       });
     });
-  });
 
-  describe('Table click actions', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+    describe('Table click actions', () => {
+      beforeEach(() => {
+        createComponent({ provide });
+      });
 
-    it('reveals secret values when button is clicked', async () => {
-      expect(findHiddenValues()).toHaveLength(defaultProps.variables.length);
-      expect(findRevealedValues()).toHaveLength(0);
+      it('reveals secret values when button is clicked', async () => {
+        expect(findHiddenValues()).toHaveLength(defaultProps.variables.length);
+        expect(findRevealedValues()).toHaveLength(0);
 
-      await findRevealButton().trigger('click');
+        await findRevealButton().trigger('click');
 
-      expect(findHiddenValues()).toHaveLength(0);
-      expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
-    });
+        expect(findHiddenValues()).toHaveLength(0);
+        expect(findRevealedValues()).toHaveLength(defaultProps.variables.length);
+      });
 
-    it('dispatches `setSelectedVariable` with correct variable to edit', async () => {
-      await findEditButton().trigger('click');
+      it('dispatches `setSelectedVariable` with correct variable to edit', async () => {
+        await findEditButton().trigger('click');
 
-      expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
-    });
+        expect(wrapper.emitted('set-selected-variable')).toEqual([[defaultProps.variables[0]]]);
+      });
 
-    it('dispatches `setSelectedVariable` with no variable when adding a new one', async () => {
-      await findAddButton().trigger('click');
+      it('dispatches `setSelectedVariable` with no variable when adding a new one', async () => {
+        await findAddButton().trigger('click');
 
-      expect(wrapper.emitted('set-selected-variable')).toEqual([[null]]);
+        expect(wrapper.emitted('set-selected-variable')).toEqual([[null]]);
+      });
     });
   });
 });
diff --git a/spec/frontend/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert_spec.js b/spec/frontend/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert_spec.js
index b00e1adab63..48a85eba433 100644
--- a/spec/frontend/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/code_snippet_alert/code_snippet_alert_spec.js
@@ -41,10 +41,6 @@ describe('EE - CodeSnippetAlert', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it("provides a link to the feature's documentation", () => {
     const docsLink = findDocsLink();
 
diff --git a/spec/frontend/ci/pipeline_editor/components/commit/commit_form_spec.js b/spec/frontend/ci/pipeline_editor/components/commit/commit_form_spec.js
index 8e1d8081dd8..b2dfa900b1d 100644
--- a/spec/frontend/ci/pipeline_editor/components/commit/commit_form_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/commit/commit_form_spec.js
@@ -33,10 +33,6 @@ describe('Pipeline Editor | Commit Form', () => {
   const findSubmitBtn = () => wrapper.find('[type="submit"]');
   const findCancelBtn = () => wrapper.find('[type="reset"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the form is displayed', () => {
     beforeEach(async () => {
       createComponent();
diff --git a/spec/frontend/ci/pipeline_editor/components/commit/commit_section_spec.js b/spec/frontend/ci/pipeline_editor/components/commit/commit_section_spec.js
index f6e93c55bbb..f8be035d33c 100644
--- a/spec/frontend/ci/pipeline_editor/components/commit/commit_section_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/commit/commit_section_spec.js
@@ -113,10 +113,6 @@ describe('Pipeline Editor | Commit section', () => {
     await waitForPromises();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the user commits a new file', () => {
     beforeEach(async () => {
       mockMutateCommitData.mockResolvedValue(mockCommitCreateResponse);
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
index 137137ec657..0ecb77674d5 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js
@@ -21,10 +21,6 @@ describe('First pipeline card', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the title', () => {
     expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
   });
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/cards/getting_started_card_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/cards/getting_started_card_spec.js
index cdce757ce7c..417597eaf1f 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/cards/getting_started_card_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/cards/getting_started_card_spec.js
@@ -12,10 +12,6 @@ describe('Getting started card', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the title', () => {
     expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
   });
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js
index 6909916c3e6..5399924b462 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js
@@ -33,10 +33,6 @@ describe('Pipeline config reference card', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the title', () => {
     expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
   });
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js
index 0c6879020de..547ba3cbd8b 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js
@@ -12,10 +12,6 @@ describe('Visual and Lint card', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the title', () => {
     expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
   });
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
index 42e372cc1db..b07d63dd5d9 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
@@ -11,10 +11,6 @@ describe('Pipeline editor drawer', () => {
     wrapper = shallowMount(PipelineEditorDrawer);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits close event when closing the drawer', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js b/spec/frontend/ci/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js
index f510c61ee74..b0c889cfc9f 100644
--- a/spec/frontend/ci/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js
@@ -17,10 +17,6 @@ describe('Demo job pill', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the jobName', () => {
     expect(wrapper.text()).toContain(jobName);
   });
diff --git a/spec/frontend/ci/pipeline_editor/components/editor/ci_config_merged_preview_spec.js b/spec/frontend/ci/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
index 2a2bc2547cc..2182b6e9cc6 100644
--- a/spec/frontend/ci/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/editor/ci_config_merged_preview_spec.js
@@ -34,10 +34,6 @@ describe('Text editor component', () => {
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findEditor = () => wrapper.findComponent(MockSourceEditor);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when status is valid', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js b/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
index dc72694d26f..560e8840d57 100644
--- a/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
@@ -26,7 +26,6 @@ describe('CI Editor Header', () => {
   const findHelpBtn = () => wrapper.findByTestId('drawer-toggle');
 
   afterEach(() => {
-    wrapper.destroy();
     unmockTracking();
   });
 
diff --git a/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js b/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
index ec987be8cb8..0be26570fbf 100644
--- a/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/editor/text_editor_spec.js
@@ -1,7 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
+import { editor as monacoEditor } from 'monaco-editor';
 
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
 import { EDITOR_READY_EVENT } from '~/editor/constants';
+import { CiSchemaExtension as MockedCiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
 import { SOURCE_EDITOR_DEBOUNCE } from '~/ci/pipeline_editor/constants';
+import eventHub, { SCROLL_EDITOR_TO_BOTTOM } from '~/ci/pipeline_editor/event_hub';
 import TextEditor from '~/ci/pipeline_editor/components/editor/text_editor.vue';
 import {
   mockCiConfigPath,
@@ -12,19 +16,26 @@ import {
   mockDefaultBranch,
 } from '../../mock_data';
 
+jest.mock('monaco-editor');
+jest.mock('~/editor/extensions/source_editor_ci_schema_ext', () => {
+  const { createMockSourceEditorExtension } = jest.requireActual(
+    'helpers/create_mock_source_editor_extension',
+  );
+  const { CiSchemaExtension } = jest.requireActual(
+    '~/editor/extensions/source_editor_ci_schema_ext',
+  );
+
+  return {
+    CiSchemaExtension: createMockSourceEditorExtension(CiSchemaExtension),
+  };
+});
+
 describe('Pipeline Editor | Text editor component', () => {
   let wrapper;
 
   let editorReadyListener;
-  let mockUse;
-  let mockRegisterCiSchema;
-  let mockEditorInstance;
-  let editorInstanceDetail;
-
-  const MockSourceEditor = {
-    template: '<div/>',
-    props: ['value', 'fileName', 'editorOptions', 'debounceValue'],
-  };
+
+  const getMonacoEditor = () => monacoEditor.create.mock.results[0].value;
 
   const createComponent = (mountFn = shallowMount) => {
     wrapper = mountFn(TextEditor, {
@@ -44,33 +55,17 @@ describe('Pipeline Editor | Text editor component', () => {
         [EDITOR_READY_EVENT]: editorReadyListener,
       },
       stubs: {
-        SourceEditor: MockSourceEditor,
+        SourceEditor,
       },
     });
   };
 
-  const findEditor = () => wrapper.findComponent(MockSourceEditor);
+  const findEditor = () => wrapper.findComponent(SourceEditor);
 
   beforeEach(() => {
-    editorReadyListener = jest.fn();
-    mockUse = jest.fn();
-    mockRegisterCiSchema = jest.fn();
-    mockEditorInstance = {
-      use: mockUse,
-      registerCiSchema: mockRegisterCiSchema,
-    };
-    editorInstanceDetail = {
-      detail: {
-        instance: mockEditorInstance,
-      },
-    };
-  });
+    jest.spyOn(monacoEditor, 'create');
 
-  afterEach(() => {
-    wrapper.destroy();
-
-    mockUse.mockClear();
-    mockRegisterCiSchema.mockClear();
+    editorReadyListener = jest.fn();
   });
 
   describe('template', () => {
@@ -99,21 +94,34 @@ describe('Pipeline Editor | Text editor component', () => {
     });
 
     it('bubbles up events', () => {
-      findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
-
       expect(editorReadyListener).toHaveBeenCalled();
     });
+
+    it('scrolls editor to bottom on scroll editor to bottom event', () => {
+      const setScrollTop = jest.spyOn(getMonacoEditor(), 'setScrollTop');
+
+      eventHub.$emit(SCROLL_EDITOR_TO_BOTTOM);
+
+      expect(setScrollTop).toHaveBeenCalledWith(getMonacoEditor().getScrollHeight());
+    });
+
+    it('when destroyed, destroys scroll listener', () => {
+      const setScrollTop = jest.spyOn(getMonacoEditor(), 'setScrollTop');
+
+      wrapper.destroy();
+      eventHub.$emit(SCROLL_EDITOR_TO_BOTTOM);
+
+      expect(setScrollTop).not.toHaveBeenCalled();
+    });
   });
 
   describe('CI schema', () => {
     beforeEach(() => {
       createComponent();
-      findEditor().vm.$emit(EDITOR_READY_EVENT, editorInstanceDetail);
     });
 
     it('configures editor with syntax highlight', () => {
-      expect(mockUse).toHaveBeenCalledTimes(1);
-      expect(mockRegisterCiSchema).toHaveBeenCalledTimes(1);
+      expect(MockedCiSchemaExtension.mockedMethods.registerCiSchema).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/spec/frontend/ci/pipeline_editor/components/file-nav/branch_switcher_spec.js b/spec/frontend/ci/pipeline_editor/components/file-nav/branch_switcher_spec.js
index a26232df58f..bf14f4c4cd6 100644
--- a/spec/frontend/ci/pipeline_editor/components/file-nav/branch_switcher_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/file-nav/branch_switcher_spec.js
@@ -133,10 +133,6 @@ describe('Pipeline editor branch switcher', () => {
     mockAvailableBranchQuery = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const testErrorHandling = () => {
     expect(wrapper.emitted('showError')).toBeDefined();
     expect(wrapper.emitted('showError')[0]).toEqual([
diff --git a/spec/frontend/ci/pipeline_editor/components/file-nav/pipeline_editor_file_nav_spec.js b/spec/frontend/ci/pipeline_editor/components/file-nav/pipeline_editor_file_nav_spec.js
index 907db16913c..19c113689c2 100644
--- a/spec/frontend/ci/pipeline_editor/components/file-nav/pipeline_editor_file_nav_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/file-nav/pipeline_editor_file_nav_spec.js
@@ -48,10 +48,6 @@ describe('Pipeline editor file nav', () => {
   const findFileTreeBtn = () => wrapper.findByTestId('file-tree-toggle');
   const findPopoverContainer = () => wrapper.findComponent(FileTreePopover);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ci/pipeline_editor/components/file-tree/container_spec.js b/spec/frontend/ci/pipeline_editor/components/file-tree/container_spec.js
index 11ba517e0eb..306dd78d395 100644
--- a/spec/frontend/ci/pipeline_editor/components/file-tree/container_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/file-tree/container_spec.js
@@ -22,7 +22,7 @@ describe('Pipeline editor file nav', () => {
           includes,
         },
         directives: {
-          GlTooltip: createMockDirective(),
+          GlTooltip: createMockDirective('gl-tooltip'),
         },
         stubs,
       }),
@@ -35,7 +35,6 @@ describe('Pipeline editor file nav', () => {
 
   afterEach(() => {
     localStorage.clear();
-    wrapper.destroy();
   });
 
   describe('template', () => {
diff --git a/spec/frontend/ci/pipeline_editor/components/file-tree/file_item_spec.js b/spec/frontend/ci/pipeline_editor/components/file-tree/file_item_spec.js
index bceb741f91c..80737e9a8ab 100644
--- a/spec/frontend/ci/pipeline_editor/components/file-tree/file_item_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/file-tree/file_item_spec.js
@@ -18,10 +18,6 @@ describe('Pipeline editor file nav', () => {
   const fileIcon = () => wrapper.findComponent(FileIcon);
   const link = () => wrapper.findComponent(GlLink);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_header_spec.js b/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_header_spec.js
index 555b9f29fbf..a651664851e 100644
--- a/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_header_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/header/pipeline_editor_header_spec.js
@@ -26,11 +26,6 @@ describe('Pipeline editor header', () => {
   const findPipelineStatus = () => wrapper.findComponent(PipelineStatus);
   const findValidationSegment = () => wrapper.findComponent(ValidationSegment);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('template', () => {
     it('hides the pipeline status for new projects without a CI file', () => {
       createComponent({ props: { isNewCiConfigFile: true } });
diff --git a/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
index a62c51ffb59..3faa2890254 100644
--- a/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/header/pipeline_status_spec.js
@@ -48,7 +48,6 @@ describe('Pipeline Status', () => {
 
   afterEach(() => {
     mockPipelineQuery.mockReset();
-    wrapper.destroy();
   });
 
   describe('loading icon', () => {
diff --git a/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js b/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js
index 0853a6f4ca4..a107a626c6d 100644
--- a/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/header/validation_segment_spec.js
@@ -1,11 +1,10 @@
 import VueApollo from 'vue-apollo';
-import { GlIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import Vue from 'vue';
 import { escape } from 'lodash';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import { sprintf } from '~/locale';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import ValidationSegment, {
   i18n,
 } from '~/ci/pipeline_editor/components/header/validation_segment.vue';
@@ -20,8 +19,8 @@ import {
 } from '~/ci/pipeline_editor/constants';
 import {
   mergeUnwrappedCiConfig,
+  mockCiTroubleshootingPath,
   mockCiYml,
-  mockLintUnavailableHelpPagePath,
   mockYmlHelpPagePath,
 } from '../../mock_data';
 
@@ -43,29 +42,27 @@ describe('Validation segment component', () => {
       },
     });
 
-    wrapper = extendedWrapper(
-      shallowMount(ValidationSegment, {
-        apolloProvider: mockApollo,
-        provide: {
-          ymlHelpPagePath: mockYmlHelpPagePath,
-          lintUnavailableHelpPagePath: mockLintUnavailableHelpPagePath,
-        },
-        propsData: {
-          ciConfig: mergeUnwrappedCiConfig(),
-          ciFileContent: mockCiYml,
-          ...props,
-        },
-      }),
-    );
+    wrapper = shallowMountExtended(ValidationSegment, {
+      apolloProvider: mockApollo,
+      provide: {
+        ymlHelpPagePath: mockYmlHelpPagePath,
+        ciTroubleshootingPath: mockCiTroubleshootingPath,
+      },
+      propsData: {
+        ciConfig: mergeUnwrappedCiConfig(),
+        ciFileContent: mockCiYml,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
   };
 
   const findIcon = () => wrapper.findComponent(GlIcon);
-  const findLearnMoreLink = () => wrapper.findByTestId('learnMoreLink');
-  const findValidationMsg = () => wrapper.findByTestId('validationMsg');
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+  const findValidationMsg = () => wrapper.findComponent(GlSprintf);
+  const findValidationSegment = () => wrapper.findByTestId('validation-segment');
 
   it('shows the loading state', () => {
     createComponent({ appStatus: EDITOR_APP_STATUS_LOADING });
@@ -82,8 +79,12 @@ describe('Validation segment component', () => {
       expect(findIcon().props('name')).toBe('check');
     });
 
+    it('does not render a link', () => {
+      expect(findHelpLink().exists()).toBe(false);
+    });
+
     it('shows a message for empty state', () => {
-      expect(findValidationMsg().text()).toBe(i18n.empty);
+      expect(findValidationSegment().text()).toBe(i18n.empty);
     });
   });
 
@@ -97,12 +98,15 @@ describe('Validation segment component', () => {
     });
 
     it('shows a message for valid state', () => {
-      expect(findValidationMsg().text()).toContain(i18n.valid);
+      expect(findValidationSegment().text()).toBe(
+        sprintf(i18n.valid, { linkStart: '', linkEnd: '' }),
+      );
     });
 
     it('shows the learn more link', () => {
-      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
-      expect(findLearnMoreLink().text()).toBe(i18n.learnMore);
+      expect(findValidationMsg().exists()).toBe(true);
+      expect(findValidationMsg().text()).toBe('Learn more');
+      expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath);
     });
   });
 
@@ -117,13 +121,16 @@ describe('Validation segment component', () => {
       expect(findIcon().props('name')).toBe('warning-solid');
     });
 
-    it('has message for invalid state', () => {
-      expect(findValidationMsg().text()).toBe(i18n.invalid);
+    it('shows a message for invalid state', () => {
+      expect(findValidationSegment().text()).toBe(
+        sprintf(i18n.invalid, { linkStart: '', linkEnd: '' }),
+      );
     });
 
     it('shows the learn more link', () => {
-      expect(findLearnMoreLink().attributes('href')).toBe(mockYmlHelpPagePath);
-      expect(findLearnMoreLink().text()).toBe('Learn more');
+      expect(findValidationMsg().exists()).toBe(true);
+      expect(findValidationMsg().text()).toBe('Learn more');
+      expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath);
     });
 
     describe('with multiple errors', () => {
@@ -140,11 +147,16 @@ describe('Validation segment component', () => {
           },
         });
       });
+
+      it('shows the learn more link', () => {
+        expect(findValidationMsg().exists()).toBe(true);
+        expect(findValidationMsg().text()).toBe('Learn more');
+        expect(findHelpLink().attributes('href')).toBe(mockYmlHelpPagePath);
+      });
+
       it('shows an invalid state with an error', () => {
-        // Test the error is shown _and_ the string matches
-        expect(findValidationMsg().text()).toContain(firstError);
-        expect(findValidationMsg().text()).toBe(
-          sprintf(i18n.invalidWithReason, { reason: firstError }),
+        expect(findValidationSegment().text()).toBe(
+          sprintf(i18n.invalidWithReason, { reason: firstError, linkStart: '', linkEnd: '' }),
         );
       });
     });
@@ -163,10 +175,8 @@ describe('Validation segment component', () => {
         });
       });
       it('shows an invalid state with an error while preventing XSS', () => {
-        const { innerHTML } = findValidationMsg().element;
-
-        expect(innerHTML).not.toContain(evilError);
-        expect(innerHTML).toContain(escape(evilError));
+        expect(findValidationSegment().html()).not.toContain(evilError);
+        expect(findValidationSegment().html()).toContain(escape(evilError));
       });
     });
   });
@@ -182,16 +192,18 @@ describe('Validation segment component', () => {
     });
 
     it('show a message that the service is unavailable', () => {
-      expect(findValidationMsg().text()).toBe(i18n.unavailableValidation);
+      expect(findValidationSegment().text()).toBe(
+        sprintf(i18n.unavailableValidation, { linkStart: '', linkEnd: '' }),
+      );
     });
 
     it('shows the time-out icon', () => {
       expect(findIcon().props('name')).toBe('time-out');
     });
 
-    it('shows the learn more link', () => {
-      expect(findLearnMoreLink().attributes('href')).toBe(mockLintUnavailableHelpPagePath);
-      expect(findLearnMoreLink().text()).toBe(i18n.learnMore);
+    it('shows the link to ci troubleshooting', () => {
+      expect(findValidationMsg().exists()).toBe(true);
+      expect(findHelpLink().attributes('href')).toBe(mockCiTroubleshootingPath);
     });
   });
 });
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js
new file mode 100644
index 00000000000..c7c40c3a4b9
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item_spec.js
@@ -0,0 +1,39 @@
+import ImageItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { JOB_TEMPLATE } from '~/ci/pipeline_editor/components/job_assistant_drawer/constants';
+
+describe('Image item', () => {
+  let wrapper;
+
+  const findImageNameInput = () => wrapper.findByTestId('image-name-input');
+  const findImageEntrypointInput = () => wrapper.findByTestId('image-entrypoint-input');
+
+  const dummyImageName = 'dummyImageName';
+  const dummyImageEntrypoint = 'dummyImageEntrypoint';
+
+  const createComponent = ({ job = JSON.parse(JSON.stringify(JOB_TEMPLATE)) } = {}) => {
+    wrapper = shallowMountExtended(ImageItem, {
+      propsData: {
+        job,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('should emit update job event when filling inputs', () => {
+    expect(wrapper.emitted('update-job')).toBeUndefined();
+
+    findImageNameInput().vm.$emit('input', dummyImageName);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(1);
+    expect(wrapper.emitted('update-job')[0]).toEqual(['image.name', dummyImageName]);
+
+    findImageEntrypointInput().vm.$emit('input', dummyImageEntrypoint);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(2);
+    expect(wrapper.emitted('update-job')[1]).toEqual(['image.entrypoint', [dummyImageEntrypoint]]);
+  });
+});
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item_spec.js
new file mode 100644
index 00000000000..eaad0dae90d
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item_spec.js
@@ -0,0 +1,61 @@
+import createStore from '~/ci/pipeline_editor/store';
+import JobSetupItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { JOB_TEMPLATE } from '~/ci/pipeline_editor/components/job_assistant_drawer/constants';
+
+describe('Job setup item', () => {
+  let wrapper;
+
+  const findJobNameInput = () => wrapper.findByTestId('job-name-input');
+  const findJobScriptInput = () => wrapper.findByTestId('job-script-input');
+  const findJobTagsInput = () => wrapper.findByTestId('job-tags-input');
+  const findJobStageInput = () => wrapper.findByTestId('job-stage-input');
+
+  const dummyJobName = 'dummyJobName';
+  const dummyJobScript = 'dummyJobScript';
+  const dummyJobStage = 'dummyJobStage';
+  const dummyJobTags = ['tag1'];
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(JobSetupItem, {
+      store: createStore(),
+      propsData: {
+        tagOptions: [
+          { id: 'tag1', name: 'tag1' },
+          { id: 'tag2', name: 'tag2' },
+        ],
+        isNameValid: true,
+        isScriptValid: true,
+        job: JSON.parse(JSON.stringify(JOB_TEMPLATE)),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('should emit update job event when filling inputs', () => {
+    expect(wrapper.emitted('update-job')).toBeUndefined();
+
+    findJobNameInput().vm.$emit('input', dummyJobName);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(1);
+    expect(wrapper.emitted('update-job')[0]).toEqual(['name', dummyJobName]);
+
+    findJobScriptInput().vm.$emit('input', dummyJobScript);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(2);
+    expect(wrapper.emitted('update-job')[1]).toEqual(['script', dummyJobScript]);
+
+    findJobStageInput().vm.$emit('input', dummyJobStage);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(3);
+    expect(wrapper.emitted('update-job')[2]).toEqual(['stage', dummyJobStage]);
+
+    findJobTagsInput().vm.$emit('input', dummyJobTags);
+
+    expect(wrapper.emitted('update-job')).toHaveLength(4);
+    expect(wrapper.emitted('update-job')[3]).toEqual(['tags', dummyJobTags]);
+  });
+});
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
index 79200d92598..b293805d653 100644
--- a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
@@ -1,24 +1,47 @@
 import { GlDrawer } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
+import { stringify } from 'yaml';
 import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue';
+import JobSetupItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/job_setup_item.vue';
+import ImageItem from '~/ci/pipeline_editor/components/job_assistant_drawer/accordion_items/image_item.vue';
+import getAllRunners from '~/ci/runner/graphql/list/all_runners.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import createStore from '~/ci/pipeline_editor/store';
+import { mockAllRunnersQueryResponse } from 'jest/ci/pipeline_editor/mock_data';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import eventHub, { SCROLL_EDITOR_TO_BOTTOM } from '~/ci/pipeline_editor/event_hub';
 
 Vue.use(VueApollo);
 
 describe('Job assistant drawer', () => {
   let wrapper;
+  let mockApollo;
+
+  const dummyJobName = 'a';
+  const dummyJobScript = 'b';
+  const dummyImageName = 'c';
+  const dummyImageEntrypoint = 'd';
 
   const findDrawer = () => wrapper.findComponent(GlDrawer);
+  const findJobSetupItem = () => wrapper.findComponent(JobSetupItem);
+  const findImageItem = () => wrapper.findComponent(ImageItem);
 
+  const findConfirmButton = () => wrapper.findByTestId('confirm-button');
   const findCancelButton = () => wrapper.findByTestId('cancel-button');
 
   const createComponent = () => {
+    mockApollo = createMockApollo([
+      [getAllRunners, jest.fn().mockResolvedValue(mockAllRunnersQueryResponse)],
+    ]);
+
     wrapper = mountExtended(JobAssistantDrawer, {
+      store: createStore(),
       propsData: {
         isVisible: true,
       },
+      apolloProvider: mockApollo,
     });
   };
 
@@ -27,6 +50,14 @@ describe('Job assistant drawer', () => {
     await waitForPromises();
   });
 
+  it('should contain job setup accordion', () => {
+    expect(findJobSetupItem().exists()).toBe(true);
+  });
+
+  it('should contain image accordion', () => {
+    expect(findImageItem().exists()).toBe(true);
+  });
+
   it('should emit close job assistant drawer event when closing the drawer', () => {
     expect(wrapper.emitted('close-job-assistant-drawer')).toBeUndefined();
 
@@ -42,4 +73,83 @@ describe('Job assistant drawer', () => {
 
     expect(wrapper.emitted('close-job-assistant-drawer')).toHaveLength(1);
   });
+
+  it('trigger validate if job name is empty', async () => {
+    const updateCiConfigSpy = jest.spyOn(wrapper.vm, 'updateCiConfig');
+    findJobSetupItem().vm.$emit('update-job', 'script', 'b');
+    findConfirmButton().trigger('click');
+
+    await nextTick();
+
+    expect(findJobSetupItem().props('isNameValid')).toBe(false);
+    expect(findJobSetupItem().props('isScriptValid')).toBe(true);
+    expect(updateCiConfigSpy).toHaveBeenCalledTimes(0);
+  });
+
+  describe('when enter valid input', () => {
+    beforeEach(() => {
+      findJobSetupItem().vm.$emit('update-job', 'name', dummyJobName);
+      findJobSetupItem().vm.$emit('update-job', 'script', dummyJobScript);
+      findImageItem().vm.$emit('update-job', 'image.name', dummyImageName);
+      findImageItem().vm.$emit('update-job', 'image.entrypoint', [dummyImageEntrypoint]);
+    });
+
+    it('passes correct prop to accordions', () => {
+      const accordions = [findJobSetupItem(), findImageItem()];
+      accordions.forEach((accordion) => {
+        expect(accordion.props('job')).toMatchObject({
+          name: dummyJobName,
+          script: dummyJobScript,
+          image: {
+            name: dummyImageName,
+            entrypoint: [dummyImageEntrypoint],
+          },
+        });
+      });
+    });
+
+    it('job name and script state should be valid', () => {
+      expect(findJobSetupItem().props('isNameValid')).toBe(true);
+      expect(findJobSetupItem().props('isScriptValid')).toBe(true);
+    });
+
+    it('should clear job data when click confirm button', async () => {
+      findConfirmButton().trigger('click');
+
+      await nextTick();
+
+      expect(findJobSetupItem().props('job')).toMatchObject({ name: '', script: '' });
+    });
+
+    it('should clear job data when click cancel button', async () => {
+      findCancelButton().trigger('click');
+
+      await nextTick();
+
+      expect(findJobSetupItem().props('job')).toMatchObject({ name: '', script: '' });
+    });
+
+    it('should update correct ci content when click add button', () => {
+      const updateCiConfigSpy = jest.spyOn(wrapper.vm, 'updateCiConfig');
+
+      findConfirmButton().trigger('click');
+
+      expect(updateCiConfigSpy).toHaveBeenCalledWith(
+        `\n${stringify({
+          [dummyJobName]: {
+            script: dummyJobScript,
+            image: { name: dummyImageName, entrypoint: [dummyImageEntrypoint] },
+          },
+        })}`,
+      );
+    });
+
+    it('should emit scroll editor to button event when click add button', () => {
+      const eventHubSpy = jest.spyOn(eventHub, '$emit');
+
+      findConfirmButton().trigger('click');
+
+      expect(eventHubSpy).toHaveBeenCalledWith(SCROLL_EDITOR_TO_BOTTOM);
+    });
+  });
 });
diff --git a/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_results_spec.js b/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_results_spec.js
index d43bdec3a33..cc9a77ae525 100644
--- a/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_results_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_results_spec.js
@@ -40,10 +40,6 @@ describe('CI Lint Results', () => {
   const findAfterScripts = findAllByTestId('after-script');
   const filterEmptyScripts = (property) => mockJobs.filter((job) => job[property].length !== 0);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Empty results', () => {
     it('renders with no jobs, errors or warnings defined', () => {
       createComponent({ jobs: undefined, errors: undefined, warnings: undefined }, shallowMount);
diff --git a/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_warnings_spec.js b/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_warnings_spec.js
index b5e3ea06c2c..d09e22898cd 100644
--- a/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_warnings_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/lint/ci_lint_warnings_spec.js
@@ -21,11 +21,6 @@ describe('CI lint warnings', () => {
   const findWarnings = () => wrapper.findAll('[data-testid="ci-lint-warning"]');
   const findWarningMessage = () => trimText(wrapper.findComponent(GlSprintf).text());
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('displays the warning alert', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
index f40db50aab7..52a543c7686 100644
--- a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -119,6 +119,7 @@ describe('Pipeline editor tabs component', () => {
   });
 
   afterEach(() => {
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
     wrapper.destroy();
   });
 
diff --git a/spec/frontend/ci/pipeline_editor/components/popovers/file_tree_popover_spec.js b/spec/frontend/ci/pipeline_editor/components/popovers/file_tree_popover_spec.js
index 63ebfc0559d..a9aabb103f2 100644
--- a/spec/frontend/ci/pipeline_editor/components/popovers/file_tree_popover_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/popovers/file_tree_popover_spec.js
@@ -22,7 +22,6 @@ describe('FileTreePopover component', () => {
 
   afterEach(() => {
     localStorage.clear();
-    wrapper.destroy();
   });
 
   describe('default', () => {
diff --git a/spec/frontend/ci/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js b/spec/frontend/ci/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js
index cf0b974081e..23f9c7a87ee 100644
--- a/spec/frontend/ci/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/popovers/validate_pipeline_popover_spec.js
@@ -19,10 +19,6 @@ describe('ValidatePopover component', () => {
   const findHelpLink = () => wrapper.findByTestId('help-link');
   const findFeedbackLink = () => wrapper.findByTestId('feedback-link');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     beforeEach(async () => {
       createComponent({
diff --git a/spec/frontend/ci/pipeline_editor/components/popovers/walkthrough_popover_spec.js b/spec/frontend/ci/pipeline_editor/components/popovers/walkthrough_popover_spec.js
index ca6033f2ff5..186fd803d47 100644
--- a/spec/frontend/ci/pipeline_editor/components/popovers/walkthrough_popover_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/popovers/walkthrough_popover_spec.js
@@ -12,10 +12,6 @@ describe('WalkthroughPopover component', () => {
     return extendedWrapper(mountFn(WalkthroughPopover));
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('CTA button clicked', () => {
     beforeEach(async () => {
       wrapper = createComponent(mount);
diff --git a/spec/frontend/ci/pipeline_editor/components/ui/confirm_unsaved_changes_dialog_spec.js b/spec/frontend/ci/pipeline_editor/components/ui/confirm_unsaved_changes_dialog_spec.js
index b22c98e5544..8b8dd4d22c2 100644
--- a/spec/frontend/ci/pipeline_editor/components/ui/confirm_unsaved_changes_dialog_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/ui/confirm_unsaved_changes_dialog_spec.js
@@ -4,10 +4,9 @@ import ConfirmDialog from '~/ci/pipeline_editor/components/ui/confirm_unsaved_ch
 describe('pipeline_editor/components/ui/confirm_unsaved_changes_dialog', () => {
   let beforeUnloadEvent;
   let setDialogContent;
-  let wrapper;
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(ConfirmDialog, {
+    shallowMount(ConfirmDialog, {
       propsData,
     });
   };
@@ -21,7 +20,6 @@ describe('pipeline_editor/components/ui/confirm_unsaved_changes_dialog', () => {
   afterEach(() => {
     beforeUnloadEvent.preventDefault.mockRestore();
     setDialogContent.mockRestore();
-    wrapper.destroy();
   });
 
   it('shows confirmation dialog when there are unsaved changes', () => {
diff --git a/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js b/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
index 3c68f74af43..e636a89c6d9 100644
--- a/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
@@ -23,10 +23,6 @@ describe('Pipeline editor empty state', () => {
   const findConfirmButton = () => wrapper.findComponent(GlButton);
   const findDescription = () => wrapper.findComponent(GlSprintf);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when project uses an external CI config', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/ci/pipeline_editor/components/validate/ci_validate_spec.js b/spec/frontend/ci/pipeline_editor/components/validate/ci_validate_spec.js
index ae25142b455..8874add6bb2 100644
--- a/spec/frontend/ci/pipeline_editor/components/validate/ci_validate_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/validate/ci_validate_spec.js
@@ -99,10 +99,6 @@ describe('Pipeline Editor Validate Tab', () => {
     mockBlobContentData = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('while initial CI content is loading', () => {
     beforeEach(() => {
       createComponent({ isBlobLoading: true });
diff --git a/spec/frontend/ci/pipeline_editor/mock_data.js b/spec/frontend/ci/pipeline_editor/mock_data.js
index 541123d7efc..ecfc477184b 100644
--- a/spec/frontend/ci/pipeline_editor/mock_data.js
+++ b/spec/frontend/ci/pipeline_editor/mock_data.js
@@ -12,7 +12,7 @@ export const mockCommitSha = 'aabbccdd';
 export const mockCommitNextSha = 'eeffgghh';
 export const mockIncludesHelpPagePath = '/-/includes/help';
 export const mockLintHelpPagePath = '/-/lint-help';
-export const mockLintUnavailableHelpPagePath = '/-/pipeline-editor/troubleshoot';
+export const mockCiTroubleshootingPath = '/-/pipeline-editor/troubleshoot';
 export const mockSimulatePipelineHelpPagePath = '/-/simulate-pipeline-help';
 export const mockYmlHelpPagePath = '/-/yml-help';
 export const mockCommitMessage = 'My commit message';
@@ -583,6 +583,91 @@ export const mockCommitCreateResponse = {
   },
 };
 
+export const mockAllRunnersQueryResponse = {
+  data: {
+    runners: {
+      nodes: [
+        {
+          id: 'gid://gitlab/Ci::Runner/1',
+          description: 'test',
+          runnerType: 'PROJECT_TYPE',
+          shortSha: 'DdTYMQGS',
+          version: '15.6.1',
+          ipAddress: '127.0.0.1',
+          active: true,
+          locked: true,
+          jobCount: 0,
+          jobExecutionStatus: 'IDLE',
+          tagList: ['tag1', 'tag2', 'tag3'],
+          createdAt: '2022-11-29T09:37:43Z',
+          contactedAt: null,
+          status: 'NEVER_CONTACTED',
+          userPermissions: {
+            updateRunner: true,
+            deleteRunner: true,
+            __typename: 'RunnerPermissions',
+          },
+          groups: null,
+          ownerProject: {
+            id: 'gid://gitlab/Project/1',
+            name: '123',
+            nameWithNamespace: 'Administrator / 123',
+            webUrl: 'http://127.0.0.1:3000/root/test',
+            __typename: 'Project',
+          },
+          __typename: 'CiRunner',
+          upgradeStatus: 'NOT_AVAILABLE',
+          adminUrl: 'http://127.0.0.1:3000/admin/runners/1',
+          editAdminUrl: 'http://127.0.0.1:3000/admin/runners/1/edit',
+        },
+        {
+          id: 'gid://gitlab/Ci::Runner/2',
+          description: 'test',
+          runnerType: 'PROJECT_TYPE',
+          shortSha: 'DdTYMQGA',
+          version: '15.6.1',
+          ipAddress: '127.0.0.1',
+          active: true,
+          locked: true,
+          jobCount: 0,
+          jobExecutionStatus: 'IDLE',
+          tagList: ['tag3', 'tag4'],
+          createdAt: '2022-11-29T09:37:43Z',
+          contactedAt: null,
+          status: 'NEVER_CONTACTED',
+          userPermissions: {
+            updateRunner: true,
+            deleteRunner: true,
+            __typename: 'RunnerPermissions',
+          },
+          groups: null,
+          ownerProject: {
+            id: 'gid://gitlab/Project/1',
+            name: '123',
+            nameWithNamespace: 'Administrator / 123',
+            webUrl: 'http://127.0.0.1:3000/root/test',
+            __typename: 'Project',
+          },
+          __typename: 'CiRunner',
+          upgradeStatus: 'NOT_AVAILABLE',
+          adminUrl: 'http://127.0.0.1:3000/admin/runners/2',
+          editAdminUrl: 'http://127.0.0.1:3000/admin/runners/2/edit',
+        },
+      ],
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+        startCursor:
+          'eyJjcmVhdGVkX2F0IjoiMjAyMi0xMS0yOSAwOTozNzo0My40OTEwNTEwMDAgKzAwMDAiLCJpZCI6IjIifQ',
+        endCursor:
+          'eyJjcmVhdGVkX2F0IjoiMjAyMi0xMS0yOSAwOTozNzo0My40OTEwNTEwMDAgKzAwMDAiLCJpZCI6IjIifQ',
+        __typename: 'PageInfo',
+      },
+      __typename: 'CiRunnerConnection',
+    },
+  },
+};
+
 export const mockCommitCreateResponseNewEtag = {
   data: {
     commitCreate: {
diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
index a103acb33bc..7a13bfbd1ab 100644
--- a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -8,6 +8,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
 import { objectToQuery, redirectTo } from '~/lib/utils/url_utility';
 import { resolvers } from '~/ci/pipeline_editor/graphql/resolvers';
+import createStore from '~/ci/pipeline_editor/store';
 import PipelineEditorTabs from '~/ci/pipeline_editor/components/pipeline_editor_tabs.vue';
 import PipelineEditorEmptyState from '~/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue';
 import PipelineEditorMessages from '~/ci/pipeline_editor/components/ui/pipeline_editor_messages.vue';
@@ -80,7 +81,9 @@ describe('Pipeline editor app component', () => {
     provide = {},
     stubs = {},
   } = {}) => {
+    const store = createStore();
     wrapper = shallowMount(PipelineEditorApp, {
+      store,
       provide: { ...defaultProvide, ...provide },
       stubs,
       mocks: {
@@ -162,10 +165,6 @@ describe('Pipeline editor app component', () => {
     mockPipelineQuery = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('displays a loading icon if the blob query is loading', () => {
       createComponent({ blobLoading: true });
@@ -256,6 +255,10 @@ describe('Pipeline editor app component', () => {
           .mockImplementation(jest.fn());
       });
 
+      it('available stages is updated', () => {
+        expect(wrapper.vm.$store.state.availableStages).toStrictEqual(['test', 'build']);
+      });
+
       it('shows pipeline editor home component', () => {
         expect(findEditorHome().exists()).toBe(true);
       });
@@ -351,7 +354,9 @@ describe('Pipeline editor app component', () => {
       });
 
       it('shows that the lint service is down', () => {
-        expect(findValidationSegment().text()).toContain(
+        const validationMessage = findValidationSegment().findComponent(GlSprintf);
+
+        expect(validationMessage.attributes('message')).toContain(
           validationSegmenti18n.unavailableValidation,
         );
       });
diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
index 4f8f2112abe..7ec6d4c6a01 100644
--- a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
@@ -67,7 +67,6 @@ describe('Pipeline editor home wrapper', () => {
 
   afterEach(() => {
     localStorage.clear();
-    wrapper.destroy();
   });
 
   describe('renders', () => {
diff --git a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
index 6f18899ebac..1349461d8bc 100644
--- a/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/ci/pipeline_new/components/pipeline_new_form_spec.js
@@ -32,6 +32,7 @@ import {
   mockProjectId,
   mockRefs,
   mockYamlVariables,
+  mockPipelineConfigButtonText,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -42,6 +43,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 const projectRefsEndpoint = '/root/project/refs';
 const pipelinesPath = '/root/project/-/pipelines';
+const pipelinesEditorPath = '/root/project/-/ci/editor';
 const projectPath = '/root/project/-/pipelines/config_variables';
 const newPipelinePostResponse = { id: 1 };
 const defaultBranch = 'main';
@@ -65,6 +67,7 @@ describe('Pipeline New Form', () => {
     wrapper.findAllByTestId('pipeline-form-ci-variable-value-dropdown');
   const findValueDropdownItems = (dropdown) => dropdown.findAllComponents(GlDropdownItem);
   const findErrorAlert = () => wrapper.findByTestId('run-pipeline-error-alert');
+  const findPipelineConfigButton = () => wrapper.findByTestId('ci-cd-pipeline-configuration');
   const findWarningAlert = () => wrapper.findByTestId('run-pipeline-warning-alert');
   const findWarningAlertSummary = () => findWarningAlert().findComponent(GlSprintf);
   const findWarnings = () => wrapper.findAllByTestId('run-pipeline-warning');
@@ -106,6 +109,8 @@ describe('Pipeline New Form', () => {
       propsData: {
         projectId: mockProjectId,
         pipelinesPath,
+        pipelinesEditorPath,
+        canViewPipelineEditor: true,
         projectPath,
         defaultBranch,
         refParam: defaultBranch,
@@ -128,7 +133,6 @@ describe('Pipeline New Form', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('Form', () => {
@@ -500,6 +504,17 @@ describe('Pipeline New Form', () => {
         expect(findSubmitButton().props('disabled')).toBe(false);
       });
 
+      it('shows pipeline configuration button for user who can view', () => {
+        expect(findPipelineConfigButton().exists()).toBe(true);
+        expect(findPipelineConfigButton().text()).toBe(mockPipelineConfigButtonText);
+      });
+
+      it('does not show pipeline configuration button for user who can not view', () => {
+        createComponentWithApollo({ props: { canViewPipelineEditor: false } });
+
+        expect(findPipelineConfigButton().exists()).toBe(false);
+      });
+
       it('does not show the credit card validation required alert', () => {
         expect(findCCAlert().exists()).toBe(false);
       });
diff --git a/spec/frontend/ci/pipeline_new/components/refs_dropdown_spec.js b/spec/frontend/ci/pipeline_new/components/refs_dropdown_spec.js
index cf8009e388f..60ace483712 100644
--- a/spec/frontend/ci/pipeline_new/components/refs_dropdown_spec.js
+++ b/spec/frontend/ci/pipeline_new/components/refs_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlListbox, GlListboxItem } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -13,13 +13,13 @@ const projectRefsEndpoint = '/root/project/refs';
 const refShortName = 'main';
 const refFullName = 'refs/heads/main';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Pipeline New Form', () => {
   let wrapper;
   let mock;
 
-  const findDropdown = () => wrapper.findComponent(GlListbox);
+  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
   const findRefsDropdownItems = () => wrapper.findAllComponents(GlListboxItem);
   const findSearchBox = () => wrapper.findByTestId('listbox-search-input');
   const findListboxGroups = () => wrapper.findAll('ul[role="group"]');
diff --git a/spec/frontend/ci/pipeline_new/mock_data.js b/spec/frontend/ci/pipeline_new/mock_data.js
index 5b935c0c819..175f513217b 100644
--- a/spec/frontend/ci/pipeline_new/mock_data.js
+++ b/spec/frontend/ci/pipeline_new/mock_data.js
@@ -133,3 +133,5 @@ export const mockCiConfigVariablesResponseWithoutDesc = mockCiConfigVariablesQue
   mockYamlVariablesWithoutDesc,
 );
 export const mockNoCachedCiConfigVariablesResponse = mockCiConfigVariablesQueryResponse(null);
+
+export const mockPipelineConfigButtonText = 'Go to the pipeline editor';
diff --git a/spec/frontend/ci/pipeline_schedules/components/delete_pipeline_schedule_modal_spec.js b/spec/frontend/ci/pipeline_schedules/components/delete_pipeline_schedule_modal_spec.js
index ba948f12b33..c45267e5a47 100644
--- a/spec/frontend/ci/pipeline_schedules/components/delete_pipeline_schedule_modal_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/delete_pipeline_schedule_modal_spec.js
@@ -20,10 +20,6 @@ describe('Delete pipeline schedule modal', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits the deleteSchedule event', async () => {
     findModal().vm.$emit('primary');
 
diff --git a/spec/frontend/ci/pipeline_schedules/components/pipeline_schedules_spec.js b/spec/frontend/ci/pipeline_schedules/components/pipeline_schedules_spec.js
index 611993556e3..50008cedd9c 100644
--- a/spec/frontend/ci/pipeline_schedules/components/pipeline_schedules_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/pipeline_schedules_spec.js
@@ -16,6 +16,7 @@ import getPipelineSchedulesQuery from '~/ci/pipeline_schedules/graphql/queries/g
 import {
   mockGetPipelineSchedulesGraphQLResponse,
   mockPipelineScheduleNodes,
+  mockPipelineScheduleCurrentUser,
   deleteMutationResponse,
   playMutationResponse,
   takeOwnershipMutationResponse,
@@ -79,10 +80,6 @@ describe('Pipeline schedules app', () => {
   const findSchedulesCharacteristics = () =>
     wrapper.findByTestId('pipeline-schedules-characteristics');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
@@ -115,6 +112,7 @@ describe('Pipeline schedules app', () => {
       await waitForPromises();
 
       expect(findTable().props('schedules')).toEqual(mockPipelineScheduleNodes);
+      expect(findTable().props('currentUser')).toEqual(mockPipelineScheduleCurrentUser);
     });
 
     it('shows query error alert', async () => {
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
index 6fb6a8bc33b..be0052fc7cf 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
@@ -3,6 +3,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PipelineScheduleActions from '~/ci/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue';
 import {
   mockPipelineScheduleNodes,
+  mockPipelineScheduleCurrentUser,
   mockPipelineScheduleAsGuestNodes,
   mockTakeOwnershipNodes,
 } from '../../../mock_data';
@@ -12,6 +13,7 @@ describe('Pipeline schedule actions', () => {
 
   const defaultProps = {
     schedule: mockPipelineScheduleNodes[0],
+    currentUser: mockPipelineScheduleCurrentUser,
   };
 
   const createComponent = (props = defaultProps) => {
@@ -27,18 +29,17 @@ describe('Pipeline schedule actions', () => {
   const findTakeOwnershipBtn = () => wrapper.findByTestId('take-ownership-pipeline-schedule-btn');
   const findPlayScheduleBtn = () => wrapper.findByTestId('play-pipeline-schedule-btn');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('displays action buttons', () => {
+  it('displays buttons when user is the owner of schedule and has adminPipelineSchedule permissions', () => {
     createComponent();
 
     expect(findAllButtons()).toHaveLength(3);
   });
 
-  it('does not display action buttons', () => {
-    createComponent({ schedule: mockPipelineScheduleAsGuestNodes[0] });
+  it('does not display action buttons when user is not owner and does not have adminPipelineSchedule permission', () => {
+    createComponent({
+      schedule: mockPipelineScheduleAsGuestNodes[0],
+      currentUser: mockPipelineScheduleCurrentUser,
+    });
 
     expect(findAllButtons()).toHaveLength(0);
   });
@@ -54,7 +55,10 @@ describe('Pipeline schedule actions', () => {
   });
 
   it('take ownership button emits showTakeOwnershipModal event and schedule id', () => {
-    createComponent({ schedule: mockTakeOwnershipNodes[0] });
+    createComponent({
+      schedule: mockTakeOwnershipNodes[0],
+      currentUser: mockPipelineScheduleCurrentUser,
+    });
 
     findTakeOwnershipBtn().vm.$emit('click');
 
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
index 0821c59c8a0..ae069145292 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
@@ -21,10 +21,6 @@ describe('Pipeline schedule last pipeline', () => {
   const findCIBadgeLink = () => wrapper.findComponent(CiBadgeLink);
   const findStatusText = () => wrapper.findByTestId('pipeline-schedule-status-text');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays pipeline status', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js
index 1c06c411097..3bdbb371ddc 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js
@@ -21,10 +21,6 @@ describe('Pipeline schedule next run', () => {
   const findTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
   const findInactive = () => wrapper.findByTestId('pipeline-schedule-inactive');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays time ago', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js
index 6c1991cb4ac..849bef80f42 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js
@@ -25,10 +25,6 @@ describe('Pipeline schedule owner', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays avatar', () => {
     expect(findAvatar().exists()).toBe(true);
     expect(findAvatar().props('src')).toBe(defaultProps.schedule.owner.avatarUrl);
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js
index f531f04a736..5cc3829efbd 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js
@@ -25,10 +25,6 @@ describe('Pipeline schedule target', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays icon', () => {
     expect(findIcon().exists()).toBe(true);
     expect(findIcon().props('name')).toBe('fork');
diff --git a/spec/frontend/ci/pipeline_schedules/components/table/pipeline_schedules_table_spec.js b/spec/frontend/ci/pipeline_schedules/components/table/pipeline_schedules_table_spec.js
index 316b3bcf926..e488a36f3dc 100644
--- a/spec/frontend/ci/pipeline_schedules/components/table/pipeline_schedules_table_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/table/pipeline_schedules_table_spec.js
@@ -1,13 +1,14 @@
 import { GlTableLite } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import PipelineSchedulesTable from '~/ci/pipeline_schedules/components/table/pipeline_schedules_table.vue';
-import { mockPipelineScheduleNodes } from '../../mock_data';
+import { mockPipelineScheduleNodes, mockPipelineScheduleCurrentUser } from '../../mock_data';
 
 describe('Pipeline schedules table', () => {
   let wrapper;
 
   const defaultProps = {
     schedules: mockPipelineScheduleNodes,
+    currentUser: mockPipelineScheduleCurrentUser,
   };
 
   const createComponent = (props = defaultProps) => {
@@ -25,10 +26,6 @@ describe('Pipeline schedules table', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays table', () => {
     expect(findTable().exists()).toBe(true);
   });
diff --git a/spec/frontend/ci/pipeline_schedules/components/take_ownership_modal_legacy_spec.js b/spec/frontend/ci/pipeline_schedules/components/take_ownership_modal_legacy_spec.js
index 7e6d4ec4bf8..e4ff9a0545b 100644
--- a/spec/frontend/ci/pipeline_schedules/components/take_ownership_modal_legacy_spec.js
+++ b/spec/frontend/ci/pipeline_schedules/components/take_ownership_modal_legacy_spec.js
@@ -25,14 +25,12 @@ describe('Take ownership modal', () => {
     const actionPrimary = findModal().props('actionPrimary');
 
     expect(actionPrimary.attributes).toEqual(
-      expect.objectContaining([
-        {
-          category: 'primary',
-          variant: 'confirm',
-          href: url,
-          'data-method': 'post',
-        },
-      ]),
+      expect.objectContaining({
+        category: 'primary',
+        variant: 'confirm',
+        href: url,
+        'data-method': 'post',
+      }),
     );
   });
 
diff --git a/spec/frontend/ci/pipeline_schedules/mock_data.js b/spec/frontend/ci/pipeline_schedules/mock_data.js
index 2826c054249..1485f6beea4 100644
--- a/spec/frontend/ci/pipeline_schedules/mock_data.js
+++ b/spec/frontend/ci/pipeline_schedules/mock_data.js
@@ -5,6 +5,7 @@ import mockGetPipelineSchedulesTakeOwnershipGraphQLResponse from 'test_fixtures/
 
 const {
   data: {
+    currentUser,
     project: {
       pipelineSchedules: { nodes },
     },
@@ -28,6 +29,7 @@ const {
 } = mockGetPipelineSchedulesTakeOwnershipGraphQLResponse;
 
 export const mockPipelineScheduleNodes = nodes;
+export const mockPipelineScheduleCurrentUser = currentUser;
 
 export const mockPipelineScheduleAsGuestNodes = guestNodes;
 
diff --git a/spec/frontend/ci/reports/codequality_report/components/codequality_issue_body_spec.js b/spec/frontend/ci/reports/codequality_report/components/codequality_issue_body_spec.js
index 90ca2a07266..f7386cfec74 100644
--- a/spec/frontend/ci/reports/codequality_report/components/codequality_issue_body_spec.js
+++ b/spec/frontend/ci/reports/codequality_report/components/codequality_issue_body_spec.js
@@ -30,11 +30,6 @@ describe('code quality issue body issue body', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('severity rating', () => {
     it.each`
       severity      | iconClass               | iconName
diff --git a/spec/frontend/ci/reports/components/grouped_issues_list_spec.js b/spec/frontend/ci/reports/components/grouped_issues_list_spec.js
index 3e4adfc7794..8beec220802 100644
--- a/spec/frontend/ci/reports/components/grouped_issues_list_spec.js
+++ b/spec/frontend/ci/reports/components/grouped_issues_list_spec.js
@@ -15,10 +15,6 @@ describe('Grouped Issues List', () => {
 
   const findHeading = (groupName) => wrapper.find(`[data-testid="${groupName}Heading"`);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a smart virtual list with the correct props', () => {
     createComponent({
       propsData: {
diff --git a/spec/frontend/ci/reports/components/issue_status_icon_spec.js b/spec/frontend/ci/reports/components/issue_status_icon_spec.js
index fb13d4407e2..82b655dd598 100644
--- a/spec/frontend/ci/reports/components/issue_status_icon_spec.js
+++ b/spec/frontend/ci/reports/components/issue_status_icon_spec.js
@@ -13,11 +13,6 @@ describe('IssueStatusIcon', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each([STATUS_SUCCESS, STATUS_NEUTRAL, STATUS_FAILED])(
     'renders "%s" state correctly',
     (status) => {
diff --git a/spec/frontend/ci/reports/components/report_link_spec.js b/spec/frontend/ci/reports/components/report_link_spec.js
index ba541ba0303..4a97afd77df 100644
--- a/spec/frontend/ci/reports/components/report_link_spec.js
+++ b/spec/frontend/ci/reports/components/report_link_spec.js
@@ -4,10 +4,6 @@ import ReportLink from '~/ci/reports/components/report_link.vue';
 describe('app/assets/javascripts/ci/reports/components/report_link.vue', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const defaultProps = {
     issue: {},
   };
diff --git a/spec/frontend/ci/reports/components/report_section_spec.js b/spec/frontend/ci/reports/components/report_section_spec.js
index f032b210184..f4012fe0215 100644
--- a/spec/frontend/ci/reports/components/report_section_spec.js
+++ b/spec/frontend/ci/reports/components/report_section_spec.js
@@ -49,10 +49,6 @@ describe('ReportSection component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('isCollapsible', () => {
       const testMatrix = [
diff --git a/spec/frontend/ci/reports/components/summary_row_spec.js b/spec/frontend/ci/reports/components/summary_row_spec.js
index fb2ae5371d5..b1ae9e26b5b 100644
--- a/spec/frontend/ci/reports/components/summary_row_spec.js
+++ b/spec/frontend/ci/reports/components/summary_row_spec.js
@@ -31,11 +31,6 @@ describe('Summary row', () => {
   const findStatusIcon = () => wrapper.findByTestId('summary-row-icon');
   const findHelpPopover = () => wrapper.findComponent(HelpPopover);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders provided summary', () => {
     createComponent();
     expect(findSummary().text()).toContain(summary);
diff --git a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
index edf3d1706cc..85b1d3b1b2f 100644
--- a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
+++ b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js
@@ -1,40 +1,53 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
 import AdminNewRunnerApp from '~/ci/runner/admin_new_runner/admin_new_runner_app.vue';
+import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_alert_to_local_storage';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue';
-import RunnerFormFields from '~/ci/runner/components/runner_form_fields.vue';
-import { DEFAULT_PLATFORM } from '~/ci/runner/constants';
+import { PARAM_KEY_PLATFORM, DEFAULT_PLATFORM, WINDOWS_PLATFORM } from '~/ci/runner/constants';
+import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { runnerCreateResult } from '../mock_data';
 
 const mockLegacyRegistrationToken = 'LEGACY_REGISTRATION_TOKEN';
 
 Vue.use(VueApollo);
 
+jest.mock('~/ci/runner/local_storage_alert/save_alert_to_local_storage');
+jest.mock('~/alert');
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  redirectTo: jest.fn(),
+}));
+
+const mockCreatedRunner = runnerCreateResult.data.runnerCreate.runner;
+
 describe('AdminNewRunnerApp', () => {
   let wrapper;
 
   const findLegacyInstructionsLink = () => wrapper.findByTestId('legacy-instructions-link');
   const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal);
   const findRunnerPlatformsRadioGroup = () => wrapper.findComponent(RunnerPlatformsRadioGroup);
-  const findRunnerFormFields = () => wrapper.findComponent(RunnerFormFields);
+  const findRunnerCreateForm = () => wrapper.findComponent(RunnerCreateForm);
 
-  const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => {
-    wrapper = mountFn(AdminNewRunnerApp, {
+  const createComponent = () => {
+    wrapper = shallowMountExtended(AdminNewRunnerApp, {
       propsData: {
         legacyRegistrationToken: mockLegacyRegistrationToken,
-        ...props,
       },
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
       stubs: {
         GlSprintf,
       },
-      ...options,
     });
   };
 
@@ -56,25 +69,59 @@ describe('AdminNewRunnerApp', () => {
     });
   });
 
-  describe('New runner form fields', () => {
-    describe('Platform', () => {
-      it('shows the platforms radio group', () => {
-        expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM);
-      });
+  describe('Platform', () => {
+    it('shows the platforms radio group', () => {
+      expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM);
+    });
+  });
+
+  describe('Runner form', () => {
+    it('shows the runner create form', () => {
+      expect(findRunnerCreateForm().exists()).toBe(true);
     });
 
-    describe('Runner', () => {
-      it('shows the runners fields', () => {
-        expect(findRunnerFormFields().props('value')).toEqual({
-          accessLevel: 'NOT_PROTECTED',
-          paused: false,
-          description: '',
-          maintenanceNote: '',
-          maximumTimeout: ' ',
-          runUntagged: false,
-          tagList: '',
+    describe('When a runner is saved', () => {
+      beforeEach(() => {
+        findRunnerCreateForm().vm.$emit('saved', mockCreatedRunner);
+      });
+
+      it('pushes an alert to be shown after redirection', () => {
+        expect(saveAlertToLocalStorage).toHaveBeenCalledWith({
+          message: s__('Runners|Runner created.'),
+          variant: VARIANT_SUCCESS,
         });
       });
+
+      it('redirects to the registration page', () => {
+        const url = `${mockCreatedRunner.registerAdminUrl}?${PARAM_KEY_PLATFORM}=${DEFAULT_PLATFORM}`;
+
+        expect(redirectTo).toHaveBeenCalledWith(url);
+      });
+    });
+
+    describe('When another platform is selected and a runner is saved', () => {
+      beforeEach(() => {
+        findRunnerPlatformsRadioGroup().vm.$emit('input', WINDOWS_PLATFORM);
+        findRunnerCreateForm().vm.$emit('saved', mockCreatedRunner);
+      });
+
+      it('redirects to the registration page with the platform', () => {
+        const url = `${mockCreatedRunner.registerAdminUrl}?${PARAM_KEY_PLATFORM}=${WINDOWS_PLATFORM}`;
+
+        expect(redirectTo).toHaveBeenCalledWith(url);
+      });
+    });
+
+    describe('When runner fails to save', () => {
+      const ERROR_MSG = 'Cannot save!';
+
+      beforeEach(() => {
+        findRunnerCreateForm().vm.$emit('error', new Error(ERROR_MSG));
+      });
+
+      it('shows an error message', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: ERROR_MSG });
+      });
     });
   });
 });
diff --git a/spec/frontend/ci/runner/admin_register_runner/admin_register_runner_app_spec.js b/spec/frontend/ci/runner/admin_register_runner/admin_register_runner_app_spec.js
new file mode 100644
index 00000000000..d04df85d58f
--- /dev/null
+++ b/spec/frontend/ci/runner/admin_register_runner/admin_register_runner_app_spec.js
@@ -0,0 +1,122 @@
+import { nextTick } from 'vue';
+import { GlButton } from '@gitlab/ui';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+
+import { updateHistory } from '~/lib/utils/url_utility';
+import { PARAM_KEY_PLATFORM, DEFAULT_PLATFORM, WINDOWS_PLATFORM } from '~/ci/runner/constants';
+import AdminRegisterRunnerApp from '~/ci/runner/admin_register_runner/admin_register_runner_app.vue';
+import RegistrationInstructions from '~/ci/runner/components/registration/registration_instructions.vue';
+import PlatformsDrawer from '~/ci/runner/components/registration/platforms_drawer.vue';
+import { runnerForRegistration } from '../mock_data';
+
+const mockRunnerId = runnerForRegistration.data.runner.id;
+const mockRunnersPath = '/admin/runners';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  updateHistory: jest.fn(),
+}));
+
+describe('AdminRegisterRunnerApp', () => {
+  let wrapper;
+
+  const findRegistrationInstructions = () => wrapper.findComponent(RegistrationInstructions);
+  const findPlatformsDrawer = () => wrapper.findComponent(PlatformsDrawer);
+  const findBtn = () => wrapper.findComponent(GlButton);
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(AdminRegisterRunnerApp, {
+      propsData: {
+        runnerId: mockRunnerId,
+        runnersPath: mockRunnersPath,
+      },
+    });
+  };
+
+  describe('When showing runner details', () => {
+    beforeEach(async () => {
+      createComponent();
+    });
+
+    describe('when runner token is available', () => {
+      it('shows registration instructions', () => {
+        expect(findRegistrationInstructions().props()).toEqual({
+          platform: DEFAULT_PLATFORM,
+          runnerId: mockRunnerId,
+        });
+      });
+
+      it('configures platform drawer', () => {
+        expect(findPlatformsDrawer().props()).toEqual({
+          open: false,
+          platform: DEFAULT_PLATFORM,
+        });
+      });
+
+      it('shows runner list button', () => {
+        expect(findBtn().attributes('href')).toBe(mockRunnersPath);
+        expect(findBtn().props('variant')).toBe('confirm');
+      });
+    });
+  });
+
+  describe('When another platform has been selected', () => {
+    beforeEach(async () => {
+      setWindowLocation(`?${PARAM_KEY_PLATFORM}=${WINDOWS_PLATFORM}`);
+
+      createComponent();
+    });
+
+    it('shows registration instructions for the platform', () => {
+      expect(findRegistrationInstructions().props('platform')).toBe(WINDOWS_PLATFORM);
+    });
+  });
+
+  describe('When opening install instructions', () => {
+    beforeEach(async () => {
+      createComponent();
+
+      findRegistrationInstructions().vm.$emit('toggleDrawer');
+      await nextTick();
+    });
+
+    it('opens platform drawer', () => {
+      expect(findPlatformsDrawer().props('open')).toBe(true);
+    });
+
+    it('closes platform drawer', async () => {
+      findRegistrationInstructions().vm.$emit('toggleDrawer');
+      await nextTick();
+
+      expect(findPlatformsDrawer().props('open')).toBe(false);
+    });
+
+    it('closes platform drawer from drawer', async () => {
+      findPlatformsDrawer().vm.$emit('close');
+      await nextTick();
+
+      expect(findPlatformsDrawer().props('open')).toBe(false);
+    });
+
+    describe('when selecting a platform', () => {
+      beforeEach(async () => {
+        findPlatformsDrawer().vm.$emit('selectPlatform', WINDOWS_PLATFORM);
+        await nextTick();
+      });
+
+      it('updates the url', () => {
+        expect(updateHistory).toHaveBeenCalledTimes(1);
+        expect(updateHistory).toHaveBeenCalledWith({
+          url: `${TEST_HOST}/?${PARAM_KEY_PLATFORM}=${WINDOWS_PLATFORM}`,
+        });
+      });
+
+      it('updates the registration instructions', () => {
+        expect(findRegistrationInstructions().props('platform')).toBe(WINDOWS_PLATFORM);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci/runner/admin_runner_show/admin_runner_show_app_spec.js b/spec/frontend/ci/runner/admin_runner_show/admin_runner_show_app_spec.js
index ed4f43c12d8..9d9142f2c68 100644
--- a/spec/frontend/ci/runner/admin_runner_show/admin_runner_show_app_spec.js
+++ b/spec/frontend/ci/runner/admin_runner_show/admin_runner_show_app_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -24,7 +24,7 @@ import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_al
 import { runnerData } from '../mock_data';
 
 jest.mock('~/ci/runner/local_storage_alert/save_alert_to_local_storage');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility');
 
@@ -72,7 +72,6 @@ describe('AdminRunnerShowApp', () => {
 
   afterEach(() => {
     mockRunnerQuery.mockReset();
-    wrapper.destroy();
   });
 
   describe('When showing runner details', () => {
diff --git a/spec/frontend/ci/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/ci/runner/admin_runners/admin_runners_app_spec.js
index 7fc240e520b..0cf6241c24f 100644
--- a/spec/frontend/ci/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/ci/runner/admin_runners/admin_runners_app_spec.js
@@ -9,7 +9,7 @@ import {
   mountExtended,
 } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -70,7 +70,7 @@ const mockRunnersCount = runnersCountData.data.runners.count;
 const mockRunnersHandler = jest.fn();
 const mockRunnersCountHandler = jest.fn();
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
@@ -143,7 +143,6 @@ describe('AdminRunnersApp', () => {
     mockRunnersHandler.mockReset();
     mockRunnersCountHandler.mockReset();
     showToast.mockReset();
-    wrapper.destroy();
   });
 
   it('shows the runner setup instructions', () => {
diff --git a/spec/frontend/ci/runner/components/cells/runner_actions_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_actions_cell_spec.js
index 82e262d1b73..8ac0c5a61f8 100644
--- a/spec/frontend/ci/runner/components/cells/runner_actions_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_actions_cell_spec.js
@@ -31,10 +31,6 @@ describe('RunnerActionsCell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Edit Action', () => {
     it('Displays the runner edit link with the correct href', () => {
       createComponent();
diff --git a/spec/frontend/ci/runner/components/cells/runner_owner_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_owner_cell_spec.js
index 3097e43e583..03f1ace3897 100644
--- a/spec/frontend/ci/runner/components/cells/runner_owner_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_owner_cell_spec.js
@@ -16,7 +16,7 @@ describe('RunnerOwnerCell', () => {
   const createComponent = ({ runner } = {}) => {
     wrapper = shallowMount(RunnerOwnerCell, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: {
         runner,
@@ -24,10 +24,6 @@ describe('RunnerOwnerCell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('When its an instance runner', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/ci/runner/components/cells/runner_status_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_status_cell_spec.js
index 1ff60ff1a9d..ec23d8415e8 100644
--- a/spec/frontend/ci/runner/components/cells/runner_status_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_status_cell_spec.js
@@ -34,10 +34,6 @@ describe('RunnerStatusCell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays online status', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
index 1711df42491..585a03c0811 100644
--- a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
@@ -45,10 +45,6 @@ describe('RunnerTypeCell', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays the runner name as id and short token', () => {
     expect(wrapper.text()).toContain(
       `#${getIdFromGraphQLId(mockRunner.id)} (${mockRunner.shortSha})`,
diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js
index f536e0dcbcf..7748890cf77 100644
--- a/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_summary_field_spec.js
@@ -17,16 +17,12 @@ describe('RunnerSummaryField', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       ...options,
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows content in slot', () => {
     createComponent({
       slots: { default: 'content' },
diff --git a/spec/frontend/ci/runner/components/registration/__snapshots__/utils_spec.js.snap b/spec/frontend/ci/runner/components/registration/__snapshots__/utils_spec.js.snap
new file mode 100644
index 00000000000..09d032fd32d
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/__snapshots__/utils_spec.js.snap
@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`registration utils for "linux" platform commandPrompt is correct 1`] = `"$"`;
+
+exports[`registration utils for "linux" platform installScript is correct for "386" architecture 1`] = `
+"# Download the binary for your system
+sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# Create a GitLab Runner user
+sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
+
+# Install and run as a service
+sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
+sudo gitlab-runner start"
+`;
+
+exports[`registration utils for "linux" platform installScript is correct for "amd64" architecture 1`] = `
+"# Download the binary for your system
+sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# Create a GitLab Runner user
+sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
+
+# Install and run as a service
+sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
+sudo gitlab-runner start"
+`;
+
+exports[`registration utils for "linux" platform installScript is correct for "arm" architecture 1`] = `
+"# Download the binary for your system
+sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# Create a GitLab Runner user
+sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
+
+# Install and run as a service
+sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
+sudo gitlab-runner start"
+`;
+
+exports[`registration utils for "linux" platform installScript is correct for "arm64" architecture 1`] = `
+"# Download the binary for your system
+sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# Create a GitLab Runner user
+sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
+
+# Install and run as a service
+sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
+sudo gitlab-runner start"
+`;
+
+exports[`registration utils for "linux" platform platformArchitectures returns correct list of architectures 1`] = `
+Array [
+  "amd64",
+  "386",
+  "arm",
+  "arm64",
+]
+`;
+
+exports[`registration utils for "linux" platform registerCommand is correct 1`] = `
+Array [
+  "gitlab-runner register",
+  "  --url http://test.host",
+  "  --registration-token REGISTRATION_TOKEN",
+  "  --description 'RUNNER'",
+]
+`;
+
+exports[`registration utils for "linux" platform registerCommand is correct 2`] = `
+Array [
+  "gitlab-runner register",
+  "  --url http://test.host",
+]
+`;
+
+exports[`registration utils for "linux" platform runCommand is correct 1`] = `"gitlab-runner run"`;
+
+exports[`registration utils for "osx" platform commandPrompt is correct 1`] = `"$"`;
+
+exports[`registration utils for "osx" platform installScript is correct for "amd64" architecture 1`] = `
+"# Download the binary for your system
+sudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-amd64
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# The rest of the commands execute as the user who will run the runner
+# Register the runner (steps below), then run
+cd ~
+gitlab-runner install
+gitlab-runner start"
+`;
+
+exports[`registration utils for "osx" platform installScript is correct for "arm64" architecture 1`] = `
+"# Download the binary for your system
+sudo curl --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-darwin-arm64
+
+# Give it permission to execute
+sudo chmod +x /usr/local/bin/gitlab-runner
+
+# The rest of the commands execute as the user who will run the runner
+# Register the runner (steps below), then run
+cd ~
+gitlab-runner install
+gitlab-runner start"
+`;
+
+exports[`registration utils for "osx" platform platformArchitectures returns correct list of architectures 1`] = `
+Array [
+  "amd64",
+  "arm64",
+]
+`;
+
+exports[`registration utils for "osx" platform registerCommand is correct 1`] = `
+Array [
+  "gitlab-runner register",
+  "  --url http://test.host",
+  "  --registration-token REGISTRATION_TOKEN",
+  "  --description 'RUNNER'",
+]
+`;
+
+exports[`registration utils for "osx" platform registerCommand is correct 2`] = `
+Array [
+  "gitlab-runner register",
+  "  --url http://test.host",
+]
+`;
+
+exports[`registration utils for "osx" platform runCommand is correct 1`] = `"gitlab-runner run"`;
+
+exports[`registration utils for "windows" platform commandPrompt is correct 1`] = `">"`;
+
+exports[`registration utils for "windows" platform installScript is correct for "386" architecture 1`] = `
+"# Run PowerShell: https://docs.microsoft.com/en-us/powershell/scripting/windows-powershell/starting-windows-powershell?view=powershell-7#with-administrative-privileges-run-as-administrator
+# Create a folder somewhere on your system, for example: C:\\\\GitLab-Runner
+New-Item -Path 'C:\\\\GitLab-Runner' -ItemType Directory
+
+# Change to the folder
+cd 'C:\\\\GitLab-Runner'
+
+# Download binary
+Invoke-WebRequest -Uri \\"https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-386.exe\\" -OutFile \\"gitlab-runner.exe\\"
+
+# Register the runner (steps below), then run
+.\\\\gitlab-runner.exe install
+.\\\\gitlab-runner.exe start"
+`;
+
+exports[`registration utils for "windows" platform installScript is correct for "amd64" architecture 1`] = `
+"# Run PowerShell: https://docs.microsoft.com/en-us/powershell/scripting/windows-powershell/starting-windows-powershell?view=powershell-7#with-administrative-privileges-run-as-administrator
+# Create a folder somewhere on your system, for example: C:\\\\GitLab-Runner
+New-Item -Path 'C:\\\\GitLab-Runner' -ItemType Directory
+
+# Change to the folder
+cd 'C:\\\\GitLab-Runner'
+
+# Download binary
+Invoke-WebRequest -Uri \\"https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-windows-amd64.exe\\" -OutFile \\"gitlab-runner.exe\\"
+
+# Register the runner (steps below), then run
+.\\\\gitlab-runner.exe install
+.\\\\gitlab-runner.exe start"
+`;
+
+exports[`registration utils for "windows" platform platformArchitectures returns correct list of architectures 1`] = `
+Array [
+  "amd64",
+  "386",
+]
+`;
+
+exports[`registration utils for "windows" platform registerCommand is correct 1`] = `
+Array [
+  ".\\\\gitlab-runner.exe register",
+  "  --url http://test.host",
+  "  --registration-token REGISTRATION_TOKEN",
+  "  --description 'RUNNER'",
+]
+`;
+
+exports[`registration utils for "windows" platform registerCommand is correct 2`] = `
+Array [
+  ".\\\\gitlab-runner.exe register",
+  "  --url http://test.host",
+]
+`;
+
+exports[`registration utils for "windows" platform runCommand is correct 1`] = `".\\\\gitlab-runner.exe run"`;
diff --git a/spec/frontend/ci/runner/components/registration/cli_command_spec.js b/spec/frontend/ci/runner/components/registration/cli_command_spec.js
new file mode 100644
index 00000000000..78c2b94c3ea
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/cli_command_spec.js
@@ -0,0 +1,39 @@
+import CliCommand from '~/ci/runner/components/registration/cli_command.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('CliCommand', () => {
+  let wrapper;
+
+  // use .textContent instead of .text() to capture whitespace that's visible in <pre>
+  const getPreTextContent = () => wrapper.find('pre').element.textContent;
+  const getClipboardText = () => wrapper.findComponent(ClipboardButton).props('text');
+
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(CliCommand, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  it('when rendering a command', () => {
+    createComponent({
+      prompt: '#',
+      command: 'echo hi',
+    });
+
+    expect(getPreTextContent()).toBe('# echo hi');
+    expect(getClipboardText()).toBe('echo hi');
+  });
+
+  it('when rendering a multi-line command', () => {
+    createComponent({
+      prompt: '#',
+      command: ['git', ' --version'],
+    });
+
+    expect(getPreTextContent()).toBe('# git --version');
+    expect(getClipboardText()).toBe('git --version');
+  });
+});
diff --git a/spec/frontend/ci/runner/components/registration/platforms_drawer_spec.js b/spec/frontend/ci/runner/components/registration/platforms_drawer_spec.js
new file mode 100644
index 00000000000..0b438455b5b
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/platforms_drawer_spec.js
@@ -0,0 +1,108 @@
+import { nextTick } from 'vue';
+import { GlDrawer, GlLink, GlIcon, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+
+import PlatformsDrawer from '~/ci/runner/components/registration/platforms_drawer.vue';
+import CliCommand from '~/ci/runner/components/registration/cli_command.vue';
+import {
+  LINUX_PLATFORM,
+  MACOS_PLATFORM,
+  WINDOWS_PLATFORM,
+  INSTALL_HELP_URL,
+} from '~/ci/runner/constants';
+import { installScript, platformArchitectures } from '~/ci/runner/components/registration/utils';
+
+const MOCK_WRAPPER_HEIGHT = '99px';
+const LINUX_ARCHS = platformArchitectures({ platform: LINUX_PLATFORM });
+const MACOS_ARCHS = platformArchitectures({ platform: MACOS_PLATFORM });
+
+jest.mock('~/lib/utils/dom_utils', () => ({
+  getContentWrapperHeight: () => MOCK_WRAPPER_HEIGHT,
+}));
+
+describe('RegistrationInstructions', () => {
+  let wrapper;
+
+  const findDrawer = () => wrapper.findComponent(GlDrawer);
+  const findEnvironmentOptions = () =>
+    wrapper.findByLabelText(s__('Runners|Environment')).findAll('option');
+  const findArchitectureOptions = () =>
+    wrapper.findByLabelText(s__('Runners|Architecture')).findAll('option');
+  const findCliCommand = () => wrapper.findComponent(CliCommand);
+  const findLink = () => wrapper.findComponent(GlLink);
+
+  const createComponent = ({ props = {}, mountFn = shallowMountExtended } = {}) => {
+    wrapper = mountFn(PlatformsDrawer, {
+      propsData: {
+        open: true,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  it('shows drawer', () => {
+    createComponent();
+
+    expect(findDrawer().props()).toMatchObject({
+      open: true,
+      headerHeight: MOCK_WRAPPER_HEIGHT,
+    });
+  });
+
+  it('closes drawer', () => {
+    createComponent();
+    findDrawer().vm.$emit('close');
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('shows selection options', () => {
+    createComponent({ mountFn: mountExtended });
+
+    expect(findEnvironmentOptions().wrappers.map((w) => w.attributes('value'))).toEqual([
+      LINUX_PLATFORM,
+      MACOS_PLATFORM,
+      WINDOWS_PLATFORM,
+    ]);
+
+    expect(findArchitectureOptions().wrappers.map((w) => w.attributes('value'))).toEqual(
+      LINUX_ARCHS,
+    );
+  });
+
+  it('shows script', () => {
+    createComponent();
+
+    expect(findCliCommand().props('command')).toBe(
+      installScript({ platform: LINUX_PLATFORM, architecture: LINUX_ARCHS[0] }),
+    );
+  });
+
+  it('shows selection options for another platform', async () => {
+    createComponent({ mountFn: mountExtended });
+
+    findEnvironmentOptions().at(1).setSelected(); // macos
+    await nextTick();
+
+    expect(wrapper.emitted('selectPlatform')).toEqual([[MACOS_PLATFORM]]);
+
+    expect(findArchitectureOptions().wrappers.map((w) => w.attributes('value'))).toEqual(
+      MACOS_ARCHS,
+    );
+
+    expect(findCliCommand().props('command')).toBe(
+      installScript({ platform: MACOS_PLATFORM, architecture: MACOS_ARCHS[0] }),
+    );
+  });
+
+  it('shows external link for more information', () => {
+    createComponent();
+
+    expect(findLink().attributes('href')).toBe(INSTALL_HELP_URL);
+    expect(findLink().findComponent(GlIcon).props('name')).toBe('external-link');
+  });
+});
diff --git a/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js b/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
index 0daaca9c4ff..9ed59b0a57d 100644
--- a/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
+++ b/spec/frontend/ci/runner/components/registration/registration_dropdown_spec.js
@@ -116,10 +116,6 @@ describe('RegistrationDropdown', () => {
         await openModal();
       });
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it('opens the modal with contents', () => {
         const modalText = findModalContent();
 
diff --git a/spec/frontend/ci/runner/components/registration/registration_instructions_spec.js b/spec/frontend/ci/runner/components/registration/registration_instructions_spec.js
new file mode 100644
index 00000000000..eb4b659091d
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/registration_instructions_spec.js
@@ -0,0 +1,293 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
+
+import { s__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { extendedWrapper, shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import RegistrationInstructions from '~/ci/runner/components/registration/registration_instructions.vue';
+import runnerForRegistrationQuery from '~/ci/runner/graphql/register/runner_for_registration.query.graphql';
+import CliCommand from '~/ci/runner/components/registration/cli_command.vue';
+import {
+  DEFAULT_PLATFORM,
+  EXECUTORS_HELP_URL,
+  SERVICE_COMMANDS_HELP_URL,
+  STATUS_NEVER_CONTACTED,
+  STATUS_ONLINE,
+  RUNNER_REGISTRATION_POLLING_INTERVAL_MS,
+  I18N_REGISTRATION_SUCCESS,
+} from '~/ci/runner/constants';
+import { runnerForRegistration } from '../../mock_data';
+
+Vue.use(VueApollo);
+
+const MOCK_TOKEN = 'MOCK_TOKEN';
+const mockDescription = runnerForRegistration.data.runner.description;
+
+const mockRunner = {
+  ...runnerForRegistration.data.runner,
+  ephemeralAuthenticationToken: MOCK_TOKEN,
+};
+const mockRunnerWithoutToken = {
+  ...runnerForRegistration.data.runner,
+  ephemeralAuthenticationToken: null,
+};
+
+const mockRunnerId = `${getIdFromGraphQLId(mockRunner.id)}`;
+
+describe('RegistrationInstructions', () => {
+  let wrapper;
+  let mockRunnerQuery;
+
+  const findHeading = () => wrapper.find('h1');
+  const findStepAt = (i) => extendedWrapper(wrapper.findAll('section').at(i));
+  const findByText = (text, container = wrapper) => container.findByText(text);
+
+  const waitForPolling = async () => {
+    jest.advanceTimersByTime(RUNNER_REGISTRATION_POLLING_INTERVAL_MS);
+    await waitForPromises();
+  };
+
+  const mockResolvedRunner = (runner = mockRunner) => {
+    mockRunnerQuery.mockResolvedValue({
+      data: {
+        runner,
+      },
+    });
+  };
+
+  const createComponent = (props) => {
+    wrapper = shallowMountExtended(RegistrationInstructions, {
+      apolloProvider: createMockApollo([[runnerForRegistrationQuery, mockRunnerQuery]]),
+      propsData: {
+        runnerId: mockRunnerId,
+        platform: DEFAULT_PLATFORM,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mockRunnerQuery = jest.fn();
+    mockResolvedRunner();
+  });
+
+  beforeEach(() => {
+    window.gon.gitlab_url = TEST_HOST;
+  });
+
+  it('loads runner with id', async () => {
+    createComponent();
+
+    expect(mockRunnerQuery).toHaveBeenCalledWith({ id: mockRunner.id });
+  });
+
+  describe('heading', () => {
+    it('when runner is loaded, shows heading', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(findHeading().text()).toContain(mockRunner.description);
+    });
+
+    it('when runner is loaded, shows heading safely', async () => {
+      mockResolvedRunner({
+        ...mockRunner,
+        description: '<script>hacked();</script>',
+      });
+
+      createComponent();
+      await waitForPromises();
+
+      expect(findHeading().text()).toBe('Register "<script>hacked();</script>" runner');
+      expect(findHeading().element.innerHTML).toBe(
+        'Register "&lt;script&gt;hacked();&lt;/script&gt;" runner',
+      );
+    });
+
+    it('when runner is loading, shows default heading', () => {
+      createComponent();
+
+      expect(findHeading().text()).toBe(s__('Runners|Register runner'));
+    });
+  });
+
+  it('renders legacy instructions', () => {
+    createComponent();
+
+    findByText('How do I install GitLab Runner?').vm.$emit('click');
+
+    expect(wrapper.emitted('toggleDrawer')).toHaveLength(1);
+  });
+
+  describe('step 1', () => {
+    it('renders step 1', async () => {
+      createComponent();
+      await waitForPromises();
+
+      const step1 = findStepAt(0);
+
+      expect(step1.findComponent(CliCommand).props()).toEqual({
+        command: [
+          'gitlab-runner register',
+          `  --url ${TEST_HOST}`,
+          `  --registration-token ${MOCK_TOKEN}`,
+          `  --description '${mockDescription}'`,
+        ],
+        prompt: '$',
+      });
+      expect(step1.find('[data-testid="runner-token"]').text()).toBe(MOCK_TOKEN);
+      expect(step1.findComponent(ClipboardButton).props('text')).toBe(MOCK_TOKEN);
+    });
+
+    it('renders step 1 in loading state', () => {
+      createComponent();
+
+      const step1 = findStepAt(0);
+
+      expect(step1.findComponent(GlSkeletonLoader).exists()).toBe(true);
+      expect(step1.find('code').exists()).toBe(false);
+      expect(step1.findComponent(ClipboardButton).exists()).toBe(false);
+    });
+
+    it('render step 1 after token is not visible', async () => {
+      mockResolvedRunner(mockRunnerWithoutToken);
+
+      createComponent();
+      await waitForPromises();
+
+      const step1 = findStepAt(0);
+
+      expect(step1.findComponent(CliCommand).props('command')).toEqual([
+        'gitlab-runner register',
+        `  --url ${TEST_HOST}`,
+        `  --description '${mockDescription}'`,
+      ]);
+      expect(step1.find('[data-testid="runner-token"]').exists()).toBe(false);
+      expect(step1.findComponent(ClipboardButton).exists()).toBe(false);
+    });
+
+    describe('polling for changes', () => {
+      beforeEach(async () => {
+        createComponent();
+        await waitForPromises();
+      });
+
+      it('fetches data', () => {
+        expect(mockRunnerQuery).toHaveBeenCalledTimes(1);
+      });
+
+      it('polls', async () => {
+        await waitForPolling();
+        expect(mockRunnerQuery).toHaveBeenCalledTimes(2);
+
+        await waitForPolling();
+        expect(mockRunnerQuery).toHaveBeenCalledTimes(3);
+      });
+
+      it('when runner is online, stops polling', async () => {
+        mockResolvedRunner({ ...mockRunner, status: STATUS_ONLINE });
+        await waitForPolling();
+
+        expect(mockRunnerQuery).toHaveBeenCalledTimes(2);
+        await waitForPolling();
+
+        expect(mockRunnerQuery).toHaveBeenCalledTimes(2);
+      });
+
+      it('when token is no longer visible in the API, it is still visible in the UI', async () => {
+        mockResolvedRunner(mockRunnerWithoutToken);
+        await waitForPolling();
+
+        const step1 = findStepAt(0);
+        expect(step1.findComponent(CliCommand).props('command')).toEqual([
+          'gitlab-runner register',
+          `  --url ${TEST_HOST}`,
+          `  --registration-token ${MOCK_TOKEN}`,
+          `  --description '${mockDescription}'`,
+        ]);
+        expect(step1.find('[data-testid="runner-token"]').text()).toBe(MOCK_TOKEN);
+        expect(step1.findComponent(ClipboardButton).props('text')).toBe(MOCK_TOKEN);
+      });
+
+      it('when runner is not available (e.g. deleted), the UI does not update', async () => {
+        mockResolvedRunner(null);
+        await waitForPolling();
+
+        const step1 = findStepAt(0);
+        expect(step1.findComponent(CliCommand).props('command')).toEqual([
+          'gitlab-runner register',
+          `  --url ${TEST_HOST}`,
+          `  --registration-token ${MOCK_TOKEN}`,
+          `  --description '${mockDescription}'`,
+        ]);
+        expect(step1.find('[data-testid="runner-token"]').text()).toBe(MOCK_TOKEN);
+        expect(step1.findComponent(ClipboardButton).props('text')).toBe(MOCK_TOKEN);
+      });
+    });
+  });
+
+  it('renders step 2', () => {
+    createComponent();
+    const step2 = findStepAt(1);
+
+    expect(findByText('Not sure which one to select?', step2).attributes('href')).toBe(
+      EXECUTORS_HELP_URL,
+    );
+  });
+
+  it('renders step 3', () => {
+    createComponent();
+    const step3 = findStepAt(2);
+
+    expect(step3.findComponent(CliCommand).props()).toEqual({
+      command: 'gitlab-runner run',
+      prompt: '$',
+    });
+
+    expect(findByText('system or user service', step3).attributes('href')).toBe(
+      SERVICE_COMMANDS_HELP_URL,
+    );
+  });
+
+  describe('success state', () => {
+    describe('when the runner has not been registered', () => {
+      beforeEach(async () => {
+        createComponent();
+
+        await waitForPolling();
+
+        mockResolvedRunner({ ...mockRunner, status: STATUS_NEVER_CONTACTED });
+
+        await waitForPolling();
+      });
+
+      it('does not show success message', () => {
+        expect(wrapper.text()).not.toContain(I18N_REGISTRATION_SUCCESS);
+      });
+    });
+
+    describe('when the runner has been registered', () => {
+      beforeEach(async () => {
+        createComponent();
+        await waitForPolling();
+
+        mockResolvedRunner({ ...mockRunner, status: STATUS_ONLINE });
+        await waitForPolling();
+      });
+
+      it('shows success message', () => {
+        expect(wrapper.text()).toContain('🎉');
+        expect(wrapper.text()).toContain(I18N_REGISTRATION_SUCCESS);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci/runner/components/registration/registration_token_reset_dropdown_item_spec.js b/spec/frontend/ci/runner/components/registration/registration_token_reset_dropdown_item_spec.js
index 783a4d9252a..ff69fd6d3d6 100644
--- a/spec/frontend/ci/runner/components/registration/registration_token_reset_dropdown_item_spec.js
+++ b/spec/frontend/ci/runner/components/registration/registration_token_reset_dropdown_item_spec.js
@@ -5,14 +5,14 @@ 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import RegistrationTokenResetDropdownItem from '~/ci/runner/components/registration/registration_token_reset_dropdown_item.vue';
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/ci/runner/constants';
 import runnersRegistrationTokenResetMutation from '~/ci/runner/graphql/list/runners_registration_token_reset.mutation.graphql';
 import { captureException } from '~/ci/runner/sentry_utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 Vue.use(VueApollo);
@@ -43,7 +43,7 @@ describe('RegistrationTokenResetDropdownItem', () => {
         [runnersRegistrationTokenResetMutation, runnersRegistrationTokenResetMutationHandler],
       ]),
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
     });
 
@@ -63,10 +63,6 @@ describe('RegistrationTokenResetDropdownItem', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays reset button', () => {
     expect(findDropdownItem().exists()).toBe(true);
   });
diff --git a/spec/frontend/ci/runner/components/registration/registration_token_spec.js b/spec/frontend/ci/runner/components/registration/registration_token_spec.js
index d2a51c0d910..4f44e6e10b2 100644
--- a/spec/frontend/ci/runner/components/registration/registration_token_spec.js
+++ b/spec/frontend/ci/runner/components/registration/registration_token_spec.js
@@ -27,10 +27,6 @@ describe('RegistrationToken', () => {
     showToast = wrapper.vm.$toast ? jest.spyOn(wrapper.vm.$toast, 'show') : null;
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays value and copy button', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/runner/components/registration/utils_spec.js b/spec/frontend/ci/runner/components/registration/utils_spec.js
new file mode 100644
index 00000000000..acf5993b15b
--- /dev/null
+++ b/spec/frontend/ci/runner/components/registration/utils_spec.js
@@ -0,0 +1,118 @@
+import { TEST_HOST } from 'helpers/test_constants';
+import {
+  DEFAULT_PLATFORM,
+  LINUX_PLATFORM,
+  MACOS_PLATFORM,
+  WINDOWS_PLATFORM,
+} from '~/ci/runner/constants';
+
+import {
+  commandPrompt,
+  registerCommand,
+  runCommand,
+  installScript,
+  platformArchitectures,
+} from '~/ci/runner/components/registration/utils';
+
+const REGISTRATION_TOKEN = 'REGISTRATION_TOKEN';
+const DESCRIPTION = 'RUNNER';
+
+describe('registration utils', () => {
+  beforeEach(() => {
+    window.gon.gitlab_url = TEST_HOST;
+  });
+
+  describe.each([LINUX_PLATFORM, MACOS_PLATFORM, WINDOWS_PLATFORM])(
+    'for "%s" platform',
+    (platform) => {
+      it('commandPrompt is correct', () => {
+        expect(commandPrompt({ platform })).toMatchSnapshot();
+      });
+
+      it('registerCommand is correct', () => {
+        expect(
+          registerCommand({
+            platform,
+            registrationToken: REGISTRATION_TOKEN,
+            description: DESCRIPTION,
+          }),
+        ).toMatchSnapshot();
+
+        expect(registerCommand({ platform })).toMatchSnapshot();
+      });
+
+      it('runCommand is correct', () => {
+        expect(runCommand({ platform })).toMatchSnapshot();
+      });
+    },
+  );
+
+  describe.each([LINUX_PLATFORM, MACOS_PLATFORM])('for "%s" platform', (platform) => {
+    it.each`
+      description       | parameter
+      ${'my runner'}    | ${"'my runner'"}
+      ${"bob's runner"} | ${"'bob'\\''s runner'"}
+    `('registerCommand escapes description `$description`', ({ description, parameter }) => {
+      expect(registerCommand({ platform, description })[2]).toBe(`  --description ${parameter}`);
+    });
+  });
+
+  describe.each([WINDOWS_PLATFORM])('for "%s" platform', (platform) => {
+    it.each`
+      description       | parameter
+      ${'my runner'}    | ${"'my runner'"}
+      ${"bob's runner"} | ${"'bob''s runner'"}
+    `('registerCommand escapes description `$description`', ({ description, parameter }) => {
+      expect(registerCommand({ platform, description })[2]).toBe(`  --description ${parameter}`);
+    });
+  });
+
+  describe('for missing platform', () => {
+    it('commandPrompt uses the default', () => {
+      const expected = commandPrompt({ platform: DEFAULT_PLATFORM });
+
+      expect(commandPrompt({ platform: null })).toEqual(expected);
+      expect(commandPrompt({ platform: undefined })).toEqual(expected);
+    });
+
+    it('registerCommand uses the default', () => {
+      const expected = registerCommand({
+        platform: DEFAULT_PLATFORM,
+        registrationToken: REGISTRATION_TOKEN,
+      });
+
+      expect(registerCommand({ platform: null, registrationToken: REGISTRATION_TOKEN })).toEqual(
+        expected,
+      );
+      expect(
+        registerCommand({ platform: undefined, registrationToken: REGISTRATION_TOKEN }),
+      ).toEqual(expected);
+    });
+
+    it('runCommand uses the default', () => {
+      const expected = runCommand({ platform: DEFAULT_PLATFORM });
+
+      expect(runCommand({ platform: null })).toEqual(expected);
+      expect(runCommand({ platform: undefined })).toEqual(expected);
+    });
+  });
+
+  describe.each([LINUX_PLATFORM, MACOS_PLATFORM, WINDOWS_PLATFORM])(
+    'for "%s" platform',
+    (platform) => {
+      describe('platformArchitectures', () => {
+        it('returns correct list of architectures', () => {
+          expect(platformArchitectures({ platform })).toMatchSnapshot();
+        });
+      });
+
+      describe('installScript', () => {
+        const architectures = platformArchitectures({ platform });
+
+        it.each(architectures)('is correct for "%s" architecture', (architecture) => {
+          expect(installScript({ platform, architecture })).toMatchSnapshot();
+        });
+      });
+    },
+  );
+});
diff --git a/spec/frontend/ci/runner/components/runner_assigned_item_spec.js b/spec/frontend/ci/runner/components/runner_assigned_item_spec.js
index 5df2e04c340..a1fd9e4c1aa 100644
--- a/spec/frontend/ci/runner/components/runner_assigned_item_spec.js
+++ b/spec/frontend/ci/runner/components/runner_assigned_item_spec.js
@@ -33,10 +33,6 @@ describe('RunnerAssignedItem', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Shows an avatar', () => {
     const avatar = findAvatar();
 
diff --git a/spec/frontend/ci/runner/components/runner_bulk_delete_spec.js b/spec/frontend/ci/runner/components/runner_bulk_delete_spec.js
index 0dc5a90fb83..f609c6be41a 100644
--- a/spec/frontend/ci/runner/components/runner_bulk_delete_spec.js
+++ b/spec/frontend/ci/runner/components/runner_bulk_delete_spec.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { makeVar } from '@apollo/client/core';
 import { GlModal, GlSprintf } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { s__ } from '~/locale';
@@ -15,7 +15,7 @@ import { allRunnersData } from '../mock_data';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('RunnerBulkDelete', () => {
   let wrapper;
@@ -51,7 +51,7 @@ describe('RunnerBulkDelete', () => {
         runners: mockRunners,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       stubs: {
         GlSprintf,
diff --git a/spec/frontend/ci/runner/components/runner_create_form_spec.js b/spec/frontend/ci/runner/components/runner_create_form_spec.js
new file mode 100644
index 00000000000..1123a026a4d
--- /dev/null
+++ b/spec/frontend/ci/runner/components/runner_create_form_spec.js
@@ -0,0 +1,170 @@
+import Vue from 'vue';
+import { GlForm } from '@gitlab/ui';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import RunnerCreateForm from '~/ci/runner/components/runner_create_form.vue';
+import RunnerFormFields from '~/ci/runner/components/runner_form_fields.vue';
+import { DEFAULT_ACCESS_LEVEL } from '~/ci/runner/constants';
+import runnerCreateMutation from '~/ci/runner/graphql/new/runner_create.mutation.graphql';
+import { captureException } from '~/ci/runner/sentry_utils';
+import { runnerCreateResult } from '../mock_data';
+
+jest.mock('~/ci/runner/sentry_utils');
+
+const mockCreatedRunner = runnerCreateResult.data.runnerCreate.runner;
+
+const defaultRunnerModel = {
+  description: '',
+  accessLevel: DEFAULT_ACCESS_LEVEL,
+  paused: false,
+  maintenanceNote: '',
+  maximumTimeout: '',
+  runUntagged: false,
+  tagList: '',
+};
+
+Vue.use(VueApollo);
+
+describe('RunnerCreateForm', () => {
+  let wrapper;
+  let runnerCreateHandler;
+
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findRunnerFormFields = () => wrapper.findComponent(RunnerFormFields);
+  const findSubmitBtn = () => wrapper.find('[type="submit"]');
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(RunnerCreateForm, {
+      apolloProvider: createMockApollo([[runnerCreateMutation, runnerCreateHandler]]),
+    });
+  };
+
+  beforeEach(() => {
+    runnerCreateHandler = jest.fn().mockResolvedValue(runnerCreateResult);
+
+    createComponent();
+  });
+
+  it('shows default runner values', () => {
+    expect(findRunnerFormFields().props('value')).toEqual(defaultRunnerModel);
+  });
+
+  it('shows a submit button', () => {
+    expect(findSubmitBtn().exists()).toBe(true);
+  });
+
+  describe('when user submits', () => {
+    let preventDefault;
+
+    beforeEach(() => {
+      preventDefault = jest.fn();
+
+      findRunnerFormFields().vm.$emit('input', {
+        ...defaultRunnerModel,
+        description: 'My runner',
+        maximumTimeout: 0,
+        tagList: 'tag1, tag2',
+      });
+    });
+
+    describe('immediately after submit', () => {
+      beforeEach(() => {
+        findForm().vm.$emit('submit', { preventDefault });
+      });
+
+      it('prevents default form submission', () => {
+        expect(preventDefault).toHaveBeenCalledTimes(1);
+      });
+
+      it('shows a saving state', () => {
+        expect(findSubmitBtn().props('loading')).toBe(true);
+      });
+
+      it('saves runner', async () => {
+        expect(runnerCreateHandler).toHaveBeenCalledWith({
+          input: {
+            ...defaultRunnerModel,
+            description: 'My runner',
+            maximumTimeout: 0,
+            tagList: ['tag1', 'tag2'],
+          },
+        });
+      });
+    });
+
+    describe('when saved successfully', () => {
+      beforeEach(async () => {
+        findForm().vm.$emit('submit', { preventDefault });
+        await waitForPromises();
+      });
+
+      it('emits "saved" result', async () => {
+        expect(wrapper.emitted('saved')[0]).toEqual([mockCreatedRunner]);
+      });
+
+      it('does not show a saving state', () => {
+        expect(findSubmitBtn().props('loading')).toBe(false);
+      });
+    });
+
+    describe('when a server error occurs', () => {
+      const error = new Error('Error!');
+
+      beforeEach(async () => {
+        runnerCreateHandler.mockRejectedValue(error);
+
+        findForm().vm.$emit('submit', { preventDefault });
+        await waitForPromises();
+      });
+
+      it('emits "error" result', async () => {
+        expect(wrapper.emitted('error')[0]).toEqual([error]);
+      });
+
+      it('does not show a saving state', () => {
+        expect(findSubmitBtn().props('loading')).toBe(false);
+      });
+
+      it('reports error', () => {
+        expect(captureException).toHaveBeenCalledTimes(1);
+        expect(captureException).toHaveBeenCalledWith({
+          component: 'RunnerCreateForm',
+          error,
+        });
+      });
+    });
+
+    describe('when a validation error occurs', () => {
+      const errorMsg1 = 'Issue1!';
+      const errorMsg2 = 'Issue2!';
+
+      beforeEach(async () => {
+        runnerCreateHandler.mockResolvedValue({
+          data: {
+            runnerCreate: {
+              errors: [errorMsg1, errorMsg2],
+              runner: null,
+            },
+          },
+        });
+
+        findForm().vm.$emit('submit', { preventDefault });
+        await waitForPromises();
+      });
+
+      it('emits "error" results', async () => {
+        expect(wrapper.emitted('error')[0]).toEqual([new Error(`${errorMsg1} ${errorMsg2}`)]);
+      });
+
+      it('does not show a saving state', () => {
+        expect(findSubmitBtn().props('loading')).toBe(false);
+      });
+
+      it('does not report error', () => {
+        expect(captureException).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/ci/runner/components/runner_delete_button_spec.js b/spec/frontend/ci/runner/components/runner_delete_button_spec.js
index 02960ad427e..f9bea318d84 100644
--- a/spec/frontend/ci/runner/components/runner_delete_button_spec.js
+++ b/spec/frontend/ci/runner/components/runner_delete_button_spec.js
@@ -8,7 +8,7 @@ import runnerDeleteMutation from '~/ci/runner/graphql/shared/runner_delete.mutat
 import waitForPromises from 'helpers/wait_for_promises';
 import { captureException } from '~/ci/runner/sentry_utils';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { I18N_DELETE_RUNNER } from '~/ci/runner/constants';
 
 import RunnerDeleteButton from '~/ci/runner/components/runner_delete_button.vue';
@@ -21,7 +21,7 @@ const mockRunnerName = `#${mockRunnerId} (${mockRunner.shortSha})`;
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 describe('RunnerDeleteButton', () => {
@@ -53,8 +53,8 @@ describe('RunnerDeleteButton', () => {
       },
       apolloProvider,
       directives: {
-        GlTooltip: createMockDirective(),
-        GlModal: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
+        GlModal: createMockDirective('gl-modal'),
       },
     });
   };
@@ -83,10 +83,6 @@ describe('RunnerDeleteButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays a delete button without an icon', () => {
     expect(findBtn().props()).toMatchObject({
       loading: false,
diff --git a/spec/frontend/ci/runner/components/runner_details_spec.js b/spec/frontend/ci/runner/components/runner_details_spec.js
index 65a81973869..c2d9e86aa91 100644
--- a/spec/frontend/ci/runner/components/runner_details_spec.js
+++ b/spec/frontend/ci/runner/components/runner_details_spec.js
@@ -37,10 +37,6 @@ describe('RunnerDetails', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Details tab', () => {
     describe.each`
       field                    | runner                                                             | expectedValue
diff --git a/spec/frontend/ci/runner/components/runner_edit_button_spec.js b/spec/frontend/ci/runner/components/runner_edit_button_spec.js
index 907cdc90100..5cc1ee049f4 100644
--- a/spec/frontend/ci/runner/components/runner_edit_button_spec.js
+++ b/spec/frontend/ci/runner/components/runner_edit_button_spec.js
@@ -11,7 +11,7 @@ describe('RunnerEditButton', () => {
     wrapper = mountFn(RunnerEditButton, {
       attrs,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -20,10 +20,6 @@ describe('RunnerEditButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays Edit text', () => {
     expect(wrapper.attributes('aria-label')).toBe('Edit');
   });
diff --git a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
index 408750e646f..ac84c7898bf 100644
--- a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
+++ b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js
@@ -65,10 +65,6 @@ describe('RunnerList', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('binds a namespace to the filtered search', () => {
     expect(findFilteredSearch().props('namespace')).toBe('runners');
   });
diff --git a/spec/frontend/ci/runner/components/runner_groups_spec.js b/spec/frontend/ci/runner/components/runner_groups_spec.js
index 0991feb2e55..e4f5f55ab4b 100644
--- a/spec/frontend/ci/runner/components/runner_groups_spec.js
+++ b/spec/frontend/ci/runner/components/runner_groups_spec.js
@@ -23,10 +23,6 @@ describe('RunnerGroups', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Shows a heading', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/runner/components/runner_header_spec.js b/spec/frontend/ci/runner/components/runner_header_spec.js
index abe3b47767e..c851966431d 100644
--- a/spec/frontend/ci/runner/components/runner_header_spec.js
+++ b/spec/frontend/ci/runner/components/runner_header_spec.js
@@ -42,10 +42,6 @@ describe('RunnerHeader', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the runner status', () => {
     createComponent({
       mountFn: mountExtended,
diff --git a/spec/frontend/ci/runner/components/runner_jobs_spec.js b/spec/frontend/ci/runner/components/runner_jobs_spec.js
index bdb8a4a31a3..365b0f1f5ba 100644
--- a/spec/frontend/ci/runner/components/runner_jobs_spec.js
+++ b/spec/frontend/ci/runner/components/runner_jobs_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import RunnerJobs from '~/ci/runner/components/runner_jobs.vue';
 import RunnerJobsTable from '~/ci/runner/components/runner_jobs_table.vue';
 import RunnerPagination from '~/ci/runner/components/runner_pagination.vue';
@@ -15,7 +15,7 @@ import runnerJobsQuery from '~/ci/runner/graphql/show/runner_jobs.query.graphql'
 
 import { runnerData, runnerJobsData } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 const mockRunner = runnerData.data.runner;
@@ -47,7 +47,6 @@ describe('RunnerJobs', () => {
 
   afterEach(() => {
     mockRunnerJobsQuery.mockReset();
-    wrapper.destroy();
   });
 
   it('Requests runner jobs', async () => {
diff --git a/spec/frontend/ci/runner/components/runner_jobs_table_spec.js b/spec/frontend/ci/runner/components/runner_jobs_table_spec.js
index 281aa1aeb77..694c5a6ed17 100644
--- a/spec/frontend/ci/runner/components/runner_jobs_table_spec.js
+++ b/spec/frontend/ci/runner/components/runner_jobs_table_spec.js
@@ -37,10 +37,6 @@ describe('RunnerJobsTable', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Sets job id as a row key', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/runner/components/runner_list_empty_state_spec.js b/spec/frontend/ci/runner/components/runner_list_empty_state_spec.js
index 6aea3ddf58c..3e813723b5b 100644
--- a/spec/frontend/ci/runner/components/runner_list_empty_state_spec.js
+++ b/spec/frontend/ci/runner/components/runner_list_empty_state_spec.js
@@ -31,7 +31,7 @@ describe('RunnerListEmptyState', () => {
         ...props,
       },
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
       stubs: {
         GlEmptyState,
@@ -62,11 +62,11 @@ describe('RunnerListEmptyState', () => {
         expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
       });
 
-      describe('when create_runner_workflow is enabled', () => {
+      describe('when create_runner_workflow_for_admin is enabled', () => {
         beforeEach(() => {
           createComponent({
             provide: {
-              glFeatures: { createRunnerWorkflow: true },
+              glFeatures: { createRunnerWorkflowForAdmin: true },
             },
           });
         });
@@ -76,14 +76,14 @@ describe('RunnerListEmptyState', () => {
         });
       });
 
-      describe('when create_runner_workflow is enabled and newRunnerPath not defined', () => {
+      describe('when create_runner_workflow_for_admin is enabled and newRunnerPath not defined', () => {
         beforeEach(() => {
           createComponent({
             props: {
               newRunnerPath: null,
             },
             provide: {
-              glFeatures: { createRunnerWorkflow: true },
+              glFeatures: { createRunnerWorkflowForAdmin: true },
             },
           });
         });
@@ -95,11 +95,11 @@ describe('RunnerListEmptyState', () => {
         });
       });
 
-      describe('when create_runner_workflow is disabled', () => {
+      describe('when create_runner_workflow_for_admin is disabled', () => {
         beforeEach(() => {
           createComponent({
             provide: {
-              glFeatures: { createRunnerWorkflow: false },
+              glFeatures: { createRunnerWorkflowForAdmin: false },
             },
           });
         });
diff --git a/spec/frontend/ci/runner/components/runner_list_spec.js b/spec/frontend/ci/runner/components/runner_list_spec.js
index 2e5d1dbd063..6f4913dca3e 100644
--- a/spec/frontend/ci/runner/components/runner_list_spec.js
+++ b/spec/frontend/ci/runner/components/runner_list_spec.js
@@ -57,10 +57,6 @@ describe('RunnerList', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays headers', () => {
     createComponent(
       {
diff --git a/spec/frontend/ci/runner/components/runner_membership_toggle_spec.js b/spec/frontend/ci/runner/components/runner_membership_toggle_spec.js
index f089becd400..7ff3ec92042 100644
--- a/spec/frontend/ci/runner/components/runner_membership_toggle_spec.js
+++ b/spec/frontend/ci/runner/components/runner_membership_toggle_spec.js
@@ -18,10 +18,6 @@ describe('RunnerMembershipToggle', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays text', () => {
     createComponent({ mountFn: mount });
 
diff --git a/spec/frontend/ci/runner/components/runner_pagination_spec.js b/spec/frontend/ci/runner/components/runner_pagination_spec.js
index f835ee4514d..6d84eb810f8 100644
--- a/spec/frontend/ci/runner/components/runner_pagination_spec.js
+++ b/spec/frontend/ci/runner/components/runner_pagination_spec.js
@@ -16,10 +16,6 @@ describe('RunnerPagination', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('When in between pages', () => {
     const mockPageInfo = {
       startCursor: mockStartCursor,
diff --git a/spec/frontend/ci/runner/components/runner_pause_button_spec.js b/spec/frontend/ci/runner/components/runner_pause_button_spec.js
index 12680e01b98..62e6cc902b7 100644
--- a/spec/frontend/ci/runner/components/runner_pause_button_spec.js
+++ b/spec/frontend/ci/runner/components/runner_pause_button_spec.js
@@ -7,7 +7,7 @@ import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_help
 import runnerToggleActiveMutation from '~/ci/runner/graphql/shared/runner_toggle_active.mutation.graphql';
 import waitForPromises from 'helpers/wait_for_promises';
 import { captureException } from '~/ci/runner/sentry_utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   I18N_PAUSE,
   I18N_PAUSE_TOOLTIP,
@@ -22,7 +22,7 @@ const mockRunner = allRunnersData.data.runners.nodes[0];
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 describe('RunnerPauseButton', () => {
@@ -46,7 +46,7 @@ describe('RunnerPauseButton', () => {
       },
       apolloProvider: createMockApollo([[runnerToggleActiveMutation, runnerToggleActiveHandler]]),
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -74,10 +74,6 @@ describe('RunnerPauseButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Pause/Resume action', () => {
     describe.each`
       runnerState | icon       | content        | tooltip                | isActive | newActiveValue
diff --git a/spec/frontend/ci/runner/components/runner_paused_badge_spec.js b/spec/frontend/ci/runner/components/runner_paused_badge_spec.js
index b051ebe99a7..54768ea50da 100644
--- a/spec/frontend/ci/runner/components/runner_paused_badge_spec.js
+++ b/spec/frontend/ci/runner/components/runner_paused_badge_spec.js
@@ -16,7 +16,7 @@ describe('RunnerTypeBadge', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -25,10 +25,6 @@ describe('RunnerTypeBadge', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders paused state', () => {
     expect(wrapper.text()).toBe(I18N_PAUSED);
     expect(findBadge().props('variant')).toBe('warning');
diff --git a/spec/frontend/ci/runner/components/runner_projects_spec.js b/spec/frontend/ci/runner/components/runner_projects_spec.js
index 17517c4db66..ccc1bc18675 100644
--- a/spec/frontend/ci/runner/components/runner_projects_spec.js
+++ b/spec/frontend/ci/runner/components/runner_projects_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { sprintf } from '~/locale';
 import {
   I18N_ASSIGNED_PROJECTS,
@@ -22,7 +22,7 @@ import runnerProjectsQuery from '~/ci/runner/graphql/show/runner_projects.query.
 
 import { runnerData, runnerProjectsData } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 const mockRunner = runnerData.data.runner;
@@ -56,7 +56,6 @@ describe('RunnerProjects', () => {
 
   afterEach(() => {
     mockRunnerProjectsQuery.mockReset();
-    wrapper.destroy();
   });
 
   it('Requests runner projects', async () => {
diff --git a/spec/frontend/ci/runner/components/runner_status_badge_spec.js b/spec/frontend/ci/runner/components/runner_status_badge_spec.js
index 45b410df2d4..e1eb81f2d23 100644
--- a/spec/frontend/ci/runner/components/runner_status_badge_spec.js
+++ b/spec/frontend/ci/runner/components/runner_status_badge_spec.js
@@ -31,7 +31,7 @@ describe('RunnerTypeBadge', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -43,8 +43,6 @@ describe('RunnerTypeBadge', () => {
 
   afterEach(() => {
     jest.useFakeTimers({ legacyFakeTimers: true });
-
-    wrapper.destroy();
   });
 
   it('renders online state', () => {
diff --git a/spec/frontend/ci/runner/components/runner_tag_spec.js b/spec/frontend/ci/runner/components/runner_tag_spec.js
index 7bcb046ae43..e3d46e5d6df 100644
--- a/spec/frontend/ci/runner/components/runner_tag_spec.js
+++ b/spec/frontend/ci/runner/components/runner_tag_spec.js
@@ -29,8 +29,8 @@ describe('RunnerTag', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
-        GlResizeObserver: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
       },
     });
   };
@@ -39,10 +39,6 @@ describe('RunnerTag', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays tag text', () => {
     expect(wrapper.text()).toBe(mockTag);
   });
diff --git a/spec/frontend/ci/runner/components/runner_tags_spec.js b/spec/frontend/ci/runner/components/runner_tags_spec.js
index 96bec00302b..bcb1d1f9e13 100644
--- a/spec/frontend/ci/runner/components/runner_tags_spec.js
+++ b/spec/frontend/ci/runner/components/runner_tags_spec.js
@@ -21,10 +21,6 @@ describe('RunnerTags', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays tags text', () => {
     expect(wrapper.text()).toMatchInterpolatedText('tag1 tag2');
 
diff --git a/spec/frontend/ci/runner/components/runner_type_badge_spec.js b/spec/frontend/ci/runner/components/runner_type_badge_spec.js
index 58f09362759..7a0fb6f69ea 100644
--- a/spec/frontend/ci/runner/components/runner_type_badge_spec.js
+++ b/spec/frontend/ci/runner/components/runner_type_badge_spec.js
@@ -23,15 +23,11 @@ describe('RunnerTypeBadge', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     type             | text
     ${INSTANCE_TYPE} | ${I18N_INSTANCE_TYPE}
diff --git a/spec/frontend/ci/runner/components/runner_type_tabs_spec.js b/spec/frontend/ci/runner/components/runner_type_tabs_spec.js
index 3347c190083..6e15c84ad7e 100644
--- a/spec/frontend/ci/runner/components/runner_type_tabs_spec.js
+++ b/spec/frontend/ci/runner/components/runner_type_tabs_spec.js
@@ -63,10 +63,6 @@ describe('RunnerTypeTabs', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Renders all options to filter runners by default', () => {
     createComponent();
 
diff --git a/spec/frontend/ci/runner/components/runner_update_form_spec.js b/spec/frontend/ci/runner/components/runner_update_form_spec.js
index a0e51ebf958..620e2f85890 100644
--- a/spec/frontend/ci/runner/components/runner_update_form_spec.js
+++ b/spec/frontend/ci/runner/components/runner_update_form_spec.js
@@ -5,7 +5,7 @@ import { __ } from '~/locale';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
 import RunnerUpdateForm from '~/ci/runner/components/runner_update_form.vue';
 import {
@@ -21,7 +21,7 @@ import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_al
 import { runnerFormData } from '../mock_data';
 
 jest.mock('~/ci/runner/local_storage_alert/save_alert_to_local_storage');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility');
 
@@ -107,10 +107,6 @@ describe('RunnerUpdateForm', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Form has a submit button', () => {
     expect(findSubmit().exists()).toBe(true);
   });
diff --git a/spec/frontend/ci/runner/components/search_tokens/tag_token_spec.js b/spec/frontend/ci/runner/components/search_tokens/tag_token_spec.js
index b7d9d3ad23e..e9f2e888b9a 100644
--- a/spec/frontend/ci/runner/components/search_tokens/tag_token_spec.js
+++ b/spec/frontend/ci/runner/components/search_tokens/tag_token_spec.js
@@ -3,14 +3,14 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import TagToken, { TAG_SUGGESTIONS_PATH } from '~/ci/runner/components/search_tokens/tag_token.vue';
 import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
 import { getRecentlyUsedSuggestions } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', () => ({
   ...jest.requireActual('~/vue_shared/components/filtered_search_bar/filtered_search_utils'),
@@ -90,7 +90,6 @@ describe('TagToken', () => {
 
   afterEach(() => {
     getRecentlyUsedSuggestions.mockReset();
-    wrapper.destroy();
   });
 
   describe('when the tags token is displayed', () => {
diff --git a/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js b/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js
index cad61f26012..f30b75ee614 100644
--- a/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js
+++ b/spec/frontend/ci/runner/components/stat/runner_single_stat_spec.js
@@ -32,10 +32,6 @@ describe('RunnerStats', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     case              | count   | value
     ${'number'}       | ${99}   | ${'99'}
diff --git a/spec/frontend/ci/runner/components/stat/runner_stats_spec.js b/spec/frontend/ci/runner/components/stat/runner_stats_spec.js
index 3d45674d106..13366a788d5 100644
--- a/spec/frontend/ci/runner/components/stat/runner_stats_spec.js
+++ b/spec/frontend/ci/runner/components/stat/runner_stats_spec.js
@@ -47,10 +47,6 @@ describe('RunnerStats', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Displays all the stats', () => {
     createComponent({
       mountFn: mount,
diff --git a/spec/frontend/ci/runner/group_runner_show/group_runner_show_app_spec.js b/spec/frontend/ci/runner/group_runner_show/group_runner_show_app_spec.js
index 2ad31dea774..fadc6e5ebc5 100644
--- a/spec/frontend/ci/runner/group_runner_show/group_runner_show_app_spec.js
+++ b/spec/frontend/ci/runner/group_runner_show/group_runner_show_app_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -24,7 +24,7 @@ import { saveAlertToLocalStorage } from '~/ci/runner/local_storage_alert/save_al
 import { runnerData } from '../mock_data';
 
 jest.mock('~/ci/runner/local_storage_alert/save_alert_to_local_storage');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility');
 
@@ -74,7 +74,6 @@ describe('GroupRunnerShowApp', () => {
 
   afterEach(() => {
     mockRunnerQuery.mockReset();
-    wrapper.destroy();
   });
 
   describe('When showing runner details', () => {
diff --git a/spec/frontend/ci/runner/group_runners/group_runners_app_spec.js b/spec/frontend/ci/runner/group_runners/group_runners_app_spec.js
index 39ea5cade28..00c7262e38b 100644
--- a/spec/frontend/ci/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/ci/runner/group_runners/group_runners_app_spec.js
@@ -9,7 +9,7 @@ import {
   mountExtended,
 } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
@@ -74,7 +74,7 @@ const mockGroupRunnersCount = mockGroupRunnersEdges.length;
 const mockGroupRunnersHandler = jest.fn();
 const mockGroupRunnersCountHandler = jest.fn();
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
@@ -138,7 +138,6 @@ describe('GroupRunnersApp', () => {
   afterEach(() => {
     mockGroupRunnersHandler.mockReset();
     mockGroupRunnersCountHandler.mockReset();
-    wrapper.destroy();
   });
 
   it('shows the runner tabs with a runner count for each type', async () => {
diff --git a/spec/frontend/ci/runner/local_storage_alert/show_alert_from_local_storage_spec.js b/spec/frontend/ci/runner/local_storage_alert/show_alert_from_local_storage_spec.js
index 03908891cfd..30e49fc7644 100644
--- a/spec/frontend/ci/runner/local_storage_alert/show_alert_from_local_storage_spec.js
+++ b/spec/frontend/ci/runner/local_storage_alert/show_alert_from_local_storage_spec.js
@@ -2,9 +2,9 @@ import AccessorUtilities from '~/lib/utils/accessor';
 import { showAlertFromLocalStorage } from '~/ci/runner/local_storage_alert/show_alert_from_local_storage';
 import { LOCAL_STORAGE_ALERT_KEY } from '~/ci/runner/local_storage_alert/constants';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('showAlertFromLocalStorage', () => {
   useLocalStorageSpy();
diff --git a/spec/frontend/ci/runner/mock_data.js b/spec/frontend/ci/runner/mock_data.js
index 5cdf0ea4e3b..092a419c1fe 100644
--- a/spec/frontend/ci/runner/mock_data.js
+++ b/spec/frontend/ci/runner/mock_data.js
@@ -1,6 +1,10 @@
 // Fixtures generated by: spec/frontend/fixtures/runner.rb
 
+// Register runner queries
+import runnerForRegistration from 'test_fixtures/graphql/ci/runner/register/runner_for_registration.query.graphql.json';
+
 // Show runner queries
+import runnerCreateResult from 'test_fixtures/graphql/ci/runner/new/runner_create.mutation.graphql.json';
 import runnerData from 'test_fixtures/graphql/ci/runner/show/runner.query.graphql.json';
 import runnerWithGroupData from 'test_fixtures/graphql/ci/runner/show/runner.query.graphql.with_group.json';
 import runnerProjectsData from 'test_fixtures/graphql/ci/runner/show/runner_projects.query.graphql.json';
@@ -9,6 +13,8 @@ import runnerJobsData from 'test_fixtures/graphql/ci/runner/show/runner_jobs.que
 // Edit runner queries
 import runnerFormData from 'test_fixtures/graphql/ci/runner/edit/runner_form.query.graphql.json';
 
+// New runner queries
+
 // List queries
 import allRunnersData from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.json';
 import allRunnersDataPaginated from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.paginated.json';
@@ -321,4 +327,6 @@ export {
   runnerProjectsData,
   runnerJobsData,
   runnerFormData,
+  runnerCreateResult,
+  runnerForRegistration,
 };
diff --git a/spec/frontend/ci/runner/runner_edit/runner_edit_app_spec.js b/spec/frontend/ci/runner/runner_edit/runner_edit_app_spec.js
index a9369a5e626..79bbf95f8f0 100644
--- a/spec/frontend/ci/runner/runner_edit/runner_edit_app_spec.js
+++ b/spec/frontend/ci/runner/runner_edit/runner_edit_app_spec.js
@@ -3,7 +3,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '~/ci/runner/components/runner_header.vue';
@@ -15,7 +15,7 @@ import { I18N_STATUS_NEVER_CONTACTED, I18N_INSTANCE_TYPE } from '~/ci/runner/con
 
 import { runnerFormData } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/ci/runner/sentry_utils');
 
 const mockRunner = runnerFormData.data.runner;
@@ -51,7 +51,6 @@ describe('RunnerEditApp', () => {
 
   afterEach(() => {
     mockRunnerQuery.mockReset();
-    wrapper.destroy();
   });
 
   it('expect GraphQL ID to be requested', async () => {
diff --git a/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap b/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap
index b2084e3a7de..1be89ae832d 100644
--- a/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap
+++ b/spec/frontend/ci_secure_files/components/metadata/__snapshots__/modal_spec.js.snap
@@ -15,7 +15,7 @@ exports[`Secure File Metadata Modal when a .cer file is supplied matches cer the
   >
      
     <table
-      aria-busy="false"
+      aria-busy=""
       aria-colcount="2"
       class="table b-table gl-table"
       role="table"
@@ -196,7 +196,7 @@ exports[`Secure File Metadata Modal when a .mobileprovision file is supplied mat
   >
      
     <table
-      aria-busy="false"
+      aria-busy=""
       aria-colcount="2"
       class="table b-table gl-table"
       role="table"
diff --git a/spec/frontend/ci_secure_files/components/metadata/button_spec.js b/spec/frontend/ci_secure_files/components/metadata/button_spec.js
index 4ac5b3325d4..5bd4bab25af 100644
--- a/spec/frontend/ci_secure_files/components/metadata/button_spec.js
+++ b/spec/frontend/ci_secure_files/components/metadata/button_spec.js
@@ -12,10 +12,6 @@ describe('Secure File Metadata Button', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createWrapper = (secureFile = {}, admin = false) => {
     wrapper = mount(Button, {
       propsData: {
diff --git a/spec/frontend/ci_secure_files/components/metadata/modal_spec.js b/spec/frontend/ci_secure_files/components/metadata/modal_spec.js
index 230507d32d7..e181d15f2f9 100644
--- a/spec/frontend/ci_secure_files/components/metadata/modal_spec.js
+++ b/spec/frontend/ci_secure_files/components/metadata/modal_spec.js
@@ -37,7 +37,6 @@ describe('Secure File Metadata Modal', () => {
 
   afterEach(() => {
     unmockTracking();
-    wrapper.destroy();
   });
 
   describe('when a .cer file is supplied', () => {
diff --git a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
index ab6200ca6f4..17b5fdc4dde 100644
--- a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
+++ b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
@@ -15,11 +15,6 @@ const dummyApiVersion = 'v3000';
 const dummyProjectId = 1;
 const fileSizeLimit = 5;
 const dummyUrlRoot = '/gitlab';
-const dummyGon = {
-  api_version: dummyApiVersion,
-  relative_url_root: dummyUrlRoot,
-};
-let originalGon;
 const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${dummyProjectId}/secure_files`;
 
 describe('SecureFilesList', () => {
@@ -28,16 +23,16 @@ describe('SecureFilesList', () => {
   let trackingSpy;
 
   beforeEach(() => {
-    originalGon = window.gon;
     trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
-    window.gon = { ...dummyGon };
+    window.gon = {
+      api_version: dummyApiVersion,
+      relative_url_root: dummyUrlRoot,
+    };
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
     unmockTracking();
-    window.gon = originalGon;
   });
 
   const createWrapper = (admin = true, props = {}) => {
diff --git a/spec/frontend/clusters/agents/components/activity_events_list_spec.js b/spec/frontend/clusters/agents/components/activity_events_list_spec.js
index 6b374b6620d..770815a9403 100644
--- a/spec/frontend/clusters/agents/components/activity_events_list_spec.js
+++ b/spec/frontend/clusters/agents/components/activity_events_list_spec.js
@@ -44,10 +44,6 @@ describe('ActivityEvents', () => {
   const findAllActivityHistoryItems = () => wrapper.findAllComponents(ActivityHistoryItem);
   const findSectionTitle = (at) => wrapper.findAllByTestId('activity-section-title').at(at);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('while the agentEvents query is loading', () => {
     it('displays a loading icon', async () => {
       createWrapper();
diff --git a/spec/frontend/clusters/agents/components/activity_history_item_spec.js b/spec/frontend/clusters/agents/components/activity_history_item_spec.js
index 68f6f11aa8f..48460519c6c 100644
--- a/spec/frontend/clusters/agents/components/activity_history_item_spec.js
+++ b/spec/frontend/clusters/agents/components/activity_history_item_spec.js
@@ -25,10 +25,6 @@ describe('ActivityHistoryItem', () => {
   const findHistoryItem = () => wrapper.findComponent(HistoryItem);
   const findTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     kind                    | icon                                              | title                                                                   | lineNumber
     ${'token_created'}      | ${EVENT_DETAILS.token_created.eventTypeIcon}      | ${sprintf(EVENT_DETAILS.token_created.title, { tokenName: agentName })} | ${0}
diff --git a/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
index db1219ccb41..ac0ce89f334 100644
--- a/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
+++ b/spec/frontend/clusters/agents/components/agent_integration_status_row_spec.js
@@ -25,10 +25,6 @@ describe('IntegrationStatus', () => {
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findBadge = () => wrapper.findComponent(GlBadge);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('icon', () => {
     const icon = 'status-success';
     const iconClass = 'gl-text-green-500';
diff --git a/spec/frontend/clusters/agents/components/create_token_button_spec.js b/spec/frontend/clusters/agents/components/create_token_button_spec.js
index 73856b74a8d..5a8906813cf 100644
--- a/spec/frontend/clusters/agents/components/create_token_button_spec.js
+++ b/spec/frontend/clusters/agents/components/create_token_button_spec.js
@@ -21,7 +21,7 @@ describe('CreateTokenButton', () => {
         ...provideData,
       },
       directives: {
-        GlModalDirective: createMockDirective(),
+        GlModalDirective: createMockDirective('gl-modal-directive'),
       },
       stubs: {
         GlTooltip,
@@ -29,10 +29,6 @@ describe('CreateTokenButton', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when user can create token', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/clusters/agents/components/create_token_modal_spec.js b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
index 0d10801e80e..ff698952c6b 100644
--- a/spec/frontend/clusters/agents/components/create_token_modal_spec.js
+++ b/spec/frontend/clusters/agents/components/create_token_modal_spec.js
@@ -119,7 +119,6 @@ describe('CreateTokenModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     apolloProvider = null;
     createResponse = null;
   });
diff --git a/spec/frontend/clusters/agents/components/integration_status_spec.js b/spec/frontend/clusters/agents/components/integration_status_spec.js
index 36f0e622452..28a59391578 100644
--- a/spec/frontend/clusters/agents/components/integration_status_spec.js
+++ b/spec/frontend/clusters/agents/components/integration_status_spec.js
@@ -27,10 +27,6 @@ describe('IntegrationStatus', () => {
   const findAgentStatus = () => wrapper.findByTestId('agent-status');
   const findAgentIntegrationStatusRows = () => wrapper.findAllComponents(AgentIntegrationStatusRow);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     lastUsedAt               | status               | iconName
     ${null}                  | ${'Never connected'} | ${'status-neutral'}
diff --git a/spec/frontend/clusters/agents/components/revoke_token_button_spec.js b/spec/frontend/clusters/agents/components/revoke_token_button_spec.js
index 6521221cbd7..ed7c940bb04 100644
--- a/spec/frontend/clusters/agents/components/revoke_token_button_spec.js
+++ b/spec/frontend/clusters/agents/components/revoke_token_button_spec.js
@@ -45,7 +45,7 @@ describe('RevokeTokenButton', () => {
   const findInput = () => wrapper.findComponent(GlFormInput);
   const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findPrimaryAction = () => findModal().props('actionPrimary');
-  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
+  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[attr];
 
   const createMockApolloProvider = ({ mutationResponse }) => {
     revokeSpy = jest.fn().mockResolvedValue(mutationResponse);
@@ -105,7 +105,6 @@ describe('RevokeTokenButton', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     apolloProvider = null;
     revokeSpy = null;
   });
diff --git a/spec/frontend/clusters/agents/components/show_spec.js b/spec/frontend/clusters/agents/components/show_spec.js
index efa85136b17..118a3af48e0 100644
--- a/spec/frontend/clusters/agents/components/show_spec.js
+++ b/spec/frontend/clusters/agents/components/show_spec.js
@@ -79,10 +79,6 @@ describe('ClusterAgentShow', () => {
   const findActivity = () => wrapper.findComponent(ActivityEvents);
   const findIntegrationStatus = () => wrapper.findComponent(IntegrationStatus);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default behaviour', () => {
     beforeEach(async () => {
       createWrapper({ clusterAgent: defaultClusterAgent });
diff --git a/spec/frontend/clusters/agents/components/token_table_spec.js b/spec/frontend/clusters/agents/components/token_table_spec.js
index 334615f1818..1a6aeedb694 100644
--- a/spec/frontend/clusters/agents/components/token_table_spec.js
+++ b/spec/frontend/clusters/agents/components/token_table_spec.js
@@ -57,10 +57,6 @@ describe('ClusterAgentTokenTable', () => {
     return createComponent(defaultTokens);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the create token button', () => {
     expect(findCreateTokenBtn().exists()).toBe(true);
   });
diff --git a/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
index 656e72baf77..21ffda8578a 100644
--- a/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
@@ -3,7 +3,7 @@
 exports[`NewCluster renders the cluster component correctly 1`] = `
 "<div class=\\"gl-pt-4\\">
   <h4>Enter your Kubernetes cluster certificate details</h4>
-  <p>Enter details about your cluster. <b-link-stub href=\\"/help/user/project/clusters/add_existing_cluster\\" event=\\"click\\" routertag=\\"a\\" class=\\"gl-link\\">How do I use a certificate to connect to my cluster?</b-link-stub>
+  <p>Enter details about your cluster. <b-link-stub href=\\"/help/user/project/clusters/add_existing_cluster\\" class=\\"gl-link\\">How do I use a certificate to connect to my cluster?</b-link-stub>
   </p>
 </div>"
 `;
diff --git a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
index 46ee123a12d..67b0ecdf7eb 100644
--- a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
@@ -43,3 +43,212 @@ exports[`Remove cluster confirmation modal renders buttons with modal included 1
   <!---->
 </div>
 `;
+
+exports[`Remove cluster confirmation modal two buttons open modal with "cleanup" option 1`] = `
+<div
+  class="gl-display-flex"
+>
+  <button
+    class="btn gl-mr-3 btn-danger btn-md gl-button"
+    data-testid="remove-integration-and-resources-button"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      
+    Remove integration and resources
+  
+    </span>
+  </button>
+   
+  <button
+    class="btn btn-danger btn-md gl-button btn-danger-secondary"
+    data-testid="remove-integration-button"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      
+    Remove integration
+  
+    </span>
+  </button>
+   
+  <div
+    kind="danger"
+  >
+    <p>
+      You are about to remove your cluster integration and all GitLab-created resources associated with this cluster.
+    </p>
+     
+    <div>
+      
+      This will permanently delete the following resources:
+      
+      <ul>
+        <li>
+          Any project namespaces
+        </li>
+         
+        <li>
+          <code>
+            clusterroles
+          </code>
+        </li>
+         
+        <li>
+          <code>
+            clusterrolebindings
+          </code>
+        </li>
+      </ul>
+    </div>
+     
+    <strong>
+      To remove your integration and resources, type 
+      <code>
+        my-test-cluster
+      </code>
+       to confirm:
+    </strong>
+     
+    <form
+      action="clusterPath"
+      class="gl-mb-5"
+      method="post"
+    >
+      <input
+        name="_method"
+        type="hidden"
+        value="delete"
+      />
+       
+      <input
+        name="authenticity_token"
+        type="hidden"
+      />
+       
+      <input
+        name="cleanup"
+        type="hidden"
+        value="true"
+      />
+       
+      <input
+        autocomplete="off"
+        class="gl-form-input form-control"
+        id="__BVID__14"
+        name="confirm_cluster_name_input"
+        type="text"
+      />
+    </form>
+     
+    <span>
+      If you do not wish to delete all associated GitLab resources, you can simply remove the integration.
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Remove cluster confirmation modal two buttons open modal without "cleanup" option 1`] = `
+<div
+  class="gl-display-flex"
+>
+  <button
+    class="btn gl-mr-3 btn-danger btn-md gl-button"
+    data-testid="remove-integration-and-resources-button"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      
+    Remove integration and resources
+  
+    </span>
+  </button>
+   
+  <button
+    class="btn btn-danger btn-md gl-button btn-danger-secondary"
+    data-testid="remove-integration-button"
+    type="button"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      
+    Remove integration
+  
+    </span>
+  </button>
+   
+  <div
+    kind="danger"
+  >
+    <p>
+      You are about to remove your cluster integration.
+    </p>
+     
+    <!---->
+     
+    <strong>
+      To remove your integration, type 
+      <code>
+        my-test-cluster
+      </code>
+       to confirm:
+    </strong>
+     
+    <form
+      action="clusterPath"
+      class="gl-mb-5"
+      method="post"
+    >
+      <input
+        name="_method"
+        type="hidden"
+        value="delete"
+      />
+       
+      <input
+        name="authenticity_token"
+        type="hidden"
+      />
+       
+      <input
+        name="cleanup"
+        type="hidden"
+        value="true"
+      />
+       
+      <input
+        autocomplete="off"
+        class="gl-form-input form-control"
+        id="__BVID__21"
+        name="confirm_cluster_name_input"
+        type="text"
+      />
+    </form>
+     
+    <!---->
+  </div>
+</div>
+`;
diff --git a/spec/frontend/clusters/components/new_cluster_spec.js b/spec/frontend/clusters/components/new_cluster_spec.js
index ef39c90aaef..398b472a3a7 100644
--- a/spec/frontend/clusters/components/new_cluster_spec.js
+++ b/spec/frontend/clusters/components/new_cluster_spec.js
@@ -20,10 +20,6 @@ describe('NewCluster', () => {
     return createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the cluster component correctly', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
diff --git a/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js b/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
index 53683af893a..04b7909b534 100644
--- a/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
+++ b/spec/frontend/clusters/components/remove_cluster_confirmation_spec.js
@@ -6,6 +6,7 @@ import RemoveClusterConfirmation from '~/clusters/components/remove_cluster_conf
 
 describe('Remove cluster confirmation modal', () => {
   let wrapper;
+  const showMock = jest.fn();
 
   const createComponent = ({ props = {}, stubs = {} } = {}) => {
     wrapper = mount(RemoveClusterConfirmation, {
@@ -18,11 +19,6 @@ describe('Remove cluster confirmation modal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders buttons with modal included', () => {
     createComponent();
     expect(wrapper.element).toMatchSnapshot();
@@ -38,9 +34,13 @@ describe('Remove cluster confirmation modal', () => {
     beforeEach(() => {
       createComponent({
         props: { clusterName: 'my-test-cluster' },
-        stubs: { GlSprintf, GlModal: stubComponent(GlModal) },
+        stubs: {
+          GlSprintf,
+          GlModal: stubComponent(GlModal, {
+            methods: { show: showMock },
+          }),
+        },
       });
-      jest.spyOn(findModal().vm, 'show').mockReturnValue();
     });
 
     it('open modal with "cleanup" option', async () => {
@@ -48,8 +48,8 @@ describe('Remove cluster confirmation modal', () => {
 
       await nextTick();
 
-      expect(findModal().vm.show).toHaveBeenCalled();
-      expect(wrapper.vm.confirmCleanup).toEqual(true);
+      expect(showMock).toHaveBeenCalled();
+      expect(wrapper.element).toMatchSnapshot();
       expect(findModal().html()).toContain(
         '<strong>To remove your integration and resources, type <code>my-test-cluster</code> to confirm:</strong>',
       );
@@ -60,8 +60,8 @@ describe('Remove cluster confirmation modal', () => {
 
       await nextTick();
 
-      expect(findModal().vm.show).toHaveBeenCalled();
-      expect(wrapper.vm.confirmCleanup).toEqual(false);
+      expect(showMock).toHaveBeenCalled();
+      expect(wrapper.element).toMatchSnapshot();
       expect(findModal().html()).toContain(
         '<strong>To remove your integration, type <code>my-test-cluster</code> to confirm:</strong>',
       );
diff --git a/spec/frontend/clusters/forms/components/integration_form_spec.js b/spec/frontend/clusters/forms/components/integration_form_spec.js
index b17886a5826..396f8215b9f 100644
--- a/spec/frontend/clusters/forms/components/integration_form_spec.js
+++ b/spec/frontend/clusters/forms/components/integration_form_spec.js
@@ -1,6 +1,6 @@
 import { GlToggle, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import IntegrationForm from '~/clusters/forms/components/integration_form.vue';
 import { createStore } from '~/clusters/forms/stores/index';
@@ -27,17 +27,9 @@ describe('ClusterIntegrationForm', () => {
     });
   };
 
-  const destroyWrapper = () => {
-    wrapper.destroy();
-    wrapper = null;
-  };
-
   const findSubmitButton = () => wrapper.findComponent(GlButton);
   const findGlToggle = () => wrapper.findComponent(GlToggle);
-
-  afterEach(() => {
-    destroyWrapper();
-  });
+  const findClusterEnvironmentScopeInput = () => wrapper.find('[id="cluster_environment_scope"]');
 
   describe('rendering', () => {
     beforeEach(() => createWrapper());
@@ -50,7 +42,9 @@ describe('ClusterIntegrationForm', () => {
     });
 
     it('sets the envScope to default', () => {
-      expect(wrapper.find('[id="cluster_environment_scope"]').attributes('value')).toBe('*');
+      expect(findClusterEnvironmentScopeInput().attributes('value')).toBe(
+        defaultStoreValues.environmentScope,
+      );
     });
 
     it('sets the baseDomain to default', () => {
@@ -76,20 +70,15 @@ describe('ClusterIntegrationForm', () => {
     beforeEach(() => createWrapper());
 
     it('enables the submit button on changing toggle to different value', async () => {
-      await nextTick();
-      // setData is a bad approach because it changes the internal implementation which we should not touch
-      // but our GlFormInput lacks the ability to set a new value.
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      await wrapper.setData({ toggleEnabled: !defaultStoreValues.enabled });
+      await findGlToggle().vm.$emit('change', false);
       expect(findSubmitButton().props('disabled')).toBe(false);
     });
 
     it('enables the submit button on changing input values', async () => {
-      await nextTick();
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      await wrapper.setData({ envScope: `${defaultStoreValues.environmentScope}1` });
+      await findClusterEnvironmentScopeInput().vm.$emit(
+        'input',
+        `${defaultStoreValues.environmentScope}1`,
+      );
       expect(findSubmitButton().props('disabled')).toBe(false);
     });
   });
diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js
index a92a03fedb6..edb8b22d79e 100644
--- a/spec/frontend/clusters_list/components/agent_token_spec.js
+++ b/spec/frontend/clusters_list/components/agent_token_spec.js
@@ -53,10 +53,6 @@ describe('InstallAgentModal', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('initial state', () => {
     it('shows basic agent installation instructions', () => {
       expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallTitle);
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 2372ab30300..d91245ba9b4 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -83,8 +83,6 @@ describe('Agents', () => {
   const findBanner = () => wrapper.findComponent(GlBanner);
 
   afterEach(() => {
-    wrapper.destroy();
-
     localStorage.removeItem(AGENT_FEEDBACK_KEY);
   });
 
diff --git a/spec/frontend/clusters_list/components/ancestor_notice_spec.js b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
index 758f6586e1a..4a2effa3463 100644
--- a/spec/frontend/clusters_list/components/ancestor_notice_spec.js
+++ b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
@@ -18,10 +18,6 @@ describe('ClustersAncestorNotice', () => {
     return createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when cluster does not have ancestors', () => {
     beforeEach(async () => {
       store.state.hasAncestorClusters = false;
diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js
index f4ee3f93cb5..e4e1986f705 100644
--- a/spec/frontend/clusters_list/components/clusters_actions_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js
@@ -35,7 +35,7 @@ describe('ClustersActionsComponent', () => {
         ...provideData,
       },
       directives: {
-        GlModalDirective: createMockDirective(),
+        GlModalDirective: createMockDirective('gl-modal-directive'),
       },
     });
   };
@@ -44,9 +44,6 @@ describe('ClustersActionsComponent', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
   describe('when the certificate based clusters are enabled', () => {
     it('renders actions menu', () => {
       expect(findDropdown().exists()).toBe(true);
diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
index 2c3a224f3c8..5a5006d24c4 100644
--- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js
@@ -21,10 +21,6 @@ describe('ClustersEmptyStateComponent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the help text is not provided', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
index 6f23ed47d2a..af8d3b59869 100644
--- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js
@@ -40,10 +40,6 @@ describe('ClustersMainViewComponent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTabs = () => wrapper.findComponent(GlTabs);
   const findAllTabs = () => wrapper.findAllComponents(GlTab);
   const findGlTabAtIndex = (index) => findAllTabs().at(index);
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 20dbff9df15..207bfddcb4f 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -75,7 +75,6 @@ describe('Clusters', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
     captureException.mockRestore();
   });
@@ -271,9 +270,7 @@ describe('Clusters', () => {
     describe('when updating currentPage', () => {
       beforeEach(() => {
         mockPollingApi(HTTP_STATUS_OK, apiData, paginationHeader(totalSecondPage, perPage, 2));
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        wrapper.setData({ currentPage: 2 });
+        findPaginatedButtons().vm.$emit('input', 2);
         return axios.waitForAll();
       });
 
diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
index b4eb9242003..e81b242dd90 100644
--- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js
@@ -60,10 +60,6 @@ describe('ClustersViewAllComponent', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when agents and clusters are not loaded', () => {
     const initialState = {
       loadingClusters: true,
diff --git a/spec/frontend/clusters_list/components/delete_agent_button_spec.js b/spec/frontend/clusters_list/components/delete_agent_button_spec.js
index 82850b9dea4..53cf67bca0f 100644
--- a/spec/frontend/clusters_list/components/delete_agent_button_spec.js
+++ b/spec/frontend/clusters_list/components/delete_agent_button_spec.js
@@ -33,7 +33,7 @@ describe('DeleteAgentButton', () => {
   const findDeleteBtn = () => wrapper.findComponent(GlButton);
   const findInput = () => wrapper.findComponent(GlFormInput);
   const findPrimaryAction = () => findModal().props('actionPrimary');
-  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
+  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[attr];
   const findDeleteAgentButtonTooltip = () => wrapper.findByTestId('delete-agent-button-tooltip');
   const getTooltipText = (el) => {
     const binding = getBinding(el, 'gl-tooltip');
@@ -84,7 +84,7 @@ describe('DeleteAgentButton', () => {
         ...provideData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData,
       mocks: { $toast: { show: toast } },
@@ -108,7 +108,6 @@ describe('DeleteAgentButton', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     apolloProvider = null;
     deleteResponse = null;
     toast = null;
diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
index 10264d6a011..3156eaaecfc 100644
--- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js
+++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js
@@ -139,7 +139,6 @@ describe('InstallAgentModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     apolloProvider = null;
   });
 
diff --git a/spec/frontend/clusters_list/components/node_error_help_text_spec.js b/spec/frontend/clusters_list/components/node_error_help_text_spec.js
index 3211ba44eff..a3dfc848fc8 100644
--- a/spec/frontend/clusters_list/components/node_error_help_text_spec.js
+++ b/spec/frontend/clusters_list/components/node_error_help_text_spec.js
@@ -13,10 +13,6 @@ describe('NodeErrorHelpText', () => {
 
   const findPopover = () => wrapper.findComponent(GlPopover);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     errorType                 | wrapperText                 | popoverText
     ${'authentication_error'} | ${'Unable to Authenticate'} | ${'GitLab failed to authenticate'}
diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js
index 360fd3b2842..6d23db0517d 100644
--- a/spec/frontend/clusters_list/store/actions_spec.js
+++ b/spec/frontend/clusters_list/store/actions_spec.js
@@ -5,13 +5,13 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { MAX_REQUESTS } from '~/clusters_list/constants';
 import * as actions from '~/clusters_list/store/actions';
 import * as types from '~/clusters_list/store/mutation_types';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { apiData } from '../mock_data';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Clusters store actions', () => {
   let captureException;
@@ -81,7 +81,7 @@ describe('Clusters store actions', () => {
       );
     });
 
-    it('should show flash on API error', async () => {
+    it('should show alert on API error', async () => {
       mock.onGet().reply(HTTP_STATUS_BAD_REQUEST, 'Not Found');
 
       await testAction(
diff --git a/spec/frontend/code_navigation/components/app_spec.js b/spec/frontend/code_navigation/components/app_spec.js
index b9be262efd0..88861b0d08a 100644
--- a/spec/frontend/code_navigation/components/app_spec.js
+++ b/spec/frontend/code_navigation/components/app_spec.js
@@ -32,10 +32,6 @@ function factory(initialState = {}, props = {}) {
 }
 
 describe('Code navigation app component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('sets initial data on mount if the correct props are passed', () => {
     const codeNavigationPath = 'code/nav/path.js';
     const path = 'blob/path.js';
diff --git a/spec/frontend/code_navigation/components/popover_spec.js b/spec/frontend/code_navigation/components/popover_spec.js
index 874263e046a..1bfaf7e959e 100644
--- a/spec/frontend/code_navigation/components/popover_spec.js
+++ b/spec/frontend/code_navigation/components/popover_spec.js
@@ -61,10 +61,6 @@ function factory({ position, data, definitionPathPrefix, blobPath = 'index.js' }
 }
 
 describe('Code navigation popover component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders popover', () => {
     factory({
       position: { x: 0, y: 0, height: 0 },
diff --git a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
index debd10de118..64623968aa0 100644
--- a/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
+++ b/spec/frontend/commit/commit_box_pipeline_mini_graph_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import CommitBoxPipelineMiniGraph from '~/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue';
 import PipelineMiniGraph from '~/pipelines/components/pipeline_mini_graph/pipeline_mini_graph.vue';
 import { COMMIT_BOX_POLL_INTERVAL } from '~/projects/commit_box/info/constants';
@@ -20,7 +20,7 @@ import {
   mockUpstreamQueryResponse,
 } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -69,10 +69,6 @@ describe('Commit box pipeline mini graph', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('should display loading state when loading', () => {
       createComponent();
diff --git a/spec/frontend/commit/commit_pipeline_status_component_spec.js b/spec/frontend/commit/commit_pipeline_status_component_spec.js
index e75fb697a7b..e474ef9c635 100644
--- a/spec/frontend/commit/commit_pipeline_status_component_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_component_spec.js
@@ -3,14 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import Visibility from 'visibilityjs';
 import { nextTick } from 'vue';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import Poll from '~/lib/utils/poll';
 import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 jest.mock('~/lib/utils/poll');
 jest.mock('visibilityjs');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const mockFetchData = jest.fn();
 jest.mock('~/projects/tree/services/commit_pipeline_service', () =>
@@ -41,11 +41,6 @@ describe('Commit pipeline status component', () => {
   const findLink = () => wrapper.find('a');
   const findCiIcon = () => findLink().findComponent(CiIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('Visibility management', () => {
     describe('when component is hidden', () => {
       beforeEach(() => {
@@ -169,7 +164,7 @@ describe('Commit pipeline status component', () => {
         });
       });
 
-      it('displays flash error message', () => {
+      it('displays alert error message', () => {
         expect(createAlert).toHaveBeenCalled();
       });
     });
diff --git a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js b/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
index 8d455f8a3d7..9c7a41b3506 100644
--- a/spec/frontend/commit/components/commit_box_pipeline_status_spec.js
+++ b/spec/frontend/commit/components/commit_box_pipeline_status_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitBoxPipelineStatus from '~/projects/commit_box/info/components/commit_box_pipeline_status.vue';
 import {
@@ -23,7 +23,7 @@ const mockProvide = {
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Commit box pipeline status', () => {
   let wrapper;
@@ -54,10 +54,6 @@ describe('Commit box pipeline status', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('should display loading state when loading', () => {
       createComponent();
diff --git a/spec/frontend/commit/components/signature_badge_spec.js b/spec/frontend/commit/components/signature_badge_spec.js
new file mode 100644
index 00000000000..d52ad2b43e2
--- /dev/null
+++ b/spec/frontend/commit/components/signature_badge_spec.js
@@ -0,0 +1,134 @@
+import { GlBadge, GlLink, GlPopover } from '@gitlab/ui';
+import { stubComponent, RENDER_ALL_SLOTS_TEMPLATE } from 'helpers/stub_component';
+import SignatureBadge from '~/commit/components/signature_badge.vue';
+import X509CertificateDetails from '~/commit/components/x509_certificate_details.vue';
+import { typeConfig, statusConfig, verificationStatuses, signatureTypes } from '~/commit/constants';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { sshSignatureProp, gpgSignatureProp, x509SignatureProp } from '../mock_data';
+
+describe('Commit signature', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mountExtended(SignatureBadge, {
+      propsData: {
+        signature: {
+          ...props,
+        },
+        stubs: {
+          GlBadge,
+          GlLink,
+          X509CertificateDetails,
+          GlPopover: stubComponent(GlPopover, { template: RENDER_ALL_SLOTS_TEMPLATE }),
+        },
+      },
+    });
+  };
+
+  const signatureBadge = () => wrapper.findComponent(GlBadge);
+  const signaturePopover = () => wrapper.findComponent(GlPopover);
+  const signatureDescription = () => wrapper.findByTestId('signature-description');
+  const signatureKeyLabel = () => wrapper.findByTestId('signature-key-label');
+  const signatureKey = () => wrapper.findByTestId('signature-key');
+  const helpLink = () => wrapper.findComponent(GlLink);
+  const X509CertificateDetailsComponents = () => wrapper.findAllComponents(X509CertificateDetails);
+
+  describe.each`
+    signatureType          | verificationStatus
+    ${signatureTypes.GPG}  | ${verificationStatuses.VERIFIED}
+    ${signatureTypes.GPG}  | ${verificationStatuses.UNVERIFIED}
+    ${signatureTypes.GPG}  | ${verificationStatuses.UNVERIFIED_KEY}
+    ${signatureTypes.GPG}  | ${verificationStatuses.UNKNOWN_KEY}
+    ${signatureTypes.GPG}  | ${verificationStatuses.OTHER_USER}
+    ${signatureTypes.GPG}  | ${verificationStatuses.SAME_USER_DIFFERENT_EMAIL}
+    ${signatureTypes.GPG}  | ${verificationStatuses.MULTIPLE_SIGNATURES}
+    ${signatureTypes.X509} | ${verificationStatuses.VERIFIED}
+    ${signatureTypes.SSH}  | ${verificationStatuses.VERIFIED}
+    ${signatureTypes.SSH}  | ${verificationStatuses.REVOKED_KEY}
+  `(
+    'For a specified `$signatureType` and `$verificationStatus` it renders component correctly',
+    ({ signatureType, verificationStatus }) => {
+      beforeEach(() => {
+        createComponent({ __typename: signatureType, verificationStatus });
+      });
+      it('renders correct badge class', () => {
+        expect(signatureBadge().props('variant')).toBe(statusConfig[verificationStatus].variant);
+      });
+      it('renders badge text', () => {
+        expect(signatureBadge().text()).toBe(statusConfig[verificationStatus].label);
+      });
+      it('renders  popover header text', () => {
+        expect(signaturePopover().text()).toMatch(statusConfig[verificationStatus].title);
+      });
+      it('renders signature description', () => {
+        expect(signatureDescription().text()).toBe(statusConfig[verificationStatus].description);
+      });
+      it('renders help link with correct path', () => {
+        expect(helpLink().text()).toBe(typeConfig[signatureType].helpLink.label);
+        expect(helpLink().attributes('href')).toBe(
+          helpPagePath(typeConfig[signatureType].helpLink.path),
+        );
+      });
+    },
+  );
+
+  describe('SSH signature', () => {
+    beforeEach(() => {
+      createComponent(sshSignatureProp);
+    });
+
+    it('renders key label', () => {
+      expect(signatureKeyLabel().text()).toMatch(typeConfig[signatureTypes.SSH].keyLabel);
+    });
+
+    it('renders key signature', () => {
+      expect(signatureKey().text()).toBe(sshSignatureProp.keyFingerprintSha256);
+    });
+  });
+
+  describe('GPG signature', () => {
+    beforeEach(() => {
+      createComponent(gpgSignatureProp);
+    });
+
+    it('renders key label', () => {
+      expect(signatureKeyLabel().text()).toMatch(typeConfig[signatureTypes.GPG].keyLabel);
+    });
+
+    it('renders key signature for GGP signature', () => {
+      expect(signatureKey().text()).toBe(gpgSignatureProp.gpgKeyPrimaryKeyid);
+    });
+  });
+
+  describe('X509 signature', () => {
+    beforeEach(() => {
+      createComponent(x509SignatureProp);
+    });
+
+    it('does not render key label', () => {
+      expect(signatureKeyLabel().exists()).toBe(false);
+    });
+
+    it('renders X509 certificate details components', () => {
+      expect(X509CertificateDetailsComponents()).toHaveLength(2);
+    });
+
+    it('passes correct props', () => {
+      expect(X509CertificateDetailsComponents().at(0).props()).toStrictEqual({
+        subject: x509SignatureProp.x509Certificate.subject,
+        title: typeConfig[signatureTypes.X509].subjectTitle,
+        subjectKeyIdentifier: wrapper.vm.getSubjectKeyIdentifierToDisplay(
+          x509SignatureProp.x509Certificate.subjectKeyIdentifier,
+        ),
+      });
+      expect(X509CertificateDetailsComponents().at(1).props()).toStrictEqual({
+        subject: x509SignatureProp.x509Certificate.x509Issuer.subject,
+        title: typeConfig[signatureTypes.X509].issuerTitle,
+        subjectKeyIdentifier: wrapper.vm.getSubjectKeyIdentifierToDisplay(
+          x509SignatureProp.x509Certificate.x509Issuer.subjectKeyIdentifier,
+        ),
+      });
+    });
+  });
+});
diff --git a/spec/frontend/commit/components/x509_certificate_details_spec.js b/spec/frontend/commit/components/x509_certificate_details_spec.js
new file mode 100644
index 00000000000..5d9398b572b
--- /dev/null
+++ b/spec/frontend/commit/components/x509_certificate_details_spec.js
@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import X509CertificateDetails from '~/commit/components/x509_certificate_details.vue';
+import { X509_CERTIFICATE_KEY_IDENTIFIER_TITLE } from '~/commit/constants';
+import { x509CertificateDetailsProp } from '../mock_data';
+
+describe('X509 certificate details', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(X509CertificateDetails, {
+      propsData: x509CertificateDetailsProp,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findTitle = () => wrapper.find('strong');
+  const findSubjectValues = () => wrapper.findAll("[data-testid='subject-value']");
+  const findKeyIdentifier = () => wrapper.find("[data-testid='key-identifier']");
+
+  it('renders a title', () => {
+    expect(findTitle().text()).toBe(x509CertificateDetailsProp.title);
+  });
+
+  it('renders subject values', () => {
+    expect(findSubjectValues()).toHaveLength(3);
+  });
+
+  it('renders key identifier', () => {
+    expect(findKeyIdentifier().text()).toBe(
+      `${X509_CERTIFICATE_KEY_IDENTIFIER_TITLE} ${x509CertificateDetailsProp.subjectKeyIdentifier}`,
+    );
+  });
+});
diff --git a/spec/frontend/commit/mock_data.js b/spec/frontend/commit/mock_data.js
index a13ef9c563e..3b6971d9607 100644
--- a/spec/frontend/commit/mock_data.js
+++ b/spec/frontend/commit/mock_data.js
@@ -201,3 +201,34 @@ export const mockUpstreamQueryResponse = {
     },
   },
 };
+
+export const sshSignatureProp = {
+  __typename: 'SshSignature',
+  verificationStatus: 'VERIFIED',
+  keyFingerprintSha256: 'xxx',
+};
+
+export const gpgSignatureProp = {
+  __typename: 'GpgSignature',
+  verificationStatus: 'VERIFIED',
+  gpgKeyPrimaryKeyid: 'yyy',
+};
+
+export const x509SignatureProp = {
+  __typename: 'X509Signature',
+  verificationStatus: 'VERIFIED',
+  x509Certificate: {
+    subject: 'CN=gitlab@example.org,OU=Example,O=World',
+    subjectKeyIdentifier: 'BC:BC:BC:BC:BC:BC:BC:BC',
+    x509Issuer: {
+      subject: 'CN=PKI,OU=Example,O=World',
+      subjectKeyIdentifier: 'AB:AB:AB:AB:AB:AB:AB:AB:',
+    },
+  },
+};
+
+export const x509CertificateDetailsProp = {
+  title: 'Title',
+  subject: 'CN=gitlab@example.org,OU=Example,O=World',
+  subjectKeyIdentifier: 'BC BC BC BC BC BC BC BC',
+};
diff --git a/spec/frontend/commit/pipelines/pipelines_table_spec.js b/spec/frontend/commit/pipelines/pipelines_table_spec.js
index 4bffb6a0fd3..009ec68ddcf 100644
--- a/spec/frontend/commit/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/commit/pipelines/pipelines_table_spec.js
@@ -4,6 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
 import PipelinesTable from '~/commit/pipelines/pipelines_table.vue';
@@ -13,7 +14,7 @@ import {
   HTTP_STATUS_OK,
   HTTP_STATUS_UNAUTHORIZED,
 } from '~/lib/utils/http_status';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { TOAST_MESSAGE } from '~/pipelines/constants';
 import axios from '~/lib/utils/axios_utils';
 
@@ -21,12 +22,13 @@ const $toast = {
   show: jest.fn(),
 };
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Pipelines table in Commits and Merge requests', () => {
   let wrapper;
   let pipeline;
   let mock;
+  const showMock = jest.fn();
 
   const findRunPipelineBtn = () => wrapper.findByTestId('run_pipeline_button');
   const findRunPipelineBtnMobile = () => wrapper.findByTestId('run_pipeline_button_mobile');
@@ -38,7 +40,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
   const findModal = () => wrapper.findComponent(GlModal);
   const findMrPipelinesDocsLink = () => wrapper.findByTestId('mr-pipelines-docs-link');
 
-  const createComponent = (props = {}) => {
+  const createComponent = ({ props = {} } = {}) => {
     wrapper = extendedWrapper(
       mount(PipelinesTable, {
         propsData: {
@@ -50,6 +52,12 @@ describe('Pipelines table in Commits and Merge requests', () => {
         mocks: {
           $toast,
         },
+        stubs: {
+          GlModal: stubComponent(GlModal, {
+            template: '<div />',
+            methods: { show: showMock },
+          }),
+        },
       }),
     );
   };
@@ -62,11 +70,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
     pipeline = pipelines.find((p) => p.user !== null && p.commit !== null);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    mock.restore();
-  });
-
   describe('successful request', () => {
     describe('without pipelines', () => {
       beforeEach(async () => {
@@ -95,6 +98,35 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
     });
 
+    describe('with pagination', () => {
+      beforeEach(async () => {
+        mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline], {
+          'X-TOTAL': 10,
+          'X-PER-PAGE': 2,
+          'X-PAGE': 1,
+          'X-TOTAL-PAGES': 5,
+          'X-NEXT-PAGE': 2,
+          'X-PREV-PAGE': 2,
+        });
+
+        createComponent();
+
+        await waitForPromises();
+      });
+
+      it('should make an API request when using pagination', async () => {
+        expect(mock.history.get).toHaveLength(1);
+        expect(mock.history.get[0].params.page).toBe('1');
+
+        wrapper.find('.next-page-item').trigger('click');
+
+        await waitForPromises();
+
+        expect(mock.history.get).toHaveLength(2);
+        expect(mock.history.get[1].params.page).toBe('2');
+      });
+    });
+
     describe('with pipelines', () => {
       beforeEach(async () => {
         mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipeline], { 'x-total': 10 });
@@ -111,32 +143,6 @@ describe('Pipelines table in Commits and Merge requests', () => {
         expect(findErrorEmptyState().exists()).toBe(false);
       });
 
-      describe('with pagination', () => {
-        it('should make an API request when using pagination', async () => {
-          jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
-
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          await wrapper.setData({
-            store: {
-              state: {
-                pageInfo: {
-                  page: 1,
-                  total: 10,
-                  perPage: 2,
-                  nextPage: 2,
-                  totalPages: 5,
-                },
-              },
-            },
-          });
-
-          wrapper.find('.next-page-item').trigger('click');
-
-          expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ page: '2' });
-        });
-      });
-
       describe('pipeline badge counts', () => {
         it('should receive update-pipelines-count event', () => {
           const element = document.createElement('div');
@@ -203,16 +209,18 @@ describe('Pipelines table in Commits and Merge requests', () => {
         mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipelineCopy]);
 
         createComponent({
-          canRunPipeline: true,
-          projectId: '5',
-          mergeRequestId: 3,
+          props: {
+            canRunPipeline: true,
+            projectId: '5',
+            mergeRequestId: 3,
+          },
         });
 
         await waitForPromises();
       });
       describe('success', () => {
         beforeEach(() => {
-          jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
+          jest.spyOn(Api, 'postMergeRequestPipeline').mockResolvedValue();
         });
         it('displays a toast message during pipeline creation', async () => {
           await findRunPipelineBtn().trigger('click');
@@ -255,9 +263,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         `('displays permissions error message', async ({ status, message }) => {
           const response = { response: { status } };
 
-          jest
-            .spyOn(Api, 'postMergeRequestPipeline')
-            .mockImplementation(() => Promise.reject(response));
+          jest.spyOn(Api, 'postMergeRequestPipeline').mockRejectedValue(response);
 
           await findRunPipelineBtn().trigger('click');
 
@@ -281,14 +287,16 @@ describe('Pipelines table in Commits and Merge requests', () => {
         mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, [pipelineCopy]);
 
         createComponent({
-          projectId: '5',
-          mergeRequestId: 3,
-          canCreatePipelineInTargetProject: true,
-          sourceProjectFullPath: 'test/parent-project',
-          targetProjectFullPath: 'test/fork-project',
+          props: {
+            projectId: '5',
+            mergeRequestId: 3,
+            canCreatePipelineInTargetProject: true,
+            sourceProjectFullPath: 'test/parent-project',
+            targetProjectFullPath: 'test/fork-project',
+          },
         });
 
-        jest.spyOn(Api, 'postMergeRequestPipeline').mockReturnValue(Promise.resolve());
+        jest.spyOn(Api, 'postMergeRequestPipeline').mockResolvedValue();
 
         await waitForPromises();
       });
@@ -313,15 +321,15 @@ describe('Pipelines table in Commits and Merge requests', () => {
         mock.onGet('endpoint.json').reply(HTTP_STATUS_OK, []);
 
         createComponent({
-          projectId: '5',
-          mergeRequestId: 3,
-          canCreatePipelineInTargetProject: true,
-          sourceProjectFullPath: 'test/parent-project',
-          targetProjectFullPath: 'test/fork-project',
+          props: {
+            projectId: '5',
+            mergeRequestId: 3,
+            canCreatePipelineInTargetProject: true,
+            sourceProjectFullPath: 'test/parent-project',
+            targetProjectFullPath: 'test/fork-project',
+          },
         });
 
-        jest.spyOn(findModal().vm, 'show').mockReturnValue();
-
         await waitForPromises();
       });
 
@@ -331,7 +339,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
 
         findRunPipelineBtn().trigger('click');
 
-        expect(findModal().vm.show).toHaveBeenCalled();
+        expect(showMock).toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/confidential_merge_request/components/project_form_group_spec.js b/spec/frontend/confidential_merge_request/components/project_form_group_spec.js
index d6f16f1a644..a7ae07a36d9 100644
--- a/spec/frontend/confidential_merge_request/components/project_form_group_spec.js
+++ b/spec/frontend/confidential_merge_request/components/project_form_group_spec.js
@@ -46,7 +46,6 @@ function factory(projects = mockData) {
 describe('Confidential merge request project form group component', () => {
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   it('renders fork dropdown', async () => {
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
index a63cca006da..b8e6bcbc3c4 100644
--- a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
+++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content_editor/components/toolbar_button displays tertiary, medium button with a provided label and icon 1`] = `
-"<b-button-stub size=\\"md\\" variant=\\"default\\" type=\\"button\\" tag=\\"button\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-button btn-default-tertiary btn-icon\\">
+"<b-button-stub size=\\"md\\" tag=\\"button\\" type=\\"button\\" variant=\\"default\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-button btn-default-tertiary btn-icon\\">
   <!---->
   <gl-icon-stub name=\\"bold\\" size=\\"16\\" class=\\"gl-button-icon\\"></gl-icon-stub>
   <!---->
diff --git a/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
index 0700cf5d529..271e63abf21 100644
--- a/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
@@ -51,10 +51,6 @@ describe('content_editor/components/bubble_menus/bubble_menu', () => {
     setupMocks();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('initializes BubbleMenuPlugin', async () => {
     createWrapper({});
 
diff --git a/spec/frontend/content_editor/components/bubble_menus/code_block_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/code_block_bubble_menu_spec.js
index 378b11f4ae9..085a6d3a28d 100644
--- a/spec/frontend/content_editor/components/bubble_menus/code_block_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/code_block_bubble_menu_spec.js
@@ -64,10 +64,6 @@ describe('content_editor/components/bubble_menus/code_block_bubble_menu', () =>
     buildWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders bubble menu component', async () => {
     tiptapEditor.commands.insertContent(preTag());
     bubbleMenu = wrapper.findComponent(BubbleMenu);
diff --git a/spec/frontend/content_editor/components/bubble_menus/formatting_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/formatting_bubble_menu_spec.js
index 98001858851..7bab473529f 100644
--- a/spec/frontend/content_editor/components/bubble_menus/formatting_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/formatting_bubble_menu_spec.js
@@ -37,10 +37,6 @@ describe('content_editor/components/bubble_menus/formatting_bubble_menu', () =>
     buildEditor();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders bubble menu component', () => {
     buildWrapper();
     const bubbleMenu = wrapper.findComponent(BubbleMenu);
diff --git a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
index 9aa9c6483f4..eb5a3b61591 100644
--- a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
@@ -71,10 +71,6 @@ describe('content_editor/components/bubble_menus/link_bubble_menu', () => {
       .run();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders bubble menu component', async () => {
     await buildWrapperAndDisplayMenu();
 
diff --git a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
index 13c6495ac41..c918f068c07 100644
--- a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
@@ -4,22 +4,28 @@ import BubbleMenu from '~/content_editor/components/bubble_menus/bubble_menu.vue
 import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubble_menu.vue';
 import { stubComponent } from 'helpers/stub_component';
 import eventHubFactory from '~/helpers/event_hub_factory';
-import Image from '~/content_editor/extensions/image';
 import Audio from '~/content_editor/extensions/audio';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
+import Image from '~/content_editor/extensions/image';
 import Video from '~/content_editor/extensions/video';
 import { createTestEditor, emitEditorEvent, mockChainedCommands } from '../../test_utils';
 import {
   PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
   PROJECT_WIKI_ATTACHMENT_AUDIO_HTML,
   PROJECT_WIKI_ATTACHMENT_VIDEO_HTML,
+  PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
 } from '../../test_constants';
 
-const TIPTAP_IMAGE_HTML = `<p>
+const TIPTAP_AUDIO_HTML = `<p>
+  <span class="media-container audio-container"><audio src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></audio><a href="https://gitlab.com/favicon.png">gitlab favicon</a></span>
+</p>`;
+
+const TIPTAP_DIAGRAM_HTML = `<p>
   <img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
 </p>`;
 
-const TIPTAP_AUDIO_HTML = `<p>
-  <span class="media-container audio-container"><audio src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></audio><a href="https://gitlab.com/favicon.png">gitlab favicon</a></span>
+const TIPTAP_IMAGE_HTML = `<p>
+  <img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
 </p>`;
 
 const TIPTAP_VIDEO_HTML = `<p>
@@ -29,10 +35,11 @@ const TIPTAP_VIDEO_HTML = `<p>
 const createFakeEvent = () => ({ preventDefault: jest.fn(), stopPropagation: jest.fn() });
 
 describe.each`
-  mediaType  | mediaHTML                             | filePath           | mediaOutputHTML
-  ${'image'} | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML} | ${'test-file.png'} | ${TIPTAP_IMAGE_HTML}
-  ${'audio'} | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML} | ${'test-file.mp3'} | ${TIPTAP_AUDIO_HTML}
-  ${'video'} | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML} | ${'test-file.mp4'} | ${TIPTAP_VIDEO_HTML}
+  mediaType           | mediaHTML                                      | filePath                  | mediaOutputHTML
+  ${'image'}          | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML}          | ${'test-file.png'}        | ${TIPTAP_IMAGE_HTML}
+  ${'drawio_diagram'} | ${PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML} | ${'test-file.drawio.svg'} | ${TIPTAP_DIAGRAM_HTML}
+  ${'audio'}          | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML}          | ${'test-file.mp3'}        | ${TIPTAP_AUDIO_HTML}
+  ${'video'}          | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML}          | ${'test-file.mp4'}        | ${TIPTAP_VIDEO_HTML}
 `(
   'content_editor/components/bubble_menus/media_bubble_menu ($mediaType)',
   ({ mediaType, mediaHTML, filePath, mediaOutputHTML }) => {
@@ -43,7 +50,7 @@ describe.each`
     let eventHub;
 
     const buildEditor = () => {
-      tiptapEditor = createTestEditor({ extensions: [Image, Audio, Video] });
+      tiptapEditor = createTestEditor({ extensions: [Image, Audio, Video, DrawioDiagram] });
       contentEditor = { resolveUrl: jest.fn() };
       eventHub = eventHubFactory();
     };
@@ -93,10 +100,6 @@ describe.each`
       bubbleMenu = wrapper.findComponent(BubbleMenu);
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders bubble menu component', async () => {
       expect(bubbleMenu.classes()).toEqual(['gl-shadow', 'gl-rounded-base', 'gl-bg-white']);
     });
@@ -114,6 +117,24 @@ describe.each`
       expect(link.text()).toBe(filePath);
     });
 
+    describe('when BubbleMenu emits hidden event', () => {
+      it('resets media bubble menu state', async () => {
+        // Switch to edit mode to access component state in form fields
+        await wrapper.findByTestId('edit-media').vm.$emit('click');
+
+        const mediaSrcInput = wrapper.findByTestId('media-src').vm.$el;
+        const mediaAltInput = wrapper.findByTestId('media-alt').vm.$el;
+
+        expect(mediaSrcInput.value).not.toBe('');
+        expect(mediaAltInput.value).not.toBe('');
+
+        await wrapper.findComponent(BubbleMenu).vm.$emit('hidden');
+
+        expect(mediaSrcInput.value).toBe('');
+        expect(mediaAltInput.value).toBe('');
+      });
+    });
+
     describe('copy button', () => {
       it(`copies the canonical link to the ${mediaType} to clipboard`, async () => {
         jest.spyOn(navigator.clipboard, 'writeText');
@@ -133,23 +154,39 @@ describe.each`
     });
 
     describe(`replace ${mediaType} button`, () => {
-      it('uploads and replaces the selected image when file input changes', async () => {
-        const commands = mockChainedCommands(tiptapEditor, [
-          'focus',
-          'deleteSelection',
-          'uploadAttachment',
-          'run',
-        ]);
-        const file = new File(['foo'], 'foo.png', { type: 'image/png' });
-
-        await wrapper.findByTestId('replace-media').vm.$emit('click');
-        await selectFile(file);
-
-        expect(commands.focus).toHaveBeenCalled();
-        expect(commands.deleteSelection).toHaveBeenCalled();
-        expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
-        expect(commands.run).toHaveBeenCalled();
-      });
+      if (mediaType !== 'drawio_diagram') {
+        it('uploads and replaces the selected image when file input changes', async () => {
+          const commands = mockChainedCommands(tiptapEditor, [
+            'focus',
+            'deleteSelection',
+            'uploadAttachment',
+            'run',
+          ]);
+          const file = new File(['foo'], 'foo.png', { type: 'image/png' });
+
+          await wrapper.findByTestId('replace-media').vm.$emit('click');
+          await selectFile(file);
+
+          expect(commands.focus).toHaveBeenCalled();
+          expect(commands.deleteSelection).toHaveBeenCalled();
+          expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
+          expect(commands.run).toHaveBeenCalled();
+        });
+      } else {
+        // draw.io diagrams are replaced using the edit diagram button
+        it('invokes editDiagram command', async () => {
+          const commands = mockChainedCommands(tiptapEditor, [
+            'focus',
+            'createOrEditDiagram',
+            'run',
+          ]);
+          await wrapper.findByTestId('edit-diagram').vm.$emit('click');
+
+          expect(commands.focus).toHaveBeenCalled();
+          expect(commands.createOrEditDiagram).toHaveBeenCalled();
+          expect(commands.run).toHaveBeenCalled();
+        });
+      }
     });
 
     describe('edit button', () => {
diff --git a/spec/frontend/content_editor/components/content_editor_alert_spec.js b/spec/frontend/content_editor/components/content_editor_alert_spec.js
index ee9ead8f8a7..e62e2331d25 100644
--- a/spec/frontend/content_editor/components/content_editor_alert_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_alert_spec.js
@@ -29,10 +29,6 @@ describe('content_editor/components/content_editor_alert', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     variant      | message
     ${'danger'}  | ${'An error occurred'}
diff --git a/spec/frontend/content_editor/components/content_editor_spec.js b/spec/frontend/content_editor/components/content_editor_spec.js
index 1a3cd36a8bb..b642ac9c46b 100644
--- a/spec/frontend/content_editor/components/content_editor_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_spec.js
@@ -1,7 +1,8 @@
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
 import { EditorContent, Editor } from '@tiptap/vue-2';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import EditorModeDropdown from '~/vue_shared/components/markdown/editor_mode_dropdown.vue';
 import ContentEditor from '~/content_editor/components/content_editor.vue';
 import ContentEditorAlert from '~/content_editor/components/content_editor_alert.vue';
 import ContentEditorProvider from '~/content_editor/components/content_editor_provider.vue';
@@ -27,19 +28,23 @@ describe('ContentEditor', () => {
   const findEditorStateObserver = () => wrapper.findComponent(EditorStateObserver);
   const findLoadingIndicator = () => wrapper.findComponent(LoadingIndicator);
   const findContentEditorAlert = () => wrapper.findComponent(ContentEditorAlert);
-  const createWrapper = ({ markdown, autofocus, useBottomToolbar } = {}) => {
+  const createWrapper = ({ markdown, autofocus, ...props } = {}) => {
     wrapper = shallowMountExtended(ContentEditor, {
       propsData: {
         renderMarkdown,
         uploadsPath,
         markdown,
         autofocus,
-        useBottomToolbar,
+        placeholder: 'Enter some text here...',
+        ...props,
       },
       stubs: {
         EditorStateObserver,
         ContentEditorProvider,
         ContentEditorAlert,
+        GlLink,
+        GlSprintf,
+        EditorModeDropdown,
       },
     });
   };
@@ -48,10 +53,6 @@ describe('ContentEditor', () => {
     renderMarkdown = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('triggers initialized event', () => {
     createWrapper();
 
@@ -87,22 +88,29 @@ describe('ContentEditor', () => {
     expect(wrapper.findComponent(ContentEditorProvider).exists()).toBe(true);
   });
 
-  it('renders top toolbar component', () => {
+  it('renders toolbar component', () => {
     createWrapper();
 
     expect(wrapper.findComponent(FormattingToolbar).exists()).toBe(true);
-    expect(wrapper.findComponent(FormattingToolbar).classes('gl-border-t')).toBe(false);
-    expect(wrapper.findComponent(FormattingToolbar).classes('gl-border-b')).toBe(true);
   });
 
-  it('renders bottom toolbar component', () => {
-    createWrapper({
-      useBottomToolbar: true,
-    });
+  it('renders footer containing quick actions help text if quick actions docs path is defined', () => {
+    createWrapper({ quickActionsDocsPath: '/foo/bar' });
 
-    expect(wrapper.findComponent(FormattingToolbar).exists()).toBe(true);
-    expect(wrapper.findComponent(FormattingToolbar).classes('gl-border-t')).toBe(true);
-    expect(wrapper.findComponent(FormattingToolbar).classes('gl-border-b')).toBe(false);
+    expect(findEditorElement().text()).toContain('For quick actions, type /');
+    expect(wrapper.findComponent(GlLink).attributes('href')).toBe('/foo/bar');
+  });
+
+  it('does not render footer containing quick actions help text if quick actions docs path is not defined', () => {
+    createWrapper();
+
+    expect(findEditorElement().text()).not.toContain('For quick actions, type /');
+  });
+
+  it('renders an editor mode dropdown', () => {
+    createWrapper();
+
+    expect(wrapper.findComponent(EditorModeDropdown).exists()).toBe(true);
   });
 
   describe('when setting initial content', () => {
@@ -124,9 +132,9 @@ describe('ContentEditor', () => {
 
     describe('succeeds', () => {
       beforeEach(async () => {
-        renderMarkdown.mockResolvedValueOnce('hello world');
+        renderMarkdown.mockResolvedValueOnce('');
 
-        createWrapper({ markddown: 'hello world' });
+        createWrapper({ markddown: '' });
         await nextTick();
       });
 
@@ -138,13 +146,17 @@ describe('ContentEditor', () => {
       it('emits loadingSuccess event', () => {
         expect(wrapper.emitted('loadingSuccess')).toHaveLength(1);
       });
+
+      it('shows placeholder text', () => {
+        expect(wrapper.text()).toContain('Enter some text here...');
+      });
     });
 
     describe('fails', () => {
       beforeEach(async () => {
         renderMarkdown.mockRejectedValueOnce(new Error());
 
-        createWrapper({ markddown: 'hello world' });
+        createWrapper({ markdown: 'hello world' });
         await nextTick();
       });
 
@@ -209,11 +221,17 @@ describe('ContentEditor', () => {
 
       expect(findEditorElement().classes()).not.toContain('is-focused');
     });
+
+    it('hides placeholder text', () => {
+      expect(wrapper.text()).not.toContain('Enter some text here...');
+    });
   });
 
   describe('when editorStateObserver emits docUpdate event', () => {
-    it('emits change event with the latest markdown', async () => {
-      const markdown = 'Loaded content';
+    let markdown;
+
+    beforeEach(async () => {
+      markdown = 'Loaded content';
 
       renderMarkdown.mockResolvedValueOnce(markdown);
 
@@ -223,7 +241,9 @@ describe('ContentEditor', () => {
       await waitForPromises();
 
       findEditorStateObserver().vm.$emit('docUpdate');
+    });
 
+    it('emits change event with the latest markdown', () => {
       expect(wrapper.emitted('change')).toEqual([
         [
           {
@@ -234,6 +254,10 @@ describe('ContentEditor', () => {
         ],
       ]);
     });
+
+    it('hides the placeholder text', () => {
+      expect(wrapper.text()).not.toContain('Enter some text here...');
+    });
   });
 
   describe('when editorStateObserver emits keydown event', () => {
diff --git a/spec/frontend/content_editor/components/editor_state_observer_spec.js b/spec/frontend/content_editor/components/editor_state_observer_spec.js
index 9b42f61c98c..80fb20e5258 100644
--- a/spec/frontend/content_editor/components/editor_state_observer_spec.js
+++ b/spec/frontend/content_editor/components/editor_state_observer_spec.js
@@ -45,10 +45,6 @@ describe('content_editor/components/editor_state_observer', () => {
     buildEditor();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when editor content changes', () => {
     it('emits update, selectionUpdate, and transaction events', () => {
       const content = '<p>My paragraph</p>';
diff --git a/spec/frontend/content_editor/components/formatting_toolbar_spec.js b/spec/frontend/content_editor/components/formatting_toolbar_spec.js
index c4bf21ba813..4a7b7cedf19 100644
--- a/spec/frontend/content_editor/components/formatting_toolbar_spec.js
+++ b/spec/frontend/content_editor/components/formatting_toolbar_spec.js
@@ -1,3 +1,4 @@
+import { GlTabs, GlTab } from '@gitlab/ui';
 import { mockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import FormattingToolbar from '~/content_editor/components/formatting_toolbar.vue';
@@ -6,22 +7,23 @@ import {
   CONTENT_EDITOR_TRACKING_LABEL,
 } from '~/content_editor/constants';
 
-describe('content_editor/components/top_toolbar', () => {
+describe('content_editor/components/formatting_toolbar', () => {
   let wrapper;
   let trackingSpy;
 
   const buildWrapper = () => {
-    wrapper = shallowMountExtended(FormattingToolbar);
+    wrapper = shallowMountExtended(FormattingToolbar, {
+      stubs: {
+        GlTabs,
+        GlTab,
+      },
+    });
   };
 
   beforeEach(() => {
     trackingSpy = mockTracking(undefined, null, jest.spyOn);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     testId            | controlProps
     ${'text-styles'}  | ${{}}
diff --git a/spec/frontend/content_editor/components/loading_indicator_spec.js b/spec/frontend/content_editor/components/loading_indicator_spec.js
index 0065103d01b..1b0ffaee6c6 100644
--- a/spec/frontend/content_editor/components/loading_indicator_spec.js
+++ b/spec/frontend/content_editor/components/loading_indicator_spec.js
@@ -11,10 +11,6 @@ describe('content_editor/components/loading_indicator', () => {
     wrapper = shallowMountExtended(LoadingIndicator);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when loading content', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/content_editor/components/toolbar_button_spec.js b/spec/frontend/content_editor/components/toolbar_button_spec.js
index 1f1f7b338c6..1556f761682 100644
--- a/spec/frontend/content_editor/components/toolbar_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_button_spec.js
@@ -42,10 +42,6 @@ describe('content_editor/components/toolbar_button', () => {
     buildEditor();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays tertiary, medium button with a provided label and icon', () => {
     buildWrapper();
 
diff --git a/spec/frontend/content_editor/components/toolbar_image_button_spec.js b/spec/frontend/content_editor/components/toolbar_image_button_spec.js
index 5473d43f5a1..0ec950137fc 100644
--- a/spec/frontend/content_editor/components/toolbar_image_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_image_button_spec.js
@@ -50,7 +50,6 @@ describe('content_editor/components/toolbar_image_button', () => {
 
   afterEach(() => {
     editor.destroy();
-    wrapper.destroy();
   });
 
   it('sets the image to the value in the URL input when "Insert" button is clicked', async () => {
diff --git a/spec/frontend/content_editor/components/toolbar_link_button_spec.js b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
index 40e859e96af..80090c0278f 100644
--- a/spec/frontend/content_editor/components/toolbar_link_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
@@ -43,7 +43,6 @@ describe('content_editor/components/toolbar_link_button', () => {
 
   afterEach(() => {
     editor.destroy();
-    wrapper.destroy();
   });
 
   it('renders dropdown component', () => {
diff --git a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
index d4fc47601cf..5af4784f358 100644
--- a/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_more_dropdown_spec.js
@@ -9,12 +9,14 @@ import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../test_
 describe('content_editor/components/toolbar_more_dropdown', () => {
   let wrapper;
   let tiptapEditor;
+  let contentEditor;
   let eventHub;
 
   const buildEditor = () => {
     tiptapEditor = createTestEditor({
       extensions: [Diagram, HorizontalRule],
     });
+    contentEditor = { drawioEnabled: true };
     eventHub = eventHubFactory();
   };
 
@@ -22,6 +24,7 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
     wrapper = mountExtended(ToolbarMoreDropdown, {
       provide: {
         tiptapEditor,
+        contentEditor,
         eventHub,
       },
       propsData,
@@ -32,29 +35,27 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
 
   beforeEach(() => {
     buildEditor();
-    buildWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
   });
 
   describe.each`
-    name                   | contentType          | command                    | params
-    ${'Code block'}        | ${'codeBlock'}       | ${'setNode'}               | ${['codeBlock']}
-    ${'Details block'}     | ${'details'}         | ${'toggleList'}            | ${['details', 'detailsContent']}
-    ${'Bullet list'}       | ${'bulletList'}      | ${'toggleList'}            | ${['bulletList', 'listItem']}
-    ${'Ordered list'}      | ${'orderedList'}     | ${'toggleList'}            | ${['orderedList', 'listItem']}
-    ${'Task list'}         | ${'taskList'}        | ${'toggleList'}            | ${['taskList', 'taskItem']}
-    ${'Mermaid diagram'}   | ${'diagram'}         | ${'setNode'}               | ${['diagram', { language: 'mermaid' }]}
-    ${'PlantUML diagram'}  | ${'diagram'}         | ${'setNode'}               | ${['diagram', { language: 'plantuml' }]}
-    ${'Table of contents'} | ${'tableOfContents'} | ${'insertTableOfContents'} | ${[]}
-    ${'Horizontal rule'}   | ${'horizontalRule'}  | ${'setHorizontalRule'}     | ${[]}
+    name                        | contentType          | command                    | params
+    ${'Code block'}             | ${'codeBlock'}       | ${'setNode'}               | ${['codeBlock']}
+    ${'Details block'}          | ${'details'}         | ${'toggleList'}            | ${['details', 'detailsContent']}
+    ${'Bullet list'}            | ${'bulletList'}      | ${'toggleList'}            | ${['bulletList', 'listItem']}
+    ${'Ordered list'}           | ${'orderedList'}     | ${'toggleList'}            | ${['orderedList', 'listItem']}
+    ${'Task list'}              | ${'taskList'}        | ${'toggleList'}            | ${['taskList', 'taskItem']}
+    ${'Mermaid diagram'}        | ${'diagram'}         | ${'setNode'}               | ${['diagram', { language: 'mermaid' }]}
+    ${'PlantUML diagram'}       | ${'diagram'}         | ${'setNode'}               | ${['diagram', { language: 'plantuml' }]}
+    ${'Table of contents'}      | ${'tableOfContents'} | ${'insertTableOfContents'} | ${[]}
+    ${'Horizontal rule'}        | ${'horizontalRule'}  | ${'setHorizontalRule'}     | ${[]}
+    ${'Create or edit diagram'} | ${'drawioDiagram'}   | ${'createOrEditDiagram'}   | ${[]}
   `('when option $name is clicked', ({ name, command, contentType, params }) => {
     let commands;
     let btn;
 
     beforeEach(async () => {
+      buildWrapper();
+
       commands = mockChainedCommands(tiptapEditor, [command, 'focus', 'run']);
       btn = wrapper.findByRole('button', { name });
     });
@@ -71,8 +72,17 @@ describe('content_editor/components/toolbar_more_dropdown', () => {
     });
   });
 
+  it('does not show drawio option when drawio is disabled', () => {
+    contentEditor.drawioEnabled = false;
+    buildWrapper();
+
+    expect(wrapper.findByRole('button', { name: 'Create or edit diagram' }).exists()).toBe(false);
+  });
+
   describe('a11y tests', () => {
     it('sets toggleText and text-sr-only properties to the table button dropdown', () => {
+      buildWrapper();
+
       expect(findDropdown().props()).toMatchObject({
         textSrOnly: true,
         toggleText: 'More options',
diff --git a/spec/frontend/content_editor/components/toolbar_table_button_spec.js b/spec/frontend/content_editor/components/toolbar_table_button_spec.js
index aa4604661e5..35741971488 100644
--- a/spec/frontend/content_editor/components/toolbar_table_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_table_button_spec.js
@@ -30,7 +30,6 @@ describe('content_editor/components/toolbar_table_button', () => {
 
   afterEach(() => {
     editor.destroy();
-    wrapper.destroy();
   });
 
   it('renders a grid of 5x5 buttons to create a table', () => {
diff --git a/spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js b/spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js
index 5a725ac1ca4..31ed13541e6 100644
--- a/spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_text_style_dropdown_spec.js
@@ -39,10 +39,6 @@ describe('content_editor/components/toolbar_text_style_dropdown', () => {
     buildEditor();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all text styles as dropdown items', () => {
     buildWrapper();
 
diff --git a/spec/frontend/content_editor/components/wrappers/code_block_spec.js b/spec/frontend/content_editor/components/wrappers/code_block_spec.js
index a5ef19fb8e8..057e50cd0e2 100644
--- a/spec/frontend/content_editor/components/wrappers/code_block_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/code_block_spec.js
@@ -55,10 +55,6 @@ describe('content/components/wrappers/code_block', () => {
     codeBlockLanguageLoader.findOrCreateLanguageBySyntax.mockReturnValue({ syntax: language });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a node-view-wrapper as a pre element', () => {
     createWrapper();
 
diff --git a/spec/frontend/content_editor/components/wrappers/details_spec.js b/spec/frontend/content_editor/components/wrappers/details_spec.js
index d746b9fa2f1..232c1e9aede 100644
--- a/spec/frontend/content_editor/components/wrappers/details_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/details_spec.js
@@ -13,10 +13,6 @@ describe('content/components/wrappers/details', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a node-view-content as a ul element', () => {
     createWrapper();
 
diff --git a/spec/frontend/content_editor/components/wrappers/footnote_definition_spec.js b/spec/frontend/content_editor/components/wrappers/footnote_definition_spec.js
index 1ff750eb2ac..91c6799478e 100644
--- a/spec/frontend/content_editor/components/wrappers/footnote_definition_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/footnote_definition_spec.js
@@ -12,10 +12,6 @@ describe('content/components/wrappers/footnote_definition', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders footnote label as a readyonly element', () => {
     const label = 'footnote';
 
diff --git a/spec/frontend/content_editor/components/wrappers/label_spec.js b/spec/frontend/content_editor/components/wrappers/label_spec.js
index 9e58669b0ea..fa32b746142 100644
--- a/spec/frontend/content_editor/components/wrappers/label_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/label_spec.js
@@ -11,10 +11,6 @@ describe('content/components/wrappers/label', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it("renders a GlLabel with the node's text and color", () => {
     createWrapper({ attrs: { color: '#ff0000', text: 'foo bar', originalText: '~"foo bar"' } });
 
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
index 1fdddce3962..d8f34565705 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
@@ -1,12 +1,12 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { NodeViewWrapper } from '@tiptap/vue-2';
-import { selectedRect as getSelectedRect } from '@_ueberdosis/prosemirror-tables';
+import { selectedRect as getSelectedRect } from '@tiptap/pm/tables';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TableCellBaseWrapper from '~/content_editor/components/wrappers/table_cell_base.vue';
 import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../../test_utils';
 
-jest.mock('@_ueberdosis/prosemirror-tables');
+jest.mock('@tiptap/pm/tables');
 
 describe('content/components/wrappers/table_cell_base', () => {
   let wrapper;
@@ -52,10 +52,6 @@ describe('content/components/wrappers/table_cell_base', () => {
     editor = createTestEditor({});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a td node-view-wrapper with relative position', () => {
     createWrapper();
     expect(wrapper.findComponent(NodeViewWrapper).classes()).toContain('gl-relative');
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
index 2aefbc77545..506f442bcc7 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
@@ -22,10 +22,6 @@ describe('content/components/wrappers/table_cell_body', () => {
     editor = createTestEditor({});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a TableCellBase component', () => {
     createWrapper();
     expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
index e48df8734a6..bebe7fb4124 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
@@ -22,10 +22,6 @@ describe('content/components/wrappers/table_cell_header', () => {
     editor = createTestEditor({});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a TableCellBase component', () => {
     createWrapper();
     expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
diff --git a/spec/frontend/content_editor/components/wrappers/table_of_contents_spec.js b/spec/frontend/content_editor/components/wrappers/table_of_contents_spec.js
index bfda89a8b09..4d5911dda0c 100644
--- a/spec/frontend/content_editor/components/wrappers/table_of_contents_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_of_contents_spec.js
@@ -70,10 +70,6 @@ describe('content/components/wrappers/table_of_contents', () => {
     await nextTick();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a node-view-wrapper as a ul element', () => {
     expect(wrapper.findComponent(NodeViewWrapper).props().as).toBe('ul');
   });
diff --git a/spec/frontend/content_editor/extensions/attachment_spec.js b/spec/frontend/content_editor/extensions/attachment_spec.js
index 6b804b3b4c6..24b75ba6805 100644
--- a/spec/frontend/content_editor/extensions/attachment_spec.js
+++ b/spec/frontend/content_editor/extensions/attachment_spec.js
@@ -2,12 +2,13 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import Attachment from '~/content_editor/extensions/attachment';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
 import Image from '~/content_editor/extensions/image';
 import Audio from '~/content_editor/extensions/audio';
 import Video from '~/content_editor/extensions/video';
 import Link from '~/content_editor/extensions/link';
 import Loading from '~/content_editor/extensions/loading';
-import { VARIANT_DANGER } from '~/flash';
+import { VARIANT_DANGER } from '~/alert';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import { createTestEditor, createDocBuilder } from '../test_utils';
@@ -16,6 +17,7 @@ import {
   PROJECT_WIKI_ATTACHMENT_AUDIO_HTML,
   PROJECT_WIKI_ATTACHMENT_VIDEO_HTML,
   PROJECT_WIKI_ATTACHMENT_LINK_HTML,
+  PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
 } from '../test_constants';
 
 describe('content_editor/extensions/attachment', () => {
@@ -24,6 +26,7 @@ describe('content_editor/extensions/attachment', () => {
   let p;
   let image;
   let audio;
+  let drawioDiagram;
   let video;
   let loading;
   let link;
@@ -35,6 +38,7 @@ describe('content_editor/extensions/attachment', () => {
   const imageFile = new File(['foo'], 'test-file.png', { type: 'image/png' });
   const audioFile = new File(['foo'], 'test-file.mp3', { type: 'audio/mpeg' });
   const videoFile = new File(['foo'], 'test-file.mp4', { type: 'video/mp4' });
+  const drawioDiagramFile = new File(['foo'], 'test-file.drawio.svg', { type: 'image/svg+xml' });
   const attachmentFile = new File(['foo'], 'test-file.zip', { type: 'application/zip' });
 
   const expectDocumentAfterTransaction = ({ number, expectedDoc, action }) => {
@@ -67,12 +71,13 @@ describe('content_editor/extensions/attachment', () => {
         Image,
         Audio,
         Video,
+        DrawioDiagram,
         Attachment.configure({ renderMarkdown, uploadsPath, eventHub }),
       ],
     });
 
     ({
-      builders: { doc, p, image, audio, video, loading, link },
+      builders: { doc, p, image, audio, video, loading, link, drawioDiagram },
     } = createDocBuilder({
       tiptapEditor,
       names: {
@@ -81,6 +86,7 @@ describe('content_editor/extensions/attachment', () => {
         link: { nodeType: Link.name },
         audio: { nodeType: Audio.name },
         video: { nodeType: Video.name },
+        drawioDiagram: { nodeType: DrawioDiagram.name },
       },
     }));
 
@@ -113,10 +119,11 @@ describe('content_editor/extensions/attachment', () => {
     });
 
     describe.each`
-      nodeType   | mimeType        | html                                  | file         | mediaType
-      ${'image'} | ${'image/png'}  | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML} | ${imageFile} | ${(attrs) => image(attrs)}
-      ${'audio'} | ${'audio/mpeg'} | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML} | ${audioFile} | ${(attrs) => audio(attrs)}
-      ${'video'} | ${'video/mp4'}  | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML} | ${videoFile} | ${(attrs) => video(attrs)}
+      nodeType           | mimeType           | html                                           | file                 | mediaType
+      ${'image'}         | ${'image/png'}     | ${PROJECT_WIKI_ATTACHMENT_IMAGE_HTML}          | ${imageFile}         | ${(attrs) => image(attrs)}
+      ${'audio'}         | ${'audio/mpeg'}    | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML}          | ${audioFile}         | ${(attrs) => audio(attrs)}
+      ${'video'}         | ${'video/mp4'}     | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML}          | ${videoFile}         | ${(attrs) => video(attrs)}
+      ${'drawioDiagram'} | ${'image/svg+xml'} | ${PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML} | ${drawioDiagramFile} | ${(attrs) => drawioDiagram(attrs)}
     `('when the file has $nodeType mime type', ({ mimeType, html, file, mediaType }) => {
       const base64EncodedFile = `data:${mimeType};base64,Zm9v`;
 
@@ -151,7 +158,7 @@ describe('content_editor/extensions/attachment', () => {
               mediaType({
                 canonicalSrc: file.name,
                 src: base64EncodedFile,
-                alt: 'test-file',
+                alt: expect.stringContaining('test-file'),
                 uploading: false,
               }),
             ),
diff --git a/spec/frontend/content_editor/extensions/drawio_diagram_spec.js b/spec/frontend/content_editor/extensions/drawio_diagram_spec.js
new file mode 100644
index 00000000000..61dc164c99a
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/drawio_diagram_spec.js
@@ -0,0 +1,103 @@
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
+import Image from '~/content_editor/extensions/image';
+import createAssetResolver from '~/content_editor/services/asset_resolver';
+import { create } from '~/drawio/content_editor_facade';
+import { launchDrawioEditor } from '~/drawio/drawio_editor';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+import {
+  PROJECT_WIKI_ATTACHMENT_IMAGE_HTML,
+  PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
+} from '../test_constants';
+
+jest.mock('~/content_editor/services/asset_resolver');
+jest.mock('~/drawio/content_editor_facade');
+jest.mock('~/drawio/drawio_editor');
+
+describe('content_editor/extensions/drawio_diagram', () => {
+  let tiptapEditor;
+  let doc;
+  let paragraph;
+  let image;
+  let drawioDiagram;
+  const uploadsPath = '/uploads';
+  const renderMarkdown = () => {};
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({
+      extensions: [Image, DrawioDiagram.configure({ uploadsPath, renderMarkdown })],
+    });
+    const { builders } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        image: { nodeType: Image.name },
+        drawioDiagram: { nodeType: DrawioDiagram.name },
+      },
+    });
+
+    doc = builders.doc;
+    paragraph = builders.paragraph;
+    image = builders.image;
+    drawioDiagram = builders.drawioDiagram;
+  });
+
+  describe('parsing', () => {
+    it('distinguishes a drawio diagram from an image', () => {
+      const expectedDocWithDiagram = doc(
+        paragraph(
+          drawioDiagram({
+            alt: 'test-file',
+            canonicalSrc: 'test-file.drawio.svg',
+            src: '/group1/project1/-/wikis/test-file.drawio.svg',
+          }),
+        ),
+      );
+      const expectedDocWithImage = doc(
+        paragraph(
+          image({
+            alt: 'test-file',
+            canonicalSrc: 'test-file.png',
+            src: '/group1/project1/-/wikis/test-file.png',
+          }),
+        ),
+      );
+      tiptapEditor.commands.setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML);
+
+      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDocWithDiagram.toJSON());
+
+      tiptapEditor.commands.setContent(PROJECT_WIKI_ATTACHMENT_IMAGE_HTML);
+
+      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDocWithImage.toJSON());
+    });
+  });
+
+  describe('createOrEditDiagram command', () => {
+    let editorFacade;
+    let assetResolver;
+
+    beforeEach(() => {
+      editorFacade = {};
+      assetResolver = {};
+      tiptapEditor.commands.createOrEditDiagram();
+
+      create.mockReturnValueOnce(editorFacade);
+      createAssetResolver.mockReturnValueOnce(assetResolver);
+    });
+
+    it('creates a new instance of asset resolver', () => {
+      expect(createAssetResolver).toHaveBeenCalledWith({ renderMarkdown });
+    });
+
+    it('creates a new instance of the content_editor_facade', () => {
+      expect(create).toHaveBeenCalledWith({
+        tiptapEditor,
+        drawioNodeName: DrawioDiagram.name,
+        uploadsPath,
+        assetResolver,
+      });
+    });
+
+    it('calls launchDrawioEditor and provides content_editor_facade', () => {
+      expect(launchDrawioEditor).toHaveBeenCalledWith({ editorFacade });
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/paste_markdown_spec.js b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
index 30e798e8817..8f3a4934e77 100644
--- a/spec/frontend/content_editor/extensions/paste_markdown_spec.js
+++ b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
@@ -3,7 +3,7 @@ import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight
 import Diagram from '~/content_editor/extensions/diagram';
 import Frontmatter from '~/content_editor/extensions/frontmatter';
 import Bold from '~/content_editor/extensions/bold';
-import { VARIANT_DANGER } from '~/flash';
+import { VARIANT_DANGER } from '~/alert';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import { ALERT_EVENT } from '~/content_editor/constants';
 import waitForPromises from 'helpers/wait_for_promises';
diff --git a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
index 5df901e0f15..bf29d4bdf23 100644
--- a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
+++ b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
@@ -1,4 +1,4 @@
-import { DOMSerializer } from 'prosemirror-model';
+import { DOMSerializer } from '@tiptap/pm/model';
 import createMarkdownDeserializer from '~/content_editor/services/remark_markdown_deserializer';
 import { createTiptapEditor } from 'jest/content_editor/test_utils';
 
diff --git a/spec/frontend/content_editor/services/create_content_editor_spec.js b/spec/frontend/content_editor/services/create_content_editor_spec.js
index e1a30819ac8..00cc628ca72 100644
--- a/spec/frontend/content_editor/services/create_content_editor_spec.js
+++ b/spec/frontend/content_editor/services/create_content_editor_spec.js
@@ -20,7 +20,7 @@ describe('content_editor/services/create_content_editor', () => {
         preserveUnchangedMarkdown: false,
       },
     };
-    editor = createContentEditor({ renderMarkdown, uploadsPath });
+    editor = createContentEditor({ renderMarkdown, uploadsPath, drawioEnabled: true });
   });
 
   describe('when preserveUnchangedMarkdown feature is on', () => {
@@ -45,10 +45,10 @@ describe('content_editor/services/create_content_editor', () => {
     });
   });
 
-  it('sets gl-outline-0! class selector to the tiptapEditor instance', () => {
+  it('sets gl-shadow-none! class selector to the tiptapEditor instance', () => {
     expect(editor.tiptapEditor.options.editorProps).toMatchObject({
       attributes: {
-        class: 'gl-outline-0!',
+        class: 'gl-shadow-none!',
       },
     });
   });
@@ -82,4 +82,14 @@ describe('content_editor/services/create_content_editor', () => {
       renderMarkdown,
     });
   });
+
+  it('provides uploadsPath and renderMarkdown function to DrawioDiagram extension', () => {
+    expect(
+      editor.tiptapEditor.extensionManager.extensions.find((e) => e.name === 'drawioDiagram')
+        .options,
+    ).toMatchObject({
+      uploadsPath,
+      renderMarkdown,
+    });
+  });
 });
diff --git a/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js b/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
index 90d83820c70..8ee37282ee9 100644
--- a/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
+++ b/spec/frontend/content_editor/services/gl_api_markdown_deserializer_spec.js
@@ -35,12 +35,10 @@ describe('content_editor/services/gl_api_markdown_deserializer', () => {
     beforeEach(async () => {
       const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
 
-      renderMarkdown.mockResolvedValueOnce(
-        `<p><strong>${text}</strong></p><pre lang="javascript"></pre><!-- some comment -->`,
-      );
+      renderMarkdown.mockResolvedValueOnce(`<p><strong>${text}</strong></p><!-- some comment -->`);
 
       result = await deserializer.deserialize({
-        content: 'content',
+        markdown: '**Bold text**\n<!-- some comment -->',
         schema: tiptapEditor.schema,
       });
     });
@@ -53,12 +51,22 @@ describe('content_editor/services/gl_api_markdown_deserializer', () => {
   });
 
   describe('when the render function returns an empty value', () => {
-    it('returns an empty object', async () => {
-      const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
+    it('returns an empty prosemirror document', async () => {
+      const deserializer = createMarkdownDeserializer({
+        render: renderMarkdown,
+        schema: tiptapEditor.schema,
+      });
 
       renderMarkdown.mockResolvedValueOnce(null);
 
-      expect(await deserializer.deserialize({ content: 'content' })).toEqual({});
+      const result = await deserializer.deserialize({
+        markdown: '',
+        schema: tiptapEditor.schema,
+      });
+
+      const document = doc(p());
+
+      expect(result.document.toJSON()).toEqual(document.toJSON());
     });
   });
 });
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 2cd8b8a0d6f..c4d302547a5 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -8,6 +8,7 @@ import DescriptionItem from '~/content_editor/extensions/description_item';
 import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
 import Emoji from '~/content_editor/extensions/emoji';
 import Figure from '~/content_editor/extensions/figure';
 import FigureCaption from '~/content_editor/extensions/figure_caption';
@@ -57,6 +58,7 @@ const {
     div,
     descriptionItem,
     descriptionList,
+    drawioDiagram,
     emoji,
     footnoteDefinition,
     footnoteReference,
@@ -96,6 +98,7 @@ const {
     detailsContent: { nodeType: DetailsContent.name },
     descriptionItem: { nodeType: DescriptionItem.name },
     descriptionList: { nodeType: DescriptionList.name },
+    drawioDiagram: { nodeType: DrawioDiagram.name },
     emoji: { markType: Emoji.name },
     figure: { nodeType: Figure.name },
     figureCaption: { nodeType: FigureCaption.name },
@@ -397,6 +400,12 @@ this is not really json:table but just trying out whether this case works or not
     );
   });
 
+  it('correctly serializes a drawio_diagram', () => {
+    expect(
+      serialize(paragraph(drawioDiagram({ src: 'diagram.drawio.svg', alt: 'Draw.io Diagram' }))),
+    ).toBe('![Draw.io Diagram](diagram.drawio.svg)');
+  });
+
   it.each`
     width        | height       | outputAttributes
     ${300}       | ${undefined} | ${'width=300'}
diff --git a/spec/frontend/content_editor/test_constants.js b/spec/frontend/content_editor/test_constants.js
index 45a0e4a8bd1..bd462ecec22 100644
--- a/spec/frontend/content_editor/test_constants.js
+++ b/spec/frontend/content_editor/test_constants.js
@@ -20,6 +20,12 @@ export const PROJECT_WIKI_ATTACHMENT_AUDIO_HTML = `<p data-sourcepos="3:1-3:74"
   </span>
 </p>`;
 
+export const PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML = `<p data-sourcepos="1:1-1:27" dir="auto">
+  <a class="no-attachment-icon" href="/group1/project1/-/wikis/test-file.drawio.svg" target="_blank" rel="noopener noreferrer" data-canonical-src="test-file.drawio.svg">
+    <img alt="test-file" class="lazy" data-src="/group1/project1/-/wikis/test-file.drawio.svg" data-canonical-src="test-file.drawio.svg">
+  </a>
+</p>`;
+
 export const PROJECT_WIKI_ATTACHMENT_LINK_HTML = `<p data-sourcepos="1:1-1:26" dir="auto">
   <a href="/group1/project1/-/wikis/test-file.zip" data-canonical-src="test-file.zip">test-file</a>
 </p>`;
diff --git a/spec/frontend/content_editor/test_utils.js b/spec/frontend/content_editor/test_utils.js
index 0fa0e65cd26..16f90a15c24 100644
--- a/spec/frontend/content_editor/test_utils.js
+++ b/spec/frontend/content_editor/test_utils.js
@@ -17,6 +17,7 @@ import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
 import Diagram from '~/content_editor/extensions/diagram';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
 import Emoji from '~/content_editor/extensions/emoji';
 import FootnoteDefinition from '~/content_editor/extensions/footnote_definition';
 import FootnoteReference from '~/content_editor/extensions/footnote_reference';
@@ -218,6 +219,7 @@ export const createTiptapEditor = (extensions = []) =>
       DescriptionList,
       Details,
       DetailsContent,
+      DrawioDiagram,
       Diagram,
       Emoji,
       FootnoteDefinition,
diff --git a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
index 2f441f0f747..4b7439f6fd2 100644
--- a/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
+++ b/spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap
@@ -53,23 +53,22 @@ exports[`Contributors charts should render charts and a RefSelector when loading
       Excluding merge commits. Limited to 6,000 commits.
     </span>
      
-    <div>
-      <glareachart-stub
-        annotations=""
-        class="gl-mb-5"
-        data="[object Object]"
-        height="264"
-        includelegendavgmax="true"
-        legendaveragetext="Avg"
-        legendcurrenttext="Current"
-        legendlayout="inline"
-        legendmaxtext="Max"
-        legendmintext="Min"
-        option="[object Object]"
-        thresholds=""
-        width="0"
-      />
-    </div>
+    <glareachart-stub
+      annotations=""
+      class="gl-mb-5"
+      data="[object Object]"
+      height="264"
+      includelegendavgmax="true"
+      legendaveragetext="Avg"
+      legendcurrenttext="Current"
+      legendlayout="inline"
+      legendmaxtext="Max"
+      legendmintext="Min"
+      option="[object Object]"
+      responsive=""
+      thresholds=""
+      width="auto"
+    />
      
     <div
       class="row"
@@ -91,22 +90,21 @@ exports[`Contributors charts should render charts and a RefSelector when loading
           
         </p>
          
-        <div>
-          <glareachart-stub
-            annotations=""
-            data="[object Object]"
-            height="216"
-            includelegendavgmax="true"
-            legendaveragetext="Avg"
-            legendcurrenttext="Current"
-            legendlayout="inline"
-            legendmaxtext="Max"
-            legendmintext="Min"
-            option="[object Object]"
-            thresholds=""
-            width="0"
-          />
-        </div>
+        <glareachart-stub
+          annotations=""
+          data="[object Object]"
+          height="216"
+          includelegendavgmax="true"
+          legendaveragetext="Avg"
+          legendcurrenttext="Current"
+          legendlayout="inline"
+          legendmaxtext="Max"
+          legendmintext="Min"
+          option="[object Object]"
+          responsive=""
+          thresholds=""
+          width="auto"
+        />
       </div>
     </div>
   </div>
diff --git a/spec/frontend/contributors/component/contributors_spec.js b/spec/frontend/contributors/component/contributors_spec.js
index 03b1e977548..f915b834aff 100644
--- a/spec/frontend/contributors/component/contributors_spec.js
+++ b/spec/frontend/contributors/component/contributors_spec.js
@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ContributorsCharts from '~/contributors/components/contributors.vue';
 import { createStore } from '~/contributors/stores';
@@ -16,7 +16,6 @@ jest.mock('~/lib/utils/url_utility', () => ({
 let wrapper;
 let mock;
 let store;
-const Component = Vue.extend(ContributorsCharts);
 const endpoint = 'contributors/-/graphs';
 const branch = 'main';
 const chartData = [
@@ -32,7 +31,7 @@ function factory() {
   mock.onGet().reply(HTTP_STATUS_OK, chartData);
   store = createStore();
 
-  wrapper = mountExtended(Component, {
+  wrapper = mountExtended(ContributorsCharts, {
     propsData: {
       endpoint,
       branch,
@@ -60,7 +59,6 @@ describe('Contributors charts', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   it('should fetch chart data when mounted', () => {
diff --git a/spec/frontend/contributors/store/actions_spec.js b/spec/frontend/contributors/store/actions_spec.js
index b2ebdf2f53c..a15b9ad2978 100644
--- a/spec/frontend/contributors/store/actions_spec.js
+++ b/spec/frontend/contributors/store/actions_spec.js
@@ -2,11 +2,11 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/contributors/stores/actions';
 import * as types from '~/contributors/stores/mutation_types';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Contributors store actions', () => {
   describe('fetchChartData', () => {
@@ -38,7 +38,7 @@ describe('Contributors store actions', () => {
       );
     });
 
-    it('should show flash on API error', async () => {
+    it('should show alert on API error', async () => {
       mock.onGet().reply(HTTP_STATUS_BAD_REQUEST, 'Not Found');
 
       await testAction(
diff --git a/spec/frontend/crm/contact_form_wrapper_spec.js b/spec/frontend/crm/contact_form_wrapper_spec.js
index 50b432943fb..2fb6940a415 100644
--- a/spec/frontend/crm/contact_form_wrapper_spec.js
+++ b/spec/frontend/crm/contact_form_wrapper_spec.js
@@ -47,7 +47,6 @@ describe('Customer relations contact form wrapper', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index ec7172434bf..63b64a6c984 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -61,7 +61,6 @@ describe('Customer relations contacts root app', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
     router = null;
   });
diff --git a/spec/frontend/crm/crm_form_spec.js b/spec/frontend/crm/crm_form_spec.js
index eabcf5b1b1b..fabf43ceb9d 100644
--- a/spec/frontend/crm/crm_form_spec.js
+++ b/spec/frontend/crm/crm_form_spec.js
@@ -188,10 +188,6 @@ describe('Reusable form component', () => {
   };
   const asTestParams = (...keys) => keys.map((name) => [name, forms[name]]);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each(asTestParams(FORM_CREATE_CONTACT, FORM_UPDATE_CONTACT))(
     '%s form save button',
     (name, { mountFunction }) => {
diff --git a/spec/frontend/crm/organization_form_wrapper_spec.js b/spec/frontend/crm/organization_form_wrapper_spec.js
index d795c585622..8408c1920a9 100644
--- a/spec/frontend/crm/organization_form_wrapper_spec.js
+++ b/spec/frontend/crm/organization_form_wrapper_spec.js
@@ -40,10 +40,6 @@ describe('Customer relations organization form wrapper', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('in edit mode', () => {
     it('should render organization form with correct props', () => {
       mountComponent({ isEditMode: true });
diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js
index 1fcf6aa8f50..0b26a49a6b3 100644
--- a/spec/frontend/crm/organizations_root_spec.js
+++ b/spec/frontend/crm/organizations_root_spec.js
@@ -65,7 +65,6 @@ describe('Customer relations organizations root app', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
     router = null;
   });
diff --git a/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js b/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
index 7d9ae548c9a..12fef9d5ddf 100644
--- a/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
+++ b/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js
@@ -42,7 +42,6 @@ describe('custom metrics form fields component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mockAxios.restore();
   });
 
diff --git a/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js b/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js
index af56b94f90b..c633583f2cb 100644
--- a/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js
+++ b/spec/frontend/custom_metrics/components/custom_metrics_form_spec.js
@@ -26,10 +26,6 @@ describe('CustomMetricsForm', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Computed', () => {
     it('Form button and title text indicate the custom metric is being edited', () => {
       mountComponent({ metricPersisted: true });
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
index 113e0d8f60d..77118ae140a 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
@@ -46,11 +46,6 @@ describe('Deploy freeze modal', () => {
     wrapper.findComponent(TimezoneDropdown).trigger('input');
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('Basic interactions', () => {
     it('button is disabled when freeze period is invalid', () => {
       expect(submitDeployFreezeButton().attributes('disabled')).toBe('true');
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
index 27d8fea9d5e..883cc6a344a 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
@@ -24,11 +24,6 @@ describe('Deploy freeze settings', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('Deploy freeze table contains components', () => {
     it('contains deploy freeze table', () => {
       expect(wrapper.findComponent(DeployFreezeTable).exists()).toBe(true);
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
index c2d6eb399bc..6a9e482a184 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
@@ -37,11 +37,6 @@ describe('Deploy freeze table', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('dispatches fetchFreezePeriods when mounted', () => {
     expect(store.dispatch).toHaveBeenCalledWith('fetchFreezePeriods');
   });
diff --git a/spec/frontend/deploy_freeze/store/actions_spec.js b/spec/frontend/deploy_freeze/store/actions_spec.js
index 9b96ce5d252..d39577baa59 100644
--- a/spec/frontend/deploy_freeze/store/actions_spec.js
+++ b/spec/frontend/deploy_freeze/store/actions_spec.js
@@ -4,14 +4,14 @@ import Api from '~/api';
 import * as actions from '~/deploy_freeze/store/actions';
 import * as types from '~/deploy_freeze/store/mutation_types';
 import getInitialState from '~/deploy_freeze/store/state';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import * as logger from '~/lib/logger';
 import axios from '~/lib/utils/axios_utils';
 import { freezePeriodsFixture } from '../helpers';
 import { timezoneDataFixture } from '../../vue_shared/components/timezone_dropdown/helpers';
 
 jest.mock('~/api.js');
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('deploy freeze store actions', () => {
   const freezePeriodFixture = freezePeriodsFixture[0];
diff --git a/spec/frontend/deploy_keys/components/app_spec.js b/spec/frontend/deploy_keys/components/app_spec.js
index d11ecf95de6..3dfb828b449 100644
--- a/spec/frontend/deploy_keys/components/app_spec.js
+++ b/spec/frontend/deploy_keys/components/app_spec.js
@@ -33,7 +33,6 @@ describe('Deploy keys app component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/deploy_keys/components/key_spec.js b/spec/frontend/deploy_keys/components/key_spec.js
index 8599c55c908..5f20d4ad542 100644
--- a/spec/frontend/deploy_keys/components/key_spec.js
+++ b/spec/frontend/deploy_keys/components/key_spec.js
@@ -26,11 +26,6 @@ describe('Deploy keys key', () => {
     store.keys = data;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('enabled key', () => {
     const deployKey = data.enabled_keys[0];
 
diff --git a/spec/frontend/deploy_keys/components/keys_panel_spec.js b/spec/frontend/deploy_keys/components/keys_panel_spec.js
index f5f76d5d493..e0f86aadad4 100644
--- a/spec/frontend/deploy_keys/components/keys_panel_spec.js
+++ b/spec/frontend/deploy_keys/components/keys_panel_spec.js
@@ -23,11 +23,6 @@ describe('Deploy keys panel', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders list of keys', () => {
     mountComponent();
     expect(wrapper.findAll('.deploy-key').length).toBe(wrapper.vm.keys.length);
diff --git a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
index 46f7b2f3604..a3fdab88270 100644
--- a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
+++ b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
@@ -7,20 +7,12 @@ import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/h
 import { TEST_HOST } from 'helpers/test_constants';
 import NewDeployToken from '~/deploy_tokens/components/new_deploy_token.vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert, VARIANT_INFO } from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/alert';
 
 const createNewTokenPath = `${TEST_HOST}/create`;
 const deployTokensHelpUrl = `${TEST_HOST}/help`;
 
-jest.mock('~/flash', () => {
-  const original = jest.requireActual('~/flash');
-
-  return {
-    __esModule: true,
-    ...original,
-    createAlert: jest.fn(),
-  };
-});
+jest.mock('~/alert');
 
 describe('New Deploy Token', () => {
   let wrapper;
@@ -43,13 +35,12 @@ describe('New Deploy Token', () => {
         createNewTokenPath,
         tokenType,
       },
+      stubs: {
+        GlFormCheckbox,
+      },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without a container registry', () => {
     beforeEach(() => {
       wrapper = factory({ containerRegistryEnabled: false });
@@ -69,7 +60,7 @@ describe('New Deploy Token', () => {
 
     it('should show the read registry scope', () => {
       const checkbox = wrapper.findAllComponents(GlFormCheckbox).at(1);
-      expect(checkbox.text()).toBe('read_registry');
+      expect(checkbox.text()).toContain('read_registry');
     });
 
     function submitTokenThenCheck() {
@@ -91,7 +82,7 @@ describe('New Deploy Token', () => {
         });
     }
 
-    it('should flash error message if token creation fails', async () => {
+    it('should alert error message if token creation fails', async () => {
       const mockAxios = new MockAdapter(axios);
 
       const date = new Date();
@@ -222,4 +213,32 @@ describe('New Deploy Token', () => {
       return submitTokenThenCheck();
     });
   });
+
+  describe('help text for write_package_registry scope', () => {
+    const findWriteRegistryScopeCheckbox = () => wrapper.findAllComponents(GlFormCheckbox).at(4);
+
+    describe('with project tokenType', () => {
+      beforeEach(() => {
+        wrapper = factory();
+      });
+
+      it('should show the correct help text', () => {
+        expect(findWriteRegistryScopeCheckbox().text()).toContain(
+          'Allows read, write and delete access to the package registry.',
+        );
+      });
+    });
+
+    describe('with group tokenType', () => {
+      beforeEach(() => {
+        wrapper = factory({ tokenType: 'group' });
+      });
+
+      it('should show the correct help text', () => {
+        expect(findWriteRegistryScopeCheckbox().text()).toContain(
+          'Allows read and write access to the package registry.',
+        );
+      });
+    });
+  });
 });
diff --git a/spec/frontend/deploy_tokens/components/revoke_button_spec.js b/spec/frontend/deploy_tokens/components/revoke_button_spec.js
index fa2a7d9b155..6e81205d1c1 100644
--- a/spec/frontend/deploy_tokens/components/revoke_button_spec.js
+++ b/spec/frontend/deploy_tokens/components/revoke_button_spec.js
@@ -52,10 +52,6 @@ describe('RevokeButton', () => {
     );
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findRevokeButton = () => wrapper.findByTestId('revoke-button');
   const findModal = () => wrapper.findComponent(GlModal);
   const findPrimaryModalButton = () => wrapper.findByTestId('primary-revoke-btn');
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js
index 426a61f5a47..81e3b21a910 100644
--- a/spec/frontend/design_management/components/delete_button_spec.js
+++ b/spec/frontend/design_management/components/delete_button_spec.js
@@ -21,10 +21,6 @@ describe('Batch delete button component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders non-disabled button by default', () => {
     createComponent();
 
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
index 402e55347af..e2f1d6e4b10 100644
--- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
+++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
@@ -70,6 +70,8 @@ exports[`Design note component should match the snapshot 1`] = `
     >
        
       <!---->
+       
+      <!---->
     </div>
   </div>
    
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
index 2091e1e08dd..56bf0fa60a7 100644
--- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
@@ -1,18 +1,22 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { ApolloMutation } from 'vue-apollo';
 import { nextTick } from 'vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue';
-import createNoteMutation from '~/design_management/graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '~/design_management/graphql/mutations/toggle_resolve_discussion.mutation.graphql';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
+import destroyNoteMutation from '~/design_management/graphql/mutations/destroy_note.mutation.graphql';
+import { DELETE_NOTE_ERROR_MSG } from '~/design_management/constants';
 import mockDiscussion from '../../mock_data/discussion';
 import notes from '../../mock_data/notes';
 
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+
 const defaultMockDiscussion = {
   id: '0',
   resolved: false,
@@ -23,7 +27,6 @@ const defaultMockDiscussion = {
 const DEFAULT_TODO_COUNT = 2;
 
 describe('Design discussions component', () => {
-  const originalGon = window.gon;
   let wrapper;
 
   const findDesignNotes = () => wrapper.findAllComponents(DesignNote);
@@ -34,18 +37,7 @@ describe('Design discussions component', () => {
   const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]');
   const findResolveLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]');
-  const findApolloMutation = () => wrapper.findComponent(ApolloMutation);
 
-  const mutationVariables = {
-    mutation: createNoteMutation,
-    variables: {
-      input: {
-        noteableId: 'noteable-id',
-        body: 'test',
-        discussionId: '0',
-      },
-    },
-  };
   const registerPath = '/users/sign_up?redirect_to_referer=yes';
   const signInPath = '/users/sign_in?redirect_to_referer=yes';
   const mutate = jest.fn().mockResolvedValue({ data: { createNote: { errors: [] } } });
@@ -59,7 +51,7 @@ describe('Design discussions component', () => {
     provider: { clients: { defaultClient: { readQuery } } },
   };
 
-  function createComponent(props = {}, data = {}) {
+  function createComponent({ props = {}, data = {}, apolloConfig = {} } = {}) {
     wrapper = mount(DesignDiscussion, {
       propsData: {
         resolvedDiscussionsExpanded: true,
@@ -82,7 +74,10 @@ describe('Design discussions component', () => {
         issueIid: '1',
       },
       mocks: {
-        $apollo,
+        $apollo: {
+          ...$apollo,
+          ...apolloConfig,
+        },
         $route: {
           hash: '#note_1',
           params: {
@@ -101,16 +96,17 @@ describe('Design discussions component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    window.gon = originalGon;
+    confirmAction.mockReset();
   });
 
   describe('when discussion is not resolvable', () => {
     beforeEach(() => {
       createComponent({
-        discussion: {
-          ...defaultMockDiscussion,
-          resolvable: false,
+        props: {
+          discussion: {
+            ...defaultMockDiscussion,
+            resolvable: false,
+          },
         },
       });
     });
@@ -171,11 +167,13 @@ describe('Design discussions component', () => {
         innerText: DEFAULT_TODO_COUNT,
       });
       createComponent({
-        discussion: {
-          ...defaultMockDiscussion,
-          resolved: true,
-          resolvedBy: notes[0].author,
-          resolvedAt: '2020-05-08T07:10:45Z',
+        props: {
+          discussion: {
+            ...defaultMockDiscussion,
+            resolved: true,
+            resolvedBy: notes[0].author,
+            resolvedAt: '2020-05-08T07:10:45Z',
+          },
         },
       });
     });
@@ -206,10 +204,10 @@ describe('Design discussions component', () => {
     });
 
     it('emit todo:toggle when discussion is resolved', async () => {
-      createComponent(
-        { discussionWithOpenForm: defaultMockDiscussion.id },
-        { discussionComment: 'test', isFormRendered: true },
-      );
+      createComponent({
+        props: { discussionWithOpenForm: defaultMockDiscussion.id },
+        data: { isFormRendered: true },
+      });
       findResolveButton().trigger('click');
       findReplyForm().vm.$emit('submitForm');
 
@@ -261,32 +259,28 @@ describe('Design discussions component', () => {
     expect(findReplyForm().exists()).toBe(true);
   });
 
-  it('calls mutation on submitting form and closes the form', async () => {
-    createComponent(
-      { discussionWithOpenForm: defaultMockDiscussion.id },
-      { discussionComment: 'test', isFormRendered: true },
-    );
+  it('closes the form when note submit mutation is completed', async () => {
+    createComponent({
+      props: { discussionWithOpenForm: defaultMockDiscussion.id },
+      data: { isFormRendered: true },
+    });
 
-    findReplyForm().vm.$emit('submit-form');
-    expect(mutate).toHaveBeenCalledWith(mutationVariables);
+    findReplyForm().vm.$emit('note-submit-complete', { data: { createNote: {} } });
 
-    await mutate();
     await nextTick();
 
     expect(findReplyForm().exists()).toBe(false);
   });
 
   it('clears the discussion comment on closing comment form', async () => {
-    createComponent(
-      { discussionWithOpenForm: defaultMockDiscussion.id },
-      { discussionComment: 'test', isFormRendered: true },
-    );
+    createComponent({
+      props: { discussionWithOpenForm: defaultMockDiscussion.id },
+      data: { isFormRendered: true },
+    });
 
     await nextTick();
     findReplyForm().vm.$emit('cancel-form');
 
-    expect(wrapper.vm.discussionComment).toBe('');
-
     await nextTick();
     expect(findReplyForm().exists()).toBe(false);
   });
@@ -295,15 +289,15 @@ describe('Design discussions component', () => {
     it.each([notes[0], notes[0].discussion.notes.nodes[1]])(
       'applies correct class to all notes in the active discussion',
       (note) => {
-        createComponent(
-          { discussion: mockDiscussion },
-          {
+        createComponent({
+          props: { discussion: mockDiscussion },
+          data: {
             activeDiscussion: {
               id: note.id,
               source: 'pin',
             },
           },
-        );
+        });
 
         expect(
           wrapper
@@ -329,10 +323,10 @@ describe('Design discussions component', () => {
   });
 
   it('calls toggleResolveDiscussion mutation after adding a note if checkbox was checked', () => {
-    createComponent(
-      { discussionWithOpenForm: defaultMockDiscussion.id },
-      { discussionComment: 'test', isFormRendered: true },
-    );
+    createComponent({
+      props: { discussionWithOpenForm: defaultMockDiscussion.id },
+      data: { isFormRendered: true },
+    });
     findResolveButton().trigger('click');
     findReplyForm().vm.$emit('submitForm');
 
@@ -359,15 +353,15 @@ describe('Design discussions component', () => {
 
     beforeEach(() => {
       window.gon = { current_user_id: null };
-      createComponent(
-        {
+      createComponent({
+        props: {
           discussion: {
             ...defaultMockDiscussion,
           },
           discussionWithOpenForm: defaultMockDiscussion.id,
         },
-        { discussionComment: 'test', isFormRendered: true },
-      );
+        data: { isFormRendered: true },
+      });
     });
 
     it('does not render resolve discussion button', () => {
@@ -378,10 +372,6 @@ describe('Design discussions component', () => {
       expect(findReplyPlaceholder().exists()).toBe(false);
     });
 
-    it('does not render apollo-mutation component', () => {
-      expect(findApolloMutation().exists()).toBe(false);
-    });
-
     it('renders design-note-signed-out component', () => {
       expect(findDesignNoteSignedOut().exists()).toBe(true);
       expect(findDesignNoteSignedOut().props()).toMatchObject({
@@ -390,4 +380,64 @@ describe('Design discussions component', () => {
       });
     });
   });
+
+  it('should open confirmation modal when the note emits `delete-note` event', async () => {
+    createComponent();
+
+    findDesignNotes().at(0).vm.$emit('delete-note', { id: '1' });
+    expect(confirmAction).toHaveBeenCalled();
+  });
+
+  describe('when confirmation modal is opened', () => {
+    const noteId = 'note-test-id';
+
+    it('sends the mutation with correct variables', async () => {
+      confirmAction.mockResolvedValueOnce(true);
+      const destroyNoteMutationSuccess = jest.fn().mockResolvedValue({
+        data: { destroyNote: { note: null, __typename: 'DestroyNote', errors: [] } },
+      });
+      createComponent({ apolloConfig: { mutate: destroyNoteMutationSuccess } });
+
+      findDesignNotes().at(0).vm.$emit('delete-note', { id: noteId });
+
+      expect(confirmAction).toHaveBeenCalled();
+
+      await waitForPromises();
+
+      expect(destroyNoteMutationSuccess).toHaveBeenCalledWith({
+        update: expect.any(Function),
+        mutation: destroyNoteMutation,
+        variables: {
+          input: {
+            id: noteId,
+          },
+        },
+        optimisticResponse: {
+          destroyNote: {
+            note: null,
+            errors: [],
+            __typename: 'DestroyNotePayload',
+          },
+        },
+      });
+    });
+
+    it('emits `delete-note-error` event if GraphQL mutation fails', async () => {
+      confirmAction.mockResolvedValueOnce(true);
+      const destroyNoteMutationError = jest.fn().mockRejectedValue(new Error('GraphQL error'));
+      createComponent({ apolloConfig: { mutate: destroyNoteMutationError } });
+
+      findDesignNotes().at(0).vm.$emit('delete-note', { id: noteId });
+
+      await waitForPromises();
+
+      expect(destroyNoteMutationError).toHaveBeenCalled();
+
+      await waitForPromises();
+
+      expect(wrapper.emitted()).toEqual({
+        'delete-note-error': [[DELETE_NOTE_ERROR_MSG]],
+      });
+    });
+  });
 });
diff --git a/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js b/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js
index e71bb5ab520..95b08b89809 100644
--- a/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js
@@ -18,10 +18,6 @@ function createComponent(isAddDiscussion = false) {
 describe('DesignNoteSignedOut', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders message containing register and sign-in links while user wants to reply to a discussion', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js
index df511586c10..82848bd1a19 100644
--- a/spec/frontend/design_management/components/design_notes/design_note_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js
@@ -1,6 +1,6 @@
 import { ApolloMutation } from 'vue-apollo';
 import { nextTick } from 'vue';
-import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { GlAvatar, GlAvatarLink, GlDropdown } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
@@ -38,6 +38,8 @@ describe('Design note component', () => {
   const findReplyForm = () => wrapper.findComponent(DesignReplyForm);
   const findEditButton = () => wrapper.findByTestId('note-edit');
   const findNoteContent = () => wrapper.findByTestId('note-text');
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDeleteNoteButton = () => wrapper.find('[data-testid="delete-note-button"]');
 
   function createComponent(props = {}, data = { isEditing: false }) {
     wrapper = shallowMountExtended(DesignNote, {
@@ -63,10 +65,6 @@ describe('Design note component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should match the snapshot', () => {
     createComponent({
       note,
@@ -112,6 +110,14 @@ describe('Design note component', () => {
     expect(findEditButton().exists()).toBe(false);
   });
 
+  it('should not display a dropdown if user does not have a permission to delete note', () => {
+    createComponent({
+      note,
+    });
+
+    expect(findDropdown().exists()).toBe(false);
+  });
+
   describe('when user has a permission to edit note', () => {
     it('should open an edit form on edit button click', async () => {
       createComponent({
@@ -158,15 +164,47 @@ describe('Design note component', () => {
         expect(findNoteContent().exists()).toBe(true);
       });
 
-      it('calls a mutation on submit-form event and hides a form', async () => {
-        findReplyForm().vm.$emit('submit-form');
-        expect(mutate).toHaveBeenCalled();
+      it('hides a form after update mutation is completed', async () => {
+        findReplyForm().vm.$emit('note-submit-complete', { data: { updateNote: { errors: [] } } });
 
-        await mutate();
         await nextTick();
         expect(findReplyForm().exists()).toBe(false);
         expect(findNoteContent().exists()).toBe(true);
       });
     });
   });
+
+  describe('when user has a permission to delete note', () => {
+    it('should display a dropdown', () => {
+      createComponent({
+        note: {
+          ...note,
+          userPermissions: {
+            adminNote: true,
+          },
+        },
+      });
+
+      expect(findDropdown().exists()).toBe(true);
+    });
+  });
+
+  it('should emit `delete-note` event with proper payload when delete note button is clicked', async () => {
+    const payload = {
+      ...note,
+      userPermissions: {
+        adminNote: true,
+      },
+    };
+
+    createComponent({
+      note: {
+        ...payload,
+      },
+    });
+
+    findDeleteNoteButton().vm.$emit('click');
+
+    expect(wrapper.emitted()).toEqual({ 'delete-note': [[{ ...payload }]] });
+  });
 });
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index f4d4f9cf896..db1cfb4f504 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -1,46 +1,96 @@
+import { GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Autosave from '~/autosave';
+import waitForPromises from 'helpers/wait_for_promises';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
+import createNoteMutation from '~/design_management/graphql/mutations/create_note.mutation.graphql';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
+import {
+  ADD_DISCUSSION_COMMENT_ERROR,
+  ADD_IMAGE_DIFF_NOTE_ERROR,
+  UPDATE_IMAGE_DIFF_NOTE_ERROR,
+  UPDATE_NOTE_ERROR,
+} from '~/design_management/utils/error_messages';
+import {
+  mockNoteSubmitSuccessMutationResponse,
+  mockNoteSubmitFailureMutationResponse,
+} from '../../mock_data/apollo_mock';
 
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 jest.mock('~/autosave');
 
 describe('Design reply form component', () => {
   let wrapper;
-  let originalGon;
 
   const findTextarea = () => wrapper.find('textarea');
   const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
   const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
-
-  function createComponent(props = {}, mountOptions = {}) {
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const mockNoteableId = 'gid://gitlab/DesignManagement::Design/6';
+  const mockComment = 'New comment';
+  const mockDiscussionId = 'gid://gitlab/Discussion/6466a72f35b163f3c3e52d7976a09387f2c573e8';
+  const createNoteMutationData = {
+    mutation: createNoteMutation,
+    update: expect.anything(),
+    variables: {
+      input: {
+        noteableId: mockNoteableId,
+        discussionId: mockDiscussionId,
+        body: mockComment,
+      },
+    },
+  };
+
+  const ctrlKey = {
+    ctrlKey: true,
+  };
+  const metaKey = {
+    metaKey: true,
+  };
+  const mutationHandler = jest.fn().mockResolvedValue();
+
+  function createComponent({
+    props = {},
+    mountOptions = {},
+    data = {},
+    mutation = mutationHandler,
+  } = {}) {
     wrapper = mount(DesignReplyForm, {
       propsData: {
+        designNoteMutation: createNoteMutation,
+        noteableId: mockNoteableId,
+        markdownDocsPath: 'path/to/markdown/docs',
+        markdownPreviewPath: 'path/to/markdown/preview',
         value: '',
-        isSaving: false,
-        noteableId: 'gid://gitlab/DesignManagement::Design/6',
         ...props,
       },
       ...mountOptions,
+      mocks: {
+        $apollo: {
+          mutate: mutation,
+        },
+      },
+      data() {
+        return {
+          ...data,
+        };
+      },
     });
   }
 
   beforeEach(() => {
-    originalGon = window.gon;
     window.gon.current_user_id = 1;
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    window.gon = originalGon;
     confirmAction.mockReset();
   });
 
   it('textarea has focus after component mount', () => {
     // We need to attach to document, so that `document.activeElement` is properly set in jsdom
-    createComponent({}, { attachTo: document.body });
+    createComponent({ mountOptions: { attachTo: document.body } });
 
     expect(findTextarea().element).toEqual(document.activeElement);
   });
@@ -64,7 +114,7 @@ describe('Design reply form component', () => {
   });
 
   it('renders button text as "Save comment" when creating a comment', () => {
-    createComponent({ isNewComment: false });
+    createComponent({ props: { isNewComment: false } });
 
     expect(findSubmitButton().html()).toMatchSnapshot();
   });
@@ -76,7 +126,7 @@ describe('Design reply form component', () => {
   `(
     'initializes autosave support on discussion with proper key',
     async ({ discussionId, shortDiscussionId }) => {
-      createComponent({ discussionId });
+      createComponent({ props: { discussionId } });
       await nextTick();
 
       expect(Autosave).toHaveBeenCalledWith(expect.any(Element), [
@@ -88,32 +138,24 @@ describe('Design reply form component', () => {
   );
 
   describe('when form has no text', () => {
-    beforeEach(() => {
-      createComponent({
-        value: '',
-      });
+    beforeEach(async () => {
+      createComponent();
+      await nextTick();
     });
 
     it('submit button is disabled', () => {
       expect(findSubmitButton().attributes().disabled).toBe('disabled');
     });
 
-    it('does not emit submitForm event on textarea ctrl+enter keydown', async () => {
-      findTextarea().trigger('keydown.enter', {
-        ctrlKey: true,
-      });
-
-      await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeUndefined();
-    });
-
-    it('does not emit submitForm event on textarea meta+enter keydown', async () => {
-      findTextarea().trigger('keydown.enter', {
-        metaKey: true,
-      });
+    it.each`
+      key       | keyData
+      ${'ctrl'} | ${ctrlKey}
+      ${'meta'} | ${metaKey}
+    `('does not perform mutation on textarea $key+enter keydown', async ({ keyData }) => {
+      findTextarea().trigger('keydown.enter', keyData);
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeUndefined();
+      expect(mutationHandler).not.toHaveBeenCalled();
     });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
@@ -129,118 +171,159 @@ describe('Design reply form component', () => {
     });
   });
 
-  describe('when form has text', () => {
-    beforeEach(() => {
-      createComponent({
-        value: 'test',
-      });
-    });
-
+  describe('when the form has text', () => {
     it('submit button is enabled', () => {
+      createComponent({ props: { value: mockComment } });
       expect(findSubmitButton().attributes().disabled).toBeUndefined();
     });
 
-    it('emits submitForm event on Comment button click', async () => {
-      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
+    it('calls a mutation on submit button click event', async () => {
+      const mockMutationVariables = {
+        noteableId: mockNoteableId,
+        discussionId: mockDiscussionId,
+      };
+      const successfulMutation = jest.fn().mockResolvedValue(mockNoteSubmitSuccessMutationResponse);
+      createComponent({
+        props: {
+          designNoteMutation: createNoteMutation,
+          mutationVariables: mockMutationVariables,
+          value: mockComment,
+        },
+        mutation: successfulMutation,
+      });
 
       findSubmitButton().vm.$emit('click');
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toHaveLength(1);
-      expect(autosaveResetSpy).toHaveBeenCalled();
-    });
+      expect(successfulMutation).toHaveBeenCalledWith(createNoteMutationData);
 
-    it('emits submitForm event on textarea ctrl+enter keydown', async () => {
-      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
+      await waitForPromises();
+      expect(wrapper.emitted('note-submit-complete')).toEqual([
+        [mockNoteSubmitSuccessMutationResponse],
+      ]);
+    });
 
-      findTextarea().trigger('keydown.enter', {
-        ctrlKey: true,
+    it.each`
+      key       | keyData
+      ${'ctrl'} | ${ctrlKey}
+      ${'meta'} | ${metaKey}
+    `('does perform mutation on textarea $key+enter keydown', async ({ keyData }) => {
+      const mockMutationVariables = {
+        noteableId: mockNoteableId,
+        discussionId: mockDiscussionId,
+      };
+      const successfulMutation = jest.fn().mockResolvedValue(mockNoteSubmitSuccessMutationResponse);
+      createComponent({
+        props: {
+          designNoteMutation: createNoteMutation,
+          mutationVariables: mockMutationVariables,
+          value: mockComment,
+        },
+        mutation: successfulMutation,
       });
 
+      findTextarea().trigger('keydown.enter', keyData);
+
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toHaveLength(1);
-      expect(autosaveResetSpy).toHaveBeenCalled();
-    });
+      expect(successfulMutation).toHaveBeenCalledWith(createNoteMutationData);
 
-    it('emits submitForm event on textarea meta+enter keydown', async () => {
-      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
+      await waitForPromises();
+      expect(wrapper.emitted('note-submit-complete')).toEqual([
+        [mockNoteSubmitSuccessMutationResponse],
+      ]);
+    });
 
-      findTextarea().trigger('keydown.enter', {
-        metaKey: true,
+    it('shows error message when mutation fails', async () => {
+      const failedMutation = jest.fn().mockRejectedValue(mockNoteSubmitFailureMutationResponse);
+      createComponent({
+        props: {
+          designNoteMutation: createNoteMutation,
+          value: mockComment,
+        },
+        mutation: failedMutation,
+        data: {
+          errorMessage: 'error',
+        },
       });
 
-      await nextTick();
-      expect(wrapper.emitted('submit-form')).toHaveLength(1);
-      expect(autosaveResetSpy).toHaveBeenCalled();
-    });
-
-    it('emits input event on changing textarea content', async () => {
-      findTextarea().setValue('test2');
+      findSubmitButton().vm.$emit('click');
 
-      await nextTick();
-      expect(wrapper.emitted('input')).toEqual([['test2']]);
+      await waitForPromises();
+      expect(findAlert().exists()).toBe(true);
     });
 
+    it.each`
+      isDiscussion | isNewComment | errorMessage
+      ${true}      | ${true}      | ${ADD_IMAGE_DIFF_NOTE_ERROR}
+      ${true}      | ${false}     | ${UPDATE_IMAGE_DIFF_NOTE_ERROR}
+      ${false}     | ${true}      | ${ADD_DISCUSSION_COMMENT_ERROR}
+      ${false}     | ${false}     | ${UPDATE_NOTE_ERROR}
+    `(
+      'return proper error message on error in case of isDiscussion is $isDiscussion and isNewComment is $isNewComment',
+      async ({ isDiscussion, isNewComment, errorMessage }) => {
+        createComponent({ props: { isDiscussion, isNewComment } });
+
+        expect(wrapper.vm.getErrorMessage()).toBe(errorMessage);
+      },
+    );
+
     it('emits cancelForm event on Escape key if text was not changed', () => {
+      createComponent();
+
       findTextarea().trigger('keyup.esc');
 
       expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('opens confirmation modal on Escape key when text has changed', async () => {
-      wrapper.setProps({ value: 'test2' });
+      createComponent();
+
+      findTextarea().setValue(mockComment);
 
       await nextTick();
       findTextarea().trigger('keyup.esc');
-      expect(confirmAction).toHaveBeenCalled();
-    });
-
-    it('emits cancelForm event on Cancel button click if text was not changed', () => {
-      findCancelButton().trigger('click');
 
-      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
-    });
-
-    it('opens confirmation modal on Cancel button click when text has changed', async () => {
-      wrapper.setProps({ value: 'test2' });
-
-      await nextTick();
-      findCancelButton().trigger('click');
       expect(confirmAction).toHaveBeenCalled();
     });
 
     it('emits cancelForm event when confirmed', async () => {
       confirmAction.mockResolvedValueOnce(true);
-      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
-      wrapper.setProps({ value: 'test3' });
-      await nextTick();
+      createComponent({ props: { value: mockComment } });
+      findTextarea().setValue('Comment changed');
 
-      findTextarea().trigger('keyup.esc');
       await nextTick();
+      findTextarea().trigger('keyup.esc');
 
       expect(confirmAction).toHaveBeenCalled();
-      await nextTick();
 
+      await waitForPromises();
       expect(wrapper.emitted('cancel-form')).toHaveLength(1);
-      expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
-    it("doesn't emit cancelForm event when not confirmed", async () => {
+    it('does not emit cancelForm event when not confirmed', async () => {
       confirmAction.mockResolvedValueOnce(false);
-      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
-      wrapper.setProps({ value: 'test3' });
+      createComponent({ props: { value: mockComment } });
+      findTextarea().setValue('Comment changed');
       await nextTick();
 
       findTextarea().trigger('keyup.esc');
       await nextTick();
 
       expect(confirmAction).toHaveBeenCalled();
-      await nextTick();
+      await waitForPromises();
 
       expect(wrapper.emitted('cancel-form')).toBeUndefined();
-      expect(autosaveResetSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when component is destroyed', () => {
+    it('calls autosave.reset', async () => {
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
+      createComponent();
+      await wrapper.destroy();
+      expect(autosaveResetSpy).toHaveBeenCalled();
     });
   });
 });
diff --git a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
index 41129e2b58d..eaa5a620fa6 100644
--- a/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
+++ b/spec/frontend/design_management/components/design_notes/toggle_replies_widget_spec.js
@@ -23,10 +23,6 @@ describe('Toggle replies widget component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when replies are collapsed', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js
index 4a339899473..fdcea6d88c0 100644
--- a/spec/frontend/design_management/components/design_presentation_spec.js
+++ b/spec/frontend/design_management/components/design_presentation_spec.js
@@ -15,7 +15,6 @@ const mockOverlayData = {
 };
 
 describe('Design management design presentation component', () => {
-  const originalGon = window.gon;
   let wrapper;
 
   function createComponent(
@@ -114,11 +113,6 @@ describe('Design management design presentation component', () => {
     window.gon = { current_user_id: 1 };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    window.gon = originalGon;
-  });
-
   it('renders image and overlay when image provided', async () => {
     createComponent(
       {
diff --git a/spec/frontend/design_management/components/design_scaler_spec.js b/spec/frontend/design_management/components/design_scaler_spec.js
index e1a66cea329..62a26a8f5dd 100644
--- a/spec/frontend/design_management/components/design_scaler_spec.js
+++ b/spec/frontend/design_management/components/design_scaler_spec.js
@@ -25,11 +25,6 @@ describe('Design management design scaler component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when `scale` value is greater than 1', () => {
     beforeEach(async () => {
       setScale(1.6);
diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js
index af995f75ddc..90424175417 100644
--- a/spec/frontend/design_management/components/design_sidebar_spec.js
+++ b/spec/frontend/design_management/components/design_sidebar_spec.js
@@ -29,7 +29,6 @@ const $route = {
 const mutate = jest.fn().mockResolvedValue();
 
 describe('Design management design sidebar component', () => {
-  const originalGon = window.gon;
   let wrapper;
 
   const findDiscussions = () => wrapper.findAllComponents(DesignDiscussion);
@@ -67,11 +66,6 @@ describe('Design management design sidebar component', () => {
     window.gon = { current_user_id: 1 };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    window.gon = originalGon;
-  });
-
   it('renders participants', () => {
     createComponent();
 
@@ -143,8 +137,8 @@ describe('Design management design sidebar component', () => {
       expect(findResolvedCommentsToggle().props('visible')).toBe(true);
     });
 
-    it('sends a mutation to set an active discussion when clicking on a discussion', () => {
-      findFirstDiscussion().trigger('click');
+    it('emits correct event to send a mutation to set an active discussion when clicking on a discussion', () => {
+      findFirstDiscussion().vm.$emit('update-active-discussion');
 
       expect(mutate).toHaveBeenCalledWith(updateActiveDiscussionMutationVariables);
     });
diff --git a/spec/frontend/design_management/components/design_todo_button_spec.js b/spec/frontend/design_management/components/design_todo_button_spec.js
index ac26873b692..f713203c0ee 100644
--- a/spec/frontend/design_management/components/design_todo_button_spec.js
+++ b/spec/frontend/design_management/components/design_todo_button_spec.js
@@ -51,8 +51,6 @@ describe('Design management design todo button', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     jest.clearAllMocks();
   });
 
diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js
index 95d2ad504de..53abcc559d8 100644
--- a/spec/frontend/design_management/components/image_spec.js
+++ b/spec/frontend/design_management/components/image_spec.js
@@ -20,10 +20,6 @@ describe('Design management large image component', () => {
     stubPerformanceWebAPI();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders loading state', () => {
     createComponent({
       isLoading: true,
diff --git a/spec/frontend/design_management/components/list/item_spec.js b/spec/frontend/design_management/components/list/item_spec.js
index e907e2e4ac5..4a0ad5a045b 100644
--- a/spec/frontend/design_management/components/list/item_spec.js
+++ b/spec/frontend/design_management/components/list/item_spec.js
@@ -54,10 +54,6 @@ describe('Design management list item component', () => {
     );
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when item is not in view', () => {
     it('image is not rendered', () => {
       createComponent();
diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index 38a7fadee79..8427d83ceee 100644
--- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -34,10 +34,6 @@ describe('Design management pagination component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('hides components when designs are empty', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js
index 1776405ece9..764ad73805f 100644
--- a/spec/frontend/design_management/components/toolbar/index_spec.js
+++ b/spec/frontend/design_management/components/toolbar/index_spec.js
@@ -1,12 +1,18 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
+import { getPermissionsQueryResponse } from '../../mock_data/apollo_mock';
 
 Vue.use(VueRouter);
+Vue.use(VueApollo);
 const router = new VueRouter();
 
 const RouterLinkStub = {
@@ -27,7 +33,12 @@ describe('Design management toolbar component', () => {
     const updatedAt = new Date();
     updatedAt.setHours(updatedAt.getHours() - 1);
 
+    const mockApollo = createMockApollo([
+      [permissionsQuery, jest.fn().mockResolvedValue(getPermissionsQueryResponse(createDesign))],
+    ]);
+
     wrapper = shallowMount(Toolbar, {
+      apolloProvider: mockApollo,
       router,
       propsData: {
         id: '1',
@@ -46,31 +57,20 @@ describe('Design management toolbar component', () => {
         'router-link': RouterLinkStub,
       },
     });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({
-      permissions: {
-        createDesign,
-      },
-    });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders design and updated data', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('links back to designs list', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
     const link = wrapper.find('a');
 
     expect(link.props('to')).toEqual({
@@ -84,35 +84,41 @@ describe('Design management toolbar component', () => {
   it('renders delete button on latest designs version with logged in user', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(true);
   });
 
   it('does not render delete button on non-latest version', async () => {
     createComponent(false, true, { isLatestVersion: false });
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(false);
   });
 
   it('does not render delete button when user is not logged in', async () => {
     createComponent(false, false);
 
-    await nextTick();
+    await waitForPromises();
+
     expect(wrapper.findComponent(DeleteButton).exists()).toBe(false);
   });
 
   it('emits `delete` event on deleteButton `delete-selected-designs` event', async () => {
     createComponent();
 
-    await nextTick();
+    await waitForPromises();
+
     wrapper.findComponent(DeleteButton).vm.$emit('delete-selected-designs');
     expect(wrapper.emitted().delete).toHaveLength(1);
   });
 
-  it('renders download button with correct link', () => {
+  it('renders download button with correct link', async () => {
     createComponent();
 
+    await waitForPromises();
+
     expect(wrapper.findComponent(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );
diff --git a/spec/frontend/design_management/components/upload/button_spec.js b/spec/frontend/design_management/components/upload/button_spec.js
index 59821218ab8..ceae7920e0d 100644
--- a/spec/frontend/design_management/components/upload/button_spec.js
+++ b/spec/frontend/design_management/components/upload/button_spec.js
@@ -14,10 +14,6 @@ describe('Design management upload button component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders upload design button', () => {
     createComponent();
 
diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
index 6ad10e707ab..cdfff61ba4f 100644
--- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
+++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
@@ -42,10 +42,6 @@ describe('Design management design version dropdown component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findAllListboxItems = () => wrapper.findAllComponents(GlListboxItem);
   const findVersionLink = (index) => wrapper.findAllComponents(GlListboxItem).at(index);
diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js
index 2a43b5debee..2b99dcf14da 100644
--- a/spec/frontend/design_management/mock_data/apollo_mock.js
+++ b/spec/frontend/design_management/mock_data/apollo_mock.js
@@ -91,7 +91,7 @@ export const designUploadMutationUpdatedResponse = {
   },
 };
 
-export const permissionsQueryResponse = {
+export const getPermissionsQueryResponse = (createDesign = true) => ({
   data: {
     project: {
       __typename: 'Project',
@@ -99,11 +99,11 @@ export const permissionsQueryResponse = {
       issue: {
         __typename: 'Issue',
         id: 'issue-1',
-        userPermissions: { __typename: 'UserPermissions', createDesign: true },
+        userPermissions: { __typename: 'UserPermissions', createDesign },
       },
     },
   },
-};
+});
 
 export const reorderedDesigns = [
   {
@@ -211,3 +211,109 @@ export const getDesignQueryResponse = {
     },
   },
 };
+
+export const mockNoteSubmitSuccessMutationResponse = [
+  {
+    data: {
+      createNote: {
+        note: {
+          id: 'gid://gitlab/DiffNote/468',
+          author: {
+            id: 'gid://gitlab/User/1',
+            avatarUrl:
+              'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+            name: 'Administrator',
+            username: 'root',
+            webUrl: 'http://127.0.0.1:3000/root',
+            __typename: 'UserCore',
+          },
+          body: 'New comment',
+          bodyHtml: "<p data-sourcepos='1:1-1:4' dir='auto'>asdd</p>",
+          createdAt: '2023-02-24T06:49:20Z',
+          resolved: false,
+          position: {
+            diffRefs: {
+              baseSha: 'f63ae53ed82d8765477c191383e1e6a000c10375',
+              startSha: 'f63ae53ed82d8765477c191383e1e6a000c10375',
+              headSha: 'f348c652f1a737151fc79047895e695fbe81464c',
+              __typename: 'DiffRefs',
+            },
+            x: 441,
+            y: 128,
+            height: 152,
+            width: 695,
+            __typename: 'DiffPosition',
+          },
+          userPermissions: {
+            adminNote: true,
+            repositionNote: true,
+            __typename: 'NotePermissions',
+          },
+          discussion: {
+            id: 'gid://gitlab/Discussion/6466a72f35b163f3c3e52d7976a09387f2c573e8',
+            notes: {
+              nodes: [
+                {
+                  id: 'gid://gitlab/DiffNote/459',
+                  __typename: 'Note',
+                },
+              ],
+              __typename: 'NoteConnection',
+            },
+            __typename: 'Discussion',
+          },
+          __typename: 'Note',
+        },
+        errors: [],
+        __typename: 'CreateNotePayload',
+      },
+    },
+  },
+];
+
+export const mockNoteSubmitFailureMutationResponse = [
+  {
+    errors: [
+      {
+        message:
+          'Variable $input of type CreateNoteInput! was provided invalid value for bodyaa (Field is not defined on CreateNoteInput), body (Expected value to not be null)',
+        locations: [
+          {
+            line: 1,
+            column: 21,
+          },
+        ],
+        extensions: {
+          value: {
+            noteableId: 'gid://gitlab/DesignManagement::Design/10',
+            discussionId: 'gid://gitlab/Discussion/6466a72f35b163f3c3e52d7976a09387f2c573e8',
+            bodyaa: 'df',
+          },
+          problems: [
+            {
+              path: ['bodyaa'],
+              explanation: 'Field is not defined on CreateNoteInput',
+            },
+            {
+              path: ['body'],
+              explanation: 'Expected value to not be null',
+            },
+          ],
+        },
+      },
+    ],
+  },
+];
+
+export const mockCreateImageNoteDiffResponse = {
+  data: {
+    createImageDiffNote: {
+      note: {
+        author: {
+          username: '',
+        },
+        discussion: {},
+      },
+    },
+  },
+};
diff --git a/spec/frontend/design_management/mock_data/project.js b/spec/frontend/design_management/mock_data/project.js
new file mode 100644
index 00000000000..e1c2057d8d1
--- /dev/null
+++ b/spec/frontend/design_management/mock_data/project.js
@@ -0,0 +1,17 @@
+import design from './design';
+
+export default {
+  project: {
+    issue: {
+      designCollection: {
+        designs: {
+          nodes: [
+            {
+              ...design,
+            },
+          ],
+        },
+      },
+    },
+  },
+};
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index a11463ab663..6cec4036d40 100644
--- a/spec/frontend/design_management/pages/design/index_spec.js
+++ b/spec/frontend/design_management/pages/design/index_spec.js
@@ -1,15 +1,14 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
-import { ApolloMutation } from 'vue-apollo';
 import VueRouter from 'vue-router';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import Api from '~/api';
 import DesignPresentation from '~/design_management/components/design_presentation.vue';
 import DesignSidebar from '~/design_management/components/design_sidebar.vue';
 import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants';
-import createImageDiffNoteMutation from '~/design_management/graphql/mutations/create_image_diff_note.mutation.graphql';
 import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
+import getDesignQuery from '~/design_management/graphql/queries/get_design.query.graphql';
 import DesignIndex from '~/design_management/pages/design/index.vue';
 import createRouter from '~/design_management/router';
 import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
@@ -23,16 +22,23 @@ import {
   DESIGN_SNOWPLOW_EVENT_TYPES,
   DESIGN_SERVICE_PING_EVENT_TYPES,
 } from '~/design_management/utils/tracking';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
+import * as cacheUpdate from '~/design_management/utils/cache_update';
 import mockAllVersions from '../../mock_data/all_versions';
 import design from '../../mock_data/design';
+import mockProject from '../../mock_data/project';
 import mockResponseWithDesigns from '../../mock_data/designs';
 import mockResponseNoDesigns from '../../mock_data/no_designs';
+import { mockCreateImageNoteDiffResponse } from '../../mock_data/apollo_mock';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/api.js');
 
 const focusInput = jest.fn();
+const mockCacheObject = {
+  readQuery: jest.fn().mockReturnValue(mockProject),
+  writeQuery: jest.fn(),
+};
 const mutate = jest.fn().mockResolvedValue();
 const mockPageLayoutElement = {
   classList: {
@@ -52,32 +58,13 @@ const mockDesignNoDiscussions = {
     nodes: [],
   },
 };
-const newComment = 'new comment';
+
 const annotationCoordinates = {
   x: 10,
   y: 10,
   width: 100,
   height: 100,
 };
-const createDiscussionMutationVariables = {
-  mutation: createImageDiffNoteMutation,
-  update: expect.anything(),
-  variables: {
-    input: {
-      body: newComment,
-      noteableId: design.id,
-      position: {
-        headSha: 'headSha',
-        baseSha: 'baseSha',
-        startSha: 'startSha',
-        paths: {
-          newPath: 'full-design-path',
-        },
-        ...annotationCoordinates,
-      },
-    },
-  },
-};
 
 Vue.use(VueRouter);
 
@@ -85,7 +72,7 @@ describe('Design management design index page', () => {
   let wrapper;
   let router;
 
-  const findDiscussionForm = () => wrapper.findComponent(DesignReplyForm);
+  const findDesignReplyForm = () => wrapper.findComponent(DesignReplyForm);
   const findSidebar = () => wrapper.findComponent(DesignSidebar);
   const findDesignPresentation = () => wrapper.findComponent(DesignPresentation);
 
@@ -95,7 +82,7 @@ describe('Design management design index page', () => {
       data = {},
       intialRouteOptions = {},
       provide = {},
-      stubs = { ApolloMutation, DesignSidebar, DesignReplyForm },
+      stubs = { DesignSidebar, DesignReplyForm },
     } = {},
   ) {
     const $apollo = {
@@ -105,6 +92,11 @@ describe('Design management design index page', () => {
         },
       },
       mutate,
+      getClient() {
+        return {
+          cache: mockCacheObject,
+        };
+      },
     };
 
     router = createRouter();
@@ -133,10 +125,6 @@ describe('Design management design index page', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when navigating to component', () => {
     it('applies fullscreen layout class', () => {
       jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockPageLayoutElement);
@@ -216,7 +204,7 @@ describe('Design management design index page', () => {
     findDesignPresentation().vm.$emit('openCommentForm', { x: 0, y: 0 });
 
     await nextTick();
-    expect(findDiscussionForm().exists()).toBe(true);
+    expect(findDesignReplyForm().exists()).toBe(true);
   });
 
   it('keeps new discussion form focused', () => {
@@ -235,24 +223,36 @@ describe('Design management design index page', () => {
     expect(focusInput).toHaveBeenCalled();
   });
 
-  it('sends a mutation on submitting form and closes form', async () => {
+  it('sends a update and closes the form when mutation is completed', async () => {
     createComponent(
       { loading: false },
       {
         data: {
           design,
           annotationCoordinates,
-          comment: newComment,
         },
       },
     );
 
-    findDiscussionForm().vm.$emit('submit-form');
-    expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
+    const addImageDiffNoteToStore = jest.spyOn(cacheUpdate, 'updateStoreAfterAddImageDiffNote');
+
+    const mockDesignVariables = {
+      fullPath: 'project-path',
+      iid: '1',
+      filenames: ['gid::/gitlab/Design/1'],
+      atVersion: null,
+    };
+
+    findDesignReplyForm().vm.$emit('note-submit-complete', mockCreateImageNoteDiffResponse);
 
     await nextTick();
-    await mutate({ variables: createDiscussionMutationVariables });
-    expect(findDiscussionForm().exists()).toBe(false);
+    expect(addImageDiffNoteToStore).toHaveBeenCalledWith(
+      mockCacheObject,
+      mockCreateImageNoteDiffResponse.data.createImageDiffNote,
+      getDesignQuery,
+      mockDesignVariables,
+    );
+    expect(findDesignReplyForm().exists()).toBe(false);
   });
 
   it('closes the form and clears the comment on canceling form', async () => {
@@ -262,17 +262,14 @@ describe('Design management design index page', () => {
         data: {
           design,
           annotationCoordinates,
-          comment: newComment,
         },
       },
     );
 
-    findDiscussionForm().vm.$emit('cancel-form');
-
-    expect(wrapper.vm.comment).toBe('');
+    findDesignReplyForm().vm.$emit('cancel-form');
 
     await nextTick();
-    expect(findDiscussionForm().exists()).toBe(false);
+    expect(findDesignReplyForm().exists()).toBe(false);
   });
 
   describe('with error', () => {
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 76ece922ded..1ddf757eb19 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -29,19 +29,19 @@ import {
   DESIGN_TRACKING_PAGE_NAME,
   DESIGN_SNOWPLOW_EVENT_TYPES,
 } from '~/design_management/utils/tracking';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import {
   designListQueryResponse,
   designUploadMutationCreatedResponse,
   designUploadMutationUpdatedResponse,
-  permissionsQueryResponse,
+  getPermissionsQueryResponse,
   moveDesignMutationResponse,
   reorderedDesigns,
   moveDesignMutationResponseWithErrors,
 } from '../mock_data/apollo_mock';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 const mockPageEl = {
   classList: {
     remove: jest.fn(),
@@ -181,7 +181,7 @@ describe('Design management index page', () => {
 
     const requestHandlers = [
       [getDesignListQuery, jest.fn().mockResolvedValue(designListQueryResponse)],
-      [permissionsQuery, jest.fn().mockResolvedValue(permissionsQueryResponse)],
+      [permissionsQuery, jest.fn().mockResolvedValue(getPermissionsQueryResponse())],
       [moveDesignMutation, moveDesignHandler],
     ];
 
@@ -197,11 +197,6 @@ describe('Design management index page', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('designs', () => {
     it('renders loading icon', () => {
       createComponent({ loading: true });
@@ -800,7 +795,7 @@ describe('Design management index page', () => {
       expect(draggableAttributes().disabled).toBe(false);
     });
 
-    it('displays flash if mutation had a recoverable error', async () => {
+    it('displays alert if mutation had a recoverable error', async () => {
       createComponentWithApollo({
         moveHandler: jest.fn().mockResolvedValue(moveDesignMutationResponseWithErrors),
       });
diff --git a/spec/frontend/design_management/router_spec.js b/spec/frontend/design_management/router_spec.js
index b9edde559c8..3503725f741 100644
--- a/spec/frontend/design_management/router_spec.js
+++ b/spec/frontend/design_management/router_spec.js
@@ -11,8 +11,6 @@ import '~/commons/bootstrap';
 function factory(routeArg) {
   Vue.use(VueRouter);
 
-  window.gon = { sprite_icons: '' };
-
   const router = createRouter('/');
   if (routeArg !== undefined) {
     router.push(routeArg);
@@ -36,10 +34,6 @@ function factory(routeArg) {
 }
 
 describe('Design management router', () => {
-  afterEach(() => {
-    window.location.hash = '';
-  });
-
   describe.each([['/'], [{ name: DESIGNS_ROUTE_NAME }]])('root route', (routeArg) => {
     it('pushes home component', () => {
       const wrapper = factory(routeArg);
diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js
index 42777adfd58..e89dfe9f860 100644
--- a/spec/frontend/design_management/utils/cache_update_spec.js
+++ b/spec/frontend/design_management/utils/cache_update_spec.js
@@ -10,10 +10,10 @@ import {
   ADD_IMAGE_DIFF_NOTE_ERROR,
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
 } from '~/design_management/utils/error_messages';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import design from '../mock_data/design';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Design Management cache update', () => {
   const mockErrors = ['code red!'];
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 513e67ea247..06995706a2b 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -59,6 +59,7 @@ describe('diffs/components/app', () => {
         endpoint: TEST_ENDPOINT,
         endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
         endpointBatch: `${TEST_HOST}/diff/endpointBatch`,
+        endpointDiffForPath: TEST_ENDPOINT,
         endpointCoverage: `${TEST_HOST}/diff/endpointCoverage`,
         endpointCodequality: '',
         projectPath: 'namespace/project',
@@ -71,12 +72,6 @@ describe('diffs/components/app', () => {
       },
       provide,
       store,
-      stubs: {
-        DynamicScroller: {
-          template: `<div><slot :item="$store.state.diffs.diffFiles[0]"></slot></div>`,
-        },
-        DynamicScrollerItem: true,
-      },
     });
   }
 
@@ -265,7 +260,7 @@ describe('diffs/components/app', () => {
 
     it('sets width of tree list', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+        state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
       });
 
       expect(wrapper.find('.js-diff-tree-list').element.style.width).toEqual('320px');
@@ -294,13 +289,14 @@ describe('diffs/components/app', () => {
 
     it('does not render empty state when diff files exist', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles.push({
-          id: 1,
-        });
+        state.diffs.diffFiles = ['anything'];
+        state.diffs.treeEntries['1'] = { type: 'blob', id: 1 };
       });
 
       expect(wrapper.findComponent(NoChanges).exists()).toBe(false);
-      expect(wrapper.findAllComponents(DiffFile).length).toBe(1);
+      expect(wrapper.findComponent({ name: 'DynamicScroller' }).props('items')).toBe(
+        store.state.diffs.diffFiles,
+      );
     });
   });
 
@@ -388,19 +384,15 @@ describe('diffs/components/app', () => {
 
     beforeEach(() => {
       createComponent({}, () => {
-        store.state.diffs.diffFiles = [
-          { file_hash: '111', file_path: '111.js' },
-          { file_hash: '222', file_path: '222.js' },
-          { file_hash: '333', file_path: '333.js' },
+        store.state.diffs.treeEntries = [
+          { type: 'blob', fileHash: '111', path: '111.js' },
+          { type: 'blob', fileHash: '222', path: '222.js' },
+          { type: 'blob', fileHash: '333', path: '333.js' },
         ];
       });
       spy = jest.spyOn(store, 'dispatch');
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('jumps to next and previous files in the list', async () => {
       await nextTick();
 
@@ -507,7 +499,6 @@ describe('diffs/components/app', () => {
   describe('diffs', () => {
     it('should render compare versions component', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
         state.diffs.mergeRequestDiffs = diffsMockData;
         state.diffs.targetBranchName = 'target-branch';
         state.diffs.mergeRequestDiff = mergeRequestDiff;
@@ -578,10 +569,18 @@ describe('diffs/components/app', () => {
 
     it('should display diff file if there are diff files', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles.push({ sha: '123' });
+        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+        state.diffs.treeEntries = {
+          111: { type: 'blob', fileHash: '111', path: '111.js' },
+          123: { type: 'blob', fileHash: '123', path: '123.js' },
+          312: { type: 'blob', fileHash: '312', path: '312.js' },
+        };
       });
 
-      expect(wrapper.findComponent(DiffFile).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'DynamicScroller' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'DynamicScroller' }).props('items')).toBe(
+        store.state.diffs.diffFiles,
+      );
     });
 
     it("doesn't render tree list when no changes exist", () => {
@@ -592,7 +591,7 @@ describe('diffs/components/app', () => {
 
     it('should render tree list', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
+        state.diffs.treeEntries = { 111: { type: 'blob', fileHash: '111', path: '111.js' } };
       });
 
       expect(wrapper.findComponent(TreeList).exists()).toBe(true);
@@ -606,7 +605,7 @@ describe('diffs/components/app', () => {
 
     it('calls setShowTreeList when only 1 file', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles.push({ sha: '123' });
+        state.diffs.treeEntries = { 123: { type: 'blob', fileHash: '123' } };
       });
       jest.spyOn(store, 'dispatch');
       wrapper.vm.setTreeDisplay();
@@ -617,10 +616,12 @@ describe('diffs/components/app', () => {
       });
     });
 
-    it('calls setShowTreeList with true when more than 1 file is in diffs array', () => {
+    it('calls setShowTreeList with true when more than 1 file is in tree entries map', () => {
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles.push({ sha: '123' });
-        state.diffs.diffFiles.push({ sha: '124' });
+        state.diffs.treeEntries = {
+          111: { type: 'blob', fileHash: '111', path: '111.js' },
+          123: { type: 'blob', fileHash: '123', path: '123.js' },
+        };
       });
       jest.spyOn(store, 'dispatch');
 
@@ -640,7 +641,7 @@ describe('diffs/components/app', () => {
       localStorage.setItem('mr_tree_show', showTreeList);
 
       createComponent({}, ({ state }) => {
-        state.diffs.diffFiles.push({ sha: '123' });
+        state.diffs.treeEntries['123'] = { sha: '123' };
       });
       jest.spyOn(store, 'dispatch');
 
@@ -656,7 +657,10 @@ describe('diffs/components/app', () => {
   describe('file-by-file', () => {
     it('renders a single diff', async () => {
       createComponent({ fileByFileUserPreference: true }, ({ state }) => {
-        state.diffs.diffFiles.push({ file_hash: '123' });
+        state.diffs.treeEntries = {
+          123: { type: 'blob', fileHash: '123' },
+          312: { type: 'blob', fileHash: '312' },
+        };
         state.diffs.diffFiles.push({ file_hash: '312' });
       });
 
@@ -671,7 +675,10 @@ describe('diffs/components/app', () => {
 
       it('sets previous button as disabled', async () => {
         createComponent({ fileByFileUserPreference: true }, ({ state }) => {
-          state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
+          state.diffs.treeEntries = {
+            123: { type: 'blob', fileHash: '123' },
+            312: { type: 'blob', fileHash: '312' },
+          };
         });
 
         await nextTick();
@@ -682,7 +689,10 @@ describe('diffs/components/app', () => {
 
       it('sets next button as disabled', async () => {
         createComponent({ fileByFileUserPreference: true }, ({ state }) => {
-          state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
+          state.diffs.treeEntries = {
+            123: { type: 'blob', fileHash: '123' },
+            312: { type: 'blob', fileHash: '312' },
+          };
           state.diffs.currentDiffFileId = '312';
         });
 
@@ -694,7 +704,7 @@ describe('diffs/components/app', () => {
 
       it("doesn't display when there's fewer than 2 files", async () => {
         createComponent({ fileByFileUserPreference: true }, ({ state }) => {
-          state.diffs.diffFiles.push({ file_hash: '123' });
+          state.diffs.treeEntries = { 123: { type: 'blob', fileHash: '123' } };
           state.diffs.currentDiffFileId = '123';
         });
 
@@ -711,7 +721,10 @@ describe('diffs/components/app', () => {
         'calls navigateToDiffFileIndex with $index when $link is clicked',
         async ({ currentDiffFileId, targetFile }) => {
           createComponent({ fileByFileUserPreference: true }, ({ state }) => {
-            state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' });
+            state.diffs.treeEntries = {
+              123: { type: 'blob', fileHash: '123' },
+              312: { type: 'blob', fileHash: '312' },
+            };
             state.diffs.currentDiffFileId = currentDiffFileId;
           });
 
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index eca5b536a35..ae40f6c898d 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
@@ -45,10 +45,6 @@ describe('CollapsedFilesWarning', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there is more than one file', () => {
     it.each`
       present  | dismissed
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index 08be3fa2745..4b4b6351d3f 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -41,11 +41,6 @@ describe('diffs/components/commit_item', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default state', () => {
     beforeEach(() => {
       mountComponent();
diff --git a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
index 09128b04caa..785ff537777 100644
--- a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
+++ b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js
@@ -38,11 +38,6 @@ describe('CompareDropdownLayout', () => {
       isActive: listItem.classes().includes('is-active'),
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with versions', () => {
     beforeEach(() => {
       const versions = [
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js
index 21f3ee26bf8..23da1a3601b 100644
--- a/spec/frontend/diffs/components/compare_versions_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_spec.js
@@ -58,11 +58,6 @@ describe('CompareVersions', () => {
     store.state.diffs.mergeRequestDiffs = diffsMockData;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('template', () => {
     beforeEach(() => {
       createWrapper({}, {}, false);
diff --git a/spec/frontend/diffs/components/diff_code_quality_spec.js b/spec/frontend/diffs/components/diff_code_quality_spec.js
index 7bd9afab648..e5ca90eb7c8 100644
--- a/spec/frontend/diffs/components/diff_code_quality_spec.js
+++ b/spec/frontend/diffs/components/diff_code_quality_spec.js
@@ -11,10 +11,6 @@ const findIcon = () => wrapper.findComponent(GlIcon);
 const findHeading = () => wrapper.findByTestId(`diff-codequality-findings-heading`);
 
 describe('DiffCodeQuality', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createWrapper = (codeQuality, mountFunction = mountExtended) => {
     return mountFunction(DiffCodeQuality, {
       propsData: {
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index 0bce6451ce4..3524973278c 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -93,11 +93,6 @@ describe('DiffContent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with text based files', () => {
     afterEach(() => {
       [isParallelViewGetterMock, isInlineViewGetterMock].forEach((m) => m.mockRestore());
diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
index bf4a1a1c1f7..348439d6006 100644
--- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js
+++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
@@ -26,10 +26,6 @@ describe('DiffDiscussionReply', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('if user can reply', () => {
     beforeEach(() => {
       getters = {
diff --git a/spec/frontend/diffs/components/diff_discussions_spec.js b/spec/frontend/diffs/components/diff_discussions_spec.js
index 5092ae6ab6e..73d9f2d6d45 100644
--- a/spec/frontend/diffs/components/diff_discussions_spec.js
+++ b/spec/frontend/diffs/components/diff_discussions_spec.js
@@ -25,10 +25,6 @@ describe('DiffDiscussions', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('should have notes list', () => {
       createComponent();
diff --git a/spec/frontend/diffs/components/diff_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js
index c23eb2f3d24..4515a8e8926 100644
--- a/spec/frontend/diffs/components/diff_file_header_spec.js
+++ b/spec/frontend/diffs/components/diff_file_header_spec.js
@@ -72,8 +72,6 @@ describe('DiffFileHeader component', () => {
       diffHasExpandedDiscussionsResultMock,
       ...Object.values(mockStoreConfig.modules.diffs.actions),
     ].forEach((mock) => mock.mockReset());
-
-    wrapper.destroy();
   });
 
   const findHeader = () => wrapper.findComponent({ ref: 'header' });
diff --git a/spec/frontend/diffs/components/diff_file_row_spec.js b/spec/frontend/diffs/components/diff_file_row_spec.js
index c5b76551fcc..66ee4e955b8 100644
--- a/spec/frontend/diffs/components/diff_file_row_spec.js
+++ b/spec/frontend/diffs/components/diff_file_row_spec.js
@@ -13,10 +13,6 @@ describe('Diff File Row component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders file row component', () => {
     const sharedProps = {
       level: 4,
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index ccfc36f8f16..93698396450 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -129,8 +129,6 @@ describe('DiffFile', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     axiosMock.restore();
   });
 
@@ -222,21 +220,10 @@ describe('DiffFile', () => {
 
   describe('computed', () => {
     describe('showLocalFileReviews', () => {
-      let gon;
-
       function setLoggedIn(bool) {
         window.gon.current_user_id = bool;
       }
 
-      beforeAll(() => {
-        gon = window.gon;
-        window.gon = {};
-      });
-
-      afterEach(() => {
-        window.gon = gon;
-      });
-
       it.each`
         loggedIn | bool
         ${true}  | ${true}
diff --git a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js
index f13988fc11f..5f2b1a81b91 100644
--- a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js
+++ b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js
@@ -21,10 +21,6 @@ describe('DiffGutterAvatars', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when expanded', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index a7a95ed2f35..356c7ef925a 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -89,10 +89,6 @@ describe('DiffRow', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
-    window.gon = {};
     showCommentForm.mockReset();
     enterdragging.mockReset();
     stopdragging.mockReset();
diff --git a/spec/frontend/diffs/components/hidden_files_warning_spec.js b/spec/frontend/diffs/components/hidden_files_warning_spec.js
index bbd4f5faeec..d9359fb3c7b 100644
--- a/spec/frontend/diffs/components/hidden_files_warning_spec.js
+++ b/spec/frontend/diffs/components/hidden_files_warning_spec.js
@@ -23,10 +23,6 @@ describe('HiddenFilesWarning', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a correct plain diff URL', () => {
     const plainDiffLink = wrapper.findAllComponents(GlButton).at(0);
 
diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js
index ccf942bdcef..18901781587 100644
--- a/spec/frontend/diffs/components/image_diff_overlay_spec.js
+++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js
@@ -36,10 +36,6 @@ describe('Diffs image diff overlay component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders comment badges', () => {
     createComponent();
 
diff --git a/spec/frontend/diffs/components/merge_conflict_warning_spec.js b/spec/frontend/diffs/components/merge_conflict_warning_spec.js
index 4e47249f5b4..715912b361f 100644
--- a/spec/frontend/diffs/components/merge_conflict_warning_spec.js
+++ b/spec/frontend/diffs/components/merge_conflict_warning_spec.js
@@ -25,10 +25,6 @@ describe('MergeConflictWarning', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     present  | resolutionPath
     ${false} | ${''}
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index dbfe9770e07..e637b1dd43d 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -34,11 +34,6 @@ describe('Diff no changes empty state', () => {
     store.state.diffs.mergeRequestDiffs = diffsMockData;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findMessage = () => wrapper.find('[data-testid="no-changes-message"]');
 
   it('prevents XSS', () => {
diff --git a/spec/frontend/diffs/components/settings_dropdown_spec.js b/spec/frontend/diffs/components/settings_dropdown_spec.js
index 2ec11ba86fd..3d2bbe43746 100644
--- a/spec/frontend/diffs/components/settings_dropdown_spec.js
+++ b/spec/frontend/diffs/components/settings_dropdown_spec.js
@@ -39,7 +39,6 @@ describe('Diff settings dropdown component', () => {
 
   afterEach(() => {
     store.dispatch.mockRestore();
-    wrapper.destroy();
   });
 
   describe('tree view buttons', () => {
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 1656eaf8ba0..87c638d065a 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -1,20 +1,36 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import TreeList from '~/diffs/components/tree_list.vue';
 import createStore from '~/diffs/store/modules';
-import FileTree from '~/vue_shared/components/file_tree.vue';
+import DiffFileRow from '~/diffs/components//diff_file_row.vue';
+import { stubComponent } from 'helpers/stub_component';
 
 describe('Diffs tree list component', () => {
   let wrapper;
   let store;
-  const getFileRows = () => wrapper.findAll('.file-row');
+  const getScroller = () => wrapper.findComponent({ name: 'RecycleScroller' });
+  const getFileRow = () => wrapper.findComponent(DiffFileRow);
   Vue.use(Vuex);
 
-  const createComponent = (mountFn = mount) => {
-    wrapper = mountFn(TreeList, {
+  const createComponent = () => {
+    wrapper = shallowMount(TreeList, {
       store,
       propsData: { hideFileStats: false },
+      stubs: {
+        // eslint will fail if we import the real component
+        RecycleScroller: stubComponent(
+          {
+            name: 'RecycleScroller',
+            props: {
+              items: null,
+            },
+          },
+          {
+            template: '<div><slot :item="{ tree: [] }"></slot></div>',
+          },
+        ),
+      },
     });
   };
 
@@ -80,10 +96,6 @@ describe('Diffs tree list component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
@@ -101,26 +113,32 @@ describe('Diffs tree list component', () => {
     });
 
     describe('search by file extension', () => {
+      it('hides scroller for no matches', async () => {
+        wrapper.find('[data-testid="diff-tree-search"]').setValue('*.md');
+
+        await nextTick();
+
+        expect(getScroller().exists()).toBe(false);
+        expect(wrapper.text()).toContain('No files found');
+      });
+
       it.each`
         extension       | itemSize
-        ${'*.md'}       | ${0}
-        ${'*.js'}       | ${1}
-        ${'index.js'}   | ${1}
-        ${'app/*.js'}   | ${1}
-        ${'*.js, *.rb'} | ${2}
+        ${'*.js'}       | ${2}
+        ${'index.js'}   | ${2}
+        ${'app/*.js'}   | ${2}
+        ${'*.js, *.rb'} | ${3}
       `('returns $itemSize item for $extension', async ({ extension, itemSize }) => {
         wrapper.find('[data-testid="diff-tree-search"]').setValue(extension);
 
         await nextTick();
 
-        expect(getFileRows()).toHaveLength(itemSize);
+        expect(getScroller().props('items')).toHaveLength(itemSize);
       });
     });
 
     it('renders tree', () => {
-      expect(getFileRows()).toHaveLength(2);
-      expect(getFileRows().at(0).html()).toContain('index.js');
-      expect(getFileRows().at(1).html()).toContain('app');
+      expect(getScroller().props('items')).toHaveLength(2);
     });
 
     it('hides file stats', async () => {
@@ -133,33 +151,16 @@ describe('Diffs tree list component', () => {
     it('calls toggleTreeOpen when clicking folder', () => {
       jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
 
-      getFileRows().at(1).trigger('click');
+      getFileRow().vm.$emit('toggleTreeOpen', 'app');
 
       expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
     });
 
-    it('calls scrollToFile when clicking blob', () => {
-      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
-
-      wrapper.find('.file-row').trigger('click');
-
-      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', {
-        path: 'app/index.js',
-      });
-    });
-
-    it('renders as file list when renderTreeList is false', async () => {
-      wrapper.vm.$store.state.diffs.renderTreeList = false;
-
-      await nextTick();
-      expect(getFileRows()).toHaveLength(2);
-    });
-
-    it('renders file paths when renderTreeList is false', async () => {
+    it('renders when renderTreeList is false', async () => {
       wrapper.vm.$store.state.diffs.renderTreeList = false;
 
       await nextTick();
-      expect(wrapper.find('.file-row').html()).toContain('index.js');
+      expect(getScroller().props('items')).toHaveLength(3);
     });
   });
 
@@ -172,12 +173,10 @@ describe('Diffs tree list component', () => {
     });
 
     it('passes the viewedDiffFileIds to the FileTree', async () => {
-      createComponent(shallowMount);
+      createComponent();
 
       await nextTick();
-      // Have to use $attrs['viewed-files'] because we are passing down an object
-      // and attributes('') stringifies values (e.g. [object])...
-      expect(wrapper.findComponent(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds);
+      expect(wrapper.findComponent(DiffFileRow).props('viewedFiles')).toBe(viewedDiffFileIds);
     });
   });
 });
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index 78765204322..b00076504e3 100644
--- a/spec/frontend/diffs/store/actions_spec.js
+++ b/spec/frontend/diffs/store/actions_spec.js
@@ -13,7 +13,7 @@ import * as diffActions from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import * as utils from '~/diffs/store/utils';
 import * as treeWorkerUtils from '~/diffs/utils/tree_worker_utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import {
@@ -26,7 +26,7 @@ import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
 import { diffMetadata } from '../mock_data/diff_metadata';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('DiffsStoreActions', () => {
   let mock;
@@ -69,6 +69,7 @@ describe('DiffsStoreActions', () => {
       const endpoint = '/diffs/set/endpoint';
       const endpointMetadata = '/diffs/set/endpoint/metadata';
       const endpointBatch = '/diffs/set/endpoint/batch';
+      const endpointDiffForPath = '/diffs/set/endpoint/path';
       const endpointCoverage = '/diffs/set/coverage_reports';
       const projectPath = '/root/project';
       const dismissEndpoint = '/-/user_callouts';
@@ -83,6 +84,7 @@ describe('DiffsStoreActions', () => {
         {
           endpoint,
           endpointBatch,
+          endpointDiffForPath,
           endpointMetadata,
           endpointCoverage,
           projectPath,
@@ -93,6 +95,7 @@ describe('DiffsStoreActions', () => {
         {
           endpoint: '',
           endpointBatch: '',
+          endpointDiffForPath: '',
           endpointMetadata: '',
           endpointCoverage: '',
           projectPath: '',
@@ -106,6 +109,7 @@ describe('DiffsStoreActions', () => {
               endpoint,
               endpointMetadata,
               endpointBatch,
+              endpointDiffForPath,
               endpointCoverage,
               projectPath,
               dismissEndpoint,
@@ -236,13 +240,17 @@ describe('DiffsStoreActions', () => {
     it('should show no warning on any other status code', async () => {
       mock.onGet(endpointMetadata).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
 
-      await testAction(
-        diffActions.fetchDiffFilesMeta,
-        {},
-        { endpointMetadata, diffViewType: 'inline', showWhitespace: true },
-        [{ type: types.SET_LOADING, payload: true }],
-        [],
-      );
+      try {
+        await testAction(
+          diffActions.fetchDiffFilesMeta,
+          {},
+          { endpointMetadata, diffViewType: 'inline', showWhitespace: true },
+          [{ type: types.SET_LOADING, payload: true }],
+          [],
+        );
+      } catch (error) {
+        expect(error.response.status).toBe(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+      }
 
       expect(createAlert).not.toHaveBeenCalled();
     });
@@ -265,7 +273,7 @@ describe('DiffsStoreActions', () => {
       );
     });
 
-    it('should show flash on API error', async () => {
+    it('should show alert on API error', async () => {
       mock.onGet(endpointCoverage).reply(HTTP_STATUS_BAD_REQUEST);
 
       await testAction(diffActions.fetchCoverageFiles, {}, { endpointCoverage }, [], []);
@@ -389,7 +397,7 @@ describe('DiffsStoreActions', () => {
       return testAction(
         diffActions.assignDiscussionsToDiff,
         [],
-        { diffFiles: [] },
+        { diffFiles: [], flatBlobsList: [] },
         [],
         [{ type: 'setCurrentDiffFileIdFromNote', payload: '123' }],
       );
@@ -1007,20 +1015,14 @@ describe('DiffsStoreActions', () => {
   describe('setShowWhitespace', () => {
     const endpointUpdateUser = 'user/prefs';
     let putSpy;
-    let gon;
 
     beforeEach(() => {
       putSpy = jest.spyOn(axios, 'put');
-      gon = window.gon;
 
       mock.onPut(endpointUpdateUser).reply(HTTP_STATUS_OK, {});
       jest.spyOn(eventHub, '$emit').mockImplementation();
     });
 
-    afterEach(() => {
-      window.gon = gon;
-    });
-
     it('commits SET_SHOW_WHITESPACE', () => {
       return testAction(
         diffActions.setShowWhitespace,
@@ -1393,39 +1395,38 @@ describe('DiffsStoreActions', () => {
   describe('setCurrentDiffFileIdFromNote', () => {
     it('commits SET_CURRENT_DIFF_FILE', () => {
       const commit = jest.fn();
-      const state = { diffFiles: [{ file_hash: '123' }] };
+      const getters = { flatBlobsList: [{ fileHash: '123' }] };
       const rootGetters = {
         getDiscussion: () => ({ diff_file: { file_hash: '123' } }),
         notesById: { 1: { discussion_id: '2' } },
       };
 
-      diffActions.setCurrentDiffFileIdFromNote({ commit, state, rootGetters }, '1');
+      diffActions.setCurrentDiffFileIdFromNote({ commit, getters, rootGetters }, '1');
 
       expect(commit).toHaveBeenCalledWith(types.SET_CURRENT_DIFF_FILE, '123');
     });
 
     it('does not commit SET_CURRENT_DIFF_FILE when discussion has no diff_file', () => {
       const commit = jest.fn();
-      const state = { diffFiles: [{ file_hash: '123' }] };
       const rootGetters = {
         getDiscussion: () => ({ id: '1' }),
         notesById: { 1: { discussion_id: '2' } },
       };
 
-      diffActions.setCurrentDiffFileIdFromNote({ commit, state, rootGetters }, '1');
+      diffActions.setCurrentDiffFileIdFromNote({ commit, rootGetters }, '1');
 
       expect(commit).not.toHaveBeenCalled();
     });
 
     it('does not commit SET_CURRENT_DIFF_FILE when diff file does not exist', () => {
       const commit = jest.fn();
-      const state = { diffFiles: [{ file_hash: '123' }] };
+      const getters = { flatBlobsList: [{ fileHash: '123' }] };
       const rootGetters = {
         getDiscussion: () => ({ diff_file: { file_hash: '124' } }),
         notesById: { 1: { discussion_id: '2' } },
       };
 
-      diffActions.setCurrentDiffFileIdFromNote({ commit, state, rootGetters }, '1');
+      diffActions.setCurrentDiffFileIdFromNote({ commit, getters, rootGetters }, '1');
 
       expect(commit).not.toHaveBeenCalled();
     });
@@ -1436,7 +1437,7 @@ describe('DiffsStoreActions', () => {
       return testAction(
         diffActions.navigateToDiffFileIndex,
         0,
-        { diffFiles: [{ file_hash: '123' }] },
+        { flatBlobsList: [{ fileHash: '123' }] },
         [{ type: types.SET_CURRENT_DIFF_FILE, payload: '123' }],
         [],
       );
diff --git a/spec/frontend/diffs/store/getters_spec.js b/spec/frontend/diffs/store/getters_spec.js
index 2e3a66d5b01..ed7b6699e2c 100644
--- a/spec/frontend/diffs/store/getters_spec.js
+++ b/spec/frontend/diffs/store/getters_spec.js
@@ -288,6 +288,19 @@ describe('Diffs Module Getters', () => {
     });
   });
 
+  describe('isTreePathLoaded', () => {
+    it.each`
+      desc                                         | loaded   | path             | bool
+      ${'the file exists and has been loaded'}     | ${true}  | ${'path/tofile'} | ${true}
+      ${'the file exists and has not been loaded'} | ${false} | ${'path/tofile'} | ${false}
+      ${'the file does not exist'}                 | ${false} | ${'tofile/path'} | ${false}
+    `('returns $bool when $desc', ({ loaded, path, bool }) => {
+      localState.treeEntries['path/tofile'] = { diffLoaded: loaded };
+
+      expect(getters.isTreePathLoaded(localState)(path)).toBe(bool);
+    });
+  });
+
   describe('allBlobs', () => {
     it('returns an array of blobs', () => {
       localState.treeEntries = {
@@ -328,7 +341,11 @@ describe('Diffs Module Getters', () => {
 
   describe('currentDiffIndex', () => {
     it('returns index of currently selected diff in diffList', () => {
-      localState.diffFiles = [{ file_hash: '111' }, { file_hash: '222' }, { file_hash: '333' }];
+      localState.treeEntries = [
+        { type: 'blob', fileHash: '111' },
+        { type: 'blob', fileHash: '222' },
+        { type: 'blob', fileHash: '333' },
+      ];
       localState.currentDiffFileId = '222';
 
       expect(getters.currentDiffIndex(localState)).toEqual(1);
@@ -339,7 +356,11 @@ describe('Diffs Module Getters', () => {
     });
 
     it('returns 0 if no diff is selected yet or diff is not found', () => {
-      localState.diffFiles = [{ file_hash: '111' }, { file_hash: '222' }, { file_hash: '333' }];
+      localState.treeEntries = [
+        { type: 'blob', fileHash: '111' },
+        { type: 'blob', fileHash: '222' },
+        { type: 'blob', fileHash: '333' },
+      ];
       localState.currentDiffFileId = '';
 
       expect(getters.currentDiffIndex(localState)).toEqual(0);
diff --git a/spec/frontend/diffs/store/mutations_spec.js b/spec/frontend/diffs/store/mutations_spec.js
index 031e4fe2be2..ed8d7397bbc 100644
--- a/spec/frontend/diffs/store/mutations_spec.js
+++ b/spec/frontend/diffs/store/mutations_spec.js
@@ -93,15 +93,20 @@ describe('DiffsStoreMutations', () => {
 
   describe('SET_DIFF_DATA_BATCH_DATA', () => {
     it('should set diff data batch type properly', () => {
-      const state = { diffFiles: [] };
+      const mockFile = getDiffFileMock();
+      const state = {
+        diffFiles: [],
+        treeEntries: { [mockFile.file_path]: { fileHash: mockFile.file_hash } },
+      };
       const diffMock = {
-        diff_files: [getDiffFileMock()],
+        diff_files: [mockFile],
       };
 
       mutations[types.SET_DIFF_DATA_BATCH](state, diffMock);
 
       expect(state.diffFiles[0].renderIt).toEqual(true);
       expect(state.diffFiles[0].collapsed).toEqual(false);
+      expect(state.treeEntries[mockFile.file_path].diffLoaded).toBe(true);
     });
   });
 
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index b5c44b084d8..4760a8b7166 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -892,4 +892,61 @@ describe('DiffsStoreUtils', () => {
       expect(files[6].right).toBeNull();
     });
   });
+
+  describe('isUrlHashNoteLink', () => {
+    it.each`
+      input            | bool
+      ${'#note_12345'} | ${true}
+      ${'#12345'}      | ${false}
+      ${'note_12345'}  | ${true}
+      ${'12345'}       | ${false}
+    `('returns $bool for $input', ({ bool, input }) => {
+      expect(utils.isUrlHashNoteLink(input)).toBe(bool);
+    });
+  });
+
+  describe('isUrlHashFileHeader', () => {
+    it.each`
+      input                    | bool
+      ${'#diff-content-12345'} | ${true}
+      ${'#12345'}              | ${false}
+      ${'diff-content-12345'}  | ${true}
+      ${'12345'}               | ${false}
+    `('returns $bool for $input', ({ bool, input }) => {
+      expect(utils.isUrlHashFileHeader(input)).toBe(bool);
+    });
+  });
+
+  describe('parseUrlHashAsFileHash', () => {
+    it.each`
+      input                                          | currentDiffId | resultId
+      ${'#note_12345'}                               | ${'1A2B3C'}   | ${'1A2B3C'}
+      ${'note_12345'}                                | ${'1A2B3C'}   | ${'1A2B3C'}
+      ${'#note_12345'}                               | ${undefined}  | ${null}
+      ${'note_12345'}                                | ${undefined}  | ${null}
+      ${'#diff-content-12345'}                       | ${undefined}  | ${'12345'}
+      ${'diff-content-12345'}                        | ${undefined}  | ${'12345'}
+      ${'#diff-content-12345'}                       | ${'98765'}    | ${'12345'}
+      ${'diff-content-12345'}                        | ${'98765'}    | ${'12345'}
+      ${'#e334a2a10f036c00151a04cea7938a5d4213a818'} | ${undefined}  | ${'e334a2a10f036c00151a04cea7938a5d4213a818'}
+      ${'e334a2a10f036c00151a04cea7938a5d4213a818'}  | ${undefined}  | ${'e334a2a10f036c00151a04cea7938a5d4213a818'}
+      ${'#Z334a2a10f036c00151a04cea7938a5d4213a818'} | ${undefined}  | ${null}
+      ${'Z334a2a10f036c00151a04cea7938a5d4213a818'}  | ${undefined}  | ${null}
+    `('returns $resultId for $input and $currentDiffId', ({ input, currentDiffId, resultId }) => {
+      expect(utils.parseUrlHashAsFileHash(input, currentDiffId)).toBe(resultId);
+    });
+  });
+
+  describe('markTreeEntriesLoaded', () => {
+    it.each`
+      desc                                                               | entries                                            | loaded                   | outcome
+      ${'marks an existing entry as loaded'}                             | ${{ abc: {} }}                                     | ${[{ new_path: 'abc' }]} | ${{ abc: { diffLoaded: true } }}
+      ${'does nothing if the new file is not found in the tree entries'} | ${{ abc: {} }}                                     | ${[{ new_path: 'def' }]} | ${{ abc: {} }}
+      ${'leaves entries unmodified if they are not in the loaded files'} | ${{ abc: {}, def: { diffLoaded: true }, ghi: {} }} | ${[{ new_path: 'ghi' }]} | ${{ abc: {}, def: { diffLoaded: true }, ghi: { diffLoaded: true } }}
+    `('$desc', ({ entries, loaded, outcome }) => {
+      expect(utils.markTreeEntriesLoaded({ priorEntries: entries, loadedFiles: loaded })).toEqual(
+        outcome,
+      );
+    });
+  });
 });
diff --git a/spec/frontend/diffs/utils/tree_worker_utils_spec.js b/spec/frontend/diffs/utils/tree_worker_utils_spec.js
index 4df5fe75004..b8bd4fcd081 100644
--- a/spec/frontend/diffs/utils/tree_worker_utils_spec.js
+++ b/spec/frontend/diffs/utils/tree_worker_utils_spec.js
@@ -75,8 +75,13 @@ describe('~/diffs/utils/tree_worker_utils', () => {
             {
               addedLines: 0,
               changed: true,
+              diffLoaded: false,
               deleted: false,
               fileHash: 'test',
+              filePaths: {
+                new: 'app/index.js',
+                old: undefined,
+              },
               key: 'app/index.js',
               name: 'index.js',
               parentPath: 'app/',
@@ -97,8 +102,13 @@ describe('~/diffs/utils/tree_worker_utils', () => {
                 {
                   addedLines: 0,
                   changed: true,
+                  diffLoaded: false,
                   deleted: false,
                   fileHash: 'test',
+                  filePaths: {
+                    new: 'app/test/index.js',
+                    old: undefined,
+                  },
                   key: 'app/test/index.js',
                   name: 'index.js',
                   parentPath: 'app/test/',
@@ -112,8 +122,13 @@ describe('~/diffs/utils/tree_worker_utils', () => {
                 {
                   addedLines: 0,
                   changed: true,
+                  diffLoaded: false,
                   deleted: false,
                   fileHash: 'test',
+                  filePaths: {
+                    new: 'app/test/filepathneedstruncating.js',
+                    old: undefined,
+                  },
                   key: 'app/test/filepathneedstruncating.js',
                   name: 'filepathneedstruncating.js',
                   parentPath: 'app/test/',
@@ -138,8 +153,13 @@ describe('~/diffs/utils/tree_worker_utils', () => {
             {
               addedLines: 42,
               changed: true,
+              diffLoaded: false,
               deleted: false,
               fileHash: 'test',
+              filePaths: {
+                new: 'constructor/test/aFile.js',
+                old: undefined,
+              },
               key: 'constructor/test/aFile.js',
               name: 'aFile.js',
               parentPath: 'constructor/test/',
@@ -160,10 +180,15 @@ describe('~/diffs/utils/tree_worker_utils', () => {
           name: 'submodule @ abcdef123',
           type: 'blob',
           changed: true,
+          diffLoaded: false,
           tempFile: true,
           submodule: true,
           deleted: false,
           fileHash: 'test',
+          filePaths: {
+            new: 'submodule @ abcdef123',
+            old: undefined,
+          },
           addedLines: 1,
           removedLines: 0,
           tree: [],
@@ -175,10 +200,15 @@ describe('~/diffs/utils/tree_worker_utils', () => {
           name: 'package.json',
           type: 'blob',
           changed: true,
+          diffLoaded: false,
           tempFile: false,
           submodule: undefined,
           deleted: true,
           fileHash: 'test',
+          filePaths: {
+            new: 'package.json',
+            old: undefined,
+          },
           addedLines: 0,
           removedLines: 0,
           tree: [],
diff --git a/spec/frontend/drawio/content_editor_facade_spec.js b/spec/frontend/drawio/content_editor_facade_spec.js
new file mode 100644
index 00000000000..673968bac9f
--- /dev/null
+++ b/spec/frontend/drawio/content_editor_facade_spec.js
@@ -0,0 +1,138 @@
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { create } from '~/drawio/content_editor_facade';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
+import axios from '~/lib/utils/axios_utils';
+import { PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML } from '../content_editor/test_constants';
+import { createTestEditor } from '../content_editor/test_utils';
+
+describe('drawio/contentEditorFacade', () => {
+  let tiptapEditor;
+  let axiosMock;
+  let contentEditorFacade;
+  let assetResolver;
+  const imageURL = '/group1/project1/-/wikis/test-file.drawio.svg';
+  const diagramSvg = '<svg></svg>';
+  const contentType = 'image/svg+xml';
+  const filename = 'test-file.drawio.svg';
+  const uploadsPath = '/uploads';
+  const canonicalSrc = '/new-diagram.drawio.svg';
+  const src = `/uploads${canonicalSrc}`;
+
+  beforeEach(() => {
+    assetResolver = {
+      resolveUrl: jest.fn(),
+    };
+    tiptapEditor = createTestEditor({ extensions: [DrawioDiagram] });
+    contentEditorFacade = create({
+      tiptapEditor,
+      drawioNodeName: DrawioDiagram.name,
+      uploadsPath,
+      assetResolver,
+    });
+  });
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    tiptapEditor.destroy();
+  });
+
+  describe('getDiagram', () => {
+    describe('when there is a selected diagram', () => {
+      beforeEach(() => {
+        tiptapEditor
+          .chain()
+          .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML)
+          .setNodeSelection(1)
+          .run();
+        axiosMock
+          .onGet(imageURL)
+          .reply(HTTP_STATUS_OK, diagramSvg, { 'content-type': contentType });
+      });
+
+      it('returns diagram information', async () => {
+        const diagram = await contentEditorFacade.getDiagram();
+
+        expect(diagram).toEqual({
+          diagramURL: imageURL,
+          filename,
+          diagramSvg,
+          contentType,
+        });
+      });
+    });
+
+    describe('when there is not a selected diagram', () => {
+      beforeEach(() => {
+        tiptapEditor.chain().setContent('<p>text</p>').setNodeSelection(1).run();
+      });
+
+      it('returns null', async () => {
+        const diagram = await contentEditorFacade.getDiagram();
+
+        expect(diagram).toBe(null);
+      });
+    });
+  });
+
+  describe('updateDiagram', () => {
+    beforeEach(() => {
+      tiptapEditor
+        .chain()
+        .setContent(PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML)
+        .setNodeSelection(1)
+        .run();
+
+      assetResolver.resolveUrl.mockReturnValueOnce(src);
+      contentEditorFacade.updateDiagram({ uploadResults: { file_path: canonicalSrc } });
+    });
+
+    it('updates selected diagram diagram node src and canonicalSrc', () => {
+      tiptapEditor.commands.setNodeSelection(1);
+      expect(tiptapEditor.state.selection.node.attrs).toMatchObject({
+        src,
+        canonicalSrc,
+      });
+    });
+  });
+
+  describe('insertDiagram', () => {
+    beforeEach(() => {
+      tiptapEditor.chain().setContent('<p></p>').run();
+
+      assetResolver.resolveUrl.mockReturnValueOnce(src);
+      contentEditorFacade.insertDiagram({ uploadResults: { file_path: canonicalSrc } });
+    });
+
+    it('inserts a new draw.io diagram in the document', () => {
+      tiptapEditor.commands.setNodeSelection(1);
+      expect(tiptapEditor.state.selection.node.attrs).toMatchObject({
+        src,
+        canonicalSrc,
+      });
+    });
+  });
+
+  describe('uploadDiagram', () => {
+    it('sends a post request to the uploadsPath containing the diagram svg', async () => {
+      const link = { markdown: '![](diagram.drawio.svg)' };
+      const blob = new Blob([diagramSvg], { type: 'image/svg+xml' });
+      const formData = new FormData();
+
+      formData.append('file', blob, filename);
+
+      axiosMock.onPost(uploadsPath, formData).reply(HTTP_STATUS_OK, {
+        data: {
+          link,
+        },
+      });
+
+      const response = await contentEditorFacade.uploadDiagram({ diagramSvg, filename });
+
+      expect(response).not.toBe(link);
+    });
+  });
+});
diff --git a/spec/frontend/drawio/drawio_editor_spec.js b/spec/frontend/drawio/drawio_editor_spec.js
new file mode 100644
index 00000000000..5ef26c04204
--- /dev/null
+++ b/spec/frontend/drawio/drawio_editor_spec.js
@@ -0,0 +1,479 @@
+import { launchDrawioEditor } from '~/drawio/drawio_editor';
+import {
+  DRAWIO_EDITOR_URL,
+  DRAWIO_FRAME_ID,
+  DIAGRAM_BACKGROUND_COLOR,
+  DRAWIO_IFRAME_TIMEOUT,
+  DIAGRAM_MAX_SIZE,
+} from '~/drawio/constants';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
+
+jest.mock('~/alert');
+
+jest.useFakeTimers();
+
+describe('drawio/drawio_editor', () => {
+  let editorFacade;
+  let drawioIFrameReceivedMessages;
+  const diagramURL = `${window.location.origin}/uploads/diagram.drawio.svg`;
+  const testSvg = '<svg></svg>';
+  const testEncodedSvg = `data:image/svg+xml;base64,${btoa(testSvg)}`;
+  const filename = 'diagram.drawio.svg';
+
+  const findDrawioIframe = () => document.getElementById(DRAWIO_FRAME_ID);
+  const waitForDrawioIFrameMessage = ({ messageNumber = 1 } = {}) =>
+    new Promise((resolve) => {
+      let messageCounter = 0;
+      const iframe = findDrawioIframe();
+
+      iframe?.contentWindow.addEventListener('message', (event) => {
+        drawioIFrameReceivedMessages.push(event);
+
+        messageCounter += 1;
+
+        if (messageCounter === messageNumber) {
+          resolve();
+        }
+      });
+    });
+  const expectDrawioIframeMessage = ({ expectation, messageNumber = 1 }) => {
+    expect(drawioIFrameReceivedMessages).toHaveLength(messageNumber);
+    expect(JSON.parse(drawioIFrameReceivedMessages[messageNumber - 1].data)).toEqual(expectation);
+  };
+  const postMessageToParentWindow = (data) => {
+    const event = new Event('message');
+
+    Object.setPrototypeOf(event, {
+      source: findDrawioIframe().contentWindow,
+      data: JSON.stringify(data),
+    });
+
+    window.dispatchEvent(event);
+  };
+
+  beforeEach(() => {
+    editorFacade = {
+      getDiagram: jest.fn(),
+      uploadDiagram: jest.fn(),
+      insertDiagram: jest.fn(),
+      updateDiagram: jest.fn(),
+    };
+    drawioIFrameReceivedMessages = [];
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    findDrawioIframe()?.remove();
+  });
+
+  describe('initializing', () => {
+    beforeEach(() => {
+      launchDrawioEditor({ editorFacade });
+    });
+
+    it('creates the drawio editor iframe and attaches it to the body', () => {
+      expect(findDrawioIframe().getAttribute('src')).toBe(DRAWIO_EDITOR_URL);
+    });
+
+    it('sets drawio-editor classname to the iframe', () => {
+      expect(findDrawioIframe().classList).toContain('drawio-editor');
+    });
+  });
+
+  describe(`when parent window does not receive configure event after ${DRAWIO_IFRAME_TIMEOUT} ms`, () => {
+    beforeEach(() => {
+      launchDrawioEditor({ editorFacade });
+    });
+
+    it('disposes draw.io iframe', () => {
+      expect(findDrawioIframe()).not.toBe(null);
+      jest.runAllTimers();
+      expect(findDrawioIframe()).toBe(null);
+    });
+
+    it('displays an alert indicating that the draw.io editor could not be loaded', () => {
+      jest.runAllTimers();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: 'The diagrams.net editor could not be loaded.',
+      });
+    });
+  });
+
+  describe('when parent window receives configure event', () => {
+    beforeEach(async () => {
+      launchDrawioEditor({ editorFacade });
+      postMessageToParentWindow({ event: 'configure' });
+
+      await waitForDrawioIFrameMessage();
+    });
+
+    it('sends configure action to the draw.io iframe', async () => {
+      expectDrawioIframeMessage({
+        expectation: {
+          action: 'configure',
+          config: {
+            darkColor: '#202020',
+            settingsName: 'gitlab',
+          },
+          colorSchemeMeta: false,
+        },
+      });
+    });
+
+    it('does not remove the iframe after the load error timeouts run', async () => {
+      jest.runAllTimers();
+
+      expect(findDrawioIframe()).not.toBe(null);
+    });
+  });
+
+  describe('when parent window receives init event', () => {
+    describe('when there isn’t a diagram selected', () => {
+      beforeEach(() => {
+        editorFacade.getDiagram.mockResolvedValueOnce(null);
+
+        launchDrawioEditor({ editorFacade });
+
+        postMessageToParentWindow({ event: 'init' });
+      });
+
+      it('sends load action to the draw.io iframe with empty svg and title', async () => {
+        await waitForDrawioIFrameMessage();
+
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'load',
+            xml: null,
+            border: 8,
+            background: DIAGRAM_BACKGROUND_COLOR,
+            dark: false,
+            title: null,
+          },
+        });
+      });
+    });
+
+    describe('when there is a diagram selected', () => {
+      const diagramSvg = '<svg></svg>';
+
+      beforeEach(() => {
+        editorFacade.getDiagram.mockResolvedValueOnce({
+          diagramURL,
+          diagramSvg,
+          filename,
+          contentType: 'image/svg+xml',
+        });
+
+        launchDrawioEditor({ editorFacade });
+        postMessageToParentWindow({ event: 'init' });
+      });
+
+      it('sends load action to the draw.io iframe with the selected diagram svg and filename', async () => {
+        await waitForDrawioIFrameMessage();
+
+        // Step 5: The draw.io editor will send the downloaded diagram to the iframe
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'load',
+            xml: diagramSvg,
+            border: 8,
+            background: DIAGRAM_BACKGROUND_COLOR,
+            dark: false,
+            title: filename,
+          },
+        });
+      });
+
+      it('sets the drawio iframe as visible and resets cursor', async () => {
+        await waitForDrawioIFrameMessage();
+
+        expect(findDrawioIframe().style.visibility).toBe('visible');
+        expect(findDrawioIframe().style.cursor).toBe('');
+      });
+
+      it('scrolls window to the top', async () => {
+        await waitForDrawioIFrameMessage();
+
+        expect(window.scrollX).toBe(0);
+      });
+    });
+
+    describe.each`
+      description | errorMessage | diagram
+      ${'when there is an image selected that is not an svg file'} | ${'The selected image is not a valid SVG diagram'} | ${{
+  diagramURL,
+  contentType: 'image/png',
+  filename: 'image.png',
+}}
+      ${'when the selected image is not an asset upload'} | ${'The selected image is not an asset uploaded in the application'} | ${{
+  diagramSvg: '<svg></svg>',
+  filename,
+  contentType: 'image/svg+xml',
+  diagramURL: 'https://example.com/image.drawio.svg',
+}}
+      ${'when the selected image is too large'} | ${'The selected image is too large.'} | ${{
+  diagramSvg: 'x'.repeat(DIAGRAM_MAX_SIZE + 1),
+  filename,
+  contentType: 'image/svg+xml',
+  diagramURL,
+}}
+    `('$description', ({ errorMessage, diagram }) => {
+      beforeEach(() => {
+        editorFacade.getDiagram.mockResolvedValueOnce(diagram);
+
+        launchDrawioEditor({ editorFacade });
+
+        postMessageToParentWindow({ event: 'init' });
+      });
+
+      it('displays an error alert indicating that the image is not a diagram', async () => {
+        expect(createAlert).toHaveBeenCalledWith({
+          message: errorMessage,
+          error: expect.any(Error),
+        });
+      });
+
+      it('disposes the draw.io diagram iframe', () => {
+        expect(findDrawioIframe()).toBe(null);
+      });
+    });
+
+    describe('when loading a diagram fails', () => {
+      beforeEach(() => {
+        editorFacade.getDiagram.mockRejectedValueOnce(new Error());
+
+        launchDrawioEditor({ editorFacade });
+
+        postMessageToParentWindow({ event: 'init' });
+      });
+
+      it('displays an error alert indicating the failure', async () => {
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'Cannot load the diagram into the diagrams.net editor',
+          error: expect.any(Error),
+        });
+      });
+
+      it('disposes the draw.io diagram iframe', () => {
+        expect(findDrawioIframe()).toBe(null);
+      });
+    });
+  });
+
+  describe('when parent window receives prompt event', () => {
+    describe('when the filename is empty', () => {
+      beforeEach(() => {
+        launchDrawioEditor({ editorFacade });
+
+        postMessageToParentWindow({ event: 'prompt', value: '' });
+      });
+
+      it('sends prompt action to the draw.io iframe requesting a filename', async () => {
+        await waitForDrawioIFrameMessage({ messageNumber: 1 });
+
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'prompt',
+            titleKey: 'filename',
+            okKey: 'save',
+            defaultValue: 'diagram.drawio.svg',
+          },
+          messageNumber: 1,
+        });
+      });
+
+      it('sends dialog action to the draw.io iframe indicating that the filename cannot be empty', async () => {
+        await waitForDrawioIFrameMessage({ messageNumber: 2 });
+
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'dialog',
+            titleKey: 'error',
+            messageKey: 'filenameShort',
+            buttonKey: 'ok',
+          },
+          messageNumber: 2,
+        });
+      });
+    });
+
+    describe('when the event data is not empty', () => {
+      beforeEach(async () => {
+        launchDrawioEditor({ editorFacade });
+        postMessageToParentWindow({ event: 'prompt', value: 'diagram.drawio.svg' });
+
+        await waitForDrawioIFrameMessage();
+      });
+
+      it('starts the saving file process', () => {
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'spinner',
+            show: true,
+            messageKey: 'saving',
+          },
+        });
+      });
+    });
+  });
+
+  describe('when parent receives export event', () => {
+    beforeEach(() => {
+      editorFacade.uploadDiagram.mockResolvedValueOnce({});
+    });
+
+    it('reloads diagram in the draw.io editor', async () => {
+      launchDrawioEditor({ editorFacade });
+      postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+      await waitForDrawioIFrameMessage();
+
+      expectDrawioIframeMessage({
+        expectation: expect.objectContaining({
+          action: 'load',
+          xml: expect.stringContaining(testSvg),
+        }),
+      });
+    });
+
+    it('marks the diagram as modified in the draw.io editor', async () => {
+      launchDrawioEditor({ editorFacade });
+      postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+      await waitForDrawioIFrameMessage({ messageNumber: 2 });
+
+      expectDrawioIframeMessage({
+        expectation: expect.objectContaining({
+          action: 'status',
+          modified: true,
+        }),
+        messageNumber: 2,
+      });
+    });
+
+    describe('when the diagram filename is set', () => {
+      const TEST_FILENAME = 'diagram.drawio.svg';
+
+      beforeEach(() => {
+        launchDrawioEditor({ editorFacade, filename: TEST_FILENAME });
+      });
+
+      it('displays loading spinner in the draw.io editor', async () => {
+        postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+        await waitForDrawioIFrameMessage({ messageNumber: 3 });
+
+        expectDrawioIframeMessage({
+          expectation: {
+            action: 'spinner',
+            show: true,
+            messageKey: 'saving',
+          },
+          messageNumber: 3,
+        });
+      });
+
+      it('uploads exported diagram', async () => {
+        postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+        await waitForDrawioIFrameMessage({ messageNumber: 3 });
+
+        expect(editorFacade.uploadDiagram).toHaveBeenCalledWith({
+          filename: TEST_FILENAME,
+          diagramSvg: expect.stringContaining(testSvg),
+        });
+      });
+
+      describe('when uploading the exported diagram succeeds', () => {
+        it('displays an alert indicating that the diagram was uploaded successfully', async () => {
+          postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+          await waitForDrawioIFrameMessage({ messageNumber: 3 });
+
+          expect(createAlert).toHaveBeenCalledWith({
+            message: expect.any(String),
+            variant: VARIANT_SUCCESS,
+            fadeTransition: true,
+          });
+        });
+
+        it('disposes iframe', () => {
+          jest.runAllTimers();
+
+          expect(findDrawioIframe()).toBe(null);
+        });
+      });
+
+      describe('when uploading the exported diagram fails', () => {
+        const uploadError = new Error();
+
+        beforeEach(() => {
+          editorFacade.uploadDiagram.mockReset();
+          editorFacade.uploadDiagram.mockRejectedValue(uploadError);
+
+          postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+        });
+
+        it('hides loading indicator in the draw.io editor', async () => {
+          await waitForDrawioIFrameMessage({ messageNumber: 4 });
+
+          expectDrawioIframeMessage({
+            expectation: {
+              action: 'spinner',
+              show: false,
+            },
+            messageNumber: 4,
+          });
+        });
+
+        it('displays an error dialog in the draw.io editor', async () => {
+          await waitForDrawioIFrameMessage({ messageNumber: 5 });
+
+          expectDrawioIframeMessage({
+            expectation: {
+              action: 'dialog',
+              titleKey: 'error',
+              modified: true,
+              buttonKey: 'close',
+              messageKey: 'errorSavingFile',
+            },
+            messageNumber: 5,
+          });
+        });
+      });
+    });
+
+    describe('when diagram filename is not set', () => {
+      it('sends prompt action to the draw.io iframe', async () => {
+        launchDrawioEditor({ editorFacade });
+        postMessageToParentWindow({ event: 'export', data: testEncodedSvg });
+
+        await waitForDrawioIFrameMessage({ messageNumber: 3 });
+
+        expect(drawioIFrameReceivedMessages[2].data).toEqual(
+          JSON.stringify({
+            action: 'prompt',
+            titleKey: 'filename',
+            okKey: 'save',
+            defaultValue: 'diagram.drawio.svg',
+          }),
+        );
+      });
+    });
+  });
+
+  describe('when parent window receives exit event', () => {
+    beforeEach(() => {
+      launchDrawioEditor({ editorFacade });
+    });
+
+    it('disposes the the draw.io iframe', () => {
+      expect(findDrawioIframe()).not.toBe(null);
+
+      postMessageToParentWindow({ event: 'exit' });
+
+      expect(findDrawioIframe()).toBe(null);
+    });
+  });
+});
diff --git a/spec/frontend/drawio/markdown_field_editor_facade_spec.js b/spec/frontend/drawio/markdown_field_editor_facade_spec.js
new file mode 100644
index 00000000000..e3eafc63839
--- /dev/null
+++ b/spec/frontend/drawio/markdown_field_editor_facade_spec.js
@@ -0,0 +1,148 @@
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { create } from '~/drawio/markdown_field_editor_facade';
+import * as textMarkdown from '~/lib/utils/text_markdown';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import axios from '~/lib/utils/axios_utils';
+
+jest.mock('~/lib/utils/text_markdown');
+
+describe('drawio/textareaMarkdownEditor', () => {
+  let textArea;
+  let textareaMarkdownEditor;
+  let axiosMock;
+
+  const markdownPreviewPath = '/markdown/preview';
+  const imageURL = '/assets/image.png';
+  const diagramMarkdown = '![](image.png)';
+  const diagramSvg = '<svg></svg>';
+  const contentType = 'image/svg+xml';
+  const filename = 'image.png';
+  const newDiagramMarkdown = '![](newdiagram.svg)';
+  const uploadsPath = '/uploads';
+
+  beforeEach(() => {
+    textArea = document.createElement('textarea');
+    textareaMarkdownEditor = create({ textArea, markdownPreviewPath, uploadsPath });
+
+    document.body.appendChild(textArea);
+  });
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    textArea.remove();
+  });
+
+  describe('getDiagram', () => {
+    describe('when there is a selected diagram', () => {
+      beforeEach(() => {
+        textMarkdown.resolveSelectedImage.mockReturnValueOnce({
+          imageURL,
+          imageMarkdown: diagramMarkdown,
+          filename,
+        });
+        axiosMock
+          .onGet(imageURL)
+          .reply(HTTP_STATUS_OK, diagramSvg, { 'content-type': contentType });
+      });
+
+      it('returns diagram information', async () => {
+        const diagram = await textareaMarkdownEditor.getDiagram();
+
+        expect(textMarkdown.resolveSelectedImage).toHaveBeenCalledWith(
+          textArea,
+          markdownPreviewPath,
+        );
+
+        expect(diagram).toEqual({
+          diagramURL: imageURL,
+          diagramMarkdown,
+          filename,
+          diagramSvg,
+          contentType,
+        });
+      });
+    });
+
+    describe('when there is not a selected diagram', () => {
+      beforeEach(() => {
+        textMarkdown.resolveSelectedImage.mockReturnValueOnce(null);
+      });
+
+      it('returns null', async () => {
+        const diagram = await textareaMarkdownEditor.getDiagram();
+
+        expect(textMarkdown.resolveSelectedImage).toHaveBeenCalledWith(
+          textArea,
+          markdownPreviewPath,
+        );
+
+        expect(diagram).toBe(null);
+      });
+    });
+  });
+
+  describe('updateDiagram', () => {
+    beforeEach(() => {
+      jest.spyOn(textArea, 'focus');
+      jest.spyOn(textArea, 'dispatchEvent');
+
+      textArea.value = `diagram ${diagramMarkdown}`;
+
+      textareaMarkdownEditor.updateDiagram({
+        diagramMarkdown,
+        uploadResults: { link: { markdown: newDiagramMarkdown } },
+      });
+    });
+
+    it('focuses the textarea', () => {
+      expect(textArea.focus).toHaveBeenCalled();
+    });
+
+    it('replaces previous diagram markdown with new diagram markdown', () => {
+      expect(textArea.value).toBe(`diagram ${newDiagramMarkdown}`);
+    });
+
+    it('dispatches input event in the textarea', () => {
+      expect(textArea.dispatchEvent).toHaveBeenCalledWith(new Event('input'));
+    });
+  });
+
+  describe('insertDiagram', () => {
+    it('inserts markdown text and replaces any selected markdown in the textarea', () => {
+      textArea.value = `diagram ${diagramMarkdown}`;
+      textArea.setSelectionRange(0, 8);
+
+      textareaMarkdownEditor.insertDiagram({
+        uploadResults: { link: { markdown: newDiagramMarkdown } },
+      });
+
+      expect(textMarkdown.insertMarkdownText).toHaveBeenCalledWith({
+        textArea,
+        text: textArea.value,
+        tag: newDiagramMarkdown,
+        selected: textArea.value.substring(0, 8),
+      });
+    });
+  });
+
+  describe('uploadDiagram', () => {
+    it('sends a post request to the uploadsPath containing the diagram svg', async () => {
+      const link = { markdown: '![](diagram.drawio.svg)' };
+      const blob = new Blob([diagramSvg], { type: 'image/svg+xml' });
+      const formData = new FormData();
+
+      formData.append('file', blob, filename);
+
+      axiosMock.onPost(uploadsPath, formData).reply(HTTP_STATUS_OK, {
+        link,
+      });
+
+      const response = await textareaMarkdownEditor.uploadDiagram({ diagramSvg, filename });
+
+      expect(response).toEqual({ link });
+    });
+  });
+});
diff --git a/spec/frontend/editor/components/helpers.js b/spec/frontend/editor/components/helpers.js
index 12f90390c18..5cc66dd2ae0 100644
--- a/spec/frontend/editor/components/helpers.js
+++ b/spec/frontend/editor/components/helpers.js
@@ -1,4 +1,3 @@
-import { EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants';
 import { apolloProvider } from '~/editor/components/source_editor_toolbar_graphql';
 import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
 
@@ -9,7 +8,7 @@ export const buildButton = (id = 'foo-bar-btn', options = {}) => {
     label: options.label || 'Foo Bar Button',
     icon: options.icon || 'check',
     selected: options.selected || false,
-    group: options.group || EDITOR_TOOLBAR_RIGHT_GROUP,
+    group: options.group,
     onClick: options.onClick || (() => {}),
     category: options.category || 'primary',
     selectedLabel: options.selectedLabel || 'smth',
diff --git a/spec/frontend/editor/components/source_editor_toolbar_button_spec.js b/spec/frontend/editor/components/source_editor_toolbar_button_spec.js
index ff377494312..79692ab4557 100644
--- a/spec/frontend/editor/components/source_editor_toolbar_button_spec.js
+++ b/spec/frontend/editor/components/source_editor_toolbar_button_spec.js
@@ -21,11 +21,6 @@ describe('Source Editor Toolbar button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     const defaultProps = {
       category: 'primary',
diff --git a/spec/frontend/editor/components/source_editor_toolbar_spec.js b/spec/frontend/editor/components/source_editor_toolbar_spec.js
index bead39ca744..f737340a317 100644
--- a/spec/frontend/editor/components/source_editor_toolbar_spec.js
+++ b/spec/frontend/editor/components/source_editor_toolbar_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import SourceEditorToolbar from '~/editor/components/source_editor_toolbar.vue';
 import SourceEditorToolbarButton from '~/editor/components/source_editor_toolbar_button.vue';
-import { EDITOR_TOOLBAR_LEFT_GROUP, EDITOR_TOOLBAR_RIGHT_GROUP } from '~/editor/constants';
+import { EDITOR_TOOLBAR_BUTTON_GROUPS } from '~/editor/constants';
 import getToolbarItemsQuery from '~/editor/graphql/get_items.query.graphql';
 import { buildButton } from './helpers';
 
@@ -40,24 +40,24 @@ describe('Source Editor Toolbar', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     mockApollo = null;
   });
 
   describe('groups', () => {
     it.each`
-      group                         | expectedGroup
-      ${EDITOR_TOOLBAR_LEFT_GROUP}  | ${EDITOR_TOOLBAR_LEFT_GROUP}
-      ${EDITOR_TOOLBAR_RIGHT_GROUP} | ${EDITOR_TOOLBAR_RIGHT_GROUP}
-      ${undefined}                  | ${EDITOR_TOOLBAR_RIGHT_GROUP}
-      ${'non-existing'}             | ${EDITOR_TOOLBAR_RIGHT_GROUP}
+      group                                    | expectedGroup
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.file}     | ${EDITOR_TOOLBAR_BUTTON_GROUPS.file}
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.edit}     | ${EDITOR_TOOLBAR_BUTTON_GROUPS.edit}
+      ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings} | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
+      ${undefined}                             | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
+      ${'non-existing'}                        | ${EDITOR_TOOLBAR_BUTTON_GROUPS.settings}
     `('puts item with group="$group" into $expectedGroup group', ({ group, expectedGroup }) => {
       const item = buildButton('first', {
         group,
       });
       createComponentWithApollo([item]);
       expect(findButtons()).toHaveLength(1);
-      [EDITOR_TOOLBAR_RIGHT_GROUP, EDITOR_TOOLBAR_LEFT_GROUP].forEach((g) => {
+      Object.keys(EDITOR_TOOLBAR_BUTTON_GROUPS).forEach((g) => {
         if (g === expectedGroup) {
           expect(wrapper.vm.getGroupItems(g)).toEqual([expect.objectContaining({ id: 'first' })]);
         } else {
@@ -70,7 +70,7 @@ describe('Source Editor Toolbar', () => {
   describe('buttons update', () => {
     it('properly updates buttons on Apollo cache update', async () => {
       const item = buildButton('first', {
-        group: EDITOR_TOOLBAR_RIGHT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.edit,
       });
       createComponentWithApollo();
 
@@ -95,12 +95,15 @@ describe('Source Editor Toolbar', () => {
   describe('click handler', () => {
     it('emits the "click" event when a button is clicked', () => {
       const item1 = buildButton('first', {
-        group: EDITOR_TOOLBAR_LEFT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.file,
       });
       const item2 = buildButton('second', {
-        group: EDITOR_TOOLBAR_RIGHT_GROUP,
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.edit,
       });
-      createComponentWithApollo([item1, item2]);
+      const item3 = buildButton('third', {
+        group: EDITOR_TOOLBAR_BUTTON_GROUPS.settings,
+      });
+      createComponentWithApollo([item1, item2, item3]);
       jest.spyOn(wrapper.vm, '$emit');
       expect(wrapper.vm.$emit).not.toHaveBeenCalled();
 
@@ -110,7 +113,10 @@ describe('Source Editor Toolbar', () => {
       findButtons().at(1).vm.$emit('click');
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item2);
 
-      expect(wrapper.vm.$emit.mock.calls).toHaveLength(2);
+      findButtons().at(2).vm.$emit('click');
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('click', item3);
+
+      expect(wrapper.vm.$emit.mock.calls).toHaveLength(3);
     });
   });
 });
diff --git a/spec/frontend/editor/schema/ci/ci_schema_spec.js b/spec/frontend/editor/schema/ci/ci_schema_spec.js
index c822a0bfeaf..87208ec7aa8 100644
--- a/spec/frontend/editor/schema/ci/ci_schema_spec.js
+++ b/spec/frontend/editor/schema/ci/ci_schema_spec.js
@@ -33,6 +33,7 @@ import JobWhenYaml from './yaml_tests/positive_tests/job_when.yml';
 import IdTokensYaml from './yaml_tests/positive_tests/id_tokens.yml';
 import HooksYaml from './yaml_tests/positive_tests/hooks.yml';
 import SecretsYaml from './yaml_tests/positive_tests/secrets.yml';
+import ServicesYaml from './yaml_tests/positive_tests/services.yml';
 
 // YAML NEGATIVE TEST
 import ArtifactsNegativeYaml from './yaml_tests/negative_tests/artifacts.yml';
@@ -52,6 +53,7 @@ import VariablesWrongSyntaxUsageExpand from './yaml_tests/negative_tests/variabl
 import IdTokensNegativeYaml from './yaml_tests/negative_tests/id_tokens.yml';
 import HooksNegative from './yaml_tests/negative_tests/hooks.yml';
 import SecretsNegativeYaml from './yaml_tests/negative_tests/secrets.yml';
+import ServicesNegativeYaml from './yaml_tests/negative_tests/services.yml';
 
 const ajv = new Ajv({
   strictTypes: false,
@@ -89,6 +91,7 @@ describe('positive tests', () => {
       VariablesYaml,
       ProjectPathYaml,
       IdTokensYaml,
+      ServicesYaml,
       SecretsYaml,
     }),
   )('schema validates %s', (_, input) => {
@@ -113,10 +116,12 @@ describe('negative tests', () => {
       // YAML
       ArtifactsNegativeYaml,
       CacheKeyNeative,
+      HooksNegative,
       IdTokensNegativeYaml,
       IncludeNegativeYaml,
       JobWhenNegativeYaml,
       RulesNegativeYaml,
+      TriggerNegative,
       VariablesInvalidOptionsYaml,
       VariablesInvalidSyntaxDescYaml,
       VariablesWrongSyntaxUsageExpand,
@@ -126,8 +131,7 @@ describe('negative tests', () => {
       ProjectPathIncludeNoSlashYaml,
       ProjectPathIncludeTailSlashYaml,
       SecretsNegativeYaml,
-      TriggerNegative,
-      HooksNegative,
+      ServicesNegativeYaml,
     }),
   )('schema validates %s', (_, input) => {
     // We construct a new "JSON" from each main key that is inside a
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/services.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/services.yml
new file mode 100644
index 00000000000..6761a603a0a
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/services.yml
@@ -0,0 +1,38 @@
+empty_services:
+  services:
+
+without_name:
+  services:
+    - alias: db-postgres
+      entrypoint: ["/usr/local/bin/db-postgres"]
+      command: ["start"]
+
+invalid_entrypoint:
+  services:
+    - name: my-postgres:11.7
+      alias: db-postgres
+      entrypoint: "/usr/local/bin/db-postgres" # must be array
+
+empty_entrypoint:
+  services:
+    - name: my-postgres:11.7
+      alias: db-postgres
+      entrypoint: []
+
+invalid_command:
+  services:
+    - name: my-postgres:11.7
+      alias: db-postgres
+      command: "start" # must be array
+
+empty_command:
+  services:
+    - name: my-postgres:11.7
+      alias: db-postgres
+      command: []
+
+empty_pull_policy:
+  script: echo "Multiple pull policies."
+  services:
+    - name: postgres:11.6
+      pull_policy: []
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/services.yml b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/services.yml
new file mode 100644
index 00000000000..8a0f59d1dfd
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/services.yml
@@ -0,0 +1,31 @@
+valid_services_list:
+  services:
+    - php:7
+    - node:latest
+    - golang:1.10
+
+valid_services_object:
+  services:
+    - name: my-postgres:11.7
+      alias: db-postgres
+      entrypoint: ["/usr/local/bin/db-postgres"]
+      command: ["start"]
+
+services_with_variables:
+  services:
+    - name: bitnami/nginx
+      alias: nginx
+      variables:
+        NGINX_HTTP_PORT_NUMBER: ${NGINX_HTTP_PORT_NUMBER}
+
+pull_policy_string:
+  script: echo "A single pull policy."
+  services:
+    - name: postgres:11.6
+      pull_policy: if-not-present
+
+pull_policy_array:
+  script: echo "Multiple pull policies."
+  services:
+    - name: postgres:11.6
+      pull_policy: [always, if-not-present]
diff --git a/spec/frontend/editor/source_editor_ci_schema_ext_spec.js b/spec/frontend/editor/source_editor_ci_schema_ext_spec.js
index 21f8979f1a9..e515285601b 100644
--- a/spec/frontend/editor/source_editor_ci_schema_ext_spec.js
+++ b/spec/frontend/editor/source_editor_ci_schema_ext_spec.js
@@ -17,7 +17,6 @@ describe('~/editor/editor_ci_config_ext', () => {
   let editor;
   let instance;
   let editorEl;
-  let originalGitlabUrl;
 
   const createMockEditor = ({ blobPath = defaultBlobPath } = {}) => {
     setHTMLFixture('<div id="editor"></div>');
@@ -31,16 +30,8 @@ describe('~/editor/editor_ci_config_ext', () => {
     instance.use({ definition: CiSchemaExtension });
   };
 
-  beforeAll(() => {
-    originalGitlabUrl = gon.gitlab_url;
-    gon.gitlab_url = TEST_HOST;
-  });
-
-  afterAll(() => {
-    gon.gitlab_url = originalGitlabUrl;
-  });
-
   beforeEach(() => {
+    gon.gitlab_url = TEST_HOST;
     createMockEditor();
   });
 
diff --git a/spec/frontend/editor/source_editor_extension_base_spec.js b/spec/frontend/editor/source_editor_extension_base_spec.js
index eab39ccaba1..b1b8173188c 100644
--- a/spec/frontend/editor/source_editor_extension_base_spec.js
+++ b/spec/frontend/editor/source_editor_extension_base_spec.js
@@ -7,6 +7,7 @@ import {
   EDITOR_TYPE_DIFF,
   EXTENSION_BASE_LINE_LINK_ANCHOR_CLASS,
   EXTENSION_BASE_LINE_NUMBERS_CLASS,
+  EXTENSION_SOFTWRAP_ID,
 } from '~/editor/constants';
 import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import EditorInstance from '~/editor/source_editor_instance';
@@ -35,8 +36,18 @@ describe('The basis for an Source Editor extension', () => {
       },
     };
   };
-  const createInstance = (baseInstance = {}) => {
-    return new EditorInstance(baseInstance);
+  const baseInstance = {
+    getOption: jest.fn(),
+  };
+
+  const createInstance = (base = baseInstance) => {
+    return new EditorInstance(base);
+  };
+
+  const toolbar = {
+    addItems: jest.fn(),
+    updateItem: jest.fn(),
+    removeItems: jest.fn(),
   };
 
   beforeEach(() => {
@@ -49,6 +60,66 @@ describe('The basis for an Source Editor extension', () => {
     resetHTMLFixture();
   });
 
+  describe('onSetup callback', () => {
+    let instance;
+    beforeEach(() => {
+      instance = createInstance();
+
+      instance.toolbar = toolbar;
+    });
+
+    it('adds correct buttons to the toolbar', () => {
+      instance.use({ definition: SourceEditorExtension });
+      expect(instance.toolbar.addItems).toHaveBeenCalledWith([
+        expect.objectContaining({
+          id: EXTENSION_SOFTWRAP_ID,
+        }),
+      ]);
+    });
+
+    it('does not fail if toolbar is not available', () => {
+      instance.toolbar = null;
+      expect(() => instance.use({ definition: SourceEditorExtension })).not.toThrow();
+    });
+
+    it.each`
+      optionValue  | expectSelected
+      ${'on'}      | ${true}
+      ${'off'}     | ${false}
+      ${'foo'}     | ${false}
+      ${undefined} | ${false}
+      ${null}      | ${false}
+    `(
+      'correctly sets the initial state of the button when wordWrap option is "$optionValue"',
+      ({ optionValue, expectSelected }) => {
+        instance.getOption.mockReturnValue(optionValue);
+        instance.use({ definition: SourceEditorExtension });
+        expect(instance.toolbar.addItems).toHaveBeenCalledWith([
+          expect.objectContaining({
+            selected: expectSelected,
+          }),
+        ]);
+      },
+    );
+  });
+
+  describe('onBeforeUnuse', () => {
+    let instance;
+    let extension;
+
+    beforeEach(() => {
+      instance = createInstance();
+
+      instance.toolbar = toolbar;
+      extension = instance.use({ definition: SourceEditorExtension });
+    });
+    it('removes the registered buttons from the toolbar', () => {
+      expect(instance.toolbar.removeItems).not.toHaveBeenCalled();
+      instance.unuse(extension);
+      expect(instance.toolbar.removeItems).toHaveBeenCalledWith([EXTENSION_SOFTWRAP_ID]);
+    });
+  });
+
   describe('onUse callback', () => {
     it('initializes the line highlighting', () => {
       const instance = createInstance();
@@ -66,6 +137,7 @@ describe('The basis for an Source Editor extension', () => {
       '$description the line linking for $instanceType instance',
       ({ instanceType, shouldBeCalled }) => {
         const instance = createInstance({
+          ...baseInstance,
           getEditorType: jest.fn().mockReturnValue(instanceType),
           onMouseMove: jest.fn(),
           onMouseDown: jest.fn(),
@@ -82,10 +154,44 @@ describe('The basis for an Source Editor extension', () => {
     );
   });
 
+  describe('toggleSoftwrap', () => {
+    let instance;
+
+    beforeEach(() => {
+      instance = createInstance();
+
+      instance.toolbar = toolbar;
+      instance.use({ definition: SourceEditorExtension });
+    });
+
+    it.each`
+      currentWordWrap | newWordWrap | expectSelected
+      ${'on'}         | ${'off'}    | ${false}
+      ${'off'}        | ${'on'}     | ${true}
+      ${'foo'}        | ${'on'}     | ${true}
+      ${undefined}    | ${'on'}     | ${true}
+      ${null}         | ${'on'}     | ${true}
+    `(
+      'correctly updates wordWrap option in editor and the state of the button when currentWordWrap is "$currentWordWrap"',
+      ({ currentWordWrap, newWordWrap, expectSelected }) => {
+        instance.getOption.mockReturnValue(currentWordWrap);
+        instance.updateOptions = jest.fn();
+        instance.toggleSoftwrap();
+        expect(instance.updateOptions).toHaveBeenCalledWith({
+          wordWrap: newWordWrap,
+        });
+        expect(instance.toolbar.updateItem).toHaveBeenCalledWith(EXTENSION_SOFTWRAP_ID, {
+          selected: expectSelected,
+        });
+      },
+    );
+  });
+
   describe('highlightLines', () => {
     const revealSpy = jest.fn();
     const decorationsSpy = jest.fn();
     const instance = createInstance({
+      ...baseInstance,
       revealLineInCenter: revealSpy,
       deltaDecorations: decorationsSpy,
     });
@@ -174,6 +280,7 @@ describe('The basis for an Source Editor extension', () => {
 
     beforeEach(() => {
       instance = createInstance({
+        ...baseInstance,
         deltaDecorations: decorationsSpy,
         lineDecorations,
       });
@@ -188,6 +295,7 @@ describe('The basis for an Source Editor extension', () => {
 
   describe('setupLineLinking', () => {
     const instance = {
+      ...baseInstance,
       onMouseMove: jest.fn(),
       onMouseDown: jest.fn(),
       deltaDecorations: jest.fn(),
diff --git a/spec/frontend/editor/source_editor_markdown_ext_spec.js b/spec/frontend/editor/source_editor_markdown_ext_spec.js
index 33e4b4bfc8e..b226ef03b33 100644
--- a/spec/frontend/editor/source_editor_markdown_ext_spec.js
+++ b/spec/frontend/editor/source_editor_markdown_ext_spec.js
@@ -17,6 +17,7 @@ describe('Markdown Extension for Source Editor', () => {
   const thirdLine = 'string with some **markup**';
   const text = `${firstLine}\n${secondLine}\n${thirdLine}`;
   const markdownPath = 'foo.md';
+  let extensions;
 
   const setSelection = (startLineNumber = 1, startColumn = 1, endLineNumber = 1, endColumn = 1) => {
     const selection = new Range(startLineNumber, startColumn, endLineNumber, endColumn);
@@ -38,7 +39,10 @@ describe('Markdown Extension for Source Editor', () => {
       blobPath: markdownPath,
       blobContent: text,
     });
-    instance.use([{ definition: ToolbarExtension }, { definition: EditorMarkdownExtension }]);
+    extensions = instance.use([
+      { definition: ToolbarExtension },
+      { definition: EditorMarkdownExtension },
+    ]);
   });
 
   afterEach(() => {
@@ -59,6 +63,25 @@ describe('Markdown Extension for Source Editor', () => {
     });
   });
 
+  describe('markdown keystrokes', () => {
+    it('registers all keystrokes as actions', () => {
+      EXTENSION_MARKDOWN_BUTTONS.forEach((button) => {
+        if (button.data.mdShortcuts) {
+          expect(instance.getAction(button.id)).toBeDefined();
+        }
+      });
+    });
+
+    it('disposes all keystrokes on unuse', () => {
+      instance.unuse(extensions[1]);
+      EXTENSION_MARKDOWN_BUTTONS.forEach((button) => {
+        if (button.data.mdShortcuts) {
+          expect(instance.getAction(button.id)).toBeNull();
+        }
+      });
+    });
+  });
+
   describe('getSelectedText', () => {
     it('does not fail if there is no selection and returns the empty string', () => {
       jest.spyOn(instance, 'getSelection');
diff --git a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
index c42ac28c498..895eb87833d 100644
--- a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
+++ b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
@@ -12,14 +12,14 @@ import {
 } from '~/editor/constants';
 import { EditorMarkdownPreviewExtension } from '~/editor/extensions/source_editor_markdown_livepreview_ext';
 import SourceEditor from '~/editor/source_editor';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import syntaxHighlight from '~/syntax_highlight';
 import { spyOnApi } from './helpers';
 
 jest.mock('~/syntax_highlight');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Markdown Live Preview Extension for Source Editor', () => {
   let editor;
diff --git a/spec/frontend/editor/source_editor_webide_ext_spec.js b/spec/frontend/editor/source_editor_webide_ext_spec.js
index f418eab668a..7e4079c17f7 100644
--- a/spec/frontend/editor/source_editor_webide_ext_spec.js
+++ b/spec/frontend/editor/source_editor_webide_ext_spec.js
@@ -13,7 +13,6 @@ describe('Source Editor Web IDE Extension', () => {
     editorEl = document.getElementById('editor');
     editor = new SourceEditor();
   });
-  afterEach(() => {});
 
   describe('onSetup', () => {
     it.each`
diff --git a/spec/frontend/editor/utils_spec.js b/spec/frontend/editor/utils_spec.js
index e561cad1086..13b8a9804b0 100644
--- a/spec/frontend/editor/utils_spec.js
+++ b/spec/frontend/editor/utils_spec.js
@@ -54,19 +54,17 @@ describe('Source Editor utils', () => {
 
   describe('getBlobLanguage', () => {
     it.each`
-      path           | expectedLanguage
-      ${'foo.js'}    | ${'javascript'}
-      ${'foo.js.rb'} | ${'ruby'}
-      ${'foo.bar'}   | ${'plaintext'}
-      ${undefined}   | ${'plaintext'}
-    `(
-      'sets the $expectedThemeName theme when $themeName is set in the user preference',
-      ({ path, expectedLanguage }) => {
-        const language = utils.getBlobLanguage(path);
+      path                | expectedLanguage
+      ${'foo.js'}         | ${'javascript'}
+      ${'foo.js.rb'}      | ${'ruby'}
+      ${'foo.bar'}        | ${'plaintext'}
+      ${undefined}        | ${'plaintext'}
+      ${'foo/bar/foo.js'} | ${'javascript'}
+    `(`returns '$expectedLanguage' for '$path' path`, ({ path, expectedLanguage }) => {
+      const language = utils.getBlobLanguage(path);
 
-        expect(language).toEqual(expectedLanguage);
-      },
-    );
+      expect(language).toEqual(expectedLanguage);
+    });
   });
 
   describe('setupCodeSnipet', () => {
diff --git a/spec/frontend/emoji/components/category_spec.js b/spec/frontend/emoji/components/category_spec.js
index 90816f28d5b..272c1a09a69 100644
--- a/spec/frontend/emoji/components/category_spec.js
+++ b/spec/frontend/emoji/components/category_spec.js
@@ -9,11 +9,12 @@ function factory(propsData = {}) {
   wrapper = shallowMount(Category, { propsData });
 }
 
-describe('Emoji category component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
+const triggerGlIntersectionObserver = () => {
+  wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
+  return nextTick();
+};
 
+describe('Emoji category component', () => {
   beforeEach(() => {
     factory({
       category: 'Activity',
@@ -26,25 +27,19 @@ describe('Emoji category component', () => {
   });
 
   it('renders group', async () => {
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    await wrapper.setData({ renderGroup: true });
+    await triggerGlIntersectionObserver();
 
     expect(wrapper.findComponent(EmojiGroup).attributes('rendergroup')).toBe('true');
   });
 
   it('renders group on appear', async () => {
-    wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
-
-    await nextTick();
+    await triggerGlIntersectionObserver();
 
     expect(wrapper.findComponent(EmojiGroup).attributes('rendergroup')).toBe('true');
   });
 
   it('emits appear event on appear', async () => {
-    wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
-
-    await nextTick();
+    await triggerGlIntersectionObserver();
 
     expect(wrapper.emitted().appear[0]).toEqual(['Activity']);
   });
diff --git a/spec/frontend/emoji/components/emoji_group_spec.js b/spec/frontend/emoji/components/emoji_group_spec.js
index 1aca2fbb8fc..75397ce25ff 100644
--- a/spec/frontend/emoji/components/emoji_group_spec.js
+++ b/spec/frontend/emoji/components/emoji_group_spec.js
@@ -15,10 +15,6 @@ function factory(propsData = {}) {
 }
 
 describe('Emoji group component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not render any buttons', () => {
     factory({
       emojis: [],
diff --git a/spec/frontend/emoji/components/emoji_list_spec.js b/spec/frontend/emoji/components/emoji_list_spec.js
index a72ba614d9f..f6f6062f8e8 100644
--- a/spec/frontend/emoji/components/emoji_list_spec.js
+++ b/spec/frontend/emoji/components/emoji_list_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import EmojiList from '~/emoji/components/emoji_list.vue';
+import waitForPromises from 'helpers/wait_for_promises';
 
 jest.mock('~/emoji', () => ({
   initEmojiMap: jest.fn(() => Promise.resolve()),
@@ -14,7 +14,8 @@ jest.mock('~/emoji', () => ({
 }));
 
 let wrapper;
-async function factory(render, propsData = { searchValue: '' }) {
+
+function factory(propsData = { searchValue: '' }) {
   wrapper = extendedWrapper(
     shallowMount(EmojiList, {
       propsData,
@@ -23,35 +24,23 @@ async function factory(render, propsData = { searchValue: '' }) {
       },
     }),
   );
-
-  // Wait for categories to be set
-  await nextTick();
-
-  if (render) {
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({ render: true });
-
-    // Wait for component to render
-    await nextTick();
-  }
 }
 
 const findDefaultSlot = () => wrapper.findByTestId('default-slot');
 
 describe('Emoji list component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not render until render is set', async () => {
-    await factory(false);
+    factory();
 
     expect(findDefaultSlot().exists()).toBe(false);
+    await waitForPromises();
+    expect(findDefaultSlot().exists()).toBe(true);
   });
 
   it('renders with none filtered list', async () => {
-    await factory(true);
+    factory();
+
+    await waitForPromises();
 
     expect(JSON.parse(findDefaultSlot().text())).toEqual({
       activity: {
@@ -63,7 +52,9 @@ describe('Emoji list component', () => {
   });
 
   it('renders filtered list of emojis', async () => {
-    await factory(true, { searchValue: 'smile' });
+    factory({ searchValue: 'smile' });
+
+    await waitForPromises();
 
     expect(JSON.parse(findDefaultSlot().text())).toEqual({
       search: {
diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js
index 82e3b50aeb8..7b160c48501 100644
--- a/spec/frontend/environment.js
+++ b/spec/frontend/environment.js
@@ -8,6 +8,7 @@ const {
   setGlobalDateToRealDate,
 } = require('./__helpers__/fake_date/fake_date');
 const { TEST_HOST } = require('./__helpers__/test_constants');
+const { createGon } = require('./__helpers__/gon_helper');
 
 const ROOT_PATH = path.resolve(__dirname, '../..');
 
@@ -40,11 +41,12 @@ class CustomEnvironment extends TestEnvironment {
     });
 
     const { IS_EE } = projectConfig.testEnvironmentOptions;
-    this.global.gon = {
-      ee: IS_EE,
-    };
+
     this.global.IS_EE = IS_EE;
 
+    // Set up global `gon` object
+    this.global.gon = createGon(IS_EE);
+
     // Set up global `gl` object
     this.global.gl = {};
 
diff --git a/spec/frontend/environments/canary_ingress_spec.js b/spec/frontend/environments/canary_ingress_spec.js
index 340740e6499..17ecd93361f 100644
--- a/spec/frontend/environments/canary_ingress_spec.js
+++ b/spec/frontend/environments/canary_ingress_spec.js
@@ -23,7 +23,7 @@ describe('/environments/components/canary_ingress.vue', () => {
         ...props,
       },
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
       ...options,
     });
@@ -37,8 +37,6 @@ describe('/environments/components/canary_ingress.vue', () => {
     if (wrapper) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   describe('stable weight', () => {
diff --git a/spec/frontend/environments/canary_update_modal_spec.js b/spec/frontend/environments/canary_update_modal_spec.js
index 31b1770da59..a101ed4e00a 100644
--- a/spec/frontend/environments/canary_update_modal_spec.js
+++ b/spec/frontend/environments/canary_update_modal_spec.js
@@ -34,8 +34,6 @@ describe('/environments/components/canary_update_modal.vue', () => {
     if (wrapper) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   beforeEach(() => {
@@ -47,7 +45,7 @@ describe('/environments/components/canary_update_modal.vue', () => {
       modalId: 'confirm-canary-change',
       actionPrimary: {
         text: 'Change ratio',
-        attributes: [{ variant: 'confirm' }],
+        attributes: { variant: 'confirm' },
       },
       actionCancel: { text: 'Cancel' },
     });
diff --git a/spec/frontend/environments/delete_environment_modal_spec.js b/spec/frontend/environments/delete_environment_modal_spec.js
index cc18bf754eb..96f6ce52a9c 100644
--- a/spec/frontend/environments/delete_environment_modal_spec.js
+++ b/spec/frontend/environments/delete_environment_modal_spec.js
@@ -6,10 +6,10 @@ import { s__, sprintf } from '~/locale';
 import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { resolvedEnvironment } from './graphql/mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 Vue.use(VueApollo);
 
 describe('~/environments/components/delete_environment_modal.vue', () => {
@@ -67,7 +67,7 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
     );
   });
 
-  it('should flash a message on error', async () => {
+  it('should alert a message on error', async () => {
     createComponent({ apolloProvider: mockApollo });
 
     deleteResolver.mockRejectedValue();
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js
index fb1a8b8c00a..34f338fabe6 100644
--- a/spec/frontend/environments/edit_environment_spec.js
+++ b/spec/frontend/environments/edit_environment_spec.js
@@ -3,13 +3,13 @@ import MockAdapter from 'axios-mock-adapter';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import EditEnvironment from '~/environments/components/edit_environment.vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const DEFAULT_OPTS = {
   provide: {
@@ -37,7 +37,6 @@ describe('~/environments/components/edit.vue', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   const findNameInput = () => wrapper.findByLabelText('Name');
diff --git a/spec/frontend/environments/empty_state_spec.js b/spec/frontend/environments/empty_state_spec.js
index 02cf2dc3c68..d067c4c80e0 100644
--- a/spec/frontend/environments/empty_state_spec.js
+++ b/spec/frontend/environments/empty_state_spec.js
@@ -29,10 +29,6 @@ describe('~/environments/components/empty_state.vue', () => {
       provide: { newEnvironmentPath: NEW_PATH },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows an empty state for available environments', () => {
     wrapper = createWrapper();
 
diff --git a/spec/frontend/environments/enable_review_app_modal_spec.js b/spec/frontend/environments/enable_review_app_modal_spec.js
index 7939bd600dc..ee728775980 100644
--- a/spec/frontend/environments/enable_review_app_modal_spec.js
+++ b/spec/frontend/environments/enable_review_app_modal_spec.js
@@ -18,10 +18,6 @@ describe('Enable Review App Modal', () => {
   const findInstructionAt = (i) => wrapper.findAll('ol li').at(i);
   const findCopyString = () => wrapper.find(`#${EXPECTED_COPY_PRE_ID}`);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('renders the modal', () => {
     beforeEach(() => {
       wrapper = extendedWrapper(
diff --git a/spec/frontend/environments/environment_actions_spec.js b/spec/frontend/environments/environment_actions_spec.js
index 48483152f7a..3c9b4144e45 100644
--- a/spec/frontend/environments/environment_actions_spec.js
+++ b/spec/frontend/environments/environment_actions_spec.js
@@ -36,7 +36,7 @@ describe('EnvironmentActions Component', () => {
     wrapper = mountFn(EnvironmentActions, {
       propsData: { actions: [], ...props },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       ...options,
     });
@@ -52,7 +52,6 @@ describe('EnvironmentActions Component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     confirmAction.mockReset();
   });
 
diff --git a/spec/frontend/environments/environment_folder_spec.js b/spec/frontend/environments/environment_folder_spec.js
index a37515bc3f7..279ff32a13d 100644
--- a/spec/frontend/environments/environment_folder_spec.js
+++ b/spec/frontend/environments/environment_folder_spec.js
@@ -35,7 +35,7 @@ describe('~/environments/components/environments_folder.vue', () => {
         ...propsData,
       },
       stubs: { transition: stubTransition() },
-      provide: { helpPagePath: '/help' },
+      provide: { helpPagePath: '/help', projectId: '1' },
     });
 
   beforeEach(async () => {
diff --git a/spec/frontend/environments/environment_form_spec.js b/spec/frontend/environments/environment_form_spec.js
index b9b34bee80f..50e4e637aa3 100644
--- a/spec/frontend/environments/environment_form_spec.js
+++ b/spec/frontend/environments/environment_form_spec.js
@@ -15,19 +15,16 @@ const PROVIDE = { protectedEnvironmentSettingsPath: '/projects/not_real/settings
 describe('~/environments/components/form.vue', () => {
   let wrapper;
 
-  const createWrapper = (propsData = {}) =>
+  const createWrapper = (propsData = {}, options = {}) =>
     mountExtended(EnvironmentForm, {
       provide: PROVIDE,
+      ...options,
       propsData: {
         ...DEFAULT_PROPS,
         ...propsData,
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       wrapper = createWrapper();
@@ -105,6 +102,7 @@ describe('~/environments/components/form.vue', () => {
     wrapper = createWrapper({ loading: true });
     expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
+
   describe('when a new environment is being created', () => {
     beforeEach(() => {
       wrapper = createWrapper({
@@ -133,6 +131,18 @@ describe('~/environments/components/form.vue', () => {
     });
   });
 
+  describe('when no protected environment link is provided', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({
+        provide: {},
+      });
+    });
+
+    it('does not show protected environment documentation', () => {
+      expect(wrapper.findByRole('link', { name: 'Protected environments' }).exists()).toBe(false);
+    });
+  });
+
   describe('when an existing environment is being edited', () => {
     beforeEach(() => {
       wrapper = createWrapper({
diff --git a/spec/frontend/environments/environment_item_spec.js b/spec/frontend/environments/environment_item_spec.js
index dd909cf4473..59e94dfd662 100644
--- a/spec/frontend/environments/environment_item_spec.js
+++ b/spec/frontend/environments/environment_item_spec.js
@@ -56,10 +56,6 @@ describe('Environment item', () => {
     findUpcomingDeployment().findComponent(GlAvatarLink);
   const findUpcomingDeploymentAvatar = () => findUpcomingDeployment().findComponent(GlAvatar);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when item is not folder', () => {
     it('should render environment name', () => {
       expect(wrapper.find('.environment-name').text()).toContain(environment.name);
@@ -390,10 +386,6 @@ describe('Environment item', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should render folder icon and name', () => {
       expect(wrapper.find('.folder-name').text()).toContain(folder.name);
       expect(wrapper.find('.folder-icon')).toBeDefined();
diff --git a/spec/frontend/environments/environment_pin_spec.js b/spec/frontend/environments/environment_pin_spec.js
index 170036b5b00..2f38dea2833 100644
--- a/spec/frontend/environments/environment_pin_spec.js
+++ b/spec/frontend/environments/environment_pin_spec.js
@@ -31,10 +31,6 @@ describe('Pin Component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should render the component with descriptive text', () => {
       expect(wrapper.text()).toBe('Prevent auto-stopping');
     });
@@ -64,10 +60,6 @@ describe('Pin Component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should render the component with descriptive text', () => {
       expect(wrapper.text()).toBe('Prevent auto-stopping');
     });
diff --git a/spec/frontend/environments/environment_table_spec.js b/spec/frontend/environments/environment_table_spec.js
index a86cfdd56ba..652b0f807fe 100644
--- a/spec/frontend/environments/environment_table_spec.js
+++ b/spec/frontend/environments/environment_table_spec.js
@@ -34,10 +34,6 @@ describe('Environment table', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('Should render a table', async () => {
     const mockItem = {
       name: 'review',
diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
index 986ecca4e84..a843f801da5 100644
--- a/spec/frontend/environments/environments_app_spec.js
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -96,10 +96,6 @@ describe('~/environments/components/environments_app.vue', () => {
     paginationMock = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should request available environments if the scope is invalid', async () => {
     await createWrapperWithMocked({
       environmentsApp: resolvedEnvironmentsApp,
diff --git a/spec/frontend/environments/environments_detail_header_spec.js b/spec/frontend/environments/environments_detail_header_spec.js
index 1f233c05fbf..8574743919f 100644
--- a/spec/frontend/environments/environments_detail_header_spec.js
+++ b/spec/frontend/environments/environments_detail_header_spec.js
@@ -47,7 +47,7 @@ describe('Environments detail header component', () => {
         TimeAgo,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: {
         canAdminEnvironment: false,
@@ -59,10 +59,6 @@ describe('Environments detail header component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default state with minimal access', () => {
     beforeEach(() => {
       createWrapper({ props: { environment: createEnvironment({ externalUrl: null }) } });
diff --git a/spec/frontend/environments/environments_folder_view_spec.js b/spec/frontend/environments/environments_folder_view_spec.js
index a87060f83d8..75fb3a31120 100644
--- a/spec/frontend/environments/environments_folder_view_spec.js
+++ b/spec/frontend/environments/environments_folder_view_spec.js
@@ -24,7 +24,6 @@ describe('Environments Folder View', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('successful request', () => {
diff --git a/spec/frontend/environments/graphql/mock_data.js b/spec/frontend/environments/graphql/mock_data.js
index 5ea0be41614..b5435990042 100644
--- a/spec/frontend/environments/graphql/mock_data.js
+++ b/spec/frontend/environments/graphql/mock_data.js
@@ -798,3 +798,9 @@ export const resolvedDeploymentDetails = {
     },
   },
 };
+
+export const agent = {
+  project: 'agent-project',
+  id: '1',
+  name: 'agent-name',
+};
diff --git a/spec/frontend/environments/kubernetes_agent_info_spec.js b/spec/frontend/environments/kubernetes_agent_info_spec.js
new file mode 100644
index 00000000000..4a6e2a7373b
--- /dev/null
+++ b/spec/frontend/environments/kubernetes_agent_info_spec.js
@@ -0,0 +1,126 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlIcon, GlLink, GlSprintf, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import KubernetesAgentInfo from '~/environments/components/kubernetes_agent_info.vue';
+import { TOKEN_STATUS_ACTIVE } from '~/clusters/agents/constants';
+import { AGENT_STATUSES, ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import getK8sClusterAgentQuery from '~/environments/graphql/queries/k8s_cluster_agent.query.graphql';
+
+Vue.use(VueApollo);
+
+const propsData = {
+  agentName: 'my-agent',
+  agentId: '1',
+  agentProjectPath: 'path/to/agent-config-project',
+};
+
+const mockClusterAgent = {
+  id: '1',
+  name: 'token-1',
+  webPath: 'path/to/agent-page',
+};
+
+const connectedTimeNow = new Date();
+const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME);
+
+describe('~/environments/components/kubernetes_agent_info.vue', () => {
+  let wrapper;
+  let agentQueryResponse;
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAgentLink = () => wrapper.findComponent(GlLink);
+  const findAgentStatus = () => wrapper.findByTestId('agent-status');
+  const findAgentStatusIcon = () => findAgentStatus().findComponent(GlIcon);
+  const findAgentLastUsedDate = () => wrapper.findByTestId('agent-last-used-date');
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  const createWrapper = ({ tokens = [], queryResponse = null } = {}) => {
+    const clusterAgent = { ...mockClusterAgent, tokens: { nodes: tokens } };
+
+    agentQueryResponse =
+      queryResponse ||
+      jest.fn().mockResolvedValue({ data: { project: { id: 'project-1', clusterAgent } } });
+    const apolloProvider = createMockApollo([[getK8sClusterAgentQuery, agentQueryResponse]]);
+
+    wrapper = extendedWrapper(
+      shallowMount(KubernetesAgentInfo, {
+        apolloProvider,
+        propsData,
+        stubs: { TimeAgoTooltip, GlSprintf },
+      }),
+    );
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows loading icon while fetching the agent details', async () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+      await waitForPromises();
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('sends expected params', async () => {
+      await waitForPromises();
+
+      const variables = {
+        agentName: propsData.agentName,
+        projectPath: propsData.agentProjectPath,
+        tokenStatus: TOKEN_STATUS_ACTIVE,
+      };
+
+      expect(agentQueryResponse).toHaveBeenCalledWith(variables);
+    });
+
+    it('renders the agent name with the link', async () => {
+      await waitForPromises();
+
+      expect(findAgentLink().attributes('href')).toBe(mockClusterAgent.webPath);
+      expect(findAgentLink().text()).toContain(mockClusterAgent.id);
+    });
+  });
+
+  describe.each`
+    lastUsedAt               | status        | lastUsedText
+    ${null}                  | ${'unused'}   | ${KubernetesAgentInfo.i18n.neverConnectedText}
+    ${connectedTimeNow}      | ${'active'}   | ${'just now'}
+    ${connectedTimeInactive} | ${'inactive'} | ${'8 minutes ago'}
+  `('when agent connection status is "$status"', ({ lastUsedAt, status, lastUsedText }) => {
+    beforeEach(async () => {
+      const tokens = [{ id: 'token-id', lastUsedAt }];
+      createWrapper({ tokens });
+      await waitForPromises();
+    });
+
+    it('displays correct status text', () => {
+      expect(findAgentStatus().text()).toBe(AGENT_STATUSES[status].name);
+    });
+
+    it('displays correct status icon', () => {
+      expect(findAgentStatusIcon().props('name')).toBe(AGENT_STATUSES[status].icon);
+      expect(findAgentStatusIcon().attributes('class')).toBe(AGENT_STATUSES[status].class);
+    });
+
+    it('displays correct last used date status', () => {
+      expect(findAgentLastUsedDate().text()).toBe(lastUsedText);
+    });
+  });
+
+  describe('when the agent query has errored', () => {
+    beforeEach(() => {
+      createWrapper({ clusterAgent: null, queryResponse: jest.fn().mockRejectedValue() });
+      return waitForPromises();
+    });
+
+    it('displays an alert message', () => {
+      expect(findAlert().text()).toBe(KubernetesAgentInfo.i18n.loadingError);
+    });
+  });
+});
diff --git a/spec/frontend/environments/kubernetes_overview_spec.js b/spec/frontend/environments/kubernetes_overview_spec.js
new file mode 100644
index 00000000000..8673c657760
--- /dev/null
+++ b/spec/frontend/environments/kubernetes_overview_spec.js
@@ -0,0 +1,84 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlCollapse, GlButton } from '@gitlab/ui';
+import KubernetesOverview from '~/environments/components/kubernetes_overview.vue';
+import KubernetesAgentInfo from '~/environments/components/kubernetes_agent_info.vue';
+
+const agent = {
+  project: 'agent-project',
+  id: '1',
+  name: 'agent-name',
+};
+
+const propsData = {
+  agentId: agent.id,
+  agentName: agent.name,
+  agentProjectPath: agent.project,
+};
+
+describe('~/environments/components/kubernetes_overview.vue', () => {
+  let wrapper;
+
+  const findCollapse = () => wrapper.findComponent(GlCollapse);
+  const findCollapseButton = () => wrapper.findComponent(GlButton);
+  const findAgentInfo = () => wrapper.findComponent(KubernetesAgentInfo);
+
+  const createWrapper = () => {
+    wrapper = shallowMount(KubernetesOverview, {
+      propsData,
+    });
+  };
+
+  const toggleCollapse = async () => {
+    findCollapseButton().vm.$emit('click');
+    await nextTick();
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders the kubernetes overview title', () => {
+      expect(wrapper.text()).toBe(KubernetesOverview.i18n.sectionTitle);
+    });
+  });
+
+  describe('collapse', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('is collapsed by default', () => {
+      expect(findCollapse().props('visible')).toBeUndefined();
+      expect(findCollapseButton().attributes('aria-label')).toBe(KubernetesOverview.i18n.expand);
+      expect(findCollapseButton().props('icon')).toBe('chevron-right');
+    });
+
+    it("doesn't render components when the collapse is not visible", () => {
+      expect(findAgentInfo().exists()).toBe(false);
+    });
+
+    it('opens on click', async () => {
+      findCollapseButton().vm.$emit('click');
+      await nextTick();
+
+      expect(findCollapse().attributes('visible')).toBe('true');
+      expect(findCollapseButton().attributes('aria-label')).toBe(KubernetesOverview.i18n.collapse);
+      expect(findCollapseButton().props('icon')).toBe('chevron-down');
+    });
+  });
+
+  describe('when section is expanded', () => {
+    it('renders kubernetes agent info', async () => {
+      createWrapper();
+      await toggleCollapse();
+
+      expect(findAgentInfo().props()).toEqual({
+        agentName: agent.name,
+        agentId: agent.id,
+        agentProjectPath: agent.project,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/environments/new_environment_item_spec.js b/spec/frontend/environments/new_environment_item_spec.js
index 76cd09cfb4e..c04ff896794 100644
--- a/spec/frontend/environments/new_environment_item_spec.js
+++ b/spec/frontend/environments/new_environment_item_spec.js
@@ -9,7 +9,8 @@ import { __, s__, sprintf } from '~/locale';
 import EnvironmentItem from '~/environments/components/new_environment_item.vue';
 import Deployment from '~/environments/components/deployment.vue';
 import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue';
-import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data';
+import KubernetesOverview from '~/environments/components/kubernetes_overview.vue';
+import { resolvedEnvironment, rolloutStatus, agent } from './graphql/mock_data';
 
 Vue.use(VueApollo);
 
@@ -20,15 +21,16 @@ describe('~/environments/components/new_environment_item.vue', () => {
     return createMockApollo();
   };
 
-  const createWrapper = ({ propsData = {}, apolloProvider } = {}) =>
+  const createWrapper = ({ propsData = {}, provideData = {}, apolloProvider } = {}) =>
     mountExtended(EnvironmentItem, {
       apolloProvider,
       propsData: { environment: resolvedEnvironment, ...propsData },
-      provide: { helpPagePath: '/help', projectId: '1', projectPath: '/1' },
+      provide: { helpPagePath: '/help', projectId: '1', projectPath: '/1', ...provideData },
       stubs: { transition: stubTransition() },
     });
 
   const findDeployment = () => wrapper.findComponent(Deployment);
+  const findKubernetesOverview = () => wrapper.findComponent(KubernetesOverview);
 
   const expandCollapsedSection = async () => {
     const button = wrapper.findByRole('button', { name: __('Expand') });
@@ -37,10 +39,6 @@ describe('~/environments/components/new_environment_item.vue', () => {
     return button;
   };
 
-  afterEach(() => {
-    wrapper?.destroy();
-  });
-
   it('displays the name when not in a folder', () => {
     wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
@@ -157,7 +155,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
   });
 
   describe('stop', () => {
-    it('shows a buton to stop the environment if the environment is available', () => {
+    it('shows a button to stop the environment if the environment is available', () => {
       wrapper = createWrapper({ apolloProvider: createApolloProvider() });
 
       const stop = wrapper.findByRole('button', { name: s__('Environments|Stop environment') });
@@ -165,7 +163,7 @@ describe('~/environments/components/new_environment_item.vue', () => {
       expect(stop.exists()).toBe(true);
     });
 
-    it('does not show a buton to stop the environment if the environment is stopped', () => {
+    it('does not show a button to stop the environment if the environment is stopped', () => {
       wrapper = createWrapper({
         propsData: { environment: { ...resolvedEnvironment, canStop: false } },
         apolloProvider: createApolloProvider(),
@@ -515,4 +513,71 @@ describe('~/environments/components/new_environment_item.vue', () => {
       expect(deployBoard.exists()).toBe(false);
     });
   });
+
+  describe('kubernetes overview', () => {
+    const environmentWithAgent = {
+      ...resolvedEnvironment,
+      agent,
+    };
+
+    it('should render if the feature flag is enabled and the environment has an agent object with the required data specified', () => {
+      wrapper = createWrapper({
+        propsData: { environment: environmentWithAgent },
+        provideData: {
+          glFeatures: {
+            kasUserAccessProject: true,
+          },
+        },
+        apolloProvider: createApolloProvider(),
+      });
+
+      expandCollapsedSection();
+
+      expect(findKubernetesOverview().props()).toMatchObject({
+        agentProjectPath: agent.project,
+        agentName: agent.name,
+        agentId: agent.id,
+      });
+    });
+
+    it('should not render if the feature flag is not enabled', () => {
+      wrapper = createWrapper({
+        propsData: { environment: environmentWithAgent },
+        apolloProvider: createApolloProvider(),
+      });
+
+      expandCollapsedSection();
+
+      expect(findKubernetesOverview().exists()).toBe(false);
+    });
+
+    it('should not render if the environment has no agent object', () => {
+      wrapper = createWrapper({
+        apolloProvider: createApolloProvider(),
+      });
+
+      expandCollapsedSection();
+
+      expect(findKubernetesOverview().exists()).toBe(false);
+    });
+
+    it('should not render if the environment has an agent object without agent id specified', () => {
+      const environment = {
+        ...resolvedEnvironment,
+        agent: {
+          project: agent.project,
+          name: agent.name,
+        },
+      };
+
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      expandCollapsedSection();
+
+      expect(findKubernetesOverview().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js
index a8cc05b297b..743f4ad6786 100644
--- a/spec/frontend/environments/new_environment_spec.js
+++ b/spec/frontend/environments/new_environment_spec.js
@@ -3,13 +3,13 @@ import MockAdapter from 'axios-mock-adapter';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import NewEnvironment from '~/environments/components/new_environment.vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const DEFAULT_OPTS = {
   provide: {
@@ -41,7 +41,6 @@ describe('~/environments/components/new.vue', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   const showsLoading = () => wrapper.findComponent(GlLoadingIcon).exists();
diff --git a/spec/frontend/environments/stop_stale_environments_modal_spec.js b/spec/frontend/environments/stop_stale_environments_modal_spec.js
index a2ab4f707b5..ddf6670db12 100644
--- a/spec/frontend/environments/stop_stale_environments_modal_spec.js
+++ b/spec/frontend/environments/stop_stale_environments_modal_spec.js
@@ -18,7 +18,6 @@ describe('~/environments/components/stop_stale_environments_modal.vue', () => {
   let wrapper;
   let mock;
   let before;
-  let originalGon;
 
   const createWrapper = (opts = {}) =>
     shallowMount(StopStaleEnvironmentsModal, {
@@ -28,8 +27,7 @@ describe('~/environments/components/stop_stale_environments_modal.vue', () => {
     });
 
   beforeEach(() => {
-    originalGon = window.gon;
-    window.gon = { api_version: 'v4' };
+    window.gon.api_version = 'v4';
 
     mock = new MockAdapter(axios);
     jest.spyOn(axios, 'post');
@@ -39,9 +37,7 @@ describe('~/environments/components/stop_stale_environments_modal.vue', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
     jest.resetAllMocks();
-    window.gon = originalGon;
   });
 
   it('sets the correct min and max dates', async () => {
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 9d6e46be8c4..3bfade12d27 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -18,11 +18,11 @@ import {
   trackErrorDetailsViewsOptions,
   trackErrorStatusUpdateOptions,
 } from '~/error_tracking/utils';
-import { createAlert, VARIANT_WARNING } from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/alert';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(Vuex);
 
@@ -148,7 +148,7 @@ describe('ErrorDetails', () => {
       expect(mocks.$apollo.queries.error.stopPolling).not.toHaveBeenCalled();
     });
 
-    it('when timeout is hit and no apollo result, stops loading and shows flash', async () => {
+    it('when timeout is hit and no apollo result, stops loading and shows alert', async () => {
       Date.now.mockReturnValue(endTime + 1);
 
       wrapper.vm.onNoApolloResult();
diff --git a/spec/frontend/error_tracking/store/actions_spec.js b/spec/frontend/error_tracking/store/actions_spec.js
index 3ec43010d80..44db4780ba9 100644
--- a/spec/frontend/error_tracking/store/actions_spec.js
+++ b/spec/frontend/error_tracking/store/actions_spec.js
@@ -2,12 +2,12 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/actions';
 import * as types from '~/error_tracking/store/mutation_types';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 let mock;
diff --git a/spec/frontend/error_tracking/store/details/actions_spec.js b/spec/frontend/error_tracking/store/details/actions_spec.js
index 383d8aaeb20..0aeb8b19a9e 100644
--- a/spec/frontend/error_tracking/store/details/actions_spec.js
+++ b/spec/frontend/error_tracking/store/details/actions_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/details/actions';
 import * as types from '~/error_tracking/store/details/mutation_types';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import {
   HTTP_STATUS_BAD_REQUEST,
@@ -14,7 +14,7 @@ import Poll from '~/lib/utils/poll';
 let mockedAdapter;
 let mockedRestart;
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 describe('Sentry error details store actions', () => {
@@ -48,7 +48,7 @@ describe('Sentry error details store actions', () => {
       );
     });
 
-    it('should show flash on API error', async () => {
+    it('should show alert on API error', async () => {
       mockedAdapter.onGet().reply(HTTP_STATUS_BAD_REQUEST);
 
       await testAction(
diff --git a/spec/frontend/error_tracking/store/list/actions_spec.js b/spec/frontend/error_tracking/store/list/actions_spec.js
index 590983bd93d..24a26476455 100644
--- a/spec/frontend/error_tracking/store/list/actions_spec.js
+++ b/spec/frontend/error_tracking/store/list/actions_spec.js
@@ -2,11 +2,11 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import * as actions from '~/error_tracking/store/list/actions';
 import * as types from '~/error_tracking/store/list/mutation_types';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('error tracking actions', () => {
   let mock;
@@ -38,7 +38,7 @@ describe('error tracking actions', () => {
       );
     });
 
-    it('should show flash on API error', async () => {
+    it('should show alert on API error', async () => {
       mock.onGet().reply(HTTP_STATUS_BAD_REQUEST);
 
       await testAction(
diff --git a/spec/frontend/experimentation/components/gitlab_experiment_spec.js b/spec/frontend/experimentation/components/gitlab_experiment_spec.js
index f52ebf0f3c4..73db4b9503c 100644
--- a/spec/frontend/experimentation/components/gitlab_experiment_spec.js
+++ b/spec/frontend/experimentation/components/gitlab_experiment_spec.js
@@ -9,7 +9,6 @@ const defaultSlots = {
 };
 
 describe('ExperimentComponent', () => {
-  const oldGon = window.gon;
   let wrapper;
 
   const createComponent = (propsData = defaultProps, slots = defaultSlots) => {
@@ -20,12 +19,6 @@ describe('ExperimentComponent', () => {
     window.gon = { experiment: { experiment_name: { variant: expectedVariant } } };
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-    window.gon = oldGon;
-  });
-
   describe('when variant and experiment is set', () => {
     it('renders control when it is the active variant', () => {
       mockVariant('control');
diff --git a/spec/frontend/experimentation/utils_spec.js b/spec/frontend/experimentation/utils_spec.js
index 0d663fd055e..6d9c9dfe65a 100644
--- a/spec/frontend/experimentation/utils_spec.js
+++ b/spec/frontend/experimentation/utils_spec.js
@@ -10,18 +10,15 @@ describe('experiment Utilities', () => {
   const ABC_KEY = 'abc';
   const DEF_KEY = 'def';
 
-  let origGon;
   let origGl;
 
   beforeEach(() => {
-    origGon = window.gon;
     origGl = window.gl;
     window.gon.experiment = {};
     window.gl.experiments = {};
   });
 
   afterEach(() => {
-    window.gon = origGon;
     window.gl = origGl;
   });
 
diff --git a/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js b/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js
index c1051a14a08..b06e0340991 100644
--- a/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js
+++ b/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js
@@ -42,7 +42,6 @@ describe('Configure Feature Flags Modal', () => {
     wrapper.findAllComponents(GlAlert).filter((c) => c.props('variant') === 'danger');
 
   describe('idle', () => {
-    afterEach(() => wrapper.destroy());
     beforeEach(factory);
 
     it('should have Primary and Secondary actions', () => {
@@ -51,7 +50,7 @@ describe('Configure Feature Flags Modal', () => {
     });
 
     it('should default disable the primary action', () => {
-      const [{ disabled }] = findSecondaryAction().attributes;
+      const { disabled } = findSecondaryAction().attributes;
       expect(disabled).toBe(true);
     });
 
@@ -112,19 +111,17 @@ describe('Configure Feature Flags Modal', () => {
   });
 
   describe('verified', () => {
-    afterEach(() => wrapper.destroy());
     beforeEach(factory);
 
     it('should enable the secondary action', async () => {
       findProjectNameInput().vm.$emit('input', provide.projectName);
       await nextTick();
-      const [{ disabled }] = findSecondaryAction().attributes;
+      const { disabled } = findSecondaryAction().attributes;
       expect(disabled).toBe(false);
     });
   });
 
   describe('cannot rotate token', () => {
-    afterEach(() => wrapper.destroy());
     beforeEach(factory.bind(null, { canUserRotateToken: false }));
 
     it('should not display the primary action', () => {
@@ -141,7 +138,6 @@ describe('Configure Feature Flags Modal', () => {
   });
 
   describe('has rotate error', () => {
-    afterEach(() => wrapper.destroy());
     beforeEach(() => {
       factory({ hasRotateError: true });
     });
@@ -153,7 +149,6 @@ describe('Configure Feature Flags Modal', () => {
   });
 
   describe('is rotating', () => {
-    afterEach(() => wrapper.destroy());
     beforeEach(factory.bind(null, { isRotating: true }));
 
     it('should disable the project name input', async () => {
diff --git a/spec/frontend/feature_flags/components/edit_feature_flag_spec.js b/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
index cf4605e21ea..c26fd80865d 100644
--- a/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
+++ b/spec/frontend/feature_flags/components/edit_feature_flag_spec.js
@@ -53,7 +53,6 @@ describe('Edit feature flag form', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/feature_flags/components/empty_state_spec.js b/spec/frontend/feature_flags/components/empty_state_spec.js
index e3cc6f703c4..d983332f7c1 100644
--- a/spec/frontend/feature_flags/components/empty_state_spec.js
+++ b/spec/frontend/feature_flags/components/empty_state_spec.js
@@ -48,8 +48,6 @@ describe('feature_flags/components/feature_flags_tab.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   describe('alerts', () => {
diff --git a/spec/frontend/feature_flags/components/environments_dropdown_spec.js b/spec/frontend/feature_flags/components/environments_dropdown_spec.js
index a4738fed37e..9fc0119a6c8 100644
--- a/spec/frontend/feature_flags/components/environments_dropdown_spec.js
+++ b/spec/frontend/feature_flags/components/environments_dropdown_spec.js
@@ -27,7 +27,6 @@ describe('Feature flags > Environments dropdown', () => {
   const findDropdownMenu = () => wrapper.find('.dropdown-menu');
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/feature_flags/components/feature_flags_spec.js b/spec/frontend/feature_flags/components/feature_flags_spec.js
index e80f9c559c4..23e86d0eb2f 100644
--- a/spec/frontend/feature_flags/components/feature_flags_spec.js
+++ b/spec/frontend/feature_flags/components/feature_flags_spec.js
@@ -65,8 +65,6 @@ describe('Feature flags', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   describe('when limit exceeded', () => {
diff --git a/spec/frontend/feature_flags/components/form_spec.js b/spec/frontend/feature_flags/components/form_spec.js
index 7dd7c709c94..f66e25698e6 100644
--- a/spec/frontend/feature_flags/components/form_spec.js
+++ b/spec/frontend/feature_flags/components/form_spec.js
@@ -42,10 +42,6 @@ describe('feature flag form', () => {
     Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [] });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render provided submitText', () => {
     factory(requiredProps);
 
diff --git a/spec/frontend/feature_flags/components/new_feature_flag_spec.js b/spec/frontend/feature_flags/components/new_feature_flag_spec.js
index 300d0e47082..46c9118cbd9 100644
--- a/spec/frontend/feature_flags/components/new_feature_flag_spec.js
+++ b/spec/frontend/feature_flags/components/new_feature_flag_spec.js
@@ -46,10 +46,6 @@ describe('New feature flag form', () => {
     factory();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with error', () => {
     it('should render the error', async () => {
       store.dispatch('receiveCreateFeatureFlagError', { message: ['The name is required'] });
diff --git a/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js b/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js
index 70a9156b5a9..5feaf094701 100644
--- a/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js
+++ b/spec/frontend/feature_flags/components/strategies/flexible_rollout_spec.js
@@ -24,8 +24,6 @@ describe('feature_flags/components/strategies/flexible_rollout.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   describe('with valid percentage', () => {
diff --git a/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js b/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js
index 23ad0d3a08d..365f1e534b5 100644
--- a/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js
+++ b/spec/frontend/feature_flags/components/strategies/parameter_form_group_spec.js
@@ -28,8 +28,6 @@ describe('~/feature_flags/strategies/parameter_form_group.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   it('should display the default slot', () => {
diff --git a/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js b/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
index cb422a018f9..b20061c12a2 100644
--- a/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
+++ b/spec/frontend/feature_flags/components/strategies/percent_rollout_spec.js
@@ -22,8 +22,6 @@ describe('~/feature_flags/components/strategies/percent_rollout.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   describe('with valid percentage', () => {
diff --git a/spec/frontend/feature_flags/components/strategies/users_with_id_spec.js b/spec/frontend/feature_flags/components/strategies/users_with_id_spec.js
index 0a72714c22a..ae489f3a6e6 100644
--- a/spec/frontend/feature_flags/components/strategies/users_with_id_spec.js
+++ b/spec/frontend/feature_flags/components/strategies/users_with_id_spec.js
@@ -22,8 +22,6 @@ describe('~/feature_flags/components/users_with_id.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   it('should display the current value of the parameters', () => {
diff --git a/spec/frontend/feature_flags/components/strategy_parameters_spec.js b/spec/frontend/feature_flags/components/strategy_parameters_spec.js
index d0f1f7d0e2a..cd8270f1801 100644
--- a/spec/frontend/feature_flags/components/strategy_parameters_spec.js
+++ b/spec/frontend/feature_flags/components/strategy_parameters_spec.js
@@ -32,8 +32,6 @@ describe('~/feature_flags/components/strategy_parameters.vue', () => {
     if (wrapper?.destroy) {
       wrapper.destroy();
     }
-
-    wrapper = null;
   });
 
   describe.each`
diff --git a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
index 4d5cb26810e..4609bfc23d7 100644
--- a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
@@ -1,10 +1,10 @@
 import MockAdapter from 'axios-mock-adapter';
 import { dismiss } from '~/feature_highlight/feature_highlight_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_CREATED, HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('feature highlight helper', () => {
   describe('dismiss', () => {
@@ -26,7 +26,7 @@ describe('feature highlight helper', () => {
       await expect(dismiss(endpoint, highlightId)).resolves.toEqual(expect.anything());
     });
 
-    it('triggers flash when dismiss request fails', async () => {
+    it('triggers an alert when dismiss request fails', async () => {
       mockAxios
         .onPost(endpoint, { feature_name: highlightId })
         .replyOnce(HTTP_STATUS_INTERNAL_SERVER_ERROR);
diff --git a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
index 650f9eb1bbc..66ea22cece3 100644
--- a/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_popover_spec.js
@@ -29,11 +29,6 @@ describe('feature_highlight/feature_highlight_popover', () => {
     buildWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders popover target', () => {
     expect(findPopoverTarget().exists()).toBe(true);
   });
diff --git a/spec/frontend/filtered_search/components/recent_searches_dropdown_content_spec.js b/spec/frontend/filtered_search/components/recent_searches_dropdown_content_spec.js
index ebed477fa2f..5f0e928e1fe 100644
--- a/spec/frontend/filtered_search/components/recent_searches_dropdown_content_spec.js
+++ b/spec/frontend/filtered_search/components/recent_searches_dropdown_content_spec.js
@@ -22,11 +22,6 @@ describe('Recent Searches Dropdown Content', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when local storage is not available', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/filtered_search/dropdown_user_spec.js b/spec/frontend/filtered_search/dropdown_user_spec.js
index 26f12673f68..02ef813883f 100644
--- a/spec/frontend/filtered_search/dropdown_user_spec.js
+++ b/spec/frontend/filtered_search/dropdown_user_spec.js
@@ -68,10 +68,6 @@ describe('Dropdown User', () => {
         '/gitlab_directory/-/autocomplete/users.json',
       );
     });
-
-    afterEach(() => {
-      window.gon = {};
-    });
   });
 
   describe('hideCurrentUser', () => {
diff --git a/spec/frontend/filtered_search/filtered_search_manager_spec.js b/spec/frontend/filtered_search/filtered_search_manager_spec.js
index 26af7af701b..8c16ff100eb 100644
--- a/spec/frontend/filtered_search/filtered_search_manager_spec.js
+++ b/spec/frontend/filtered_search/filtered_search_manager_spec.js
@@ -8,11 +8,11 @@ import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered
 import RecentSearchesRoot from '~/filtered_search/recent_searches_root';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesServiceError from '~/filtered_search/services/recent_searches_service_error';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { BACKSPACE_KEY_CODE, DELETE_KEY_CODE } from '~/lib/utils/keycodes';
 import { visitUrl, getParameterByName } from '~/lib/utils/url_utility';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
   getParameterByName: jest.fn(),
diff --git a/spec/frontend/filtered_search/visual_token_value_spec.js b/spec/frontend/filtered_search/visual_token_value_spec.js
index d3fa8fae9ab..138a4e183a9 100644
--- a/spec/frontend/filtered_search/visual_token_value_spec.js
+++ b/spec/frontend/filtered_search/visual_token_value_spec.js
@@ -5,11 +5,11 @@ import FilteredSearchSpecHelper from 'helpers/filtered_search_spec_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import DropdownUtils from '~/filtered_search/dropdown_utils';
 import VisualTokenValue from '~/filtered_search/visual_token_value';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import UsersCache from '~/lib/utils/users_cache';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Filtered Search Visual Tokens', () => {
   const findElements = (tokenElement) => {
diff --git a/spec/frontend/fixtures/abuse_reports.rb b/spec/frontend/fixtures/abuse_reports.rb
index d8c8737b125..ad0fb9be8dc 100644
--- a/spec/frontend/fixtures/abuse_reports.rb
+++ b/spec/frontend/fixtures/abuse_reports.rb
@@ -14,6 +14,8 @@ RSpec.describe Admin::AbuseReportsController, '(JavaScript fixtures)', type: :co
   render_views
 
   before do
+    stub_feature_flags(abuse_reports_list: false)
+
     sign_in(admin)
     enable_admin_mode!(admin)
   end
diff --git a/spec/frontend/fixtures/api_deploy_keys.rb b/spec/frontend/fixtures/api_deploy_keys.rb
index 5ffc726f086..8c926296817 100644
--- a/spec/frontend/fixtures/api_deploy_keys.rb
+++ b/spec/frontend/fixtures/api_deploy_keys.rb
@@ -7,6 +7,7 @@ RSpec.describe API::DeployKeys, '(JavaScript fixtures)', type: :request do
   include JavaScriptFixturesHelpers
 
   let_it_be(:admin) { create(:admin) }
+  let_it_be(:path) { "/deploy_keys" }
   let_it_be(:project) { create(:project) }
   let_it_be(:project2) { create(:project) }
   let_it_be(:deploy_key) { create(:deploy_key, public: true) }
@@ -17,8 +18,10 @@ RSpec.describe API::DeployKeys, '(JavaScript fixtures)', type: :request do
   let_it_be(:deploy_keys_project3) { create(:deploy_keys_project, :write_access, project: project, deploy_key: deploy_key2) }
   let_it_be(:deploy_keys_project4) { create(:deploy_keys_project, :write_access, project: project2, deploy_key: deploy_key2) }
 
+  it_behaves_like 'GET request permissions for admin mode'
+
   it 'api/deploy_keys/index.json' do
-    get api("/deploy_keys", admin)
+    get api("/deploy_keys", admin, admin_mode: true)
 
     expect(response).to be_successful
   end
diff --git a/spec/frontend/fixtures/jobs.rb b/spec/frontend/fixtures/jobs.rb
index 6d452bf1bff..3583beb83c2 100644
--- a/spec/frontend/fixtures/jobs.rb
+++ b/spec/frontend/fixtures/jobs.rb
@@ -93,4 +93,26 @@ RSpec.describe 'Jobs (JavaScript fixtures)' do
       expect_graphql_errors_to_be_empty
     end
   end
+
+  describe 'get_jobs_count.query.graphql', type: :request do
+    let!(:build) { create(:ci_build, :success, name: 'build', pipeline: pipeline) }
+    let!(:cancelable) { create(:ci_build, :cancelable, name: 'cancelable', pipeline: pipeline) }
+    let!(:failed) { create(:ci_build, :failed, name: 'failed', pipeline: pipeline) }
+
+    fixtures_path = 'graphql/jobs/'
+    get_jobs_count_query = 'get_jobs_count.query.graphql'
+    full_path = 'frontend-fixtures/builds-project'
+
+    let_it_be(:query) do
+      get_graphql_query_as_string("jobs/components/table/graphql/queries/#{get_jobs_count_query}")
+    end
+
+    it "#{fixtures_path}#{get_jobs_count_query}.json" do
+      post_graphql(query, current_user: user, variables: {
+        fullPath: full_path
+      })
+
+      expect_graphql_errors_to_be_empty
+    end
+  end
 end
diff --git a/spec/frontend/fixtures/merge_requests.rb b/spec/frontend/fixtures/merge_requests.rb
index 7ee89ca3694..b6f6d149756 100644
--- a/spec/frontend/fixtures/merge_requests.rb
+++ b/spec/frontend/fixtures/merge_requests.rb
@@ -151,7 +151,7 @@ RSpec.describe Projects::MergeRequestsController, '(JavaScript fixtures)', type:
     context 'merge request with no approvals' do
       base_input_path = 'vue_merge_request_widget/components/approvals/queries/'
       base_output_path = 'graphql/merge_requests/approvals/'
-      query_name = 'approved_by.query.graphql'
+      query_name = 'approvals.query.graphql'
 
       it "#{base_output_path}#{query_name}_no_approvals.json" do
         query = get_graphql_query_as_string("#{base_input_path}#{query_name}", ee: Gitlab.ee?)
@@ -165,7 +165,7 @@ RSpec.describe Projects::MergeRequestsController, '(JavaScript fixtures)', type:
     context 'merge request approved by current user' do
       base_input_path = 'vue_merge_request_widget/components/approvals/queries/'
       base_output_path = 'graphql/merge_requests/approvals/'
-      query_name = 'approved_by.query.graphql'
+      query_name = 'approvals.query.graphql'
 
       it "#{base_output_path}#{query_name}.json" do
         merge_request.approved_by_users << user
@@ -181,7 +181,7 @@ RSpec.describe Projects::MergeRequestsController, '(JavaScript fixtures)', type:
     context 'merge request approved by multiple users' do
       base_input_path = 'vue_merge_request_widget/components/approvals/queries/'
       base_output_path = 'graphql/merge_requests/approvals/'
-      query_name = 'approved_by.query.graphql'
+      query_name = 'approvals.query.graphql'
 
       it "#{base_output_path}#{query_name}_multiple_users.json" do
         merge_request.approved_by_users << user
diff --git a/spec/frontend/fixtures/runner.rb b/spec/frontend/fixtures/runner.rb
index f60e4991292..1581bc58289 100644
--- a/spec/frontend/fixtures/runner.rb
+++ b/spec/frontend/fixtures/runner.rb
@@ -145,6 +145,40 @@ RSpec.describe 'Runner (JavaScript fixtures)' do
         expect_graphql_errors_to_be_empty
       end
     end
+
+    describe 'runner_for_registration.query.graphql', :freeze_time, type: :request do
+      runner_for_registration_query = 'register/runner_for_registration.query.graphql'
+
+      let_it_be(:query) do
+        get_graphql_query_as_string("#{query_path}#{runner_for_registration_query}")
+      end
+
+      it "#{fixtures_path}#{runner_for_registration_query}.json" do
+        post_graphql(query, current_user: admin, variables: {
+          id: runner.to_global_id.to_s
+        })
+
+        expect_graphql_errors_to_be_empty
+      end
+    end
+
+    describe 'runner_create.mutation.graphql', type: :request do
+      runner_create_mutation = 'new/runner_create.mutation.graphql'
+
+      let_it_be(:query) do
+        get_graphql_query_as_string("#{query_path}#{runner_create_mutation}")
+      end
+
+      it "#{fixtures_path}#{runner_create_mutation}.json" do
+        post_graphql(query, current_user: admin, variables: {
+          input: {
+            description: 'My dummy runner'
+          }
+        })
+
+        expect_graphql_errors_to_be_empty
+      end
+    end
   end
 
   describe 'as group owner', GraphQL::Query do
diff --git a/spec/frontend/fixtures/saved_replies.rb b/spec/frontend/fixtures/saved_replies.rb
index c80ba06bca1..613e4a1b447 100644
--- a/spec/frontend/fixtures/saved_replies.rb
+++ b/spec/frontend/fixtures/saved_replies.rb
@@ -43,4 +43,32 @@ RSpec.describe GraphQL::Query, type: :request, feature_category: :user_profile d
       expect_graphql_errors_to_be_empty
     end
   end
+
+  context 'when user creates saved reply' do
+    base_input_path = 'saved_replies/queries/'
+    base_output_path = 'graphql/saved_replies/'
+    query_name = 'create_saved_reply.mutation.graphql'
+
+    it "#{base_output_path}#{query_name}.json" do
+      query = get_graphql_query_as_string("#{base_input_path}#{query_name}")
+
+      post_graphql(query, current_user: current_user, variables: { name: "Test", content: "Test content" })
+
+      expect_graphql_errors_to_be_empty
+    end
+  end
+
+  context 'when user creates saved reply and it errors' do
+    base_input_path = 'saved_replies/queries/'
+    base_output_path = 'graphql/saved_replies/'
+    query_name = 'create_saved_reply.mutation.graphql'
+
+    it "#{base_output_path}create_saved_reply_with_errors.mutation.graphql.json" do
+      query = get_graphql_query_as_string("#{base_input_path}#{query_name}")
+
+      post_graphql(query, current_user: current_user, variables: { name: nil, content: nil })
+
+      expect(flattened_errors).not_to be_empty
+    end
+  end
 end
diff --git a/spec/frontend/fixtures/startup_css.rb b/spec/frontend/fixtures/startup_css.rb
index bd2d63a1827..18a4aa58c00 100644
--- a/spec/frontend/fixtures/startup_css.rb
+++ b/spec/frontend/fixtures/startup_css.rb
@@ -16,7 +16,6 @@ RSpec.describe 'Startup CSS fixtures', type: :controller do
     before do
       # We want vNext badge to be included and com/canary don't remove/hide any other elements.
       # This is why we're turning com and canary on by default for now.
-      allow(Gitlab).to receive(:com?).and_return(true)
       allow(Gitlab).to receive(:canary?).and_return(true)
       sign_in(user)
     end
@@ -55,13 +54,28 @@ RSpec.describe 'Startup CSS fixtures', type: :controller do
 
       expect(response).to be_successful
     end
+
+    # This Feature Flag is off by default
+    # This ensures that the correct css is generated for super sidebar
+    # When the feature flag is off, the general startup will capture it
+    it "startup_css/project-#{type}-super-sidebar.html" do
+      stub_feature_flags(super_sidebar_nav: true)
+      user.update!(use_new_navigation: true)
+
+      get :show, params: {
+        namespace_id: project.namespace.to_param,
+        id: project
+      }
+
+      expect(response).to be_successful
+    end
   end
 
-  describe ProjectsController, '(Startup CSS fixtures)', type: :controller do
+  describe ProjectsController, '(Startup CSS fixtures)', :saas, type: :controller do
     it_behaves_like 'startup css project fixtures', 'general'
   end
 
-  describe ProjectsController, '(Startup CSS fixtures)', type: :controller do
+  describe ProjectsController, '(Startup CSS fixtures)', :saas, type: :controller do
     before do
       user.update!(theme_id: 11)
     end
diff --git a/spec/frontend/fixtures/u2f.rb b/spec/frontend/fixtures/u2f.rb
deleted file mode 100644
index 96820c9ae80..00000000000
--- a/spec/frontend/fixtures/u2f.rb
+++ /dev/null
@@ -1,48 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.context 'U2F' do
-  include JavaScriptFixturesHelpers
-
-  let(:user) { create(:user, :two_factor_via_u2f, otp_secret: 'otpsecret:coolkids') }
-
-  before do
-    stub_feature_flags(webauthn: false)
-  end
-
-  describe SessionsController, '(JavaScript fixtures)', type: :controller do
-    include DeviseHelpers
-
-    render_views
-
-    before do
-      set_devise_mapping(context: @request)
-    end
-
-    it 'u2f/authenticate.html' do
-      allow(controller).to receive(:find_user).and_return(user)
-
-      post :create, params: { user: { login: user.username, password: user.password } }
-
-      expect(response).to be_successful
-    end
-  end
-
-  describe Profiles::TwoFactorAuthsController, '(JavaScript fixtures)', type: :controller do
-    render_views
-
-    before do
-      sign_in(user)
-      allow_next_instance_of(Profiles::TwoFactorAuthsController) do |instance|
-        allow(instance).to receive(:build_qr_code).and_return('qrcode:blackandwhitesquares')
-      end
-    end
-
-    it 'u2f/register.html' do
-      get :show
-
-      expect(response).to be_successful
-    end
-  end
-end
diff --git a/spec/frontend/fixtures/users.rb b/spec/frontend/fixtures/users.rb
new file mode 100644
index 00000000000..6271aa87b9a
--- /dev/null
+++ b/spec/frontend/fixtures/users.rb
@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Users (GraphQL fixtures)', feature_category: :user_profile do
+  describe GraphQL::Query, type: :request do
+    include ApiHelpers
+    include GraphqlHelpers
+    include JavaScriptFixturesHelpers
+
+    let_it_be(:user) { create(:user) }
+
+    context 'for user achievements' do
+      let_it_be(:group) { create(:group, :public) }
+      let_it_be(:achievement1) { create(:achievement, namespace: group) }
+      let_it_be(:achievement2) { create(:achievement, namespace: group) }
+      let_it_be(:achievement3) { create(:achievement, namespace: group) }
+      let_it_be(:achievement_with_avatar_and_description) do
+        create(:achievement,
+          namespace: group,
+          description: 'Description',
+          avatar: File.new(Rails.root.join('db/fixtures/development/rocket.jpg'), 'r'))
+      end
+
+      let(:user_achievements_query_path) { 'profile/components/graphql/get_user_achievements.query.graphql' }
+      let(:query) { get_graphql_query_as_string(user_achievements_query_path) }
+
+      before_all do
+        group.add_guest(user)
+      end
+
+      it "graphql/get_user_achievements_empty_response.json" do
+        post_graphql(query, current_user: user, variables: { id: user.to_global_id })
+
+        expect_graphql_errors_to_be_empty
+      end
+
+      it "graphql/get_user_achievements_with_avatar_and_description_response.json" do
+        create(:user_achievement, user: user, achievement: achievement_with_avatar_and_description)
+
+        post_graphql(query, current_user: user, variables: { id: user.to_global_id })
+
+        expect_graphql_errors_to_be_empty
+      end
+
+      it "graphql/get_user_achievements_without_avatar_or_description_response.json" do
+        create(:user_achievement, user: user, achievement: achievement1)
+
+        post_graphql(query, current_user: user, variables: { id: user.to_global_id })
+
+        expect_graphql_errors_to_be_empty
+      end
+
+      it "graphql/get_user_achievements_long_response.json" do
+        [achievement1, achievement2, achievement3, achievement_with_avatar_and_description].each do |achievement|
+          create(:user_achievement, user: user, achievement: achievement)
+        end
+
+        post_graphql(query, current_user: user, variables: { id: user.to_global_id })
+
+        expect_graphql_errors_to_be_empty
+      end
+    end
+  end
+end
diff --git a/spec/frontend/fixtures/webauthn.rb b/spec/frontend/fixtures/webauthn.rb
index c6e9b41b584..ed6180118f0 100644
--- a/spec/frontend/fixtures/webauthn.rb
+++ b/spec/frontend/fixtures/webauthn.rb
@@ -32,6 +32,7 @@ RSpec.context 'WebAuthn' do
       allow_next_instance_of(Profiles::TwoFactorAuthsController) do |instance|
         allow(instance).to receive(:build_qr_code).and_return('qrcode:blackandwhitesquares')
       end
+      stub_feature_flags(webauthn_without_totp: false)
     end
 
     it 'webauthn/register.html' do
diff --git a/spec/frontend/frequent_items/components/app_spec.js b/spec/frontend/frequent_items/components/app_spec.js
index e1890555de0..4f5788dcb77 100644
--- a/spec/frontend/frequent_items/components/app_spec.js
+++ b/spec/frontend/frequent_items/components/app_spec.js
@@ -69,7 +69,6 @@ describe('Frequent Items App Component', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('default', () => {
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
index c54a2a1d039..7c8592fdf0c 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
@@ -59,8 +59,6 @@ describe('FrequentItemsListItemComponent', () => {
 
   afterEach(() => {
     unmockTracking();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   describe('computed', () => {
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
index d024925f62b..87f8e131b77 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_spec.js
@@ -29,10 +29,6 @@ describe('FrequentItemsListComponent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('isListEmpty', () => {
       it('should return `true` or `false` representing whether if `items` is empty or not with projects', async () => {
diff --git a/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js b/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js
index 685b5144a95..b1adc3f794a 100644
--- a/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js
+++ b/spec/frontend/gitlab_pages/new/pages/pages_pipeline_wizard_spec.js
@@ -50,10 +50,6 @@ describe('PagesPipelineWizard', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows the pipeline wizard', () => {
     expect(findPipelineWizardWrapper().exists()).toBe(true);
   });
diff --git a/spec/frontend/gitlab_version_check/components/gitlab_version_check_badge_spec.js b/spec/frontend/gitlab_version_check/components/gitlab_version_check_badge_spec.js
index 949bcf71ff5..e87f7e950cd 100644
--- a/spec/frontend/gitlab_version_check/components/gitlab_version_check_badge_spec.js
+++ b/spec/frontend/gitlab_version_check/components/gitlab_version_check_badge_spec.js
@@ -25,7 +25,6 @@ describe('GitlabVersionCheckBadge', () => {
 
   afterEach(() => {
     unmockTracking();
-    wrapper.destroy();
   });
 
   const findGlBadgeClickWrapper = () => wrapper.findByTestId('badge-click-wrapper');
diff --git a/spec/frontend/google_cloud/components/google_cloud_menu_spec.js b/spec/frontend/google_cloud/components/google_cloud_menu_spec.js
index 4809ea37045..a0c988830ed 100644
--- a/spec/frontend/google_cloud/components/google_cloud_menu_spec.js
+++ b/spec/frontend/google_cloud/components/google_cloud_menu_spec.js
@@ -15,10 +15,6 @@ describe('google_cloud/components/google_cloud_menu', () => {
     wrapper = mountExtended(GoogleCloudMenu, { propsData: props });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains active configuration link', () => {
     const link = wrapper.findByTestId('configurationLink');
     expect(link.text()).toBe(GoogleCloudMenu.i18n.configuration.title);
diff --git a/spec/frontend/google_cloud/components/incubation_banner_spec.js b/spec/frontend/google_cloud/components/incubation_banner_spec.js
index 09a4d92dca2..92bc39bdff9 100644
--- a/spec/frontend/google_cloud/components/incubation_banner_spec.js
+++ b/spec/frontend/google_cloud/components/incubation_banner_spec.js
@@ -15,10 +15,6 @@ describe('google_cloud/components/incubation_banner', () => {
     wrapper = mount(IncubationBanner);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains alert', () => {
     expect(findAlert().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/components/revoke_oauth_spec.js b/spec/frontend/google_cloud/components/revoke_oauth_spec.js
index faaec07fc35..2b39bb9ca74 100644
--- a/spec/frontend/google_cloud/components/revoke_oauth_spec.js
+++ b/spec/frontend/google_cloud/components/revoke_oauth_spec.js
@@ -20,10 +20,6 @@ describe('google_cloud/components/revoke_oauth', () => {
     wrapper = shallowMount(RevokeOauth, { propsData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains title', () => {
     const title = findTitle();
     expect(title.text()).toContain('Revoke authorizations');
diff --git a/spec/frontend/google_cloud/configuration/panel_spec.js b/spec/frontend/google_cloud/configuration/panel_spec.js
index 79eb4cb4918..dd85b4c90a7 100644
--- a/spec/frontend/google_cloud/configuration/panel_spec.js
+++ b/spec/frontend/google_cloud/configuration/panel_spec.js
@@ -25,10 +25,6 @@ describe('google_cloud/configuration/panel', () => {
     wrapper = shallowMountExtended(Panel, { propsData: props });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains incubation banner', () => {
     const target = wrapper.findComponent(IncubationBanner);
     expect(target.exists()).toBe(true);
diff --git a/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js b/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js
index 48e4b0ca1ad..6e2d3147a54 100644
--- a/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js
+++ b/spec/frontend/google_cloud/databases/cloudsql/create_instance_form_spec.js
@@ -25,10 +25,6 @@ describe('google_cloud/databases/cloudsql/create_instance_form', () => {
     wrapper = shallowMountExtended(InstanceForm, { propsData, stubs: { GlFormCheckbox } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains header', () => {
     expect(findHeader().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js b/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js
index a5736d0a524..a2ee75f9fbf 100644
--- a/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js
+++ b/spec/frontend/google_cloud/databases/cloudsql/instance_table_spec.js
@@ -8,10 +8,6 @@ describe('google_cloud/databases/cloudsql/instance_table', () => {
   const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findTable = () => wrapper.findComponent(GlTable);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there are no instances', () => {
     beforeEach(() => {
       const propsData = {
diff --git a/spec/frontend/google_cloud/databases/panel_spec.js b/spec/frontend/google_cloud/databases/panel_spec.js
index e6a0d74f348..779258bbdbb 100644
--- a/spec/frontend/google_cloud/databases/panel_spec.js
+++ b/spec/frontend/google_cloud/databases/panel_spec.js
@@ -23,10 +23,6 @@ describe('google_cloud/databases/panel', () => {
     wrapper = shallowMountExtended(Panel, { propsData: props });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains incubation banner', () => {
     const target = wrapper.findComponent(IncubationBanner);
     expect(target.exists()).toBe(true);
diff --git a/spec/frontend/google_cloud/databases/service_table_spec.js b/spec/frontend/google_cloud/databases/service_table_spec.js
index 4a622e544e1..4594e1758ad 100644
--- a/spec/frontend/google_cloud/databases/service_table_spec.js
+++ b/spec/frontend/google_cloud/databases/service_table_spec.js
@@ -19,10 +19,6 @@ describe('google_cloud/databases/service_table', () => {
     wrapper = mountExtended(ServiceTable, { propsData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should contain a table', () => {
     expect(findTable().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/deployments/panel_spec.js b/spec/frontend/google_cloud/deployments/panel_spec.js
index 729db1707a7..0748d8f9377 100644
--- a/spec/frontend/google_cloud/deployments/panel_spec.js
+++ b/spec/frontend/google_cloud/deployments/panel_spec.js
@@ -19,10 +19,6 @@ describe('google_cloud/deployments/panel', () => {
     wrapper = shallowMountExtended(Panel, { propsData: props });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains incubation banner', () => {
     const target = wrapper.findComponent(IncubationBanner);
     expect(target.exists()).toBe(true);
diff --git a/spec/frontend/google_cloud/deployments/service_table_spec.js b/spec/frontend/google_cloud/deployments/service_table_spec.js
index 8faad64e313..49220a6007e 100644
--- a/spec/frontend/google_cloud/deployments/service_table_spec.js
+++ b/spec/frontend/google_cloud/deployments/service_table_spec.js
@@ -18,10 +18,6 @@ describe('google_cloud/deployments/service_table', () => {
     wrapper = mount(DeploymentsServiceTable, { propsData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should contain a table', () => {
     expect(findTable().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/gcp_regions/form_spec.js b/spec/frontend/google_cloud/gcp_regions/form_spec.js
index 1030e9c8a18..be37ff092f0 100644
--- a/spec/frontend/google_cloud/gcp_regions/form_spec.js
+++ b/spec/frontend/google_cloud/gcp_regions/form_spec.js
@@ -16,10 +16,6 @@ describe('google_cloud/gcp_regions/form', () => {
     wrapper = shallowMount(GcpRegionsForm, { propsData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains header', () => {
     expect(findHeader().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/gcp_regions/list_spec.js b/spec/frontend/google_cloud/gcp_regions/list_spec.js
index 6d8c389e5a1..74a54b93183 100644
--- a/spec/frontend/google_cloud/gcp_regions/list_spec.js
+++ b/spec/frontend/google_cloud/gcp_regions/list_spec.js
@@ -18,10 +18,6 @@ describe('google_cloud/gcp_regions/list', () => {
       wrapper = mount(GcpRegionsList, { propsData });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('shows the empty state component', () => {
       expect(findEmptyState().exists()).toBe(true);
     });
diff --git a/spec/frontend/google_cloud/service_accounts/form_spec.js b/spec/frontend/google_cloud/service_accounts/form_spec.js
index 8be481774fa..c86c8876b15 100644
--- a/spec/frontend/google_cloud/service_accounts/form_spec.js
+++ b/spec/frontend/google_cloud/service_accounts/form_spec.js
@@ -17,10 +17,6 @@ describe('google_cloud/service_accounts/form', () => {
     wrapper = shallowMount(ServiceAccountsForm, { propsData, stubs: { GlFormCheckbox } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains header', () => {
     expect(findHeader().exists()).toBe(true);
   });
diff --git a/spec/frontend/google_cloud/service_accounts/list_spec.js b/spec/frontend/google_cloud/service_accounts/list_spec.js
index c2bd2005b5d..ae5776081d7 100644
--- a/spec/frontend/google_cloud/service_accounts/list_spec.js
+++ b/spec/frontend/google_cloud/service_accounts/list_spec.js
@@ -18,10 +18,6 @@ describe('google_cloud/service_accounts/list', () => {
       wrapper = mount(ServiceAccountsList, { propsData });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('shows the empty state component', () => {
       expect(findEmptyState().exists()).toBe(true);
     });
diff --git a/spec/frontend/grafana_integration/components/grafana_integration_spec.js b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
index 021a3aa41ed..9cb27670c98 100644
--- a/spec/frontend/grafana_integration/components/grafana_integration_spec.js
+++ b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
@@ -3,14 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('grafana integration component', () => {
   let wrapper;
@@ -103,7 +103,7 @@ describe('grafana integration component', () => {
         expect(refreshCurrentPage).toHaveBeenCalled();
       });
 
-      it('creates flash banner on error', async () => {
+      it('creates alert banner on error', async () => {
         const message = 'mockErrorMessage';
         axios.patch.mockRejectedValue({ response: { data: { message } } });
 
diff --git a/spec/frontend/group_settings/components/shared_runners_form_spec.js b/spec/frontend/group_settings/components/shared_runners_form_spec.js
index 85475c749b0..e92493315f7 100644
--- a/spec/frontend/group_settings/components/shared_runners_form_spec.js
+++ b/spec/frontend/group_settings/components/shared_runners_form_spec.js
@@ -45,9 +45,6 @@ describe('group_settings/components/shared_runners_form', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     updateGroup.mockReset();
   });
 
diff --git a/spec/frontend/groups/components/app_spec.js b/spec/frontend/groups/components/app_spec.js
index 4e6ddd89a55..98868de8475 100644
--- a/spec/frontend/groups/components/app_spec.js
+++ b/spec/frontend/groups/components/app_spec.js
@@ -3,7 +3,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import appComponent from '~/groups/components/app.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
@@ -34,7 +34,7 @@ import {
 const $toast = {
   show: jest.fn(),
 };
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('AppComponent', () => {
   let wrapper;
@@ -65,11 +65,6 @@ describe('AppComponent', () => {
     vm = wrapper.vm;
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeEach(async () => {
     mock = new AxiosMockAdapter(axios);
     mock.onGet('/dashboard/groups.json').reply(HTTP_STATUS_OK, mockGroups);
@@ -117,7 +112,7 @@ describe('AppComponent', () => {
         });
       });
 
-      it('should show flash error when request fails', () => {
+      it('should show alert error when request fails', () => {
         mock.onGet('/dashboard/groups.json').reply(HTTP_STATUS_BAD_REQUEST);
 
         jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
@@ -325,7 +320,7 @@ describe('AppComponent', () => {
         });
       });
 
-      it('should show error flash message if request failed to leave group', () => {
+      it('should show error alert message if request failed to leave group', () => {
         const message = 'An error occurred. Please try again.';
         jest
           .spyOn(vm.service, 'leaveGroup')
@@ -342,7 +337,7 @@ describe('AppComponent', () => {
         });
       });
 
-      it('should show appropriate error flash message if request forbids to leave group', () => {
+      it('should show appropriate error alert message if request forbids to leave group', () => {
         const message = 'Failed to leave the group. Please make sure you are not the only owner.';
         jest.spyOn(vm.service, 'leaveGroup').mockRejectedValue({ status: HTTP_STATUS_FORBIDDEN });
         jest.spyOn(vm.store, 'removeGroup');
diff --git a/spec/frontend/groups/components/empty_states/subgroups_and_projects_empty_state_spec.js b/spec/frontend/groups/components/empty_states/subgroups_and_projects_empty_state_spec.js
index 75edc602fbf..dc4271b98ee 100644
--- a/spec/frontend/groups/components/empty_states/subgroups_and_projects_empty_state_spec.js
+++ b/spec/frontend/groups/components/empty_states/subgroups_and_projects_empty_state_spec.js
@@ -24,10 +24,6 @@ const createComponent = ({ provide = {} } = {}) => {
   });
 };
 
-afterEach(() => {
-  wrapper.destroy();
-});
-
 const findNewSubgroupLink = () =>
   wrapper.findByRole('link', {
     name: new RegExp(SubgroupsAndProjectsEmptyState.i18n.withLinks.subgroup.title),
diff --git a/spec/frontend/groups/components/group_folder_spec.js b/spec/frontend/groups/components/group_folder_spec.js
index f223333360d..da31fb02f69 100644
--- a/spec/frontend/groups/components/group_folder_spec.js
+++ b/spec/frontend/groups/components/group_folder_spec.js
@@ -20,10 +20,6 @@ describe('GroupFolder component', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not render more children stats link when children count of group is under limit', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/groups/components/group_item_spec.js b/spec/frontend/groups/components/group_item_spec.js
index 4570aa33a6c..663dd341a58 100644
--- a/spec/frontend/groups/components/group_item_spec.js
+++ b/spec/frontend/groups/components/group_item_spec.js
@@ -37,10 +37,6 @@ describe('GroupItemComponent', () => {
     return waitForPromises();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const withMicrodata = (group) => ({
     ...group,
     microdata: getGroupItemMicrodata(group),
diff --git a/spec/frontend/groups/components/group_name_and_path_spec.js b/spec/frontend/groups/components/group_name_and_path_spec.js
index 9965b608f27..0a18e657c94 100644
--- a/spec/frontend/groups/components/group_name_and_path_spec.js
+++ b/spec/frontend/groups/components/group_name_and_path_spec.js
@@ -7,11 +7,11 @@ import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import GroupNameAndPath from '~/groups/components/group_name_and_path.vue';
 import { getGroupPathAvailability } from '~/rest_api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import searchGroupsWhereUserCanCreateSubgroups from '~/groups/queries/search_groups_where_user_can_create_subgroups.query.graphql';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/rest_api', () => ({
   getGroupPathAvailability: jest.fn(),
 }));
diff --git a/spec/frontend/groups/components/groups_spec.js b/spec/frontend/groups/components/groups_spec.js
index cae29a8f15a..9ee785d688a 100644
--- a/spec/frontend/groups/components/groups_spec.js
+++ b/spec/frontend/groups/components/groups_spec.js
@@ -37,10 +37,6 @@ describe('GroupsComponent', () => {
     Vue.component('GroupItem', GroupItemComponent);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('methods', () => {
     describe('change', () => {
       it('should emit `fetchPage` event when page is changed via pagination', () => {
diff --git a/spec/frontend/groups/components/invite_members_banner_spec.js b/spec/frontend/groups/components/invite_members_banner_spec.js
index 4a385cb00ee..c4bc35dcd57 100644
--- a/spec/frontend/groups/components/invite_members_banner_spec.js
+++ b/spec/frontend/groups/components/invite_members_banner_spec.js
@@ -42,8 +42,6 @@ describe('InviteMembersBanner', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mockAxios.restore();
     unmockTracking();
   });
@@ -59,7 +57,6 @@ describe('InviteMembersBanner', () => {
     });
 
     const trackCategory = undefined;
-    const buttonClickEvent = 'invite_members_banner_button_clicked';
 
     it('sends the displayEvent when the banner is displayed', () => {
       const displayEvent = 'invite_members_banner_displayed';
@@ -80,12 +77,6 @@ describe('InviteMembersBanner', () => {
           source: 'invite_members_banner',
         });
       });
-
-      it('sends the buttonClickEvent with correct trackCategory and trackLabel', () => {
-        expect(trackingSpy).toHaveBeenCalledWith(trackCategory, buttonClickEvent, {
-          label: provide.trackLabel,
-        });
-      });
     });
 
     it('sends the dismissEvent when the banner is dismissed', () => {
diff --git a/spec/frontend/groups/components/item_actions_spec.js b/spec/frontend/groups/components/item_actions_spec.js
index 3ceb038dd3c..fac6fb77709 100644
--- a/spec/frontend/groups/components/item_actions_spec.js
+++ b/spec/frontend/groups/components/item_actions_spec.js
@@ -18,11 +18,6 @@ describe('ItemActions', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findEditGroupBtn = () => wrapper.findByTestId(`edit-group-${mockParentGroupItem.id}-btn`);
   const findLeaveGroupBtn = () => wrapper.findByTestId(`leave-group-${mockParentGroupItem.id}-btn`);
   const findRemoveGroupBtn = () =>
diff --git a/spec/frontend/groups/components/new_top_level_group_alert_spec.js b/spec/frontend/groups/components/new_top_level_group_alert_spec.js
index db9a5c7b16b..060663747e4 100644
--- a/spec/frontend/groups/components/new_top_level_group_alert_spec.js
+++ b/spec/frontend/groups/components/new_top_level_group_alert_spec.js
@@ -30,10 +30,6 @@ describe('NewTopLevelGroupAlert', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the component is created', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/groups/components/overview_tabs_spec.js b/spec/frontend/groups/components/overview_tabs_spec.js
index d1ae2c4be17..906609c97f9 100644
--- a/spec/frontend/groups/components/overview_tabs_spec.js
+++ b/spec/frontend/groups/components/overview_tabs_spec.js
@@ -76,7 +76,6 @@ describe('OverviewTabs', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
diff --git a/spec/frontend/groups/components/transfer_group_form_spec.js b/spec/frontend/groups/components/transfer_group_form_spec.js
index 0065820f78f..fd0c3907e04 100644
--- a/spec/frontend/groups/components/transfer_group_form_spec.js
+++ b/spec/frontend/groups/components/transfer_group_form_spec.js
@@ -48,10 +48,6 @@ describe('Transfer group form', () => {
   const findTransferLocations = () => wrapper.findComponent(TransferLocations);
   const findHiddenInput = () => wrapper.find('[name="new_parent_group_id"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/groups_projects/components/transfer_locations_spec.js b/spec/frontend/groups_projects/components/transfer_locations_spec.js
index 77c0966ba1e..86913bb4c09 100644
--- a/spec/frontend/groups_projects/components/transfer_locations_spec.js
+++ b/spec/frontend/groups_projects/components/transfer_locations_spec.js
@@ -109,10 +109,6 @@ describe('TransferLocations', () => {
   const intersectionObserverEmitAppear = () => findIntersectionObserver().vm.$emit('appear');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when `GlDropdown` is opened', () => {
     it('shows loading icon', async () => {
       getTransferLocations.mockReturnValueOnce(new Promise(() => {}));
diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index d6263c663d2..8e84c672d90 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -80,10 +80,6 @@ describe('HeaderSearchApp', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findHeaderSearchForm = () => wrapper.findByTestId('header-search-form');
   const findHeaderSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findScopeToken = () => wrapper.findComponent(GlToken);
@@ -187,10 +183,10 @@ describe('HeaderSearchApp', () => {
 
     describe.each`
       username         | showDropdown | expectedDesc
-      ${null}          | ${false}     | ${HeaderSearchApp.i18n.searchInputDescribeByNoDropdown}
-      ${null}          | ${true}      | ${HeaderSearchApp.i18n.searchInputDescribeByNoDropdown}
-      ${MOCK_USERNAME} | ${false}     | ${HeaderSearchApp.i18n.searchInputDescribeByWithDropdown}
-      ${MOCK_USERNAME} | ${true}      | ${HeaderSearchApp.i18n.searchInputDescribeByWithDropdown}
+      ${null}          | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${null}          | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${MOCK_USERNAME} | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
+      ${MOCK_USERNAME} | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
     `('Search Input Description', ({ username, showDropdown, expectedDesc }) => {
       describe(`current_username is ${username} and showDropdown is ${showDropdown}`, () => {
         beforeEach(() => {
@@ -212,7 +208,7 @@ describe('HeaderSearchApp', () => {
       ${MOCK_USERNAME} | ${true}      | ${''}          | ${false} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
       ${MOCK_USERNAME} | ${true}      | ${''}          | ${true}  | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
       ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${false} | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${`Results updated. ${MOCK_SCOPED_SEARCH_OPTIONS.length} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.`}
-      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${true}  | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${HeaderSearchApp.i18n.searchResultsLoading}
+      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${true}  | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${HeaderSearchApp.i18n.SEARCH_RESULTS_LOADING}
     `(
       'Search Results Description',
       ({ username, showDropdown, search, loading, searchOptions, expectedDesc }) => {
@@ -354,8 +350,8 @@ describe('HeaderSearchApp', () => {
 
   describe('events', () => {
     beforeEach(() => {
-      createComponent();
       window.gon.current_username = MOCK_USERNAME;
+      createComponent();
     });
 
     describe('Header Search Input', () => {
@@ -463,8 +459,8 @@ describe('HeaderSearchApp', () => {
       ${2}                | ${'test1'}
     `('currentFocusedOption', ({ MOCK_INDEX, search }) => {
       beforeEach(() => {
-        createComponent({ search });
         window.gon.current_username = MOCK_USERNAME;
+        createComponent({ search });
         findHeaderSearchInput().vm.$emit('click');
       });
 
@@ -504,8 +500,8 @@ describe('HeaderSearchApp', () => {
       const MOCK_INDEX = 1;
 
       beforeEach(() => {
-        createComponent();
         window.gon.current_username = MOCK_USERNAME;
+        createComponent();
         findHeaderSearchInput().vm.$emit('click');
       });
 
diff --git a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
index 7952661e2d2..e77a9231b7a 100644
--- a/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_autocomplete_items_spec.js
@@ -3,15 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import HeaderSearchAutocompleteItems from '~/header_search/components/header_search_autocomplete_items.vue';
+import { LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '~/header_search/constants';
 import {
-  GROUPS_CATEGORY,
-  LARGE_AVATAR_PX,
   PROJECTS_CATEGORY,
-  SMALL_AVATAR_PX,
+  GROUPS_CATEGORY,
   ISSUES_CATEGORY,
   MERGE_REQUEST_CATEGORY,
   RECENT_EPICS_CATEGORY,
-} from '~/header_search/constants';
+} from '~/vue_shared/global_search/constants';
 import {
   MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
   MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
@@ -46,10 +45,6 @@ describe('HeaderSearchAutocompleteItems', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findGlDropdownDividers = () => wrapper.findAllComponents(GlDropdownDivider);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
diff --git a/spec/frontend/header_search/components/header_search_default_items_spec.js b/spec/frontend/header_search/components/header_search_default_items_spec.js
index abcacc487df..3768862d83e 100644
--- a/spec/frontend/header_search/components/header_search_default_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_default_items_spec.js
@@ -29,10 +29,6 @@ describe('HeaderSearchDefaultItems', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
diff --git a/spec/frontend/header_search/components/header_search_scoped_items_spec.js b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
index 2db9f71d702..51d67198f04 100644
--- a/spec/frontend/header_search/components/header_search_scoped_items_spec.js
+++ b/spec/frontend/header_search/components/header_search_scoped_items_spec.js
@@ -5,7 +5,8 @@ import Vuex from 'vuex';
 import { trimText } from 'helpers/text_helper';
 import HeaderSearchScopedItems from '~/header_search/components/header_search_scoped_items.vue';
 import { truncate } from '~/lib/utils/text_utility';
-import { MSG_IN_ALL_GITLAB, SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
+import { SCOPE_TOKEN_MAX_LENGTH } from '~/header_search/constants';
+import { MSG_IN_ALL_GITLAB } from '~/vue_shared/global_search/constants';
 import {
   MOCK_SEARCH,
   MOCK_SCOPED_SEARCH_OPTIONS,
@@ -38,10 +39,6 @@ describe('HeaderSearchScopedItems', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findFirstDropdownItem = () => findDropdownItems().at(0);
   const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => trimText(w.text()));
diff --git a/spec/frontend/header_search/mock_data.js b/spec/frontend/header_search/mock_data.js
index 3a8624ad9dd..2218c81efc3 100644
--- a/spec/frontend/header_search/mock_data.js
+++ b/spec/frontend/header_search/mock_data.js
@@ -1,16 +1,14 @@
+import { ICON_PROJECT, ICON_GROUP, ICON_SUBGROUP } from '~/header_search/constants';
 import {
+  PROJECTS_CATEGORY,
+  GROUPS_CATEGORY,
   MSG_ISSUES_ASSIGNED_TO_ME,
   MSG_ISSUES_IVE_CREATED,
   MSG_MR_ASSIGNED_TO_ME,
   MSG_MR_IM_REVIEWER,
   MSG_MR_IVE_CREATED,
   MSG_IN_ALL_GITLAB,
-  PROJECTS_CATEGORY,
-  ICON_PROJECT,
-  GROUPS_CATEGORY,
-  ICON_GROUP,
-  ICON_SUBGROUP,
-} from '~/header_search/constants';
+} from '~/vue_shared/global_search/constants';
 
 export const MOCK_USERNAME = 'anyone';
 
diff --git a/spec/frontend/header_search/store/actions_spec.js b/spec/frontend/header_search/store/actions_spec.js
index bd93b0edadf..95a619ebeca 100644
--- a/spec/frontend/header_search/store/actions_spec.js
+++ b/spec/frontend/header_search/store/actions_spec.js
@@ -16,7 +16,7 @@ import {
   MOCK_ISSUE_PATH,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Header Search Store Actions', () => {
   let state;
diff --git a/spec/frontend/header_search/store/getters_spec.js b/spec/frontend/header_search/store/getters_spec.js
index a1d9481b5cc..7a7a00178f1 100644
--- a/spec/frontend/header_search/store/getters_spec.js
+++ b/spec/frontend/header_search/store/getters_spec.js
@@ -241,6 +241,13 @@ describe('Header Search Store Getters', () => {
         MOCK_DEFAULT_SEARCH_OPTIONS,
       );
     });
+
+    it('returns the correct array if issues path is false', () => {
+      mockGetters.scopedIssuesPath = undefined;
+      expect(getters.defaultSearchOptions(state, mockGetters)).toStrictEqual(
+        MOCK_DEFAULT_SEARCH_OPTIONS.slice(2, MOCK_DEFAULT_SEARCH_OPTIONS.length),
+      );
+    });
   });
 
   describe('scopedSearchOptions', () => {
diff --git a/spec/frontend/helpers/startup_css_helper_spec.js b/spec/frontend/helpers/startup_css_helper_spec.js
index 05161437c22..28c742386cc 100644
--- a/spec/frontend/helpers/startup_css_helper_spec.js
+++ b/spec/frontend/helpers/startup_css_helper_spec.js
@@ -21,17 +21,10 @@ describe('waitForCSSLoaded', () => {
   });
 
   describe('when gon features is not provided', () => {
-    let originalGon;
-
     beforeEach(() => {
-      originalGon = window.gon;
       window.gon = null;
     });
 
-    afterEach(() => {
-      window.gon = originalGon;
-    });
-
     it('should invoke the action right away', async () => {
       const events = waitForCSSLoaded(mockedCallback);
       await events;
diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js
index a97e883a8bf..ff04f9a84f1 100644
--- a/spec/frontend/ide/components/activity_bar_spec.js
+++ b/spec/frontend/ide/components/activity_bar_spec.js
@@ -22,10 +22,6 @@ describe('IDE ActivityBar component', () => {
     wrapper = shallowMount(ActivityBar, { store });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('updateActivityBarView', () => {
     beforeEach(() => {
       mountComponent();
diff --git a/spec/frontend/ide/components/branches/item_spec.js b/spec/frontend/ide/components/branches/item_spec.js
index 3dbd1210916..4cae146cbd2 100644
--- a/spec/frontend/ide/components/branches/item_spec.js
+++ b/spec/frontend/ide/components/branches/item_spec.js
@@ -34,10 +34,6 @@ describe('IDE branch item', () => {
     router = createRouter(store);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('if not active', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/branches/search_list_spec.js b/spec/frontend/ide/components/branches/search_list_spec.js
index bbde45d700f..eeab26f7559 100644
--- a/spec/frontend/ide/components/branches/search_list_spec.js
+++ b/spec/frontend/ide/components/branches/search_list_spec.js
@@ -35,11 +35,6 @@ describe('IDE branches search list', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('calls fetch on mounted', () => {
     createComponent();
     expect(fetchBranchesMock).toHaveBeenCalled();
diff --git a/spec/frontend/ide/components/cannot_push_code_alert_spec.js b/spec/frontend/ide/components/cannot_push_code_alert_spec.js
index ff659ecdf3f..d4db2246008 100644
--- a/spec/frontend/ide/components/cannot_push_code_alert_spec.js
+++ b/spec/frontend/ide/components/cannot_push_code_alert_spec.js
@@ -10,10 +10,6 @@ const TEST_BUTTON_TEXT = 'Fork text';
 describe('ide/components/cannot_push_code_alert', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = (props = {}) => {
     wrapper = shallowMount(CannotPushCodeAlert, {
       propsData: {
diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
index dc103fec5d0..019469cbf87 100644
--- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
@@ -46,10 +46,6 @@ describe('IDE commit sidebar actions', () => {
     jest.spyOn(store, 'dispatch').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findText = () => wrapper.text();
   const findRadios = () => wrapper.findAll('input[type="radio"]');
 
diff --git a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
index f6d5833edee..ce43e648b43 100644
--- a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
@@ -1,7 +1,9 @@
-import { mount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import EditorHeader from '~/ide/components/commit_sidebar/editor_header.vue';
+import { stubComponent } from 'helpers/stub_component';
 import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
@@ -12,9 +14,10 @@ const TEST_FILE_PATH = 'test/file/path';
 describe('IDE commit editor header', () => {
   let wrapper;
   let store;
+  const showMock = jest.fn();
 
   const createComponent = (fileProps = {}) => {
-    wrapper = mount(EditorHeader, {
+    wrapper = shallowMount(EditorHeader, {
       store,
       propsData: {
         activeFile: {
@@ -23,22 +26,17 @@ describe('IDE commit editor header', () => {
           ...fileProps,
         },
       },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          methods: { show: showMock },
+        }),
+      },
     });
   };
 
   const findDiscardModal = () => wrapper.findComponent({ ref: 'discardModal' });
   const findDiscardButton = () => wrapper.findComponent({ ref: 'discardButton' });
 
-  beforeEach(() => {
-    store = createStore();
-    jest.spyOn(store, 'dispatch').mockImplementation();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     fileProps                            | shouldExist
     ${{ staged: false, changed: false }} | ${false}
@@ -52,20 +50,19 @@ describe('IDE commit editor header', () => {
   });
 
   describe('discard button', () => {
-    beforeEach(() => {
+    it('opens a dialog confirming discard', () => {
       createComponent();
+      findDiscardButton().vm.$emit('click');
 
-      const modal = findDiscardModal();
-      jest.spyOn(modal.vm, 'show');
-
-      findDiscardButton().trigger('click');
-    });
-
-    it('opens a dialog confirming discard', () => {
-      expect(findDiscardModal().vm.show).toHaveBeenCalled();
+      expect(showMock).toHaveBeenCalled();
     });
 
     it('calls discardFileChanges if dialog result is confirmed', () => {
+      store = createStore();
+      jest.spyOn(store, 'dispatch').mockImplementation();
+
+      createComponent();
+
       expect(store.dispatch).not.toHaveBeenCalled();
 
       findDiscardModal().vm.$emit('primary');
diff --git a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
index 7c48c0e6f95..4a6aafe42ae 100644
--- a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js
@@ -11,10 +11,6 @@ describe('IDE commit panel EmptyState component', () => {
     wrapper = shallowMount(EmptyState, { store });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders no changes text when last commit message is empty', () => {
     expect(wrapper.find('h4').text()).toBe('No changes');
   });
diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js
index a8ee81afa0b..0c0998c037a 100644
--- a/spec/frontend/ide/components/commit_sidebar/form_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js
@@ -26,7 +26,7 @@ describe('IDE commit form', () => {
     wrapper = shallowMount(CommitForm, {
       store,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       stubs: {
         GlModal: stubComponent(GlModal),
@@ -73,10 +73,6 @@ describe('IDE commit form', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   // Notes:
   // - When there are no changes, there is no commit button so there's nothing to test :)
   describe.each`
diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
index c9571d39acb..c2a33c0d71e 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
@@ -36,10 +36,6 @@ describe('Multi-file editor commit sidebar list item', () => {
     findPathEl = wrapper.find('.multi-file-commit-list-path');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findPathText = () => trimText(findPathEl.text());
 
   it('renders file path', () => {
diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js
index 4406d14d990..6b9ba939a87 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js
@@ -19,10 +19,6 @@ describe('Multi-file editor commit sidebar list', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with a list of files', () => {
     beforeEach(async () => {
       const f = file('file name');
diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
index c2ef29c1059..3403a7b8ad9 100644
--- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
@@ -15,10 +15,6 @@ describe('IDE commit message field', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findMessage = () => wrapper.find('textarea');
   const findHighlights = () => wrapper.findAll('.highlights span');
   const findMarks = () => wrapper.findAll('mark');
diff --git a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
index 2a455c9d7c1..adc9a0f1421 100644
--- a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js
@@ -33,15 +33,11 @@ describe('NewMergeRequestOption component', () => {
         },
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the `shouldHideNewMrOption` getter returns false', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
index a3fa03a4aa5..cdf14056523 100644
--- a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
@@ -19,15 +19,11 @@ describe('IDE commit sidebar radio group', () => {
       propsData: config.props,
       slots: config.slots,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without input', () => {
     const props = {
       value: '1',
diff --git a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
index 63d51953915..d1a81dd1639 100644
--- a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js
@@ -12,10 +12,6 @@ describe('IDE commit panel successful commit state', () => {
     wrapper = shallowMount(SuccessMessage, { store });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders last commit message when it exists', () => {
     expect(wrapper.text()).toContain('testing commit message');
   });
diff --git a/spec/frontend/ide/components/error_message_spec.js b/spec/frontend/ide/components/error_message_spec.js
index 204d39de741..5f6579654bc 100644
--- a/spec/frontend/ide/components/error_message_spec.js
+++ b/spec/frontend/ide/components/error_message_spec.js
@@ -32,11 +32,6 @@ describe('IDE error message component', () => {
     setErrorMessageMock.mockReset();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findDismissButton = () => wrapper.find('button[aria-label=Dismiss]');
   const findActionButton = () => wrapper.find('button.gl-alert-action');
 
diff --git a/spec/frontend/ide/components/file_row_extra_spec.js b/spec/frontend/ide/components/file_row_extra_spec.js
index 281c549a1b4..f5a6e7222f9 100644
--- a/spec/frontend/ide/components/file_row_extra_spec.js
+++ b/spec/frontend/ide/components/file_row_extra_spec.js
@@ -37,8 +37,6 @@ describe('IDE extra file row component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
-
     stagedFilesCount = 0;
     unstagedFilesCount = 0;
     changesCount = 0;
diff --git a/spec/frontend/ide/components/file_templates/bar_spec.js b/spec/frontend/ide/components/file_templates/bar_spec.js
index 60f37260393..b8c850fdd13 100644
--- a/spec/frontend/ide/components/file_templates/bar_spec.js
+++ b/spec/frontend/ide/components/file_templates/bar_spec.js
@@ -21,10 +21,6 @@ describe('IDE file templates bar component', () => {
     wrapper = mount(Bar, { store });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template type dropdown', () => {
     it('renders dropdown component', () => {
       expect(wrapper.find('.dropdown').text()).toContain('Choose a type');
diff --git a/spec/frontend/ide/components/file_templates/dropdown_spec.js b/spec/frontend/ide/components/file_templates/dropdown_spec.js
index ee90d87357c..72fdd05eb2c 100644
--- a/spec/frontend/ide/components/file_templates/dropdown_spec.js
+++ b/spec/frontend/ide/components/file_templates/dropdown_spec.js
@@ -49,11 +49,6 @@ describe('IDE file templates dropdown component', () => {
     ({ element } = wrapper);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('calls clickItem on click', async () => {
     const itemData = { name: 'test.yml ' };
     createComponent({ props: { data: [itemData] } });
diff --git a/spec/frontend/ide/components/ide_file_row_spec.js b/spec/frontend/ide/components/ide_file_row_spec.js
index aa66224fa19..331877ff112 100644
--- a/spec/frontend/ide/components/ide_file_row_spec.js
+++ b/spec/frontend/ide/components/ide_file_row_spec.js
@@ -34,11 +34,6 @@ describe('Ide File Row component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findFileRowExtra = () => wrapper.findComponent(FileRowExtra);
   const findFileRow = () => wrapper.findComponent(FileRow);
   const hasDropdownOpen = () => findFileRowExtra().props('dropdownOpen');
diff --git a/spec/frontend/ide/components/ide_project_header_spec.js b/spec/frontend/ide/components/ide_project_header_spec.js
index d0636352a3f..7613f407e45 100644
--- a/spec/frontend/ide/components/ide_project_header_spec.js
+++ b/spec/frontend/ide/components/ide_project_header_spec.js
@@ -20,10 +20,6 @@ describe('IDE project header', () => {
     wrapper = shallowMount(IDEProjectHeader, { propsData: { project: mockProject } });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/ide_review_spec.js b/spec/frontend/ide/components/ide_review_spec.js
index 0759f957374..e6fd018969f 100644
--- a/spec/frontend/ide/components/ide_review_spec.js
+++ b/spec/frontend/ide/components/ide_review_spec.js
@@ -30,10 +30,6 @@ describe('IDE review mode', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders list of files', () => {
     expect(wrapper.text()).toContain('fileName');
   });
diff --git a/spec/frontend/ide/components/ide_side_bar_spec.js b/spec/frontend/ide/components/ide_side_bar_spec.js
index 4784d6c516f..c258c5312d8 100644
--- a/spec/frontend/ide/components/ide_side_bar_spec.js
+++ b/spec/frontend/ide/components/ide_side_bar_spec.js
@@ -29,11 +29,6 @@ describe('IdeSidebar', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders a sidebar', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/ide/components/ide_sidebar_nav_spec.js b/spec/frontend/ide/components/ide_sidebar_nav_spec.js
index 80e8aba4072..4ee24f63f76 100644
--- a/spec/frontend/ide/components/ide_sidebar_nav_spec.js
+++ b/spec/frontend/ide/components/ide_sidebar_nav_spec.js
@@ -25,10 +25,6 @@ describe('ide/components/ide_sidebar_nav', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    if (wrapper) {
-      throw new Error('wrapper already exists');
-    }
-
     wrapper = shallowMount(IdeSidebarNav, {
       propsData: {
         tabs: TEST_TABS,
@@ -37,16 +33,11 @@ describe('ide/components/ide_sidebar_nav', () => {
         ...props,
       },
       directives: {
-        tooltip: createMockDirective(),
+        tooltip: createMockDirective('tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findButtons = () => wrapper.findAll('li button');
   const findButtonsData = () =>
     findButtons().wrappers.map((button) => {
diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js
index a575f428a69..1c8d570cdce 100644
--- a/spec/frontend/ide/components/ide_spec.js
+++ b/spec/frontend/ide/components/ide_spec.js
@@ -52,8 +52,6 @@ describe('WebIDE', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     window.onbeforeunload = null;
   });
 
diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js
index e6e0ebaf1e8..0ee16f98e7e 100644
--- a/spec/frontend/ide/components/ide_status_bar_spec.js
+++ b/spec/frontend/ide/components/ide_status_bar_spec.js
@@ -34,10 +34,6 @@ describe('IdeStatusBar component', () => {
     wrapper = mount(IdeStatusBar, { store });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     it('triggers a setInterval', () => {
       mountComponent();
diff --git a/spec/frontend/ide/components/ide_status_list_spec.js b/spec/frontend/ide/components/ide_status_list_spec.js
index 0b54e8b6afb..344a1fbc4f6 100644
--- a/spec/frontend/ide/components/ide_status_list_spec.js
+++ b/spec/frontend/ide/components/ide_status_list_spec.js
@@ -53,10 +53,7 @@ describe('ide/components/ide_status_list', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-
     store = null;
-    wrapper = null;
   });
 
   describe('with regular file', () => {
diff --git a/spec/frontend/ide/components/ide_status_mr_spec.js b/spec/frontend/ide/components/ide_status_mr_spec.js
index 0b9111c0e2a..3501ecce061 100644
--- a/spec/frontend/ide/components/ide_status_mr_spec.js
+++ b/spec/frontend/ide/components/ide_status_mr_spec.js
@@ -17,10 +17,6 @@ describe('ide/components/ide_status_mr', () => {
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findLink = () => wrapper.findComponent(GlLink);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when mounted', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/ide/components/ide_tree_list_spec.js b/spec/frontend/ide/components/ide_tree_list_spec.js
index 0f61aa80e53..427daa57324 100644
--- a/spec/frontend/ide/components/ide_tree_list_spec.js
+++ b/spec/frontend/ide/components/ide_tree_list_spec.js
@@ -25,10 +25,6 @@ describe('IdeTreeList component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('normal branch', () => {
     const tree = [file('fileName')];
 
diff --git a/spec/frontend/ide/components/ide_tree_spec.js b/spec/frontend/ide/components/ide_tree_spec.js
index f00017a2736..9f452910496 100644
--- a/spec/frontend/ide/components/ide_tree_spec.js
+++ b/spec/frontend/ide/components/ide_tree_spec.js
@@ -29,10 +29,6 @@ describe('IdeTree', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders list of files', () => {
     expect(wrapper.text()).toContain('fileName');
   });
diff --git a/spec/frontend/ide/components/jobs/detail/description_spec.js b/spec/frontend/ide/components/jobs/detail/description_spec.js
index 629c4424314..2bb0f3fccf4 100644
--- a/spec/frontend/ide/components/jobs/detail/description_spec.js
+++ b/spec/frontend/ide/components/jobs/detail/description_spec.js
@@ -14,10 +14,6 @@ describe('IDE job description', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders job details', () => {
     expect(wrapper.text()).toContain('#1');
     expect(wrapper.text()).toContain('test');
diff --git a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js
index 5eb66f75978..eec1bd6b123 100644
--- a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js
+++ b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js
@@ -15,10 +15,6 @@ describe('IDE job log scroll button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     direction | icon             | title
     ${'up'}   | ${'scroll_up'}   | ${'Scroll to top'}
diff --git a/spec/frontend/ide/components/jobs/detail_spec.js b/spec/frontend/ide/components/jobs/detail_spec.js
index bf2be3aa595..60e03a7b882 100644
--- a/spec/frontend/ide/components/jobs/detail_spec.js
+++ b/spec/frontend/ide/components/jobs/detail_spec.js
@@ -34,10 +34,6 @@ describe('IDE jobs detail view', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('mounted', () => {
     const findJobOutput = () => wrapper.find('.bash');
     const findBuildLoaderAnimation = () => wrapper.find('.build-loader-animation');
diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js
index 32e27333e42..ab442a27817 100644
--- a/spec/frontend/ide/components/jobs/item_spec.js
+++ b/spec/frontend/ide/components/jobs/item_spec.js
@@ -12,10 +12,6 @@ describe('IDE jobs item', () => {
     wrapper = mount(JobItem, { propsData: { job } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders job details', () => {
     expect(wrapper.text()).toContain(job.name);
     expect(wrapper.text()).toContain(`#${job.id}`);
diff --git a/spec/frontend/ide/components/jobs/stage_spec.js b/spec/frontend/ide/components/jobs/stage_spec.js
index 52fbff2f497..23ef92f9682 100644
--- a/spec/frontend/ide/components/jobs/stage_spec.js
+++ b/spec/frontend/ide/components/jobs/stage_spec.js
@@ -31,11 +31,6 @@ describe('IDE pipeline stage', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('emits fetch event when mounted', () => {
     createComponent();
     expect(wrapper.emitted().fetch).toBeDefined();
diff --git a/spec/frontend/ide/components/merge_requests/item_spec.js b/spec/frontend/ide/components/merge_requests/item_spec.js
index d6cf8127b53..2fbb6919b8b 100644
--- a/spec/frontend/ide/components/merge_requests/item_spec.js
+++ b/spec/frontend/ide/components/merge_requests/item_spec.js
@@ -39,11 +39,6 @@ describe('IDE merge request item', () => {
     router = createRouter(store);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/merge_requests/list_spec.js b/spec/frontend/ide/components/merge_requests/list_spec.js
index ea6e2741a85..3b0e8c632fb 100644
--- a/spec/frontend/ide/components/merge_requests/list_spec.js
+++ b/spec/frontend/ide/components/merge_requests/list_spec.js
@@ -48,11 +48,6 @@ describe('IDE merge requests list', () => {
     fetchMergeRequestsMock = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('calls fetch on mounted', () => {
     createComponent();
     expect(fetchMergeRequestsMock).toHaveBeenCalledWith(expect.any(Object), {
diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js
index 8eebcdd9e08..3aae2c83e80 100644
--- a/spec/frontend/ide/components/nav_dropdown_button_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js
@@ -9,10 +9,6 @@ describe('NavDropdownButton component', () => {
   const TEST_MR_ID = '12345';
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = ({ props = {}, state = {} } = {}) => {
     const store = createStore();
     store.replaceState(state);
diff --git a/spec/frontend/ide/components/nav_dropdown_spec.js b/spec/frontend/ide/components/nav_dropdown_spec.js
index 33e638843f5..794aaba6d01 100644
--- a/spec/frontend/ide/components/nav_dropdown_spec.js
+++ b/spec/frontend/ide/components/nav_dropdown_spec.js
@@ -30,10 +30,6 @@ describe('IDE NavDropdown', () => {
     jest.spyOn(store, 'dispatch').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = () => {
     wrapper = mount(NavDropdown, {
       store,
diff --git a/spec/frontend/ide/components/new_dropdown/button_spec.js b/spec/frontend/ide/components/new_dropdown/button_spec.js
index a9cfdfd20c1..bfd5cdf7263 100644
--- a/spec/frontend/ide/components/new_dropdown/button_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/button_spec.js
@@ -14,10 +14,6 @@ describe('IDE new entry dropdown button component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders button with label', () => {
     createComponent();
 
diff --git a/spec/frontend/ide/components/new_dropdown/index_spec.js b/spec/frontend/ide/components/new_dropdown/index_spec.js
index 747c099db33..01dcb174c41 100644
--- a/spec/frontend/ide/components/new_dropdown/index_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/index_spec.js
@@ -30,10 +30,6 @@ describe('new dropdown component', () => {
     jest.spyOn(wrapper.vm.$refs.newModal, 'open').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders new file, upload and new directory links', () => {
     expect(findAllButtons().at(0).text()).toBe('New file');
     expect(findAllButtons().at(1).text()).toBe('Upload file');
diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js
index c6f9fd0c4ea..36c3d323e63 100644
--- a/spec/frontend/ide/components/new_dropdown/modal_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js
@@ -1,13 +1,13 @@
 import { GlButton, GlModal } from '@gitlab/ui';
 import { nextTick } from 'vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import Modal from '~/ide/components/new_dropdown/modal.vue';
 import { createStore } from '~/ide/stores';
 import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createEntriesFromPaths } from '../../helpers';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const NEW_NAME = 'babar';
 
@@ -79,7 +79,6 @@ describe('new file modal component', () => {
 
   afterEach(() => {
     store = null;
-    wrapper.destroy();
     document.body.innerHTML = '';
   });
 
@@ -94,11 +93,11 @@ describe('new file modal component', () => {
     it('renders modal', () => {
       expect(findGlModal().props()).toMatchObject({
         actionCancel: {
-          attributes: [{ variant: 'default' }],
+          attributes: { variant: 'default' },
           text: 'Cancel',
         },
         actionPrimary: {
-          attributes: [{ variant: 'confirm' }],
+          attributes: { variant: 'confirm' },
           text: 'Create file',
         },
         actionSecondary: null,
@@ -170,7 +169,7 @@ describe('new file modal component', () => {
         expect(findGlModal().props()).toMatchObject({
           title: modalTitle,
           actionPrimary: {
-            attributes: [{ variant: 'confirm' }],
+            attributes: { variant: 'confirm' },
             text: btnTitle,
           },
         });
@@ -298,7 +297,7 @@ describe('new file modal component', () => {
       expect(findGlModal().props()).toMatchObject({
         title,
         actionPrimary: {
-          attributes: [{ variant: 'confirm' }],
+          attributes: { variant: 'confirm' },
           text: title,
         },
       });
@@ -340,7 +339,7 @@ describe('new file modal component', () => {
           });
         });
 
-        it('does not trigger flash', () => {
+        it('does not trigger alert', () => {
           expect(createAlert).not.toHaveBeenCalled();
         });
       });
@@ -359,7 +358,7 @@ describe('new file modal component', () => {
           });
         });
 
-        it('does not trigger flash', () => {
+        it('does not trigger alert', () => {
           expect(createAlert).not.toHaveBeenCalled();
         });
       });
@@ -379,7 +378,7 @@ describe('new file modal component', () => {
       triggerSubmitModal();
     });
 
-    it('creates flash', () => {
+    it('creates alert', () => {
       expect(createAlert).toHaveBeenCalledWith({
         message: 'The name "src" is already taken in this directory.',
         fadeTransition: false,
@@ -404,7 +403,7 @@ describe('new file modal component', () => {
       triggerSubmitModal();
     });
 
-    it('does not create flash', () => {
+    it('does not create alert', () => {
       expect(createAlert).not.toHaveBeenCalled();
     });
 
diff --git a/spec/frontend/ide/components/new_dropdown/upload_spec.js b/spec/frontend/ide/components/new_dropdown/upload_spec.js
index fc643589d51..40780c7f0bd 100644
--- a/spec/frontend/ide/components/new_dropdown/upload_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/upload_spec.js
@@ -12,10 +12,6 @@ describe('new dropdown upload', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('openFile', () => {
     it('calls for each file', () => {
       const files = ['test', 'test2', 'test3'];
diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js
index e92f843ae6e..42eb5b3fc7a 100644
--- a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js
+++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js
@@ -35,11 +35,6 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => {
     jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with a tab', () => {
     let fakeView;
     let extensionTabs;
diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js
index 1d81c3ea89d..832983edf21 100644
--- a/spec/frontend/ide/components/panes/right_spec.js
+++ b/spec/frontend/ide/components/panes/right_spec.js
@@ -28,11 +28,6 @@ describe('ide/components/panes/right.vue', () => {
     store = createStore();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/pipelines/empty_state_spec.js b/spec/frontend/ide/components/pipelines/empty_state_spec.js
index 31081e8f9d5..71de9aecb52 100644
--- a/spec/frontend/ide/components/pipelines/empty_state_spec.js
+++ b/spec/frontend/ide/components/pipelines/empty_state_spec.js
@@ -22,10 +22,6 @@ describe('~/ide/components/pipelines/empty_state.vue', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/ide/components/pipelines/list_spec.js b/spec/frontend/ide/components/pipelines/list_spec.js
index d82b97561f0..e913fa84d56 100644
--- a/spec/frontend/ide/components/pipelines/list_spec.js
+++ b/spec/frontend/ide/components/pipelines/list_spec.js
@@ -65,11 +65,6 @@ describe('IDE pipelines list', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('fetches latest pipeline', () => {
     createComponent();
 
diff --git a/spec/frontend/ide/components/repo_commit_section_spec.js b/spec/frontend/ide/components/repo_commit_section_spec.js
index d3312358402..92bb645b1c0 100644
--- a/spec/frontend/ide/components/repo_commit_section_spec.js
+++ b/spec/frontend/ide/components/repo_commit_section_spec.js
@@ -63,11 +63,6 @@ describe('RepoCommitSection', () => {
     jest.spyOn(router, 'push').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('empty state', () => {
     beforeEach(() => {
       store.state.noChangesStateSvgPath = TEST_NO_CHANGES_SVG;
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index c9f033bffbb..9253bfc7e71 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -162,8 +162,6 @@ describe('RepoEditor', () => {
     // create a new model each time, otherwise tests conflict with each other
     // because of same model being used in multiple tests
     monacoEditor.getModels().forEach((model) => model.dispose());
-    wrapper.destroy();
-    wrapper = null;
   });
 
   describe('default', () => {
diff --git a/spec/frontend/ide/components/repo_tab_spec.js b/spec/frontend/ide/components/repo_tab_spec.js
index b26edc5a85b..b329baea783 100644
--- a/spec/frontend/ide/components/repo_tab_spec.js
+++ b/spec/frontend/ide/components/repo_tab_spec.js
@@ -37,11 +37,6 @@ describe('RepoTab', () => {
     jest.spyOn(router, 'push').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders a close link and a name link', () => {
     createComponent({
       tab: file(),
diff --git a/spec/frontend/ide/components/repo_tabs_spec.js b/spec/frontend/ide/components/repo_tabs_spec.js
index 1cfc1f12745..06ad162d398 100644
--- a/spec/frontend/ide/components/repo_tabs_spec.js
+++ b/spec/frontend/ide/components/repo_tabs_spec.js
@@ -25,10 +25,6 @@ describe('RepoTabs', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a list of tabs', async () => {
     store.state.openFiles[0].active = true;
 
diff --git a/spec/frontend/ide/components/resizable_panel_spec.js b/spec/frontend/ide/components/resizable_panel_spec.js
index fe2a128c9c8..240e675a38e 100644
--- a/spec/frontend/ide/components/resizable_panel_spec.js
+++ b/spec/frontend/ide/components/resizable_panel_spec.js
@@ -19,11 +19,6 @@ describe('~/ide/components/resizable_panel', () => {
     jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const createComponent = (props = {}) => {
     wrapper = shallowMount(ResizablePanel, {
       propsData: {
diff --git a/spec/frontend/ide/components/shared/commit_message_field_spec.js b/spec/frontend/ide/components/shared/commit_message_field_spec.js
index 94da06f4cb2..186b1997497 100644
--- a/spec/frontend/ide/components/shared/commit_message_field_spec.js
+++ b/spec/frontend/ide/components/shared/commit_message_field_spec.js
@@ -23,10 +23,6 @@ describe('CommitMessageField', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTextArea = () => wrapper.find('textarea');
   const findHighlights = () => wrapper.findByTestId('highlights');
   const findHighlightsText = () => wrapper.findByTestId('highlights-text');
diff --git a/spec/frontend/ide/components/shared/tokened_input_spec.js b/spec/frontend/ide/components/shared/tokened_input_spec.js
index b70c9659e46..4bd5a6527e2 100644
--- a/spec/frontend/ide/components/shared/tokened_input_spec.js
+++ b/spec/frontend/ide/components/shared/tokened_input_spec.js
@@ -28,10 +28,6 @@ describe('IDE shared/TokenedInput', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders tokens', () => {
     createComponent();
     const renderedTokens = getTokenElements(wrapper).wrappers.map((w) => w.text());
diff --git a/spec/frontend/ide/components/terminal/empty_state_spec.js b/spec/frontend/ide/components/terminal/empty_state_spec.js
index 15fb0fe9013..3a691c151d5 100644
--- a/spec/frontend/ide/components/terminal/empty_state_spec.js
+++ b/spec/frontend/ide/components/terminal/empty_state_spec.js
@@ -16,10 +16,6 @@ describe('IDE TerminalEmptyState', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not show illustration, if no path specified', () => {
     factory();
 
diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js
index 0d22f7f73fe..0500c116d23 100644
--- a/spec/frontend/ide/components/terminal/terminal_spec.js
+++ b/spec/frontend/ide/components/terminal/terminal_spec.js
@@ -59,10 +59,6 @@ describe('IDE Terminal', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading text', () => {
     [STARTING, PENDING].forEach((status) => {
       it(`shows when starting (${status})`, () => {
diff --git a/spec/frontend/ide/components/terminal/view_spec.js b/spec/frontend/ide/components/terminal/view_spec.js
index 57c8da9f5b7..b8ffaa89047 100644
--- a/spec/frontend/ide/components/terminal/view_spec.js
+++ b/spec/frontend/ide/components/terminal/view_spec.js
@@ -59,10 +59,6 @@ describe('IDE TerminalView', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders empty state', async () => {
     await factory();
 
diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js
index 5b1502cc190..e420e28c7b6 100644
--- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js
+++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js
@@ -22,10 +22,6 @@ describe('ide/components/terminal_sync/terminal_sync_status_safe', () => {
 
   beforeEach(createComponent);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with terminal sync module in store', () => {
     beforeEach(() => {
       store.registerModule('terminalSync', {
diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js
index 147235abc8e..4541c3b5ec8 100644
--- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js
+++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js
@@ -48,10 +48,6 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when doing nothing', () => {
     it('shows nothing', () => {
       createComponent();
diff --git a/spec/frontend/ide/services/index_spec.js b/spec/frontend/ide/services/index_spec.js
index 623dee387e5..cd099e60070 100644
--- a/spec/frontend/ide/services/index_spec.js
+++ b/spec/frontend/ide/services/index_spec.js
@@ -252,12 +252,10 @@ describe('IDE services', () => {
 
   describe('pingUsage', () => {
     let mock;
-    let relativeUrlRoot;
     const TEST_RELATIVE_URL_ROOT = 'blah-blah';
 
     beforeEach(() => {
       jest.spyOn(axios, 'post');
-      relativeUrlRoot = gon.relative_url_root;
       gon.relative_url_root = TEST_RELATIVE_URL_ROOT;
 
       mock = new MockAdapter(axios);
@@ -265,7 +263,6 @@ describe('IDE services', () => {
 
     afterEach(() => {
       mock.restore();
-      gon.relative_url_root = relativeUrlRoot;
     });
 
     it('posts to usage endpoint', () => {
diff --git a/spec/frontend/ide/services/terminals_spec.js b/spec/frontend/ide/services/terminals_spec.js
index 5f752197e13..5b6b60a250c 100644
--- a/spec/frontend/ide/services/terminals_spec.js
+++ b/spec/frontend/ide/services/terminals_spec.js
@@ -9,7 +9,6 @@ const TEST_BRANCH = 'ref';
 describe('~/ide/services/terminals', () => {
   let axiosSpy;
   let mock;
-  const prevRelativeUrlRoot = gon.relative_url_root;
 
   beforeEach(() => {
     axiosSpy = jest.fn().mockReturnValue([HTTP_STATUS_OK, {}]);
@@ -19,7 +18,6 @@ describe('~/ide/services/terminals', () => {
   });
 
   afterEach(() => {
-    gon.relative_url_root = prevRelativeUrlRoot;
     mock.restore();
   });
 
diff --git a/spec/frontend/ide/stores/actions/file_spec.js b/spec/frontend/ide/stores/actions/file_spec.js
index 90ca8526698..7f4e1cf761d 100644
--- a/spec/frontend/ide/stores/actions/file_spec.js
+++ b/spec/frontend/ide/stores/actions/file_spec.js
@@ -16,7 +16,6 @@ const RELATIVE_URL_ROOT = '/gitlab';
 
 describe('IDE store file actions', () => {
   let mock;
-  let originalGon;
   let store;
   let router;
 
@@ -24,9 +23,7 @@ describe('IDE store file actions', () => {
     stubPerformanceWebAPI();
 
     mock = new MockAdapter(axios);
-    originalGon = window.gon;
     window.gon = {
-      ...window.gon,
       relative_url_root: RELATIVE_URL_ROOT,
     };
 
@@ -44,7 +41,6 @@ describe('IDE store file actions', () => {
 
   afterEach(() => {
     mock.restore();
-    window.gon = originalGon;
   });
 
   describe('closeFile', () => {
diff --git a/spec/frontend/ide/stores/actions/merge_request_spec.js b/spec/frontend/ide/stores/actions/merge_request_spec.js
index fbae84631ee..a41ffdb0a31 100644
--- a/spec/frontend/ide/stores/actions/merge_request_spec.js
+++ b/spec/frontend/ide/stores/actions/merge_request_spec.js
@@ -3,7 +3,7 @@ import { range } from 'lodash';
 import { stubPerformanceWebAPI } from 'helpers/performance';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '~/ide/constants';
 import service from '~/ide/services';
 import { createStore } from '~/ide/stores';
@@ -30,7 +30,7 @@ const createMergeRequestChangesCount = (n) =>
 
 const testGetUrlForPath = (path) => `${TEST_HOST}/test/${path}`;
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('IDE store merge request actions', () => {
   let store;
@@ -135,7 +135,7 @@ describe('IDE store merge request actions', () => {
         mock.onGet(/api\/(.*)\/projects\/abcproject\/merge_requests/).networkError();
       });
 
-      it('flashes message, if error', () => {
+      it('shows an alert, if error', () => {
         return store
           .dispatch('getMergeRequestsForBranch', {
             projectId: TEST_PROJECT,
@@ -519,7 +519,7 @@ describe('IDE store merge request actions', () => {
       );
     });
 
-    it('flashes message, if error', () => {
+    it('shows an alert, if error', () => {
       store.dispatch.mockRejectedValue();
 
       return openMergeRequest(store, mr).catch(() => {
diff --git a/spec/frontend/ide/stores/actions/project_spec.js b/spec/frontend/ide/stores/actions/project_spec.js
index 5a5ead4c544..b13228c20f5 100644
--- a/spec/frontend/ide/stores/actions/project_spec.js
+++ b/spec/frontend/ide/stores/actions/project_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import testAction from 'helpers/vuex_action_helper';
 import api from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import service from '~/ide/services';
 import { createStore } from '~/ide/stores';
 import {
@@ -19,7 +19,7 @@ import {
 import { logError } from '~/lib/logger';
 import axios from '~/lib/utils/axios_utils';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/logger');
 
 const TEST_PROJECT_ID = 'abc/def';
@@ -104,7 +104,7 @@ describe('IDE store project actions', () => {
       desc                                                      | projectPath        | responseSuccess | expectedMutations
       ${'does not fetch permissions if project does not exist'} | ${undefined}       | ${true}         | ${[]}
       ${'fetches permission when project is specified'}         | ${TEST_PROJECT_ID} | ${true}         | ${[...permissionsMutations]}
-      ${'flashes an error if the request fails'}                | ${TEST_PROJECT_ID} | ${false}        | ${[]}
+      ${'alerts an error if the request fails'}                 | ${TEST_PROJECT_ID} | ${false}        | ${[]}
     `('$desc', async ({ projectPath, expectedMutations, responseSuccess } = {}) => {
       store.state.currentProjectId = projectPath;
       if (responseSuccess) {
diff --git a/spec/frontend/ide/stores/actions_spec.js b/spec/frontend/ide/stores/actions_spec.js
index 1c90c0f943a..63b63af667c 100644
--- a/spec/frontend/ide/stores/actions_spec.js
+++ b/spec/frontend/ide/stores/actions_spec.js
@@ -4,7 +4,7 @@ import testAction from 'helpers/vuex_action_helper';
 import eventHub from '~/ide/eventhub';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   init,
   stageAllChanges,
@@ -31,7 +31,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
   joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths,
 }));
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Multi-file store actions', () => {
   let store;
@@ -210,7 +210,7 @@ describe('Multi-file store actions', () => {
         expect(store.dispatch).toHaveBeenCalledWith('setFileActive', 'test');
       });
 
-      it('creates flash message if file already exists', async () => {
+      it('creates alert message if file already exists', async () => {
         const f = file('test', '1', 'blob');
         store.state.trees['abcproject/mybranch'].tree = [f];
         store.state.entries[f.path] = f;
@@ -927,7 +927,7 @@ describe('Multi-file store actions', () => {
         expect(document.querySelector('.flash-alert')).toBeNull();
       });
 
-      it('does not pass the error further and flashes an alert if error is not 404', async () => {
+      it('does not pass the error further and creates an alert if error is not 404', async () => {
         mock.onGet(/(.*)/).replyOnce(HTTP_STATUS_IM_A_TEAPOT);
 
         await expect(getBranchData(...callParams)).rejects.toEqual(
diff --git a/spec/frontend/ide/stores/extend_spec.js b/spec/frontend/ide/stores/extend_spec.js
index ffb00f9ef5b..88909999c82 100644
--- a/spec/frontend/ide/stores/extend_spec.js
+++ b/spec/frontend/ide/stores/extend_spec.js
@@ -6,12 +6,10 @@ jest.mock('~/ide/stores/plugins/terminal', () => jest.fn());
 jest.mock('~/ide/stores/plugins/terminal_sync', () => jest.fn());
 
 describe('ide/stores/extend', () => {
-  let prevGon;
   let store;
   let el;
 
   beforeEach(() => {
-    prevGon = global.gon;
     store = {};
     el = {};
 
@@ -23,13 +21,12 @@ describe('ide/stores/extend', () => {
   });
 
   afterEach(() => {
-    global.gon = prevGon;
     terminalPlugin.mockClear();
     terminalSyncPlugin.mockClear();
   });
 
   const withGonFeatures = (features) => {
-    global.gon = { ...global.gon, features };
+    global.gon.features = features;
   };
 
   describe('terminalPlugin', () => {
diff --git a/spec/frontend/ide/stores/getters_spec.js b/spec/frontend/ide/stores/getters_spec.js
index d4166a3bd6d..0fe6a16c676 100644
--- a/spec/frontend/ide/stores/getters_spec.js
+++ b/spec/frontend/ide/stores/getters_spec.js
@@ -24,11 +24,8 @@ const TEST_FORK_PATH = '/test/fork/path';
 describe('IDE store getters', () => {
   let localState;
   let localStore;
-  let origGon;
 
   beforeEach(() => {
-    origGon = window.gon;
-
     // Feature flag is defaulted to on in prod
     window.gon = { features: { rejectUnsignedCommitsByGitlab: true } };
 
@@ -36,10 +33,6 @@ describe('IDE store getters', () => {
     localState = localStore.state;
   });
 
-  afterEach(() => {
-    window.gon = origGon;
-  });
-
   describe('activeFile', () => {
     it('returns the current active file', () => {
       localState.openFiles.push(file());
diff --git a/spec/frontend/ide/stores/modules/commit/actions_spec.js b/spec/frontend/ide/stores/modules/commit/actions_spec.js
index 4068a9d0919..872aa9b6e6b 100644
--- a/spec/frontend/ide/stores/modules/commit/actions_spec.js
+++ b/spec/frontend/ide/stores/modules/commit/actions_spec.js
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { file } from 'jest/ide/helpers';
 import { commitActionTypes, PERMISSION_CREATE_MR } from '~/ide/constants';
 import eventHub from '~/ide/eventhub';
@@ -39,12 +40,14 @@ describe('IDE commit module actions', () => {
   let mock;
   let store;
   let router;
+  let trackingSpy;
 
   beforeEach(() => {
     store = createStore();
     router = createRouter(store);
     gon.api_version = 'v1';
     mock = new MockAdapter(axios);
+    trackingSpy = mockTracking(undefined, undefined, jest.spyOn);
     jest.spyOn(router, 'push').mockImplementation();
 
     mock
@@ -53,7 +56,7 @@ describe('IDE commit module actions', () => {
   });
 
   afterEach(() => {
-    delete gon.api_version;
+    unmockTracking();
     mock.restore();
   });
 
@@ -81,19 +84,12 @@ describe('IDE commit module actions', () => {
   });
 
   describe('updateBranchName', () => {
-    let originalGon;
-
     beforeEach(() => {
-      originalGon = window.gon;
-      window.gon = { current_username: 'johndoe' };
+      window.gon.current_username = 'johndoe';
 
       store.state.currentBranchId = 'main';
     });
 
-    afterEach(() => {
-      window.gon = originalGon;
-    });
-
     it('updates store with new branch name', async () => {
       await store.dispatch('commit/updateBranchName', 'branch-name');
 
@@ -430,6 +426,28 @@ describe('IDE commit module actions', () => {
           });
         });
       });
+
+      describe('learnGitlabSource', () => {
+        describe('learnGitlabSource is true', () => {
+          it('tracks commit', async () => {
+            store.state.learnGitlabSource = true;
+
+            await store.dispatch('commit/commitChanges');
+
+            expect(trackingSpy).toHaveBeenCalledWith(undefined, 'commit', {
+              label: 'web_ide_learn_gitlab_source',
+            });
+          });
+        });
+
+        describe('learnGitlabSource is false', () => {
+          it('does not track commit', async () => {
+            await store.dispatch('commit/commitChanges');
+
+            expect(trackingSpy).not.toHaveBeenCalled();
+          });
+        });
+      });
     });
 
     describe('success response with failed message', () => {
@@ -447,6 +465,26 @@ describe('IDE commit module actions', () => {
 
         expect(alert.textContent.trim()).toBe('failed message');
       });
+
+      describe('learnGitlabSource', () => {
+        describe('learnGitlabSource is true', () => {
+          it('does not track commit', async () => {
+            store.state.learnGitlabSource = true;
+
+            await store.dispatch('commit/commitChanges');
+
+            expect(trackingSpy).not.toHaveBeenCalled();
+          });
+        });
+
+        describe('learnGitlabSource is false', () => {
+          it('does not track commit', async () => {
+            await store.dispatch('commit/commitChanges');
+
+            expect(trackingSpy).not.toHaveBeenCalled();
+          });
+        });
+      });
     });
 
     describe('failed response', () => {
@@ -466,6 +504,26 @@ describe('IDE commit module actions', () => {
           ['commit/SET_ERROR', createUnexpectedCommitError(), undefined],
         ]);
       });
+
+      describe('learnGitlabSource', () => {
+        describe('learnGitlabSource is true', () => {
+          it('does not track commit', async () => {
+            store.state.learnGitlabSource = true;
+
+            await store.dispatch('commit/commitChanges').catch(() => {});
+
+            expect(trackingSpy).not.toHaveBeenCalled();
+          });
+        });
+
+        describe('learnGitlabSource is false', () => {
+          it('does not track commit', async () => {
+            await store.dispatch('commit/commitChanges').catch(() => {});
+
+            expect(trackingSpy).not.toHaveBeenCalled();
+          });
+        });
+      });
     });
 
     describe('first commit of a branch', () => {
diff --git a/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js
index 0287e5269ee..3f7ded5e718 100644
--- a/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js
+++ b/spec/frontend/ide/stores/modules/terminal/actions/session_controls_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import * as actions from '~/ide/stores/modules/terminal/actions/session_controls';
 import { STARTING, PENDING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants';
 import * as messages from '~/ide/stores/modules/terminal/messages';
@@ -13,7 +13,7 @@ import {
   HTTP_STATUS_UNPROCESSABLE_ENTITY,
 } from '~/lib/utils/http_status';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_PROJECT_PATH = 'lorem/root';
 const TEST_BRANCH_ID = 'main';
@@ -91,7 +91,7 @@ describe('IDE store terminal session controls actions', () => {
   });
 
   describe('receiveStartSessionError', () => {
-    it('flashes message', () => {
+    it('shows an alert', () => {
       actions.receiveStartSessionError({ dispatch });
 
       expect(createAlert).toHaveBeenCalledWith({
@@ -165,7 +165,7 @@ describe('IDE store terminal session controls actions', () => {
   });
 
   describe('receiveStopSessionError', () => {
-    it('flashes message', () => {
+    it('shows an alert', () => {
       actions.receiveStopSessionError({ dispatch });
 
       expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js b/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js
index 9616733f052..30ae7d203a9 100644
--- a/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js
+++ b/spec/frontend/ide/stores/modules/terminal/actions/session_status_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import * as actions from '~/ide/stores/modules/terminal/actions/session_status';
 import { PENDING, RUNNING, STOPPING, STOPPED } from '~/ide/stores/modules/terminal/constants';
 import * as messages from '~/ide/stores/modules/terminal/messages';
@@ -8,7 +8,7 @@ import * as mutationTypes from '~/ide/stores/modules/terminal/mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_SESSION = {
   id: 7,
@@ -113,7 +113,7 @@ describe('IDE store terminal session controls actions', () => {
   });
 
   describe('receiveSessionStatusError', () => {
-    it('flashes message', () => {
+    it('shows an alert', () => {
       actions.receiveSessionStatusError({ dispatch });
 
       expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/import_entities/components/group_dropdown_spec.js b/spec/frontend/import_entities/components/group_dropdown_spec.js
index 31e097cfa7b..b44bc33de6f 100644
--- a/spec/frontend/import_entities/components/group_dropdown_spec.js
+++ b/spec/frontend/import_entities/components/group_dropdown_spec.js
@@ -64,10 +64,6 @@ describe('Import entities group dropdown component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('passes namespaces from graphql query to default slot', async () => {
     createComponent();
     jest.advanceTimersByTime(DEBOUNCE_DELAY);
diff --git a/spec/frontend/import_entities/components/import_status_spec.js b/spec/frontend/import_entities/components/import_status_spec.js
index 56c4ed827d7..3488d9f60c8 100644
--- a/spec/frontend/import_entities/components/import_status_spec.js
+++ b/spec/frontend/import_entities/components/import_status_spec.js
@@ -12,10 +12,6 @@ describe('Import entities status component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('success status', () => {
     const getStatusText = () => wrapper.findComponent(GlBadge).text();
     const getStatusIcon = () => wrapper.findComponent(GlBadge).props('icon');
diff --git a/spec/frontend/import_entities/import_groups/components/import_actions_cell_spec.js b/spec/frontend/import_entities/import_groups/components/import_actions_cell_spec.js
index 163a60bae36..1a52485f779 100644
--- a/spec/frontend/import_entities/import_groups/components/import_actions_cell_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_actions_cell_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlIcon, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ImportActionsCell from '~/import_entities/import_groups/components/import_actions_cell.vue';
 
@@ -8,7 +8,6 @@ describe('import actions cell', () => {
   const createComponent = (props) => {
     wrapper = shallowMount(ImportActionsCell, {
       propsData: {
-        isProjectsImportEnabled: false,
         isFinished: false,
         isAvailableForImport: false,
         isInvalid: false,
@@ -17,19 +16,15 @@ describe('import actions cell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when group is available for import', () => {
     beforeEach(() => {
       createComponent({ isAvailableForImport: true });
     });
 
-    it('renders import button', () => {
-      const button = wrapper.findComponent(GlButton);
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Import');
+    it('renders import dropdown', () => {
+      const dropdown = wrapper.findComponent(GlDropdown);
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('text')).toBe('Import with projects');
     });
 
     it('does not render icon with a hint', () => {
@@ -42,10 +37,10 @@ describe('import actions cell', () => {
       createComponent({ isAvailableForImport: false, isFinished: true });
     });
 
-    it('renders re-import button', () => {
-      const button = wrapper.findComponent(GlButton);
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Re-import');
+    it('renders re-import dropdown', () => {
+      const dropdown = wrapper.findComponent(GlDropdown);
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('text')).toBe('Re-import with projects');
     });
 
     it('renders icon with a hint', () => {
@@ -57,25 +52,25 @@ describe('import actions cell', () => {
     });
   });
 
-  it('does not render import button when group is not available for import', () => {
+  it('does not render import dropdown when group is not available for import', () => {
     createComponent({ isAvailableForImport: false });
 
-    const button = wrapper.findComponent(GlButton);
-    expect(button.exists()).toBe(false);
+    const dropdown = wrapper.findComponent(GlDropdown);
+    expect(dropdown.exists()).toBe(false);
   });
 
-  it('renders import button as disabled when group is invalid', () => {
+  it('renders import dropdown as disabled when group is invalid', () => {
     createComponent({ isInvalid: true, isAvailableForImport: true });
 
-    const button = wrapper.findComponent(GlButton);
-    expect(button.props().disabled).toBe(true);
+    const dropdown = wrapper.findComponent(GlDropdown);
+    expect(dropdown.props().disabled).toBe(true);
   });
 
   it('emits import-group event when import button is clicked', () => {
     createComponent({ isAvailableForImport: true });
 
-    const button = wrapper.findComponent(GlButton);
-    button.vm.$emit('click');
+    const dropdown = wrapper.findComponent(GlDropdown);
+    dropdown.vm.$emit('click');
 
     expect(wrapper.emitted('import-group')).toHaveLength(1);
   });
@@ -85,10 +80,10 @@ describe('import actions cell', () => {
     ${false}   | ${'Import'}
     ${true}    | ${'Re-import'}
   `(
-    'when import projects is enabled, group is available for import and finish status is $status',
+    'group is available for import and finish status is $isFinished',
     ({ isFinished, expectedAction }) => {
       beforeEach(() => {
-        createComponent({ isProjectsImportEnabled: true, isAvailableForImport: true, isFinished });
+        createComponent({ isAvailableForImport: true, isFinished });
       });
 
       it('render import dropdown', () => {
diff --git a/spec/frontend/import_entities/import_groups/components/import_source_cell_spec.js b/spec/frontend/import_entities/import_groups/components/import_source_cell_spec.js
index f2735d86493..9ead483d02f 100644
--- a/spec/frontend/import_entities/import_groups/components/import_source_cell_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_source_cell_spec.js
@@ -22,10 +22,6 @@ describe('import source cell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when group status is NONE', () => {
     beforeEach(() => {
       group = generateFakeTableEntry({ id: 1, status: STATUSES.NONE });
diff --git a/spec/frontend/import_entities/import_groups/components/import_table_spec.js b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
index c7bda5a60ec..205218fdabd 100644
--- a/spec/frontend/import_entities/import_groups/components/import_table_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_table_spec.js
@@ -6,7 +6,7 @@ import MockAdapter from 'axios-mock-adapter';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_OK, HTTP_STATUS_TOO_MANY_REQUESTS } from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import { STATUSES } from '~/import_entities/constants';
@@ -23,7 +23,7 @@ import {
   generateFakeEntry,
 } from '../graphql/fixtures';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/import_entities/import_groups/services/status_poller');
 
 Vue.use(VueApollo);
@@ -49,12 +49,12 @@ describe('import table', () => {
     },
   };
 
-  const findImportSelectedButton = () =>
-    wrapper.findAll('button').wrappers.find((w) => w.text() === 'Import selected');
   const findImportSelectedDropdown = () =>
-    wrapper.findAll('.gl-dropdown').wrappers.find((w) => w.text().includes('Import with projects'));
-  const findImportButtons = () =>
-    wrapper.findAll('button').wrappers.filter((w) => w.text() === 'Import');
+    wrapper.find('[data-testid="import-selected-groups-dropdown"]');
+  const findRowImportDropdownAtIndex = (idx) =>
+    wrapper.findAll('tbody td button').wrappers.filter((w) => w.text() === 'Import with projects')[
+      idx
+    ];
   const findPaginationDropdown = () => wrapper.find('[data-testid="page-size"]');
   const findTargetNamespaceDropdown = (rowWrapper) =>
     rowWrapper.find('[data-testid="target-namespace-selector"]');
@@ -70,12 +70,7 @@ describe('import table', () => {
   const findRowCheckbox = (idx) => wrapper.findAll('tbody td input[type=checkbox]').at(idx);
   const selectRow = (idx) => findRowCheckbox(idx).setChecked(true);
 
-  const createComponent = ({
-    bulkImportSourceGroups,
-    importGroups,
-    defaultTargetNamespace,
-    glFeatures = {},
-  }) => {
+  const createComponent = ({ bulkImportSourceGroups, importGroups, defaultTargetNamespace }) => {
     apolloProvider = createMockApollo(
       [
         [
@@ -102,10 +97,7 @@ describe('import table', () => {
         defaultTargetNamespace,
       },
       directives: {
-        GlTooltip: createMockDirective(),
-      },
-      provide: {
-        glFeatures,
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       apolloProvider,
     });
@@ -120,10 +112,6 @@ describe('import table', () => {
     axiosMock.onGet(/.*\/exists$/, () => []).reply(HTTP_STATUS_OK, { exists: false });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('renders loading icon while performing request', async () => {
       createComponent({
@@ -134,7 +122,7 @@ describe('import table', () => {
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
-    it('does not renders loading icon when request is completed', async () => {
+    it('does not render loading icon when request is completed', async () => {
       createComponent({
         bulkImportSourceGroups: () => [],
       });
@@ -245,12 +233,13 @@ describe('import table', () => {
 
     await waitForPromises();
 
-    await findImportButtons()[0].trigger('click');
+    await findRowImportDropdownAtIndex(0).trigger('click');
     expect(apolloProvider.defaultClient.mutate).toHaveBeenCalledWith({
       mutation: importGroupsMutation,
       variables: {
         importRequests: [
           {
+            migrateProjects: true,
             newName: FAKE_GROUP.lastImportTarget.newName,
             sourceGroupId: FAKE_GROUP.id,
             targetNamespace: AVAILABLE_NAMESPACES[0].fullPath,
@@ -273,7 +262,7 @@ describe('import table', () => {
     });
 
     await waitForPromises();
-    await findImportButtons()[0].trigger('click');
+    await findRowImportDropdownAtIndex(0).trigger('click');
     await waitForPromises();
 
     expect(createAlert).toHaveBeenCalledWith(
@@ -298,7 +287,7 @@ describe('import table', () => {
     });
 
     await waitForPromises();
-    await findImportButtons()[0].trigger('click');
+    await findRowImportDropdownAtIndex(0).trigger('click');
     await waitForPromises();
 
     expect(createAlert).not.toHaveBeenCalled();
@@ -476,7 +465,7 @@ describe('import table', () => {
       });
       await waitForPromises();
 
-      expect(findImportSelectedButton().props().disabled).toBe(true);
+      expect(findImportSelectedDropdown().props().disabled).toBe(true);
     });
 
     it('import selected button is enabled when groups were selected for import', async () => {
@@ -491,7 +480,7 @@ describe('import table', () => {
 
       await selectRow(0);
 
-      expect(findImportSelectedButton().props().disabled).toBe(false);
+      expect(findImportSelectedDropdown().props().disabled).toBe(false);
     });
 
     it('does not allow selecting already started groups', async () => {
@@ -509,7 +498,7 @@ describe('import table', () => {
       await selectRow(0);
       await nextTick();
 
-      expect(findImportSelectedButton().props().disabled).toBe(true);
+      expect(findImportSelectedDropdown().props().disabled).toBe(true);
     });
 
     it('does not allow selecting groups with validation errors', async () => {
@@ -534,10 +523,10 @@ describe('import table', () => {
       await selectRow(0);
       await nextTick();
 
-      expect(findImportSelectedButton().props().disabled).toBe(true);
+      expect(findImportSelectedDropdown().props().disabled).toBe(true);
     });
 
-    it('invokes importGroups mutation when import selected button is clicked', async () => {
+    it('invokes importGroups mutation when import selected dropdown is clicked', async () => {
       const NEW_GROUPS = [
         generateFakeEntry({ id: 1, status: STATUSES.NONE }),
         generateFakeEntry({ id: 2, status: STATUSES.NONE }),
@@ -558,7 +547,7 @@ describe('import table', () => {
       await selectRow(1);
       await nextTick();
 
-      await findImportSelectedButton().trigger('click');
+      await findImportSelectedDropdown().find('button').trigger('click');
 
       expect(apolloProvider.defaultClient.mutate).toHaveBeenCalledWith({
         mutation: importGroupsMutation,
@@ -679,7 +668,7 @@ describe('import table', () => {
     });
   });
 
-  describe('when import projects is enabled', () => {
+  describe('importing projects', () => {
     const NEW_GROUPS = [
       generateFakeEntry({ id: 1, status: STATUSES.NONE }),
       generateFakeEntry({ id: 2, status: STATUSES.NONE }),
@@ -693,9 +682,6 @@ describe('import table', () => {
           pageInfo: FAKE_PAGE_INFO,
           versionValidation: FAKE_VERSION_VALIDATION,
         }),
-        glFeatures: {
-          bulkImportProjects: true,
-        },
       });
       jest.spyOn(apolloProvider.defaultClient, 'mutate');
       return waitForPromises();
diff --git a/spec/frontend/import_entities/import_groups/components/import_target_cell_spec.js b/spec/frontend/import_entities/import_groups/components/import_target_cell_spec.js
index d5286e71c44..a524d9ebdb0 100644
--- a/spec/frontend/import_entities/import_groups/components/import_target_cell_spec.js
+++ b/spec/frontend/import_entities/import_groups/components/import_target_cell_spec.js
@@ -57,11 +57,6 @@ describe('import target cell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('events', () => {
     beforeEach(async () => {
       group = generateFakeTableEntry({ id: 1, status: STATUSES.NONE });
diff --git a/spec/frontend/import_entities/import_groups/graphql/client_factory_spec.js b/spec/frontend/import_entities/import_groups/graphql/client_factory_spec.js
index ce111a0c10c..83566469176 100644
--- a/spec/frontend/import_entities/import_groups/graphql/client_factory_spec.js
+++ b/spec/frontend/import_entities/import_groups/graphql/client_factory_spec.js
@@ -16,7 +16,7 @@ import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { statusEndpointFixture } from './fixtures';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/import_entities/import_groups/graphql/services/local_storage_cache', () => ({
   LocalStorageCache: jest.fn().mockImplementation(function mock() {
     this.get = jest.fn();
diff --git a/spec/frontend/import_entities/import_groups/services/status_poller_spec.js b/spec/frontend/import_entities/import_groups/services/status_poller_spec.js
index 4a1b85d24e3..5ee2b2e698f 100644
--- a/spec/frontend/import_entities/import_groups/services/status_poller_spec.js
+++ b/spec/frontend/import_entities/import_groups/services/status_poller_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import Visibility from 'visibilityjs';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { STATUSES } from '~/import_entities/constants';
 import { StatusPoller } from '~/import_entities/import_groups/services/status_poller';
 import axios from '~/lib/utils/axios_utils';
@@ -8,7 +8,7 @@ import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 
 jest.mock('visibilityjs');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/poll');
 
 const FAKE_POLL_PATH = '/fake/poll/path';
@@ -81,7 +81,7 @@ describe('Bulk import status poller', () => {
     expect(pollInstance.makeRequest).toHaveBeenCalled();
   });
 
-  it('when error occurs shows flash with error', () => {
+  it('when error occurs shows alert with error', () => {
     const [[pollConfig]] = Poll.mock.calls;
     pollConfig.errorCallback();
     expect(createAlert).toHaveBeenCalled();
diff --git a/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js b/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
index 68716600592..2294d236e8b 100644
--- a/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
@@ -25,10 +25,6 @@ describe('Import Advanced Settings', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders GLFormCheckbox for each optional stage', () => {
     expect(wrapper.findAllComponents(GlFormCheckbox)).toHaveLength(OPTIONAL_STAGES.length);
   });
diff --git a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
index e613b9756af..8e73f76382a 100644
--- a/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js
@@ -60,11 +60,6 @@ describe('ProviderRepoTableRow', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when rendering importable project', () => {
     const repo = {
       importSource: {
diff --git a/spec/frontend/import_entities/import_projects/store/actions_spec.js b/spec/frontend/import_entities/import_projects/store/actions_spec.js
index 990587d4af7..f78016eefcf 100644
--- a/spec/frontend/import_entities/import_projects/store/actions_spec.js
+++ b/spec/frontend/import_entities/import_projects/store/actions_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { STATUSES, PROVIDERS } from '~/import_entities/constants';
 import actionsFactory from '~/import_entities/import_projects/store/actions';
 import { getImportTarget } from '~/import_entities/import_projects/store/getters';
@@ -27,7 +27,7 @@ import {
   HTTP_STATUS_TOO_MANY_REQUESTS,
 } from '~/lib/utils/http_status';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const MOCK_ENDPOINT = `${TEST_HOST}/endpoint.json`;
 const endpoints = {
diff --git a/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js b/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
index 1d1b285c1b6..c5c29b4bb19 100644
--- a/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
+++ b/spec/frontend/incidents_settings/components/incidents_settings_service_spec.js
@@ -1,12 +1,12 @@
 import AxiosMockAdapter from 'axios-mock-adapter';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { ERROR_MSG } from '~/incidents_settings/constants';
 import IncidentsSettingsService from '~/incidents_settings/incidents_settings_service';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 describe('IncidentsSettingsService', () => {
@@ -33,7 +33,7 @@ describe('IncidentsSettingsService', () => {
       });
     });
 
-    it('should display a flash message on update error', () => {
+    it('should display an alert message on update error', () => {
       mock.onPatch().reply(HTTP_STATUS_BAD_REQUEST);
 
       return service.updateSettings({}).then(() => {
diff --git a/spec/frontend/incidents_settings/components/pagerduty_form_spec.js b/spec/frontend/incidents_settings/components/pagerduty_form_spec.js
index 521a861829b..77258db437d 100644
--- a/spec/frontend/incidents_settings/components/pagerduty_form_spec.js
+++ b/spec/frontend/incidents_settings/components/pagerduty_form_spec.js
@@ -26,10 +26,6 @@ describe('Alert integration settings form', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should match the default snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/integrations/edit/components/active_checkbox_spec.js b/spec/frontend/integrations/edit/components/active_checkbox_spec.js
index 1f7a5f0dbc9..8afff842a85 100644
--- a/spec/frontend/integrations/edit/components/active_checkbox_spec.js
+++ b/spec/frontend/integrations/edit/components/active_checkbox_spec.js
@@ -17,10 +17,6 @@ describe('ActiveCheckbox', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findInputInCheckbox = () => findGlFormCheckbox().find('input');
 
diff --git a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js
index cbe3402727a..dfb6b7d9a9c 100644
--- a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js
+++ b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js
@@ -14,10 +14,6 @@ describe('ConfirmationModal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlModal = () => wrapper.findComponent(GlModal);
 
   describe('template', () => {
diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
index 7589b04b0fd..e1d9aef752f 100644
--- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js
+++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js
@@ -21,10 +21,6 @@ describe('DynamicField', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findGlFormInput = () => wrapper.findComponent(GlFormInput);
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 383dfb36aa5..58fb456eb53 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -84,7 +84,6 @@ describe('IntegrationForm', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mockAxios.restore();
   });
 
@@ -507,30 +506,21 @@ describe('IntegrationForm', () => {
       const dummyHelp = 'Foo Help';
 
       it.each`
-        integration                    | flagIsOn | helpHtml     | sections                   | shouldShowSections | shouldShowHelp
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${undefined} | ${[mockSectionConnection]} | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${dummyHelp} | ${[mockSectionConnection]} | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${true}
-        ${'foo'}                       | ${false} | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${'foo'}                       | ${false} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${'foo'}                       | ${false} | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${false} | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${true}  | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${'foo'}                       | ${true}  | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${'foo'}                       | ${true}  | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${true}  | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
+        integration                    | helpHtml     | sections                   | shouldShowSections | shouldShowHelp
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${''}        | ${[]}                      | ${false}           | ${false}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${true}
+        ${'foo'}                       | ${''}        | ${[]}                      | ${false}           | ${false}
+        ${'foo'}                       | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
+        ${'foo'}                       | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
+        ${'foo'}                       | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
       `(
-        '$sections sections, and "$helpHtml" helpHtml when the FF is "$flagIsOn" for "$integration" integration',
-        ({ integration, flagIsOn, helpHtml, sections, shouldShowSections, shouldShowHelp }) => {
+        '$sections sections, and "$helpHtml" helpHtml for "$integration" integration',
+        ({ integration, helpHtml, sections, shouldShowSections, shouldShowHelp }) => {
           createComponent({
             provide: {
               helpHtml,
-              glFeatures: { integrationSlackAppNotifications: flagIsOn },
             },
             customStateProps: {
               sections,
@@ -553,20 +543,15 @@ describe('IntegrationForm', () => {
       ${false}    | ${true}                  | ${'When having only the fields without a section'}
     `('$description', ({ hasSections, hasFieldsWithoutSections }) => {
       it.each`
-        prefix        | integration                    | shouldUpgradeSlack | flagIsOn | shouldShowAlert
-        ${'does'}     | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${true}  | ${true}
-        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${false}           | ${true}  | ${false}
-        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${false} | ${false}
-        ${'does not'} | ${'foo'}                       | ${true}            | ${true}  | ${false}
-        ${'does not'} | ${'foo'}                       | ${false}           | ${true}  | ${false}
-        ${'does not'} | ${'foo'}                       | ${true}            | ${false} | ${false}
+        prefix        | integration                    | shouldUpgradeSlack | shouldShowAlert
+        ${'does'}     | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${true}
+        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${false}           | ${false}
+        ${'does not'} | ${'foo'}                       | ${true}            | ${false}
+        ${'does not'} | ${'foo'}                       | ${false}           | ${false}
       `(
-        '$prefix render the upgrade warning when we are in "$integration" integration with the flag "$flagIsOn" and Slack-needs-upgrade is "$shouldUpgradeSlack" and have sections',
-        ({ integration, shouldUpgradeSlack, flagIsOn, shouldShowAlert }) => {
+        '$prefix render the upgrade warning when we are in "$integration" integration with Slack-needs-upgrade is "$shouldUpgradeSlack" and have sections',
+        ({ integration, shouldUpgradeSlack, shouldShowAlert }) => {
           createComponent({
-            provide: {
-              glFeatures: { integrationSlackAppNotifications: flagIsOn },
-            },
             customStateProps: {
               shouldUpgradeSlack,
               type: integration,
diff --git a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
index fa91f8de45a..90ee69ef2dc 100644
--- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js
@@ -31,10 +31,6 @@ describe('JiraIssuesFields', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findEnableCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findEnableCheckboxDisabled = () =>
     findEnableCheckbox().find('[type=checkbox]').attributes('disabled');
diff --git a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
index 6011b3e6edc..f876a497f98 100644
--- a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js
@@ -22,10 +22,6 @@ describe('JiraTriggerFields', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findCommentSettings = () => wrapper.findByTestId('comment-settings');
   const findCommentDetail = () => wrapper.findByTestId('comment-detail');
   const findCommentSettingsCheckbox = () => findCommentSettings().findComponent(GlFormCheckbox);
diff --git a/spec/frontend/integrations/edit/components/override_dropdown_spec.js b/spec/frontend/integrations/edit/components/override_dropdown_spec.js
index 90facaff1f9..2d1a6b3ace1 100644
--- a/spec/frontend/integrations/edit/components/override_dropdown_spec.js
+++ b/spec/frontend/integrations/edit/components/override_dropdown_spec.js
@@ -26,10 +26,6 @@ describe('OverrideDropdown', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlLink = () => wrapper.findComponent(GlLink);
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
 
diff --git a/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js b/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js
new file mode 100644
index 00000000000..62f0439a13f
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+
+import IntegrationSectionAppleAppStore from '~/integrations/edit/components/sections/apple_app_store.vue';
+import UploadDropzoneField from '~/integrations/edit/components/upload_dropzone_field.vue';
+import { createStore } from '~/integrations/edit/store';
+
+describe('IntegrationSectionAppleAppStore', () => {
+  let wrapper;
+
+  const createComponent = (componentFields) => {
+    const store = createStore({
+      customState: { ...componentFields },
+    });
+    wrapper = shallowMount(IntegrationSectionAppleAppStore, {
+      store,
+    });
+  };
+
+  const componentFields = (fileName = '') => {
+    return {
+      fields: [
+        {
+          name: 'app_store_private_key_file_name',
+          value: fileName,
+        },
+      ],
+    };
+  };
+
+  const findUploadDropzoneField = () => wrapper.findComponent(UploadDropzoneField);
+
+  describe('computed properties', () => {
+    it('renders UploadDropzoneField with default values', () => {
+      createComponent(componentFields());
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'The Apple App Store Connect Private Key (.p8)',
+        helpText: '',
+      });
+    });
+
+    it('renders UploadDropzoneField with custom values for an attached file', () => {
+      createComponent(componentFields('fileName.txt'));
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'Upload a new Apple App Store Connect Private Key (replace fileName.txt)',
+        helpText: 'Leave empty to use your current Private Key.',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/components/sections/configuration_spec.js b/spec/frontend/integrations/edit/components/sections/configuration_spec.js
index e697212ea0b..c8a7d17c041 100644
--- a/spec/frontend/integrations/edit/components/sections/configuration_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/configuration_spec.js
@@ -19,10 +19,6 @@ describe('IntegrationSectionCoonfiguration', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAllDynamicFields = () => wrapper.findAllComponents(DynamicField);
 
   describe('template', () => {
diff --git a/spec/frontend/integrations/edit/components/sections/connection_spec.js b/spec/frontend/integrations/edit/components/sections/connection_spec.js
index 1eb92e80723..a24253d542d 100644
--- a/spec/frontend/integrations/edit/components/sections/connection_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/connection_spec.js
@@ -20,10 +20,6 @@ describe('IntegrationSectionConnection', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox);
   const findAllDynamicFields = () => wrapper.findAllComponents(DynamicField);
 
diff --git a/spec/frontend/integrations/edit/components/sections/google_play_spec.js b/spec/frontend/integrations/edit/components/sections/google_play_spec.js
new file mode 100644
index 00000000000..c0d6d17f639
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/sections/google_play_spec.js
@@ -0,0 +1,54 @@
+import { shallowMount } from '@vue/test-utils';
+
+import IntegrationSectionGooglePlay from '~/integrations/edit/components/sections/google_play.vue';
+import UploadDropzoneField from '~/integrations/edit/components/upload_dropzone_field.vue';
+import { createStore } from '~/integrations/edit/store';
+
+describe('IntegrationSectionGooglePlay', () => {
+  let wrapper;
+
+  const createComponent = (fileName = '') => {
+    const store = createStore({
+      customState: {
+        fields: [
+          {
+            name: 'service_account_key_file_name',
+            value: fileName,
+          },
+        ],
+      },
+    });
+
+    wrapper = shallowMount(IntegrationSectionGooglePlay, {
+      store,
+    });
+  };
+
+  const findUploadDropzoneField = () => wrapper.findComponent(UploadDropzoneField);
+
+  describe('computed properties', () => {
+    it('renders UploadDropzoneField with default values', () => {
+      createComponent();
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'Service account key (.json)',
+        helpText: '',
+      });
+    });
+
+    it('renders UploadDropzoneField with custom values for an attached file', () => {
+      createComponent('fileName.txt');
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'Upload a new service account key (replace fileName.txt)',
+        helpText: 'Leave empty to use your current service account key.',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/components/sections/jira_issues_spec.js b/spec/frontend/integrations/edit/components/sections/jira_issues_spec.js
index a7c1cc2a03f..8b39fa8f583 100644
--- a/spec/frontend/integrations/edit/components/sections/jira_issues_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/jira_issues_spec.js
@@ -18,10 +18,6 @@ describe('IntegrationSectionJiraIssue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findJiraIssuesFields = () => wrapper.findComponent(JiraIssuesFields);
 
   describe('template', () => {
diff --git a/spec/frontend/integrations/edit/components/sections/jira_trigger_spec.js b/spec/frontend/integrations/edit/components/sections/jira_trigger_spec.js
index d4ab9864fab..b3b7f508e25 100644
--- a/spec/frontend/integrations/edit/components/sections/jira_trigger_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/jira_trigger_spec.js
@@ -18,10 +18,6 @@ describe('IntegrationSectionJiraTrigger', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findJiraTriggerFields = () => wrapper.findComponent(JiraTriggerFields);
 
   describe('template', () => {
diff --git a/spec/frontend/integrations/edit/components/sections/trigger_spec.js b/spec/frontend/integrations/edit/components/sections/trigger_spec.js
index 883f5c7bf79..b9c1efbb0a2 100644
--- a/spec/frontend/integrations/edit/components/sections/trigger_spec.js
+++ b/spec/frontend/integrations/edit/components/sections/trigger_spec.js
@@ -18,10 +18,6 @@ describe('IntegrationSectionTrigger', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAllTriggerFields = () => wrapper.findAllComponents(TriggerField);
 
   describe('template', () => {
diff --git a/spec/frontend/integrations/edit/components/trigger_field_spec.js b/spec/frontend/integrations/edit/components/trigger_field_spec.js
index ed0b3324708..3b736b33a2f 100644
--- a/spec/frontend/integrations/edit/components/trigger_field_spec.js
+++ b/spec/frontend/integrations/edit/components/trigger_field_spec.js
@@ -23,10 +23,6 @@ describe('TriggerField', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findGlFormInput = () => wrapper.findComponent(GlFormInput);
   const findHiddenInput = () => wrapper.find('input[type="hidden"]');
diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
index 082eeea30f1..defa02aefd2 100644
--- a/spec/frontend/integrations/edit/components/trigger_fields_spec.js
+++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js
@@ -20,10 +20,6 @@ describe('TriggerFields', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTriggerLabel = () => wrapper.findByTestId('trigger-fields-group').find('label');
   const findAllGlFormGroups = () => wrapper.find('#trigger-fields').findAllComponents(GlFormGroup);
   const findAllGlFormCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
diff --git a/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js b/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js
new file mode 100644
index 00000000000..36e20db0022
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js
@@ -0,0 +1,88 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import { nextTick } from 'vue';
+
+import UploadDropzoneField from '~/integrations/edit/components/upload_dropzone_field.vue';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+import { mockField } from '../mock_data';
+
+describe('UploadDropzoneField', () => {
+  let wrapper;
+
+  const contentsInputName = 'service[app_store_private_key]';
+  const fileNameInputName = 'service[app_store_private_key_file_name]';
+
+  const createComponent = (props) => {
+    wrapper = mount(UploadDropzoneField, {
+      propsData: {
+        ...mockField,
+        ...props,
+        name: contentsInputName,
+        label: 'Input Label',
+        fileInputName: fileNameInputName,
+      },
+    });
+  };
+
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findUploadDropzone = () => wrapper.findComponent(UploadDropzone);
+  const findFileContentsHiddenInput = () => wrapper.find(`input[name="${contentsInputName}"]`);
+  const findFileNameHiddenInput = () => wrapper.find(`input[name="${fileNameInputName}"]`);
+
+  describe('template', () => {
+    it('adds the expected file inputFieldName', () => {
+      createComponent();
+
+      expect(findUploadDropzone().props('inputFieldName')).toBe('service[dropzone_file_name]');
+    });
+
+    it('adds a disabled, hidden text input for the file contents', () => {
+      createComponent();
+
+      expect(findFileContentsHiddenInput().attributes('name')).toBe(contentsInputName);
+      expect(findFileContentsHiddenInput().attributes('disabled')).toBeDefined();
+    });
+
+    it('adds a disabled, hidden text input for the file name', () => {
+      createComponent();
+
+      expect(findFileNameHiddenInput().attributes('name')).toBe(fileNameInputName);
+      expect(findFileNameHiddenInput().attributes('disabled')).toBeDefined();
+    });
+  });
+
+  describe('clearError', () => {
+    it('clears uploadError when called', async () => {
+      createComponent();
+
+      expect(findGlAlert().exists()).toBe(false);
+
+      findUploadDropzone().vm.$emit('error');
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(
+        'Error: You are trying to upload something other than an allowed file.',
+      );
+
+      findGlAlert().vm.$emit('dismiss');
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('onError', () => {
+    it('assigns uploadError to the supplied custom message', async () => {
+      const message = 'test error message';
+      createComponent({ errorMessage: message });
+
+      findUploadDropzone().vm.$emit('error');
+
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(message);
+    });
+  });
+});
diff --git a/spec/frontend/integrations/index/components/integrations_list_spec.js b/spec/frontend/integrations/index/components/integrations_list_spec.js
index ee54a5fd359..155a3d1c6be 100644
--- a/spec/frontend/integrations/index/components/integrations_list_spec.js
+++ b/spec/frontend/integrations/index/components/integrations_list_spec.js
@@ -13,10 +13,6 @@ describe('IntegrationsList', () => {
     wrapper = shallowMountExtended(IntegrationsList, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('provides correct `integrations` prop to the IntegrationsTable instance', () => {
     createComponent({ integrations: [...mockInactiveIntegrations, ...mockActiveIntegrations] });
 
diff --git a/spec/frontend/integrations/index/components/integrations_table_spec.js b/spec/frontend/integrations/index/components/integrations_table_spec.js
index 976c7b74890..5456a23a98d 100644
--- a/spec/frontend/integrations/index/components/integrations_table_spec.js
+++ b/spec/frontend/integrations/index/components/integrations_table_spec.js
@@ -1,6 +1,5 @@
-import { GlTable, GlIcon, GlLink } from '@gitlab/ui';
+import { GlTable, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { INTEGRATION_TYPE_SLACK } from '~/integrations/constants';
 import IntegrationsTable from '~/integrations/index/components/integrations_table.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -11,24 +10,15 @@ describe('IntegrationsTable', () => {
 
   const findTable = () => wrapper.findComponent(GlTable);
 
-  const createComponent = (propsData = {}, flagIsOn = false) => {
+  const createComponent = (propsData = {}) => {
     wrapper = mount(IntegrationsTable, {
       propsData: {
         integrations: mockActiveIntegrations,
         ...propsData,
       },
-      provide: {
-        glFeatures: {
-          integrationSlackAppNotifications: flagIsOn,
-        },
-      },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each([true, false])('when `showUpdatedAt` is %p', (showUpdatedAt) => {
     beforeEach(() => {
       createComponent({ showUpdatedAt });
@@ -56,51 +46,4 @@ describe('IntegrationsTable', () => {
       expect(findTable().findComponent(GlIcon).exists()).toBe(shouldRenderActiveIcon);
     });
   });
-
-  describe('integrations filtering', () => {
-    const slackActive = {
-      ...mockActiveIntegrations[0],
-      name: INTEGRATION_TYPE_SLACK,
-      title: 'Slack',
-    };
-    const slackInactive = {
-      ...mockInactiveIntegrations[0],
-      name: INTEGRATION_TYPE_SLACK,
-      title: 'Slack',
-    };
-
-    describe.each`
-      desc                                         | flagIsOn | integrations                                                               | expectedIntegrations
-      ${'only active'}                             | ${false} | ${mockActiveIntegrations}                                                  | ${mockActiveIntegrations}
-      ${'only active'}                             | ${true}  | ${mockActiveIntegrations}                                                  | ${mockActiveIntegrations}
-      ${'only inactive'}                           | ${true}  | ${mockInactiveIntegrations}                                                | ${mockInactiveIntegrations}
-      ${'only inactive'}                           | ${false} | ${mockInactiveIntegrations}                                                | ${mockInactiveIntegrations}
-      ${'active and inactive'}                     | ${true}  | ${[...mockActiveIntegrations, ...mockInactiveIntegrations]}                | ${[...mockActiveIntegrations, ...mockInactiveIntegrations]}
-      ${'active and inactive'}                     | ${false} | ${[...mockActiveIntegrations, ...mockInactiveIntegrations]}                | ${[...mockActiveIntegrations, ...mockInactiveIntegrations]}
-      ${'Slack active with active'}                | ${false} | ${[slackActive, ...mockActiveIntegrations]}                                | ${[slackActive, ...mockActiveIntegrations]}
-      ${'Slack active with active'}                | ${true}  | ${[slackActive, ...mockActiveIntegrations]}                                | ${[slackActive, ...mockActiveIntegrations]}
-      ${'Slack active with inactive'}              | ${false} | ${[slackActive, ...mockInactiveIntegrations]}                              | ${[slackActive, ...mockInactiveIntegrations]}
-      ${'Slack active with inactive'}              | ${true}  | ${[slackActive, ...mockInactiveIntegrations]}                              | ${[slackActive, ...mockInactiveIntegrations]}
-      ${'Slack inactive with active'}              | ${false} | ${[slackInactive, ...mockActiveIntegrations]}                              | ${[slackInactive, ...mockActiveIntegrations]}
-      ${'Slack inactive with active'}              | ${true}  | ${[slackInactive, ...mockActiveIntegrations]}                              | ${mockActiveIntegrations}
-      ${'Slack inactive with inactive'}            | ${false} | ${[slackInactive, ...mockInactiveIntegrations]}                            | ${[slackInactive, ...mockInactiveIntegrations]}
-      ${'Slack inactive with inactive'}            | ${true}  | ${[slackInactive, ...mockInactiveIntegrations]}                            | ${mockInactiveIntegrations}
-      ${'Slack active with active and inactive'}   | ${true}  | ${[slackActive, ...mockActiveIntegrations, ...mockInactiveIntegrations]}   | ${[slackActive, ...mockActiveIntegrations, ...mockInactiveIntegrations]}
-      ${'Slack active with active and inactive'}   | ${false} | ${[slackActive, ...mockActiveIntegrations, ...mockInactiveIntegrations]}   | ${[slackActive, ...mockActiveIntegrations, ...mockInactiveIntegrations]}
-      ${'Slack inactive with active and inactive'} | ${true}  | ${[slackInactive, ...mockActiveIntegrations, ...mockInactiveIntegrations]} | ${[...mockActiveIntegrations, ...mockInactiveIntegrations]}
-      ${'Slack inactive with active and inactive'} | ${false} | ${[slackInactive, ...mockActiveIntegrations, ...mockInactiveIntegrations]} | ${[slackInactive, ...mockActiveIntegrations, ...mockInactiveIntegrations]}
-    `('when $desc and flag "$flagIsOn"', ({ flagIsOn, integrations, expectedIntegrations }) => {
-      beforeEach(() => {
-        createComponent({ integrations }, flagIsOn);
-      });
-
-      it('renders correctly', () => {
-        const links = wrapper.findAllComponents(GlLink);
-        expect(links).toHaveLength(expectedIntegrations.length);
-        expectedIntegrations.forEach((integration, index) => {
-          expect(links.at(index).text()).toBe(integration.title);
-        });
-      });
-    });
-  });
 });
diff --git a/spec/frontend/integrations/overrides/components/integration_overrides_spec.js b/spec/frontend/integrations/overrides/components/integration_overrides_spec.js
index fdb728281b5..9e863eaecfd 100644
--- a/spec/frontend/integrations/overrides/components/integration_overrides_spec.js
+++ b/spec/frontend/integrations/overrides/components/integration_overrides_spec.js
@@ -47,7 +47,6 @@ describe('IntegrationOverrides', () => {
 
   afterEach(() => {
     mockAxios.restore();
-    wrapper.destroy();
   });
 
   const findGlTable = () => wrapper.findComponent(GlTable);
diff --git a/spec/frontend/integrations/overrides/components/integration_tabs_spec.js b/spec/frontend/integrations/overrides/components/integration_tabs_spec.js
index a728b4d391f..b35a40d69c1 100644
--- a/spec/frontend/integrations/overrides/components/integration_tabs_spec.js
+++ b/spec/frontend/integrations/overrides/components/integration_tabs_spec.js
@@ -21,10 +21,6 @@ describe('IntegrationTabs', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlBadge = () => wrapper.findComponent(GlBadge);
   const findGlTab = () => wrapper.findComponent(GlTab);
   const findSettingsLink = () => wrapper.find('a');
diff --git a/spec/frontend/invite_members/components/confetti_spec.js b/spec/frontend/invite_members/components/confetti_spec.js
index 2f361f1dc1e..382569abfd9 100644
--- a/spec/frontend/invite_members/components/confetti_spec.js
+++ b/spec/frontend/invite_members/components/confetti_spec.js
@@ -6,16 +6,10 @@ jest.mock('canvas-confetti', () => ({
   create: jest.fn(),
 }));
 
-let wrapper;
-
 const createComponent = () => {
-  wrapper = shallowMount(Confetti);
+  shallowMount(Confetti);
 };
 
-afterEach(() => {
-  wrapper.destroy();
-});
-
 describe('Confetti', () => {
   it('initiates confetti', () => {
     const basicCannon = jest.spyOn(Confetti.methods, 'basicCannon').mockImplementation(() => {});
diff --git a/spec/frontend/invite_members/components/group_select_spec.js b/spec/frontend/invite_members/components/group_select_spec.js
index e1563a7bb3a..a1ca9a69926 100644
--- a/spec/frontend/invite_members/components/group_select_spec.js
+++ b/spec/frontend/invite_members/components/group_select_spec.js
@@ -26,14 +26,9 @@ describe('GroupSelect', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownToggle = () => findDropdown().find('button[aria-haspopup="true"]');
+  const findDropdownToggle = () => findDropdown().find('button[aria-haspopup="menu"]');
   const findAvatarByLabel = (text) =>
     wrapper
       .findAllComponents(GlAvatarLabeled)
@@ -66,6 +61,7 @@ describe('GroupSelect', () => {
       expect(groupsApi.getGroups).toHaveBeenCalledWith(group1.name, {
         exclude_internal: true,
         active: true,
+        order_by: 'similarity',
       });
     });
 
diff --git a/spec/frontend/invite_members/components/import_project_members_modal_spec.js b/spec/frontend/invite_members/components/import_project_members_modal_spec.js
index d839cde163c..74cb59a9b52 100644
--- a/spec/frontend/invite_members/components/import_project_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/import_project_members_modal_spec.js
@@ -54,7 +54,6 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  wrapper.destroy();
   mock.restore();
 });
 
diff --git a/spec/frontend/invite_members/components/import_project_members_trigger_spec.js b/spec/frontend/invite_members/components/import_project_members_trigger_spec.js
index b6375fcfa22..0e8243491a8 100644
--- a/spec/frontend/invite_members/components/import_project_members_trigger_spec.js
+++ b/spec/frontend/invite_members/components/import_project_members_trigger_spec.js
@@ -17,10 +17,6 @@ const createComponent = (props = {}) => {
 describe('ImportProjectMembersTrigger', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findButton = () => wrapper.findComponent(GlButton);
 
   describe('displayText', () => {
diff --git a/spec/frontend/invite_members/components/invite_group_trigger_spec.js b/spec/frontend/invite_members/components/invite_group_trigger_spec.js
index 84ddb779a9e..e088dc41a2b 100644
--- a/spec/frontend/invite_members/components/invite_group_trigger_spec.js
+++ b/spec/frontend/invite_members/components/invite_group_trigger_spec.js
@@ -17,11 +17,6 @@ const createComponent = (props = {}) => {
 describe('InviteGroupTrigger', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findButton = () => wrapper.findComponent(GlButton);
 
   describe('displayText', () => {
diff --git a/spec/frontend/invite_members/components/invite_groups_modal_spec.js b/spec/frontend/invite_members/components/invite_groups_modal_spec.js
index c2a55517405..82b4717fbf1 100644
--- a/spec/frontend/invite_members/components/invite_groups_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_groups_modal_spec.js
@@ -44,11 +44,6 @@ describe('InviteGroupsModal', () => {
     createComponent({ isProject: false });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findGroupSelect = () => wrapper.findComponent(GroupSelect);
   const findInviteGroupAlert = () => wrapper.findComponent(InviteGroupNotification);
@@ -58,11 +53,13 @@ describe('InviteGroupsModal', () => {
     findMembersFormGroup().attributes('invalid-feedback');
   const findBase = () => wrapper.findComponent(InviteModalBase);
   const triggerGroupSelect = (val) => findGroupSelect().vm.$emit('input', val);
-  const emitEventFromModal = (eventName) => () =>
-    findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
-  const hideModal = emitEventFromModal('hidden');
-  const clickInviteButton = emitEventFromModal('primary');
-  const clickCancelButton = emitEventFromModal('cancel');
+  const hideModal = () => findModal().vm.$emit('hidden', { preventDefault: jest.fn() });
+
+  const emitClickFromModal = (testId) => () =>
+    wrapper.findByTestId(testId).vm.$emit('click', { preventDefault: jest.fn() });
+
+  const clickInviteButton = emitClickFromModal('invite-modal-submit');
+  const clickCancelButton = emitClickFromModal('invite-modal-cancel');
 
   describe('displaying the correct introText and form group description', () => {
     describe('when inviting to a project', () => {
diff --git a/spec/frontend/invite_members/components/invite_members_modal_spec.js b/spec/frontend/invite_members/components/invite_members_modal_spec.js
index 9687d528321..39d5ddee723 100644
--- a/spec/frontend/invite_members/components/invite_members_modal_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_modal_spec.js
@@ -73,6 +73,7 @@ describe('InviteMembersModal', () => {
     wrapper = shallowMountExtended(InviteMembersModal, {
       provide: {
         newProjectPath,
+        name: propsData.name,
       },
       propsData: {
         usersLimitDataset: {},
@@ -116,8 +117,6 @@ describe('InviteMembersModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mock.restore();
   });
 
@@ -134,10 +133,15 @@ describe('InviteMembersModal', () => {
     `${Object.keys(invitationsApiResponse.EXPANDED_RESTRICTED.message)[element]}: ${
       Object.values(invitationsApiResponse.EXPANDED_RESTRICTED.message)[element]
     }`;
-  const emitEventFromModal = (eventName) => () =>
-    findModal().vm.$emit(eventName, { preventDefault: jest.fn() });
-  const clickInviteButton = emitEventFromModal('primary');
-  const clickCancelButton = emitEventFromModal('cancel');
+  const findActionButton = () => wrapper.findByTestId('invite-modal-submit');
+  const findCancelButton = () => wrapper.findByTestId('invite-modal-cancel');
+
+  const emitClickFromModal = (findButton) => () =>
+    findButton().vm.$emit('click', { preventDefault: jest.fn() });
+
+  const clickInviteButton = emitClickFromModal(findActionButton);
+  const clickCancelButton = emitClickFromModal(findCancelButton);
+
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
   const membersFormGroupInvalidFeedback = () =>
     findMembersFormGroup().attributes('invalid-feedback');
@@ -368,13 +372,11 @@ describe('InviteMembersModal', () => {
           it('tracks actions', async () => {
             trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
 
-            const mockEvent = { preventDefault: jest.fn() };
-
             await triggerOpenModal({ mode: 'celebrate', source: ON_CELEBRATION_TRACK_LABEL });
 
             expectTracking('render', ON_CELEBRATION_TRACK_LABEL);
 
-            findModal().vm.$emit('cancel', mockEvent);
+            clickCancelButton();
             expectTracking('click_cancel', ON_CELEBRATION_TRACK_LABEL);
 
             findModal().vm.$emit('close');
@@ -411,13 +413,11 @@ describe('InviteMembersModal', () => {
 
         trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
 
-        const mockEvent = { preventDefault: jest.fn() };
-
         await triggerOpenModal(source);
 
         expectTracking('render', label);
 
-        findModal().vm.$emit('cancel', mockEvent);
+        clickCancelButton();
         expectTracking('click_cancel', label);
 
         findModal().vm.$emit('close');
@@ -734,7 +734,7 @@ describe('InviteMembersModal', () => {
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
           expect(findMembersSelect().props('exceptionState')).toBe(false);
-          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
+          expect(findActionButton().props('loading')).toBe(false);
         });
 
         it('clears the error when the modal is hidden', async () => {
@@ -746,7 +746,7 @@ describe('InviteMembersModal', () => {
 
           expect(membersFormGroupInvalidFeedback()).toBe(expectedSyntaxError);
           expect(findMembersSelect().props('exceptionState')).toBe(false);
-          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
+          expect(findActionButton().props('loading')).toBe(false);
 
           findModal().vm.$emit('hidden');
 
@@ -768,7 +768,7 @@ describe('InviteMembersModal', () => {
           expect(findMemberErrorAlert().text()).toContain(expectedEmailRestrictedError);
           expect(membersFormGroupInvalidFeedback()).toBe('');
           expect(findMembersSelect().props('exceptionState')).not.toBe(false);
-          expect(findModal().props('actionPrimary').attributes.loading).toBe(false);
+          expect(findActionButton().props('loading')).toBe(false);
         });
 
         it('displays all errors when there are multiple emails that return a restricted error message', async () => {
diff --git a/spec/frontend/invite_members/components/invite_members_trigger_spec.js b/spec/frontend/invite_members/components/invite_members_trigger_spec.js
index c522abe63c5..cdb6182e2ae 100644
--- a/spec/frontend/invite_members/components/invite_members_trigger_spec.js
+++ b/spec/frontend/invite_members/components/invite_members_trigger_spec.js
@@ -1,12 +1,14 @@
-import { GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import { GlButton, GlLink, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
 import eventHub from '~/invite_members/event_hub';
 import {
   TRIGGER_ELEMENT_BUTTON,
-  TRIGGER_ELEMENT_SIDE_NAV,
   TRIGGER_DEFAULT_QA_SELECTOR,
+  TRIGGER_ELEMENT_WITH_EMOJI,
+  TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI,
 } from '~/invite_members/constants';
+import { GlEmoji } from '../mock_data/member_modal';
 
 jest.mock('~/experimentation/experiment_tracking');
 
@@ -19,7 +21,8 @@ let findButton;
 const triggerComponent = {
   button: GlButton,
   anchor: GlLink,
-  'side-nav': GlLink,
+  'text-emoji': GlLink,
+  'dropdown-text-emoji': GlDropdownItem,
 };
 
 const createComponent = (props = {}) => {
@@ -29,6 +32,9 @@ const createComponent = (props = {}) => {
       ...triggerProps,
       ...props,
     },
+    stubs: {
+      GlEmoji,
+    },
   });
 };
 
@@ -40,8 +46,8 @@ const triggerItems = [
     triggerElement: 'anchor',
   },
   {
-    triggerElement: TRIGGER_ELEMENT_SIDE_NAV,
-    icon: 'plus',
+    triggerElement: TRIGGER_ELEMENT_WITH_EMOJI,
+    icon: 'shaking_hands',
   },
 ];
 
@@ -50,10 +56,6 @@ describe.each(triggerItems)('with triggerElement as %s', (triggerItem) => {
 
   findButton = () => wrapper.findComponent(triggerComponent[triggerItem.triggerElement]);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('configurable attributes', () => {
     it('includes the correct displayText for the button', () => {
       createComponent();
@@ -91,31 +93,26 @@ describe.each(triggerItems)('with triggerElement as %s', (triggerItem) => {
       });
     });
   });
+});
 
-  describe('tracking', () => {
-    it('does not add tracking attributes', () => {
-      createComponent();
-
-      expect(findButton().attributes('data-track-action')).toBeUndefined();
-      expect(findButton().attributes('data-track-label')).toBeUndefined();
-    });
+describe('link with emoji', () => {
+  it('includes the specified icon with correct size when triggerElement is link', () => {
+    const findEmoji = () => wrapper.findComponent(GlEmoji);
 
-    it('adds tracking attributes', () => {
-      createComponent({ label: '_label_', event: '_event_' });
+    createComponent({ triggerElement: TRIGGER_ELEMENT_WITH_EMOJI, icon: 'shaking_hands' });
 
-      expect(findButton().attributes('data-track-action')).toBe('_event_');
-      expect(findButton().attributes('data-track-label')).toBe('_label_');
-    });
+    expect(findEmoji().exists()).toBe(true);
+    expect(findEmoji().attributes('data-name')).toBe('shaking_hands');
   });
 });
 
-describe('side-nav with icon', () => {
+describe('dropdown item with emoji', () => {
   it('includes the specified icon with correct size when triggerElement is link', () => {
-    const findIcon = () => wrapper.findComponent(GlIcon);
+    const findEmoji = () => wrapper.findComponent(GlEmoji);
 
-    createComponent({ triggerElement: TRIGGER_ELEMENT_SIDE_NAV, icon: 'plus' });
+    createComponent({ triggerElement: TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI, icon: 'shaking_hands' });
 
-    expect(findIcon().exists()).toBe(true);
-    expect(findIcon().props('name')).toBe('plus');
+    expect(findEmoji().exists()).toBe(true);
+    expect(findEmoji().attributes('data-name')).toBe('shaking_hands');
   });
 });
diff --git a/spec/frontend/invite_members/components/invite_modal_base_spec.js b/spec/frontend/invite_members/components/invite_modal_base_spec.js
index f34f9902514..e70c83a424e 100644
--- a/spec/frontend/invite_members/components/invite_modal_base_spec.js
+++ b/spec/frontend/invite_members/components/invite_modal_base_spec.js
@@ -54,10 +54,6 @@ describe('InviteModalBase', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findFormSelect = () => wrapper.findComponent(GlFormSelect);
   const findFormSelectOptions = () => findFormSelect().findAllComponents('option');
   const findDatepicker = () => wrapper.findComponent(GlDatepicker);
@@ -66,8 +62,8 @@ describe('InviteModalBase', () => {
   const findIntroText = () => wrapper.findByTestId('modal-base-intro-text').text();
   const findMembersFormGroup = () => wrapper.findByTestId('members-form-group');
   const findDisabledInput = () => wrapper.findByTestId('disabled-input');
-  const findCancelButton = () => wrapper.find('.js-modal-action-cancel');
-  const findActionButton = () => wrapper.find('.js-modal-action-primary');
+  const findCancelButton = () => wrapper.findByTestId('invite-modal-cancel');
+  const findActionButton = () => wrapper.findByTestId('invite-modal-submit');
 
   describe('rendering the modal', () => {
     let trackingSpy;
@@ -88,20 +84,19 @@ describe('InviteModalBase', () => {
     });
 
     it('renders the Cancel button text correctly', () => {
-      expect(wrapper.findComponent(GlModal).props('actionCancel')).toMatchObject({
-        text: CANCEL_BUTTON_TEXT,
-      });
+      expect(findCancelButton().text()).toBe(CANCEL_BUTTON_TEXT);
     });
 
     it('renders the Invite button correctly', () => {
-      expect(wrapper.findComponent(GlModal).props('actionPrimary')).toMatchObject({
-        text: INVITE_BUTTON_TEXT,
-        attributes: {
-          variant: 'confirm',
-          disabled: false,
-          loading: false,
-          'data-qa-selector': 'invite_button',
-        },
+      const actionButton = findActionButton();
+
+      expect(actionButton.text()).toBe(INVITE_BUTTON_TEXT);
+      expect(actionButton.attributes('data-qa-selector')).toBe('invite_button');
+
+      expect(actionButton.props()).toMatchObject({
+        variant: 'confirm',
+        disabled: false,
+        loading: false,
       });
     });
 
@@ -235,7 +230,7 @@ describe('InviteModalBase', () => {
       },
     });
 
-    expect(wrapper.findComponent(GlModal).props('actionPrimary').attributes.loading).toBe(true);
+    expect(findActionButton().props('loading')).toBe(true);
   });
 
   it('with invalidFeedbackMessage, set members form group exception state', () => {
diff --git a/spec/frontend/invite_members/components/members_token_select_spec.js b/spec/frontend/invite_members/components/members_token_select_spec.js
index 0455460918c..c7e9905dee3 100644
--- a/spec/frontend/invite_members/components/members_token_select_spec.js
+++ b/spec/frontend/invite_members/components/members_token_select_spec.js
@@ -30,11 +30,6 @@ const createComponent = (props) => {
 describe('MembersTokenSelect', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
 
   describe('rendering the token-selector component', () => {
diff --git a/spec/frontend/invite_members/components/project_select_spec.js b/spec/frontend/invite_members/components/project_select_spec.js
index 6fbf95362fa..20db4f20408 100644
--- a/spec/frontend/invite_members/components/project_select_spec.js
+++ b/spec/frontend/invite_members/components/project_select_spec.js
@@ -23,10 +23,6 @@ describe('ProjectSelect', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findAvatarLabeled = (index) => wrapper.findAllComponents(GlAvatarLabeled).at(index);
 
diff --git a/spec/frontend/invite_members/utils/trigger_successful_invite_alert_spec.js b/spec/frontend/invite_members/utils/trigger_successful_invite_alert_spec.js
index 38b16dd0c2c..fd011658f95 100644
--- a/spec/frontend/invite_members/utils/trigger_successful_invite_alert_spec.js
+++ b/spec/frontend/invite_members/utils/trigger_successful_invite_alert_spec.js
@@ -6,10 +6,10 @@ import {
   TOAST_MESSAGE_LOCALSTORAGE_KEY,
   TOAST_MESSAGE_SUCCESSFUL,
 } from '~/invite_members/constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 useLocalStorageSpy();
 
 describe('Display Successful Invitation Alert', () => {
diff --git a/spec/frontend/issuable/components/csv_export_modal_spec.js b/spec/frontend/issuable/components/csv_export_modal_spec.js
index f798f87b6b2..ccd53e64c4d 100644
--- a/spec/frontend/issuable/components/csv_export_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_export_modal_spec.js
@@ -17,7 +17,7 @@ describe('CsvExportModal', () => {
         ...props,
       },
       provide: {
-        issuableType: 'issues',
+        issuableType: 'issue',
         ...injectedProperties,
       },
       stubs: {
@@ -29,19 +29,15 @@ describe('CsvExportModal', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findIcon = () => wrapper.findComponent(GlIcon);
 
   describe('template', () => {
     describe.each`
-      issuableType        | modalTitle
-      ${'issues'}         | ${'Export issues'}
-      ${'merge-requests'} | ${'Export merge requests'}
-    `('with the issuableType "$issuableType"', ({ issuableType, modalTitle }) => {
+      issuableType       | modalTitle                 | dataTrackLabel
+      ${'issue'}         | ${'Export issues'}         | ${'export_issues_csv'}
+      ${'merge_request'} | ${'Export merge requests'} | ${'export_merge-requests_csv'}
+    `('with the issuableType "$issuableType"', ({ issuableType, modalTitle, dataTrackLabel }) => {
       beforeEach(() => {
         wrapper = createComponent({ injectedProperties: { issuableType } });
       });
@@ -57,9 +53,9 @@ describe('CsvExportModal', () => {
             href: 'export/csv/path',
             variant: 'confirm',
             'data-method': 'post',
-            'data-qa-selector': `export_${issuableType}_button`,
+            'data-qa-selector': `export_issues_button`,
             'data-track-action': 'click_button',
-            'data-track-label': `export_${issuableType}_csv`,
+            'data-track-label': dataTrackLabel,
           },
         });
       });
diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
index 118c12d968b..a861148abb6 100644
--- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
+++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js
@@ -16,7 +16,7 @@ describe('CsvImportExportButtons', () => {
     glModalDirective = jest.fn();
     return mountExtended(CsvImportExportButtons, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
         glModal: {
           bind(_, { value }) {
             glModalDirective(value);
@@ -33,10 +33,6 @@ describe('CsvImportExportButtons', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findExportCsvButton = () => wrapper.findComponent(GlButton);
   const findImportDropdown = () => wrapper.findComponent(GlDropdown);
   const findImportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Import CSV' });
diff --git a/spec/frontend/issuable/components/csv_import_modal_spec.js b/spec/frontend/issuable/components/csv_import_modal_spec.js
index 6e954c91f46..9069d2b3ab3 100644
--- a/spec/frontend/issuable/components/csv_import_modal_spec.js
+++ b/spec/frontend/issuable/components/csv_import_modal_spec.js
@@ -32,10 +32,6 @@ describe('CsvImportModal', () => {
     formSubmitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findForm = () => wrapper.find('form');
   const findFileInput = () => wrapper.findByLabelText('Upload CSV file');
diff --git a/spec/frontend/issuable/components/issuable_by_email_spec.js b/spec/frontend/issuable/components/issuable_by_email_spec.js
index b04a6c0b8fd..4cc5775b54e 100644
--- a/spec/frontend/issuable/components/issuable_by_email_spec.js
+++ b/spec/frontend/issuable/components/issuable_by_email_spec.js
@@ -53,8 +53,6 @@ describe('IssuableByEmail', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mockAxios.restore();
   });
 
diff --git a/spec/frontend/issuable/components/issuable_header_warnings_spec.js b/spec/frontend/issuable/components/issuable_header_warnings_spec.js
index 99aa6778e1e..ff772040d22 100644
--- a/spec/frontend/issuable/components/issuable_header_warnings_spec.js
+++ b/spec/frontend/issuable/components/issuable_header_warnings_spec.js
@@ -25,16 +25,11 @@ describe('IssuableHeaderWarnings', () => {
       store,
       provide,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     issuableType
     ${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
diff --git a/spec/frontend/issuable/components/issue_assignees_spec.js b/spec/frontend/issuable/components/issue_assignees_spec.js
index 9a33bfae240..8ed51120508 100644
--- a/spec/frontend/issuable/components/issue_assignees_spec.js
+++ b/spec/frontend/issuable/components/issue_assignees_spec.js
@@ -21,11 +21,6 @@ describe('IssueAssigneesComponent', () => {
     vm = wrapper.vm;
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findTooltipText = () => wrapper.find('.js-assignee-tooltip').text();
   const findAvatars = () => wrapper.findAllComponents(UserAvatarLink);
   const findOverflowCounter = () => wrapper.find('.avatar-counter');
diff --git a/spec/frontend/issuable/components/issue_milestone_spec.js b/spec/frontend/issuable/components/issue_milestone_spec.js
index eac53c5f761..232d6177862 100644
--- a/spec/frontend/issuable/components/issue_milestone_spec.js
+++ b/spec/frontend/issuable/components/issue_milestone_spec.js
@@ -1,160 +1,61 @@
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-
 import { mockMilestone } from 'jest/boards/mock_data';
 import IssueMilestone from '~/issuable/components/issue_milestone.vue';
 
-const createComponent = (milestone = mockMilestone) => {
-  const Component = Vue.extend(IssueMilestone);
-
-  return shallowMount(Component, {
-    propsData: {
-      milestone,
-    },
-  });
-};
-
-describe('IssueMilestoneComponent', () => {
+describe('IssueMilestone component', () => {
   let wrapper;
-  let vm;
 
-  beforeEach(async () => {
-    wrapper = createComponent();
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
 
-    ({ vm } = wrapper);
+  const createComponent = (milestone = mockMilestone) =>
+    shallowMount(IssueMilestone, { propsData: { milestone } });
 
-    await nextTick();
+  beforeEach(() => {
+    wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
+  it('renders milestone icon', () => {
+    expect(wrapper.findComponent(GlIcon).props('name')).toBe('clock');
   });
 
-  describe('computed', () => {
-    describe('isMilestoneStarted', () => {
-      it('should return `false` when milestoneStart prop is not defined', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, start_date: '' },
-        });
-        await nextTick();
-
-        expect(wrapper.vm.isMilestoneStarted).toBe(false);
-      });
-
-      it('should return `true` when milestone start date is past current date', async () => {
-        await wrapper.setProps({
-          milestone: { ...mockMilestone, start_date: '1990-07-22' },
-        });
-        await nextTick();
+  it('renders milestone title', () => {
+    expect(wrapper.find('.milestone-title').text()).toBe(mockMilestone.title);
+  });
 
-        expect(wrapper.vm.isMilestoneStarted).toBe(true);
-      });
+  describe('tooltip', () => {
+    it('renders `Milestone`', () => {
+      expect(findTooltip().text()).toContain('Milestone');
     });
 
-    describe('isMilestonePastDue', () => {
-      it('should return `false` when milestoneDue prop is not defined', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, due_date: '' },
-        });
-        await nextTick();
-
-        expect(wrapper.vm.isMilestonePastDue).toBe(false);
-      });
-
-      it('should return `true` when milestone due is past current date', () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, due_date: '1990-07-22' },
-        });
-
-        expect(wrapper.vm.isMilestonePastDue).toBe(true);
-      });
+    it('renders milestone title', () => {
+      expect(findTooltip().text()).toContain(mockMilestone.title);
     });
 
-    describe('milestoneDatesAbsolute', () => {
-      it('returns string containing absolute milestone due date', () => {
-        expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
-      });
+    describe('humanized dates', () => {
+      it('renders `Expired` when there is a due date in the past', () => {
+        wrapper = createComponent({ ...mockMilestone, due_date: '2019-12-31', start_date: '' });
 
-      it('returns string containing absolute milestone start date when due date is not present', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, due_date: '' },
-        });
-        await nextTick();
-
-        expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
+        expect(findTooltip().text()).toContain('Expired 6 months ago(December 31, 2019)');
       });
 
-      it('returns empty string when both milestone start and due dates are not present', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, start_date: '', due_date: '' },
-        });
-        await nextTick();
+      it('renders `remaining` when there is a due date in the future', () => {
+        wrapper = createComponent({ ...mockMilestone, due_date: '2020-12-31', start_date: '' });
 
-        expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
+        expect(findTooltip().text()).toContain('5 months remaining(December 31, 2020)');
       });
-    });
 
-    describe('milestoneDatesHuman', () => {
-      it('returns string containing milestone due date when date is yet to be due', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
-        });
-        await nextTick();
+      it('renders `Started` when there is a start date in the past', () => {
+        wrapper = createComponent({ ...mockMilestone, due_date: '', start_date: '2019-12-31' });
 
-        expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
+        expect(findTooltip().text()).toContain('Started 6 months ago(December 31, 2019)');
       });
 
-      it('returns string containing milestone start date when date has already started and due date is not present', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
-        });
-        await nextTick();
+      it('renders `Starts` when there is a start date in the future', () => {
+        wrapper = createComponent({ ...mockMilestone, due_date: '', start_date: '2020-12-31' });
 
-        expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
+        expect(findTooltip().text()).toContain('Starts in 5 months(December 31, 2020)');
       });
-
-      it('returns string containing milestone start date when date is yet to start and due date is not present', async () => {
-        wrapper.setProps({
-          milestone: {
-            ...mockMilestone,
-            start_date: `${new Date().getFullYear() + 10}-01-01`,
-            due_date: '',
-          },
-        });
-        await nextTick();
-
-        expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
-      });
-
-      it('returns empty string when milestone start and due dates are not present', async () => {
-        wrapper.setProps({
-          milestone: { ...mockMilestone, start_date: '', due_date: '' },
-        });
-        await nextTick();
-
-        expect(wrapper.vm.milestoneDatesHuman).toBe('');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component root element with class `issue-milestone-details`', () => {
-      expect(vm.$el.classList.contains('issue-milestone-details')).toBe(true);
-    });
-
-    it('renders milestone icon', () => {
-      expect(wrapper.findComponent(GlIcon).props('name')).toBe('clock');
-    });
-
-    it('renders milestone title', () => {
-      expect(vm.$el.querySelector('.milestone-title').innerText.trim()).toBe(mockMilestone.title);
-    });
-
-    it('renders milestone tooltip', () => {
-      expect(vm.$el.querySelector('.js-item-milestone').innerText.trim()).toContain(
-        mockMilestone.title,
-      );
     });
   });
 });
diff --git a/spec/frontend/issuable/components/related_issuable_item_spec.js b/spec/frontend/issuable/components/related_issuable_item_spec.js
index 3f9f048605a..3e23558ceb4 100644
--- a/spec/frontend/issuable/components/related_issuable_item_spec.js
+++ b/spec/frontend/issuable/components/related_issuable_item_spec.js
@@ -53,10 +53,6 @@ describe('RelatedIssuableItem', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains issuable-info-container class when canReorder is false', () => {
     mountComponent({ props: { canReorder: false } });
 
diff --git a/spec/frontend/issuable/components/status_box_spec.js b/spec/frontend/issuable/components/status_box_spec.js
index 728b8958b9b..d26f287d90c 100644
--- a/spec/frontend/issuable/components/status_box_spec.js
+++ b/spec/frontend/issuable/components/status_box_spec.js
@@ -11,11 +11,6 @@ function factory(propsData) {
 describe('Merge request status box component', () => {
   const findBadge = () => wrapper.findComponent(GlBadge);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     issuableType       | badgeText   | initialState | badgeClass                        | badgeVariant | badgeIcon
     ${'merge_request'} | ${'Open'}   | ${'opened'}  | ${'issuable-status-badge-open'}   | ${'success'} | ${'merge-request-open'}
diff --git a/spec/frontend/issuable/popover/components/issue_popover_spec.js b/spec/frontend/issuable/popover/components/issue_popover_spec.js
index 444165f61c7..a7605016039 100644
--- a/spec/frontend/issuable/popover/components/issue_popover_spec.js
+++ b/spec/frontend/issuable/popover/components/issue_popover_spec.js
@@ -33,10 +33,6 @@ describe('Issue Popover', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows skeleton-loader while apollo is loading', () => {
     mountComponent();
 
diff --git a/spec/frontend/issuable/popover/components/mr_popover_spec.js b/spec/frontend/issuable/popover/components/mr_popover_spec.js
index 5fdd1e6e8fc..d9e113eeaae 100644
--- a/spec/frontend/issuable/popover/components/mr_popover_spec.js
+++ b/spec/frontend/issuable/popover/components/mr_popover_spec.js
@@ -71,10 +71,6 @@ describe('MR Popover', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows skeleton-loader while apollo is loading', () => {
     mountComponent();
 
diff --git a/spec/frontend/issuable/related_issues/components/add_issuable_form_spec.js b/spec/frontend/issuable/related_issues/components/add_issuable_form_spec.js
index 72fcab63ba7..f8e47bc0a4b 100644
--- a/spec/frontend/issuable/related_issues/components/add_issuable_form_spec.js
+++ b/spec/frontend/issuable/related_issues/components/add_issuable_form_spec.js
@@ -1,9 +1,9 @@
-import { GlFormGroup } from '@gitlab/ui';
+import { GlButton, GlFormGroup, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
 import AddIssuableForm from '~/related_issues/components/add_issuable_form.vue';
 import IssueToken from '~/related_issues/components/issue_token.vue';
+import RelatedIssuableInput from '~/related_issues/components/related_issuable_input.vue';
 import { linkedIssueTypesMap, PathIdSeparator } from '~/related_issues/constants';
 
 const issuable1 = {
@@ -26,71 +26,60 @@ const issuable2 = {
 
 const pathIdSeparator = PathIdSeparator.Issue;
 
-const findFormInput = (wrapper) => wrapper.find('input').element;
-
-const findRadioInput = (inputs, value) =>
-  inputs.filter((input) => input.element.value === value)[0];
-
-const findRadioInputs = (wrapper) => wrapper.findAll('[name="linked-issue-type-radio"]');
-
-const constructWrapper = (props) => {
-  return shallowMount(AddIssuableForm, {
-    propsData: {
-      inputValue: '',
-      pendingReferences: [],
-      pathIdSeparator,
-      ...props,
-    },
-  });
-};
-
 describe('AddIssuableForm', () => {
   let wrapper;
 
-  afterEach(() => {
-    // Jest doesn't blur an item even if it is destroyed,
-    // so blur the input manually after each test
-    const input = findFormInput(wrapper);
-    if (input) input.blur();
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(AddIssuableForm, {
+      propsData: {
+        inputValue: '',
+        pendingReferences: [],
+        pathIdSeparator,
+        ...props,
+      },
+      stubs: {
+        RelatedIssuableInput,
+      },
+    });
+  };
 
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
-  });
+  const findAddIssuableForm = () => wrapper.find('form');
+  const findFormInput = () => wrapper.find('input').element;
+  const findRadioInput = (inputs, value) =>
+    inputs.filter((input) => input.element.value === value)[0];
+  const findAllIssueTokens = () => wrapper.findAllComponents(IssueToken);
+  const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
+  const findRadioInputs = () => wrapper.findAllComponents(GlFormRadio);
+
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findFormButtons = () => wrapper.findAllComponents(GlButton);
+  const findSubmitButton = () => findFormButtons().at(0);
+  const findRelatedIssuableInput = () => wrapper.findComponent(RelatedIssuableInput);
 
   describe('with data', () => {
     describe('without references', () => {
       describe('without any input text', () => {
         beforeEach(() => {
-          wrapper = shallowMount(AddIssuableForm, {
-            propsData: {
-              inputValue: '',
-              pendingReferences: [],
-              pathIdSeparator,
-            },
-          });
+          createComponent();
         });
 
         it('should have disabled submit button', () => {
-          expect(wrapper.vm.$refs.addButton.disabled).toBe(true);
-          expect(wrapper.vm.$refs.loadingIcon).toBeUndefined();
+          expect(findSubmitButton().props('disabled')).toBe(true);
+          expect(findSubmitButton().props('loading')).toBe(false);
         });
       });
 
       describe('with input text', () => {
         beforeEach(() => {
-          wrapper = shallowMount(AddIssuableForm, {
-            propsData: {
-              inputValue: 'foo',
-              pendingReferences: [],
-              pathIdSeparator,
-            },
+          createComponent({
+            inputValue: 'foo',
+            pendingReferences: [],
+            pathIdSeparator,
           });
         });
 
         it('should not have disabled submit button', () => {
-          expect(wrapper.vm.$refs.addButton.disabled).toBe(false);
+          expect(findSubmitButton().props('disabled')).toBe(false);
         });
       });
     });
@@ -99,59 +88,56 @@ describe('AddIssuableForm', () => {
       const inputValue = 'foo #123';
 
       beforeEach(() => {
-        wrapper = mount(AddIssuableForm, {
-          propsData: {
-            inputValue,
-            pendingReferences: [issuable1.reference, issuable2.reference],
-            pathIdSeparator,
-          },
+        createComponent({
+          inputValue,
+          pendingReferences: [issuable1.reference, issuable2.reference],
+          pathIdSeparator,
         });
-      });
+      }, mount);
 
       it('should put input value in place', () => {
         expect(findFormInput(wrapper).value).toBe(inputValue);
       });
 
       it('should render pending issuables items', () => {
-        expect(wrapper.findAllComponents(IssueToken)).toHaveLength(2);
+        expect(findAllIssueTokens()).toHaveLength(2);
       });
 
       it('should not have disabled submit button', () => {
-        expect(wrapper.vm.$refs.addButton.disabled).toBe(false);
+        expect(findSubmitButton().props('disabled')).toBe(false);
       });
     });
 
     describe('when issuable type is "issue"', () => {
       beforeEach(() => {
-        wrapper = mount(AddIssuableForm, {
-          propsData: {
+        createComponent(
+          {
             inputValue: '',
             issuableType: TYPE_ISSUE,
             pathIdSeparator,
             pendingReferences: [],
           },
-        });
+          mount,
+        );
       });
 
       it('does not show radio inputs', () => {
-        expect(findRadioInputs(wrapper).length).toBe(0);
+        expect(findRadioInputs()).toHaveLength(0);
       });
     });
 
     describe('when issuable type is "epic"', () => {
       beforeEach(() => {
-        wrapper = shallowMount(AddIssuableForm, {
-          propsData: {
-            inputValue: '',
-            issuableType: TYPE_EPIC,
-            pathIdSeparator,
-            pendingReferences: [],
-          },
+        createComponent({
+          inputValue: '',
+          issuableType: TYPE_EPIC,
+          pathIdSeparator,
+          pendingReferences: [],
         });
       });
 
       it('does not show radio inputs', () => {
-        expect(findRadioInputs(wrapper).length).toBe(0);
+        expect(findRadioInputs()).toHaveLength(0);
       });
     });
 
@@ -163,17 +149,15 @@ describe('AddIssuableForm', () => {
       `(
         'show header text as "$contextHeader" and footer text as "$contextFooter" issuableType is set to $issuableType',
         ({ issuableType, contextHeader, contextFooter }) => {
-          wrapper = shallowMount(AddIssuableForm, {
-            propsData: {
-              issuableType,
-              inputValue: '',
-              showCategorizedIssues: true,
-              pathIdSeparator,
-              pendingReferences: [],
-            },
+          createComponent({
+            issuableType,
+            inputValue: '',
+            showCategorizedIssues: true,
+            pathIdSeparator,
+            pendingReferences: [],
           });
 
-          expect(wrapper.findComponent(GlFormGroup).attributes('label')).toBe(contextHeader);
+          expect(findFormGroup().attributes('label')).toBe(contextHeader);
           expect(wrapper.find('p.bold').text()).toContain(contextFooter);
         },
       );
@@ -181,26 +165,24 @@ describe('AddIssuableForm', () => {
 
     describe('when it is a Linked Issues form', () => {
       beforeEach(() => {
-        wrapper = mount(AddIssuableForm, {
-          propsData: {
-            inputValue: '',
-            showCategorizedIssues: true,
-            issuableType: TYPE_ISSUE,
-            pathIdSeparator,
-            pendingReferences: [],
-          },
+        createComponent({
+          inputValue: '',
+          showCategorizedIssues: true,
+          issuableType: TYPE_ISSUE,
+          pathIdSeparator,
+          pendingReferences: [],
         });
       });
 
       it('shows radio inputs to allow categorisation of blocking issues', () => {
-        expect(findRadioInputs(wrapper).length).toBeGreaterThan(0);
+        expect(findRadioGroup().props('options').length).toBeGreaterThan(0);
       });
 
       describe('form radio buttons', () => {
         let radioInputs;
 
         beforeEach(() => {
-          radioInputs = findRadioInputs(wrapper);
+          radioInputs = findRadioInputs();
         });
 
         it('shows "relates to" option', () => {
@@ -216,58 +198,59 @@ describe('AddIssuableForm', () => {
         });
 
         it('shows 3 options in total', () => {
-          expect(radioInputs.length).toBe(3);
+          expect(findRadioGroup().props('options')).toHaveLength(3);
         });
       });
 
       describe('when the form is submitted', () => {
-        it('emits an event with a "relates_to" link type when the "relates to" radio input selected', async () => {
-          jest.spyOn(wrapper.vm, '$emit').mockImplementation(() => {});
-
-          wrapper.vm.linkedIssueType = linkedIssueTypesMap.RELATES_TO;
-          wrapper.vm.onFormSubmit();
-
-          await nextTick();
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.RELATES_TO,
-          });
+        it('emits an event with a "relates_to" link type when the "relates to" radio input selected', () => {
+          findAddIssuableForm().trigger('submit');
+
+          expect(wrapper.emitted('addIssuableFormSubmit')).toEqual([
+            [
+              {
+                pendingReferences: '',
+                linkedIssueType: linkedIssueTypesMap.RELATES_TO,
+              },
+            ],
+          ]);
         });
 
-        it('emits an event with a "blocks" link type when the "blocks" radio input selected', async () => {
-          jest.spyOn(wrapper.vm, '$emit').mockImplementation(() => {});
-
-          wrapper.vm.linkedIssueType = linkedIssueTypesMap.BLOCKS;
-          wrapper.vm.onFormSubmit();
-
-          await nextTick();
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.BLOCKS,
-          });
+        it('emits an event with a "blocks" link type when the "blocks" radio input selected', () => {
+          findRadioGroup().vm.$emit('input', linkedIssueTypesMap.BLOCKS);
+          findAddIssuableForm().trigger('submit');
+
+          expect(wrapper.emitted('addIssuableFormSubmit')).toEqual([
+            [
+              {
+                pendingReferences: '',
+                linkedIssueType: linkedIssueTypesMap.BLOCKS,
+              },
+            ],
+          ]);
         });
 
         it('emits an event with a "is_blocked_by" link type when the "is blocked by" radio input selected', async () => {
-          jest.spyOn(wrapper.vm, '$emit').mockImplementation(() => {});
-
-          wrapper.vm.linkedIssueType = linkedIssueTypesMap.IS_BLOCKED_BY;
-          wrapper.vm.onFormSubmit();
-
-          await nextTick();
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('addIssuableFormSubmit', {
-            pendingReferences: '',
-            linkedIssueType: linkedIssueTypesMap.IS_BLOCKED_BY,
-          });
+          findRadioGroup().vm.$emit('input', linkedIssueTypesMap.IS_BLOCKED_BY);
+          findAddIssuableForm().trigger('submit');
+
+          expect(wrapper.emitted('addIssuableFormSubmit')).toEqual([
+            [
+              {
+                pendingReferences: '',
+                linkedIssueType: linkedIssueTypesMap.IS_BLOCKED_BY,
+              },
+            ],
+          ]);
         });
 
-        it('shows error message when error is present', async () => {
+        it('shows error message when error is present', () => {
           const itemAddFailureMessage = 'Something went wrong while submitting.';
-          wrapper.setProps({
+          createComponent({
             hasError: true,
             itemAddFailureMessage,
           });
 
-          await nextTick();
           expect(wrapper.find('.gl-field-error').exists()).toBe(true);
           expect(wrapper.find('.gl-field-error').text()).toContain(itemAddFailureMessage);
         });
@@ -283,27 +266,31 @@ describe('AddIssuableForm', () => {
       };
 
       it('returns autocomplete object', () => {
-        wrapper = constructWrapper({
+        createComponent({
           autoCompleteSources,
         });
 
-        expect(wrapper.vm.transformedAutocompleteSources).toBe(autoCompleteSources);
+        expect(findRelatedIssuableInput().props('autoCompleteSources')).toEqual(
+          autoCompleteSources,
+        );
 
-        wrapper = constructWrapper({
+        createComponent({
           autoCompleteSources,
           confidential: false,
         });
 
-        expect(wrapper.vm.transformedAutocompleteSources).toBe(autoCompleteSources);
+        expect(findRelatedIssuableInput().props('autoCompleteSources')).toEqual(
+          autoCompleteSources,
+        );
       });
 
       it('returns autocomplete sources with query `confidential_only`, when it is confidential', () => {
-        wrapper = constructWrapper({
+        createComponent({
           autoCompleteSources,
           confidential: true,
         });
 
-        const actualSources = wrapper.vm.transformedAutocompleteSources;
+        const actualSources = findRelatedIssuableInput().props('autoCompleteSources');
 
         expect(actualSources.epics).toContain('?confidential_only=true');
         expect(actualSources.issues).toContain('?confidential_only=true');
diff --git a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
index ff8d5073005..b9580b90c12 100644
--- a/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
+++ b/spec/frontend/issuable/related_issues/components/related_issues_block_spec.js
@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlCard } from '@gitlab/ui';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import {
   issuable1,
@@ -78,6 +78,9 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
+        stubs: {
+          GlCard,
+        },
         slots: { 'header-text': headerText },
       });
 
@@ -94,6 +97,9 @@ describe('RelatedIssuesBlock', () => {
           pathIdSeparator: PathIdSeparator.Issue,
           issuableType: 'issue',
         },
+        stubs: {
+          GlCard,
+        },
         slots: { 'header-actions': headerActions },
       });
 
@@ -222,6 +228,9 @@ describe('RelatedIssuesBlock', () => {
             pathIdSeparator: PathIdSeparator.Issue,
             issuableType,
           },
+          stubs: {
+            GlCard,
+          },
         });
 
         const iconComponent = wrapper.findComponent(GlIcon);
@@ -239,6 +248,9 @@ describe('RelatedIssuesBlock', () => {
           relatedIssues: [issuable1, issuable2, issuable3],
           issuableType: TYPE_ISSUE,
         },
+        stubs: {
+          GlCard,
+        },
       });
     });
 
diff --git a/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js b/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
index 96c0b87e2cb..1383013aedb 100644
--- a/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
+++ b/spec/frontend/issuable/related_issues/components/related_issues_root_spec.js
@@ -7,7 +7,7 @@ import {
   issuable1,
   issuable2,
 } from 'jest/issuable/components/related_issuable_mock_data';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import {
   HTTP_STATUS_CONFLICT,
@@ -19,7 +19,7 @@ import RelatedIssuesBlock from '~/related_issues/components/related_issues_block
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
 import relatedIssuesService from '~/related_issues/services/related_issues_service';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('RelatedIssuesRoot', () => {
   let wrapper;
@@ -34,7 +34,6 @@ describe('RelatedIssuesRoot', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   const createComponent = ({ props = {}, data = {} } = {}) => {
diff --git a/spec/frontend/issues/create_merge_request_dropdown_spec.js b/spec/frontend/issues/create_merge_request_dropdown_spec.js
index cc2ee84348a..21ae844e2dd 100644
--- a/spec/frontend/issues/create_merge_request_dropdown_spec.js
+++ b/spec/frontend/issues/create_merge_request_dropdown_spec.js
@@ -65,6 +65,14 @@ describe('CreateMergeRequestDropdown', () => {
       expect(dropdown.createMrPath).toBe(
         `${TEST_HOST}/create_merge_request?merge_request%5Bsource_branch%5D=contains%23hash&merge_request%5Btarget_branch%5D=master&merge_request%5Bissue_iid%5D=42`,
       );
+
+      expect(dropdown.wrapperEl.dataset.createBranchPath).toBe(
+        `${TEST_HOST}/branches?branch_name=contains%23hash&issue=42`,
+      );
+
+      expect(dropdown.wrapperEl.dataset.createMrPath).toBe(
+        `${TEST_HOST}/create_merge_request?merge_request%5Bsource_branch%5D=contains%23hash&merge_request%5Btarget_branch%5D=master&merge_request%5Bissue_iid%5D=42`,
+      );
     });
   });
 
diff --git a/spec/frontend/issues/dashboard/components/issues_dashboard_app_spec.js b/spec/frontend/issues/dashboard/components/issues_dashboard_app_spec.js
index 77d5a0579a4..ebf4771e97f 100644
--- a/spec/frontend/issues/dashboard/components/issues_dashboard_app_spec.js
+++ b/spec/frontend/issues/dashboard/components/issues_dashboard_app_spec.js
@@ -18,6 +18,7 @@ import {
   setSortPreferenceMutationResponse,
   setSortPreferenceMutationResponseWithErrors,
 } from 'jest/issues/list/mock_data';
+import { STATUS_ALL, STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants';
 import IssuesDashboardApp from '~/issues/dashboard/components/issues_dashboard_app.vue';
 import getIssuesCountsQuery from '~/issues/dashboard/queries/get_issues_counts.query.graphql';
 import { CREATED_DESC, i18n, UPDATED_DESC, urlSortParams } from '~/issues/list/constants';
@@ -36,7 +37,6 @@ import {
   TOKEN_TYPE_TYPE,
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
-import { IssuableStates } from '~/vue_shared/issuable/list/constants';
 import {
   emptyIssuesQueryResponse,
   issuesCountsQueryResponse,
@@ -124,7 +124,7 @@ describe('IssuesDashboardApp component', () => {
     // eslint-disable-next-line jest/no-disabled-tests
     it.skip('renders IssuableList component', () => {
       expect(findIssuableList().props()).toMatchObject({
-        currentTab: IssuableStates.Opened,
+        currentTab: STATUS_OPEN,
         hasNextPage: true,
         hasPreviousPage: false,
         hasScopedLabelsFeature: defaultProvide.hasScopedLabelsFeature,
@@ -148,7 +148,7 @@ describe('IssuesDashboardApp component', () => {
         tabs: IssuesDashboardApp.IssuableListTabs,
         urlParams: {
           sort: urlSortParams[CREATED_DESC],
-          state: IssuableStates.Opened,
+          state: STATUS_OPEN,
         },
         useKeysetPagination: true,
       });
@@ -283,7 +283,7 @@ describe('IssuesDashboardApp component', () => {
 
     describe('state', () => {
       it('is set from the url params', () => {
-        const initialState = IssuableStates.All;
+        const initialState = STATUS_ALL;
         setWindowLocation(`?state=${initialState}`);
         mountComponent();
 
@@ -337,11 +337,9 @@ describe('IssuesDashboardApp component', () => {
       username: 'root',
       avatar_url: 'avatar/url',
     };
-    const originalGon = window.gon;
 
     beforeEach(() => {
       window.gon = {
-        ...originalGon,
         current_user_id: mockCurrentUser.id,
         current_user_fullname: mockCurrentUser.name,
         current_username: mockCurrentUser.username,
@@ -350,10 +348,6 @@ describe('IssuesDashboardApp component', () => {
       mountComponent();
     });
 
-    afterEach(() => {
-      window.gon = originalGon;
-    });
-
     it('renders all tokens alphabetically', () => {
       const preloadedUsers = [{ ...mockCurrentUser, id: mockCurrentUser.id }];
 
@@ -375,16 +369,16 @@ describe('IssuesDashboardApp component', () => {
       beforeEach(() => {
         mountComponent();
 
-        findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
+        findIssuableList().vm.$emit('click-tab', STATUS_CLOSED);
       });
 
       it('updates ui to the new tab', () => {
-        expect(findIssuableList().props('currentTab')).toBe(IssuableStates.Closed);
+        expect(findIssuableList().props('currentTab')).toBe(STATUS_CLOSED);
       });
 
       it('updates url to the new tab', () => {
         expect(findIssuableList().props('urlParams')).toMatchObject({
-          state: IssuableStates.Closed,
+          state: STATUS_CLOSED,
         });
       });
     });
diff --git a/spec/frontend/issues/list/components/issue_card_time_info_spec.js b/spec/frontend/issues/list/components/issue_card_time_info_spec.js
index ab4d023ee39..e80ffea0591 100644
--- a/spec/frontend/issues/list/components/issue_card_time_info_spec.js
+++ b/spec/frontend/issues/list/components/issue_card_time_info_spec.js
@@ -45,10 +45,6 @@ describe('CE IssueCardTimeInfo component', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('milestone', () => {
     it('renders', () => {
       wrapper = mountComponent();
diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 8281ce0ed1a..b28a08e2fce 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -15,19 +15,21 @@ import waitForPromises from 'helpers/wait_for_promises';
 import {
   getIssuesCountsQueryResponse,
   getIssuesQueryResponse,
+  getIssuesQueryEmptyResponse,
   filteredTokens,
   locationSearch,
   setSortPreferenceMutationResponse,
   setSortPreferenceMutationResponseWithErrors,
   urlParams,
 } from 'jest/issues/list/mock_data';
-import { createAlert, VARIANT_INFO } from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/alert';
 import { TYPENAME_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { STATUS_ALL, STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
 import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
-import { IssuableListTabs, IssuableStates } from '~/vue_shared/issuable/list/constants';
+import { IssuableListTabs } from '~/vue_shared/issuable/list/constants';
 import EmptyStateWithAnyIssues from '~/issues/list/components/empty_state_with_any_issues.vue';
 import EmptyStateWithoutAnyIssues from '~/issues/list/components/empty_state_without_any_issues.vue';
 import IssuesListApp from '~/issues/list/components/issues_list_app.vue';
@@ -70,7 +72,7 @@ import('~/issuable');
 import('~/users_select');
 
 jest.mock('@sentry/browser');
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/scroll_utils', () => ({ scrollUp: jest.fn() }));
 
 describe('CE IssuesListApp component', () => {
@@ -154,7 +156,24 @@ describe('CE IssuesListApp component', () => {
     router = new VueRouter({ mode: 'history' });
 
     return mountFn(IssuesListApp, {
-      apolloProvider: createMockApollo(requestHandlers),
+      apolloProvider: createMockApollo(
+        requestHandlers,
+        {},
+        {
+          typePolicies: {
+            Query: {
+              fields: {
+                project: {
+                  merge: true,
+                },
+                group: {
+                  merge: true,
+                },
+              },
+            },
+          },
+        },
+      ),
       router,
       provide: {
         ...defaultProvide,
@@ -174,13 +193,11 @@ describe('CE IssuesListApp component', () => {
 
   afterEach(() => {
     axiosMock.reset();
-    wrapper.destroy();
   });
 
   describe('IssuableList', () => {
     beforeEach(() => {
       wrapper = mountComponent();
-      jest.runOnlyPendingTimers();
       return waitForPromises();
     });
 
@@ -197,7 +214,7 @@ describe('CE IssuesListApp component', () => {
         initialSortBy: CREATED_DESC,
         issuables: getIssuesQueryResponse.data.project.issues.nodes,
         tabs: IssuableListTabs,
-        currentTab: IssuableStates.Opened,
+        currentTab: STATUS_OPEN,
         tabCounts: {
           opened: 1,
           closed: 1,
@@ -247,7 +264,6 @@ describe('CE IssuesListApp component', () => {
             mountFn: mount,
           });
 
-          jest.runOnlyPendingTimers();
           return waitForPromises();
         });
 
@@ -416,7 +432,7 @@ describe('CE IssuesListApp component', () => {
 
     describe('state', () => {
       it('is set from the url params', () => {
-        const initialState = IssuableStates.All;
+        const initialState = STATUS_ALL;
         setWindowLocation(`?state=${initialState}`);
         wrapper = mountComponent();
 
@@ -477,7 +493,12 @@ describe('CE IssuesListApp component', () => {
   describe('empty states', () => {
     describe('when there are issues', () => {
       beforeEach(() => {
-        wrapper = mountComponent({ provide: { hasAnyIssues: true }, mountFn: mount });
+        wrapper = mountComponent({
+          provide: { hasAnyIssues: true },
+          mountFn: mount,
+          issuesQueryResponse: getIssuesQueryEmptyResponse,
+        });
+        return waitForPromises();
       });
 
       it('shows EmptyStateWithAnyIssues empty state', () => {
@@ -543,11 +564,8 @@ describe('CE IssuesListApp component', () => {
     });
 
     describe('when all tokens are available', () => {
-      const originalGon = window.gon;
-
       beforeEach(() => {
         window.gon = {
-          ...originalGon,
           current_user_id: mockCurrentUser.id,
           current_user_fullname: mockCurrentUser.name,
           current_username: mockCurrentUser.username,
@@ -563,10 +581,6 @@ describe('CE IssuesListApp component', () => {
         });
       });
 
-      afterEach(() => {
-        window.gon = originalGon;
-      });
-
       it('renders all tokens alphabetically', () => {
         const preloadedUsers = [
           { ...mockCurrentUser, id: convertToGraphQLId(TYPENAME_USER, mockCurrentUser.id) },
@@ -599,7 +613,6 @@ describe('CE IssuesListApp component', () => {
         wrapper = mountComponent({
           [mountOption]: jest.fn().mockRejectedValue(new Error('ERROR')),
         });
-        jest.runOnlyPendingTimers();
         return waitForPromises();
       });
 
@@ -620,20 +633,21 @@ describe('CE IssuesListApp component', () => {
 
   describe('events', () => {
     describe('when "click-tab" event is emitted by IssuableList', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper = mountComponent();
+        await waitForPromises();
         router.push = jest.fn();
 
-        findIssuableList().vm.$emit('click-tab', IssuableStates.Closed);
+        findIssuableList().vm.$emit('click-tab', STATUS_CLOSED);
       });
 
       it('updates ui to the new tab', () => {
-        expect(findIssuableList().props('currentTab')).toBe(IssuableStates.Closed);
+        expect(findIssuableList().props('currentTab')).toBe(STATUS_CLOSED);
       });
 
       it('updates url to the new tab', () => {
         expect(router.push).toHaveBeenCalledWith({
-          query: expect.objectContaining({ state: IssuableStates.Closed }),
+          query: expect.objectContaining({ state: STATUS_CLOSED }),
         });
       });
     });
@@ -641,19 +655,25 @@ describe('CE IssuesListApp component', () => {
     describe.each`
       event | params
       ${'next-page'} | ${{
-  page_after: 'endCursor',
+  page_after: 'endcursor',
   page_before: undefined,
   first_page_size: 20,
   last_page_size: undefined,
+  search: undefined,
+  sort: 'created_date',
+  state: 'opened',
 }}
       ${'previous-page'} | ${{
   page_after: undefined,
-  page_before: 'startCursor',
+  page_before: 'startcursor',
   first_page_size: undefined,
   last_page_size: 20,
+  search: undefined,
+  sort: 'created_date',
+  state: 'opened',
 }}
     `('when "$event" event is emitted by IssuableList', ({ event, params }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper = mountComponent({
           data: {
             pageInfo: {
@@ -662,6 +682,7 @@ describe('CE IssuesListApp component', () => {
             },
           },
         });
+        await waitForPromises();
         router.push = jest.fn();
 
         findIssuableList().vm.$emit(event);
@@ -735,7 +756,6 @@ describe('CE IssuesListApp component', () => {
                   provide: { isProject },
                   issuesQueryResponse: jest.fn().mockResolvedValue(response(isProject)),
                 });
-                jest.runOnlyPendingTimers();
                 return waitForPromises();
               });
 
@@ -761,7 +781,6 @@ describe('CE IssuesListApp component', () => {
           wrapper = mountComponent({
             issuesQueryResponse: jest.fn().mockResolvedValue(response()),
           });
-          jest.runOnlyPendingTimers();
           return waitForPromises();
         });
 
@@ -793,8 +812,6 @@ describe('CE IssuesListApp component', () => {
           router.push = jest.fn();
 
           findIssuableList().vm.$emit('sort', sortKey);
-          jest.runOnlyPendingTimers();
-          await nextTick();
 
           expect(router.push).toHaveBeenCalledWith({
             query: expect.objectContaining({ sort: urlSortParams[sortKey] }),
@@ -914,13 +931,13 @@ describe('CE IssuesListApp component', () => {
       ${'shows users when public visibility is not restricted and is signed in'}     | ${false}                     | ${true}    | ${false}
       ${'hides users when public visibility is restricted and is not signed in'}     | ${true}                      | ${false}   | ${true}
       ${'shows users when public visibility is restricted and is signed in'}         | ${true}                      | ${true}    | ${false}
-    `('$description', ({ isPublicVisibilityRestricted, isSignedIn, hideUsers }) => {
+    `('$description', async ({ isPublicVisibilityRestricted, isSignedIn, hideUsers }) => {
       const mockQuery = jest.fn().mockResolvedValue(defaultQueryResponse);
       wrapper = mountComponent({
         provide: { isPublicVisibilityRestricted, isSignedIn },
         issuesQueryResponse: mockQuery,
       });
-      jest.runOnlyPendingTimers();
+      await waitForPromises();
 
       expect(mockQuery).toHaveBeenCalledWith(expect.objectContaining({ hideUsers }));
     });
@@ -929,7 +946,6 @@ describe('CE IssuesListApp component', () => {
   describe('fetching issues', () => {
     beforeEach(() => {
       wrapper = mountComponent();
-      jest.runOnlyPendingTimers();
     });
 
     it('fetches issue, incident, test case, and task types', () => {
diff --git a/spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js b/spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js
index 406b1fbc1af..7bbb5a954ae 100644
--- a/spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js
+++ b/spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js
@@ -38,11 +38,6 @@ describe('JiraIssuesImportStatus', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when Jira import is neither in progress nor finished', () => {
     beforeEach(() => {
       wrapper = mountComponent();
diff --git a/spec/frontend/issues/list/mock_data.js b/spec/frontend/issues/list/mock_data.js
index 1e8a81116f3..0332f68ddb6 100644
--- a/spec/frontend/issues/list/mock_data.js
+++ b/spec/frontend/issues/list/mock_data.js
@@ -101,6 +101,26 @@ export const getIssuesQueryResponse = {
   },
 };
 
+export const getIssuesQueryEmptyResponse = {
+  data: {
+    project: {
+      id: '1',
+      __typename: 'Project',
+      issues: {
+        __persist: true,
+        pageInfo: {
+          __typename: 'PageInfo',
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'startcursor',
+          endCursor: 'endcursor',
+        },
+        nodes: [],
+      },
+    },
+  },
+};
+
 export const getIssuesCountsQueryResponse = {
   data: {
     project: {
diff --git a/spec/frontend/issues/list/utils_spec.js b/spec/frontend/issues/list/utils_spec.js
index a281ed1c989..e4ecdc6c29e 100644
--- a/spec/frontend/issues/list/utils_spec.js
+++ b/spec/frontend/issues/list/utils_spec.js
@@ -10,7 +10,7 @@ import {
   urlParams,
   urlParamsWithSpecialValues,
 } from 'jest/issues/list/mock_data';
-import { PAGE_SIZE, urlSortParams } from '~/issues/list/constants';
+import { urlSortParams } from '~/issues/list/constants';
 import {
   convertToApiParams,
   convertToSearchQuery,
@@ -22,10 +22,11 @@ import {
   isSortKey,
 } from '~/issues/list/utils';
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
+import { DEFAULT_PAGE_SIZE } from '~/vue_shared/issuable/list/constants';
 
 describe('getInitialPageParams', () => {
   it('returns page params with a default page size when no arguments are given', () => {
-    expect(getInitialPageParams()).toEqual({ firstPageSize: PAGE_SIZE });
+    expect(getInitialPageParams()).toEqual({ firstPageSize: DEFAULT_PAGE_SIZE });
   });
 
   it('returns page params with the given page size', () => {
diff --git a/spec/frontend/issues/new/components/title_suggestions_item_spec.js b/spec/frontend/issues/new/components/title_suggestions_item_spec.js
index c54a762440f..4454ef81416 100644
--- a/spec/frontend/issues/new/components/title_suggestions_item_spec.js
+++ b/spec/frontend/issues/new/components/title_suggestions_item_spec.js
@@ -25,10 +25,6 @@ describe('Issue title suggestions item component', () => {
   const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findUserAvatar = () => wrapper.findComponent(UserAvatarImage);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders title', () => {
     createComponent();
 
diff --git a/spec/frontend/issues/new/components/title_suggestions_spec.js b/spec/frontend/issues/new/components/title_suggestions_spec.js
index 1cd6576967a..343bdbba301 100644
--- a/spec/frontend/issues/new/components/title_suggestions_spec.js
+++ b/spec/frontend/issues/new/components/title_suggestions_spec.js
@@ -1,106 +1,95 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import TitleSuggestions from '~/issues/new/components/title_suggestions.vue';
 import TitleSuggestionsItem from '~/issues/new/components/title_suggestions_item.vue';
+import getIssueSuggestionsQuery from '~/issues/new/queries/issues.query.graphql';
+import { mockIssueSuggestionResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+const MOCK_PROJECT_PATH = 'project';
+const MOCK_ISSUES_COUNT = mockIssueSuggestionResponse.data.project.issues.edges.length;
 
 describe('Issue title suggestions component', () => {
   let wrapper;
+  let mockApollo;
+
+  function createComponent({
+    search = 'search',
+    queryResponse = jest.fn().mockResolvedValue(mockIssueSuggestionResponse),
+  } = {}) {
+    mockApollo = createMockApollo([[getIssueSuggestionsQuery, queryResponse]]);
 
-  function createComponent(search = 'search') {
     wrapper = shallowMount(TitleSuggestions, {
       propsData: {
         search,
-        projectPath: 'project',
+        projectPath: MOCK_PROJECT_PATH,
       },
+      apolloProvider: mockApollo,
     });
   }
 
-  beforeEach(() => {
-    createComponent();
-  });
+  const waitForDebounce = () => {
+    jest.runOnlyPendingTimers();
+    return waitForPromises();
+  };
 
   afterEach(() => {
-    wrapper.destroy();
+    mockApollo = null;
   });
 
   it('does not render with empty search', async () => {
-    wrapper.setProps({ search: '' });
+    createComponent({ search: '' });
+    await waitForDebounce();
 
-    await nextTick();
     expect(wrapper.isVisible()).toBe(false);
   });
 
-  describe('with data', () => {
-    let data;
-
-    beforeEach(() => {
-      data = { issues: [{ id: 1 }, { id: 2 }] };
-    });
-
-    it('renders component', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
-      expect(wrapper.findAll('li').length).toBe(data.issues.length);
-    });
+  it('does not render when loading', () => {
+    createComponent();
+    expect(wrapper.isVisible()).toBe(false);
+  });
 
-    it('does not render with empty search', async () => {
-      wrapper.setProps({ search: '' });
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
+  it('does not render with empty issues data', async () => {
+    const emptyIssuesResponse = {
+      data: {
+        project: {
+          id: 'gid://gitlab/Project/1',
+          issues: {
+            edges: [],
+          },
+        },
+      },
+    };
 
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
-    });
+    createComponent({ queryResponse: jest.fn().mockResolvedValue(emptyIssuesResponse) });
+    await waitForDebounce();
 
-    it('does not render when loading', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        ...data,
-        loading: 1,
-      });
+    expect(wrapper.isVisible()).toBe(false);
+  });
 
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
+  describe('with data', () => {
+    beforeEach(async () => {
+      createComponent();
+      await waitForDebounce();
     });
 
-    it('does not render with empty issues data', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ issues: [] });
-
-      await nextTick();
-      expect(wrapper.isVisible()).toBe(false);
+    it('renders component', () => {
+      expect(wrapper.findAll('li').length).toBe(MOCK_ISSUES_COUNT);
     });
 
-    it('renders list of issues', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
-      expect(wrapper.findAllComponents(TitleSuggestionsItem).length).toBe(2);
+    it('renders list of issues', () => {
+      expect(wrapper.findAllComponents(TitleSuggestionsItem).length).toBe(MOCK_ISSUES_COUNT);
     });
 
-    it('adds margin class to first item', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
+    it('adds margin class to first item', () => {
       expect(wrapper.findAll('li').at(0).classes()).toContain('gl-mb-3');
     });
 
-    it('does not add margin class to last item', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData(data);
-
-      await nextTick();
+    it('does not add margin class to last item', () => {
       expect(wrapper.findAll('li').at(1).classes()).not.toContain('gl-mb-3');
     });
   });
diff --git a/spec/frontend/issues/new/components/type_popover_spec.js b/spec/frontend/issues/new/components/type_popover_spec.js
index fe3d5207516..1ae150797c3 100644
--- a/spec/frontend/issues/new/components/type_popover_spec.js
+++ b/spec/frontend/issues/new/components/type_popover_spec.js
@@ -8,10 +8,6 @@ describe('Issue type info popover', () => {
     wrapper = shallowMount(TypePopover);
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     createComponent();
 
diff --git a/spec/frontend/issues/new/mock_data.js b/spec/frontend/issues/new/mock_data.js
index 74b569d9833..0d2a388cd86 100644
--- a/spec/frontend/issues/new/mock_data.js
+++ b/spec/frontend/issues/new/mock_data.js
@@ -26,3 +26,67 @@ export default () => ({
     webUrl: `${TEST_HOST}/author`,
   },
 });
+
+export const mockIssueSuggestionResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/278964',
+      issues: {
+        edges: [
+          {
+            node: {
+              id: 'gid://gitlab/Issue/123725957',
+              iid: '696',
+              title: 'Remove unused MR widget extension expand success, failed, warning events',
+              confidential: false,
+              userNotesCount: 16,
+              upvotes: 0,
+              webUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/696',
+              state: 'opened',
+              closedAt: null,
+              createdAt: '2023-02-15T12:29:59Z',
+              updatedAt: '2023-03-01T19:38:22Z',
+              author: {
+                id: 'gid://gitlab/User/325',
+                name: 'User Name',
+                username: 'user-name',
+                avatarUrl: '/uploads/-/system/user/avatar/325/avatar.png',
+                webUrl: 'https://gitlab.com/user-name',
+                __typename: 'UserCore',
+              },
+              __typename: 'Issue',
+            },
+            __typename: 'IssueEdge',
+          },
+          {
+            node: {
+              id: 'gid://gitlab/Issue/123',
+              iid: '391',
+              title: 'Remove unused MR widget extension expand success, failed, warning events',
+              confidential: false,
+              userNotesCount: 16,
+              upvotes: 0,
+              webUrl: 'https://gitlab.com/gitlab-org/gitlab/-/issues/391',
+              state: 'opened',
+              closedAt: null,
+              createdAt: '2023-02-15T12:29:59Z',
+              updatedAt: '2023-03-01T19:38:22Z',
+              author: {
+                id: 'gid://gitlab/User/2080',
+                name: 'User Name',
+                username: 'user-name',
+                avatarUrl: '/uploads/-/system/user/avatar/2080/avatar.png',
+                webUrl: 'https://gitlab.com/user-name',
+                __typename: 'UserCore',
+              },
+              __typename: 'Issue',
+            },
+            __typename: 'IssueEdge',
+          },
+        ],
+        __typename: 'IssueConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};
diff --git a/spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js b/spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js
index 010c719bd84..c5507c88fd7 100644
--- a/spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js
+++ b/spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js
@@ -34,7 +34,6 @@ describe('RelatedMergeRequests', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/issues/related_merge_requests/store/actions_spec.js b/spec/frontend/issues/related_merge_requests/store/actions_spec.js
index 7339372a8d1..31c96265f8d 100644
--- a/spec/frontend/issues/related_merge_requests/store/actions_spec.js
+++ b/spec/frontend/issues/related_merge_requests/store/actions_spec.js
@@ -1,12 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import * as actions from '~/issues/related_merge_requests/store/actions';
 import * as types from '~/issues/related_merge_requests/store/mutation_types';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('RelatedMergeRequest store actions', () => {
   let state;
diff --git a/spec/frontend/issues/show/components/app_spec.js b/spec/frontend/issues/show/components/app_spec.js
index 9fa0ce6f93d..1006f54eeaf 100644
--- a/spec/frontend/issues/show/components/app_spec.js
+++ b/spec/frontend/issues/show/components/app_spec.js
@@ -1,11 +1,10 @@
 import { GlIcon, GlIntersectionObserver } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import { setHTMLFixture } from 'helpers/fixtures';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   IssuableStatusText,
   STATUS_CLOSED,
@@ -21,29 +20,27 @@ import FormComponent from '~/issues/show/components/form.vue';
 import TitleComponent from '~/issues/show/components/title.vue';
 import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue';
 import PinnedLinks from '~/issues/show/components/pinned_links.vue';
-import { POLLING_DELAY } from '~/issues/show/constants';
 import eventHub from '~/issues/show/event_hub';
 import axios from '~/lib/utils/axios_utils';
-import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { HTTP_STATUS_OK, HTTP_STATUS_UNAUTHORIZED } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 import {
   appProps,
   initialRequest,
   publishedIncidentUrl,
+  putRequest,
   secondRequest,
   zoomMeetingUrl,
 } from '../mock_data/mock_data';
 
-jest.mock('~/flash');
-jest.mock('~/issues/show/event_hub');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 jest.mock('~/behaviors/markdown/render_gfm');
 
 const REALTIME_REQUEST_STACK = [initialRequest, secondRequest];
 
 describe('Issuable output', () => {
-  let mock;
-  let realtimeRequestCount = 0;
+  let axiosMock;
   let wrapper;
 
   const findStickyHeader = () => wrapper.findByTestId('issue-sticky-header');
@@ -57,15 +54,14 @@ describe('Issuable output', () => {
   const findForm = () => wrapper.findComponent(FormComponent);
   const findPinnedLinks = () => wrapper.findComponent(PinnedLinks);
 
-  const mountComponent = (props = {}, options = {}, data = {}) => {
+  const createComponent = ({ props = {}, options = {}, data = {} } = {}) => {
     wrapper = shallowMountExtended(IssuableApp, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: { ...appProps, ...props },
       provide: {
         fullPath: 'gitlab-org/incidents',
-        iid: '19',
         uploadMetricsFeatureAvailable: false,
       },
       stubs: {
@@ -79,6 +75,28 @@ describe('Issuable output', () => {
       },
       ...options,
     });
+
+    jest.advanceTimersToNextTimer(2);
+    return waitForPromises();
+  };
+
+  const emitHubEvent = (event) => {
+    eventHub.$emit(event);
+    return waitForPromises();
+  };
+
+  const openForm = () => {
+    return emitHubEvent('open.form');
+  };
+
+  const updateIssuable = () => {
+    return emitHubEvent('update.issuable');
+  };
+
+  const advanceToNextPoll = () => {
+    // We get new data through the HTTP request.
+    jest.advanceTimersToNextTimer();
+    return waitForPromises();
   };
 
   beforeEach(() => {
@@ -98,79 +116,100 @@ describe('Issuable output', () => {
       </div>
     `);
 
-    mock = new MockAdapter(axios);
-    mock
-      .onGet('/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes')
-      .reply(() => {
-        const res = Promise.resolve([HTTP_STATUS_OK, REALTIME_REQUEST_STACK[realtimeRequestCount]]);
-        realtimeRequestCount += 1;
-        return res;
-      });
+    jest.spyOn(eventHub, '$emit');
 
-    mountComponent();
+    axiosMock = new MockAdapter(axios);
+    const endpoint = '/gitlab-org/gitlab-shell/-/issues/9/realtime_changes/realtime_changes';
 
-    jest.advanceTimersByTime(2);
+    axiosMock.onGet(endpoint).replyOnce(HTTP_STATUS_OK, REALTIME_REQUEST_STACK[0], {
+      'POLL-INTERVAL': '1',
+    });
+    axiosMock.onGet(endpoint).reply(HTTP_STATUS_OK, REALTIME_REQUEST_STACK[1], {
+      'POLL-INTERVAL': '-1',
+    });
+    axiosMock.onPut().reply(HTTP_STATUS_OK, putRequest);
   });
 
-  afterEach(() => {
-    mock.restore();
-    realtimeRequestCount = 0;
-    wrapper.vm.poll.stop();
-    wrapper.destroy();
-    resetHTMLFixture();
-  });
+  describe('update', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
 
-  it('should render a title/description/edited and update title/description/edited on update', () => {
-    return axios
-      .waitForAll()
-      .then(() => {
-        expect(findTitle().props('titleText')).toContain('this is a title');
-        expect(findDescription().props('descriptionText')).toContain('this is a description');
-
-        expect(findEdited().exists()).toBe(true);
-        expect(findEdited().props('updatedByPath')).toMatch(/\/some_user$/);
-        expect(findEdited().props('updatedAt')).toBe(initialRequest.updated_at);
-        expect(wrapper.vm.state.lock_version).toBe(initialRequest.lock_version);
-      })
-      .then(() => {
-        wrapper.vm.poll.makeRequest();
-        return axios.waitForAll();
-      })
-      .then(() => {
-        expect(findTitle().props('titleText')).toContain('2');
-        expect(findDescription().props('descriptionText')).toContain('42');
-
-        expect(findEdited().exists()).toBe(true);
-        expect(findEdited().props('updatedByName')).toBe('Other User');
-        expect(findEdited().props('updatedByPath')).toMatch(/\/other_user$/);
-        expect(findEdited().props('updatedAt')).toBe(secondRequest.updated_at);
-      });
-  });
+    it('should render a title/description/edited and update title/description/edited on update', async () => {
+      expect(findTitle().props('titleText')).toContain(initialRequest.title_text);
+      expect(findDescription().props('descriptionText')).toContain('this is a description');
 
-  it('shows actions if permissions are correct', async () => {
-    wrapper.vm.showForm = true;
+      expect(findEdited().exists()).toBe(true);
+      expect(findEdited().props('updatedByPath')).toMatch(/\/some_user$/);
+      expect(findEdited().props('updatedAt')).toBe(initialRequest.updated_at);
+      expect(findDescription().props().lockVersion).toBe(initialRequest.lock_version);
 
-    await nextTick();
-    expect(findForm().exists()).toBe(true);
-  });
+      await advanceToNextPoll();
 
-  it('does not show actions if permissions are incorrect', async () => {
-    wrapper.vm.showForm = true;
-    wrapper.setProps({ canUpdate: false });
+      expect(findTitle().props('titleText')).toContain('2');
+      expect(findDescription().props('descriptionText')).toContain('42');
 
-    await nextTick();
-    expect(findForm().exists()).toBe(false);
+      expect(findEdited().exists()).toBe(true);
+      expect(findEdited().props('updatedByName')).toBe('Other User');
+      expect(findEdited().props('updatedByPath')).toMatch(/\/other_user$/);
+      expect(findEdited().props('updatedAt')).toBe(secondRequest.updated_at);
+    });
   });
 
-  it('does not update formState if form is already open', async () => {
-    wrapper.vm.updateAndShowForm();
+  describe('with permissions', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
 
-    wrapper.vm.state.titleText = 'testing 123';
+    it('shows actions on `open.form` event', async () => {
+      expect(findForm().exists()).toBe(false);
 
-    wrapper.vm.updateAndShowForm();
+      await openForm();
 
-    await nextTick();
-    expect(wrapper.vm.store.formState.title).not.toBe('testing 123');
+      expect(findForm().exists()).toBe(true);
+    });
+
+    it('update formState if form is not open', async () => {
+      const titleValue = initialRequest.title_text;
+
+      expect(findTitle().exists()).toBe(true);
+      expect(findTitle().props('titleText')).toBe(titleValue);
+
+      await advanceToNextPoll();
+
+      // The title component has the new data, so the state was updated
+      expect(findTitle().exists()).toBe(true);
+      expect(findTitle().props('titleText')).toBe(secondRequest.title_text);
+    });
+
+    it('does not update formState if form is already open', async () => {
+      const titleValue = initialRequest.title_text;
+
+      expect(findTitle().exists()).toBe(true);
+      expect(findTitle().props('titleText')).toBe(titleValue);
+
+      await openForm();
+
+      // Opening the form, the data has not changed
+      expect(findForm().props().formState.title).toBe(titleValue);
+
+      await advanceToNextPoll();
+
+      // We expect the prop value not to have changed after another API call
+      expect(findForm().props().formState.title).toBe(titleValue);
+    });
+  });
+
+  describe('without permissions', () => {
+    beforeEach(async () => {
+      await createComponent({ props: { canUpdate: false } });
+    });
+
+    it('does not show actions if permissions are incorrect', async () => {
+      await openForm();
+
+      expect(findForm().exists()).toBe(false);
+    });
   });
 
   describe('Pinned links propagated', () => {
@@ -178,288 +217,130 @@ describe('Issuable output', () => {
       prop                      | value
       ${'zoomMeetingUrl'}       | ${zoomMeetingUrl}
       ${'publishedIncidentUrl'} | ${publishedIncidentUrl}
-    `('sets the $prop correctly on underlying pinned links', ({ prop, value }) => {
+    `('sets the $prop correctly on underlying pinned links', async ({ prop, value }) => {
+      await createComponent();
+
       expect(findPinnedLinks().props(prop)).toBe(value);
     });
   });
 
-  describe('updateIssuable', () => {
+  describe('updating an issue', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
     it('fetches new data after update', async () => {
-      const updateStoreSpy = jest.spyOn(wrapper.vm, 'updateStoreState');
-      const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData');
-      jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
-        data: { web_url: window.location.pathname },
-      });
+      await advanceToNextPoll();
 
-      await wrapper.vm.updateIssuable();
-      expect(updateStoreSpy).toHaveBeenCalled();
-      expect(getDataSpy).toHaveBeenCalled();
+      await updateIssuable();
+
+      expect(axiosMock.history.put).toHaveLength(1);
+      // The call was made with the new data
+      expect(axiosMock.history.put[0].data.title).toEqual(findTitle().props().title);
     });
 
-    it('correctly updates issuable data', async () => {
-      const spy = jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
-        data: { web_url: window.location.pathname },
-      });
+    it('closes the form after fetching data', async () => {
+      await updateIssuable();
 
-      await wrapper.vm.updateIssuable();
-      expect(spy).toHaveBeenCalledWith(wrapper.vm.formState);
       expect(eventHub.$emit).toHaveBeenCalledWith('close.form');
     });
 
     it('does not redirect if issue has not moved', async () => {
-      jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
-        data: {
-          web_url: window.location.pathname,
-          confidential: wrapper.vm.isConfidential,
-        },
+      axiosMock.onPut().reply(HTTP_STATUS_OK, {
+        ...putRequest,
+        confidential: appProps.isConfidential,
       });
 
-      await wrapper.vm.updateIssuable();
+      await updateIssuable();
+
       expect(visitUrl).not.toHaveBeenCalled();
     });
 
     it('does not redirect if issue has not moved and user has switched tabs', async () => {
-      jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
-        data: {
-          web_url: '',
-          confidential: wrapper.vm.isConfidential,
-        },
+      axiosMock.onPut().reply(HTTP_STATUS_OK, {
+        ...putRequest,
+        web_url: '',
+        confidential: appProps.isConfidential,
       });
 
-      await wrapper.vm.updateIssuable();
+      await updateIssuable();
+
       expect(visitUrl).not.toHaveBeenCalled();
     });
 
     it('redirects if returned web_url has changed', async () => {
-      jest.spyOn(wrapper.vm.service, 'updateIssuable').mockResolvedValue({
-        data: {
-          web_url: '/testing-issue-move',
-          confidential: wrapper.vm.isConfidential,
-        },
-      });
-
-      wrapper.vm.updateIssuable();
-
-      await wrapper.vm.updateIssuable();
-      expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move');
-    });
-
-    describe('shows dialog when issue has unsaved changed', () => {
-      it('confirms on title change', async () => {
-        wrapper.vm.showForm = true;
-        wrapper.vm.state.titleText = 'title has changed';
-        const e = { returnValue: null };
-        wrapper.vm.handleBeforeUnloadEvent(e);
-
-        await nextTick();
-        expect(e.returnValue).not.toBeNull();
-      });
-
-      it('confirms on description change', async () => {
-        wrapper.vm.showForm = true;
-        wrapper.vm.state.descriptionText = 'description has changed';
-        const e = { returnValue: null };
-        wrapper.vm.handleBeforeUnloadEvent(e);
+      const webUrl = '/testing-issue-move';
 
-        await nextTick();
-        expect(e.returnValue).not.toBeNull();
+      axiosMock.onPut().reply(HTTP_STATUS_OK, {
+        ...putRequest,
+        web_url: webUrl,
+        confidential: appProps.isConfidential,
       });
 
-      it('does nothing when nothing has changed', async () => {
-        const e = { returnValue: null };
-        wrapper.vm.handleBeforeUnloadEvent(e);
+      await updateIssuable();
 
-        await nextTick();
-        expect(e.returnValue).toBeNull();
-      });
+      expect(visitUrl).toHaveBeenCalledWith(webUrl);
     });
 
     describe('error when updating', () => {
-      it('closes form on error', async () => {
-        jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue();
+      it('closes form', async () => {
+        axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED);
 
-        await wrapper.vm.updateIssuable();
-        expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
-        expect(createAlert).toHaveBeenCalledWith({ message: `Error updating issue` });
-      });
+        await updateIssuable();
 
-      it('returns the correct error message for issuableType', async () => {
-        jest.spyOn(wrapper.vm.service, 'updateIssuable').mockRejectedValue();
-        wrapper.setProps({ issuableType: 'merge request' });
-
-        await nextTick();
-        await wrapper.vm.updateIssuable();
         expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
-        expect(createAlert).toHaveBeenCalledWith({ message: `Error updating merge request` });
-      });
-
-      it('shows error message from backend if exists', async () => {
-        const msg = 'Custom error message from backend';
-        jest
-          .spyOn(wrapper.vm.service, 'updateIssuable')
-          .mockRejectedValue({ response: { data: { errors: [msg] } } });
-
-        await wrapper.vm.updateIssuable();
         expect(createAlert).toHaveBeenCalledWith({
-          message: `${wrapper.vm.defaultErrorMessage}. ${msg}`,
+          message: `Error updating issue. Request failed with status code 401`,
         });
       });
-    });
-  });
-
-  describe('updateAndShowForm', () => {
-    it('shows locked warning if form is open & data is different', async () => {
-      await nextTick();
-      wrapper.vm.updateAndShowForm();
-
-      wrapper.vm.poll.makeRequest();
 
-      await new Promise((resolve) => {
-        wrapper.vm.$watch('formState.lockedWarningVisible', (value) => {
-          if (value) {
-            resolve();
-          }
-        });
-      });
-
-      expect(wrapper.vm.formState.lockedWarningVisible).toBe(true);
-      expect(wrapper.vm.formState.lock_version).toBe(1);
-    });
-  });
-
-  describe('requestTemplatesAndShowForm', () => {
-    let formSpy;
-
-    beforeEach(() => {
-      formSpy = jest.spyOn(wrapper.vm, 'updateAndShowForm');
-    });
-
-    it('shows the form if template names as hash request is successful', () => {
-      const mockData = {
-        test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
-      };
-      mock
-        .onGet('/issuable-templates-path')
-        .reply(() => Promise.resolve([HTTP_STATUS_OK, mockData]));
-
-      return wrapper.vm.requestTemplatesAndShowForm().then(() => {
-        expect(formSpy).toHaveBeenCalledWith(mockData);
-      });
-    });
+      it('returns the correct error message for issuableType', async () => {
+        axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED);
 
-    it('shows the form if template names as array request is successful', () => {
-      const mockData = [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }];
-      mock
-        .onGet('/issuable-templates-path')
-        .reply(() => Promise.resolve([HTTP_STATUS_OK, mockData]));
+        await updateIssuable();
 
-      return wrapper.vm.requestTemplatesAndShowForm().then(() => {
-        expect(formSpy).toHaveBeenCalledWith(mockData);
-      });
-    });
-
-    it('shows the form if template names request failed', () => {
-      mock
-        .onGet('/issuable-templates-path')
-        .reply(() => Promise.reject(new Error('something went wrong')));
+        wrapper.setProps({ issuableType: 'merge request' });
 
-      return wrapper.vm.requestTemplatesAndShowForm().then(() => {
-        expect(createAlert).toHaveBeenCalledWith({ message: 'Error updating issue' });
+        await updateIssuable();
 
-        expect(formSpy).toHaveBeenCalledWith();
+        expect(eventHub.$emit).not.toHaveBeenCalledWith('close.form');
+        expect(createAlert).toHaveBeenCalledWith({
+          message: `Error updating merge request. Request failed with status code 401`,
+        });
       });
-    });
-  });
-
-  describe('show inline edit button', () => {
-    it('should render by default', () => {
-      expect(findTitle().props('showInlineEditButton')).toBe(true);
-    });
-
-    it('should render if showInlineEditButton', async () => {
-      wrapper.setProps({ showInlineEditButton: true });
-
-      await nextTick();
-      expect(findTitle().props('showInlineEditButton')).toBe(true);
-    });
 
-    it('should not render if showInlineEditButton is false', async () => {
-      wrapper.setProps({ showInlineEditButton: false });
-
-      await nextTick();
-      expect(findTitle().props('showInlineEditButton')).toBe(false);
-    });
-  });
-
-  describe('updateStoreState', () => {
-    it('should make a request and update the state of the store', () => {
-      const data = { foo: 1 };
-      const getDataSpy = jest.spyOn(wrapper.vm.service, 'getData').mockResolvedValue({ data });
-      const updateStateSpy = jest
-        .spyOn(wrapper.vm.store, 'updateState')
-        .mockImplementation(jest.fn);
-
-      return wrapper.vm.updateStoreState().then(() => {
-        expect(getDataSpy).toHaveBeenCalled();
-        expect(updateStateSpy).toHaveBeenCalledWith(data);
-      });
-    });
+      it('shows error message from backend if exists', async () => {
+        const msg = 'Custom error message from backend';
+        axiosMock.onPut().reply(HTTP_STATUS_UNAUTHORIZED, { errors: [msg] });
 
-    it('should show error message if store update fails', () => {
-      jest.spyOn(wrapper.vm.service, 'getData').mockRejectedValue();
-      wrapper.setProps({ issuableType: 'merge request' });
+        await updateIssuable();
 
-      return wrapper.vm.updateStoreState().then(() => {
         expect(createAlert).toHaveBeenCalledWith({
-          message: `Error updating ${wrapper.vm.issuableType}`,
+          message: `Error updating issue. ${msg}`,
         });
       });
     });
   });
 
-  describe('issueChanged', () => {
-    beforeEach(() => {
-      wrapper.vm.store.formState.title = '';
-      wrapper.vm.store.formState.description = '';
-      wrapper.setProps({
-        initialDescriptionText: '',
-        initialTitleText: '',
-      });
-    });
-
-    it('returns true when title is changed', () => {
-      wrapper.vm.store.formState.title = 'RandomText';
-
-      expect(wrapper.vm.issueChanged).toBe(true);
-    });
-
-    it('returns false when title is empty null', () => {
-      wrapper.vm.store.formState.title = null;
-
-      expect(wrapper.vm.issueChanged).toBe(false);
-    });
-
-    it('returns true when description is changed', () => {
-      wrapper.vm.store.formState.description = 'RandomText';
-
-      expect(wrapper.vm.issueChanged).toBe(true);
+  describe('Locked warning', () => {
+    beforeEach(async () => {
+      await createComponent();
     });
 
-    it('returns false when description is empty null', () => {
-      wrapper.vm.store.formState.description = null;
-
-      expect(wrapper.vm.issueChanged).toBe(false);
-    });
-
-    it('returns false when `initialDescriptionText` is null and `formState.description` is empty string', () => {
-      wrapper.vm.store.formState.description = '';
-      wrapper.setProps({ initialDescriptionText: null });
+    it('shows locked warning if form is open & data is different', async () => {
+      await openForm();
+      await advanceToNextPoll();
 
-      expect(wrapper.vm.issueChanged).toBe(false);
+      expect(findForm().props().formState.lockedWarningVisible).toBe(true);
+      expect(findForm().props().formState.lock_version).toBe(1);
     });
   });
 
   describe('sticky header', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
     describe('when title is in view', () => {
       it('is not shown', () => {
         expect(findStickyHeader().exists()).toBe(false);
@@ -467,21 +348,18 @@ describe('Issuable output', () => {
     });
 
     describe('when title is not in view', () => {
-      beforeEach(() => {
-        wrapper.vm.state.titleText = 'Sticky header title';
+      beforeEach(async () => {
         wrapper.findComponent(GlIntersectionObserver).vm.$emit('disappear');
       });
 
       it('shows with title', () => {
-        expect(findStickyHeader().text()).toContain('Sticky header title');
+        expect(findStickyHeader().text()).toContain(initialRequest.title_text);
       });
 
       it('shows with title for an epic', async () => {
-        wrapper.setProps({ issuableType: 'epic' });
-
-        await nextTick();
+        await wrapper.setProps({ issuableType: 'epic' });
 
-        expect(findStickyHeader().text()).toContain('Sticky header title');
+        expect(findStickyHeader().text()).toContain(' this is a title');
       });
 
       it.each`
@@ -493,9 +371,7 @@ describe('Issuable output', () => {
       `(
         'shows with state icon "$statusIcon" for $issuableType when status is $issuableStatus',
         async ({ issuableType, issuableStatus, statusIcon }) => {
-          wrapper.setProps({ issuableType, issuableStatus });
-
-          await nextTick();
+          await wrapper.setProps({ issuableType, issuableStatus });
 
           expect(findStickyHeader().findComponent(GlIcon).props('name')).toBe(statusIcon);
         },
@@ -507,9 +383,7 @@ describe('Issuable output', () => {
         ${'shows with Closed when status is closed'} | ${STATUS_CLOSED}
         ${'shows with Open when status is reopened'} | ${STATUS_REOPENED}
       `('$title', async ({ state }) => {
-        wrapper.setProps({ issuableStatus: state });
-
-        await nextTick();
+        await wrapper.setProps({ issuableStatus: state });
 
         expect(findStickyHeader().text()).toContain(IssuableStatusText[state]);
       });
@@ -519,9 +393,7 @@ describe('Issuable output', () => {
         ${'does not show confidential badge when issue is not confidential'} | ${false}
         ${'shows confidential badge when issue is confidential'}             | ${true}
       `('$title', async ({ isConfidential }) => {
-        wrapper.setProps({ isConfidential });
-
-        await nextTick();
+        await wrapper.setProps({ isConfidential });
 
         const confidentialEl = findConfidentialBadge();
         expect(confidentialEl.exists()).toBe(isConfidential);
@@ -538,9 +410,7 @@ describe('Issuable output', () => {
         ${'does not show locked badge when issue is not locked'} | ${false}
         ${'shows locked badge when issue is locked'}             | ${true}
       `('$title', async ({ isLocked }) => {
-        wrapper.setProps({ isLocked });
-
-        await nextTick();
+        await wrapper.setProps({ isLocked });
 
         expect(findLockedBadge().exists()).toBe(isLocked);
       });
@@ -550,9 +420,7 @@ describe('Issuable output', () => {
         ${'does not show hidden badge when issue is not hidden'} | ${false}
         ${'shows hidden badge when issue is hidden'}             | ${true}
       `('$title', async ({ isHidden }) => {
-        wrapper.setProps({ isHidden });
-
-        await nextTick();
+        await wrapper.setProps({ isHidden });
 
         const hiddenBadge = findHiddenBadge();
 
@@ -569,6 +437,10 @@ describe('Issuable output', () => {
   });
 
   describe('Composable description component', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
     const findIncidentTabs = () => wrapper.findComponent(IncidentTabs);
     const borderClass = 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-mb-6';
 
@@ -587,13 +459,13 @@ describe('Issuable output', () => {
     });
 
     describe('when using incident tabs description wrapper', () => {
-      beforeEach(() => {
-        mountComponent(
-          {
+      beforeEach(async () => {
+        await createComponent({
+          props: {
             descriptionComponent: IncidentTabs,
             showTitleBorder: false,
           },
-          {
+          options: {
             mocks: {
               $apollo: {
                 queries: {
@@ -604,7 +476,7 @@ describe('Issuable output', () => {
               },
             },
           },
-        );
+        });
       });
 
       it('does not the description component', () => {
@@ -622,48 +494,77 @@ describe('Issuable output', () => {
   });
 
   describe('taskListUpdateStarted', () => {
-    it('stops polling', () => {
-      jest.spyOn(wrapper.vm.poll, 'stop');
+    beforeEach(async () => {
+      await createComponent();
+    });
+
+    it('stops polling', async () => {
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
+
+      findDescription().vm.$emit('taskListUpdateStarted');
 
-      wrapper.vm.taskListUpdateStarted();
+      await advanceToNextPoll();
 
-      expect(wrapper.vm.poll.stop).toHaveBeenCalled();
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
     });
   });
 
   describe('taskListUpdateSucceeded', () => {
-    it('enables polling', () => {
-      jest.spyOn(wrapper.vm.poll, 'enable');
-      jest.spyOn(wrapper.vm.poll, 'makeDelayedRequest');
+    beforeEach(async () => {
+      await createComponent();
+      findDescription().vm.$emit('taskListUpdateStarted');
+    });
+
+    it('enables polling', async () => {
+      // Ensure that polling is not working before
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
+      await advanceToNextPoll();
+
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
 
-      wrapper.vm.taskListUpdateSucceeded();
+      // Enable Polling an move forward
+      findDescription().vm.$emit('taskListUpdateSucceeded');
+      await advanceToNextPoll();
 
-      expect(wrapper.vm.poll.enable).toHaveBeenCalled();
-      expect(wrapper.vm.poll.makeDelayedRequest).toHaveBeenCalledWith(POLLING_DELAY);
+      // Title has changed: polling works!
+      expect(findTitle().props().titleText).toBe(secondRequest.title_text);
     });
   });
 
   describe('taskListUpdateFailed', () => {
-    it('enables polling and calls updateStoreState', () => {
-      jest.spyOn(wrapper.vm.poll, 'enable');
-      jest.spyOn(wrapper.vm.poll, 'makeDelayedRequest');
-      jest.spyOn(wrapper.vm, 'updateStoreState');
+    beforeEach(async () => {
+      await createComponent();
+      findDescription().vm.$emit('taskListUpdateStarted');
+    });
+
+    it('enables polling and calls updateStoreState', async () => {
+      // Ensure that polling is not working before
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
+      await advanceToNextPoll();
 
-      wrapper.vm.taskListUpdateFailed();
+      expect(findTitle().props().titleText).toBe(initialRequest.title_text);
 
-      expect(wrapper.vm.poll.enable).toHaveBeenCalled();
-      expect(wrapper.vm.poll.makeDelayedRequest).toHaveBeenCalledWith(POLLING_DELAY);
-      expect(wrapper.vm.updateStoreState).toHaveBeenCalled();
+      // Enable Polling an move forward
+      findDescription().vm.$emit('taskListUpdateFailed');
+      await advanceToNextPoll();
+
+      // Title has changed: polling works!
+      expect(findTitle().props().titleText).toBe(secondRequest.title_text);
     });
   });
 
   describe('saveDescription event', () => {
+    beforeEach(async () => {
+      await createComponent();
+    });
+
     it('makes request to update issue', async () => {
       const description = 'I have been updated!';
       findDescription().vm.$emit('saveDescription', description);
+
       await waitForPromises();
 
-      expect(mock.history.put[0].data).toContain(description);
+      expect(axiosMock.history.put[0].data).toContain(description);
     });
   });
 });
diff --git a/spec/frontend/issues/show/components/delete_issue_modal_spec.js b/spec/frontend/issues/show/components/delete_issue_modal_spec.js
index 97a091a1748..b8adeb24005 100644
--- a/spec/frontend/issues/show/components/delete_issue_modal_spec.js
+++ b/spec/frontend/issues/show/components/delete_issue_modal_spec.js
@@ -20,10 +20,6 @@ describe('DeleteIssueModal component', () => {
   const mountComponent = (props = {}) =>
     shallowMount(DeleteIssueModal, { propsData: { ...defaultProps, ...props } });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('modal', () => {
     it('renders', () => {
       wrapper = mountComponent();
diff --git a/spec/frontend/issues/show/components/description_spec.js b/spec/frontend/issues/show/components/description_spec.js
index da51372dd3d..740b2f782e4 100644
--- a/spec/frontend/issues/show/components/description_spec.js
+++ b/spec/frontend/issues/show/components/description_spec.js
@@ -1,25 +1,19 @@
 import $ from 'jquery';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlModal } from '@gitlab/ui';
 import getIssueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'helpers/test_constants';
-import { mockTracking } from 'helpers/tracking_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import Description from '~/issues/show/components/description.vue';
 import eventHub from '~/issues/show/event_hub';
-import { updateHistory } from '~/lib/utils/url_utility';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
 import workItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
 import TaskList from '~/task_list';
-import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
-import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
 import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import {
   createWorkItemMutationErrorResponse,
@@ -27,14 +21,9 @@ import {
   getIssueDetailsResponse,
   projectWorkItemTypesQueryResponse,
 } from 'jest/work_items/mock_data';
-import {
-  descriptionProps as initialProps,
-  descriptionHtmlWithList,
-  descriptionHtmlWithCheckboxes,
-  descriptionHtmlWithTask,
-} from '../mock_data/mock_data';
+import { descriptionProps as initialProps, descriptionHtmlWithList } from '../mock_data/mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
   updateHistory: jest.fn(),
@@ -43,9 +32,6 @@ jest.mock('~/task_list');
 jest.mock('~/behaviors/markdown/render_gfm');
 
 const mockSpriteIcons = '/icons.svg';
-const showModal = jest.fn();
-const hideModal = jest.fn();
-const showDetailsModal = jest.fn();
 const $toast = {
   show: jest.fn(),
 };
@@ -62,7 +48,6 @@ const workItemTypesQueryHandler = jest.fn().mockResolvedValue(projectWorkItemTyp
 
 describe('Description component', () => {
   let wrapper;
-  let originalGon;
 
   Vue.use(VueApollo);
 
@@ -70,21 +55,16 @@ describe('Description component', () => {
   const findTextarea = () => wrapper.find('[data-testid="textarea"]');
   const findListItems = () => findGfmContent().findAll('ul > li');
   const findTaskActionButtons = () => wrapper.findAll('.task-list-item-actions');
-  const findTaskLink = () => wrapper.find('a.gfm-issue');
-  const findModal = () => wrapper.findComponent(GlModal);
-  const findWorkItemDetailModal = () => wrapper.findComponent(WorkItemDetailModal);
 
   function createComponent({
     props = {},
     provide,
     issueDetailsQueryHandler = jest.fn().mockResolvedValue(issueDetailsResponse),
     createWorkItemMutationHandler,
-    ...options
   } = {}) {
     wrapper = shallowMountExtended(Description, {
       propsData: {
         issueId: 1,
-        issueIid: 1,
         ...initialProps,
         ...props,
       },
@@ -102,25 +82,10 @@ describe('Description component', () => {
       mocks: {
         $toast,
       },
-      stubs: {
-        GlModal: stubComponent(GlModal, {
-          methods: {
-            show: showModal,
-            hide: hideModal,
-          },
-        }),
-        WorkItemDetailModal: stubComponent(WorkItemDetailModal, {
-          methods: {
-            show: showDetailsModal,
-          },
-        }),
-      },
-      ...options,
     });
   }
 
   beforeEach(() => {
-    originalGon = window.gon;
     window.gon = { sprite_icons: mockSpriteIcons };
 
     setWindowLocation(TEST_HOST);
@@ -136,8 +101,6 @@ describe('Description component', () => {
   });
 
   afterAll(() => {
-    window.gon = originalGon;
-
     $('.issuable-meta .flash-container').remove();
   });
 
@@ -285,7 +248,6 @@ describe('Description component', () => {
         props: {
           descriptionHtml: descriptionHtmlWithList,
         },
-        attachTo: document.body,
       });
       await nextTick();
     });
@@ -325,33 +287,6 @@ describe('Description component', () => {
     });
   });
 
-  describe('description with checkboxes', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          descriptionHtml: descriptionHtmlWithCheckboxes,
-        },
-      });
-      return nextTick();
-    });
-
-    it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
-      expect(findTaskActionButtons()).toHaveLength(3);
-    });
-
-    it('does not show a modal by default', () => {
-      expect(findModal().exists()).toBe(false);
-    });
-
-    it('shows toast after delete success', async () => {
-      const newDesc = 'description';
-      findWorkItemDetailModal().vm.$emit('workItemDeleted', newDesc);
-
-      expect(wrapper.emitted('updateDescription')).toEqual([[newDesc]]);
-      expect($toast.show).toHaveBeenCalledWith('Task deleted');
-    });
-  });
-
   describe('task list item actions', () => {
     describe('converting the task list item to a task', () => {
       describe('when successful', () => {
@@ -391,11 +326,7 @@ describe('Description component', () => {
         });
 
         it('calls a mutation to create a task', () => {
-          const {
-            confidential,
-            iteration,
-            milestone,
-          } = issueDetailsResponse.data.workspace.issuable;
+          const { confidential, iteration, milestone } = issueDetailsResponse.data.issue;
           expect(createWorkItemMutationHandler).toHaveBeenCalledWith({
             input: {
               confidential,
@@ -468,109 +399,4 @@ describe('Description component', () => {
       });
     });
   });
-
-  describe('work items detail', () => {
-    describe('when opening and closing', () => {
-      beforeEach(() => {
-        createComponent({
-          props: {
-            descriptionHtml: descriptionHtmlWithTask,
-          },
-        });
-        return nextTick();
-      });
-
-      it('opens when task button is clicked', async () => {
-        await findTaskLink().trigger('click');
-
-        expect(showDetailsModal).toHaveBeenCalled();
-        expect(updateHistory).toHaveBeenCalledWith({
-          url: `${TEST_HOST}/?work_item_id=2`,
-          replace: true,
-        });
-      });
-
-      it('closes from an open state', async () => {
-        await findTaskLink().trigger('click');
-
-        findWorkItemDetailModal().vm.$emit('close');
-        await nextTick();
-
-        expect(updateHistory).toHaveBeenLastCalledWith({
-          url: `${TEST_HOST}/`,
-          replace: true,
-        });
-      });
-
-      it('tracks when opened', async () => {
-        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-
-        await findTaskLink().trigger('click');
-
-        expect(trackingSpy).toHaveBeenCalledWith(
-          TRACKING_CATEGORY_SHOW,
-          'viewed_work_item_from_modal',
-          {
-            category: TRACKING_CATEGORY_SHOW,
-            label: 'work_item_view',
-            property: 'type_task',
-          },
-        );
-      });
-    });
-
-    describe('when url query `work_item_id` exists', () => {
-      it.each`
-        behavior           | workItemId     | modalOpened
-        ${'opens'}         | ${'2'}         | ${1}
-        ${'does not open'} | ${'123'}       | ${0}
-        ${'does not open'} | ${'123e'}      | ${0}
-        ${'does not open'} | ${'12e3'}      | ${0}
-        ${'does not open'} | ${'1e23'}      | ${0}
-        ${'does not open'} | ${'x'}         | ${0}
-        ${'does not open'} | ${'undefined'} | ${0}
-      `(
-        '$behavior when url contains `work_item_id=$workItemId`',
-        async ({ workItemId, modalOpened }) => {
-          setWindowLocation(`?work_item_id=${workItemId}`);
-
-          createComponent({
-            props: { descriptionHtml: descriptionHtmlWithTask },
-          });
-
-          expect(showDetailsModal).toHaveBeenCalledTimes(modalOpened);
-        },
-      );
-    });
-  });
-
-  describe('when hovering task links', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          descriptionHtml: descriptionHtmlWithTask,
-        },
-      });
-      return nextTick();
-    });
-
-    it('prefetches work item detail after work item link is hovered for 150ms', async () => {
-      await findTaskLink().trigger('mouseover');
-      jest.advanceTimersByTime(150);
-      await waitForPromises();
-
-      expect(queryHandler).toHaveBeenCalledWith({
-        id: 'gid://gitlab/WorkItem/2',
-      });
-    });
-
-    it('does not work item detail after work item link is hovered for less than 150ms', async () => {
-      await findTaskLink().trigger('mouseover');
-      await findTaskLink().trigger('mouseout');
-      jest.advanceTimersByTime(150);
-      await waitForPromises();
-
-      expect(queryHandler).not.toHaveBeenCalled();
-    });
-  });
 });
diff --git a/spec/frontend/issues/show/components/edit_actions_spec.js b/spec/frontend/issues/show/components/edit_actions_spec.js
index 11c43ea4388..ca561149806 100644
--- a/spec/frontend/issues/show/components/edit_actions_spec.js
+++ b/spec/frontend/issues/show/components/edit_actions_spec.js
@@ -56,10 +56,6 @@ describe('Edit Actions component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all buttons as enabled', () => {
     const buttons = findEditButtons().wrappers;
     buttons.forEach((button) => {
diff --git a/spec/frontend/issues/show/components/edited_spec.js b/spec/frontend/issues/show/components/edited_spec.js
index aa6e0a9dceb..a509627c347 100644
--- a/spec/frontend/issues/show/components/edited_spec.js
+++ b/spec/frontend/issues/show/components/edited_spec.js
@@ -15,10 +15,6 @@ describe('Edited component', () => {
   const mountComponent = (propsData) => mount(Edited, { propsData });
   const updatedAt = '2017-05-15T12:31:04.428Z';
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders an edited at+by string', () => {
     wrapper = mountComponent({
       updatedAt,
diff --git a/spec/frontend/issues/show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js
index 273ddfdd5d4..5c145ed4707 100644
--- a/spec/frontend/issues/show/components/fields/description_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_spec.js
@@ -33,11 +33,6 @@ describe('Description field component', () => {
     jest.spyOn(eventHub, '$emit');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders markdown field with description', () => {
     wrapper = mountComponent();
 
@@ -80,17 +75,18 @@ describe('Description field component', () => {
     });
 
     it('uses the MarkdownEditor component to edit markdown', () => {
-      expect(findMarkdownEditor().props()).toEqual(
-        expect.objectContaining({
-          value: 'test',
-          renderMarkdownPath: '/',
-          markdownDocsPath: '/',
-          quickActionsDocsPath: expect.any(String),
-          autofocus: true,
-          supportsQuickActions: true,
-          enableAutocomplete: true,
-        }),
-      );
+      expect(findMarkdownEditor().props()).toMatchObject({
+        value: 'test',
+        renderMarkdownPath: '/',
+        autofocus: true,
+        supportsQuickActions: true,
+        quickActionsDocsPath: expect.any(String),
+      });
+
+      expect(findMarkdownEditor().vm.$attrs).toMatchObject({
+        'enable-autocomplete': true,
+        'markdown-docs-path': '/',
+      });
     });
 
     it('triggers update with meta+enter', () => {
diff --git a/spec/frontend/issues/show/components/fields/description_template_spec.js b/spec/frontend/issues/show/components/fields/description_template_spec.js
index 79a3bfa9840..1e8d5e2dd95 100644
--- a/spec/frontend/issues/show/components/fields/description_template_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_template_spec.js
@@ -22,10 +22,6 @@ describe('Issue description template component with templates as hash', () => {
     wrapper = shallowMount(descriptionTemplate, options);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders templates as JSON hash in data attribute', () => {
     createComponent();
     expect(findIssuableSelector().attributes('data-data')).toBe(
diff --git a/spec/frontend/issues/show/components/fields/title_spec.js b/spec/frontend/issues/show/components/fields/title_spec.js
index a5fa96d8d64..b28762f1520 100644
--- a/spec/frontend/issues/show/components/fields/title_spec.js
+++ b/spec/frontend/issues/show/components/fields/title_spec.js
@@ -17,11 +17,6 @@ describe('Title field component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders form control with formState title', () => {
     expect(findInput().element.value).toBe('test');
   });
diff --git a/spec/frontend/issues/show/components/fields/type_spec.js b/spec/frontend/issues/show/components/fields/type_spec.js
index 27ac0e1baf3..e655cf3b37d 100644
--- a/spec/frontend/issues/show/components/fields/type_spec.js
+++ b/spec/frontend/issues/show/components/fields/type_spec.js
@@ -1,4 +1,4 @@
-import { GlFormGroup, GlListbox, GlIcon } from '@gitlab/ui';
+import { GlFormGroup, GlCollapsibleListbox, GlIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -32,7 +32,7 @@ describe('Issue type field component', () => {
     },
   };
 
-  const findListBox = () => wrapper.findComponent(GlListbox);
+  const findListBox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
   const findAllIssueItems = () => wrapper.findAll('[data-testid="issue-type-list-item"]');
   const findIssueItemAt = (at) => findAllIssueItems().at(at);
@@ -60,10 +60,6 @@ describe('Issue type field component', () => {
     mockIssueStateData = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     at   | text                     | icon
     ${0} | ${issuableTypes[0].text} | ${issuableTypes[0].icon}
diff --git a/spec/frontend/issues/show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js
index aedb974cbd0..b8ed33801f2 100644
--- a/spec/frontend/issues/show/components/form_spec.js
+++ b/spec/frontend/issues/show/components/form_spec.js
@@ -30,10 +30,6 @@ describe('Inline edit form component', () => {
     projectNamespace: '/',
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = (props) => {
     wrapper = shallowMount(formComponent, {
       propsData: {
diff --git a/spec/frontend/issues/show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js
index 3d9dad3a721..58ec7387851 100644
--- a/spec/frontend/issues/show/components/header_actions_spec.js
+++ b/spec/frontend/issues/show/components/header_actions_spec.js
@@ -1,20 +1,22 @@
 import Vue, { nextTick } from 'vue';
-import { GlButton, GlDropdownItem, GlLink, GlModal } from '@gitlab/ui';
+import { GlDropdownItem, GlLink, GlModal, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import { mockTracking } from 'helpers/tracking_helper';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
-import { IssueType, STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
+import { STATUS_CLOSED, STATUS_OPEN, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
 import DeleteIssueModal from '~/issues/show/components/delete_issue_modal.vue';
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 import HeaderActions from '~/issues/show/components/header_actions.vue';
 import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN } from '~/issues/show/constants';
+import issuesEventHub from '~/issues/show/event_hub';
 import promoteToEpicMutation from '~/issues/show/queries/promote_to_epic.mutation.graphql';
 import * as urlUtility from '~/lib/utils/url_utility';
 import eventHub from '~/notes/event_hub';
 import createStore from '~/notes/stores';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
+jest.mock('~/issues/show/event_hub', () => ({ $emit: jest.fn() }));
 
 describe('HeaderActions component', () => {
   let dispatchEventSpy;
@@ -36,7 +38,7 @@ describe('HeaderActions component', () => {
     iid: '32',
     isIssueAuthor: true,
     issuePath: 'gitlab-org/gitlab-test/-/issues/1',
-    issueType: IssueType.Issue,
+    issueType: TYPE_ISSUE,
     newIssuePath: 'gitlab-org/gitlab-test/-/issues/new',
     projectPath: 'gitlab-org/gitlab-test',
     reportAbusePath: '-/abuse_reports/add_category',
@@ -67,7 +69,8 @@ describe('HeaderActions component', () => {
     },
   };
 
-  const findToggleIssueStateButton = () => wrapper.findComponent(GlButton);
+  const findToggleIssueStateButton = () => wrapper.find(`[data-testid="toggle-button"]`);
+  const findEditButton = () => wrapper.find(`[data-testid="edit-button"]`);
 
   const findDropdownBy = (dataTestId) => wrapper.find(`[data-testid="${dataTestId}"]`);
   const findMobileDropdown = () => findDropdownBy('mobile-dropdown');
@@ -103,6 +106,9 @@ describe('HeaderActions component', () => {
           mutate: mutateMock,
         },
       },
+      stubs: {
+        GlButton,
+      },
     });
   };
 
@@ -113,13 +119,12 @@ describe('HeaderActions component', () => {
     if (visitUrlSpy) {
       visitUrlSpy.mockRestore();
     }
-    wrapper.destroy();
   });
 
   describe.each`
     issueType
-    ${IssueType.Issue}
-    ${IssueType.Incident}
+    ${TYPE_ISSUE}
+    ${TYPE_INCIDENT}
   `('when issue type is $issueType', ({ issueType }) => {
     describe('close/reopen button', () => {
       describe.each`
@@ -240,6 +245,30 @@ describe('HeaderActions component', () => {
         });
       });
     });
+
+    describe(`show edit button ${issueType}`, () => {
+      beforeEach(() => {
+        wrapper = mountComponent({
+          props: {
+            canUpdateIssue: true,
+            canCreateIssue: false,
+            isIssueAuthor: true,
+            issueType,
+            canReportSpam: false,
+            canPromoteToEpic: false,
+          },
+        });
+      });
+      it(`shows the edit button`, () => {
+        expect(findEditButton().exists()).toBe(true);
+      });
+
+      it('should trigger "open.form" event when clicked', async () => {
+        expect(issuesEventHub.$emit).not.toHaveBeenCalled();
+        await findEditButton().trigger('click');
+        expect(issuesEventHub.$emit).toHaveBeenCalledWith('open.form');
+      });
+    });
   });
 
   describe('delete issue button', () => {
diff --git a/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js b/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js
index 6c923cae0cc..6b68e7a0da6 100644
--- a/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js
+++ b/spec/frontend/issues/show/components/incidents/create_timeline_events_form_spec.js
@@ -9,7 +9,7 @@ import createTimelineEventMutation from '~/issues/show/components/incidents/grap
 import getTimelineEvents from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql';
 import { timelineFormI18n } from '~/issues/show/components/incidents/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { useFakeDate } from 'helpers/fake_date';
 import {
   timelineEventsCreateEventResponse,
@@ -19,7 +19,7 @@ import {
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const fakeDate = '2020-07-08T00:00:00.000Z';
 
@@ -99,7 +99,6 @@ describe('Create Timeline events', () => {
 
   afterEach(() => {
     createAlert.mockReset();
-    wrapper.destroy();
   });
 
   describe('createIncidentTimelineEvent', () => {
diff --git a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
index 33a3a6eddfc..0f4fb02a40b 100644
--- a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
+++ b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import { nextTick } from 'vue';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 import DescriptionComponent from '~/issues/show/components/description.vue';
@@ -11,6 +12,11 @@ import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import { descriptionProps } from '../../mock_data/mock_data';
 
+const push = jest.fn();
+const $router = {
+  push,
+};
+
 const mockAlert = {
   __typename: 'AlertManagementAlert',
   detailsUrl: INVALID_URL,
@@ -28,12 +34,20 @@ const defaultMocks = {
       },
     },
   },
+  $route: { params: {} },
+  $router,
 };
 
 describe('Incident Tabs component', () => {
   let wrapper;
 
-  const mountComponent = ({ data = {}, options = {}, mount = shallowMountExtended } = {}) => {
+  const mountComponent = ({
+    data = {},
+    options = {},
+    mount = shallowMountExtended,
+    hasLinkedAlerts = false,
+    mocks = {},
+  } = {}) => {
     wrapper = mount(
       IncidentTabs,
       merge(
@@ -54,11 +68,12 @@ describe('Incident Tabs component', () => {
             slaFeatureAvailable: true,
             canUpdate: true,
             canUpdateTimelineEvent: true,
+            hasLinkedAlerts,
           },
           data() {
             return { alert: mockAlert, ...data };
           },
-          mocks: defaultMocks,
+          mocks: { ...defaultMocks, ...mocks },
         },
         options,
       ),
@@ -102,11 +117,13 @@ describe('Incident Tabs component', () => {
     });
 
     it('renders the alert details tab', () => {
+      mountComponent({ hasLinkedAlerts: true });
       expect(findAlertDetailsTab().exists()).toBe(true);
       expect(findAlertDetailsTab().attributes('title')).toBe('Alert details');
     });
 
     it('renders the alert details table with the correct props', () => {
+      mountComponent({ hasLinkedAlerts: true });
       const alert = { iid: mockAlert.iid };
 
       expect(findAlertDetailsComponent().props('alert')).toMatchObject(alert);
@@ -156,6 +173,40 @@ describe('Incident Tabs component', () => {
 
       expect(findActiveTabs()).toHaveLength(1);
       expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.timelineTitle);
+      expect(push).toHaveBeenCalledWith('/timeline');
+    });
+  });
+
+  describe('loading page with tab', () => {
+    it('shows the timeline tab when timeline path is passed', async () => {
+      mountComponent({
+        mount: mountExtended,
+        mocks: { $route: { params: { tabId: 'timeline' } } },
+      });
+      await nextTick();
+      expect(findActiveTabs()).toHaveLength(1);
+      expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.timelineTitle);
+    });
+
+    it('shows the alerts tab when timeline path is passed', async () => {
+      mountComponent({
+        mount: mountExtended,
+        mocks: { $route: { params: { tabId: 'alerts' } } },
+        hasLinkedAlerts: true,
+      });
+      await nextTick();
+      expect(findActiveTabs()).toHaveLength(1);
+      expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.alertsTitle);
+    });
+
+    it('shows the metrics tab when metrics path is passed', async () => {
+      mountComponent({
+        mount: mountExtended,
+        mocks: { $route: { params: { tabId: 'metrics' } } },
+      });
+      await nextTick();
+      expect(findActiveTabs()).toHaveLength(1);
+      expect(findActiveTabs().at(0).text()).toBe(incidentTabsI18n.metricsTitle);
     });
   });
 });
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
index e352f9708e4..af01fd34336 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_form_spec.js
@@ -10,12 +10,12 @@ import {
   TIMELINE_EVENT_TAGS,
   timelineEventTagsI18n,
 } from '~/issues/show/components/incidents/constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { useFakeDate } from 'helpers/fake_date';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const fakeDate = '2020-07-08T00:00:00.000Z';
 
@@ -51,7 +51,6 @@ describe('Timeline events form', () => {
 
   afterEach(() => {
     createAlert.mockReset();
-    wrapper.destroy();
   });
 
   const findMarkdownField = () => wrapper.findComponent(MarkdownField);
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
index 26fda877089..8d79dece888 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_list_spec.js
@@ -11,7 +11,7 @@ import deleteTimelineEventMutation from '~/issues/show/components/incidents/grap
 import editTimelineEventMutation from '~/issues/show/components/incidents/graphql/queries/edit_timeline_event.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { useFakeDate } from 'helpers/fake_date';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   mockEvents,
   timelineEventsDeleteEventResponse,
@@ -26,7 +26,7 @@ import {
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 
 const mockConfirmAction = ({ confirmed }) => {
@@ -77,10 +77,6 @@ describe('IncidentTimelineEventList', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('groups items correctly', () => {
       expect(findTimelineEventGroups()).toHaveLength(2);
diff --git a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
index 63474070701..48c3f0984a0 100644
--- a/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
+++ b/spec/frontend/issues/show/components/incidents/timeline_events_tab_spec.js
@@ -8,13 +8,13 @@ import IncidentTimelineEventsList from '~/issues/show/components/incidents/timel
 import CreateTimelineEvent from '~/issues/show/components/incidents/create_timeline_event.vue';
 import timelineEventsQuery from '~/issues/show/components/incidents/graphql/queries/get_timeline_events.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { timelineTabI18n } from '~/issues/show/components/incidents/constants';
 import { timelineEventsQueryListResponse, timelineEventsQueryEmptyResponse } from './mock_data';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const graphQLError = new Error('GraphQL error');
 const listResponse = jest.fn().mockResolvedValue(timelineEventsQueryListResponse);
diff --git a/spec/frontend/issues/show/components/incidents/utils_spec.js b/spec/frontend/issues/show/components/incidents/utils_spec.js
index 75be17f9889..8ee0d906dd4 100644
--- a/spec/frontend/issues/show/components/incidents/utils_spec.js
+++ b/spec/frontend/issues/show/components/incidents/utils_spec.js
@@ -5,10 +5,10 @@ import {
   getUtcShiftedDate,
   getPreviousEventTags,
 } from '~/issues/show/components/incidents/utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { mockTimelineEventTags } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('incident utils', () => {
   describe('display and log error', () => {
diff --git a/spec/frontend/issues/show/components/locked_warning_spec.js b/spec/frontend/issues/show/components/locked_warning_spec.js
index dd3c7c58380..f8a8c999632 100644
--- a/spec/frontend/issues/show/components/locked_warning_spec.js
+++ b/spec/frontend/issues/show/components/locked_warning_spec.js
@@ -13,11 +13,6 @@ describe('LockedWarning component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findLink = () => wrapper.findComponent(GlLink);
 
diff --git a/spec/frontend/issues/show/components/task_list_item_actions_spec.js b/spec/frontend/issues/show/components/task_list_item_actions_spec.js
index d52f9d57453..8caa5236796 100644
--- a/spec/frontend/issues/show/components/task_list_item_actions_spec.js
+++ b/spec/frontend/issues/show/components/task_list_item_actions_spec.js
@@ -17,7 +17,7 @@ describe('TaskListItemActions component', () => {
     document.body.appendChild(li);
 
     wrapper = shallowMount(TaskListItemActions, {
-      provide: { canUpdate: true, toggleClass: 'task-list-item-actions' },
+      provide: { canUpdate: true },
       attachTo: document.querySelector('div'),
     });
   };
diff --git a/spec/frontend/issues/show/components/title_spec.js b/spec/frontend/issues/show/components/title_spec.js
index 7560b733ae6..16ac675e12c 100644
--- a/spec/frontend/issues/show/components/title_spec.js
+++ b/spec/frontend/issues/show/components/title_spec.js
@@ -1,96 +1,59 @@
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import titleComponent from '~/issues/show/components/title.vue';
-import eventHub from '~/issues/show/event_hub';
-import Store from '~/issues/show/stores';
+import Title from '~/issues/show/components/title.vue';
 
 describe('Title component', () => {
-  let vm;
-  beforeEach(() => {
+  let wrapper;
+
+  const getTitleHeader = () => wrapper.findByTestId('issue-title');
+
+  const createWrapper = (props) => {
     setHTMLFixture(`<title />`);
 
-    const Component = Vue.extend(titleComponent);
-    const store = new Store({
-      titleHtml: '',
-      descriptionHtml: '',
-      issuableRef: '',
-    });
-    vm = new Component({
+    wrapper = shallowMountExtended(Title, {
       propsData: {
         issuableRef: '#1',
         titleHtml: 'Testing <img />',
         titleText: 'Testing',
-        showForm: false,
-        formState: store.formState,
+        ...props,
       },
-    }).$mount();
-  });
+    });
+  };
 
   afterEach(() => {
     resetHTMLFixture();
   });
 
   it('renders title HTML', () => {
-    expect(vm.$el.querySelector('.title').innerHTML.trim()).toBe('Testing <img>');
-  });
-
-  it('updates page title when changing titleHtml', async () => {
-    const spy = jest.spyOn(vm, 'setPageTitle');
-    vm.titleHtml = 'test';
+    createWrapper();
 
-    await nextTick();
-    expect(spy).toHaveBeenCalled();
+    expect(getTitleHeader().element.innerHTML.trim()).toBe('Testing <img>');
   });
 
   it('animates title changes', async () => {
-    vm.titleHtml = 'test';
+    createWrapper();
 
-    await nextTick();
+    await wrapper.setProps({
+      titleHtml: 'test',
+    });
 
-    expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse');
-    jest.runAllTimers();
+    expect(getTitleHeader().classes('issue-realtime-pre-pulse')).toBe(true);
 
+    jest.runAllTimers();
     await nextTick();
 
-    expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse');
+    expect(getTitleHeader().classes('issue-realtime-trigger-pulse')).toBe(true);
   });
 
   it('updates page title after changing title', async () => {
-    vm.titleHtml = 'changed';
-    vm.titleText = 'changed';
-
-    await nextTick();
-    expect(document.querySelector('title').textContent.trim()).toContain('changed');
-  });
+    createWrapper();
 
-  describe('inline edit button', () => {
-    it('should not show by default', () => {
-      expect(vm.$el.querySelector('.btn-edit')).toBeNull();
+    await wrapper.setProps({
+      titleHtml: 'changed',
+      titleText: 'changed',
     });
 
-    it('should not show if canUpdate is false', () => {
-      vm.showInlineEditButton = true;
-      vm.canUpdate = false;
-
-      expect(vm.$el.querySelector('.btn-edit')).toBeNull();
-    });
-
-    it('should show if showInlineEditButton and canUpdate', () => {
-      vm.showInlineEditButton = true;
-      vm.canUpdate = true;
-
-      expect(vm.$el.querySelector('.btn-edit')).toBeDefined();
-    });
-
-    it('should trigger open.form event when clicked', async () => {
-      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-      vm.showInlineEditButton = true;
-      vm.canUpdate = true;
-
-      await nextTick();
-      vm.$el.querySelector('.btn-edit').click();
-
-      expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
-    });
+    expect(document.querySelector('title').textContent.trim()).toContain('changed');
   });
 });
diff --git a/spec/frontend/issues/show/mock_data/mock_data.js b/spec/frontend/issues/show/mock_data/mock_data.js
index 9f0b6fb1148..86d09665947 100644
--- a/spec/frontend/issues/show/mock_data/mock_data.js
+++ b/spec/frontend/issues/show/mock_data/mock_data.js
@@ -24,6 +24,19 @@ export const secondRequest = {
   lock_version: 2,
 };
 
+export const putRequest = {
+  web_url: window.location.pathname,
+  title: '<p>PUT</p>',
+  title_text: 'PUT',
+  description: '<p>PUT_DESC</p>',
+  description_text: 'PUT_DESC',
+  task_status: '0 of 0 completed',
+  updated_at: '2016-05-15T12:31:04.428Z',
+  updated_by_name: 'Other User',
+  updated_by_path: '/other_user',
+  lock_version: 2,
+};
+
 export const descriptionProps = {
   canUpdate: true,
   descriptionHtml: 'test',
@@ -66,47 +79,3 @@ export const descriptionHtmlWithList = `
     <li data-sourcepos="3:1-3:8">todo 3</li>
   </ul>
 `;
-
-export const descriptionHtmlWithCheckboxes = `
-  <ul dir="auto" class="task-list" data-sourcepos"3:1-5:12">
-    <li class="task-list-item" data-sourcepos="3:1-3:11">
-      <input class="task-list-item-checkbox" type="checkbox"> todo 1
-    </li>
-    <li class="task-list-item" data-sourcepos="4:1-4:12">
-      <input class="task-list-item-checkbox" type="checkbox"> todo 2
-    </li>
-    <li class="task-list-item" data-sourcepos="5:1-5:12">
-      <input class="task-list-item-checkbox" type="checkbox"> todo 3
-    </li>
-  </ul>
-`;
-
-export const descriptionHtmlWithTask = `
-  <ul data-sourcepos="1:1-3:7" class="task-list" dir="auto">
-    <li data-sourcepos="1:1-1:10" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled>
-      <a href="/gitlab-org/gitlab-test/-/issues/48" data-original="#48+" data-link="false" data-link-reference="false" data-project="1" data-issue="2" data-reference-format="+" data-reference-type="task" data-container="body" data-placement="top" title="1" class="gfm gfm-issue has-tooltip" data-issue-type="task">1 (#48)</a>
-    </li>
-    <li data-sourcepos="2:1-2:7" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled> 2
-    </li>
-    <li data-sourcepos="3:1-3:7" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled> 3
-    </li>
-  </ul>
-`;
-
-export const descriptionHtmlWithIssue = `
-  <ul data-sourcepos="1:1-3:7" class="task-list" dir="auto">
-    <li data-sourcepos="1:1-1:10" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled>
-      <a href="/gitlab-org/gitlab-test/-/issues/48" data-original="#48+" data-link="false" data-link-reference="false" data-project="1" data-issue="2" data-reference-format="+" data-reference-type="task" data-container="body" data-placement="top" title="1" class="gfm gfm-issue has-tooltip" data-issue-type="issue">1 (#48)</a>
-    </li>
-    <li data-sourcepos="2:1-2:7" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled> 2
-    </li>
-    <li data-sourcepos="3:1-3:7" class="task-list-item">
-      <input type="checkbox" class="task-list-item-checkbox" disabled> 3
-    </li>
-  </ul>
-`;
diff --git a/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js b/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
index d41031f9eaa..5e6b67aec40 100644
--- a/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
+++ b/spec/frontend/jira_connect/branches/components/new_branch_form_spec.js
@@ -78,10 +78,6 @@ describe('NewBranchForm', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when selecting items from dropdowns', () => {
     describe('when no project selected', () => {
       beforeEach(() => {
diff --git a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
index 944854faab3..0a887efee4b 100644
--- a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
@@ -49,10 +49,6 @@ describe('ProjectDropdown', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when loading projects', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index 56e425fa4eb..701512953df 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -54,10 +54,6 @@ describe('SourceBranchDropdown', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when `selectedProject` prop is not specified', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/jira_connect/branches/pages/index_spec.js b/spec/frontend/jira_connect/branches/pages/index_spec.js
index 92976dd28da..4b79d5feab5 100644
--- a/spec/frontend/jira_connect/branches/pages/index_spec.js
+++ b/spec/frontend/jira_connect/branches/pages/index_spec.js
@@ -25,10 +25,6 @@ describe('NewBranchForm', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('page title', () => {
     it.each`
       initialBranchName    | pageTitle
diff --git a/spec/frontend/jira_connect/subscriptions/api_spec.js b/spec/frontend/jira_connect/subscriptions/api_spec.js
index e2a14a9102f..5a28c6d9789 100644
--- a/spec/frontend/jira_connect/subscriptions/api_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/api_spec.js
@@ -17,7 +17,6 @@ jest.mock('~/jira_connect/subscriptions/utils', () => ({
 
 describe('JiraConnect API', () => {
   let axiosMock;
-  let originalGon;
   let response;
 
   const mockAddPath = 'addPath';
@@ -29,13 +28,11 @@ describe('JiraConnect API', () => {
 
   beforeEach(() => {
     axiosMock = new MockAdapter(axiosInstance);
-    originalGon = window.gon;
     window.gon = { api_version: 'v4' };
   });
 
   afterEach(() => {
     axiosMock.restore();
-    window.gon = originalGon;
     response = null;
   });
 
diff --git a/spec/frontend/jira_connect/subscriptions/components/add_namespace_button_spec.js b/spec/frontend/jira_connect/subscriptions/components/add_namespace_button_spec.js
index 9f92ad2adc1..934473c15ba 100644
--- a/spec/frontend/jira_connect/subscriptions/components/add_namespace_button_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/add_namespace_button_spec.js
@@ -11,7 +11,7 @@ describe('AddNamespaceButton', () => {
   const createComponent = () => {
     wrapper = shallowMount(AddNamespaceButton, {
       directives: {
-        glModal: createMockDirective(),
+        glModal: createMockDirective('gl-modal'),
       },
     });
   };
@@ -23,10 +23,6 @@ describe('AddNamespaceButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a button', () => {
     expect(findButton().exists()).toBe(true);
   });
diff --git a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal_spec.js b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal_spec.js
index d80381107f2..dbe8a734bb4 100644
--- a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal_spec.js
@@ -17,10 +17,6 @@ describe('AddNamespaceModal', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays modal with correct props', () => {
     const modal = findModal();
     expect(modal.exists()).toBe(true);
diff --git a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item_spec.js b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item_spec.js
index 5df54abfc05..e437e6e0398 100644
--- a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item_spec.js
@@ -40,10 +40,6 @@ describe('GroupsListItem', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGroupItemName = () => wrapper.findComponent(GroupItemName);
   const findLinkButton = () => wrapper.findComponent(GlButton);
   const clickLinkButton = () => findLinkButton().trigger('click');
diff --git a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_spec.js b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_spec.js
index 97038a2a231..9d5bc8dff2a 100644
--- a/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_spec.js
@@ -48,10 +48,6 @@ describe('GroupsList', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlAlert = () => wrapper.findComponent(GlAlert);
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllItems = () => wrapper.findAllComponents(GroupsListItem);
diff --git a/spec/frontend/jira_connect/subscriptions/components/app_spec.js b/spec/frontend/jira_connect/subscriptions/components/app_spec.js
index 369ddda8dbe..aa4feaa5261 100644
--- a/spec/frontend/jira_connect/subscriptions/components/app_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/app_spec.js
@@ -41,10 +41,6 @@ describe('JiraConnectApp', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     describe.each`
       scenario                   | usersPath    | shouldRenderSignInPage | shouldRenderSubscriptionsPage
diff --git a/spec/frontend/jira_connect/subscriptions/components/browser_support_alert_spec.js b/spec/frontend/jira_connect/subscriptions/components/browser_support_alert_spec.js
index aa93a6be3c8..a8aa383d917 100644
--- a/spec/frontend/jira_connect/subscriptions/components/browser_support_alert_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/browser_support_alert_spec.js
@@ -12,10 +12,6 @@ describe('BrowserSupportAlert', () => {
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findLink = () => wrapper.findComponent(GlLink);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a non-dismissible alert', () => {
     createComponent();
 
diff --git a/spec/frontend/jira_connect/subscriptions/components/group_item_name_spec.js b/spec/frontend/jira_connect/subscriptions/components/group_item_name_spec.js
index b5fe08486b1..e4da10569f3 100644
--- a/spec/frontend/jira_connect/subscriptions/components/group_item_name_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/group_item_name_spec.js
@@ -14,10 +14,6 @@ describe('GroupItemName', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('matches the snapshot', () => {
       createComponent();
diff --git a/spec/frontend/jira_connect/subscriptions/components/sign_in_legacy_button_spec.js b/spec/frontend/jira_connect/subscriptions/components/sign_in_legacy_button_spec.js
index 4ebfaed261e..0dadec598e4 100644
--- a/spec/frontend/jira_connect/subscriptions/components/sign_in_legacy_button_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/sign_in_legacy_button_spec.js
@@ -22,10 +22,6 @@ describe('SignInLegacyButton', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a button', () => {
     createComponent();
 
diff --git a/spec/frontend/jira_connect/subscriptions/components/sign_in_oauth_button_spec.js b/spec/frontend/jira_connect/subscriptions/components/sign_in_oauth_button_spec.js
index e20c4b62e77..9d39b82c05f 100644
--- a/spec/frontend/jira_connect/subscriptions/components/sign_in_oauth_button_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/sign_in_oauth_button_spec.js
@@ -56,10 +56,6 @@ describe('SignInOauthButton', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findButton = () => wrapper.findComponent(GlButton);
   describe('when `gitlabBasePath` is GitLab.com', () => {
     it('displays a button', () => {
diff --git a/spec/frontend/jira_connect/subscriptions/components/subscriptions_list_spec.js b/spec/frontend/jira_connect/subscriptions/components/subscriptions_list_spec.js
index 2d7c58fc278..5337575d5ef 100644
--- a/spec/frontend/jira_connect/subscriptions/components/subscriptions_list_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/subscriptions_list_spec.js
@@ -29,10 +29,6 @@ describe('SubscriptionsList', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findUnlinkButton = () => wrapper.findComponent(GlButton);
   const clickUnlinkButton = () => findUnlinkButton().trigger('click');
 
diff --git a/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js b/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js
index e16121243a0..c0bd908da0f 100644
--- a/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/components/user_link_spec.js
@@ -28,10 +28,6 @@ describe('UserLink', () => {
   const findSprintf = () => wrapper.findComponent(GlSprintf);
   const findOauthButton = () => wrapper.findComponent(SignInOauthButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     userSignedIn | hasSubscriptions | expectGlSprintf | expectGlLink | expectOauthButton | jiraConnectOauthEnabled
     ${true}      | ${false}         | ${true}         | ${false}     | ${false}          | ${false}
diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com_spec.js
index b9a8451f3b3..be46c1d1609 100644
--- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_com_spec.js
@@ -42,10 +42,6 @@ describe('SignInGitlabCom', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     describe.each`
       scenario                   | hasSubscriptions | signInButtonText
diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js
index e98c6ff1054..d99d8986296 100644
--- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index_spec.js
@@ -32,10 +32,6 @@ describe('SignInGitlabMultiversion', () => {
     wrapper = shallowMountExtended(SignInGitlabMultiversion);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when version is not selected', () => {
     describe('VersionSelectForm', () => {
       it('renders version select form', () => {
diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js
index 29e7fe7a5b2..428aa1d734b 100644
--- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/version_select_form_spec.js
@@ -17,10 +17,6 @@ describe('VersionSelectForm', () => {
     wrapper = shallowMountExtended(VersionSelectForm);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default state', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_page_spec.js b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_page_spec.js
index b27eba6b040..7639c3a9c3f 100644
--- a/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_page_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pages/sign_in/sign_in_page_spec.js
@@ -34,10 +34,6 @@ describe('SignInPage', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     jiraConnectOauthEnabled | publicKeyStorageEnabled | shouldRenderDotCom | shouldRenderMultiversion
     ${false}                | ${true}                 | ${true}            | ${false}
diff --git a/spec/frontend/jira_connect/subscriptions/pages/subscriptions_page_spec.js b/spec/frontend/jira_connect/subscriptions/pages/subscriptions_page_spec.js
index 4956af76ead..d262f4b2735 100644
--- a/spec/frontend/jira_connect/subscriptions/pages/subscriptions_page_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pages/subscriptions_page_spec.js
@@ -26,10 +26,6 @@ describe('SubscriptionsPage', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     describe.each`
       scenario                        | subscriptionsLoading | hasSubscriptions | expectSubscriptionsList | expectEmptyState
diff --git a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
index 40e627262db..6766456d09c 100644
--- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
+++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`JiraImportForm table body shows correct information in each cell 1`] = `
 <table
-  aria-busy="false"
+  aria-busy=""
   aria-colcount="3"
   class="table b-table gl-table b-table-fixed"
   role="table"
@@ -92,7 +92,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
           <!---->
           <button
             aria-expanded="false"
-            aria-haspopup="true"
+            aria-haspopup="menu"
             class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
             type="button"
           >
@@ -217,7 +217,7 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
           <!---->
           <button
             aria-expanded="false"
-            aria-haspopup="true"
+            aria-haspopup="menu"
             class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
             type="button"
           >
diff --git a/spec/frontend/jira_import/components/jira_import_app_spec.js b/spec/frontend/jira_import/components/jira_import_app_spec.js
index 022a0f81aaa..dc1b75f5d9e 100644
--- a/spec/frontend/jira_import/components/jira_import_app_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_app_spec.js
@@ -67,11 +67,6 @@ describe('JiraImportApp', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when Jira integration is not configured', () => {
     beforeEach(() => {
       wrapper = mountComponent({ isJiraConfigured: false });
diff --git a/spec/frontend/jira_import/components/jira_import_form_spec.js b/spec/frontend/jira_import/components/jira_import_form_spec.js
index d43a9f8a145..c7db9f429de 100644
--- a/spec/frontend/jira_import/components/jira_import_form_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_form_spec.js
@@ -106,7 +106,6 @@ describe('JiraImportForm', () => {
     axiosMock.restore();
     mutateSpy.mockRestore();
     querySpy.mockRestore();
-    wrapper.destroy();
   });
 
   describe('select dropdown project selection', () => {
diff --git a/spec/frontend/jira_import/components/jira_import_progress_spec.js b/spec/frontend/jira_import/components/jira_import_progress_spec.js
index 42356763492..c0d415a2130 100644
--- a/spec/frontend/jira_import/components/jira_import_progress_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_progress_spec.js
@@ -25,11 +25,6 @@ describe('JiraImportProgress', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('empty state', () => {
     beforeEach(() => {
       wrapper = mountComponent();
diff --git a/spec/frontend/jira_import/components/jira_import_setup_spec.js b/spec/frontend/jira_import/components/jira_import_setup_spec.js
index 0085a2b5572..5331467d669 100644
--- a/spec/frontend/jira_import/components/jira_import_setup_spec.js
+++ b/spec/frontend/jira_import/components/jira_import_setup_spec.js
@@ -17,11 +17,6 @@ describe('JiraImportSetup', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('contains illustration', () => {
     expect(getGlEmptyStateProp('svgPath')).toBe(illustration);
   });
diff --git a/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
index 14613775791..5ecddc7efd6 100644
--- a/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
+++ b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
@@ -27,10 +27,6 @@ describe('Jobs filtered search', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays filtered search', () => {
     createComponent();
 
diff --git a/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js b/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js
index fbe5f6a2e11..6755b854f01 100644
--- a/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js
+++ b/spec/frontend/jobs/components/filtered_search/tokens/job_status_token_spec.js
@@ -45,10 +45,6 @@ describe('Job Status Token', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('passes config correctly', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
diff --git a/spec/frontend/jobs/components/job/artifacts_block_spec.js b/spec/frontend/jobs/components/job/artifacts_block_spec.js
index c75deb64d84..ea5d727bd08 100644
--- a/spec/frontend/jobs/components/job/artifacts_block_spec.js
+++ b/spec/frontend/jobs/components/job/artifacts_block_spec.js
@@ -55,11 +55,6 @@ describe('Artifacts block', () => {
     locked: true,
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with expired artifacts that are not locked', () => {
     beforeEach(() => {
       wrapper = createWrapper({
diff --git a/spec/frontend/jobs/components/job/commit_block_spec.js b/spec/frontend/jobs/components/job/commit_block_spec.js
index 4fcc754c82c..1c28b5079d7 100644
--- a/spec/frontend/jobs/components/job/commit_block_spec.js
+++ b/spec/frontend/jobs/components/job/commit_block_spec.js
@@ -32,10 +32,6 @@ describe('Commit block', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without merge request', () => {
     beforeEach(() => {
       mountComponent();
diff --git a/spec/frontend/jobs/components/job/environments_block_spec.js b/spec/frontend/jobs/components/job/environments_block_spec.js
index 134533e2af8..ab36f79ea5e 100644
--- a/spec/frontend/jobs/components/job/environments_block_spec.js
+++ b/spec/frontend/jobs/components/job/environments_block_spec.js
@@ -51,11 +51,6 @@ describe('Environments block', () => {
   const findEnvironmentLink = () => wrapper.find('[data-testid="job-environment-link"]');
   const findClusterLink = () => wrapper.find('[data-testid="job-cluster-link"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with last deployment', () => {
     it('renders info for most recent deployment', () => {
       createComponent({
diff --git a/spec/frontend/jobs/components/job/erased_block_spec.js b/spec/frontend/jobs/components/job/erased_block_spec.js
index c6aba01fa53..aeab676fc7e 100644
--- a/spec/frontend/jobs/components/job/erased_block_spec.js
+++ b/spec/frontend/jobs/components/job/erased_block_spec.js
@@ -18,10 +18,6 @@ describe('Erased block', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with job erased by user', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/jobs/components/job/job_app_spec.js b/spec/frontend/jobs/components/job/job_app_spec.js
index cefedcd82fb..394fc8ad43c 100644
--- a/spec/frontend/jobs/components/job/job_app_spec.js
+++ b/spec/frontend/jobs/components/job/job_app_spec.js
@@ -83,8 +83,9 @@ describe('Job App', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
+    wrapper.destroy();
   });
 
   describe('while loading', () => {
diff --git a/spec/frontend/jobs/components/job/job_container_item_spec.js b/spec/frontend/jobs/components/job/job_container_item_spec.js
index 05c38dd74b7..8121aa1172f 100644
--- a/spec/frontend/jobs/components/job/job_container_item_spec.js
+++ b/spec/frontend/jobs/components/job/job_container_item_spec.js
@@ -24,11 +24,6 @@ describe('JobContainerItem', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when a job is not active and not retried', () => {
     beforeEach(() => {
       createComponent(job);
diff --git a/spec/frontend/jobs/components/job/job_log_controllers_spec.js b/spec/frontend/jobs/components/job/job_log_controllers_spec.js
index 5e9a73b4387..9917c63b2d0 100644
--- a/spec/frontend/jobs/components/job/job_log_controllers_spec.js
+++ b/spec/frontend/jobs/components/job/job_log_controllers_spec.js
@@ -285,6 +285,18 @@ describe('Job log controllers', () => {
           expect(findScrollFailure().props('disabled')).toBe(false);
         });
       });
+
+      describe('on error', () => {
+        beforeEach(() => {
+          jest.spyOn(commonUtils, 'backOff').mockRejectedValueOnce();
+
+          createWrapper({}, { jobLogJumpToFailures: true });
+        });
+
+        it('stays disabled', () => {
+          expect(findScrollFailure().props('disabled')).toBe(true);
+        });
+      });
     });
   });
 
diff --git a/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js b/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js
index d60043f33f7..712269a1e83 100644
--- a/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js
+++ b/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js
@@ -64,13 +64,11 @@ describe('Job Retry Forward Deployment Modal', () => {
     beforeEach(createWrapper);
 
     it('should correctly configure the primary action', () => {
-      expect(findModal().props('actionPrimary').attributes).toMatchObject([
-        {
-          'data-method': 'post',
-          href: job.retry_path,
-          variant: 'danger',
-        },
-      ]);
+      expect(findModal().props('actionPrimary').attributes).toMatchObject({
+        'data-method': 'post',
+        href: job.retry_path,
+        variant: 'danger',
+      });
     });
   });
 });
diff --git a/spec/frontend/jobs/components/job/jobs_container_spec.js b/spec/frontend/jobs/components/job/jobs_container_spec.js
index 2fde4d3020b..05660880751 100644
--- a/spec/frontend/jobs/components/job/jobs_container_spec.js
+++ b/spec/frontend/jobs/components/job/jobs_container_spec.js
@@ -68,10 +68,6 @@ describe('Jobs List block', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a list of jobs', () => {
     createComponent({
       jobs: [job, retried, active],
diff --git a/spec/frontend/jobs/components/job/manual_variables_form_spec.js b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
index a5b3b0e3b47..98b9ca78a45 100644
--- a/spec/frontend/jobs/components/job/manual_variables_form_spec.js
+++ b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
@@ -2,24 +2,28 @@ import { GlSprintf, GlLink } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { nextTick } from 'vue';
+import { createAlert } from '~/alert';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { TYPENAME_CI_BUILD } from '~/graphql_shared/constants';
+import { JOB_GRAPHQL_ERRORS } from '~/jobs/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import { redirectTo } from '~/lib/utils/url_utility';
 import ManualVariablesForm from '~/jobs/components/job/manual_variables_form.vue';
 import getJobQuery from '~/jobs/components/job/graphql/queries/get_job.query.graphql';
-import retryJobMutation from '~/jobs/components/job/graphql/mutations/job_retry_with_variables.mutation.graphql';
+import playJobMutation from '~/jobs/components/job/graphql/mutations/job_play_with_variables.mutation.graphql';
 import {
   mockFullPath,
   mockId,
   mockJobResponse,
   mockJobWithVariablesResponse,
-  mockJobMutationData,
+  mockJobPlayMutationData,
+  mockJobRetryMutationData,
 } from './mock_data';
 
 const localVue = createLocalVue();
+jest.mock('~/alert');
 localVue.use(VueApollo);
 
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -39,9 +43,9 @@ describe('Manual Variables Form', () => {
   const createComponent = ({ options = {}, props = {} } = {}) => {
     wrapper = mountExtended(ManualVariablesForm, {
       propsData: {
-        ...props,
         jobId: mockId,
-        isRetryable: true,
+        isRetryable: false,
+        ...props,
       },
       provide: {
         ...defaultProvide,
@@ -71,7 +75,7 @@ describe('Manual Variables Form', () => {
   const findHelpText = () => wrapper.findComponent(GlSprintf);
   const findHelpLink = () => wrapper.findComponent(GlLink);
   const findCancelBtn = () => wrapper.findByTestId('cancel-btn');
-  const findRerunBtn = () => wrapper.findByTestId('run-manual-job-btn');
+  const findRunBtn = () => wrapper.findByTestId('run-manual-job-btn');
   const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
   const findAllDeleteVarBtns = () => wrapper.findAllByTestId('delete-variable-btn');
   const findDeleteVarBtnPlaceholder = () => wrapper.findByTestId('delete-variable-btn-placeholder');
@@ -97,7 +101,7 @@ describe('Manual Variables Form', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    createAlert.mockClear();
   });
 
   describe('when page renders', () => {
@@ -112,10 +116,30 @@ describe('Manual Variables Form', () => {
         '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
       );
     });
+  });
 
-    it('renders buttons', () => {
-      expect(findCancelBtn().exists()).toBe(true);
-      expect(findRerunBtn().exists()).toBe(true);
+  describe('when query is unsuccessful', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockRejectedValue({});
+      await createComponentWithApollo();
+    });
+
+    it('shows an alert with error', () => {
+      expect(createAlert).toHaveBeenCalledWith({
+        message: JOB_GRAPHQL_ERRORS.jobQueryErrorText,
+      });
+    });
+  });
+
+  describe('when job has not been retried', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobWithVariablesResponse);
+      await createComponentWithApollo();
+    });
+
+    it('does not render the cancel button', () => {
+      expect(findCancelBtn().exists()).toBe(false);
+      expect(findRunBtn().exists()).toBe(true);
     });
   });
 
@@ -135,10 +159,10 @@ describe('Manual Variables Form', () => {
     });
   });
 
-  describe('when mutation fires', () => {
+  describe('when play mutation fires', () => {
     beforeEach(async () => {
       await createComponentWithApollo();
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockJobMutationData);
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockJobPlayMutationData);
     });
 
     it('passes variables in correct format', async () => {
@@ -146,11 +170,11 @@ describe('Manual Variables Form', () => {
 
       await findCiVariableValue().setValue('new value');
 
-      await findRerunBtn().vm.$emit('click');
+      await findRunBtn().vm.$emit('click');
 
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-        mutation: retryJobMutation,
+        mutation: playJobMutation,
         variables: {
           id: convertToGraphQLId(TYPENAME_CI_BUILD, mockId),
           variables: [
@@ -163,13 +187,63 @@ describe('Manual Variables Form', () => {
       });
     });
 
-    // redirect to job after initial trigger assertion will be added in https://gitlab.com/gitlab-org/gitlab/-/issues/377268
+    it('redirects to job properly after job is run', async () => {
+      findRunBtn().vm.$emit('click');
+      await waitForPromises();
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      expect(redirectTo).toHaveBeenCalledWith(mockJobPlayMutationData.data.jobPlay.job.webPath);
+    });
+  });
+
+  describe('when play mutation is unsuccessful', () => {
+    beforeEach(async () => {
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue({});
+      await createComponentWithApollo();
+    });
+
+    it('shows an alert with error', async () => {
+      findRunBtn().vm.$emit('click');
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: JOB_GRAPHQL_ERRORS.jobMutationErrorText,
+      });
+    });
+  });
+
+  describe('when job is retryable', () => {
+    beforeEach(async () => {
+      await createComponentWithApollo({ props: { isRetryable: true } });
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockJobRetryMutationData);
+    });
+
+    it('renders cancel button', () => {
+      expect(findCancelBtn().exists()).toBe(true);
+    });
+
     it('redirects to job properly after rerun', async () => {
-      findRerunBtn().vm.$emit('click');
+      findRunBtn().vm.$emit('click');
       await waitForPromises();
 
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
-      expect(redirectTo).toHaveBeenCalledWith(mockJobMutationData.data.jobRetry.job.webPath);
+      expect(redirectTo).toHaveBeenCalledWith(mockJobRetryMutationData.data.jobRetry.job.webPath);
+    });
+  });
+
+  describe('when retry mutation is unsuccessful', () => {
+    beforeEach(async () => {
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue({});
+      await createComponentWithApollo({ props: { isRetryable: true } });
+    });
+
+    it('shows an alert with error', async () => {
+      findRunBtn().vm.$emit('click');
+      await waitForPromises();
+
+      expect(createAlert).toHaveBeenCalledWith({
+        message: JOB_GRAPHQL_ERRORS.jobMutationErrorText,
+      });
     });
   });
 
diff --git a/spec/frontend/jobs/components/job/mock_data.js b/spec/frontend/jobs/components/job/mock_data.js
index 8a838acca7a..fb3a361c9c9 100644
--- a/spec/frontend/jobs/components/job/mock_data.js
+++ b/spec/frontend/jobs/components/job/mock_data.js
@@ -50,7 +50,32 @@ export const mockJobWithVariablesResponse = {
   },
 };
 
-export const mockJobMutationData = {
+export const mockJobPlayMutationData = {
+  data: {
+    jobPlay: {
+      job: {
+        id: 'gid://gitlab/Ci::Build/401',
+        manualVariables: {
+          nodes: [
+            {
+              id: 'gid://gitlab/Ci::JobVariable/151',
+              key: 'new key',
+              value: 'new value',
+              __typename: 'CiManualVariable',
+            },
+          ],
+          __typename: 'CiManualVariableConnection',
+        },
+        webPath: '/Commit451/lab-coat/-/jobs/401',
+        __typename: 'CiJob',
+      },
+      errors: [],
+      __typename: 'JobPlayPayload',
+    },
+  },
+};
+
+export const mockJobRetryMutationData = {
   data: {
     jobRetry: {
       job: {
diff --git a/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js b/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js
index 5c9c011b4ab..dd5a9e3491d 100644
--- a/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js
@@ -19,11 +19,6 @@ describe('Sidebar detail row', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with title/value and without helpUrl', () => {
     beforeEach(() => {
       createComponent({ title, value });
diff --git a/spec/frontend/jobs/components/job/sidebar_spec.js b/spec/frontend/jobs/components/job/sidebar_spec.js
index aa9ca932023..cefa4582c15 100644
--- a/spec/frontend/jobs/components/job/sidebar_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_spec.js
@@ -48,10 +48,6 @@ describe('Sidebar details block', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without terminal path', () => {
     it('does not render terminal link', async () => {
       createWrapper();
diff --git a/spec/frontend/jobs/components/job/stages_dropdown_spec.js b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
index 61dec585e82..f782d5600e6 100644
--- a/spec/frontend/jobs/components/job/stages_dropdown_spec.js
+++ b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
@@ -37,10 +37,6 @@ describe('Stages Dropdown', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without a merge request pipeline', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/jobs/components/job/trigger_block_spec.js b/spec/frontend/jobs/components/job/trigger_block_spec.js
index a1de8fd143f..8bb2c1f3ad8 100644
--- a/spec/frontend/jobs/components/job/trigger_block_spec.js
+++ b/spec/frontend/jobs/components/job/trigger_block_spec.js
@@ -20,10 +20,6 @@ describe('Trigger block', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with short token and no variables', () => {
     it('renders short token', () => {
       createComponent({
diff --git a/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js b/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js
index fb7d389c4d6..1072cdd6781 100644
--- a/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js
+++ b/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js
@@ -18,10 +18,6 @@ describe('Unmet Prerequisites Block Job component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders an alert with the correct message', () => {
     const container = wrapper.findComponent(GlAlert);
     const alertMessage =
diff --git a/spec/frontend/jobs/components/log/collapsible_section_spec.js b/spec/frontend/jobs/components/log/collapsible_section_spec.js
index 646935568b1..5adedea28a5 100644
--- a/spec/frontend/jobs/components/log/collapsible_section_spec.js
+++ b/spec/frontend/jobs/components/log/collapsible_section_spec.js
@@ -19,10 +19,6 @@ describe('Job Log Collapsible Section', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with closed section', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/jobs/components/log/duration_badge_spec.js b/spec/frontend/jobs/components/log/duration_badge_spec.js
index 84dae386bdb..644d05366a0 100644
--- a/spec/frontend/jobs/components/log/duration_badge_spec.js
+++ b/spec/frontend/jobs/components/log/duration_badge_spec.js
@@ -20,10 +20,6 @@ describe('Job Log Duration Badge', () => {
     createComponent(data);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders provided duration', () => {
     expect(wrapper.text()).toBe(data.duration);
   });
diff --git a/spec/frontend/jobs/components/log/line_header_spec.js b/spec/frontend/jobs/components/log/line_header_spec.js
index ec8e79bba13..16fe753e08a 100644
--- a/spec/frontend/jobs/components/log/line_header_spec.js
+++ b/spec/frontend/jobs/components/log/line_header_spec.js
@@ -29,10 +29,6 @@ describe('Job Log Header Line', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('line', () => {
     beforeEach(() => {
       createComponent(data);
diff --git a/spec/frontend/jobs/components/log/line_number_spec.js b/spec/frontend/jobs/components/log/line_number_spec.js
index 96aa31baab9..4130c124a30 100644
--- a/spec/frontend/jobs/components/log/line_number_spec.js
+++ b/spec/frontend/jobs/components/log/line_number_spec.js
@@ -21,10 +21,6 @@ describe('Job Log Line Number', () => {
     createComponent(data);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders incremented lineNunber by 1', () => {
     expect(wrapper.text()).toBe('1');
   });
diff --git a/spec/frontend/jobs/components/log/log_spec.js b/spec/frontend/jobs/components/log/log_spec.js
index c933ed5c3e1..265f72ff344 100644
--- a/spec/frontend/jobs/components/log/log_spec.js
+++ b/spec/frontend/jobs/components/log/log_spec.js
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import Log from '~/jobs/components/log/log.vue';
+import LogLineHeader from '~/jobs/components/log/line_header.vue';
 import { logLinesParser } from '~/jobs/store/utils';
 import { jobLog } from './mock_data';
 
@@ -10,6 +11,7 @@ describe('Job Log', () => {
   let actions;
   let state;
   let store;
+  let toggleCollapsibleLineMock;
 
   Vue.use(Vuex);
 
@@ -20,8 +22,9 @@ describe('Job Log', () => {
   };
 
   beforeEach(() => {
+    toggleCollapsibleLineMock = jest.fn();
     actions = {
-      toggleCollapsibleLine: () => {},
+      toggleCollapsibleLine: toggleCollapsibleLineMock,
     };
 
     state = {
@@ -37,11 +40,7 @@ describe('Job Log', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+  const findCollapsibleLine = () => wrapper.findComponent(LogLineHeader);
 
   describe('line numbers', () => {
     it('renders a line number for each open line', () => {
@@ -68,11 +67,9 @@ describe('Job Log', () => {
 
     describe('on click header section', () => {
       it('calls toggleCollapsibleLine', () => {
-        jest.spyOn(wrapper.vm, 'toggleCollapsibleLine');
-
         findCollapsibleLine().trigger('click');
 
-        expect(wrapper.vm.toggleCollapsibleLine).toHaveBeenCalled();
+        expect(toggleCollapsibleLineMock).toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/jobs/components/table/cells/duration_cell_spec.js b/spec/frontend/jobs/components/table/cells/duration_cell_spec.js
index 763a4b0eaa2..d015edb0e91 100644
--- a/spec/frontend/jobs/components/table/cells/duration_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/duration_cell_spec.js
@@ -22,10 +22,6 @@ describe('Duration Cell', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not display duration or finished time when no properties are present', () => {
     createComponent();
 
diff --git a/spec/frontend/jobs/components/table/cells/job_cell_spec.js b/spec/frontend/jobs/components/table/cells/job_cell_spec.js
index ddc196129a7..73e37eed5f1 100644
--- a/spec/frontend/jobs/components/table/cells/job_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/job_cell_spec.js
@@ -39,10 +39,6 @@ describe('Job Cell', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Job Id', () => {
     it('displays the job id and links to the job', () => {
       createComponent();
diff --git a/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js b/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js
index 1f5e0a7aa21..3d424b20964 100644
--- a/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/pipeline_cell_spec.js
@@ -42,10 +42,6 @@ describe('Pipeline Cell', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Pipeline Id', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/jobs/components/table/graphql/cache_config_spec.js b/spec/frontend/jobs/components/table/graphql/cache_config_spec.js
index 88c97285b85..e3b1ca1cce3 100644
--- a/spec/frontend/jobs/components/table/graphql/cache_config_spec.js
+++ b/spec/frontend/jobs/components/table/graphql/cache_config_spec.js
@@ -84,4 +84,23 @@ describe('jobs/components/table/graphql/cache_config', () => {
       expect(res.nodes).toHaveLength(CIJobConnectionIncomingCacheRunningStatus.nodes.length);
     });
   });
+
+  describe('when incoming data has no nodes', () => {
+    it('should return existing cache', () => {
+      const res = cacheConfig.typePolicies.CiJobConnection.merge(
+        CIJobConnectionExistingCache,
+        { __typename: 'CiJobConnection', count: 500 },
+        {
+          args: { statuses: 'SUCCESS' },
+        },
+      );
+
+      const expectedResponse = {
+        ...CIJobConnectionExistingCache,
+        statuses: 'SUCCESS',
+      };
+
+      expect(res).toEqual(expectedResponse);
+    });
+  });
 });
diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js
index 109cef6f817..6247cfcc640 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -12,8 +12,9 @@ import { s__ } from '~/locale';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query.graphql';
+import getJobsCountQuery from '~/jobs/components/table/graphql/queries/get_jobs_count.query.graphql';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
@@ -23,12 +24,13 @@ import {
   mockJobsResponsePaginated,
   mockJobsResponseEmpty,
   mockFailedSearchToken,
+  mockJobsCountResponse,
 } from '../../mock_data';
 
 const projectPath = 'gitlab-org/gitlab';
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Job table app', () => {
   let wrapper;
@@ -37,6 +39,8 @@ describe('Job table app', () => {
   const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
   const emptyHandler = jest.fn().mockResolvedValue(mockJobsResponseEmpty);
 
+  const countSuccessHandler = jest.fn().mockResolvedValue(mockJobsCountResponse);
+
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
   const findTable = () => wrapper.findComponent(JobsTable);
@@ -48,14 +52,18 @@ describe('Job table app', () => {
   const triggerInfiniteScroll = () =>
     wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
 
-  const createMockApolloProvider = (handler) => {
-    const requestHandlers = [[getJobsQuery, handler]];
+  const createMockApolloProvider = (handler, countHandler) => {
+    const requestHandlers = [
+      [getJobsQuery, handler],
+      [getJobsCountQuery, countHandler],
+    ];
 
     return createMockApollo(requestHandlers);
   };
 
   const createComponent = ({
     handler = successHandler,
+    countHandler = countSuccessHandler,
     mountFn = shallowMount,
     data = {},
   } = {}) => {
@@ -68,14 +76,10 @@ describe('Job table app', () => {
       provide: {
         fullPath: projectPath,
       },
-      apolloProvider: createMockApolloProvider(handler),
+      apolloProvider: createMockApolloProvider(handler, countHandler),
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading state', () => {
     it('should display skeleton loader when loading', () => {
       createComponent();
@@ -148,12 +152,39 @@ describe('Job table app', () => {
   });
 
   describe('error state', () => {
-    it('should show an alert if there is an error fetching the data', async () => {
+    it('should show an alert if there is an error fetching the jobs data', async () => {
       createComponent({ handler: failedHandler });
 
       await waitForPromises();
 
-      expect(findAlert().exists()).toBe(true);
+      expect(findAlert().text()).toBe('There was an error fetching the jobs for your project.');
+      expect(findTable().exists()).toBe(false);
+    });
+
+    it('should show an alert if there is an error fetching the jobs count data', async () => {
+      createComponent({ handler: successHandler, countHandler: failedHandler });
+
+      await waitForPromises();
+
+      expect(findAlert().text()).toBe(
+        'There was an error fetching the number of jobs for your project.',
+      );
+    });
+
+    it('jobs table should still load if count query fails', async () => {
+      createComponent({ handler: successHandler, countHandler: failedHandler });
+
+      await waitForPromises();
+
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('jobs count should be zero if count query fails', async () => {
+      createComponent({ handler: successHandler, countHandler: failedHandler });
+
+      await waitForPromises();
+
+      expect(findTabs().props('allJobsCount')).toBe(0);
     });
   });
 
diff --git a/spec/frontend/jobs/components/table/jobs_table_spec.js b/spec/frontend/jobs/components/table/jobs_table_spec.js
index 3c4f2d624fe..06b13aa4372 100644
--- a/spec/frontend/jobs/components/table/jobs_table_spec.js
+++ b/spec/frontend/jobs/components/table/jobs_table_spec.js
@@ -30,10 +30,6 @@ describe('Jobs Table', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the jobs table', () => {
     expect(findTable().exists()).toBe(true);
   });
diff --git a/spec/frontend/jobs/components/table/jobs_table_tabs_spec.js b/spec/frontend/jobs/components/table/jobs_table_tabs_spec.js
index 23632001060..70bcac82a3f 100644
--- a/spec/frontend/jobs/components/table/jobs_table_tabs_spec.js
+++ b/spec/frontend/jobs/components/table/jobs_table_tabs_spec.js
@@ -42,10 +42,6 @@ describe('Jobs Table Tabs', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays All tab with count', () => {
     expect(trimText(findAllTab().text())).toBe(`All ${defaultProps.allJobsCount}`);
   });
diff --git a/spec/frontend/jobs/mixins/delayed_job_mixin_spec.js b/spec/frontend/jobs/mixins/delayed_job_mixin_spec.js
index 1d3845b19bb..098a63719fe 100644
--- a/spec/frontend/jobs/mixins/delayed_job_mixin_spec.js
+++ b/spec/frontend/jobs/mixins/delayed_job_mixin_spec.js
@@ -16,11 +16,6 @@ describe('DelayedJobMixin', () => {
     template: '<div>{{remainingTime}}</div>',
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('if job is empty object', () => {
     beforeEach(() => {
       wrapper = shallowMount(dummyComponent, {
diff --git a/spec/frontend/jobs/mock_data.js b/spec/frontend/jobs/mock_data.js
index 9abd610c26d..483b4ca711f 100644
--- a/spec/frontend/jobs/mock_data.js
+++ b/spec/frontend/jobs/mock_data.js
@@ -1,3 +1,4 @@
+import mockJobsCount from 'test_fixtures/graphql/jobs/get_jobs_count.query.graphql.json';
 import mockJobsEmpty from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.empty.json';
 import mockJobsPaginated from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.paginated.json';
 import mockJobs from 'test_fixtures/graphql/jobs/get_jobs.query.graphql.json';
@@ -13,6 +14,7 @@ export const mockJobsResponsePaginated = mockJobsPaginated;
 export const mockJobsResponseEmpty = mockJobsEmpty;
 export const mockJobsNodes = mockJobs.data.project.jobs.nodes;
 export const mockJobsNodesAsGuest = mockJobsAsGuest.data.project.jobs.nodes;
+export const mockJobsCountResponse = mockJobsCount;
 
 export const stages = [
   {
diff --git a/spec/frontend/labels/components/delete_label_modal_spec.js b/spec/frontend/labels/components/delete_label_modal_spec.js
index 24a803d3f16..7654d218209 100644
--- a/spec/frontend/labels/components/delete_label_modal_spec.js
+++ b/spec/frontend/labels/components/delete_label_modal_spec.js
@@ -30,10 +30,6 @@ describe('~/labels/components/delete_label_modal', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findPrimaryModalButton = () => wrapper.findByTestId('delete-button');
 
diff --git a/spec/frontend/labels/components/promote_label_modal_spec.js b/spec/frontend/labels/components/promote_label_modal_spec.js
index 97913c20229..5983c16a9d1 100644
--- a/spec/frontend/labels/components/promote_label_modal_spec.js
+++ b/spec/frontend/labels/components/promote_label_modal_spec.js
@@ -41,7 +41,6 @@ describe('Promote label modal', () => {
 
   afterEach(() => {
     axiosMock.reset();
-    wrapper.destroy();
   });
 
   describe('Modal title and description', () => {
diff --git a/spec/frontend/language_switcher/components/app_spec.js b/spec/frontend/language_switcher/components/app_spec.js
index 7f6fb138d89..036ff55fef7 100644
--- a/spec/frontend/language_switcher/components/app_spec.js
+++ b/spec/frontend/language_switcher/components/app_spec.js
@@ -24,10 +24,6 @@ describe('<LanguageSwitcher />', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const getPreferredLanguage = () => wrapper.find('.gl-new-dropdown-button-text').text();
   const findLanguageDropdownItem = (code) => wrapper.findByTestId(`language_switcher_lang_${code}`);
   const findFooter = () => wrapper.findByTestId('footer');
diff --git a/spec/frontend/lib/apollo/suppress_network_errors_during_navigation_link_spec.js b/spec/frontend/lib/apollo/suppress_network_errors_during_navigation_link_spec.js
index 5ac7a7985a8..b8847f0fca3 100644
--- a/spec/frontend/lib/apollo/suppress_network_errors_during_navigation_link_spec.js
+++ b/spec/frontend/lib/apollo/suppress_network_errors_during_navigation_link_spec.js
@@ -6,13 +6,8 @@ import { isNavigatingAway } from '~/lib/utils/is_navigating_away';
 jest.mock('~/lib/utils/is_navigating_away');
 
 describe('getSuppressNetworkErrorsDuringNavigationLink', () => {
-  const originalGon = window.gon;
   let subscription;
 
-  beforeEach(() => {
-    window.gon = originalGon;
-  });
-
   afterEach(() => {
     if (subscription) {
       subscription.unsubscribe();
diff --git a/spec/frontend/lib/dompurify_spec.js b/spec/frontend/lib/dompurify_spec.js
index f767a673553..fdc8789c1a8 100644
--- a/spec/frontend/lib/dompurify_spec.js
+++ b/spec/frontend/lib/dompurify_spec.js
@@ -49,8 +49,6 @@ const forbiddenDataAttrs = defaultConfig.FORBID_ATTR;
 const acceptedDataAttrs = ['data-random', 'data-custom'];
 
 describe('~/lib/dompurify', () => {
-  let originalGon;
-
   it('uses local configuration when given', () => {
     // As dompurify uses a "Persistent Configuration", it might
     // ignore config, this check verifies we respect
@@ -104,15 +102,10 @@ describe('~/lib/dompurify', () => {
     ${'root'}     | ${rootGon}
     ${'absolute'} | ${absoluteGon}
   `('when gon contains $type icon urls', ({ type, gon }) => {
-    beforeAll(() => {
-      originalGon = window.gon;
+    beforeEach(() => {
       window.gon = gon;
     });
 
-    afterAll(() => {
-      window.gon = originalGon;
-    });
-
     it('allows no href attrs', () => {
       const htmlHref = `<svg><use></use></svg>`;
       expect(sanitize(htmlHref)).toBe(htmlHref);
@@ -137,14 +130,9 @@ describe('~/lib/dompurify', () => {
 
   describe('when gon does not contain icon urls', () => {
     beforeAll(() => {
-      originalGon = window.gon;
       window.gon = {};
     });
 
-    afterAll(() => {
-      window.gon = originalGon;
-    });
-
     it.each([...safeUrls.root, ...safeUrls.absolute, ...unsafeUrls])('sanitizes URL %s', (url) => {
       const htmlHref = `<svg><use href="${url}"></use></svg>`;
       const htmlXlink = `<svg><use xlink:href="${url}"></use></svg>`;
diff --git a/spec/frontend/lib/utils/axios_startup_calls_spec.js b/spec/frontend/lib/utils/axios_startup_calls_spec.js
index 4471b781446..3d063ff9b46 100644
--- a/spec/frontend/lib/utils/axios_startup_calls_spec.js
+++ b/spec/frontend/lib/utils/axios_startup_calls_spec.js
@@ -113,17 +113,10 @@ describe('setupAxiosStartupCalls', () => {
   });
 
   describe('startup call', () => {
-    let oldGon;
-
     beforeEach(() => {
-      oldGon = window.gon;
       window.gon = { gitlab_url: 'https://example.org/gitlab' };
     });
 
-    afterEach(() => {
-      window.gon = oldGon;
-    });
-
     it('removes GitLab Base URL from startup call', async () => {
       window.gl.startup_calls = {
         '/startup': {
diff --git a/spec/frontend/lib/utils/common_utils_spec.js b/spec/frontend/lib/utils/common_utils_spec.js
index 7b068f7d248..b4ec00ab766 100644
--- a/spec/frontend/lib/utils/common_utils_spec.js
+++ b/spec/frontend/lib/utils/common_utils_spec.js
@@ -534,18 +534,10 @@ describe('common_utils', () => {
   });
 
   describe('spriteIcon', () => {
-    let beforeGon;
-
     beforeEach(() => {
-      window.gon = window.gon || {};
-      beforeGon = { ...window.gon };
       window.gon.sprite_icons = 'icons.svg';
     });
 
-    afterEach(() => {
-      window.gon = beforeGon;
-    });
-
     it('should return the svg for a linked icon', () => {
       expect(commonUtils.spriteIcon('test')).toEqual(
         '<svg ><use xlink:href="icons.svg#test" /></svg>',
diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_action_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_action_spec.js
index 142c76f7bc0..9b790e739fb 100644
--- a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_action_spec.js
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_action_spec.js
@@ -44,7 +44,6 @@ describe('confirmAction', () => {
     resetHTMLFixture();
     Vue.prototype.$mount.mockRestore();
     modalWrapper?.destroy();
-    modalWrapper = null;
     modal?.destroy();
     modal = null;
   });
diff --git a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
index 313e028d861..c135180c9df 100644
--- a/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
+++ b/spec/frontend/lib/utils/confirm_via_gl_modal/confirm_modal_spec.js
@@ -28,10 +28,6 @@ describe('Confirm Modal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlModal = () => wrapper.findComponent(GlModal);
 
   describe('Modal events', () => {
diff --git a/spec/frontend/lib/utils/datetime/timeago_utility_spec.js b/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
index 1ef7047d959..c13d55f978e 100644
--- a/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
+++ b/spec/frontend/lib/utils/datetime/timeago_utility_spec.js
@@ -3,16 +3,6 @@ import { s__ } from '~/locale';
 import '~/commons/bootstrap';
 
 describe('TimeAgo utils', () => {
-  let oldGon;
-
-  afterEach(() => {
-    window.gon = oldGon;
-  });
-
-  beforeEach(() => {
-    oldGon = window.gon;
-  });
-
   describe('getTimeago', () => {
     describe('with User Setting timeDisplayRelative: true', () => {
       beforeEach(() => {
diff --git a/spec/frontend/lib/utils/error_message_spec.js b/spec/frontend/lib/utils/error_message_spec.js
new file mode 100644
index 00000000000..17b5168c32f
--- /dev/null
+++ b/spec/frontend/lib/utils/error_message_spec.js
@@ -0,0 +1,65 @@
+import { parseErrorMessage, USER_FACING_ERROR_MESSAGE_PREFIX } from '~/lib/utils/error_message';
+
+const defaultErrorMessage = 'Something caused this error';
+const userFacingErrorMessage = 'User facing error message';
+const nonUserFacingErrorMessage = 'NonUser facing error message';
+const genericErrorMessage = 'Some error message';
+
+describe('error message', () => {
+  describe('when given an errormessage object', () => {
+    const errorMessageObject = {
+      options: {
+        cause: defaultErrorMessage,
+      },
+      filename: 'error.js',
+      linenumber: 7,
+    };
+
+    it('returns the correct values for userfacing errors', () => {
+      const userFacingObject = errorMessageObject;
+      userFacingObject.message = `${USER_FACING_ERROR_MESSAGE_PREFIX} ${userFacingErrorMessage}`;
+
+      expect(parseErrorMessage(userFacingObject)).toEqual({
+        message: userFacingErrorMessage,
+        userFacing: true,
+      });
+    });
+
+    it('returns the correct values for non userfacing errors', () => {
+      const nonUserFacingObject = errorMessageObject;
+      nonUserFacingObject.message = nonUserFacingErrorMessage;
+
+      expect(parseErrorMessage(nonUserFacingObject)).toEqual({
+        message: nonUserFacingErrorMessage,
+        userFacing: false,
+      });
+    });
+  });
+
+  describe('when given an errormessage string', () => {
+    it('returns the correct values for userfacing errors', () => {
+      expect(
+        parseErrorMessage(`${USER_FACING_ERROR_MESSAGE_PREFIX} ${genericErrorMessage}`),
+      ).toEqual({
+        message: genericErrorMessage,
+        userFacing: true,
+      });
+    });
+
+    it('returns the correct values for non userfacing errors', () => {
+      expect(parseErrorMessage(genericErrorMessage)).toEqual({
+        message: genericErrorMessage,
+        userFacing: false,
+      });
+    });
+  });
+
+  describe('when given nothing', () => {
+    it('returns an empty error message', () => {
+      expect(parseErrorMessage()).toEqual({
+        message: '',
+        userFacing: false,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/lib/utils/file_upload_spec.js b/spec/frontend/lib/utils/file_upload_spec.js
index f63af2fe0a4..509ddc7ce86 100644
--- a/spec/frontend/lib/utils/file_upload_spec.js
+++ b/spec/frontend/lib/utils/file_upload_spec.js
@@ -1,5 +1,9 @@
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import fileUpload, { getFilename, validateImageName } from '~/lib/utils/file_upload';
+import fileUpload, {
+  getFilename,
+  validateImageName,
+  validateFileFromAllowList,
+} from '~/lib/utils/file_upload';
 
 describe('File upload', () => {
   beforeEach(() => {
@@ -89,3 +93,19 @@ describe('file name validator', () => {
     expect(validateImageName(file)).toBe('image.png');
   });
 });
+
+describe('validateFileFromAllowList', () => {
+  it('returns true if the file type is in the allowed list', () => {
+    const allowList = ['.foo', '.bar'];
+    const fileName = 'file.foo';
+
+    expect(validateFileFromAllowList(fileName, allowList)).toBe(true);
+  });
+
+  it('returns false if the file type is in the allowed list', () => {
+    const allowList = ['.foo', '.bar'];
+    const fileName = 'file.baz';
+
+    expect(validateFileFromAllowList(fileName, allowList)).toBe(false);
+  });
+});
diff --git a/spec/frontend/lib/utils/number_utility_spec.js b/spec/frontend/lib/utils/number_utility_spec.js
index dc4aa0ea5ed..d2591cd2328 100644
--- a/spec/frontend/lib/utils/number_utility_spec.js
+++ b/spec/frontend/lib/utils/number_utility_spec.js
@@ -3,6 +3,7 @@ import {
   bytesToKiB,
   bytesToMiB,
   bytesToGiB,
+  numberToHumanSizeSplit,
   numberToHumanSize,
   numberToMetricPrefix,
   sum,
@@ -13,6 +14,12 @@ import {
   isNumeric,
   isPositiveInteger,
 } from '~/lib/utils/number_utils';
+import {
+  BYTES_FORMAT_BYTES,
+  BYTES_FORMAT_KIB,
+  BYTES_FORMAT_MIB,
+  BYTES_FORMAT_GIB,
+} from '~/lib/utils/constants';
 
 describe('Number Utils', () => {
   describe('formatRelevantDigits', () => {
@@ -78,6 +85,28 @@ describe('Number Utils', () => {
     });
   });
 
+  describe('numberToHumanSizeSplit', () => {
+    it('should return bytes', () => {
+      expect(numberToHumanSizeSplit(654)).toEqual(['654', BYTES_FORMAT_BYTES]);
+      expect(numberToHumanSizeSplit(-654)).toEqual(['-654', BYTES_FORMAT_BYTES]);
+    });
+
+    it('should return KiB', () => {
+      expect(numberToHumanSizeSplit(1079)).toEqual(['1.05', BYTES_FORMAT_KIB]);
+      expect(numberToHumanSizeSplit(-1079)).toEqual(['-1.05', BYTES_FORMAT_KIB]);
+    });
+
+    it('should return MiB', () => {
+      expect(numberToHumanSizeSplit(10485764)).toEqual(['10.00', BYTES_FORMAT_MIB]);
+      expect(numberToHumanSizeSplit(-10485764)).toEqual(['-10.00', BYTES_FORMAT_MIB]);
+    });
+
+    it('should return GiB', () => {
+      expect(numberToHumanSizeSplit(10737418240)).toEqual(['10.00', BYTES_FORMAT_GIB]);
+      expect(numberToHumanSizeSplit(-10737418240)).toEqual(['-10.00', BYTES_FORMAT_GIB]);
+    });
+  });
+
   describe('numberToHumanSize', () => {
     it('should return bytes', () => {
       expect(numberToHumanSize(654)).toEqual('654 bytes');
diff --git a/spec/frontend/lib/utils/ref_validator_spec.js b/spec/frontend/lib/utils/ref_validator_spec.js
new file mode 100644
index 00000000000..7185ebf0a24
--- /dev/null
+++ b/spec/frontend/lib/utils/ref_validator_spec.js
@@ -0,0 +1,79 @@
+import { validateTag, validationMessages } from '~/lib/utils/ref_validator';
+
+describe('~/lib/utils/ref_validator', () => {
+  describe('validateTag', () => {
+    describe.each([
+      ['foo'],
+      ['FOO'],
+      ['foo/a.lockx'],
+      ['foo.123'],
+      ['foo/123'],
+      ['foo/bar/123'],
+      ['foo.bar.123'],
+      ['foo-bar_baz'],
+      ['head'],
+      ['"foo"-'],
+      ['foo@bar'],
+      ['\ud83e\udd8a'],
+      ['ünicöde'],
+      ['\x80}'],
+    ])('tag with the name "%s"', (tagName) => {
+      it('is valid', () => {
+        const result = validateTag(tagName);
+        expect(result.isValid).toBe(true);
+        expect(result.validationErrors).toEqual([]);
+      });
+    });
+
+    describe.each([
+      ['  ', validationMessages.EmptyNameValidationMessage],
+
+      ['refs/heads/tagName', validationMessages.DisallowedPrefixesValidationMessage],
+      ['/foo', validationMessages.DisallowedPrefixesValidationMessage],
+      ['-tagName', validationMessages.DisallowedPrefixesValidationMessage],
+
+      ['HEAD', validationMessages.DisallowedNameValidationMessage],
+      ['@', validationMessages.DisallowedNameValidationMessage],
+
+      ['tag name with spaces', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag\\name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag^name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag..name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['..', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag?name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag*name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag[name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag@{name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag:name', validationMessages.DisallowedSubstringsValidationMessage],
+      ['tag~name', validationMessages.DisallowedSubstringsValidationMessage],
+
+      ['/', validationMessages.DisallowedSequenceEmptyValidationMessage],
+      ['//', validationMessages.DisallowedSequenceEmptyValidationMessage],
+      ['foo//123', validationMessages.DisallowedSequenceEmptyValidationMessage],
+
+      ['.', validationMessages.DisallowedSequencePrefixesValidationMessage],
+      ['/./', validationMessages.DisallowedSequencePrefixesValidationMessage],
+      ['./.', validationMessages.DisallowedSequencePrefixesValidationMessage],
+      ['.tagName', validationMessages.DisallowedSequencePrefixesValidationMessage],
+      ['tag/.Name', validationMessages.DisallowedSequencePrefixesValidationMessage],
+      ['foo/.123/bar', validationMessages.DisallowedSequencePrefixesValidationMessage],
+
+      ['foo.', validationMessages.DisallowedSequencePostfixesValidationMessage],
+      ['a.lock', validationMessages.DisallowedSequencePostfixesValidationMessage],
+      ['foo/a.lock', validationMessages.DisallowedSequencePostfixesValidationMessage],
+      ['foo/a.lock/b', validationMessages.DisallowedSequencePostfixesValidationMessage],
+      ['foo.123.', validationMessages.DisallowedSequencePostfixesValidationMessage],
+
+      ['foo/', validationMessages.DisallowedPostfixesValidationMessage],
+
+      ['control-character\x7f', validationMessages.ControlCharactersValidationMessage],
+      ['control-character\x15', validationMessages.ControlCharactersValidationMessage],
+    ])('tag with name "%s"', (tagName, validationMessage) => {
+      it(`should be invalid with validation message "${validationMessage}"`, () => {
+        const result = validateTag(tagName);
+        expect(result.isValid).toBe(false);
+        expect(result.validationErrors).toContain(validationMessage);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/lib/utils/text_markdown_spec.js b/spec/frontend/lib/utils/text_markdown_spec.js
index 7aab1013fc0..2180ea7e6c2 100644
--- a/spec/frontend/lib/utils/text_markdown_spec.js
+++ b/spec/frontend/lib/utils/text_markdown_spec.js
@@ -1,12 +1,16 @@
 import $ from 'jquery';
+import AxiosMockAdapter from 'axios-mock-adapter';
 import {
   insertMarkdownText,
   keypressNoteText,
   compositionStartNoteText,
   compositionEndNoteText,
   updateTextForToolbarBtn,
+  resolveSelectedImage,
 } from '~/lib/utils/text_markdown';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import '~/lib/utils/jquery_at_who';
+import axios from '~/lib/utils/axios_utils';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 describe('init markdown', () => {
@@ -14,6 +18,7 @@ describe('init markdown', () => {
   let textArea;
   let indentButton;
   let outdentButton;
+  let axiosMock;
 
   beforeAll(() => {
     setHTMLFixture(
@@ -34,6 +39,14 @@ describe('init markdown', () => {
     document.execCommand = jest.fn(() => false);
   });
 
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+  });
+
   afterAll(() => {
     resetHTMLFixture();
   });
@@ -707,6 +720,55 @@ describe('init markdown', () => {
     });
   });
 
+  describe('resolveSelectedImage', () => {
+    const markdownPreviewPath = '/markdown/preview';
+    const imageMarkdown = '![image](/uploads/image.png)';
+    const imageAbsoluteUrl = '/abs/uploads/image.png';
+
+    describe('when textarea cursor is positioned on an image', () => {
+      beforeEach(() => {
+        axiosMock.onPost(markdownPreviewPath, { text: imageMarkdown }).reply(HTTP_STATUS_OK, {
+          body: `
+        <p><a href="${imageAbsoluteUrl}"><img src="${imageAbsoluteUrl}"></a></p>
+        `,
+        });
+      });
+
+      it('returns the image absolute URL, markdown, and filename', async () => {
+        textArea.value = `image ${imageMarkdown}`;
+        textArea.setSelectionRange(8, 8);
+        expect(await resolveSelectedImage(textArea, markdownPreviewPath)).toEqual({
+          imageURL: imageAbsoluteUrl,
+          imageMarkdown,
+          filename: 'image.png',
+        });
+      });
+    });
+
+    describe('when textarea cursor is not positioned on an image', () => {
+      it.each`
+        markdown                    | selectionRange
+        ${`image ${imageMarkdown}`} | ${[4, 4]}
+        ${`!2 (issue)`}             | ${[2, 2]}
+      `('returns null', async ({ markdown, selectionRange }) => {
+        textArea.value = markdown;
+        textArea.setSelectionRange(...selectionRange);
+        expect(await resolveSelectedImage(textArea, markdownPreviewPath)).toBe(null);
+      });
+    });
+
+    describe('when textarea cursor is positioned between images', () => {
+      it('returns null', async () => {
+        const position = imageMarkdown.length + 1;
+
+        textArea.value = `${imageMarkdown}\n\n${imageMarkdown}`;
+        textArea.setSelectionRange(position, position);
+
+        expect(await resolveSelectedImage(textArea, markdownPreviewPath)).toBe(null);
+      });
+    });
+  });
+
   describe('Source Editor', () => {
     let editor;
 
diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js
index f2572ca0ad2..71a84d56791 100644
--- a/spec/frontend/lib/utils/text_utility_spec.js
+++ b/spec/frontend/lib/utils/text_utility_spec.js
@@ -398,4 +398,36 @@ describe('text_utility', () => {
       expect(textUtils.base64DecodeUnicode('8J+YgA==')).toBe('😀');
     });
   });
+
+  describe('findInvalidBranchNameCharacters', () => {
+    const invalidChars = [' ', '~', '^', ':', '?', '*', '[', '..', '@{', '\\', '//'];
+    const badBranchName = 'branch-with all these ~ ^ : ? * [ ] \\ // .. @{ } //';
+    const goodBranch = 'branch-with-no-errrors';
+
+    it('returns an array of invalid characters in a branch name', () => {
+      const chars = textUtils.findInvalidBranchNameCharacters(badBranchName);
+      chars.forEach((char) => {
+        expect(invalidChars).toContain(char);
+      });
+    });
+
+    it('returns an empty array with no invalid characters', () => {
+      expect(textUtils.findInvalidBranchNameCharacters(goodBranch)).toEqual([]);
+    });
+  });
+
+  describe('humanizeBranchValidationErrors', () => {
+    it.each`
+      errors               | message
+      ${[' ']}             | ${"Can't contain spaces"}
+      ${['?', '//', ' ']}  | ${"Can't contain spaces, ?, //"}
+      ${['\\', '[', '..']} | ${"Can't contain \\, [, .."}
+    `('returns an $message with $errors', ({ errors, message }) => {
+      expect(textUtils.humanizeBranchValidationErrors(errors)).toEqual(message);
+    });
+
+    it('returns an empty string with no invalid characters', () => {
+      expect(textUtils.humanizeBranchValidationErrors([])).toEqual('');
+    });
+  });
 });
diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js
index 6afdab455a6..72556e6bbe2 100644
--- a/spec/frontend/lib/utils/url_utility_spec.js
+++ b/spec/frontend/lib/utils/url_utility_spec.js
@@ -45,10 +45,6 @@ describe('URL utility', () => {
   });
 
   describe('webIDEUrl', () => {
-    afterEach(() => {
-      gon.relative_url_root = '';
-    });
-
     it('escapes special characters', () => {
       expect(urlUtils.webIDEUrl('/gitlab-org/gitlab-#-foss/merge_requests/1')).toBe(
         '/-/ide/project/gitlab-org/gitlab-%23-foss/merge_requests/1',
@@ -505,10 +501,6 @@ describe('URL utility', () => {
       gon.gitlab_url = gitlabUrl;
     });
 
-    afterEach(() => {
-      gon.gitlab_url = '';
-    });
-
     it.each`
       url                                        | urlType                    | external
       ${'/gitlab-org/gitlab-test/-/issues/2'}    | ${'relative'}              | ${false}
diff --git a/spec/frontend/lib/utils/vuex_module_mappers_spec.js b/spec/frontend/lib/utils/vuex_module_mappers_spec.js
index d25a692dfea..abd5095c1d2 100644
--- a/spec/frontend/lib/utils/vuex_module_mappers_spec.js
+++ b/spec/frontend/lib/utils/vuex_module_mappers_spec.js
@@ -96,10 +96,6 @@ describe('~/lib/utils/vuex_module_mappers', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('from module defined by prop', () => {
     it('maps state', () => {
       expect(getMappedState()).toEqual({
diff --git a/spec/frontend/locale/sprintf_spec.js b/spec/frontend/locale/sprintf_spec.js
index e0d0e117ea4..a7e245e2b78 100644
--- a/spec/frontend/locale/sprintf_spec.js
+++ b/spec/frontend/locale/sprintf_spec.js
@@ -84,5 +84,16 @@ describe('locale', () => {
         expect(output).toBe('contains duplicated 15%');
       });
     });
+
+    describe('ignores special replacements in the input', () => {
+      it.each(['$$', '$&', '$`', `$'`])('replacement "%s" is ignored', (replacement) => {
+        const input = 'My odd %{replacement} is preserved';
+
+        const parameters = { replacement };
+
+        const output = sprintf(input, parameters, false);
+        expect(output).toBe(`My odd ${replacement} is preserved`);
+      });
+    });
   });
 });
diff --git a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
index b94964dc482..c2e0e44f97f 100644
--- a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
@@ -20,10 +20,6 @@ describe('AccessRequestActionButtons', () => {
   const findRemoveMemberButton = () => wrapper.findComponent(RemoveMemberButton);
   const findApproveButton = () => wrapper.findComponent(ApproveAccessRequestButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders remove member button', () => {
     createComponent();
 
diff --git a/spec/frontend/members/components/action_buttons/approve_access_request_button_spec.js b/spec/frontend/members/components/action_buttons/approve_access_request_button_spec.js
index 15bb03480e1..7a4cd844425 100644
--- a/spec/frontend/members/components/action_buttons/approve_access_request_button_spec.js
+++ b/spec/frontend/members/components/action_buttons/approve_access_request_button_spec.js
@@ -38,7 +38,7 @@ describe('ApproveAccessRequestButton', () => {
         ...propsData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -50,10 +50,6 @@ describe('ApproveAccessRequestButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a tooltip', () => {
     const button = findButton();
 
diff --git a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
index 68009708c99..a852443844b 100644
--- a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
@@ -19,10 +19,6 @@ describe('InviteActionButtons', () => {
   const findRemoveMemberButton = () => wrapper.findComponent(RemoveMemberButton);
   const findResendInviteButton = () => wrapper.findComponent(ResendInviteButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when user has `canRemove` permissions', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/members/components/action_buttons/remove_group_link_button_spec.js b/spec/frontend/members/components/action_buttons/remove_group_link_button_spec.js
index b511cebdf28..1d83a2e0e71 100644
--- a/spec/frontend/members/components/action_buttons/remove_group_link_button_spec.js
+++ b/spec/frontend/members/components/action_buttons/remove_group_link_button_spec.js
@@ -37,7 +37,7 @@ describe('RemoveGroupLinkButton', () => {
         groupLink: group,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -48,11 +48,6 @@ describe('RemoveGroupLinkButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('displays a tooltip', () => {
     const button = findButton();
 
diff --git a/spec/frontend/members/components/action_buttons/remove_member_button_spec.js b/spec/frontend/members/components/action_buttons/remove_member_button_spec.js
index cca340169b7..3879279b559 100644
--- a/spec/frontend/members/components/action_buttons/remove_member_button_spec.js
+++ b/spec/frontend/members/components/action_buttons/remove_member_button_spec.js
@@ -47,7 +47,7 @@ describe('RemoveMemberButton', () => {
         ...propsData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -58,10 +58,6 @@ describe('RemoveMemberButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('sets attributes on button', () => {
     expect(wrapper.attributes()).toMatchObject({
       'aria-label': 'Remove member',
diff --git a/spec/frontend/members/components/action_buttons/resend_invite_button_spec.js b/spec/frontend/members/components/action_buttons/resend_invite_button_spec.js
index 51cfd47ddf4..a6b5978b566 100644
--- a/spec/frontend/members/components/action_buttons/resend_invite_button_spec.js
+++ b/spec/frontend/members/components/action_buttons/resend_invite_button_spec.js
@@ -38,7 +38,7 @@ describe('ResendInviteButton', () => {
         ...propsData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -50,10 +50,6 @@ describe('ResendInviteButton', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays a tooltip', () => {
     expect(getBinding(findButton().element, 'gl-tooltip')).not.toBeUndefined();
     expect(findButton().attributes('title')).toBe('Resend invite');
diff --git a/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js b/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js
index 90f5b217007..679ad7897ed 100644
--- a/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js
+++ b/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js
@@ -18,7 +18,7 @@ describe('LeaveGroupDropdownItem', () => {
         ...propsData,
       },
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
       slots: {
         default: text,
@@ -32,10 +32,6 @@ describe('LeaveGroupDropdownItem', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a slot with red text', () => {
     expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
   });
diff --git a/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
index e1c498249d7..125f1f8fff3 100644
--- a/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
+++ b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
@@ -58,10 +58,6 @@ describe('RemoveMemberDropdownItem', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a slot with red text', () => {
     expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
   });
diff --git a/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js b/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js
index 5a2de1cac80..448c04bcb69 100644
--- a/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js
+++ b/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js
@@ -24,17 +24,13 @@ describe('UserActionDropdown', () => {
         ...propsData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
   const findRemoveMemberDropdownItem = () => wrapper.findComponent(RemoveMemberDropdownItem);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when user has `canRemove` permissions', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/members/components/app_spec.js b/spec/frontend/members/components/app_spec.js
index d105a4d9fde..b2147163233 100644
--- a/spec/frontend/members/components/app_spec.js
+++ b/spec/frontend/members/components/app_spec.js
@@ -49,7 +49,6 @@ describe('MembersApp', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     store = null;
   });
 
diff --git a/spec/frontend/members/components/avatars/group_avatar_spec.js b/spec/frontend/members/components/avatars/group_avatar_spec.js
index 13c50de9835..8e4263f88fe 100644
--- a/spec/frontend/members/components/avatars/group_avatar_spec.js
+++ b/spec/frontend/members/components/avatars/group_avatar_spec.js
@@ -25,10 +25,6 @@ describe('MemberList', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders link to group', () => {
     const link = wrapper.findComponent(GlAvatarLink);
 
diff --git a/spec/frontend/members/components/avatars/invite_avatar_spec.js b/spec/frontend/members/components/avatars/invite_avatar_spec.js
index b197a46c0d1..84878fb9be2 100644
--- a/spec/frontend/members/components/avatars/invite_avatar_spec.js
+++ b/spec/frontend/members/components/avatars/invite_avatar_spec.js
@@ -24,10 +24,6 @@ describe('MemberList', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders email as name', () => {
     expect(getByText(invite.email).exists()).toBe(true);
   });
diff --git a/spec/frontend/members/components/avatars/user_avatar_spec.js b/spec/frontend/members/components/avatars/user_avatar_spec.js
index 9172876e76f..4808bcb9363 100644
--- a/spec/frontend/members/components/avatars/user_avatar_spec.js
+++ b/spec/frontend/members/components/avatars/user_avatar_spec.js
@@ -26,10 +26,6 @@ describe('UserAvatar', () => {
 
   const findStatusEmoji = (emoji) => wrapper.find(`gl-emoji[data-name="${emoji}"]`);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it("renders link to user's profile", () => {
     createComponent();
 
diff --git a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
index ef3c8bde3cf..526f839ece8 100644
--- a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
+++ b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
@@ -46,7 +46,7 @@ describe('SortDropdown', () => {
   const findSortingComponent = () => wrapper.findComponent(GlSorting);
   const findSortDirectionToggle = () =>
     findSortingComponent().find('button[title^="Sort direction"]');
-  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
+  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="menu"]');
   const findDropdownItemByText = (text) =>
     wrapper
       .findAllComponents(GlSortingItem)
diff --git a/spec/frontend/members/components/members_tabs_spec.js b/spec/frontend/members/components/members_tabs_spec.js
index 77af5e7293e..9078bd87d62 100644
--- a/spec/frontend/members/components/members_tabs_spec.js
+++ b/spec/frontend/members/components/members_tabs_spec.js
@@ -100,10 +100,6 @@ describe('MembersTabs', () => {
     setWindowLocation('https://localhost');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', async () => {
     await createComponent();
 
diff --git a/spec/frontend/members/components/modals/leave_modal_spec.js b/spec/frontend/members/components/modals/leave_modal_spec.js
index ba587c6f0b3..cec5f192e59 100644
--- a/spec/frontend/members/components/modals/leave_modal_spec.js
+++ b/spec/frontend/members/components/modals/leave_modal_spec.js
@@ -60,10 +60,6 @@ describe('LeaveModal', () => {
   const findForm = () => findModal().findComponent(GlForm);
   const findUserDeletionObstaclesList = () => findModal().findComponent(UserDeletionObstaclesList);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('sets modal ID', async () => {
     await createComponent();
 
diff --git a/spec/frontend/members/components/modals/remove_group_link_modal_spec.js b/spec/frontend/members/components/modals/remove_group_link_modal_spec.js
index af96396f09f..e4782ac7f2e 100644
--- a/spec/frontend/members/components/modals/remove_group_link_modal_spec.js
+++ b/spec/frontend/members/components/modals/remove_group_link_modal_spec.js
@@ -52,11 +52,6 @@ describe('RemoveGroupLinkModal', () => {
   const getByText = (text, options) =>
     createWrapper(within(findModal().element).getByText(text, options));
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when modal is open', () => {
     beforeEach(async () => {
       createComponent();
diff --git a/spec/frontend/members/components/modals/remove_member_modal_spec.js b/spec/frontend/members/components/modals/remove_member_modal_spec.js
index 47a03b5083a..baef0b30b02 100644
--- a/spec/frontend/members/components/modals/remove_member_modal_spec.js
+++ b/spec/frontend/members/components/modals/remove_member_modal_spec.js
@@ -54,10 +54,6 @@ describe('RemoveMemberModal', () => {
   const findGlModal = () => wrapper.findComponent(GlModal);
   const findUserDeletionObstaclesList = () => wrapper.findComponent(UserDeletionObstaclesList);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     state                          | memberModelType                     | isAccessRequest | isInvite | actionText               | removeSubMembershipsCheckboxExpected | unassignIssuablesCheckboxExpected | message                                                                                                           | userDeletionObstacles | isPartOfOncall
     ${'removing a group member'}   | ${MEMBER_MODEL_TYPE_GROUP_MEMBER}   | ${false}        | ${false} | ${'Remove member'}       | ${true}                              | ${true}                           | ${'Are you sure you want to remove Jane Doe from the Gitlab Org / Gitlab Test project?'}                          | ${{}}                 | ${false}
diff --git a/spec/frontend/members/components/table/created_at_spec.js b/spec/frontend/members/components/table/created_at_spec.js
index fa31177564b..2c0493e7c59 100644
--- a/spec/frontend/members/components/table/created_at_spec.js
+++ b/spec/frontend/members/components/table/created_at_spec.js
@@ -20,10 +20,6 @@ describe('CreatedAt', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('created at text', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/members/components/table/expiration_datepicker_spec.js b/spec/frontend/members/components/table/expiration_datepicker_spec.js
index 9b8f053348b..15812ee6572 100644
--- a/spec/frontend/members/components/table/expiration_datepicker_spec.js
+++ b/spec/frontend/members/components/table/expiration_datepicker_spec.js
@@ -58,10 +58,6 @@ describe('ExpirationDatepicker', () => {
   const findInput = () => wrapper.find('input');
   const findDatepicker = () => wrapper.findComponent(GlDatepicker);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('datepicker input', () => {
     it('sets `member.expiresAt` as initial date', async () => {
       createComponent({ member: { ...member, expiresAt: '2020-03-17T00:00:00Z' } });
diff --git a/spec/frontend/members/components/table/member_action_buttons_spec.js b/spec/frontend/members/components/table/member_action_buttons_spec.js
index 95db30a3683..3a04d1dcb0a 100644
--- a/spec/frontend/members/components/table/member_action_buttons_spec.js
+++ b/spec/frontend/members/components/table/member_action_buttons_spec.js
@@ -23,10 +23,6 @@ describe('MemberActions', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     memberType                    | member           | expectedComponent             | expectedComponentName
     ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserActionDropdown}         | ${'UserActionDropdown'}
diff --git a/spec/frontend/members/components/table/member_avatar_spec.js b/spec/frontend/members/components/table/member_avatar_spec.js
index dc5c97f41df..369f8a06cfd 100644
--- a/spec/frontend/members/components/table/member_avatar_spec.js
+++ b/spec/frontend/members/components/table/member_avatar_spec.js
@@ -18,10 +18,6 @@ describe('MemberList', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     memberType                    | member           | expectedComponent | expectedComponentName
     ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserAvatar}     | ${'UserAvatar'}
diff --git a/spec/frontend/members/components/table/member_source_spec.js b/spec/frontend/members/components/table/member_source_spec.js
index fbfd0ca7ae7..bbfbb19fd92 100644
--- a/spec/frontend/members/components/table/member_source_spec.js
+++ b/spec/frontend/members/components/table/member_source_spec.js
@@ -23,17 +23,13 @@ describe('MemberSource', () => {
         ...propsData,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
   const getTooltipDirective = (elementWrapper) => getBinding(elementWrapper.element, 'gl-tooltip');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('direct member', () => {
     describe('when created by is available', () => {
       it('displays "Direct member by <user name>"', () => {
diff --git a/spec/frontend/members/components/table/members_table_cell_spec.js b/spec/frontend/members/components/table/members_table_cell_spec.js
index ac5d83d028d..1c6f1b086cf 100644
--- a/spec/frontend/members/components/table/members_table_cell_spec.js
+++ b/spec/frontend/members/components/table/members_table_cell_spec.js
@@ -97,11 +97,6 @@ describe('MembersTableCell', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     member           | expectedMemberType
     ${memberMock}    | ${MEMBER_TYPES.user}
diff --git a/spec/frontend/members/components/table/members_table_spec.js b/spec/frontend/members/components/table/members_table_spec.js
index b8e0d73d8f6..e3c89bfed53 100644
--- a/spec/frontend/members/components/table/members_table_spec.js
+++ b/spec/frontend/members/components/table/members_table_spec.js
@@ -96,10 +96,6 @@ describe('MembersTable', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('fields', () => {
     const memberCanUpdate = {
       ...directMember,
diff --git a/spec/frontend/members/components/table/role_dropdown_spec.js b/spec/frontend/members/components/table/role_dropdown_spec.js
index a11f67be8f5..d6e63b1930f 100644
--- a/spec/frontend/members/components/table/role_dropdown_spec.js
+++ b/spec/frontend/members/components/table/role_dropdown_spec.js
@@ -67,21 +67,13 @@ describe('RoleDropdown', () => {
       .findAllComponents(GlDropdownItem)
       .wrappers.find((dropdownItemWrapper) => dropdownItemWrapper.props('isChecked'));
 
-  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
+  const findDropdownToggle = () => wrapper.find('button[aria-haspopup="menu"]');
   const findDropdown = () => wrapper.findComponent(GlDropdown);
 
-  let originalGon;
-
   beforeEach(() => {
-    originalGon = window.gon;
     gon.features = { showOverageOnRolePromotion: true };
   });
 
-  afterEach(() => {
-    window.gon = originalGon;
-    wrapper.destroy();
-  });
-
   describe('when dropdown is open', () => {
     beforeEach(() => {
       guestOverageConfirmAction.mockReturnValue(true);
diff --git a/spec/frontend/members/index_spec.js b/spec/frontend/members/index_spec.js
index 5c813eb2a67..b1730cf3746 100644
--- a/spec/frontend/members/index_spec.js
+++ b/spec/frontend/members/index_spec.js
@@ -31,9 +31,6 @@ describe('initMembersApp', () => {
 
   afterEach(() => {
     el = null;
-
-    wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders `MembersTabs`', () => {
diff --git a/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js b/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js
index 9b5641ef7b3..ab913b30f3c 100644
--- a/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js
+++ b/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js
@@ -37,10 +37,6 @@ describe('Merge Conflict Resolver App', () => {
     store.dispatch('setConflictsData', conflictsMock);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findLoadingSpinner = () => wrapper.findByTestId('loading-spinner');
   const findConflictsCount = () => wrapper.findByTestId('conflicts-count');
   const findFiles = () => wrapper.findAllByTestId('files');
diff --git a/spec/frontend/merge_conflicts/store/actions_spec.js b/spec/frontend/merge_conflicts/store/actions_spec.js
index 19ef4b7db25..d2c4c8b796c 100644
--- a/spec/frontend/merge_conflicts/store/actions_spec.js
+++ b/spec/frontend/merge_conflicts/store/actions_spec.js
@@ -4,13 +4,13 @@ import Cookies from '~/lib/utils/cookies';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { INTERACTIVE_RESOLVE_MODE, EDIT_RESOLVE_MODE } from '~/merge_conflicts/constants';
 import * as actions from '~/merge_conflicts/store/actions';
 import * as types from '~/merge_conflicts/store/mutation_types';
 import { restoreFileLinesState, markLine, decorateFiles } from '~/merge_conflicts/utils';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 jest.mock('~/merge_conflicts/utils');
 jest.mock('~/lib/utils/cookies');
 
@@ -114,7 +114,7 @@ describe('merge conflicts actions', () => {
       expect(window.location.assign).toHaveBeenCalledWith('hrefPath');
     });
 
-    it('on errors shows flash', async () => {
+    it('on errors shows an alert', async () => {
       mock.onPost(resolveConflictsPath).reply(HTTP_STATUS_BAD_REQUEST);
       await testAction(
         actions.submitResolvedConflicts,
diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js
index 579cee8c022..be16b5ebfd2 100644
--- a/spec/frontend/merge_request_spec.js
+++ b/spec/frontend/merge_request_spec.js
@@ -3,12 +3,12 @@ import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'spec/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_CONFLICT, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import MergeRequest from '~/merge_request';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('MergeRequest', () => {
   const test = {};
diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js
index 6d434d7e654..76d1fa3a332 100644
--- a/spec/frontend/merge_request_tabs_spec.js
+++ b/spec/frontend/merge_request_tabs_spec.js
@@ -354,8 +354,6 @@ describe('MergeRequestTabs', () => {
       testContext.class.expandSidebar.forEach((el) => {
         expect(el.classList.contains('gl-display-none!')).toBe(hides);
       });
-
-      window.gon = {};
     });
 
     describe('when switching tabs', () => {
diff --git a/spec/frontend/merge_requests/components/compare_app_spec.js b/spec/frontend/merge_requests/components/compare_app_spec.js
index 8f84341b653..ba129363ffd 100644
--- a/spec/frontend/merge_requests/components/compare_app_spec.js
+++ b/spec/frontend/merge_requests/components/compare_app_spec.js
@@ -30,10 +30,6 @@ function factory(provideData = {}) {
 }
 
 describe('Merge requests compare app component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shows commit box when selected branch is empty', () => {
     factory({
       currentBranch: {
diff --git a/spec/frontend/merge_requests/components/compare_dropdown_spec.js b/spec/frontend/merge_requests/components/compare_dropdown_spec.js
index ab5c315816c..ce03b80bdcb 100644
--- a/spec/frontend/merge_requests/components/compare_dropdown_spec.js
+++ b/spec/frontend/merge_requests/components/compare_dropdown_spec.js
@@ -47,7 +47,6 @@ describe('Merge requests compare dropdown component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/milestones/components/delete_milestone_modal_spec.js b/spec/frontend/milestones/components/delete_milestone_modal_spec.js
index 87235fa843a..f8730fd93a3 100644
--- a/spec/frontend/milestones/components/delete_milestone_modal_spec.js
+++ b/spec/frontend/milestones/components/delete_milestone_modal_spec.js
@@ -6,10 +6,10 @@ import DeleteMilestoneModal from '~/milestones/components/delete_milestone_modal
 import eventHub from '~/milestones/event_hub';
 import { HTTP_STATUS_IM_A_TEAPOT, HTTP_STATUS_NOT_FOUND } from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Delete milestone modal', () => {
   let wrapper;
@@ -39,10 +39,6 @@ describe('Delete milestone modal', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('onSubmit', () => {
     beforeEach(() => {
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
diff --git a/spec/frontend/milestones/components/milestone_combobox_spec.js b/spec/frontend/milestones/components/milestone_combobox_spec.js
index f8ddca1a2ad..748e01d4291 100644
--- a/spec/frontend/milestones/components/milestone_combobox_spec.js
+++ b/spec/frontend/milestones/components/milestone_combobox_spec.js
@@ -85,11 +85,6 @@ describe('Milestone combobox component', () => {
     mock.onGet(`/api/v4/projects/${projectId}/search`).reply((config) => searchApiCallSpy(config));
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   //
   // Finders
   //
diff --git a/spec/frontend/milestones/components/promote_milestone_modal_spec.js b/spec/frontend/milestones/components/promote_milestone_modal_spec.js
index d7ad3d29d0a..e91e792afe8 100644
--- a/spec/frontend/milestones/components/promote_milestone_modal_spec.js
+++ b/spec/frontend/milestones/components/promote_milestone_modal_spec.js
@@ -3,14 +3,14 @@ import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
 import * as urlUtils from '~/lib/utils/url_utility';
 import PromoteMilestoneModal from '~/milestones/components/promote_milestone_modal.vue';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Promote milestone modal', () => {
   let wrapper;
@@ -33,10 +33,6 @@ describe('Promote milestone modal', () => {
     wrapper = shallowMount(PromoteMilestoneModal);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Modal opener button', () => {
     it('button gets disabled when the modal opens', () => {
       expect(promoteButton().disabled).toBe(false);
diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap b/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap
index 7d7eee2bc2c..dc21db39259 100644
--- a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
+++ b/spec/frontend/ml/experiment_tracking/routes/candidates/show/__snapshots__/ml_candidates_show_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MlCandidate renders correctly 1`] = `
+exports[`MlCandidatesShow renders correctly 1`] = `
 <div>
   <div
     class="gl-alert gl-alert-warning"
@@ -152,7 +152,24 @@ exports[`MlCandidate renders correctly 1`] = `
         </td>
       </tr>
        
-      <!---->
+      <tr>
+        <td />
+         
+        <td
+          class="gl-font-weight-bold"
+        >
+          Artifacts
+        </td>
+         
+        <td>
+          <a
+            class="gl-link"
+            href="path_to_artifact"
+          >
+            Artifacts
+          </a>
+        </td>
+      </tr>
        
       <tr
         class="divider"
diff --git a/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js b/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js
index 483e454d7d7..36455339041 100644
--- a/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/candidates/show/ml_candidates_show_spec.js
@@ -1,8 +1,8 @@
 import { GlAlert } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import MlCandidate from '~/ml/experiment_tracking/components/ml_candidate.vue';
+import MlCandidatesShow from '~/ml/experiment_tracking/routes/candidates/show';
 
-describe('MlCandidate', () => {
+describe('MlCandidatesShow', () => {
   let wrapper;
 
   const createWrapper = () => {
@@ -21,14 +21,14 @@ describe('MlCandidate', () => {
       ],
       info: {
         iid: 'candidate_iid',
-        artifact_link: 'path_to_artifact',
+        path_to_artifact: 'path_to_artifact',
         experiment_name: 'The Experiment',
         experiment_path: 'path/to/experiment',
         status: 'SUCCESS',
       },
     };
 
-    return mountExtended(MlCandidate, { propsData: { candidate } });
+    return mountExtended(MlCandidatesShow, { propsData: { candidate } });
   };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
diff --git a/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
index f307d2c5a58..97a5049ea88 100644
--- a/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/show/ml_experiments_show_spec.js
@@ -1,87 +1,35 @@
-import { GlAlert, GlTable, GlLink } from '@gitlab/ui';
-import { nextTick } from 'vue';
+import { GlAlert, GlTableLite, GlLink, GlEmptyState } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import MlExperiment from '~/ml/experiment_tracking/components/ml_experiment.vue';
+import MlExperimentsShow from '~/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue';
 import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import * as urlHelpers from '~/lib/utils/url_utility';
+import { MOCK_START_CURSOR, MOCK_PAGE_INFO, MOCK_CANDIDATES } from './mock_data';
 
-describe('MlExperiment', () => {
+describe('MlExperimentsShow', () => {
   let wrapper;
 
-  const startCursor = 'eyJpZCI6IjE2In0';
-  const defaultPageInfo = {
-    startCursor,
-    endCursor: 'eyJpZCI6IjIifQ',
-    hasNextPage: true,
-    hasPreviousPage: true,
-  };
-
   const createWrapper = (
     candidates = [],
     metricNames = [],
     paramNames = [],
-    pageInfo = defaultPageInfo,
+    pageInfo = MOCK_PAGE_INFO,
   ) => {
-    wrapper = mountExtended(MlExperiment, {
-      provide: { candidates, metricNames, paramNames, pageInfo },
+    wrapper = mountExtended(MlExperimentsShow, {
+      propsData: { candidates, metricNames, paramNames, pageInfo },
     });
   };
 
-  const candidates = [
-    {
-      rmse: 1,
-      l1_ratio: 0.4,
-      details: 'link_to_candidate1',
-      artifact: 'link_to_artifact',
-      name: 'aCandidate',
-      created_at: '2023-01-05T14:07:02.975Z',
-      user: { username: 'root', path: '/root' },
-    },
-    {
-      auc: 0.3,
-      l1_ratio: 0.5,
-      details: 'link_to_candidate2',
-      created_at: '2023-01-05T14:07:02.975Z',
-      name: null,
-      user: null,
-    },
-    {
-      auc: 0.3,
-      l1_ratio: 0.5,
-      details: 'link_to_candidate3',
-      created_at: '2023-01-05T14:07:02.975Z',
-      name: null,
-      user: null,
-    },
-    {
-      auc: 0.3,
-      l1_ratio: 0.5,
-      details: 'link_to_candidate4',
-      created_at: '2023-01-05T14:07:02.975Z',
-      name: null,
-      user: null,
-    },
-    {
-      auc: 0.3,
-      l1_ratio: 0.5,
-      details: 'link_to_candidate5',
-      created_at: '2023-01-05T14:07:02.975Z',
-      name: null,
-      user: null,
-    },
-  ];
-
-  const createWrapperWithCandidates = (pageInfo = defaultPageInfo) => {
-    createWrapper(candidates, ['rmse', 'auc', 'mae'], ['l1_ratio'], pageInfo);
+  const createWrapperWithCandidates = (pageInfo = MOCK_PAGE_INFO) => {
+    createWrapper(MOCK_CANDIDATES, ['rmse', 'auc', 'mae'], ['l1_ratio'], pageInfo);
   };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findPagination = () => wrapper.findComponent(Pagination);
-  const findEmptyState = () => wrapper.findByText('No candidates to display');
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findRegistrySearch = () => wrapper.findComponent(RegistrySearch);
-  const findTable = () => wrapper.findComponent(GlTable);
+  const findTable = () => wrapper.findComponent(GlTableLite);
   const findTableHeaders = () => findTable().findAll('th');
   const findTableRows = () => findTable().findAll('tbody > tr');
   const findNthTableRow = (idx) => findTableRows().at(idx);
@@ -98,8 +46,6 @@ describe('MlExperiment', () => {
   describe('default inputs', () => {
     beforeEach(async () => {
       createWrapper();
-
-      await nextTick();
     });
 
     it('shows empty state', () => {
@@ -110,8 +56,8 @@ describe('MlExperiment', () => {
       expect(findPagination().exists()).toBe(false);
     });
 
-    it('there are no columns', () => {
-      expect(findTable().findAll('th')).toHaveLength(0);
+    it('does not show table', () => {
+      expect(findTable().exists()).toBe(false);
     });
 
     it('initializes sorting correctly', () => {
@@ -227,34 +173,33 @@ describe('MlExperiment', () => {
     it('Passes pagination to pagination component', () => {
       createWrapperWithCandidates();
 
-      expect(findPagination().props('startCursor')).toBe(startCursor);
+      expect(findPagination().props('startCursor')).toBe(MOCK_START_CURSOR);
     });
   });
 
   describe('Candidate table', () => {
     const firstCandidateIndex = 0;
     const secondCandidateIndex = 1;
-    const firstCandidate = candidates[firstCandidateIndex];
+    const firstCandidate = MOCK_CANDIDATES[firstCandidateIndex];
 
     beforeEach(() => {
       createWrapperWithCandidates();
     });
 
     it('renders all rows', () => {
-      expect(findTableRows()).toHaveLength(candidates.length);
+      expect(findTableRows()).toHaveLength(MOCK_CANDIDATES.length);
     });
 
     it('sets the correct columns in the table', () => {
       const expectedColumnNames = [
         'Name',
         'Created at',
-        'User',
+        'Author',
         'L1 Ratio',
         'Rmse',
         'Auc',
         'Mae',
-        '',
-        '',
+        'Artifacts',
       ];
 
       expect(findTableHeaders().wrappers.map((h) => h.text())).toEqual(expectedColumnNames);
@@ -270,7 +215,9 @@ describe('MlExperiment', () => {
       });
 
       it('shows empty state when no artifact', () => {
-        expect(findColumnInRow(secondCandidateIndex, artifactColumnIndex).text()).toBe('-');
+        expect(findColumnInRow(secondCandidateIndex, artifactColumnIndex).text()).toBe(
+          'No artifacts',
+        );
       });
     });
 
@@ -301,15 +248,7 @@ describe('MlExperiment', () => {
       });
 
       it('when there is no user shows nothing', () => {
-        expect(findColumnInRow(secondCandidateIndex, nameColumnIndex).text()).toBe('');
-      });
-    });
-
-    describe('Detail column', () => {
-      const detailColumn = -2;
-
-      it('is a link to details', () => {
-        expect(hrefInRowAndColumn(firstCandidateIndex, detailColumn)).toBe(firstCandidate.details);
+        expect(findColumnInRow(secondCandidateIndex, nameColumnIndex).text()).toBe('No name');
       });
     });
   });
diff --git a/spec/frontend/ml/experiment_tracking/routes/experiments/show/mock_data.js b/spec/frontend/ml/experiment_tracking/routes/experiments/show/mock_data.js
new file mode 100644
index 00000000000..66378cd3f0d
--- /dev/null
+++ b/spec/frontend/ml/experiment_tracking/routes/experiments/show/mock_data.js
@@ -0,0 +1,52 @@
+export const MOCK_START_CURSOR = 'eyJpZCI6IjE2In0';
+
+export const MOCK_PAGE_INFO = {
+  startCursor: MOCK_START_CURSOR,
+  endCursor: 'eyJpZCI6IjIifQ',
+  hasNextPage: true,
+  hasPreviousPage: true,
+};
+
+export const MOCK_CANDIDATES = [
+  {
+    rmse: 1,
+    l1_ratio: 0.4,
+    details: 'link_to_candidate1',
+    artifact: 'link_to_artifact',
+    name: 'aCandidate',
+    created_at: '2023-01-05T14:07:02.975Z',
+    user: { username: 'root', path: '/root' },
+  },
+  {
+    auc: 0.3,
+    l1_ratio: 0.5,
+    details: 'link_to_candidate2',
+    created_at: '2023-01-05T14:07:02.975Z',
+    name: null,
+    user: null,
+  },
+  {
+    auc: 0.3,
+    l1_ratio: 0.5,
+    details: 'link_to_candidate3',
+    created_at: '2023-01-05T14:07:02.975Z',
+    name: null,
+    user: null,
+  },
+  {
+    auc: 0.3,
+    l1_ratio: 0.5,
+    details: 'link_to_candidate4',
+    created_at: '2023-01-05T14:07:02.975Z',
+    name: null,
+    user: null,
+  },
+  {
+    auc: 0.3,
+    l1_ratio: 0.5,
+    details: 'link_to_candidate5',
+    created_at: '2023-01-05T14:07:02.975Z',
+    name: null,
+    user: null,
+  },
+];
diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
index 0158966997f..cc38a3fd8a1 100644
--- a/spec/frontend/monitoring/components/charts/column_spec.js
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -51,10 +51,6 @@ describe('Column component', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('xAxisLabel', () => {
     const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
 
diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js
index 484199698ea..33ea5e83598 100644
--- a/spec/frontend/monitoring/components/charts/gauge_spec.js
+++ b/spec/frontend/monitoring/components/charts/gauge_spec.js
@@ -21,11 +21,6 @@ describe('Gauge Chart component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('chart component', () => {
     it('is rendered when props are passed', () => {
       createWrapper();
diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js
index e163d4e73a0..54245cbdbc1 100644
--- a/spec/frontend/monitoring/components/charts/heatmap_spec.js
+++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js
@@ -28,10 +28,6 @@ describe('Heatmap component', () => {
       createWrapper();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should display a label on the x axis', () => {
       expect(wrapper.vm.xAxisName).toBe(graphData.xLabel);
     });
diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js
index 62a0b7e6ad3..fa31b479296 100644
--- a/spec/frontend/monitoring/components/charts/single_stat_spec.js
+++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js
@@ -21,10 +21,6 @@ describe('Single Stat Chart component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('statValue', () => {
       it('should display the correct value', () => {
diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index 503dee7b937..c1b51f71a7e 100644
--- a/spec/frontend/monitoring/components/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/components/charts/time_series_spec.js
@@ -58,10 +58,6 @@ describe('Time series component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('With a single time series', () => {
     describe('general functions', () => {
       const findChart = () => wrapper.findComponent({ ref: 'chart' });
diff --git a/spec/frontend/monitoring/components/create_dashboard_modal_spec.js b/spec/frontend/monitoring/components/create_dashboard_modal_spec.js
index 88de3467580..eb05b1f184a 100644
--- a/spec/frontend/monitoring/components/create_dashboard_modal_spec.js
+++ b/spec/frontend/monitoring/components/create_dashboard_modal_spec.js
@@ -29,10 +29,6 @@ describe('Create dashboard modal', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has button that links to the project url', async () => {
     findRepoButton().trigger('click');
 
diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
index bb57420d406..2758103fd6e 100644
--- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js
@@ -55,11 +55,6 @@ describe('Actions menu', () => {
     store = createStore();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('add metric item', () => {
     it('is rendered when custom metrics are available', async () => {
       createShallowWrapper();
diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js
index 18ccda2c41c..ab259249772 100644
--- a/spec/frontend/monitoring/components/dashboard_header_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_header_spec.js
@@ -59,10 +59,6 @@ describe('Dashboard header', () => {
     store = createStore();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('dashboards dropdown', () => {
     beforeEach(() => {
       store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, {
diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
index d71f6374967..1cfd132b123 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js
@@ -49,8 +49,6 @@ describe('dashboard invalid url parameters', () => {
     jest.spyOn(store, 'dispatch').mockResolvedValue();
   });
 
-  afterEach(() => {});
-
   it('is mounted', () => {
     expect(wrapper.exists()).toBe(true);
   });
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index 339c1710a9e..491649e5b96 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -106,10 +106,6 @@ describe('Dashboard Panel', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders the chart title', () => {
       expect(findTitle().text()).toBe(graphDataEmpty.title);
     });
@@ -134,10 +130,6 @@ describe('Dashboard Panel', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders no chart title', () => {
       expect(findTitle().text()).toBe('');
     });
@@ -160,10 +152,6 @@ describe('Dashboard Panel', () => {
       createWrapper();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders the chart title', () => {
       expect(findTitle().text()).toBe(graphData.title);
     });
@@ -377,10 +365,6 @@ describe('Dashboard Panel', () => {
       await nextTick();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     describe('csvText', () => {
       it('converts metrics data from json to csv', () => {
         const header = `timestamp,"${graphData.y_label} > ${graphData.metrics[0].label}"`;
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 1d17a9116df..1f995965003 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -4,7 +4,7 @@ import { nextTick } from 'vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { objectToQuery } from '~/lib/utils/url_utility';
@@ -33,7 +33,7 @@ import {
   setupStoreWithLinks,
 } from '../store_utils';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Dashboard', () => {
   let store;
@@ -75,7 +75,6 @@ describe('Dashboard', () => {
     if (store.dispatch.mockReset) {
       store.dispatch.mockReset();
     }
-    wrapper.destroy();
   });
 
   describe('request information to the server', () => {
diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js
index 9873654bdda..98791906700 100644
--- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js
@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import {
   queryToObject,
@@ -18,7 +18,7 @@ import { defaultTimeRange } from '~/vue_shared/constants';
 import { dashboardProps } from '../fixture_data';
 import { mockProjectDir } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 describe('dashboard invalid url parameters', () => {
diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js
index 104263e73e0..593d832f297 100644
--- a/spec/frontend/monitoring/components/graph_group_spec.js
+++ b/spec/frontend/monitoring/components/graph_group_spec.js
@@ -18,10 +18,6 @@ describe('Graph group component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('When group is not collapsed', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js
index e3cd26b0e48..d3a48be7939 100644
--- a/spec/frontend/monitoring/components/group_empty_state_spec.js
+++ b/spec/frontend/monitoring/components/group_empty_state_spec.js
@@ -23,10 +23,6 @@ function createComponent(props) {
 describe('GroupEmptyState', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each([
     metricStates.NO_DATA,
     metricStates.TIMEOUT,
diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js
index cb300870689..f6cc6789b1f 100644
--- a/spec/frontend/monitoring/components/refresh_button_spec.js
+++ b/spec/frontend/monitoring/components/refresh_button_spec.js
@@ -40,6 +40,7 @@ describe('RefreshButton', () => {
 
   afterEach(() => {
     dispatch.mockReset();
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
     wrapper.destroy();
   });
 
diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
index 012e2e9c3e2..96b228fd3b2 100644
--- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js
@@ -1,6 +1,5 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
 
 describe('Custom variable component', () => {
@@ -56,11 +55,8 @@ describe('Custom variable component', () => {
 
   it('changing dropdown items triggers update', async () => {
     createShallowWrapper();
-    jest.spyOn(wrapper.vm, '$emit');
-
     findDropdownItems().at(1).vm.$emit('click');
 
-    await nextTick();
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary');
+    expect(wrapper.emitted('input')).toEqual([['canary']]);
   });
 });
diff --git a/spec/frontend/monitoring/components/variables/text_field_spec.js b/spec/frontend/monitoring/components/variables/text_field_spec.js
index 3073b3968aa..20e1937c5ac 100644
--- a/spec/frontend/monitoring/components/variables/text_field_spec.js
+++ b/spec/frontend/monitoring/components/variables/text_field_spec.js
@@ -33,25 +33,23 @@ describe('Text variable component', () => {
 
   it('triggers keyup enter', async () => {
     createShallowWrapper();
-    jest.spyOn(wrapper.vm, '$emit');
 
     findInput().element.value = 'prod-pod';
     findInput().trigger('input');
     findInput().trigger('keyup.enter');
 
     await nextTick();
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'prod-pod');
+    expect(wrapper.emitted('input')).toEqual([['prod-pod']]);
   });
 
   it('triggers blur enter', async () => {
     createShallowWrapper();
-    jest.spyOn(wrapper.vm, '$emit');
 
     findInput().element.value = 'canary-pod';
     findInput().trigger('input');
     findInput().trigger('blur');
 
     await nextTick();
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary-pod');
+    expect(wrapper.emitted('input')).toEqual([['canary-pod']]);
   });
 });
diff --git a/spec/frontend/monitoring/pages/panel_new_page_spec.js b/spec/frontend/monitoring/pages/panel_new_page_spec.js
index fa112fca2db..98ee6c1cb29 100644
--- a/spec/frontend/monitoring/pages/panel_new_page_spec.js
+++ b/spec/frontend/monitoring/pages/panel_new_page_spec.js
@@ -49,10 +49,6 @@ describe('monitoring/pages/panel_new_page', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('back to dashboard button', () => {
     it('is rendered', () => {
       expect(findBackButton().exists()).toBe(true);
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index 8eda46a2ff1..8097857f226 100644
--- a/spec/frontend/monitoring/store/actions_spec.js
+++ b/spec/frontend/monitoring/store/actions_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import { backoffMockImplementation } from 'helpers/backoff_helper';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import {
@@ -61,7 +61,7 @@ import {
   mockDashboardsErrorResponse,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Monitoring store actions', () => {
   const { convertObjectPropsToCamelCase } = commonUtils;
@@ -177,7 +177,6 @@ describe('Monitoring store actions', () => {
     });
 
     it('dispatches when feature metricsDashboardAnnotations is on', () => {
-      const origGon = window.gon;
       window.gon = { features: { metricsDashboardAnnotations: true } };
 
       return testAction(
@@ -190,9 +189,7 @@ describe('Monitoring store actions', () => {
           { type: 'fetchDashboard' },
           { type: 'fetchAnnotations' },
         ],
-      ).then(() => {
-        window.gon = origGon;
-      });
+      );
     });
   });
 
@@ -263,7 +260,7 @@ describe('Monitoring store actions', () => {
         });
       });
 
-      it('does not show a flash error when showErrorBanner is disabled', async () => {
+      it('does not show an alert error when showErrorBanner is disabled', async () => {
         state.showErrorBanner = false;
 
         await result();
diff --git a/spec/frontend/nav/components/new_nav_toggle_spec.js b/spec/frontend/nav/components/new_nav_toggle_spec.js
index bad24345f9d..fe543a346b5 100644
--- a/spec/frontend/nav/components/new_nav_toggle_spec.js
+++ b/spec/frontend/nav/components/new_nav_toggle_spec.js
@@ -1,16 +1,16 @@
 import { mount, createWrapper } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { getByText as getByTextHelper } from '@testing-library/dom';
-import { GlToggle } from '@gitlab/ui';
+import { GlDisclosureDropdownItem, GlToggle } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_ENDPONT = 'https://example.com/toggle';
 
@@ -20,6 +20,7 @@ describe('NewNavToggle', () => {
   let wrapper;
 
   const findToggle = () => wrapper.findComponent(GlToggle);
+  const findDisclosureItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
 
   const createComponent = (propsData = { enabled: false }) => {
     wrapper = mount(NewNavToggle, {
@@ -30,83 +31,156 @@ describe('NewNavToggle', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const getByText = (text, options) =>
     createWrapper(getByTextHelper(wrapper.element, text, options));
 
-  it('renders its title', () => {
-    createComponent();
-    expect(getByText('Navigation redesign').exists()).toBe(true);
-  });
+  describe('When rendered in scope of the new navigation', () => {
+    it('renders the disclosure item', () => {
+      createComponent({ newNavigation: true, enabled: true });
+      expect(findDisclosureItem().exists()).toBe(true);
+    });
 
-  describe('when user preference is enabled', () => {
-    beforeEach(() => {
-      createComponent({ enabled: true });
+    describe('when user preference is enabled', () => {
+      beforeEach(() => {
+        createComponent({ newNavigation: true, enabled: true });
+      });
+
+      it('renders the toggle as enabled', () => {
+        expect(findToggle().props('value')).toBe(true);
+      });
     });
 
-    it('renders the toggle as enabled', () => {
-      expect(findToggle().props('value')).toBe(true);
+    describe('when user preference is disabled', () => {
+      beforeEach(() => {
+        createComponent({ enabled: false });
+      });
+
+      it('renders the toggle as disabled', () => {
+        expect(findToggle().props('value')).toBe(false);
+      });
+    });
+
+    describe.each`
+      desc                               | actFn
+      ${'when toggle button is clicked'} | ${() => findToggle().trigger('click')}
+      ${'on menu item action'}           | ${() => findDisclosureItem().vm.$emit('action')}
+    `('$desc', ({ actFn }) => {
+      let mock;
+
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+        createComponent({ enabled: false, newNavigation: true });
+      });
+
+      it('reloads the page on success', async () => {
+        mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_OK);
+
+        actFn();
+        await waitForPromises();
+
+        expect(window.location.reload).toHaveBeenCalled();
+      });
+
+      it('shows an alert on error', async () => {
+        mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+
+        actFn();
+        await waitForPromises();
+
+        expect(createAlert).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: s__(
+              'NorthstarNavigation|Could not update the new navigation preference. Please try again later.',
+            ),
+          }),
+        );
+        expect(window.location.reload).not.toHaveBeenCalled();
+      });
+
+      it('changes the toggle', async () => {
+        await actFn();
+
+        expect(findToggle().props('value')).toBe(true);
+      });
+
+      afterEach(() => {
+        mock.restore();
+      });
     });
   });
 
-  describe('when user preference is disabled', () => {
-    beforeEach(() => {
-      createComponent({ enabled: false });
+  describe('When rendered in scope of the current navigation', () => {
+    it('renders its title', () => {
+      createComponent();
+      expect(getByText('Navigation redesign').exists()).toBe(true);
     });
 
-    it('renders the toggle as disabled', () => {
-      expect(findToggle().props('value')).toBe(false);
+    describe('when user preference is enabled', () => {
+      beforeEach(() => {
+        createComponent({ enabled: true });
+      });
+
+      it('renders the toggle as enabled', () => {
+        expect(findToggle().props('value')).toBe(true);
+      });
     });
-  });
 
-  describe.each`
-    desc                                | actFn
-    ${'when toggle button is clicked'}  | ${() => findToggle().trigger('click')}
-    ${'when menu item text is clicked'} | ${() => getByText('New navigation').trigger('click')}
-  `('$desc', ({ actFn }) => {
-    let mock;
+    describe('when user preference is disabled', () => {
+      beforeEach(() => {
+        createComponent({ enabled: false });
+      });
 
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-      createComponent({ enabled: false });
+      it('renders the toggle as disabled', () => {
+        expect(findToggle().props('value')).toBe(false);
+      });
     });
 
-    it('reloads the page on success', async () => {
-      mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_OK);
+    describe.each`
+      desc                                | actFn
+      ${'when toggle button is clicked'}  | ${() => findToggle().trigger('click')}
+      ${'when menu item text is clicked'} | ${() => getByText('New navigation').trigger('click')}
+    `('$desc', ({ actFn }) => {
+      let mock;
 
-      actFn();
-      await waitForPromises();
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+        createComponent({ enabled: false });
+      });
 
-      expect(window.location.reload).toHaveBeenCalled();
-    });
+      it('reloads the page on success', async () => {
+        mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_OK);
 
-    it('shows an alert on error', async () => {
-      mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
+        actFn();
+        await waitForPromises();
 
-      actFn();
-      await waitForPromises();
+        expect(window.location.reload).toHaveBeenCalled();
+      });
 
-      expect(createAlert).toHaveBeenCalledWith(
-        expect.objectContaining({
-          message: s__(
-            'NorthstarNavigation|Could not update the new navigation preference. Please try again later.',
-          ),
-        }),
-      );
-      expect(window.location.reload).not.toHaveBeenCalled();
-    });
+      it('shows an alert on error', async () => {
+        mock.onPut(TEST_ENDPONT).reply(HTTP_STATUS_INTERNAL_SERVER_ERROR);
 
-    it('changes the toggle', async () => {
-      await actFn();
+        actFn();
+        await waitForPromises();
 
-      expect(findToggle().props('value')).toBe(true);
-    });
+        expect(createAlert).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: s__(
+              'NorthstarNavigation|Could not update the new navigation preference. Please try again later.',
+            ),
+          }),
+        );
+        expect(window.location.reload).not.toHaveBeenCalled();
+      });
+
+      it('changes the toggle', async () => {
+        await actFn();
+
+        expect(findToggle().props('value')).toBe(true);
+      });
 
-    afterEach(() => {
-      mock.restore();
+      afterEach(() => {
+        mock.restore();
+      });
     });
   });
 });
diff --git a/spec/frontend/nav/components/responsive_app_spec.js b/spec/frontend/nav/components/responsive_app_spec.js
index 76b8ebdc92f..9d3b43520ec 100644
--- a/spec/frontend/nav/components/responsive_app_spec.js
+++ b/spec/frontend/nav/components/responsive_app_spec.js
@@ -33,10 +33,6 @@ describe('~/nav/components/responsive_app.vue', () => {
     document.body.className = 'test-class';
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/nav/components/responsive_header_spec.js b/spec/frontend/nav/components/responsive_header_spec.js
index f87de0afb14..2514035270a 100644
--- a/spec/frontend/nav/components/responsive_header_spec.js
+++ b/spec/frontend/nav/components/responsive_header_spec.js
@@ -14,7 +14,7 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
         default: TEST_SLOT_CONTENT,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -25,10 +25,6 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders slot', () => {
     expect(wrapper.text()).toBe(TEST_SLOT_CONTENT);
   });
diff --git a/spec/frontend/nav/components/responsive_home_spec.js b/spec/frontend/nav/components/responsive_home_spec.js
index 8f198d92747..5a5cfc93607 100644
--- a/spec/frontend/nav/components/responsive_home_spec.js
+++ b/spec/frontend/nav/components/responsive_home_spec.js
@@ -29,7 +29,7 @@ describe('~/nav/components/responsive_home.vue', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       listeners: {
         'menu-item-click': menuItemClickListener,
@@ -45,10 +45,6 @@ describe('~/nav/components/responsive_home.vue', () => {
     menuItemClickListener = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/nav/components/top_nav_app_spec.js b/spec/frontend/nav/components/top_nav_app_spec.js
index e70f70afc97..7f39552eb42 100644
--- a/spec/frontend/nav/components/top_nav_app_spec.js
+++ b/spec/frontend/nav/components/top_nav_app_spec.js
@@ -28,10 +28,6 @@ describe('~/nav/components/top_nav_app.vue', () => {
   const findNavItemDropdowToggle = () => findNavItemDropdown().find('.js-top-nav-dropdown-toggle');
   const findMenu = () => wrapper.findComponent(TopNavDropdownMenu);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponentShallow();
diff --git a/spec/frontend/nav/components/top_nav_container_view_spec.js b/spec/frontend/nav/components/top_nav_container_view_spec.js
index 293fe361fa9..388ac243648 100644
--- a/spec/frontend/nav/components/top_nav_container_view_spec.js
+++ b/spec/frontend/nav/components/top_nav_container_view_spec.js
@@ -48,10 +48,6 @@ describe('~/nav/components/top_nav_container_view.vue', () => {
   };
   const findFrequentItemsContainer = () => wrapper.find('[data-testid="frequent-items-container"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each(['projects', 'groups'])(
     'emits frequent items event to event hub (%s)',
     async (frequentItemsDropdownType) => {
diff --git a/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js b/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
index 8a0340087ec..08d6650b5bb 100644
--- a/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
+++ b/spec/frontend/nav/components/top_nav_dropdown_menu_spec.js
@@ -36,10 +36,6 @@ describe('~/nav/components/top_nav_dropdown_menu.vue', () => {
       active: idx === activeIndex,
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation();
   });
diff --git a/spec/frontend/nav/components/top_nav_menu_sections_spec.js b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
index 7a5a8475ab7..7a3e58fd964 100644
--- a/spec/frontend/nav/components/top_nav_menu_sections_spec.js
+++ b/spec/frontend/nav/components/top_nav_menu_sections_spec.js
@@ -54,10 +54,6 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
       menuItems: findMenuItemModels(x),
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/nav/components/top_nav_new_dropdown_spec.js b/spec/frontend/nav/components/top_nav_new_dropdown_spec.js
index 18210658b89..2cd65307b0b 100644
--- a/spec/frontend/nav/components/top_nav_new_dropdown_spec.js
+++ b/spec/frontend/nav/components/top_nav_new_dropdown_spec.js
@@ -1,6 +1,8 @@
 import { GlDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import TopNavNewDropdown from '~/nav/components/top_nav_new_dropdown.vue';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import { TOP_NAV_INVITE_MEMBERS_COMPONENT } from '~/invite_members/constants';
 
 const TEST_VIEW_MODEL = {
   title: 'Dropdown',
@@ -18,6 +20,16 @@ const TEST_VIEW_MODEL = {
       menu_items: [
         { id: 'bar-1', title: 'Bar 1', href: '/bar/1' },
         { id: 'bar-2', title: 'Bar 2', href: '/bar/2' },
+        {
+          id: 'invite',
+          title: '_invite members title_',
+          component: TOP_NAV_INVITE_MEMBERS_COMPONENT,
+          icon: '_icon_',
+          data: {
+            trigger_element: '_trigger_element_',
+            trigger_source: '_trigger_source_',
+          },
+        },
       ],
     },
   ],
@@ -36,6 +48,7 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
   };
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findInviteMembersTrigger = () => wrapper.findComponent(InviteMembersTrigger);
   const findDropdownContents = () =>
     findDropdown()
       .findAll('[data-testid]')
@@ -55,10 +68,6 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
         };
       });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
@@ -73,6 +82,10 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
     });
 
     it('renders dropdown content', () => {
+      const hrefItems = TEST_VIEW_MODEL.menu_sections[1].menu_items.filter((item) =>
+        Boolean(item.href),
+      );
+
       expect(findDropdownContents()).toEqual([
         {
           type: 'header',
@@ -90,12 +103,18 @@ describe('~/nav/components/top_nav_menu_sections.vue', () => {
           type: 'header',
           text: TEST_VIEW_MODEL.menu_sections[1].title,
         },
-        ...TEST_VIEW_MODEL.menu_sections[1].menu_items.map(({ title, href }) => ({
+        ...hrefItems.map(({ title, href }) => ({
           type: 'item',
           href,
           text: title,
         })),
       ]);
+      expect(findInviteMembersTrigger().props()).toMatchObject({
+        displayText: '_invite members title_',
+        icon: '_icon_',
+        triggerElement: 'dropdown-_trigger_element_',
+        triggerSource: '_trigger_source_',
+      });
     });
   });
 
diff --git a/spec/frontend/notebook/cells/code_spec.js b/spec/frontend/notebook/cells/code_spec.js
index 10762a1c3a2..9836400a366 100644
--- a/spec/frontend/notebook/cells/code_spec.js
+++ b/spec/frontend/notebook/cells/code_spec.js
@@ -13,10 +13,6 @@ describe('Code component', () => {
     json = JSON.parse(JSON.stringify(fixture));
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without output', () => {
     beforeEach(() => {
       wrapper = mountComponent(json.cells[0]);
diff --git a/spec/frontend/notebook/cells/markdown_spec.js b/spec/frontend/notebook/cells/markdown_spec.js
index a7776bd5b69..f226776212a 100644
--- a/spec/frontend/notebook/cells/markdown_spec.js
+++ b/spec/frontend/notebook/cells/markdown_spec.js
@@ -1,18 +1,16 @@
 import { mount } from '@vue/test-utils';
 import katex from 'katex';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import markdownTableJson from 'test_fixtures/blob/notebook/markdown-table.json';
 import basicJson from 'test_fixtures/blob/notebook/basic.json';
 import mathJson from 'test_fixtures/blob/notebook/math.json';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
 import Prompt from '~/notebook/cells/prompt.vue';
 
-const Component = Vue.extend(MarkdownComponent);
-
 window.katex = katex;
 
 function buildCellComponent(cell, relativePath = '', hidePrompt) {
-  return mount(Component, {
+  return mount(MarkdownComponent, {
     propsData: {
       cell,
       hidePrompt,
diff --git a/spec/frontend/notebook/cells/output/error_spec.js b/spec/frontend/notebook/cells/output/error_spec.js
new file mode 100644
index 00000000000..2e4ca8c1761
--- /dev/null
+++ b/spec/frontend/notebook/cells/output/error_spec.js
@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import ErrorOutput from '~/notebook/cells/output/error.vue';
+import Prompt from '~/notebook/cells/prompt.vue';
+import Markdown from '~/notebook/cells/markdown.vue';
+import { errorOutputContent, relativeRawPath } from '../../mock_data';
+
+describe('notebook/cells/output/error.vue', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mount(ErrorOutput, {
+      propsData: {
+        rawCode: errorOutputContent,
+        index: 1,
+        count: 2,
+      },
+      provide: { relativeRawPath },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  const findPrompt = () => wrapper.findComponent(Prompt);
+  const findMarkdown = () => wrapper.findComponent(Markdown);
+
+  it('renders the prompt', () => {
+    expect(findPrompt().props()).toMatchObject({ count: 2, showOutput: true, type: 'Out' });
+  });
+
+  it('renders the markdown', () => {
+    const expectedParsedMarkdown =
+      '```error\n' +
+      '---------------------------------------------------------------------------\n' +
+      'NameError                                 Traceback (most recent call last)\n' +
+      '/var/folders/cq/l637k4x13gx6y9p_gfs4c_gc0000gn/T/ipykernel_79203/294318627.py in <module>\n' +
+      '----> 1 To\n' +
+      '\n' +
+      "NameError: name 'To' is not defined\n" +
+      '```';
+
+    expect(findMarkdown().props()).toMatchObject({
+      cell: { source: [expectedParsedMarkdown] },
+      hidePrompt: true,
+    });
+  });
+});
diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 585cbb68eeb..1241c133b89 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -17,10 +17,6 @@ describe('Output component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('text output', () => {
     beforeEach(() => {
       const textType = json.cells[2];
diff --git a/spec/frontend/notebook/cells/prompt_spec.js b/spec/frontend/notebook/cells/prompt_spec.js
index 0cda0c5bc2b..4c864a9b930 100644
--- a/spec/frontend/notebook/cells/prompt_spec.js
+++ b/spec/frontend/notebook/cells/prompt_spec.js
@@ -6,10 +6,6 @@ describe('Prompt component', () => {
 
   const mountComponent = ({ type }) => shallowMount(Prompt, { propsData: { type, count: 1 } });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('input', () => {
     beforeEach(() => {
       wrapper = mountComponent({ type: 'In' });
diff --git a/spec/frontend/notebook/index_spec.js b/spec/frontend/notebook/index_spec.js
index b79000a3505..3c73d420703 100644
--- a/spec/frontend/notebook/index_spec.js
+++ b/spec/frontend/notebook/index_spec.js
@@ -1,16 +1,14 @@
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import json from 'test_fixtures/blob/notebook/basic.json';
 import jsonWithWorksheet from 'test_fixtures/blob/notebook/worksheets.json';
 import Notebook from '~/notebook/index.vue';
 
-const Component = Vue.extend(Notebook);
-
 describe('Notebook component', () => {
   let vm;
 
   function buildComponent(notebook) {
-    return mount(Component, {
+    return mount(Notebook, {
       propsData: { notebook },
       provide: { relativeRawPath: '' },
     }).vm;
diff --git a/spec/frontend/notebook/mock_data.js b/spec/frontend/notebook/mock_data.js
index b1419e1256f..5c47cb5aa9b 100644
--- a/spec/frontend/notebook/mock_data.js
+++ b/spec/frontend/notebook/mock_data.js
@@ -1,2 +1,8 @@
 export const relativeRawPath = '/test';
 export const markdownCellContent = ['# Test'];
+export const errorOutputContent = [
+  '\u001b[0;31m---------------------------------------------------------------------------\u001b[0m',
+  '\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)',
+  '\u001b[0;32m/var/folders/cq/l637k4x13gx6y9p_gfs4c_gc0000gn/T/ipykernel_79203/294318627.py\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mTo\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m',
+  "\u001b[0;31mNameError\u001b[0m: name 'To' is not defined",
+];
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index dfb05c85fc8..062cd098640 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -5,11 +5,12 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import Autosave from '~/autosave';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
+import { STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants';
 import axios from '~/lib/utils/axios_utils';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import { HTTP_STATUS_UNPROCESSABLE_ENTITY } from '~/lib/utils/http_status';
 import CommentForm from '~/notes/components/comment_form.vue';
 import CommentTypeDropdown from '~/notes/components/comment_type_dropdown.vue';
@@ -21,8 +22,7 @@ import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock }
 
 jest.mock('autosize');
 jest.mock('~/commons/nav/user_merge_requests');
-jest.mock('~/flash');
-jest.mock('~/autosave');
+jest.mock('~/alert');
 
 Vue.use(Vuex);
 
@@ -32,7 +32,8 @@ describe('issue_comment_form component', () => {
   let axiosMock;
 
   const findCloseReopenButton = () => wrapper.findByTestId('close-reopen-button');
-  const findTextArea = () => wrapper.findByTestId('comment-field');
+  const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
+  const findMarkdownEditorTextarea = () => findMarkdownEditor().find('textarea');
   const findAddToReviewButton = () => wrapper.findByTestId('add-to-review-button');
   const findAddCommentNowButton = () => wrapper.findByTestId('add-comment-now-button');
   const findConfidentialNoteCheckbox = () => wrapper.findByTestId('internal-note-checkbox');
@@ -127,7 +128,6 @@ describe('issue_comment_form component', () => {
 
   afterEach(() => {
     axiosMock.restore();
-    wrapper.destroy();
   });
 
   describe('user is logged in', () => {
@@ -136,7 +136,6 @@ describe('issue_comment_form component', () => {
         mountComponent({ mountFunction: mount, initialData: { note: 'hello world' } });
 
         jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
-        jest.spyOn(wrapper.vm, 'resizeTextarea');
         jest.spyOn(wrapper.vm, 'stopPolling');
 
         findCloseReopenButton().trigger('click');
@@ -145,7 +144,6 @@ describe('issue_comment_form component', () => {
         expect(wrapper.vm.note).toBe('');
         expect(wrapper.vm.saveNote).toHaveBeenCalled();
         expect(wrapper.vm.stopPolling).toHaveBeenCalled();
-        expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
       });
 
       it('does not report errors in the UI when the save succeeds', async () => {
@@ -260,6 +258,18 @@ describe('issue_comment_form component', () => {
       });
     });
 
+    it('hides content editor switcher if feature flag content_editor_on_issues is off', () => {
+      mountComponent({ mountFunction: mount, features: { contentEditorOnIssues: false } });
+
+      expect(wrapper.text()).not.toContain('Rich text');
+    });
+
+    it('shows content editor switcher if feature flag content_editor_on_issues is on', () => {
+      mountComponent({ mountFunction: mount, features: { contentEditorOnIssues: true } });
+
+      expect(wrapper.text()).toContain('Rich text');
+    });
+
     describe('textarea', () => {
       describe('general', () => {
         it.each`
@@ -268,13 +278,13 @@ describe('issue_comment_form component', () => {
           ${'internal note'} | ${true}        | ${'Write an internal note or drag your files here…'}
         `(
           'should render textarea with placeholder for $noteType',
-          ({ noteIsInternal, placeholder }) => {
-            mountComponent({
-              mountFunction: mount,
-              initialData: { noteIsInternal },
-            });
+          async ({ noteIsInternal, placeholder }) => {
+            mountComponent();
+
+            wrapper.vm.noteIsInternal = noteIsInternal;
+            await nextTick();
 
-            expect(findTextArea().attributes('placeholder')).toBe(placeholder);
+            expect(findMarkdownEditor().props('formFieldProps').placeholder).toBe(placeholder);
           },
         );
 
@@ -290,13 +300,13 @@ describe('issue_comment_form component', () => {
 
           await findCommentButton().trigger('click');
 
-          expect(findTextArea().attributes('disabled')).toBe('disabled');
+          expect(findMarkdownEditor().find('textarea').attributes('disabled')).toBe('disabled');
         });
 
         it('should support quick actions', () => {
           mountComponent({ mountFunction: mount });
 
-          expect(findTextArea().attributes('data-supports-quick-actions')).toBe('true');
+          expect(findMarkdownEditor().props('supportsQuickActions')).toBe(true);
         });
 
         it('should link to markdown docs', () => {
@@ -336,63 +346,51 @@ describe('issue_comment_form component', () => {
         it('should enter edit mode when arrow up is pressed', () => {
           jest.spyOn(wrapper.vm, 'editCurrentUserLastNote');
 
-          findTextArea().trigger('keydown.up');
+          findMarkdownEditorTextarea().trigger('keydown.up');
 
           expect(wrapper.vm.editCurrentUserLastNote).toHaveBeenCalled();
         });
 
-        it('inits autosave', () => {
-          expect(Autosave).toHaveBeenCalledWith(expect.any(Element), [
-            'Note',
-            'Issue',
-            noteableDataMock.id,
-          ]);
-        });
-      });
+        describe('event enter', () => {
+          describe('when no draft exists', () => {
+            it('should save note when cmd+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSave');
 
-      describe('event enter', () => {
-        beforeEach(() => {
-          mountComponent({ mountFunction: mount });
-        });
-
-        describe('when no draft exists', () => {
-          it('should save note when cmd+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSave');
-
-            findTextArea().trigger('keydown.enter', { metaKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { metaKey: true });
 
-            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
-          });
+              expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+            });
 
-          it('should save note when ctrl+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSave');
+            it('should save note when ctrl+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSave');
 
-            findTextArea().trigger('keydown.enter', { ctrlKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { ctrlKey: true });
 
-            expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+              expect(wrapper.vm.handleSave).toHaveBeenCalledWith();
+            });
           });
-        });
 
-        describe('when a draft exists', () => {
-          beforeEach(() => {
-            store.registerModule('batchComments', batchComments());
-            store.state.batchComments.drafts = [{ note: 'A' }];
-          });
+          describe('when a draft exists', () => {
+            beforeEach(() => {
+              store.registerModule('batchComments', batchComments());
+              store.state.batchComments.drafts = [{ note: 'A' }];
+            });
 
-          it('should save note draft when cmd+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSaveDraft');
+            it('should save note draft when cmd+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSaveDraft');
 
-            findTextArea().trigger('keydown.enter', { metaKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { metaKey: true });
 
-            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
-          });
+              expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+            });
 
-          it('should save note draft when ctrl+enter is pressed', () => {
-            jest.spyOn(wrapper.vm, 'handleSaveDraft');
+            it('should save note draft when ctrl+enter is pressed', () => {
+              jest.spyOn(wrapper.vm, 'handleSaveDraft');
 
-            findTextArea().trigger('keydown.enter', { ctrlKey: true });
+              findMarkdownEditorTextarea().trigger('keydown.enter', { ctrlKey: true });
 
-            expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+              expect(wrapper.vm.handleSaveDraft).toHaveBeenCalledWith();
+            });
           });
         });
       });
@@ -482,7 +480,7 @@ describe('issue_comment_form component', () => {
             it(`makes an API call to open it`, () => {
               mountComponent({
                 noteableType,
-                noteableData: { ...noteableDataMock, state: constants.OPENED },
+                noteableData: { ...noteableDataMock, state: STATUS_OPEN },
                 mountFunction: mount,
               });
 
@@ -496,7 +494,7 @@ describe('issue_comment_form component', () => {
             it(`shows an error when the API call fails`, async () => {
               mountComponent({
                 noteableType,
-                noteableData: { ...noteableDataMock, state: constants.OPENED },
+                noteableData: { ...noteableDataMock, state: STATUS_OPEN },
                 mountFunction: mount,
               });
 
@@ -517,7 +515,7 @@ describe('issue_comment_form component', () => {
             it('makes an API call to close it', () => {
               mountComponent({
                 noteableType,
-                noteableData: { ...noteableDataMock, state: constants.CLOSED },
+                noteableData: { ...noteableDataMock, state: STATUS_CLOSED },
                 mountFunction: mount,
               });
 
@@ -532,7 +530,7 @@ describe('issue_comment_form component', () => {
           it(`shows an error when the API call fails`, async () => {
             mountComponent({
               noteableType,
-              noteableData: { ...noteableDataMock, state: constants.CLOSED },
+              noteableData: { ...noteableDataMock, state: STATUS_CLOSED },
               mountFunction: mount,
             });
 
@@ -661,7 +659,7 @@ describe('issue_comment_form component', () => {
     });
 
     it('should not render submission form', () => {
-      expect(findTextArea().exists()).toBe(false);
+      expect(findMarkdownEditor().exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/notes/components/comment_type_dropdown_spec.js b/spec/frontend/notes/components/comment_type_dropdown_spec.js
index cabf551deba..b891c1f553d 100644
--- a/spec/frontend/notes/components/comment_type_dropdown_spec.js
+++ b/spec/frontend/notes/components/comment_type_dropdown_spec.js
@@ -24,10 +24,6 @@ describe('CommentTypeDropdown component', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     isInternalNote | buttonText
     ${false}       | ${COMMENT_FORM.comment}
diff --git a/spec/frontend/notes/components/diff_discussion_header_spec.js b/spec/frontend/notes/components/diff_discussion_header_spec.js
index bb44563b87a..66b86ed3ce0 100644
--- a/spec/frontend/notes/components/diff_discussion_header_spec.js
+++ b/spec/frontend/notes/components/diff_discussion_header_spec.js
@@ -22,10 +22,6 @@ describe('diff_discussion_header component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Avatar', () => {
     const firstNoteAuthor = discussionMock.notes[0].author;
     const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
diff --git a/spec/frontend/notes/components/discussion_actions_spec.js b/spec/frontend/notes/components/discussion_actions_spec.js
index e414ada1854..a9a20bd8bc3 100644
--- a/spec/frontend/notes/components/discussion_actions_spec.js
+++ b/spec/frontend/notes/components/discussion_actions_spec.js
@@ -38,15 +38,12 @@ describe('DiscussionActions', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     const createComponent = createComponentFactory();
 
     it('renders reply placeholder, resolve discussion button, resolve with issue button and jump to next discussion button', () => {
       createComponent();
+
       expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true);
       expect(wrapper.findComponent(ResolveDiscussionButton).exists()).toBe(true);
       expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(true);
@@ -94,17 +91,15 @@ describe('DiscussionActions', () => {
     it('emits showReplyForm event when clicking on reply placeholder', () => {
       createComponent({}, { attachTo: document.body });
 
-      jest.spyOn(wrapper.vm, '$emit');
       wrapper.findComponent(ReplyPlaceholder).find('textarea').trigger('focus');
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('showReplyForm');
+      expect(wrapper.emitted().showReplyForm).toHaveLength(1);
     });
 
     it('emits resolve event when clicking on resolve button', () => {
       createComponent();
 
-      jest.spyOn(wrapper.vm, '$emit');
       wrapper.findComponent(ResolveDiscussionButton).find('button').trigger('click');
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('resolve');
+      expect(wrapper.emitted().resolve).toHaveLength(1);
     });
   });
 });
diff --git a/spec/frontend/notes/components/discussion_counter_spec.js b/spec/frontend/notes/components/discussion_counter_spec.js
index f4ec7f835bb..ac677841ee1 100644
--- a/spec/frontend/notes/components/discussion_counter_spec.js
+++ b/spec/frontend/notes/components/discussion_counter_spec.js
@@ -40,7 +40,6 @@ describe('DiscussionCounter component', () => {
 
   afterEach(() => {
     wrapper.vm.$destroy();
-    wrapper = null;
   });
 
   describe('has no discussions', () => {
@@ -119,8 +118,6 @@ describe('DiscussionCounter component', () => {
       toggleAllButton = wrapper.find('[data-testid="toggle-all-discussions-btn"]');
     };
 
-    afterEach(() => wrapper.destroy());
-
     it('calls button handler when clicked', async () => {
       await updateStoreWithExpanded(true);
 
diff --git a/spec/frontend/notes/components/discussion_filter_note_spec.js b/spec/frontend/notes/components/discussion_filter_note_spec.js
index 48f5030aa1a..e31155a028f 100644
--- a/spec/frontend/notes/components/discussion_filter_note_spec.js
+++ b/spec/frontend/notes/components/discussion_filter_note_spec.js
@@ -18,11 +18,6 @@ describe('DiscussionFilterNote component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('timelineContent renders a string containing instruction for switching feed type', () => {
     expect(wrapper.find('[data-testid="discussion-filter-timeline-content"]').html()).toBe(
       '<div data-testid="discussion-filter-timeline-content">You\'re only seeing <b>other activity</b> in the feed. To add a comment, switch to one of the following options.</div>',
diff --git a/spec/frontend/notes/components/discussion_navigator_spec.js b/spec/frontend/notes/components/discussion_navigator_spec.js
index 77ae7b2c3b5..6e095f63003 100644
--- a/spec/frontend/notes/components/discussion_navigator_spec.js
+++ b/spec/frontend/notes/components/discussion_navigator_spec.js
@@ -37,7 +37,6 @@ describe('notes/components/discussion_navigator', () => {
     if (wrapper) {
       wrapper.destroy();
     }
-    wrapper = null;
   });
 
   describe('on create', () => {
diff --git a/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js
index 8d5ea108b50..d11ca7ad1ec 100644
--- a/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js
+++ b/spec/frontend/notes/components/discussion_notes_replies_wrapper_spec.js
@@ -19,10 +19,6 @@ describe('DiscussionNotesRepliesWrapper', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when normal discussion', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/notes/components/discussion_notes_spec.js b/spec/frontend/notes/components/discussion_notes_spec.js
index add2ed1ba8a..bc0c04f2d8a 100644
--- a/spec/frontend/notes/components/discussion_notes_spec.js
+++ b/spec/frontend/notes/components/discussion_notes_spec.js
@@ -53,11 +53,6 @@ describe('DiscussionNotes', () => {
     store.dispatch('setNotesData', notesDataMock);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('rendering', () => {
     it('renders an element for each note in the discussion', () => {
       createComponent();
diff --git a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
index 971e3987929..a9201b78669 100644
--- a/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
+++ b/spec/frontend/notes/components/discussion_reply_placeholder_spec.js
@@ -17,10 +17,6 @@ describe('ReplyPlaceholder', () => {
 
   const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits focus event on button click', async () => {
     createComponent({ options: { attachTo: document.body } });
 
diff --git a/spec/frontend/notes/components/discussion_resolve_button_spec.js b/spec/frontend/notes/components/discussion_resolve_button_spec.js
index 17c3523cf48..4bd21842fec 100644
--- a/spec/frontend/notes/components/discussion_resolve_button_spec.js
+++ b/spec/frontend/notes/components/discussion_resolve_button_spec.js
@@ -23,10 +23,6 @@ describe('resolveDiscussionButton', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should emit a onClick event on button click', async () => {
     const button = wrapper.findComponent(GlButton);
 
diff --git a/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
index a185f11ffaa..3dfae45ec49 100644
--- a/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
+++ b/spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js
@@ -15,10 +15,6 @@ describe('ResolveWithIssueButton', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should have a link with the provided link property as href', () => {
     const button = wrapper.findComponent(GlButton);
 
diff --git a/spec/frontend/notes/components/email_participants_warning_spec.js b/spec/frontend/notes/components/email_participants_warning_spec.js
index ab1a6b152a4..34b7524d8fb 100644
--- a/spec/frontend/notes/components/email_participants_warning_spec.js
+++ b/spec/frontend/notes/components/email_participants_warning_spec.js
@@ -4,11 +4,6 @@ import EmailParticipantsWarning from '~/notes/components/email_participants_warn
 describe('Email Participants Warning Component', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findMoreButton = () => wrapper.find('button');
 
   const createWrapper = (emails) => {
diff --git a/spec/frontend/notes/components/note_actions/reply_button_spec.js b/spec/frontend/notes/components/note_actions/reply_button_spec.js
index 20b32b8c178..68b11fb3b1a 100644
--- a/spec/frontend/notes/components/note_actions/reply_button_spec.js
+++ b/spec/frontend/notes/components/note_actions/reply_button_spec.js
@@ -9,11 +9,6 @@ describe('ReplyButton', () => {
     wrapper = shallowMount(ReplyButton);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('emits startReplying on click', () => {
     wrapper.findComponent(GlButton).vm.$emit('click');
 
diff --git a/spec/frontend/notes/components/note_actions/timeline_event_button_spec.js b/spec/frontend/notes/components/note_actions/timeline_event_button_spec.js
index 658e844a9b1..bee08ee0605 100644
--- a/spec/frontend/notes/components/note_actions/timeline_event_button_spec.js
+++ b/spec/frontend/notes/components/note_actions/timeline_event_button_spec.js
@@ -20,10 +20,6 @@ describe('NoteTimelineEventButton', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTimelineButton = () => wrapper.findComponent(GlButton);
 
   it('emits click-promote-comment-to-event', async () => {
diff --git a/spec/frontend/notes/components/note_actions_spec.js b/spec/frontend/notes/components/note_actions_spec.js
index 8630b7b7d07..63286927d53 100644
--- a/spec/frontend/notes/components/note_actions_spec.js
+++ b/spec/frontend/notes/components/note_actions_spec.js
@@ -77,7 +77,6 @@ describe('noteActions', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
@@ -203,7 +202,6 @@ describe('noteActions', () => {
     });
 
     afterEach(() => {
-      wrapper.destroy();
       axiosMock.restore();
     });
 
@@ -226,7 +224,6 @@ describe('noteActions', () => {
     });
 
     afterEach(() => {
-      wrapper.destroy();
       axiosMock.restore();
     });
 
@@ -248,10 +245,6 @@ describe('noteActions', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should not be possible to assign the comment author', testButtonDoesNotRender);
     it('should not be possible to unassign the comment author', testButtonDoesNotRender);
   });
diff --git a/spec/frontend/notes/components/note_attachment_spec.js b/spec/frontend/notes/components/note_attachment_spec.js
index 24632f8e427..7f44171f6cc 100644
--- a/spec/frontend/notes/components/note_attachment_spec.js
+++ b/spec/frontend/notes/components/note_attachment_spec.js
@@ -15,11 +15,6 @@ describe('Issue note attachment', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders attachment image if it is passed in attachment prop', () => {
     createComponent({
       image: 'test-image',
diff --git a/spec/frontend/notes/components/note_body_spec.js b/spec/frontend/notes/components/note_body_spec.js
index c71cf7666ab..b4f185004bb 100644
--- a/spec/frontend/notes/components/note_body_spec.js
+++ b/spec/frontend/notes/components/note_body_spec.js
@@ -49,10 +49,6 @@ describe('issue_note_body component', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render the note', () => {
     expect(wrapper.find('.note-text').html()).toContain(note.note_html);
   });
diff --git a/spec/frontend/notes/components/note_edited_text_spec.js b/spec/frontend/notes/components/note_edited_text_spec.js
index 0a5fe48ef94..577e1044588 100644
--- a/spec/frontend/notes/components/note_edited_text_spec.js
+++ b/spec/frontend/notes/components/note_edited_text_spec.js
@@ -1,3 +1,4 @@
+import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import NoteEditedText from '~/notes/components/note_edited_text.vue';
 
@@ -5,41 +6,63 @@ const propsData = {
   actionText: 'Edited',
   className: 'foo-bar',
   editedAt: '2017-08-04T09:52:31.062Z',
-  editedBy: {
-    avatar_url: 'path',
-    id: 1,
-    name: 'Root',
-    path: '/root',
-    state: 'active',
-    username: 'root',
-  },
+  editedBy: null,
 };
 
 describe('NoteEditedText', () => {
   let wrapper;
 
-  beforeEach(() => {
+  const createWrapper = (props = {}) => {
     wrapper = shallowMount(NoteEditedText, {
-      propsData,
+      propsData: {
+        ...propsData,
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
+      },
     });
-  });
+  };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findUserElement = () => wrapper.findComponent(GlLink);
 
-  it('should render block with provided className', () => {
-    expect(wrapper.classes()).toContain(propsData.className);
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
 
-  it('should render provided actionText', () => {
-    expect(wrapper.text().trim()).toContain(propsData.actionText);
+    it('should render block with provided className', () => {
+      expect(wrapper.classes()).toContain(propsData.className);
+    });
+
+    it('should render provided actionText', () => {
+      expect(wrapper.text().trim()).toContain(propsData.actionText);
+    });
+
+    it('should not render user information', () => {
+      expect(findUserElement().exists()).toBe(false);
+    });
   });
 
-  it('should render provided user information', () => {
-    const authorLink = wrapper.find('.js-user-link');
+  describe('edited note', () => {
+    const editedBy = {
+      avatar_url: 'path',
+      id: 1,
+      name: 'Root',
+      path: '/root',
+      state: 'active',
+      username: 'root',
+    };
+
+    beforeEach(() => {
+      createWrapper({ editedBy });
+    });
+
+    it('should render user information', () => {
+      const authorLink = findUserElement();
 
-    expect(authorLink.attributes('href')).toEqual(propsData.editedBy.path);
-    expect(authorLink.text().trim()).toEqual(propsData.editedBy.name);
+      expect(authorLink.attributes('href')).toEqual(editedBy.path);
+      expect(authorLink.text().trim()).toEqual(editedBy.name);
+    });
   });
 });
diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js
index 90473e7ccba..59362e18098 100644
--- a/spec/frontend/notes/components/note_form_spec.js
+++ b/spec/frontend/notes/components/note_form_spec.js
@@ -48,10 +48,6 @@ describe('issue_note_form component', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('noteHash', () => {
     beforeEach(() => {
       wrapper = createComponentWrapper();
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 56c22b09e1b..b3d6fab7f91 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -44,11 +44,6 @@ describe('NoteHeader component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('does not render discussion actions when includeToggle is false', () => {
     createComponent({
       includeToggle: false,
diff --git a/spec/frontend/notes/components/note_signed_out_widget_spec.js b/spec/frontend/notes/components/note_signed_out_widget_spec.js
index 84f20e4ad58..d56ee234cd9 100644
--- a/spec/frontend/notes/components/note_signed_out_widget_spec.js
+++ b/spec/frontend/notes/components/note_signed_out_widget_spec.js
@@ -12,10 +12,6 @@ describe('NoteSignedOutWidget component', () => {
     wrapper = shallowMount(NoteSignedOutWidget, { store });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders sign in link provided in the store', () => {
     expect(wrapper.find(`a[href="${notesDataMock.newSessionPath}"]`).text()).toBe('sign in');
   });
diff --git a/spec/frontend/notes/components/noteable_discussion_spec.js b/spec/frontend/notes/components/noteable_discussion_spec.js
index a90d8bdde06..ac0c037fe36 100644
--- a/spec/frontend/notes/components/noteable_discussion_spec.js
+++ b/spec/frontend/notes/components/noteable_discussion_spec.js
@@ -22,7 +22,6 @@ jest.mock('~/behaviors/markdown/render_gfm');
 describe('noteable_discussion component', () => {
   let store;
   let wrapper;
-  let originalGon;
 
   beforeEach(() => {
     window.mrTabs = {};
@@ -36,10 +35,6 @@ describe('noteable_discussion component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should not render thread header for non diff threads', () => {
     expect(wrapper.find('.discussion-header').exists()).toBe(false);
   });
@@ -167,16 +162,6 @@ describe('noteable_discussion component', () => {
   });
 
   describe('signout widget', () => {
-    beforeEach(() => {
-      originalGon = { ...window.gon };
-      window.gon = window.gon || {};
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-      window.gon = originalGon;
-    });
-
     describe('user is logged in', () => {
       beforeEach(() => {
         window.gon.current_user_id = userDataMock.id;
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index af1b4f64037..b158cfff10d 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -71,10 +71,6 @@ describe('issue_note', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('mutiline comments', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/notes/components/notes_activity_header_spec.js b/spec/frontend/notes/components/notes_activity_header_spec.js
index 5b3165bf401..2de491477b6 100644
--- a/spec/frontend/notes/components/notes_activity_header_spec.js
+++ b/spec/frontend/notes/components/notes_activity_header_spec.js
@@ -24,10 +24,6 @@ describe('~/notes/components/notes_activity_header.vue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/notes/components/notes_app_spec.js b/spec/frontend/notes/components/notes_app_spec.js
index b08a22f8674..832264aa7d3 100644
--- a/spec/frontend/notes/components/notes_app_spec.js
+++ b/spec/frontend/notes/components/notes_app_spec.js
@@ -90,8 +90,9 @@ describe('note_app', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
+    wrapper.destroy();
   });
 
   describe('render', () => {
diff --git a/spec/frontend/notes/components/toggle_replies_widget_spec.js b/spec/frontend/notes/components/toggle_replies_widget_spec.js
index 8c3696e88b7..ef5f06ad2fa 100644
--- a/spec/frontend/notes/components/toggle_replies_widget_spec.js
+++ b/spec/frontend/notes/components/toggle_replies_widget_spec.js
@@ -30,10 +30,6 @@ describe('toggle replies widget for notes', () => {
   const mountComponent = ({ collapsed = false }) =>
     mountExtended(ToggleRepliesWidget, { propsData: { replies, collapsed } });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('collapsed state', () => {
     beforeEach(() => {
       wrapper = mountComponent({ collapsed: true });
diff --git a/spec/frontend/notes/deprecated_notes_spec.js b/spec/frontend/notes/deprecated_notes_spec.js
index 6d3bc19bd45..40f10ca901b 100644
--- a/spec/frontend/notes/deprecated_notes_spec.js
+++ b/spec/frontend/notes/deprecated_notes_spec.js
@@ -23,7 +23,6 @@ const fixture = 'snippets/show.html';
 let mockAxios;
 
 window.project_uploads_path = `${TEST_HOST}/uploads`;
-window.gon = window.gon || {};
 window.gl = window.gl || {};
 gl.utils = gl.utils || {};
 gl.utils.disableButtonIfEmptyField = () => {};
diff --git a/spec/frontend/notes/stores/actions_spec.js b/spec/frontend/notes/stores/actions_spec.js
index c4c0dc58b0d..0d3ebea7af2 100644
--- a/spec/frontend/notes/stores/actions_spec.js
+++ b/spec/frontend/notes/stores/actions_spec.js
@@ -3,7 +3,7 @@ import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import Api from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import toast from '~/vue_shared/plugins/global_toast';
 import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants';
 import axios from '~/lib/utils/axios_utils';
@@ -36,7 +36,7 @@ import {
 
 const TEST_ERROR_MESSAGE = 'Test error message';
 const mockAlertDismiss = jest.fn();
-jest.mock('~/flash', () => ({
+jest.mock('~/alert', () => ({
   createAlert: jest.fn().mockImplementation(() => ({
     dismiss: mockAlertDismiss,
   })),
@@ -876,7 +876,7 @@ describe('Actions Notes Store', () => {
       const res = { errors: { base: ['something went wrong'] } };
       const error = { message: 'Unprocessable entity', response: { data: res } };
 
-      it('sets flash alert using errors.base message', async () => {
+      it('sets an alert using errors.base message', async () => {
         const resp = await actions.saveNote(
           {
             commit() {},
@@ -906,6 +906,20 @@ describe('Actions Notes Store', () => {
         expect(data).toBe(res);
         expect(createAlert).not.toHaveBeenCalled();
       });
+
+      it('dispatches clearDrafts is command names contains submit_review', async () => {
+        const response = { command_names: ['submit_review'], valid: true };
+        dispatch = jest.fn().mockResolvedValue(response);
+        await actions.saveNote(
+          {
+            commit() {},
+            dispatch,
+          },
+          payload,
+        );
+
+        expect(dispatch).toHaveBeenCalledWith('batchComments/clearDrafts');
+      });
     });
   });
 
@@ -946,7 +960,7 @@ describe('Actions Notes Store', () => {
       });
     });
 
-    it('when service fails, flashes error message', () => {
+    it('when service fails, creates an alert with error message', () => {
       const response = { response: { data: { message: TEST_ERROR_MESSAGE } } };
 
       Api.applySuggestion.mockReturnValue(Promise.reject(response));
@@ -1439,10 +1453,6 @@ describe('Actions Notes Store', () => {
   describe('fetchDiscussions', () => {
     const discussion = { notes: [] };
 
-    afterEach(() => {
-      window.gon = {};
-    });
-
     it('updates the discussions and dispatches `updateResolvableDiscussionsCounts`', () => {
       axiosMock.onAny().reply(HTTP_STATUS_OK, { discussion });
       return testAction(
diff --git a/spec/frontend/notifications/components/custom_notifications_modal_spec.js b/spec/frontend/notifications/components/custom_notifications_modal_spec.js
index 70749557e61..0fbd073191e 100644
--- a/spec/frontend/notifications/components/custom_notifications_modal_spec.js
+++ b/spec/frontend/notifications/components/custom_notifications_modal_spec.js
@@ -2,7 +2,6 @@ import { GlSprintf, GlModal, GlFormGroup, GlFormCheckbox, GlLoadingIcon } from '
 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
@@ -66,8 +65,6 @@ describe('CustomNotificationsModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mockAxios.restore();
   });
 
@@ -87,24 +84,23 @@ describe('CustomNotificationsModal', () => {
 
     describe('checkbox items', () => {
       beforeEach(async () => {
+        const endpointUrl = '/api/v4/notification_settings';
+
+        mockAxios
+          .onGet(endpointUrl)
+          .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.default);
+
         wrapper = createComponent();
 
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        wrapper.setData({
-          events: [
-            { id: 'new_release', enabled: true, name: 'New release', loading: false },
-            { id: 'new_note', enabled: false, name: 'New note', loading: true },
-          ],
-        });
+        wrapper.findComponent(GlModal).vm.$emit('show');
 
-        await nextTick();
+        await waitForPromises();
       });
 
       it.each`
         index | eventId          | eventName        | enabled  | loading
         ${0}  | ${'new_release'} | ${'New release'} | ${true}  | ${false}
-        ${1}  | ${'new_note'}    | ${'New note'}    | ${false} | ${true}
+        ${1}  | ${'new_note'}    | ${'New note'}    | ${false} | ${false}
       `(
         'renders a checkbox for "$eventName" with checked=$enabled',
         async ({ index, eventName, enabled, loading }) => {
@@ -214,16 +210,9 @@ describe('CustomNotificationsModal', () => {
 
           wrapper = createComponent({ injectedProperties });
 
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            events: [
-              { id: 'new_release', enabled: true, name: 'New release', loading: false },
-              { id: 'new_note', enabled: false, name: 'New note', loading: false },
-            ],
-          });
+          wrapper.findComponent(GlModal).vm.$emit('show');
 
-          await nextTick();
+          await waitForPromises();
 
           findCheckboxAt(1).vm.$emit('change', true);
 
@@ -241,19 +230,18 @@ describe('CustomNotificationsModal', () => {
       );
 
       it('shows a toast message when the request fails', async () => {
-        mockAxios.onPut('/api/v4/notification_settings').reply(HTTP_STATUS_NOT_FOUND, {});
+        const endpointUrl = '/api/v4/notification_settings';
+
+        mockAxios
+          .onGet(endpointUrl)
+          .reply(HTTP_STATUS_OK, mockNotificationSettingsResponses.default);
+
+        mockAxios.onPut(endpointUrl).reply(HTTP_STATUS_NOT_FOUND, {});
         wrapper = createComponent();
 
-        // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-        // eslint-disable-next-line no-restricted-syntax
-        wrapper.setData({
-          events: [
-            { id: 'new_release', enabled: true, name: 'New release', loading: false },
-            { id: 'new_note', enabled: false, name: 'New note', loading: false },
-          ],
-        });
+        wrapper.findComponent(GlModal).vm.$emit('show');
 
-        await nextTick();
+        await waitForPromises();
 
         findCheckboxAt(1).vm.$emit('change', true);
 
diff --git a/spec/frontend/notifications/components/notifications_dropdown_spec.js b/spec/frontend/notifications/components/notifications_dropdown_spec.js
index 0f13de0e6d8..bae9b028cf7 100644
--- a/spec/frontend/notifications/components/notifications_dropdown_spec.js
+++ b/spec/frontend/notifications/components/notifications_dropdown_spec.js
@@ -25,7 +25,7 @@ describe('NotificationsDropdown', () => {
         CustomNotificationsModal,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       provide: {
         dropdownItems: mockDropdownItems,
@@ -61,8 +61,6 @@ describe('NotificationsDropdown', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mockAxios.restore();
   });
 
diff --git a/spec/frontend/observability/index_spec.js b/spec/frontend/observability/index_spec.js
new file mode 100644
index 00000000000..83f72ff72b5
--- /dev/null
+++ b/spec/frontend/observability/index_spec.js
@@ -0,0 +1,64 @@
+import { createWrapper } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import renderObservability from '~/observability/index';
+import ObservabilityApp from '~/observability/components/observability_app.vue';
+import { SKELETON_VARIANTS_BY_ROUTE } from '~/observability/constants';
+
+describe('renderObservability', () => {
+  let element;
+  let vueInstance;
+  let component;
+
+  const OBSERVABILITY_ROUTES = Object.keys(SKELETON_VARIANTS_BY_ROUTE);
+  const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
+
+  beforeEach(() => {
+    element = document.createElement('div');
+    element.setAttribute('id', 'js-observability-app');
+    element.dataset.observabilityIframeSrc = 'https://observe.gitlab.com/';
+    document.body.appendChild(element);
+
+    vueInstance = renderObservability();
+    component = createWrapper(vueInstance).findComponent(ObservabilityApp);
+  });
+
+  afterEach(() => {
+    element.remove();
+  });
+
+  it('should return a Vue instance', () => {
+    expect(vueInstance).toEqual(expect.any(Vue));
+  });
+
+  it('should render the ObservabilityApp component', () => {
+    expect(component.props('observabilityIframeSrc')).toBe('https://observe.gitlab.com/');
+  });
+
+  describe('skeleton variant', () => {
+    it.each`
+      pathDescription        | path                       | variant
+      ${'dashboards'}        | ${OBSERVABILITY_ROUTES[0]} | ${SKELETON_VARIANTS[0]}
+      ${'explore'}           | ${OBSERVABILITY_ROUTES[1]} | ${SKELETON_VARIANTS[1]}
+      ${'manage dashboards'} | ${OBSERVABILITY_ROUTES[2]} | ${SKELETON_VARIANTS[2]}
+      ${'any other'}         | ${'unknown/route'}         | ${SKELETON_VARIANTS[0]}
+    `(
+      'renders the $variant skeleton variant for $pathDescription path',
+      async ({ path, variant }) => {
+        component.vm.$router.push(path);
+        await nextTick();
+
+        expect(component.props('skeletonVariant')).toBe(variant);
+      },
+    );
+  });
+
+  it('handle route-update events', async () => {
+    component.vm.$router.push('/something?foo=bar');
+    component.vm.$emit('route-update', { url: '/some_path' });
+    expect(component.vm.$router.currentRoute.path).toBe('/something');
+    expect(component.vm.$router.currentRoute.query).toEqual({
+      foo: 'bar',
+      observability_path: '/some_path',
+    });
+  });
+});
diff --git a/spec/frontend/observability/observability_app_spec.js b/spec/frontend/observability/observability_app_spec.js
index e3bcd140d60..4a9be71b880 100644
--- a/spec/frontend/observability/observability_app_spec.js
+++ b/spec/frontend/observability/observability_app_spec.js
@@ -1,19 +1,20 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ObservabilityApp from '~/observability/components/observability_app.vue';
 import ObservabilitySkeleton from '~/observability/components/skeleton/index.vue';
-
-import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '~/observability/constants';
+import {
+  MESSAGE_EVENT_TYPE,
+  INLINE_EMBED_DIMENSIONS,
+  FULL_APP_DIMENSIONS,
+  SKELETON_VARIANT_EMBED,
+} from '~/observability/constants';
 
 import { darkModeEnabled } from '~/lib/utils/color_utils';
 
 jest.mock('~/lib/utils/color_utils');
 
-describe('Observability root app', () => {
+describe('ObservabilityApp', () => {
   let wrapper;
-  const replace = jest.fn();
-  const $router = {
-    replace,
-  };
+
   const $route = {
     pathname: 'https://gitlab.com/gitlab-org/',
     path: 'https://gitlab.com/gitlab-org/-/observability/dashboards',
@@ -26,21 +27,19 @@ describe('Observability root app', () => {
 
   const TEST_IFRAME_SRC = 'https://observe.gitlab.com/9970/?groupId=14485840';
 
-  const OBSERVABILITY_ROUTES = Object.keys(SKELETON_VARIANTS_BY_ROUTE);
-
-  const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
+  const TEST_USERNAME = 'test-user';
 
-  const mountComponent = (route = $route) => {
+  const mountComponent = (props) => {
     wrapper = shallowMountExtended(ObservabilityApp, {
       propsData: {
         observabilityIframeSrc: TEST_IFRAME_SRC,
+        ...props,
       },
       stubs: {
         'observability-skeleton': ObservabilitySkeleton,
       },
       mocks: {
-        $router,
-        $route: route,
+        $route,
       },
     });
   };
@@ -48,17 +47,11 @@ describe('Observability root app', () => {
   const dispatchMessageEvent = (message) =>
     window.dispatchEvent(new MessageEvent('message', message));
 
-  afterEach(() => {
-    wrapper.destroy();
+  beforeEach(() => {
+    gon.current_username = TEST_USERNAME;
   });
 
   describe('iframe src', () => {
-    const TEST_USERNAME = 'test-user';
-
-    beforeAll(() => {
-      gon.current_username = TEST_USERNAME;
-    });
-
     it('should render an iframe with observabilityIframeSrc, decorated with light theme and username', () => {
       darkModeEnabled.mockReturnValueOnce(false);
       mountComponent();
@@ -92,48 +85,70 @@ describe('Observability root app', () => {
     });
   });
 
-  describe('on GOUI_ROUTE_UPDATE', () => {
-    it('should not call replace method from vue router if message event does not have url', () => {
-      mountComponent();
-      dispatchMessageEvent({
-        type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE,
-        payload: { data: 'some other data' },
+  describe('iframe kiosk query param', () => {
+    it('when inlineEmbed, it should set the proper kiosk query parameter', () => {
+      mountComponent({
+        inlineEmbed: true,
       });
-      expect(replace).not.toHaveBeenCalled();
+
+      const iframe = findIframe();
+
+      expect(iframe.attributes('src')).toBe(
+        `${TEST_IFRAME_SRC}&theme=light&username=${TEST_USERNAME}&kiosk=inline-embed`,
+      );
     });
+  });
 
-    it.each`
-      condition                                                  | origin                          | observability_path | url
-      ${'message origin is different from iframe source origin'} | ${'https://example.com'}        | ${'/'}             | ${'/explore'}
-      ${'path is same as before (observability_path)'}           | ${'https://observe.gitlab.com'} | ${'/foo?bar=test'} | ${'/foo?bar=test'}
-    `(
-      'should not call replace method from vue router if $condition',
-      async ({ origin, observability_path, url }) => {
-        mountComponent({ ...$route, query: { observability_path } });
-        dispatchMessageEvent({
-          data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url } },
-          origin,
-        });
-        expect(replace).not.toHaveBeenCalled();
-      },
-    );
+  describe('iframe size', () => {
+    it('should set the specified size', () => {
+      mountComponent({
+        height: INLINE_EMBED_DIMENSIONS.HEIGHT,
+        width: INLINE_EMBED_DIMENSIONS.WIDTH,
+      });
+
+      const iframe = findIframe();
+
+      expect(iframe.attributes('width')).toBe(INLINE_EMBED_DIMENSIONS.WIDTH);
+      expect(iframe.attributes('height')).toBe(INLINE_EMBED_DIMENSIONS.HEIGHT);
+    });
+
+    it('should fallback to default size', () => {
+      mountComponent({});
+
+      const iframe = findIframe();
 
-    it('should call replace method from vue router on message event callback', () => {
+      expect(iframe.attributes('width')).toBe(FULL_APP_DIMENSIONS.WIDTH);
+      expect(iframe.attributes('height')).toBe(FULL_APP_DIMENSIONS.HEIGHT);
+    });
+  });
+
+  describe('skeleton variant', () => {
+    it('sets the specified skeleton variant', () => {
+      mountComponent({ skeletonVariant: SKELETON_VARIANT_EMBED });
+      const props = wrapper.findComponent(ObservabilitySkeleton).props();
+
+      expect(props.variant).toBe(SKELETON_VARIANT_EMBED);
+    });
+
+    it('should have a default skeleton variant', () => {
+      mountComponent();
+      const props = wrapper.findComponent(ObservabilitySkeleton).props();
+
+      expect(props.variant).toBe('dashboards');
+    });
+  });
+
+  describe('on GOUI_ROUTE_UPDATE', () => {
+    it('should emit a route-update event', () => {
       mountComponent();
 
+      const payload = { url: '/explore' };
       dispatchMessageEvent({
-        data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
+        data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload },
         origin: 'https://observe.gitlab.com',
       });
 
-      expect(replace).toHaveBeenCalled();
-      expect(replace).toHaveBeenCalledWith({
-        name: 'https://gitlab.com/gitlab-org/',
-        query: {
-          otherQuery: 100,
-          observability_path: '/explore',
-        },
-      });
+      expect(wrapper.emitted('route-update')[0]).toEqual([payload]);
     });
   });
 
@@ -167,34 +182,17 @@ describe('Observability root app', () => {
     });
   });
 
-  describe('skeleton variant', () => {
-    it.each`
-      pathDescription        | path                       | variant
-      ${'dashboards'}        | ${OBSERVABILITY_ROUTES[0]} | ${SKELETON_VARIANTS[0]}
-      ${'explore'}           | ${OBSERVABILITY_ROUTES[1]} | ${SKELETON_VARIANTS[1]}
-      ${'manage dashboards'} | ${OBSERVABILITY_ROUTES[2]} | ${SKELETON_VARIANTS[2]}
-      ${'any other'}         | ${'unknown/route'}         | ${SKELETON_VARIANTS[0]}
-    `('renders the $variant skeleton variant for $pathDescription path', ({ path, variant }) => {
-      mountComponent({ ...$route, path });
-      const props = wrapper.findComponent(ObservabilitySkeleton).props();
-
-      expect(props.variant).toBe(variant);
-    });
-  });
-
-  describe('on observability ui unmount', () => {
-    it('should remove message event and should not call replace method from vue router', () => {
+  describe('on unmount', () => {
+    it('should not emit any even on route update', () => {
       mountComponent();
       wrapper.destroy();
 
-      // testing event cleanup logic, should not call on messege event after component is destroyed
-
       dispatchMessageEvent({
         data: { type: MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE, payload: { url: '/explore' } },
         origin: 'https://observe.gitlab.com',
       });
 
-      expect(replace).not.toHaveBeenCalled();
+      expect(wrapper.emitted('route-update')).toBeUndefined();
     });
   });
 });
diff --git a/spec/frontend/observability/skeleton_spec.js b/spec/frontend/observability/skeleton_spec.js
index a95597d8516..65dbb003743 100644
--- a/spec/frontend/observability/skeleton_spec.js
+++ b/spec/frontend/observability/skeleton_spec.js
@@ -6,8 +6,13 @@ import Skeleton from '~/observability/components/skeleton/index.vue';
 import DashboardsSkeleton from '~/observability/components/skeleton/dashboards.vue';
 import ExploreSkeleton from '~/observability/components/skeleton/explore.vue';
 import ManageSkeleton from '~/observability/components/skeleton/manage.vue';
+import EmbedSkeleton from '~/observability/components/skeleton/embed.vue';
 
-import { SKELETON_VARIANTS_BY_ROUTE, DEFAULT_TIMERS } from '~/observability/constants';
+import {
+  SKELETON_VARIANTS_BY_ROUTE,
+  DEFAULT_TIMERS,
+  SKELETON_VARIANT_EMBED,
+} from '~/observability/constants';
 
 describe('Skeleton component', () => {
   let wrapper;
@@ -22,6 +27,8 @@ describe('Skeleton component', () => {
 
   const findManageSkeleton = () => wrapper.findComponent(ManageSkeleton);
 
+  const findEmbedSkeleton = () => wrapper.findComponent(EmbedSkeleton);
+
   const findAlert = () => wrapper.findComponent(GlAlert);
 
   const mountComponent = ({ ...props } = {}) => {
@@ -97,16 +104,20 @@ describe('Skeleton component', () => {
       ${'dashboards'} | ${'variant is dashboards'}                        | ${SKELETON_VARIANTS[0]}
       ${'explore'}    | ${'variant is explore'}                           | ${SKELETON_VARIANTS[1]}
       ${'manage'}     | ${'variant is manage'}                            | ${SKELETON_VARIANTS[2]}
+      ${'embed'}      | ${'variant is embed'}                             | ${SKELETON_VARIANT_EMBED}
       ${'default'}    | ${'variant is not manage, dashboards or explore'} | ${'unknown'}
     `('should render $skeletonType skeleton if $condition', async ({ skeletonType, variant }) => {
       mountComponent({ variant });
       jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
       await nextTick();
-      const showsDefaultSkeleton = !SKELETON_VARIANTS.includes(variant);
+      const showsDefaultSkeleton = ![...SKELETON_VARIANTS, SKELETON_VARIANT_EMBED].includes(
+        variant,
+      );
 
       expect(findDashboardsSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[0]);
       expect(findExploreSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[1]);
       expect(findManageSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[2]);
+      expect(findEmbedSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANT_EMBED);
 
       expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(showsDefaultSkeleton);
     });
diff --git a/spec/frontend/operation_settings/components/metrics_settings_spec.js b/spec/frontend/operation_settings/components/metrics_settings_spec.js
index 732dfdd42fb..ee450dfc851 100644
--- a/spec/frontend/operation_settings/components/metrics_settings_spec.js
+++ b/spec/frontend/operation_settings/components/metrics_settings_spec.js
@@ -2,7 +2,7 @@ import { GlButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitla
 import { mount, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { timezones } from '~/monitoring/format_date';
@@ -13,7 +13,7 @@ import MetricsSettings from '~/operation_settings/components/metrics_settings.vu
 import store from '~/operation_settings/store';
 
 jest.mock('~/lib/utils/url_utility');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('operation settings external dashboard component', () => {
   let wrapper;
@@ -198,7 +198,7 @@ describe('operation settings external dashboard component', () => {
         expect(refreshCurrentPage).toHaveBeenCalled();
       });
 
-      it('creates flash banner on error', async () => {
+      it('creates alert banner on error', async () => {
         mountComponent(false);
         const message = 'mockErrorMessage';
         axios.patch.mockRejectedValue({ response: { data: { message } } });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js
index ff11c8843bb..8ba7e40d728 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_button_spec.js
@@ -27,11 +27,6 @@ describe('delete_button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('tooltip', () => {
     it('the title is controlled by tooltipTitle prop', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_image_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_image_spec.js
index 620c96e8c9e..5a7cbdcff5b 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_image_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/delete_image_spec.js
@@ -46,11 +46,6 @@ describe('Delete Image', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('executes apollo mutate on doDelete', () => {
     const mutate = jest.fn().mockResolvedValue({});
     mountComponent({ mutate });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js
index d45b993b5a2..9d187439ca3 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_alert_spec.js
@@ -19,11 +19,6 @@ describe('Delete alert', () => {
     wrapper = shallowMount(component, { stubs: { GlSprintf }, propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when deleteAlertType is null', () => {
     it('does not show the alert', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js
index 16c9485e69e..860f9b3a0c1 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/delete_modal_spec.js
@@ -30,15 +30,10 @@ describe('Delete Modal', () => {
   const expectPrimaryActionStatus = (disabled = true) =>
     expect(findModal().props('actionPrimary')).toMatchObject(
       expect.objectContaining({
-        attributes: [{ variant: 'danger' }, { disabled }],
+        attributes: { variant: 'danger', disabled },
       }),
     );
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('contains a GlModal', () => {
     mountComponent();
     expect(findModal().exists()).toBe(true);
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
index b37edac83f7..9e443234c34 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js
@@ -73,7 +73,7 @@ describe('Details Header', () => {
       apolloProvider,
       propsData,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       stubs: {
         TitleArea,
@@ -85,9 +85,7 @@ describe('Details Header', () => {
 
   afterEach(() => {
     // if we want to mix createMockApollo and manual mocks we need to reset everything
-    wrapper.destroy();
     apolloProvider = undefined;
-    wrapper = null;
   });
 
   describe('image name', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert_spec.js
index ce5ecfe4608..d6c1b2c3f51 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert_spec.js
@@ -23,11 +23,6 @@ describe('Partial Cleanup alert', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it(`gl-alert has the correct properties`, () => {
     mountComponent();
 
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/status_alert_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/status_alert_spec.js
index d83a5099bcd..3e1fd14475d 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/status_alert_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/status_alert_spec.js
@@ -27,11 +27,6 @@ describe('Status Alert', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     status              | title                                  | variant      | message                                  | link
     ${DELETE_SCHEDULED} | ${SCHEDULED_FOR_DELETION_STATUS_TITLE} | ${'info'}    | ${SCHEDULED_FOR_DELETION_STATUS_MESSAGE} | ${PACKAGE_DELETE_HELP_PAGE_PATH}
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js
index fa0d76762df..bfefe46c09b 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row_spec.js
@@ -50,16 +50,11 @@ describe('tags list row', () => {
       },
       propsData,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('checkbox', () => {
     it('exists', () => {
       mountComponent();
@@ -283,26 +278,30 @@ describe('tags list row', () => {
         textSrOnly: true,
         category: 'tertiary',
         right: true,
+        disabled: false,
       });
     });
 
-    it.each`
-      canDelete | digest   | disabled | buttonDisabled
-      ${true}   | ${null}  | ${true}  | ${true}
-      ${false}  | ${'foo'} | ${true}  | ${true}
-      ${false}  | ${null}  | ${true}  | ${true}
-      ${true}   | ${'foo'} | ${true}  | ${true}
-      ${true}   | ${'foo'} | ${false} | ${false}
-    `(
-      'is $visible that is visible when canDelete is $canDelete and digest is $digest and disabled is $disabled',
-      ({ canDelete, digest, disabled, buttonDisabled }) => {
-        mountComponent({ ...defaultProps, tag: { ...tag, canDelete, digest }, disabled });
+    it('has the correct classes', () => {
+      mountComponent();
 
-        expect(findAdditionalActionsMenu().props('disabled')).toBe(buttonDisabled);
-        expect(findAdditionalActionsMenu().classes('gl-opacity-0')).toBe(buttonDisabled);
-        expect(findAdditionalActionsMenu().classes('gl-pointer-events-none')).toBe(buttonDisabled);
-      },
-    );
+      expect(findAdditionalActionsMenu().classes('gl-opacity-0')).toBe(false);
+      expect(findAdditionalActionsMenu().classes('gl-pointer-events-none')).toBe(false);
+    });
+
+    it('is not rendered when tag.canDelete is false', () => {
+      mountComponent({ ...defaultProps, tag: { ...tag, canDelete: false } });
+
+      expect(findAdditionalActionsMenu().exists()).toBe(false);
+    });
+
+    it('is hidden when disabled prop is set to true', () => {
+      mountComponent({ ...defaultProps, disabled: true });
+
+      expect(findAdditionalActionsMenu().props('disabled')).toBe(true);
+      expect(findAdditionalActionsMenu().classes('gl-opacity-0')).toBe(true);
+      expect(findAdditionalActionsMenu().classes('gl-pointer-events-none')).toBe(true);
+    });
 
     describe('delete button', () => {
       it('exists and has the correct attrs', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
index 1017ff06a25..09d0370efbf 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js
@@ -68,15 +68,11 @@ describe('Tags List', () => {
     resolver = jest.fn().mockResolvedValue(imageTagsMock());
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('registry list', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mountComponent();
       fireFirstSortUpdate();
-      return waitForApolloRequestRender();
+      await waitForApolloRequestRender();
     });
 
     it('has a persisted search', () => {
@@ -98,6 +94,7 @@ describe('Tags List', () => {
         pagination: tagsPageInfo,
         items: tags,
         idProperty: 'name',
+        hiddenDelete: false,
       });
     });
 
@@ -186,12 +183,23 @@ describe('Tags List', () => {
     });
   });
 
+  describe('when user does not have permission to delete list rows', () => {
+    it('sets registry list hiddenDelete prop to true', async () => {
+      resolver = jest.fn().mockResolvedValue(imageTagsMock({ canDelete: false }));
+      mountComponent();
+      fireFirstSortUpdate();
+      await waitForApolloRequestRender();
+
+      expect(findRegistryList().props('hiddenDelete')).toBe(true);
+    });
+  });
+
   describe('when the list of tags is empty', () => {
-    beforeEach(() => {
-      resolver = jest.fn().mockResolvedValue(imageTagsMock([]));
+    beforeEach(async () => {
+      resolver = jest.fn().mockResolvedValue(imageTagsMock({ nodes: [] }));
       mountComponent();
       fireFirstSortUpdate();
-      return waitForApolloRequestRender();
+      await waitForApolloRequestRender();
     });
 
     it('does not show the loader', () => {
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
index 88e79c513bc..8896185ce67 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js
@@ -20,11 +20,6 @@ describe('TagsLoader component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('produces the correct amount of loaders', () => {
     mountComponent();
     expect(findGlSkeletonLoaders().length).toBe(1);
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
index 535faebdd4e..0d1d2c53cab 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js
@@ -36,10 +36,6 @@ describe('cleanup_status', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     status                | visible  | text
     ${UNFINISHED_STATUS}  | ${true}  | ${CLEANUP_STATUS_UNFINISHED}
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
index d2086943e4f..900ea61e4ea 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js
@@ -26,10 +26,6 @@ describe('Registry Group Empty state', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('to match the default snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
index 75068591007..7da9c7533a0 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,4 +1,4 @@
-import { GlIcon, GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
+import { GlSprintf, GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import { mockTracking } from 'helpers/tracking_helper';
@@ -49,16 +49,11 @@ describe('Image List Row', () => {
         config: {},
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('image title and path', () => {
     it('renders shortened name of image and contains a link to the details page', () => {
       mountComponent();
@@ -206,13 +201,6 @@ describe('Image List Row', () => {
       expect(findTagsCount().exists()).toBe(true);
     });
 
-    it('contains a tag icon', () => {
-      mountComponent();
-      const icon = findTagsCount().findComponent(GlIcon);
-      expect(icon.exists()).toBe(true);
-      expect(icon.props('name')).toBe('tag');
-    });
-
     describe('loading state', () => {
       it('shows a loader when metadataLoading is true', () => {
         mountComponent({ metadataLoading: true });
@@ -231,12 +219,12 @@ describe('Image List Row', () => {
       it('with one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 1 } });
 
-        expect(findTagsCount().text()).toMatchInterpolatedText('1 Tag');
+        expect(findTagsCount().text()).toMatchInterpolatedText('1 tag');
       });
       it('with more than one tag in the image', () => {
         mountComponent({ item: { ...item, tagsCount: 3 } });
 
-        expect(findTagsCount().text()).toMatchInterpolatedText('3 Tags');
+        expect(findTagsCount().text()).toMatchInterpolatedText('3 tags');
       });
     });
   });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js
index 042b8383571..6c771887b88 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/image_list_spec.js
@@ -21,11 +21,6 @@ describe('Image List', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('list', () => {
     it('contains one list element for each image', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
index 8cfa8128021..e4d13143484 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js
@@ -34,10 +34,6 @@ describe('Registry Project Empty state', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('to match the default snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
index bcc8e41fce8..45304cc2329 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js
@@ -35,11 +35,6 @@ describe('registry_header', () => {
     await nextTick();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('header', () => {
     it('has a title', () => {
       mountComponent({ metadataLoading: true });
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js b/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
index e5b99f15e8c..cd54b856c97 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/mock_data.js
@@ -177,11 +177,12 @@ export const tagsMock = [
   },
 ];
 
-export const imageTagsMock = (nodes = tagsMock) => ({
+export const imageTagsMock = ({ nodes = tagsMock, canDelete = true } = {}) => ({
   data: {
     containerRepository: {
       id: containerRepositoryMock.id,
       tagsCount: nodes.length,
+      canDelete,
       tags: {
         nodes,
         pageInfo: { ...tagsPageInfo },
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
index 26f0e506829..888c3e5bffa 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js
@@ -127,11 +127,6 @@ describe('Details Page', () => {
     jest.spyOn(Tracking, 'event');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when isLoading is true', () => {
     it('shows the loader', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
index 1e514d85e82..acc61157ab5 100644
--- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js
@@ -113,10 +113,6 @@ describe('List Page', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains registry header', async () => {
     mountComponent();
     fireFirstSortUpdate();
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
index 601f8abd34d..c2ae34ce697 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js
@@ -31,11 +31,6 @@ import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock
 const dummyApiVersion = 'v3000';
 const dummyGrouptId = 1;
 const dummyUrlRoot = '/gitlab';
-const dummyGon = {
-  api_version: dummyApiVersion,
-  relative_url_root: dummyUrlRoot,
-};
-let originalGon;
 const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/groups/${dummyGrouptId}/dependency_proxy/cache`;
 
 Vue.use(VueApollo);
@@ -89,16 +84,16 @@ describe('DependencyProxyApp', () => {
   beforeEach(() => {
     resolver = jest.fn().mockResolvedValue(proxyDetailsQuery());
 
-    originalGon = window.gon;
-    window.gon = { ...dummyGon };
+    window.gon = {
+      api_version: dummyApiVersion,
+      relative_url_root: dummyUrlRoot,
+    };
 
     mock = new MockAdapter(axios);
     mock.onDelete(expectedUrl).reply(HTTP_STATUS_ACCEPTED, {});
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    window.gon = originalGon;
     mock.restore();
   });
 
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js
index 2f415bfd6f9..639a4fbb99d 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_list_spec.js
@@ -25,10 +25,6 @@ describe('Manifests List', () => {
   const findRows = () => wrapper.findAllComponents(ManifestRow);
   const findPagination = () => wrapper.findComponent(GlKeysetPagination);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has the correct title', () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
index be3236d1f9c..ace5ce3a58d 100644
--- a/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
+++ b/spec/frontend/packages_and_registries/dependency_proxy/components/manifest_row_spec.js
@@ -29,10 +29,6 @@ describe('Manifest Row', () => {
   const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip);
   const findStatus = () => wrapper.findByTestId('status');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('With a manifest on the DEFAULT status', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_row_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_row_spec.js
index a2e5cbdce8b..1e9b9b1ce47 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_row_spec.js
@@ -63,10 +63,6 @@ describe('Harbor artifact list row', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('list item', () => {
     beforeEach(() => {
       mountComponent({
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_spec.js
index b9d6dc2679e..786a4715731 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/details/artifacts_list_spec.js
@@ -26,10 +26,6 @@ describe('Harbor artifacts list', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when isLoading is true', () => {
     beforeEach(() => {
       mountComponent({
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/details/details_header_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/details/details_header_spec.js
index e8cc2b2e22d..d8fb91c085c 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/details/details_header_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/details/details_header_spec.js
@@ -20,10 +20,6 @@ describe('Harbor Details Header', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('artifact name', () => {
     describe('missing image name', () => {
       beforeEach(() => {
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_header_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_header_spec.js
index 7a6169d300c..9a7ad759dba 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_header_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_header_spec.js
@@ -29,10 +29,6 @@ describe('harbor_list_header', () => {
     await nextTick();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('header', () => {
     it('has a title', () => {
       mountComponent({ metadataLoading: true });
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_row_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_row_spec.js
index b62d4e8836b..1e031e0557a 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_row_spec.js
@@ -28,10 +28,6 @@ describe('Harbor List Row', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('image title and path', () => {
     it('contains a link to the details page', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js
index e7e74a0da58..a1803ecf7fb 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/list/harbor_list_spec.js
@@ -20,10 +20,6 @@ describe('Harbor List', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('list', () => {
     it('contains one list element for each image', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_header_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_header_spec.js
index 5e299a269e3..9370ff1fdd4 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_header_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_header_spec.js
@@ -26,10 +26,6 @@ describe('Harbor Tags Header', () => {
     totalPages: 1,
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     mountComponent({
       propsData: { artifactDetail: mockArtifactDetail, pageInfo: mockPageInfo, tagsLoading: false },
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_row_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_row_spec.js
index 849215e286b..0b2ce01ebf6 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_row_spec.js
@@ -37,10 +37,6 @@ describe('Harbor tag list row', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('list item', () => {
     beforeEach(() => {
       mountComponent({
diff --git a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_spec.js
index 4c6b2b6daaa..e2a2a584b7d 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/components/tags/tags_list_spec.js
@@ -24,10 +24,6 @@ describe('Harbor Tags List', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when isLoading is true', () => {
     beforeEach(() => {
       mountComponent({
diff --git a/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js
index 69765d31674..90c3d9082f7 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/pages/details_spec.js
@@ -74,10 +74,6 @@ describe('Harbor Details Page', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when isLoading is true', () => {
     it('shows the loader', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js
index 97d30e6fe99..63ea8feb1e7 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/pages/list_spec.js
@@ -60,10 +60,6 @@ describe('Harbor List Page', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains harbor registry header', async () => {
     mountComponent();
     fireFirstSortUpdate();
diff --git a/spec/frontend/packages_and_registries/harbor_registry/pages/tags_spec.js b/spec/frontend/packages_and_registries/harbor_registry/pages/tags_spec.js
index 10901c6ec1e..6002faa1fa3 100644
--- a/spec/frontend/packages_and_registries/harbor_registry/pages/tags_spec.js
+++ b/spec/frontend/packages_and_registries/harbor_registry/pages/tags_spec.js
@@ -60,10 +60,6 @@ describe('Harbor Tags page', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains tags header', () => {
     mountComponent();
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
index e74375b7705..f8130287c12 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js
@@ -86,10 +86,6 @@ describe('PackagesApp', () => {
   const findTerraformInstallation = () => wrapper.findComponent(TerraformInstallation);
   const findPackageFiles = () => wrapper.findComponent(PackageFiles);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the app and displays the package title', async () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
index b504f7489ab..148e87699f1 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js
@@ -39,10 +39,6 @@ describe('PackageTitle', () => {
   const pipelineProject = () => wrapper.find('[data-testid="pipeline-project"]');
   const packageRef = () => wrapper.find('[data-testid="package-ref"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('module title', () => {
     it('is correctly bound', async () => {
       await createComponent();
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/file_sha_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/file_sha_spec.js
index d7caa8ca2d8..7352afff051 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/file_sha_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/file_sha_spec.js
@@ -23,10 +23,6 @@ describe('FileSha', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_files_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_files_spec.js
index b76d7c2b57b..c3e0818fc11 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_files_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_files_spec.js
@@ -37,11 +37,6 @@ describe('Package Files', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('rows', () => {
     it('renders a single file for an npm package', () => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_history_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_history_spec.js
index 0cbe2755f7e..a650aba464e 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_history_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/package_history_spec.js
@@ -30,11 +30,6 @@ describe('Package History', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findHistoryElement = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findElementLink = (container) => container.findComponent(GlLink);
   const findElementTimeAgo = (container) => container.findComponent(TimeAgoTooltip);
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
index 78c1b840dbc..94797f01d16 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js
@@ -30,10 +30,6 @@ describe('TerraformInstallation', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
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 bb970336b94..ea4d268d84e 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 { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from '~/packages_and_registries/infrastructure_registry/details/constants';
 import {
   fetchPackageVersions,
@@ -15,7 +15,7 @@ import {
 } from '~/packages_and_registries/shared/constants';
 import { npmPackage as packageEntity } from '../../mock_data';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 jest.mock('~/api.js');
 
 describe('Actions Package details store', () => {
@@ -53,7 +53,7 @@ describe('Actions Package details store', () => {
       expect(Api.projectPackage).toHaveBeenCalledWith(packageEntity.project_id, packageEntity.id);
     });
 
-    it('should create flash on API error', async () => {
+    it('should create alert on API error', async () => {
       Api.projectPackage = jest.fn().mockRejectedValue();
 
       await testAction(
@@ -83,7 +83,7 @@ describe('Actions Package details store', () => {
         packageEntity.id,
       );
     });
-    it('should create flash on API error', async () => {
+    it('should create alert on API error', async () => {
       Api.deleteProjectPackage = jest.fn().mockRejectedValue();
 
       await testAction(deletePackage, undefined, { packageEntity }, [], []);
@@ -118,7 +118,7 @@ describe('Actions Package details store', () => {
       });
     });
 
-    it('should create flash on API error', async () => {
+    it('should create alert on API error', async () => {
       Api.deleteProjectPackageFile = jest.fn().mockRejectedValue();
       await testAction(deletePackageFile, fileId, { packageEntity }, [], []);
       expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
index 801cde8582e..d0841c6110f 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap
@@ -49,9 +49,7 @@ exports[`packages_list_app renders 1`] = `
             Learn how to 
             <b-link-stub
               class="gl-link"
-              event="click"
               href="helpUrl"
-              routertag="a"
               target="_blank"
             >
               publish and share your packages
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
index a086c20a5e7..a89247c0a97 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js
@@ -55,11 +55,6 @@ describe('Infrastructure Search', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('has a registry search component', () => {
     mountComponent();
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
index aca6b0942cc..7c7faa8a3b0 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
@@ -22,11 +22,6 @@ describe('Infrastructure Title', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('title area', () => {
     beforeEach(() => {
       mountComponent();
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 d237023d0cd..47d36d11e35 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 { createAlert, VARIANT_INFO } from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/alert';
 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';
@@ -14,7 +14,7 @@ import InfrastructureSearch from '~/packages_and_registries/infrastructure_regis
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
 
 jest.mock('~/lib/utils/common_utils');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(Vuex);
 
@@ -72,10 +72,6 @@ describe('packages_list_app', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     createStore({ packageCount: 1 });
     mountComponent();
@@ -217,7 +213,7 @@ describe('packages_list_app', () => {
       setWindowLocation(originalLocation);
     });
 
-    it(`creates a flash if the query string contains ${SHOW_DELETE_SUCCESS_ALERT}`, () => {
+    it(`creates an alert if the query string contains ${SHOW_DELETE_SUCCESS_ALERT}`, () => {
       mountComponent();
 
       expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
index 0164d92ce34..51445942eaa 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js
@@ -4,13 +4,13 @@ import Vue from 'vue';
 import { last } from 'lodash';
 import Vuex from 'vuex';
 import stubChildren from 'helpers/stub_children';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import PackagesList from '~/packages_and_registries/infrastructure_registry/list/components/packages_list.vue';
 import PackagesListRow from '~/packages_and_registries/infrastructure_registry/shared/package_list_row.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 import { TRACKING_ACTIONS } from '~/packages_and_registries/shared/constants';
 import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registry/shared/constants';
-import Tracking from '~/tracking';
 import { packageList } from '../../mock_data';
 
 Vue.use(Vuex);
@@ -72,11 +72,6 @@ describe('packages_list', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when is loading', () => {
     beforeEach(() => {
       mountComponent({
@@ -179,23 +174,23 @@ describe('packages_list', () => {
   });
 
   describe('tracking', () => {
-    let eventSpy;
+    let trackingSpy = null;
 
     beforeEach(() => {
       mountComponent();
-      eventSpy = jest.spyOn(Tracking, 'event');
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ itemToBeDeleted: { package_type: 'conan' } });
-    });
-
-    it('deleteItemConfirmation calls event', () => {
-      wrapper.vm.deleteItemConfirmation();
-      expect(eventSpy).toHaveBeenCalledWith(
-        TRACK_CATEGORY,
-        TRACKING_ACTIONS.DELETE_PACKAGE,
-        expect.any(Object),
-      );
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('deleteItemConfirmation calls event', async () => {
+      await findPackageListDeleteModal().vm.$emit('ok');
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACK_CATEGORY, TRACKING_ACTIONS.DELETE_PACKAGE, {
+        category: TRACK_CATEGORY,
+      });
     });
   });
 });
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 2c185e040f4..4f051264172 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,14 +2,14 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 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';
 import { DELETE_PACKAGE_ERROR_MESSAGE } from '~/packages_and_registries/shared/constants';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 jest.mock('~/api.js');
 
 describe('Actions Package list store', () => {
@@ -96,7 +96,7 @@ describe('Actions Package list store', () => {
       });
     });
 
-    it('should create flash on API error', async () => {
+    it('should create alert on API error', async () => {
       Api.projectPackages = jest.fn().mockRejectedValue();
       await testAction(
         actions.requestPackagesList,
@@ -198,7 +198,7 @@ describe('Actions Package list store', () => {
       );
     });
 
-    it('should stop the loading and call create flash on api error', async () => {
+    it('should stop the loading and call create alert on api error', async () => {
       mock.onDelete(payload._links.delete_api_path).replyOnce(HTTP_STATUS_BAD_REQUEST);
       await testAction(
         actions.requestDeletePackage,
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
index 721bdd34a4f..37ca420ae77 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js
@@ -49,16 +49,11 @@ describe('packages_list_row', () => {
         disableDelete,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders', () => {
     mountComponent();
     expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/delete_modal_spec.js b/spec/frontend/packages_and_registries/package_registry/components/delete_modal_spec.js
index 9c1ebf5a2eb..d0817a8678e 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/delete_modal_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/delete_modal_spec.js
@@ -45,7 +45,7 @@ describe('DeleteModal', () => {
   it('passes actionPrimary prop', () => {
     expect(findModal().props('actionPrimary')).toStrictEqual({
       text: 'Permanently delete',
-      attributes: [{ variant: 'danger' }, { category: 'primary' }],
+      attributes: { variant: 'danger', category: 'primary' },
     });
   });
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap
index 67f1906f6fd..9b429c39faa 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/maven_installation_spec.js.snap
@@ -89,8 +89,9 @@ exports[`MavenInstallation maven renders all the messages 1`] = `
   />
    
   <code-instruction-stub
+    class="gl-w-20 gl-mt-5"
     copytext="Copy Maven command"
-    instruction="mvn dependency:get -Dartifact=appGroup:appName:appVersion"
+    instruction="mvn install"
     label="Maven Command"
     trackingaction="copy_maven_command"
     trackinglabel="code_instruction"
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
index b2375da7b11..5d390730ef1 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/pypi_installation_spec.js.snap
@@ -20,7 +20,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
         <!---->
         <button
           aria-expanded="false"
-          aria-haspopup="true"
+          aria-haspopup="menu"
           class="btn dropdown-toggle btn-default btn-md gl-button gl-dropdown-toggle"
           id="__BVID__27__BV_toggle_"
           type="button"
@@ -59,7 +59,6 @@ exports[`PypiInstallation renders all the messages 1`] = `
   </div>
    
   <fieldset
-    aria-describedby="installation-pip-command-group__BV_description_"
     class="form-group gl-form-group"
     id="installation-pip-command-group"
   >
@@ -75,12 +74,7 @@ exports[`PypiInstallation renders all the messages 1`] = `
        
       <!---->
     </legend>
-    <div
-      aria-labelledby="installation-pip-command-group__BV_label_"
-      class="bv-no-focus-ring"
-      role="group"
-      tabindex="-1"
-    >
+    <div>
       <div
         data-testid="pip-command"
         id="installation-pip-command"
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
index 4f3d780b149..2e59c27cc1b 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/additional_metadata_spec.js
@@ -65,11 +65,6 @@ describe('Package Additional metadata', () => {
     jest.spyOn(Sentry, 'captureException').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findTitle = () => wrapper.findByTestId('title');
   const findMainArea = () => wrapper.findByTestId('main');
   const findComponentIs = () => wrapper.findByTestId('component-is');
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js
index 0aba8f7efc7..a6298ebdea7 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/composer_installation_spec.js
@@ -34,10 +34,6 @@ describe('ComposerInstallation', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('install command switch', () => {
     it('has the installation title component', () => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js
index bf9425def9a..70534b1d0a6 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/conan_installation_spec.js
@@ -33,10 +33,6 @@ describe('ConanInstallation', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/dependency_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/dependency_row_spec.js
index 9aed5b90c73..19aedf120b2 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/dependency_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/dependency_row_spec.js
@@ -19,10 +19,6 @@ describe('DependencyRow', () => {
   const dependencyVersion = () => wrapper.findByTestId('version-pattern');
   const dependencyFramework = () => wrapper.findByTestId('target-framework');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('renders', () => {
     it('full dependency', () => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js
index feed7a7c46c..a9428773a60 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/file_sha_spec.js
@@ -23,10 +23,6 @@ describe('FileSha', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/installation_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/installation_title_spec.js
index 5fe795f768e..a2d30be13c2 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/installation_title_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/installation_title_spec.js
@@ -20,10 +20,6 @@ describe('InstallationTitle', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a title', () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js
index 8bb05b00e65..d35d95e319f 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/installations_commands_spec.js
@@ -40,10 +40,6 @@ describe('InstallationCommands', () => {
   const pypiInstallation = () => wrapper.findComponent(PypiInstallation);
   const composerInstallation = () => wrapper.findComponent(ComposerInstallation);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('installation instructions', () => {
     describe.each`
       packageEntity      | selector
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js
index fc60039db30..5ea81dccf7d 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/maven_installation_spec.js
@@ -35,7 +35,7 @@ describe('MavenInstallation', () => {
   <artifactId>appName</artifactId>
   <version>appVersion</version>
 </dependency>`;
-  const mavenCommandStr = 'mvn dependency:get -Dartifact=appGroup:appName:appVersion';
+  const mavenCommandStr = 'mvn install';
   const mavenSetupXml = `<repositories>
   <repository>
     <id>gitlab-maven</id>
@@ -79,10 +79,6 @@ describe('MavenInstallation', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('install command switch', () => {
     it('has the installation title component', () => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js
index bb6846d354f..f2f3b8507c3 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/composer_spec.js
@@ -18,11 +18,6 @@ describe('Composer Metadata', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findComposerTargetSha = () => wrapper.findByTestId('composer-target-sha');
   const findComposerTargetShaCopyButton = () => wrapper.findComponent(ClipboardButton);
   const findComposerJson = () => wrapper.findByTestId('composer-json');
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js
index e7e47401aa1..2832dc3a712 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/conan_spec.js
@@ -19,11 +19,6 @@ describe('Conan Metadata', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findConanRecipe = () => wrapper.findByTestId('conan-recipe');
 
   beforeEach(() => {
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js
index 8680d983042..7b253a26fc7 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/maven_spec.js
@@ -19,11 +19,6 @@ describe('Maven Metadata', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findMavenApp = () => wrapper.findByTestId('maven-app');
   const findMavenGroup = () => wrapper.findByTestId('maven-group');
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js
index af3692023f0..9fb467f9af1 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/nuget_spec.js
@@ -19,11 +19,6 @@ describe('Nuget Metadata', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findNugetSource = () => wrapper.findByTestId('nuget-source');
   const findNugetLicense = () => wrapper.findByTestId('nuget-license');
   const findElementLink = (container) => container.findComponent(GlLink);
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js
index d7c6ea8379d..67f5fbc9e80 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/metadata/pypi_spec.js
@@ -20,11 +20,6 @@ describe('Package Additional Metadata', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findPypiRequiredPython = () => wrapper.findByTestId('pypi-required-python');
 
   beforeEach(() => {
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js
index 8c0e2d948ca..e711f9ee45d 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/npm_installation_spec.js
@@ -51,10 +51,6 @@ describe('NpmInstallation', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js
index 9449c40c7c6..bcc0b78bfce 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/nuget_installation_spec.js
@@ -36,10 +36,6 @@ describe('NugetInstallation', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders all the messages', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js
index 529a6a22ddf..1dcac017ccf 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_files_spec.js
@@ -48,10 +48,6 @@ describe('Package Files', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rows', () => {
     it('renders a single file for an npm package', () => {
       createComponent();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js
index bb2fa9eb6f5..ed470f63b8a 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_history_spec.js
@@ -63,11 +63,6 @@ describe('Package History', () => {
     jest.spyOn(Sentry, 'captureException').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findPackageHistoryLoader = () => wrapper.findComponent(PackageHistoryLoader);
   const findHistoryElement = (testId) => wrapper.findByTestId(testId);
   const findElementLink = (container) => container.findComponent(GlLink);
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
index 1fda77f2aaa..ba21cdaca3b 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
@@ -38,7 +38,7 @@ describe('PackageTitle', () => {
       },
       provide,
       directives: {
-        GlResizeObserver: createMockDirective(),
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
       },
     });
     await nextTick();
@@ -55,10 +55,6 @@ describe('PackageTitle', () => {
   const findSubHeaderText = () => wrapper.findByTestId('sub-header');
   const findSubHeaderTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('renders', () => {
     it('without tags', async () => {
       await createComponent({ ...packageData(), packageFiles: { nodes: packageFiles() } });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
index 27c0ab96cfc..fc7f5c80d45 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_versions_list_spec.js
@@ -1,14 +1,18 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
 import DeleteModal from '~/packages_and_registries/package_registry/components/delete_modal.vue';
+import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue';
 import PackageVersionsList from '~/packages_and_registries/package_registry/components/details/package_versions_list.vue';
 import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
 import VersionRow from '~/packages_and_registries/package_registry/components/details/version_row.vue';
 import Tracking from '~/tracking';
 import {
+  CANCEL_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   CANCEL_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
+  DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
+  REQUEST_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
   REQUEST_DELETE_PACKAGE_VERSIONS_TRACKING_ACTION,
 } from '~/packages_and_registries/package_registry/constants';
 import { packageData } from '../../mock_data';
@@ -22,7 +26,7 @@ describe('PackageVersionsList', () => {
       name: 'version 1',
     }),
     packageData({
-      id: `gid://gitlab/Packages::Package/112`,
+      id: 'gid://gitlab/Packages::Package/112',
       name: 'version 2',
     }),
   ];
@@ -31,8 +35,10 @@ describe('PackageVersionsList', () => {
     findLoader: () => wrapper.findComponent(PackagesListLoader),
     findRegistryList: () => wrapper.findComponent(RegistryList),
     findEmptySlot: () => wrapper.findComponent(EmptySlotStub),
-    findListRow: () => wrapper.findAllComponents(VersionRow),
+    findListRow: () => wrapper.findComponent(VersionRow),
+    findAllListRow: () => wrapper.findAllComponents(VersionRow),
     findDeletePackagesModal: () => wrapper.findComponent(DeleteModal),
+    findPackageListDeleteModal: () => wrapper.findComponent(DeletePackageModal),
   };
   const mountComponent = (props) => {
     wrapper = shallowMountExtended(PackageVersionsList, {
@@ -118,16 +124,16 @@ describe('PackageVersionsList', () => {
     });
 
     it('displays package version rows', () => {
-      expect(uiElements.findListRow().exists()).toEqual(true);
-      expect(uiElements.findListRow()).toHaveLength(packageList.length);
+      expect(uiElements.findAllListRow().exists()).toEqual(true);
+      expect(uiElements.findAllListRow()).toHaveLength(packageList.length);
     });
 
     it('binds the correct props', () => {
-      expect(uiElements.findListRow().at(0).props()).toMatchObject({
+      expect(uiElements.findAllListRow().at(0).props()).toMatchObject({
         packageEntity: expect.objectContaining(packageList[0]),
       });
 
-      expect(uiElements.findListRow().at(1).props()).toMatchObject({
+      expect(uiElements.findAllListRow().at(1).props()).toMatchObject({
         packageEntity: expect.objectContaining(packageList[1]),
       });
     });
@@ -159,6 +165,68 @@ describe('PackageVersionsList', () => {
     });
   });
 
+  describe.each`
+    description                                                               | finderFunction                 | deletePayload
+    ${'when the user can destroy the package'}                                | ${uiElements.findListRow}      | ${packageList[0]}
+    ${'when the user can bulk destroy packages and deletes only one package'} | ${uiElements.findRegistryList} | ${[packageList[0]]}
+  `('$description', ({ finderFunction, deletePayload }) => {
+    let eventSpy;
+    const category = 'UI::NpmPackages';
+    const { findPackageListDeleteModal } = uiElements;
+
+    beforeEach(() => {
+      eventSpy = jest.spyOn(Tracking, 'event');
+      mountComponent({ canDestroy: true });
+      finderFunction().vm.$emit('delete', deletePayload);
+    });
+
+    it('passes itemToBeDeleted to the modal', () => {
+      expect(findPackageListDeleteModal().props('itemToBeDeleted')).toStrictEqual(packageList[0]);
+    });
+
+    it('requesting delete tracks the right action', () => {
+      expect(eventSpy).toHaveBeenCalledWith(
+        category,
+        REQUEST_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
+        expect.any(Object),
+      );
+    });
+
+    describe('when modal confirms', () => {
+      beforeEach(() => {
+        findPackageListDeleteModal().vm.$emit('ok');
+      });
+
+      it('emits delete when modal confirms', () => {
+        expect(wrapper.emitted('delete')[0][0]).toEqual([packageList[0]]);
+      });
+
+      it('tracks the right action', () => {
+        expect(eventSpy).toHaveBeenCalledWith(
+          category,
+          DELETE_PACKAGE_VERSION_TRACKING_ACTION,
+          expect.any(Object),
+        );
+      });
+    });
+
+    it.each(['ok', 'cancel'])('resets itemToBeDeleted when modal emits %s', async (event) => {
+      await findPackageListDeleteModal().vm.$emit(event);
+
+      expect(findPackageListDeleteModal().props('itemToBeDeleted')).toBeNull();
+    });
+
+    it('canceling delete tracks the right action', () => {
+      findPackageListDeleteModal().vm.$emit('cancel');
+
+      expect(eventSpy).toHaveBeenCalledWith(
+        category,
+        CANCEL_DELETE_PACKAGE_VERSION_TRACKING_ACTION,
+        expect.any(Object),
+      );
+    });
+  });
+
   describe('when the user can bulk destroy versions', () => {
     let eventSpy;
     const { findDeletePackagesModal, findRegistryList } = uiElements;
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
index 4a27f8011df..3f4358bb3b0 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/pypi_installation_spec.js
@@ -29,10 +29,13 @@ password = <your personal access token>`;
   const findInstallationTitle = () => wrapper.findComponent(InstallationTitle);
   const findSetupDocsLink = () => wrapper.findByTestId('pypi-docs-link');
 
-  function createComponent() {
+  function createComponent(props = {}) {
     wrapper = mountExtended(PypiInstallation, {
       propsData: {
-        packageEntity,
+        packageEntity: {
+          ...packageEntity,
+          ...props,
+        },
       },
       stubs: {
         GlSprintf,
@@ -44,10 +47,6 @@ password = <your personal access token>`;
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('install command switch', () => {
     it('has the installation title component', () => {
       expect(findInstallationTitle().exists()).toBe(true);
@@ -86,6 +85,12 @@ password = <your personal access token>`;
       });
     });
 
+    it('does not have a link to personal access token docs when package is public', () => {
+      createComponent({ publicPackage: true });
+
+      expect(findAccessTokenLink().exists()).toBe(false);
+    });
+
     it('has a link to the docs', () => {
       expect(findSetupDocsLink().attributes()).toMatchObject({
         href: PYPI_HELP_PATH,
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
index 67340822fa5..f7c8e909ff6 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/version_row_spec.js
@@ -1,4 +1,4 @@
-import { GlFormCheckbox, GlIcon, GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
+import { GlDropdownItem, GlFormCheckbox, GlIcon, GlLink, GlSprintf, GlTruncate } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
@@ -24,6 +24,7 @@ describe('VersionRow', () => {
   const findPackageName = () => wrapper.findComponent(GlTruncate);
   const findWarningIcon = () => wrapper.findComponent(GlIcon);
   const findBulkDeleteAction = () => wrapper.findComponent(GlFormCheckbox);
+  const findDeleteDropdownItem = () => wrapper.findComponent(GlDropdownItem);
 
   function createComponent({ packageEntity = packageVersion, selected = false } = {}) {
     wrapper = shallowMountExtended(VersionRow, {
@@ -36,15 +37,11 @@ describe('VersionRow', () => {
         GlTruncate,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a link to the version detail', () => {
     createComponent();
 
@@ -112,6 +109,31 @@ describe('VersionRow', () => {
     });
   });
 
+  describe('delete button', () => {
+    it('does not exist when package cannot be destroyed', () => {
+      createComponent({ packageEntity: { ...packageVersion, canDestroy: false } });
+
+      expect(findDeleteDropdownItem().exists()).toBe(false);
+    });
+
+    it('exists and has the correct props', () => {
+      createComponent();
+
+      expect(findDeleteDropdownItem().exists()).toBe(true);
+      expect(findDeleteDropdownItem().attributes()).toMatchObject({
+        variant: 'danger',
+      });
+    });
+
+    it('emits the delete event when the delete button is clicked', () => {
+      createComponent();
+
+      findDeleteDropdownItem().vm.$emit('click');
+
+      expect(wrapper.emitted('delete')).toHaveLength(1);
+    });
+  });
+
   describe(`when the package is in ${PACKAGE_ERROR_STATUS} status`, () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_packages_spec.js b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_packages_spec.js
index 689b53fa2a4..04546c4cea4 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_packages_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_packages_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 { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/alert';
 import DeletePackages from '~/packages_and_registries/package_registry/components/functional/delete_packages.vue';
 
 import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql';
@@ -14,7 +14,7 @@ import {
   packagesListQuery,
 } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('DeletePackages', () => {
   let wrapper;
@@ -67,10 +67,6 @@ describe('DeletePackages', () => {
     mutationResolver = jest.fn().mockResolvedValue(packagesDestroyMutation());
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('binds deletePackages method to the default slot', () => {
     createComponent();
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
index 2a78cfb13f9..91417d2fc9f 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js
@@ -1,5 +1,5 @@
 import { GlFormCheckbox, GlSprintf, GlTruncate } from '@gitlab/ui';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -67,15 +67,11 @@ describe('packages_list_row', () => {
         selected,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     mountComponent();
     expect(wrapper.element).toMatchSnapshot();
@@ -141,7 +137,6 @@ describe('packages_list_row', () => {
 
       findDeleteDropdown().vm.$emit('click');
 
-      await nextTick();
       expect(wrapper.emitted('delete')).toHaveLength(1);
     });
   });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js
index 610640e0ca3..ae990f3ea00 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js
@@ -73,10 +73,6 @@ describe('packages_list', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when is loading', () => {
     beforeEach(() => {
       mountComponent({ isLoading: true });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
index a884959ab62..1250ecaf61f 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js
@@ -46,10 +46,6 @@ describe('Package Search', () => {
     extractFilterAndSorting.mockReturnValue(defaultQueryParamsMock);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a registry search component', async () => {
     mountComponent();
 
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_title_spec.js
index b47515e15c3..1296458155a 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_title_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_title_spec.js
@@ -20,11 +20,6 @@ describe('PackageTitle', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('title area', () => {
     it('exists', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/publish_method_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/publish_method_spec.js
index fcbd7cc6a50..e9119b736c2 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/publish_method_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/publish_method_spec.js
@@ -19,10 +19,6 @@ describe('publish_method', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders', () => {
     mountComponent();
     expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/tokens/package_type_token_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/tokens/package_type_token_spec.js
index 8f3c8667c47..c98f5f32344 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/tokens/package_type_token_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/tokens/package_type_token_spec.js
@@ -19,11 +19,6 @@ describe('packages_filter', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('binds all of his attrs to filtered search token', () => {
     mountComponent({ attrs: { foo: 'bar' } });
 
diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js
index d897be1f344..19c098e1f82 100644
--- a/spec/frontend/packages_and_registries/package_registry/mock_data.js
+++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js
@@ -147,6 +147,7 @@ export const packageData = (extend) => ({
   conanUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/conan',
   pypiUrl:
     'http://__token__:<your_personal_token>@gdk.test:3000/api/v4/projects/1/packages/pypi/simple',
+  publicPackage: false,
   pypiSetupUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/pypi',
   ...extend,
 });
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 b494965a3cb..49f69a46395 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import PackagesApp from '~/packages_and_registries/package_registry/pages/details.vue';
@@ -45,7 +45,7 @@ import {
   pagination,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 useMockLocationHelper();
 
 describe('PackagesApp', () => {
@@ -131,10 +131,6 @@ describe('PackagesApp', () => {
   const findDeletePackageModal = () => wrapper.findAllComponents(DeletePackages).at(1);
   const findDeletePackages = () => wrapper.findComponent(DeletePackages);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders an empty state component', async () => {
     createComponent({ resolver: jest.fn().mockResolvedValue(emptyPackageDetailsQuery) });
 
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
index a2ec527ce12..60bb055b1db 100644
--- a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js
@@ -4,14 +4,13 @@ import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import ListPage from '~/packages_and_registries/package_registry/pages/list.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/list/package_title.vue';
 import PackageSearch from '~/packages_and_registries/package_registry/components/list/package_search.vue';
 import OriginalPackageList from '~/packages_and_registries/package_registry/components/list/packages_list.vue';
 import DeletePackages from '~/packages_and_registries/package_registry/components/functional/delete_packages.vue';
 import {
-  PROJECT_RESOURCE_TYPE,
-  GROUP_RESOURCE_TYPE,
   GRAPHQL_PAGE_SIZE,
   EMPTY_LIST_HELP_URL,
   PACKAGE_HELP_URL,
@@ -21,7 +20,7 @@ import getPackagesQuery from '~/packages_and_registries/package_registry/graphql
 import destroyPackagesMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_packages.mutation.graphql';
 import { packagesListQuery, packageData, pagination } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('PackagesListApp', () => {
   let wrapper;
@@ -78,10 +77,6 @@ describe('PackagesListApp', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const waitForFirstRequest = async () => {
     // emit a search update so the query is executed
     findSearch().vm.$emit('update', { sort: 'NAME_DESC', filters: [] });
@@ -171,14 +166,14 @@ describe('PackagesListApp', () => {
   });
 
   describe.each`
-    type                     | sortType
-    ${PROJECT_RESOURCE_TYPE} | ${'sort'}
-    ${GROUP_RESOURCE_TYPE}   | ${'groupSort'}
+    type                 | sortType
+    ${WORKSPACE_PROJECT} | ${'sort'}
+    ${WORKSPACE_GROUP}   | ${'groupSort'}
   `('$type query', ({ type, sortType }) => {
     let provide;
     let resolver;
 
-    const isGroupPage = type === GROUP_RESOURCE_TYPE;
+    const isGroupPage = type === WORKSPACE_GROUP;
 
     beforeEach(() => {
       provide = { ...defaultProvide, isGroupPage };
@@ -198,9 +193,13 @@ describe('PackagesListApp', () => {
     });
   });
 
-  describe('empty state', () => {
+  describe.each`
+    description         | resolverResponse
+    ${'empty response'} | ${packagesListQuery({ extend: { nodes: [] } })}
+    ${'error response'} | ${{ data: { group: null } }}
+  `(`$description renders empty state`, ({ resolverResponse }) => {
     beforeEach(() => {
-      const resolver = jest.fn().mockResolvedValue(packagesListQuery({ extend: { nodes: [] } }));
+      const resolver = jest.fn().mockResolvedValue(resolverResponse);
       mountComponent({ resolver });
 
       return waitForFirstRequest();
diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
index 796d89231f4..6dd4b9f2d20 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js
@@ -28,7 +28,7 @@ import {
   dependencyProxyUpdateTllPolicyMutationMock,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
 
 describe('DependencyProxySettings', () => {
@@ -82,10 +82,6 @@ describe('DependencyProxySettings', () => {
       .mockResolvedValue(dependencyProxyUpdateTllPolicyMutationMock());
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
   const findEnableProxyToggle = () => wrapper.findByTestId('dependency-proxy-setting-toggle');
   const findEnableTtlPoliciesToggle = () =>
diff --git a/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js b/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js
index 86f14961690..461200e6983 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/exceptions_input_spec.js
@@ -23,10 +23,6 @@ describe('Exceptions Input', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findInputGroup = () => wrapper.findComponent(GlFormGroup);
   const findInput = () => wrapper.findComponent(GlFormInput);
 
diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
index 7edc321867c..3ce8e91d43d 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js
@@ -19,7 +19,7 @@ import {
   dependencyProxyImageTtlPolicy,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Group Settings App', () => {
   let wrapper;
@@ -55,10 +55,6 @@ describe('Group Settings App', () => {
     show = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findPackageSettings = () => wrapper.findComponent(PackagesSettings);
   const findPackageForwardingSettings = () => wrapper.findComponent(PackagesForwardingSettings);
diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
index 807f332f4d3..22e42f8c0ab 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js
@@ -23,7 +23,7 @@ import {
   groupPackageSettingsMutationErrorMock,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
 
 describe('Packages Settings', () => {
@@ -56,10 +56,6 @@ describe('Packages Settings', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSettingsBlock = () => wrapper.findComponent(SettingsBlock);
   const findDescription = () => wrapper.findByTestId('description');
   const findMavenSettings = () => wrapper.findByTestId('maven-settings');
diff --git a/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
index a0b257a9496..d57077b31c8 100644
--- a/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
+++ b/spec/frontend/packages_and_registries/settings/group/components/packages_forwarding_settings_spec.js
@@ -25,7 +25,7 @@ import {
   mavenProps,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses');
 
 describe('Packages Forwarding Settings', () => {
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/cleanup_image_tags_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/cleanup_image_tags_spec.js
index 2bb99fb8e8f..49e8601da88 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/cleanup_image_tags_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/cleanup_image_tags_spec.js
@@ -61,10 +61,6 @@ describe('Cleanup image tags project settings', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('isEdited status', () => {
     it.each`
       description                                  | apiResponse                       | workingCopy                                                   | result
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
index cbb5aa52694..57b48407174 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
@@ -124,10 +124,6 @@ describe('Container Expiration Policy Settings Form', () => {
     jest.spyOn(Tracking, 'event');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     model              | finder                   | fieldName         | type          | defaultValue
     ${'enabled'}       | ${findEnableToggle}      | ${'Enable'}       | ${'toggle'}   | ${false}
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
index 43484d26d76..19f25d0aef7 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_spec.js
@@ -63,10 +63,6 @@ describe('Container expiration policy project settings', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the setting form', async () => {
     mountComponentWithApollo({
       resolver: jest.fn().mockResolvedValue(expirationPolicyPayload()),
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
index ae41fdf65e0..058fe427106 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_dropdown_spec.js
@@ -32,11 +32,6 @@ describe('ExpirationDropdown', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('structure', () => {
     it('has a form-select component', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_input_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_input_spec.js
index 1cea0704154..be12d108d1e 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_input_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_input_spec.js
@@ -38,11 +38,6 @@ describe('ExpirationInput', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('structure', () => {
     it('has a label', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_run_text_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_run_text_spec.js
index 653f2a8b40e..f950a9d5add 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_run_text_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_run_text_spec.js
@@ -23,11 +23,6 @@ describe('ExpirationToggle', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('structure', () => {
     it('has an input component', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_toggle_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_toggle_spec.js
index 55a66cebd83..ec7b89aa927 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_toggle_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/expiration_toggle_spec.js
@@ -23,11 +23,6 @@ describe('ExpirationToggle', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('structure', () => {
     it('has a toggle component', () => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
index 0fbbf4ae58f..b9c0c38bf9e 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_form_spec.js
@@ -115,7 +115,6 @@ describe('Packages Cleanup Policy Settings Form', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
index 6dfeeca6862..94277d34f30 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/packages_cleanup_policy_spec.js
@@ -47,7 +47,6 @@ describe('Packages cleanup policy project settings', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
index 07d13839c61..54655acdf2a 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js
@@ -20,11 +20,6 @@ describe('Registry Settings app', () => {
   const findPackagesCleanupPolicy = () => wrapper.findComponent(PackagesCleanupPolicy);
   const findAlert = () => wrapper.findComponent(GlAlert);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const defaultProvide = {
     showContainerRegistrySettings: true,
     showPackageRegistrySettings: true,
diff --git a/spec/frontend/packages_and_registries/shared/components/cli_commands_spec.js b/spec/frontend/packages_and_registries/shared/components/cli_commands_spec.js
index 18084766db9..41482e6e681 100644
--- a/spec/frontend/packages_and_registries/shared/components/cli_commands_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/cli_commands_spec.js
@@ -38,11 +38,6 @@ describe('cli_commands', () => {
     mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('shows the correct text on the button', () => {
     expect(findDropdownButton().text()).toContain(QUICK_START);
   });
diff --git a/spec/frontend/packages_and_registries/shared/components/delete_package_modal_spec.js b/spec/frontend/packages_and_registries/shared/components/delete_package_modal_spec.js
index 357dab593e8..ba5ba8f9884 100644
--- a/spec/frontend/packages_and_registries/shared/components/delete_package_modal_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/delete_package_modal_spec.js
@@ -19,11 +19,6 @@ describe('DeletePackageModal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when itemToBeDeleted prop is defined', () => {
     beforeEach(() => {
       mountComponent();
diff --git a/spec/frontend/packages_and_registries/shared/components/package_path_spec.js b/spec/frontend/packages_and_registries/shared/components/package_path_spec.js
index 93425d4f399..2490e9a1f6a 100644
--- a/spec/frontend/packages_and_registries/shared/components/package_path_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/package_path_spec.js
@@ -9,7 +9,7 @@ describe('PackagePath', () => {
     wrapper = shallowMount(PackagePath, {
       propsData,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -24,11 +24,6 @@ describe('PackagePath', () => {
   const findItem = (name) => wrapper.find(`[data-testid="${name}"]`);
   const findTooltip = (w) => getBinding(w.element, 'gl-tooltip');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     path                       | rootUrl       | shouldExist                                                   | shouldNotExist
     ${'foo/bar'}               | ${'/foo/bar'} | ${[]}                                                         | ${[ROOT_CHEVRON, ELLIPSIS_ICON, ELLIPSIS_CHEVRON, LEAF_LINK]}
diff --git a/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js b/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js
index 0005162e0bb..e43a9f57255 100644
--- a/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/packages_list_loader_spec.js
@@ -17,11 +17,6 @@ describe('PackagesListLoader', () => {
 
   beforeEach(createComponent);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('desktop loader', () => {
     it('produces the right loader', () => {
       expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
diff --git a/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js b/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js
index db9f96bff39..1484377a475 100644
--- a/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/persisted_search_spec.js
@@ -43,10 +43,6 @@ describe('Persisted Search', () => {
     extractFilterAndSorting.mockReturnValue(defaultQueryParamsMock);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a registry search component', async () => {
     mountComponent();
 
diff --git a/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js b/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js
index fa8f8f7641a..167599a54ea 100644
--- a/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/publish_method_spec.js
@@ -20,11 +20,6 @@ describe('publish_method', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders', () => {
     mountComponent(packageWithPipeline);
     expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
index 15db454ac68..c1f1a25d53b 100644
--- a/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/registry_breadcrumb_spec.js
@@ -31,10 +31,6 @@ describe('Registry Breadcrumb', () => {
     nameGenerator.mockClear();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when is rootRoute', () => {
     beforeEach(() => {
       mountComponent(routes[0]);
diff --git a/spec/frontend/packages_and_registries/shared/components/registry_list_spec.js b/spec/frontend/packages_and_registries/shared/components/registry_list_spec.js
index 2e2d5e26d33..a4e0d267023 100644
--- a/spec/frontend/packages_and_registries/shared/components/registry_list_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/registry_list_spec.js
@@ -36,10 +36,6 @@ describe('Registry List', () => {
   const findScopedSlotFirstValue = (index) => findScopedSlots().at(index).find('span');
   const findScopedSlotIsSelectedValue = (index) => findScopedSlots().at(index).find('p');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('header', () => {
     it('renders the title passed in the prop', () => {
       mountComponent();
@@ -111,10 +107,21 @@ describe('Registry List', () => {
         expect(findDeleteSelected().text()).toBe(component.i18n.deleteSelected);
       });
 
-      it('is hidden when hiddenDelete is true', () => {
-        mountComponent({ propsData: { ...defaultPropsData, hiddenDelete: true } });
+      describe('when hiddenDelete is true', () => {
+        beforeEach(() => {
+          mountComponent({ propsData: { ...defaultPropsData, hiddenDelete: true } });
+        });
 
-        expect(findDeleteSelected().exists()).toBe(false);
+        it('is hidden', () => {
+          expect(findDeleteSelected().exists()).toBe(false);
+        });
+
+        it('populates the first slot prop correctly', async () => {
+          expect(findScopedSlots().at(0).exists()).toBe(true);
+
+          // it's the first slot
+          expect(findScopedSlotFirstValue(0).text()).toBe('false');
+        });
       });
 
       it('is disabled when isLoading is true', () => {
diff --git a/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js b/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js
index a4c1b989dac..664a821c275 100644
--- a/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js
+++ b/spec/frontend/packages_and_registries/shared/components/settings_block_spec.js
@@ -15,10 +15,6 @@ describe('SettingsBlock', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDefaultSlot = () => wrapper.findByTestId('default-slot');
   const findTitleSlot = () => wrapper.findByTestId('title-slot');
   const findDescriptionSlot = () => wrapper.findByTestId('description-slot');
diff --git a/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js
index ec6369e7119..de6d44eabdc 100644
--- a/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js
+++ b/spec/frontend/pages/admin/jobs/index/components/cancel_jobs_spec.js
@@ -19,8 +19,8 @@ describe('CancelJobs component', () => {
   const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(CancelJobs, {
       directives: {
-        GlModal: createMockDirective(),
-        GlTooltip: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: {
         url: `${TEST_HOST}/cancel_jobs_modal.vue/cancelAll`,
diff --git a/spec/frontend/pages/groups/new/components/app_spec.js b/spec/frontend/pages/groups/new/components/app_spec.js
index ab483316086..7ccded9b0f1 100644
--- a/spec/frontend/pages/groups/new/components/app_spec.js
+++ b/spec/frontend/pages/groups/new/components/app_spec.js
@@ -6,7 +6,7 @@ describe('App component', () => {
   let wrapper;
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(App, { propsData });
+    wrapper = shallowMount(App, { propsData: { groupsUrl: '/dashboard/groups', ...propsData } });
   };
 
   const findNewNamespacePage = () => wrapper.findComponent(NewNamespacePage);
@@ -16,24 +16,31 @@ describe('App component', () => {
       .props('panels')
       .find((panel) => panel.name === 'create-group-pane');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('creates correct component for group creation', () => {
     createComponent();
 
-    expect(findNewNamespacePage().props('initialBreadcrumb')).toBe('New group');
+    expect(findNewNamespacePage().props('initialBreadcrumbs')).toEqual([
+      { href: '/dashboard/groups', text: 'Groups' },
+      { href: '#', text: 'New group' },
+    ]);
     expect(findCreateGroupPanel().title).toBe('Create group');
   });
 
   it('creates correct component for subgroup creation', () => {
-    const props = { parentGroupName: 'parent', importExistingGroupPath: '/path' };
+    const detailProps = {
+      parentGroupName: 'parent',
+      importExistingGroupPath: '/path',
+    };
+
+    const props = { ...detailProps, parentGroupUrl: '/parent' };
 
     createComponent(props);
 
-    expect(findNewNamespacePage().props('initialBreadcrumb')).toBe('parent');
+    expect(findNewNamespacePage().props('initialBreadcrumbs')).toEqual([
+      { href: '/parent', text: 'parent' },
+      { href: '#', text: 'New subgroup' },
+    ]);
     expect(findCreateGroupPanel().title).toBe('Create subgroup');
-    expect(findCreateGroupPanel().detailProps).toEqual(props);
+    expect(findCreateGroupPanel().detailProps).toEqual(detailProps);
   });
 });
diff --git a/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js b/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js
index 56a1fd03f71..35015d84085 100644
--- a/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js
+++ b/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js
@@ -15,10 +15,6 @@ describe('CreateGroupDescriptionDetails component', () => {
 
   const findLinkHref = (at) => wrapper.findAllComponents(GlLink).at(at);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('creates correct component for group creation', () => {
     createComponent();
 
diff --git a/spec/frontend/pages/import/bulk_imports/history/components/bulk_imports_history_app_spec.js b/spec/frontend/pages/import/bulk_imports/history/components/bulk_imports_history_app_spec.js
index da3954b4918..477511cde64 100644
--- a/spec/frontend/pages/import/bulk_imports/history/components/bulk_imports_history_app_spec.js
+++ b/spec/frontend/pages/import/bulk_imports/history/components/bulk_imports_history_app_spec.js
@@ -68,15 +68,10 @@ describe('BulkImportsHistoryApp', () => {
 
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
-  const originalApiVersion = gon.api_version;
-  beforeAll(() => {
+  beforeEach(() => {
     gon.api_version = 'v4';
   });
 
-  afterAll(() => {
-    gon.api_version = originalApiVersion;
-  });
-
   beforeEach(() => {
     mock = new MockAdapter(axios);
     mock.onGet(API_URL).reply(HTTP_STATUS_OK, DUMMY_RESPONSE, DEFAULT_HEADERS);
@@ -84,7 +79,6 @@ describe('BulkImportsHistoryApp', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('general behavior', () => {
diff --git a/spec/frontend/pages/import/history/components/import_error_details_spec.js b/spec/frontend/pages/import/history/components/import_error_details_spec.js
index 628ee8d7999..239826c1458 100644
--- a/spec/frontend/pages/import/history/components/import_error_details_spec.js
+++ b/spec/frontend/pages/import/history/components/import_error_details_spec.js
@@ -21,22 +21,13 @@ describe('ImportErrorDetails', () => {
     });
   }
 
-  const originalApiVersion = gon.api_version;
-  beforeAll(() => {
-    gon.api_version = 'v4';
-  });
-
-  afterAll(() => {
-    gon.api_version = originalApiVersion;
-  });
-
   beforeEach(() => {
+    gon.api_version = 'v4';
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('general behavior', () => {
diff --git a/spec/frontend/pages/import/history/components/import_history_app_spec.js b/spec/frontend/pages/import/history/components/import_history_app_spec.js
index 7d79583be19..43cbac25fe8 100644
--- a/spec/frontend/pages/import/history/components/import_history_app_spec.js
+++ b/spec/frontend/pages/import/history/components/import_history_app_spec.js
@@ -59,23 +59,14 @@ describe('ImportHistoryApp', () => {
     });
   }
 
-  const originalApiVersion = gon.api_version;
-  beforeAll(() => {
+  beforeEach(() => {
     gon.api_version = 'v4';
     gon.features = { fullPathProjectSearch: true };
-  });
-
-  afterAll(() => {
-    gon.api_version = originalApiVersion;
-  });
-
-  beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('general behavior', () => {
diff --git a/spec/frontend/pages/profiles/password_prompt/password_prompt_modal_spec.js b/spec/frontend/pages/profiles/password_prompt/password_prompt_modal_spec.js
index c30b996437d..18a0098a715 100644
--- a/spec/frontend/pages/profiles/password_prompt/password_prompt_modal_spec.js
+++ b/spec/frontend/pages/profiles/password_prompt/password_prompt_modal_spec.js
@@ -25,8 +25,7 @@ describe('Password prompt modal', () => {
   const findField = () => wrapper.findByTestId('password-prompt-field');
   const findModal = () => wrapper.findComponent(GlModal);
   const findConfirmBtn = () => findModal().props('actionPrimary');
-  const findConfirmBtnDisabledState = () =>
-    findModal().props('actionPrimary').attributes[2].disabled;
+  const findConfirmBtnDisabledState = () => findModal().props('actionPrimary').attributes.disabled;
 
   const findCancelBtn = () => findModal().props('actionCancel');
 
@@ -41,10 +40,6 @@ describe('Password prompt modal', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the password field', () => {
     expect(findField().exists()).toBe(true);
   });
diff --git a/spec/frontend/pages/projects/forks/new/components/app_spec.js b/spec/frontend/pages/projects/forks/new/components/app_spec.js
index 0342b94a44d..e9a94878867 100644
--- a/spec/frontend/pages/projects/forks/new/components/app_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/app_spec.js
@@ -22,10 +22,6 @@ describe('App component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the correct svg illustration', () => {
     expect(wrapper.find('img').attributes('src')).toBe('illustrations/project-create-new-sm.svg');
   });
diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
index f0593a854b2..9dce6fde6f6 100644
--- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js
@@ -6,7 +6,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import { kebabCase } from 'lodash';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import * as urlUtility from '~/lib/utils/url_utility';
 import ForkForm from '~/pages/projects/forks/new/components/fork_form.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -14,7 +14,7 @@ import searchQuery from '~/pages/projects/forks/new/queries/search_forkable_name
 import ProjectNamespace from '~/pages/projects/forks/new/components/project_namespace.vue';
 import { START_RULE, CONTAINS_RULE } from '~/projects/project_name_rules';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 describe('ForkForm component', () => {
@@ -111,7 +111,6 @@ describe('ForkForm component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
@@ -553,7 +552,7 @@ describe('ForkForm component', () => {
         expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl);
       });
 
-      it('display flash when POST is unsuccessful', async () => {
+      it('displays an alert when POST is unsuccessful', async () => {
         const dummyError = 'Fork project failed';
 
         jest.spyOn(axios, 'post').mockRejectedValue(dummyError);
diff --git a/spec/frontend/pages/projects/forks/new/components/project_namespace_spec.js b/spec/frontend/pages/projects/forks/new/components/project_namespace_spec.js
index 82f451ed6ef..af578b69a81 100644
--- a/spec/frontend/pages/projects/forks/new/components/project_namespace_spec.js
+++ b/spec/frontend/pages/projects/forks/new/components/project_namespace_spec.js
@@ -3,15 +3,14 @@ import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import searchQuery from '~/pages/projects/forks/new/queries/search_forkable_namespaces.query.graphql';
 import ProjectNamespace from '~/pages/projects/forks/new/components/project_namespace.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('ProjectNamespace component', () => {
   let wrapper;
-  let originalGon;
 
   const data = {
     project: {
@@ -85,14 +84,8 @@ describe('ProjectNamespace component', () => {
     findListBox().vm.$emit('shown');
   };
 
-  beforeAll(() => {
-    originalGon = window.gon;
-    window.gon = { gitlab_url: gitlabUrl };
-  });
-
-  afterAll(() => {
-    window.gon = originalGon;
-    wrapper.destroy();
+  beforeEach(() => {
+    gon.gitlab_url = gitlabUrl;
   });
 
   describe('Initial state', () => {
@@ -152,7 +145,7 @@ describe('ProjectNamespace component', () => {
       await nextTick();
     });
 
-    it('creates a flash message and captures the error', () => {
+    it('creates an alert message and captures the error', () => {
       expect(createAlert).toHaveBeenCalledWith({
         message: 'Something went wrong while loading data. Please refresh the page to try again.',
         captureError: true,
diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
index 5356953060a..882730d90ae 100644
--- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js
+++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlListbox, GlListboxItem } from '@gitlab/ui';
+import { GlAlert, GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
@@ -22,7 +22,7 @@ describe('Code Coverage', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findAreaChart = () => wrapper.findComponent(GlAreaChart);
-  const findListBox = () => wrapper.findComponent(GlListbox);
+  const findListBox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findListBoxItems = () => wrapper.findAllComponents(GlListboxItem);
   const findFirstListBoxItem = () => findListBoxItems().at(0);
   const findSecondListBoxItem = () => findListBoxItems().at(1);
@@ -37,15 +37,10 @@ describe('Code Coverage', () => {
         graphRef,
         graphCsvPath,
       },
-      stubs: { GlListbox },
+      stubs: { GlCollapsibleListbox },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when fetching data is successful', () => {
     beforeEach(() => {
       mockAxios = new MockAdapter(axios);
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
index 2d3b9afa8f6..07d05293a3c 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
@@ -37,10 +37,6 @@ describe('Interval Pattern Input Component', () => {
   const selectCustomRadio = () => findCustomRadio().setChecked(true);
 
   const createWrapper = (props = {}, data = {}) => {
-    if (wrapper) {
-      throw new Error('A wrapper already exists');
-    }
-
     wrapper = mount(IntervalPatternInput, {
       propsData: { ...props },
       data() {
@@ -64,8 +60,6 @@ describe('Interval Pattern Input Component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     window.gl = oldWindowGl;
   });
 
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
index a633332ab65..e20c2fa47a7 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
@@ -31,10 +31,6 @@ describe('Pipeline Schedule Callout', () => {
       await nextTick();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('does not render the callout', () => {
       expect(findInnerContentOfCallout().exists()).toBe(false);
     });
@@ -46,10 +42,6 @@ describe('Pipeline Schedule Callout', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders the callout container', () => {
       expect(findInnerContentOfCallout().exists()).toBe(true);
     });
diff --git a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
index 5771e1b88e8..03c65ab4c9c 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js
@@ -31,11 +31,6 @@ describe('Project Feature Settings', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('Hidden name input', () => {
     it('should set the hidden name input if the name exists', () => {
       wrapper = mountComponent();
diff --git a/spec/frontend/pages/projects/shared/permissions/components/project_setting_row_spec.js b/spec/frontend/pages/projects/shared/permissions/components/project_setting_row_spec.js
index 6230809a6aa..91d3057aec5 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/project_setting_row_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/project_setting_row_spec.js
@@ -15,10 +15,6 @@ describe('Project Setting Row', () => {
     wrapper = mountComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should show the label if it is set', async () => {
     wrapper.setProps({ label: 'Test label' });
 
diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
index ff20b72c72c..0812be9745e 100644
--- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
+++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js
@@ -140,11 +140,6 @@ describe('Settings Panel', () => {
   const findMonitorVisibilityInput = () =>
     findMonitorSettings().findComponent(ProjectFeatureSetting);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('Project Visibility', () => {
     it('should set the project visibility help path', () => {
       wrapper = mountComponent();
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
index 6a18473b1a7..1858a56b0e1 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js
@@ -15,11 +15,6 @@ describe('WikiAlert', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findGlAlert = () => wrapper.findComponent(GlAlert);
   const findGlLink = () => wrapper.findComponent(GlLink);
   const findGlSprintf = () => wrapper.findComponent(GlSprintf);
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
index c8e9a31b526..8e26453b564 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js
@@ -31,11 +31,6 @@ describe('pages/shared/wikis/components/wiki_content', () => {
     mock = new MockAdapter(axios);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findGlAlert = () => wrapper.findComponent(GlAlert);
   const findGlSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findContent = () => wrapper.find('[data-testid="wiki-page-content"]');
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
index ffcfd1d9f78..1be4a974f7a 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
@@ -103,8 +103,6 @@ describe('WikiForm', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   it('displays markdown editor', () => {
@@ -116,7 +114,6 @@ describe('WikiForm', () => {
       expect.objectContaining({
         value: pageInfoPersisted.content,
         renderMarkdownPath: pageInfoPersisted.markdownPreviewPath,
-        markdownDocsPath: pageInfoPersisted.markdownHelpPath,
         uploadsPath: pageInfoPersisted.uploadsPath,
         autofocus: pageInfoPersisted.persisted,
       }),
@@ -126,6 +123,10 @@ describe('WikiForm', () => {
       id: 'wiki_content',
       name: 'wiki[content]',
     });
+
+    expect(markdownEditor.vm.$attrs['markdown-docs-path']).toEqual(
+      pageInfoPersisted.markdownHelpPath,
+    );
   });
 
   it.each`
@@ -172,7 +173,7 @@ describe('WikiForm', () => {
 
     nextTick();
 
-    expect(findMarkdownEditor().props('enablePreview')).toBe(enabled);
+    expect(findMarkdownEditor().vm.$attrs['enable-preview']).toBe(enabled);
   });
 
   it.each`
diff --git a/spec/frontend/pdf/index_spec.js b/spec/frontend/pdf/index_spec.js
index 98946412264..23477c73ba0 100644
--- a/spec/frontend/pdf/index_spec.js
+++ b/spec/frontend/pdf/index_spec.js
@@ -7,10 +7,6 @@ describe('PDFLab component', () => {
 
   const mountComponent = ({ pdf }) => shallowMount(PDFLab, { propsData: { pdf } });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('without PDF data', () => {
     beforeEach(() => {
       wrapper = mountComponent({ pdf: '' });
diff --git a/spec/frontend/pdf/page_spec.js b/spec/frontend/pdf/page_spec.js
index 4cf83a3252d..1d5c5cd98c4 100644
--- a/spec/frontend/pdf/page_spec.js
+++ b/spec/frontend/pdf/page_spec.js
@@ -9,10 +9,6 @@ jest.mock('pdfjs-dist/webpack', () => {
 describe('Page component', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the page when mounting', async () => {
     const testPage = {
       render: jest.fn().mockReturnValue({ promise: Promise.resolve() }),
diff --git a/spec/frontend/performance_bar/components/add_request_spec.js b/spec/frontend/performance_bar/components/add_request_spec.js
index 5460feb66fe..de9cc1e8008 100644
--- a/spec/frontend/performance_bar/components/add_request_spec.js
+++ b/spec/frontend/performance_bar/components/add_request_spec.js
@@ -13,10 +13,6 @@ describe('add request form', () => {
     wrapper = mount(AddRequest);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('hides the input on load', () => {
     expect(findGlFormInput().exists()).toBe(false);
   });
diff --git a/spec/frontend/performance_bar/components/detailed_metric_spec.js b/spec/frontend/performance_bar/components/detailed_metric_spec.js
index 5ab2c9abe5d..4194639fffe 100644
--- a/spec/frontend/performance_bar/components/detailed_metric_spec.js
+++ b/spec/frontend/performance_bar/components/detailed_metric_spec.js
@@ -38,10 +38,6 @@ describe('detailedMetric', () => {
   const findAllSummaryItems = () =>
     wrapper.findAllByTestId('performance-bar-summary-item').wrappers.map((w) => w.text());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the current request has no details', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/performance_bar/components/request_warning_spec.js b/spec/frontend/performance_bar/components/request_warning_spec.js
index 9dd8ea9f933..7b6d8ff695d 100644
--- a/spec/frontend/performance_bar/components/request_warning_spec.js
+++ b/spec/frontend/performance_bar/components/request_warning_spec.js
@@ -5,10 +5,6 @@ describe('request warning', () => {
   let wrapper;
   const htmlId = 'request-123';
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the request has warnings', () => {
     beforeEach(() => {
       wrapper = shallowMount(RequestWarning, {
diff --git a/spec/frontend/persistent_user_callout_spec.js b/spec/frontend/persistent_user_callout_spec.js
index 6519989661f..376575a8acb 100644
--- a/spec/frontend/persistent_user_callout_spec.js
+++ b/spec/frontend/persistent_user_callout_spec.js
@@ -1,12 +1,12 @@
 import MockAdapter from 'axios-mock-adapter';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import PersistentUserCallout from '~/persistent_user_callout';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('PersistentUserCallout', () => {
   const dismissEndpoint = '/dismiss';
diff --git a/spec/frontend/pipeline_wizard/components/commit_spec.js b/spec/frontend/pipeline_wizard/components/commit_spec.js
index fa30b9c2b97..8f44a6c085b 100644
--- a/spec/frontend/pipeline_wizard/components/commit_spec.js
+++ b/spec/frontend/pipeline_wizard/components/commit_spec.js
@@ -74,10 +74,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('shows a commit message input with the correct label', () => {
       expect(wrapper.findByTestId('commit_message').exists()).toBe(true);
       expect(wrapper.find('label[for="commit_message"]').text()).toBe(i18n.commitMessageLabel);
@@ -121,10 +117,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       expect(wrapper.findByTestId('load-error').exists()).toBe(true);
       expect(wrapper.findByTestId('load-error').text()).toBe(i18n.errors.loadError);
     });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
   });
 
   describe('commit result handling', () => {
@@ -151,7 +143,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       });
 
       afterEach(() => {
-        wrapper.destroy();
         jest.clearAllMocks();
       });
     });
@@ -178,7 +169,6 @@ describe('Pipeline Wizard - Commit Page', () => {
       });
 
       afterEach(() => {
-        wrapper.destroy();
         jest.clearAllMocks();
       });
     });
@@ -246,10 +236,6 @@ describe('Pipeline Wizard - Commit Page', () => {
           await waitForPromises();
         });
 
-        afterEach(() => {
-          wrapper.destroy();
-        });
-
         it('sets up without error', async () => {
           expect(consoleSpy).not.toHaveBeenCalled();
         });
diff --git a/spec/frontend/pipeline_wizard/components/editor_spec.js b/spec/frontend/pipeline_wizard/components/editor_spec.js
index dd0a609043a..6d7d4363189 100644
--- a/spec/frontend/pipeline_wizard/components/editor_spec.js
+++ b/spec/frontend/pipeline_wizard/components/editor_spec.js
@@ -9,10 +9,6 @@ describe('Pages Yaml Editor wrapper', () => {
     propsData: { doc: new Document({ foo: 'bar' }), filename: 'foo.yml' },
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('mount hook', () => {
     beforeEach(() => {
       wrapper = mount(YamlEditor, defaultOptions);
diff --git a/spec/frontend/pipeline_wizard/components/input_wrapper_spec.js b/spec/frontend/pipeline_wizard/components/input_wrapper_spec.js
index f288264a11e..7f521e2523e 100644
--- a/spec/frontend/pipeline_wizard/components/input_wrapper_spec.js
+++ b/spec/frontend/pipeline_wizard/components/input_wrapper_spec.js
@@ -33,10 +33,6 @@ describe('Pipeline Wizard -- Input Wrapper', () => {
       inputChild = wrapper.findComponent(TextWidget);
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('will replace its value in compiled', async () => {
       await inputChild.vm.$emit('input', inputValue);
       const expected = new Document({
@@ -54,10 +50,6 @@ describe('Pipeline Wizard -- Input Wrapper', () => {
   });
 
   describe('Target Path Discovery', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it.each`
       scenario                  | template                             | target     | expected
       ${'simple nested object'} | ${{ foo: { bar: { baz: '$BOO' } } }} | ${'$BOO'}  | ${['foo', 'bar', 'baz']}
diff --git a/spec/frontend/pipeline_wizard/components/step_nav_spec.js b/spec/frontend/pipeline_wizard/components/step_nav_spec.js
index c6eac1386fa..8e2f0ab0281 100644
--- a/spec/frontend/pipeline_wizard/components/step_nav_spec.js
+++ b/spec/frontend/pipeline_wizard/components/step_nav_spec.js
@@ -19,10 +19,6 @@ describe('Pipeline Wizard - Step Navigation Component', () => {
     nextButton = wrapper.findByTestId('next-button');
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     scenario                       | showBackButton | showNextButton
     ${'does not show prev button'} | ${false}       | ${false}
diff --git a/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js b/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js
index b8e194015b0..52e5d49ec99 100644
--- a/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js
+++ b/spec/frontend/pipeline_wizard/components/widgets/checklist_spec.js
@@ -39,10 +39,6 @@ describe('Pipeline Wizard - Checklist Widget', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('creates the component', () => {
     createComponent();
     expect(wrapper.exists()).toBe(true);
diff --git a/spec/frontend/pipeline_wizard/components/widgets/list_spec.js b/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
index c9e9f5caebe..b0eb7279a94 100644
--- a/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
+++ b/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
@@ -39,10 +39,6 @@ describe('Pipeline Wizard - List Widget', () => {
   };
 
   describe('component setup and interface', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('prints the label inside the legend', () => {
       createComponent();
 
@@ -168,10 +164,6 @@ describe('Pipeline Wizard - List Widget', () => {
   });
 
   describe('form validation', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('does not show validation state when untouched', async () => {
       createComponent({}, mountExtended);
       expect(findGlFormGroup().classes()).not.toContain('is-valid');
diff --git a/spec/frontend/pipeline_wizard/components/wrapper_spec.js b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
index 33c6394eb41..1056602c912 100644
--- a/spec/frontend/pipeline_wizard/components/wrapper_spec.js
+++ b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
@@ -48,10 +48,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
     wrapper.find(`[data-input-target="${target}"]`).find('input');
 
   describe('display', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('shows the steps', () => {
       createComponent();
 
@@ -145,10 +141,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
           }
         });
 
-        afterEach(() => {
-          wrapper.destroy();
-        });
-
         if (expectCommitStepShown) {
           it('does not show the step wrapper', async () => {
             expect(wrapper.findComponent(WizardStep).isVisible()).toBe(false);
@@ -188,10 +180,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('initially shows a placeholder', async () => {
       const editorContent = getEditorContent();
 
@@ -240,10 +228,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('highlight requests by the step get passed on to the editor', async () => {
       const highlight = 'foo';
 
@@ -309,7 +293,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
       });
 
       afterEach(() => {
-        wrapper.destroy();
         inputField = undefined;
       });
 
@@ -331,10 +314,6 @@ describe('Pipeline Wizard - wrapper.vue', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('emits done', () => {
       expect(wrapper.emitted('done')).toBeUndefined();
 
diff --git a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
index 13234525159..e7bd7f686b6 100644
--- a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
+++ b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
@@ -24,10 +24,6 @@ describe('PipelineWizard', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('mounts without error', () => {
     const consoleSpy = jest.spyOn(console, 'error');
 
diff --git a/spec/frontend/pipelines/components/dag/dag_annotations_spec.js b/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
index 28a08b6da0f..aecaa640266 100644
--- a/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_annotations_spec.js
@@ -28,11 +28,6 @@ describe('The DAG annotations', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when there is one annotation', () => {
     const currentNote = singleNote['dag-link103'];
 
diff --git a/spec/frontend/pipelines/components/dag/dag_graph_spec.js b/spec/frontend/pipelines/components/dag/dag_graph_spec.js
index 4619548d1bb..6b46be3dd49 100644
--- a/spec/frontend/pipelines/components/dag/dag_graph_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_graph_spec.js
@@ -36,11 +36,6 @@ describe('The DAG graph', () => {
     createComponent({ graphData: parsedData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('in the basic case', () => {
     beforeEach(() => {
       /*
diff --git a/spec/frontend/pipelines/components/dag/dag_spec.js b/spec/frontend/pipelines/components/dag/dag_spec.js
index b0c26976c85..e2dc8120309 100644
--- a/spec/frontend/pipelines/components/dag/dag_spec.js
+++ b/spec/frontend/pipelines/components/dag/dag_spec.js
@@ -51,11 +51,6 @@ describe('Pipeline DAG graph wrapper', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when a query argument is undefined', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
index d1da7cb3acf..169e3666cbd 100644
--- a/spec/frontend/pipelines/components/jobs/failed_jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/failed_jobs_app_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import FailedJobsApp from '~/pipelines/components/jobs/failed_jobs_app.vue';
 import FailedJobsTable from '~/pipelines/components/jobs/failed_jobs_table.vue';
 import GetFailedJobsQuery from '~/pipelines/graphql/queries/get_failed_jobs.query.graphql';
@@ -12,7 +12,7 @@ import { mockFailedJobsQueryResponse, mockFailedJobsSummaryData } from '../../mo
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Failed Jobs App', () => {
   let wrapper;
@@ -44,10 +44,6 @@ describe('Failed Jobs App', () => {
     resolverSpy = jest.fn().mockResolvedValue(mockFailedJobsQueryResponse);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading spinner', () => {
     it('displays loading spinner when fetching failed jobs', () => {
       createComponent(resolverSpy);
diff --git a/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js b/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
index 0df15afd70d..0ac3b6c9074 100644
--- a/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
+++ b/spec/frontend/pipelines/components/jobs/failed_jobs_table_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
 import FailedJobsTable from '~/pipelines/components/jobs/failed_jobs_table.vue';
 import RetryFailedJobMutation from '~/pipelines/graphql/mutations/retry_failed_job.mutation.graphql';
@@ -15,7 +15,7 @@ import {
   mockPreparedFailedJobsDataNoPermission,
 } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 
 Vue.use(VueApollo);
@@ -45,10 +45,6 @@ describe('Failed Jobs Table', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the failed jobs table', () => {
     createComponent();
 
diff --git a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
index 9bc14266593..52df7b4500b 100644
--- a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
+++ b/spec/frontend/pipelines/components/jobs/jobs_app_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import JobsApp from '~/pipelines/components/jobs/jobs_app.vue';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import getPipelineJobsQuery from '~/pipelines/graphql/queries/get_pipeline_jobs.query.graphql';
@@ -12,7 +12,7 @@ import { mockPipelineJobsQueryResponse } from '../../mock_data';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Jobs app', () => {
   let wrapper;
@@ -45,10 +45,6 @@ describe('Jobs app', () => {
     resolverSpy = jest.fn().mockResolvedValue(mockPipelineJobsQueryResponse);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('loading spinner', () => {
     const setup = async () => {
       createComponent(resolverSpy);
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
index 5ea57c51e70..a4ecb9041c9 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/linked_pipelines_mini_list_spec.js
@@ -19,7 +19,7 @@ describe('Linked pipeline mini list', () => {
   const createComponent = (props = {}) => {
     wrapper = mount(LinkedPipelinesMiniList, {
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: {
         ...props,
@@ -34,11 +34,6 @@ describe('Linked pipeline mini list', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('should render one linked pipeline item', () => {
       expect(findLinkedPipelineMiniItem().exists()).toBe(true);
     });
@@ -102,11 +97,6 @@ describe('Linked pipeline mini list', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('should render three linked pipeline items', () => {
       expect(findLinkedPipelineMiniItems().exists()).toBe(true);
       expect(findLinkedPipelineMiniItems().length).toBe(3);
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
index 036b82530d5..e7415a6c596 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_mini_graph_spec.js
@@ -33,11 +33,6 @@ describe('Pipeline Mini Graph', () => {
       createComponent();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('should render the pipeline stages', () => {
       expect(findPipelineStages().exists()).toBe(true);
     });
@@ -71,11 +66,6 @@ describe('Pipeline Mini Graph', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('should have the correct props', () => {
       expect(findPipelineMiniGraph().props()).toMatchObject({
         downstreamPipelines: [],
@@ -118,11 +108,6 @@ describe('Pipeline Mini Graph', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('should render the downstream linked pipelines mini list only', () => {
       expect(findLinkedPipelineDownstream().exists()).toBe(true);
       expect(findLinkedPipelineUpstream().exists()).toBe(false);
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
index ab2056b4035..864f2d66f60 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stage_spec.js
@@ -45,11 +45,10 @@ describe('Pipelines stage component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     eventHub.$emit.mockRestore();
     mock.restore();
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
+    wrapper.destroy();
   });
 
   const findCiActionBtn = () => wrapper.find('.js-ci-action');
diff --git a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
index c123f53886e..73e810bde99 100644
--- a/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_mini_graph/pipeline_stages_spec.js
@@ -60,9 +60,4 @@ describe('Pipeline Stages', () => {
     expect(findPipelineStagesAt(0).props('isMergeTrain')).toBe(true);
     expect(findPipelineStagesAt(1).props('isMergeTrain')).toBe(true);
   });
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
 });
diff --git a/spec/frontend/pipelines/components/pipeline_tabs_spec.js b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
index c2cb95d4320..337af6c1f60 100644
--- a/spec/frontend/pipelines/components/pipeline_tabs_spec.js
+++ b/spec/frontend/pipelines/components/pipeline_tabs_spec.js
@@ -39,10 +39,6 @@ describe('The Pipeline Tabs', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Tabs', () => {
     it.each`
       tabName          | tabComponent
diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index ba7262353f0..51a4487a3ef 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -51,8 +51,6 @@ describe('Pipelines filtered search', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
-    wrapper = null;
   });
 
   it('displays UI elements', () => {
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
index 6531a15ab8e..b560eea4882 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/ci_templates_spec.js
@@ -29,11 +29,6 @@ describe('CI Templates', () => {
   const findTemplateName = () => wrapper.findByTestId('template-name');
   const findTemplateLogo = () => wrapper.findByTestId('template-logo');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('renders template list', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
index 0c2938921d6..700be076e0c 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/ios_templates_spec.js
@@ -37,11 +37,6 @@ describe('iOS Templates', () => {
   const findSetupRunnerLink = () => wrapper.findByText('Set up a runner');
   const configurePipelineLink = () => wrapper.findByTestId('configure-pipeline-link');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when ios runners are not available', () => {
     beforeEach(() => {
       wrapper = createWrapper({ iosRunnersAvailable: false });
diff --git a/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js b/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
index f255e0d857f..0f4a2b1d02f 100644
--- a/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_list/empty_state/pipelines_ci_templates_spec.js
@@ -42,11 +42,6 @@ describe('Pipelines CI Templates', () => {
   const findDocumentationLink = () => wrapper.findByTestId('documentation-link');
   const findSettingsButton = () => wrapper.findByTestId('settings-button');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('renders test template', () => {
     beforeEach(() => {
       wrapper = createWrapper();
diff --git a/spec/frontend/pipelines/empty_state_spec.js b/spec/frontend/pipelines/empty_state_spec.js
index 0abf7f59717..5465e4d77da 100644
--- a/spec/frontend/pipelines/empty_state_spec.js
+++ b/spec/frontend/pipelines/empty_state_spec.js
@@ -35,11 +35,6 @@ describe('Pipelines Empty State', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when user can configure CI', () => {
     describe('when the ios_specific_templates experiment is active', () => {
       beforeEach(() => {
diff --git a/spec/frontend/pipelines/graph/action_component_spec.js b/spec/frontend/pipelines/graph/action_component_spec.js
index e3eea503b46..890255f225e 100644
--- a/spec/frontend/pipelines/graph/action_component_spec.js
+++ b/spec/frontend/pipelines/graph/action_component_spec.js
@@ -33,7 +33,6 @@ describe('pipeline graph action component', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('render', () => {
diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 99bccd21656..42e47a23db8 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -101,10 +101,6 @@ describe('Pipeline graph wrapper', () => {
     createComponent({ apolloProvider, data, provide, mountFn });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when data is loading', () => {
     it('displays the loading icon', () => {
       createComponentWithApollo();
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index 43587bebedf..78265165d1f 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -42,10 +42,6 @@ describe('the graph view selector component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when showing stage view', () => {
     beforeEach(() => {
       createComponent({ mountFn: mount });
diff --git a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
index d8afb33e148..1419a7b9982 100644
--- a/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
+++ b/spec/frontend/pipelines/graph/job_group_dropdown_spec.js
@@ -69,10 +69,6 @@ describe('job group dropdown component', () => {
     wrapper = mountFn(JobGroupDropdown, { propsData: { group } });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     createComponent({ mountFn: mount });
   });
diff --git a/spec/frontend/pipelines/graph/job_item_spec.js b/spec/frontend/pipelines/graph/job_item_spec.js
index 3224c87ab6b..5cc2c76f3dd 100644
--- a/spec/frontend/pipelines/graph/job_item_spec.js
+++ b/spec/frontend/pipelines/graph/job_item_spec.js
@@ -1,10 +1,11 @@
 import MockAdapter from 'axios-mock-adapter';
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { GlBadge, GlModal } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import { GlBadge, GlModal, GlToast } from '@gitlab/ui';
 import JobItem from '~/pipelines/components/graph/job_item.vue';
 import axios from '~/lib/utils/axios_utils';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import ActionComponent from '~/pipelines/components/jobs_shared/action_component.vue';
 
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import {
@@ -19,12 +20,14 @@ import {
 
 describe('pipeline graph job item', () => {
   useLocalStorageSpy();
+  Vue.use(GlToast);
 
   let wrapper;
   let mockAxios;
 
   const findJobWithoutLink = () => wrapper.findByTestId('job-without-link');
   const findJobWithLink = () => wrapper.findByTestId('job-with-link');
+  const findActionVueComponent = () => wrapper.findComponent(ActionComponent);
   const findActionComponent = () => wrapper.findByTestId('ci-action-component');
   const findBadge = () => wrapper.findComponent(GlBadge);
   const findJobLink = () => wrapper.findByTestId('job-with-link');
@@ -41,9 +44,9 @@ describe('pipeline graph job item', () => {
     job: mockJob,
   };
 
-  const createWrapper = ({ props, data } = {}) => {
+  const createWrapper = ({ props, data, mountFn = mount, mocks = {} } = {}) => {
     wrapper = extendedWrapper(
-      mount(JobItem, {
+      mountFn(JobItem, {
         data() {
           return {
             ...data,
@@ -53,6 +56,9 @@ describe('pipeline graph job item', () => {
           ...defaultProps,
           ...props,
         },
+        mocks: {
+          ...mocks,
+        },
       }),
     );
   };
@@ -238,6 +244,37 @@ describe('pipeline graph job item', () => {
       });
     });
 
+    describe('when retrying', () => {
+      const mockToastShow = jest.fn();
+
+      beforeEach(async () => {
+        createWrapper({
+          mountFn: shallowMount,
+          data: {
+            currentSkipModalValue: true,
+          },
+          props: {
+            skipRetryModal: true,
+            job: triggerJobWithRetryAction,
+          },
+          mocks: {
+            $toast: {
+              show: mockToastShow,
+            },
+          },
+        });
+
+        jest.spyOn(wrapper.vm.$toast, 'show');
+
+        await findActionVueComponent().vm.$emit('pipelineActionRequestComplete');
+        await nextTick();
+      });
+
+      it('shows a toast message that the downstream is being created', () => {
+        expect(mockToastShow).toHaveBeenCalledTimes(1);
+      });
+    });
+
     describe('highlighting', () => {
       it.each`
         job                      | jobName                       | expanded | link
diff --git a/spec/frontend/pipelines/graph/linked_pipeline_spec.js b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
index f396fe2aff4..b5ef10dee12 100644
--- a/spec/frontend/pipelines/graph/linked_pipeline_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipeline_spec.js
@@ -58,10 +58,6 @@ describe('Linked pipeline', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendered output', () => {
     const props = {
       pipeline: mockPipeline,
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
index 63e2d8707ea..6e4b9498918 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
@@ -65,10 +65,6 @@ describe('Linked Pipelines Column', () => {
     createComponent({ apolloProvider, mountFn, props });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('it renders correctly', () => {
     beforeEach(() => {
       createComponentWithApollo();
diff --git a/spec/frontend/pipelines/graph/stage_column_component_spec.js b/spec/frontend/pipelines/graph/stage_column_component_spec.js
index 19f597a7267..d4d7f1618c5 100644
--- a/spec/frontend/pipelines/graph/stage_column_component_spec.js
+++ b/spec/frontend/pipelines/graph/stage_column_component_spec.js
@@ -54,10 +54,6 @@ describe('stage column component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when mounted', () => {
     beforeEach(() => {
       createComponent({ method: mount });
diff --git a/spec/frontend/pipelines/graph_shared/links_inner_spec.js b/spec/frontend/pipelines/graph_shared/links_inner_spec.js
index 2c6d126e12c..50f754393fe 100644
--- a/spec/frontend/pipelines/graph_shared/links_inner_spec.js
+++ b/spec/frontend/pipelines/graph_shared/links_inner_spec.js
@@ -81,7 +81,6 @@ describe('Links Inner component', () => {
 
   afterEach(() => {
     jest.restoreAllMocks();
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/pipelines/graph_shared/links_layer_spec.js b/spec/frontend/pipelines/graph_shared/links_layer_spec.js
index e2699d6ff2e..9d39c86ed5e 100644
--- a/spec/frontend/pipelines/graph_shared/links_layer_spec.js
+++ b/spec/frontend/pipelines/graph_shared/links_layer_spec.js
@@ -35,10 +35,6 @@ describe('links layer component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with show links off', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/pipelines/header_component_spec.js b/spec/frontend/pipelines/header_component_spec.js
index e583c0798f5..a4d7d0e30f8 100644
--- a/spec/frontend/pipelines/header_component_spec.js
+++ b/spec/frontend/pipelines/header_component_spec.js
@@ -71,11 +71,6 @@ describe('Pipeline details header', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('initial loading', () => {
     beforeEach(() => {
       wrapper = createComponent(null, { isLoading: true });
diff --git a/spec/frontend/pipelines/nav_controls_spec.js b/spec/frontend/pipelines/nav_controls_spec.js
index 2c4740df174..15de7dc51f1 100644
--- a/spec/frontend/pipelines/nav_controls_spec.js
+++ b/spec/frontend/pipelines/nav_controls_spec.js
@@ -1,23 +1,20 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NavControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 
 describe('Pipelines Nav Controls', () => {
   let wrapper;
 
   const createComponent = (props) => {
-    wrapper = shallowMount(NavControls, {
+    wrapper = shallowMountExtended(NavControls, {
       propsData: {
         ...props,
       },
     });
   };
 
-  const findRunPipeline = () => wrapper.find('.js-run-pipeline');
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findRunPipelineButton = () => wrapper.findByTestId('run-pipeline-button');
+  const findCiLintButton = () => wrapper.findByTestId('ci-lint-button');
+  const findClearCacheButton = () => wrapper.findByTestId('clear-cache-button');
 
   it('should render link to create a new pipeline', () => {
     const mockData = {
@@ -28,9 +25,9 @@ describe('Pipelines Nav Controls', () => {
 
     createComponent(mockData);
 
-    const runPipeline = findRunPipeline();
-    expect(runPipeline.text()).toContain('Run pipeline');
-    expect(runPipeline.attributes('href')).toBe(mockData.newPipelinePath);
+    const runPipelineButton = findRunPipelineButton();
+    expect(runPipelineButton.text()).toContain('Run pipeline');
+    expect(runPipelineButton.attributes('href')).toBe(mockData.newPipelinePath);
   });
 
   it('should not render link to create pipeline if no path is provided', () => {
@@ -42,7 +39,7 @@ describe('Pipelines Nav Controls', () => {
 
     createComponent(mockData);
 
-    expect(findRunPipeline().exists()).toBe(false);
+    expect(findRunPipelineButton().exists()).toBe(false);
   });
 
   it('should render link for CI lint', () => {
@@ -54,9 +51,10 @@ describe('Pipelines Nav Controls', () => {
     };
 
     createComponent(mockData);
+    const ciLintButton = findCiLintButton();
 
-    expect(wrapper.find('.js-ci-lint').text().trim()).toContain('CI lint');
-    expect(wrapper.find('.js-ci-lint').attributes('href')).toBe(mockData.ciLintPath);
+    expect(ciLintButton.text()).toContain('CI lint');
+    expect(ciLintButton.attributes('href')).toBe(mockData.ciLintPath);
   });
 
   describe('Reset Runners Cache', () => {
@@ -70,16 +68,13 @@ describe('Pipelines Nav Controls', () => {
     });
 
     it('should render button for resetting runner caches', () => {
-      expect(wrapper.find('.js-clear-cache').text().trim()).toContain('Clear runner caches');
+      expect(findClearCacheButton().text()).toContain('Clear runner caches');
     });
 
-    it('should emit postAction event when reset runner cache button is clicked', async () => {
-      jest.spyOn(wrapper.vm, '$emit').mockImplementation(() => {});
-
-      wrapper.find('.js-clear-cache').vm.$emit('click');
-      await nextTick();
+    it('should emit postAction event when reset runner cache button is clicked', () => {
+      findClearCacheButton().vm.$emit('click');
 
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('resetRunnersCache', 'foo');
+      expect(wrapper.emitted('resetRunnersCache')).toEqual([['foo']]);
     });
   });
 });
diff --git a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
index df10742fd93..123f2e011c3 100644
--- a/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
+++ b/spec/frontend/pipelines/pipeline_graph/pipeline_graph_spec.js
@@ -39,10 +39,6 @@ describe('pipeline graph component', () => {
   const findLinksLayer = () => wrapper.findComponent(LinksLayer);
   const findPipelineGraph = () => wrapper.find('[data-testid="graph-container"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with `VALID` status', () => {
     beforeEach(() => {
       wrapper = createComponent({
diff --git a/spec/frontend/pipelines/pipeline_labels_spec.js b/spec/frontend/pipelines/pipeline_labels_spec.js
index ca0229b1cbe..6a37e36352b 100644
--- a/spec/frontend/pipelines/pipeline_labels_spec.js
+++ b/spec/frontend/pipelines/pipeline_labels_spec.js
@@ -30,10 +30,6 @@ describe('Pipeline label component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should not render tags when flags are not set', () => {
     createComponent();
 
diff --git a/spec/frontend/pipelines/pipeline_multi_actions_spec.js b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
index bedde71c48d..e3c9983aa52 100644
--- a/spec/frontend/pipelines/pipeline_multi_actions_spec.js
+++ b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
@@ -67,8 +67,6 @@ describe('Pipeline Multi Actions Dropdown', () => {
 
   afterEach(() => {
     mockAxios.restore();
-
-    wrapper.destroy();
   });
 
   it('should render the dropdown', () => {
diff --git a/spec/frontend/pipelines/pipeline_triggerer_spec.js b/spec/frontend/pipelines/pipeline_triggerer_spec.js
index 58bfb68e85c..856c0484075 100644
--- a/spec/frontend/pipelines/pipeline_triggerer_spec.js
+++ b/spec/frontend/pipelines/pipeline_triggerer_spec.js
@@ -22,15 +22,11 @@ describe('Pipelines Triggerer', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
   const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findTriggerer = () => wrapper.findByText('API');
diff --git a/spec/frontend/pipelines/pipeline_url_spec.js b/spec/frontend/pipelines/pipeline_url_spec.js
index c62898f0c83..f00ee4a6367 100644
--- a/spec/frontend/pipelines/pipeline_url_spec.js
+++ b/spec/frontend/pipelines/pipeline_url_spec.js
@@ -35,10 +35,6 @@ describe('Pipeline Url Component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render pipeline url table cell', () => {
     createComponent();
 
diff --git a/spec/frontend/pipelines/pipelines_actions_spec.js b/spec/frontend/pipelines/pipelines_actions_spec.js
index e034d52a33c..2db9f5c2a83 100644
--- a/spec/frontend/pipelines/pipelines_actions_spec.js
+++ b/spec/frontend/pipelines/pipelines_actions_spec.js
@@ -5,7 +5,7 @@ import { nextTick } from 'vue';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
@@ -13,7 +13,7 @@ import PipelinesManualActions from '~/pipelines/components/pipelines_list/pipeli
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import { TRACKING_CATEGORIES } from '~/pipelines/constants';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 
 describe('Pipelines Actions dropdown', () => {
@@ -37,9 +37,6 @@ describe('Pipelines Actions dropdown', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     mock.restore();
     confirmAction.mockReset();
   });
diff --git a/spec/frontend/pipelines/pipelines_artifacts_spec.js b/spec/frontend/pipelines/pipelines_artifacts_spec.js
index e3e54716a7b..9fedbaf9b56 100644
--- a/spec/frontend/pipelines/pipelines_artifacts_spec.js
+++ b/spec/frontend/pipelines/pipelines_artifacts_spec.js
@@ -34,11 +34,6 @@ describe('Pipelines Artifacts dropdown', () => {
   const findAllGlDropdownItems = () =>
     wrapper.findComponent(GlDropdown).findAllComponents(GlDropdownItem);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should render a dropdown with all the provided artifacts', () => {
     createComponent();
 
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index 2523b901506..48539d84024 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -11,7 +11,7 @@ import { mockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
-import { createAlert, VARIANT_WARNING } from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
@@ -25,7 +25,7 @@ import TablePagination from '~/vue_shared/components/pagination/table_pagination
 
 import { stageReply, users, mockSearch, branches } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const mockProjectPath = 'twitter/flight';
 const mockProjectId = '21';
@@ -114,7 +114,6 @@ describe('Pipelines', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.reset();
     window.history.pushState.mockReset();
   });
diff --git a/spec/frontend/pipelines/pipelines_table_spec.js b/spec/frontend/pipelines/pipelines_table_spec.js
index 6ec8901038b..8d2a52eb6d0 100644
--- a/spec/frontend/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/pipelines/pipelines_table_spec.js
@@ -69,12 +69,6 @@ describe('Pipelines Table', () => {
     pipeline = createMockPipeline();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-
-    wrapper = null;
-  });
-
   describe('Pipelines Table', () => {
     beforeEach(() => {
       createComponent({ pipelines: [pipeline], viewType: 'root' });
diff --git a/spec/frontend/pipelines/test_reports/stores/actions_spec.js b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
index f6287107ed0..e05d2151f0a 100644
--- a/spec/frontend/pipelines/test_reports/stores/actions_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
@@ -2,13 +2,13 @@ import MockAdapter from 'axios-mock-adapter';
 import testReports from 'test_fixtures/pipelines/test_report.json';
 import { TEST_HOST } from 'helpers/test_constants';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import * as actions from '~/pipelines/stores/test_reports/actions';
 import * as types from '~/pipelines/stores/test_reports/mutation_types';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Actions TestReports Store', () => {
   let mock;
@@ -49,7 +49,7 @@ describe('Actions TestReports Store', () => {
       );
     });
 
-    it('should create flash on API error', async () => {
+    it('should create alert on API error', async () => {
       await testAction(
         actions.fetchSummary,
         null,
diff --git a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
index ed0cc71eb97..9c374ea817a 100644
--- a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
@@ -1,9 +1,9 @@
 import testReports from 'test_fixtures/pipelines/test_report.json';
 import * as types from '~/pipelines/stores/test_reports/mutation_types';
 import mutations from '~/pipelines/stores/test_reports/mutations';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Mutations TestReports Store', () => {
   let mockState;
@@ -58,7 +58,7 @@ describe('Mutations TestReports Store', () => {
       expect(mockState.errorMessage).toBe(message);
     });
 
-    it('should show a flash message otherwise', () => {
+    it('should show an alert message otherwise', () => {
       mutations[types.SET_SUITE_ERROR](mockState, {});
 
       expect(createAlert).toHaveBeenCalled();
diff --git a/spec/frontend/pipelines/test_reports/test_case_details_spec.js b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
index f194864447c..f8663408817 100644
--- a/spec/frontend/pipelines/test_reports/test_case_details_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
@@ -45,11 +45,6 @@ describe('Test case details', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('required details', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/pipelines/test_reports/test_reports_spec.js b/spec/frontend/pipelines/test_reports/test_reports_spec.js
index 9b9ee4172f9..c8c917a1b9e 100644
--- a/spec/frontend/pipelines/test_reports/test_reports_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_reports_spec.js
@@ -60,10 +60,6 @@ describe('Test reports app', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when component is created', () => {
     it('should call fetchSummary when pipeline has test report', () => {
       createComponent();
diff --git a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
index da13df833e7..8eb83f17f4d 100644
--- a/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_suite_table_spec.js
@@ -65,10 +65,6 @@ describe('Test reports suite table', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render a message when there are no test cases', () => {
     createComponent({ suite: [] });
 
diff --git a/spec/frontend/pipelines/time_ago_spec.js b/spec/frontend/pipelines/time_ago_spec.js
index f0da0df2ba6..efb1bf09d20 100644
--- a/spec/frontend/pipelines/time_ago_spec.js
+++ b/spec/frontend/pipelines/time_ago_spec.js
@@ -30,11 +30,6 @@ describe('Timeago component', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const duration = () => wrapper.find('.duration');
   const finishedAt = () => wrapper.find('.finished-at');
   const findInProgress = () => wrapper.findByTestId('pipeline-in-progress');
diff --git a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
index caa66502e11..d518519a424 100644
--- a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
@@ -71,11 +71,6 @@ describe('Pipeline Branch Name Token', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('passes config correctly', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
diff --git a/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
index c090fd353f7..cf4ccb5ce43 100644
--- a/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_status_token_spec.js
@@ -45,11 +45,6 @@ describe('Pipeline Status Token', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('passes config correctly', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
diff --git a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
index 7311a5d2f5a..88c88d8f16f 100644
--- a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
@@ -53,11 +53,6 @@ describe('Pipeline Branch Name Token', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('passes config correctly', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
diff --git a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
index c763bfe1b27..e9ec684a350 100644
--- a/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js
@@ -52,11 +52,6 @@ describe('Pipeline Trigger Author Token', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('passes config correctly', () => {
     expect(findFilteredSearchToken().props('config')).toEqual(defaultProps.config);
   });
diff --git a/spec/frontend/popovers/components/popovers_spec.js b/spec/frontend/popovers/components/popovers_spec.js
index 1299e7277d1..7f247fbbd4f 100644
--- a/spec/frontend/popovers/components/popovers_spec.js
+++ b/spec/frontend/popovers/components/popovers_spec.js
@@ -33,11 +33,6 @@ describe('popovers/components/popovers.vue', () => {
 
   const allPopovers = () => wrapper.findAllComponents(GlPopover);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('addPopovers', () => {
     it('attaches popovers to the targets specified', async () => {
       const target = createPopoverTarget();
diff --git a/spec/frontend/profile/account/components/delete_account_modal_spec.js b/spec/frontend/profile/account/components/delete_account_modal_spec.js
index e4a316e1ee7..9a8f82f0028 100644
--- a/spec/frontend/profile/account/components/delete_account_modal_spec.js
+++ b/spec/frontend/profile/account/components/delete_account_modal_spec.js
@@ -40,12 +40,6 @@ describe('DeleteAccountModal component', () => {
     vm = wrapper.vm;
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-    vm = null;
-  });
-
   const findElements = () => {
     const confirmation = vm.confirmWithPassword ? 'password' : 'username';
     return {
diff --git a/spec/frontend/profile/account/components/update_username_spec.js b/spec/frontend/profile/account/components/update_username_spec.js
index fa0e86a7b05..d922820601e 100644
--- a/spec/frontend/profile/account/components/update_username_spec.js
+++ b/spec/frontend/profile/account/components/update_username_spec.js
@@ -1,14 +1,15 @@
 import { GlModal } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'helpers/test_constants';
-import { createAlert } from '~/flash';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import UpdateUsername from '~/profile/account/components/update_username.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('UpdateUsername component', () => {
   const rootUrl = TEST_HOST;
@@ -21,8 +22,10 @@ describe('UpdateUsername component', () => {
   let wrapper;
   let axiosMock;
 
+  const findNewUsernameInput = () => wrapper.findByTestId('new-username-input');
+
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(UpdateUsername, {
+    wrapper = shallowMountExtended(UpdateUsername, {
       propsData: {
         ...defaultProps,
         ...props,
@@ -39,8 +42,8 @@ describe('UpdateUsername component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
+    Vue.config.errorHandler = null;
   });
 
   const findElements = () => {
@@ -56,6 +59,13 @@ describe('UpdateUsername component', () => {
     };
   };
 
+  const clickModalWithErrorResponse = () => {
+    Vue.config.errorHandler = jest.fn(); // silence thrown error
+    const { modal } = findElements();
+    modal.vm.$emit('primary');
+    return waitForPromises();
+  };
+
   it('has a disabled button if the username was not changed', async () => {
     const { openModalBtn } = findElements();
 
@@ -80,11 +90,7 @@ describe('UpdateUsername component', () => {
 
     beforeEach(async () => {
       createComponent();
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ newUsername });
-
-      await nextTick();
+      await findNewUsernameInput().setValue(newUsername);
     });
 
     it('confirmation modal contains proper header and body', async () => {
@@ -100,14 +106,15 @@ describe('UpdateUsername component', () => {
       axiosMock.onPut(actionUrl).replyOnce(() => [HTTP_STATUS_OK, { message: 'Username changed' }]);
       jest.spyOn(axios, 'put');
 
-      await wrapper.vm.onConfirm();
-      await nextTick();
+      const { modal } = findElements();
+      modal.vm.$emit('primary');
+      await waitForPromises();
 
       expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } });
     });
 
     it('sets the username after a successful update', async () => {
-      const { input, openModalBtn } = findElements();
+      const { input, openModalBtn, modal } = findElements();
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
         expect(input.attributes('disabled')).toBe('disabled');
@@ -117,8 +124,8 @@ describe('UpdateUsername component', () => {
         return [HTTP_STATUS_OK, { message: 'Username changed' }];
       });
 
-      await wrapper.vm.onConfirm();
-      await nextTick();
+      modal.vm.$emit('primary');
+      await waitForPromises();
 
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(true);
@@ -136,7 +143,8 @@ describe('UpdateUsername component', () => {
         return [HTTP_STATUS_BAD_REQUEST, { message: 'Invalid username' }];
       });
 
-      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+      await clickModalWithErrorResponse();
+
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(false);
       expect(openModalBtn.props('loading')).toBe(false);
@@ -147,7 +155,7 @@ describe('UpdateUsername component', () => {
         return [HTTP_STATUS_BAD_REQUEST, { message: 'Invalid username' }];
       });
 
-      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+      await clickModalWithErrorResponse();
 
       expect(createAlert).toHaveBeenCalledWith({
         message: 'Invalid username',
@@ -159,7 +167,7 @@ describe('UpdateUsername component', () => {
         return [HTTP_STATUS_BAD_REQUEST];
       });
 
-      await expect(wrapper.vm.onConfirm()).rejects.toThrow();
+      await clickModalWithErrorResponse();
 
       expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while updating your username, please try again.',
diff --git a/spec/frontend/profile/components/activity_calendar_spec.js b/spec/frontend/profile/components/activity_calendar_spec.js
new file mode 100644
index 00000000000..fb9dc7b22f7
--- /dev/null
+++ b/spec/frontend/profile/components/activity_calendar_spec.js
@@ -0,0 +1,120 @@
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import * as GitLabUIUtils from '@gitlab/ui/dist/utils';
+
+import ActivityCalendar from '~/profile/components/activity_calendar.vue';
+import AjaxCache from '~/lib/utils/ajax_cache';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { useFakeDate } from 'helpers/fake_date';
+import { userCalendarResponse } from '../mock_data';
+
+jest.mock('~/lib/utils/ajax_cache');
+jest.mock('@gitlab/ui/dist/utils');
+
+describe('ActivityCalendar', () => {
+  // Feb 21st, 2023
+  useFakeDate(2023, 1, 21);
+
+  let wrapper;
+
+  const defaultProvide = {
+    userCalendarPath: '/users/root/calendar.json',
+    utcOffset: '0',
+  };
+
+  const createComponent = () => {
+    wrapper = mountExtended(ActivityCalendar, { provide: defaultProvide });
+  };
+
+  const mockSuccessfulApiRequest = () =>
+    AjaxCache.retrieve.mockResolvedValueOnce(userCalendarResponse);
+  const mockUnsuccessfulApiRequest = () => AjaxCache.retrieve.mockRejectedValueOnce();
+
+  const findCalendar = () => wrapper.findByTestId('contrib-calendar');
+
+  describe('when API request is loading', () => {
+    beforeEach(() => {
+      AjaxCache.retrieve.mockReturnValueOnce(new Promise(() => {}));
+    });
+
+    it('renders loading icon', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
+
+  describe('when API request is successful', () => {
+    beforeEach(() => {
+      mockSuccessfulApiRequest();
+    });
+
+    it('renders the calendar', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findCalendar().exists()).toBe(true);
+      expect(wrapper.findByText(ActivityCalendar.i18n.calendarHint).exists()).toBe(true);
+    });
+
+    describe('when window is resized', () => {
+      it('re-renders the calendar', async () => {
+        createComponent();
+
+        await waitForPromises();
+
+        mockSuccessfulApiRequest();
+        window.innerWidth = 1200;
+        window.dispatchEvent(new Event('resize'));
+
+        await waitForPromises();
+
+        expect(findCalendar().exists()).toBe(true);
+        expect(AjaxCache.retrieve).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+
+  describe('when API request is not successful', () => {
+    beforeEach(() => {
+      mockUnsuccessfulApiRequest();
+    });
+
+    it('renders error', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
+    });
+
+    describe('when retry button is clicked', () => {
+      it('retries API request', async () => {
+        createComponent();
+
+        await waitForPromises();
+
+        mockSuccessfulApiRequest();
+
+        await wrapper.findByRole('button', { name: ActivityCalendar.i18n.retry }).trigger('click');
+
+        await waitForPromises();
+
+        expect(findCalendar().exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('when screen is extra small', () => {
+    beforeEach(() => {
+      GitLabUIUtils.GlBreakpointInstance.getBreakpointSize.mockReturnValueOnce('xs');
+    });
+
+    it('does not render the calendar', () => {
+      createComponent();
+
+      expect(findCalendar().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/profile/components/followers_tab_spec.js b/spec/frontend/profile/components/followers_tab_spec.js
index 4af428c4e0c..9cc5bdea9be 100644
--- a/spec/frontend/profile/components/followers_tab_spec.js
+++ b/spec/frontend/profile/components/followers_tab_spec.js
@@ -1,4 +1,4 @@
-import { GlTab } from '@gitlab/ui';
+import { GlBadge, GlTab } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
 import FollowersTab from '~/profile/components/followers_tab.vue';
@@ -8,12 +8,25 @@ describe('FollowersTab', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMountExtended(FollowersTab);
+    wrapper = shallowMountExtended(FollowersTab, {
+      provide: {
+        followers: 2,
+      },
+    });
   };
 
-  it('renders `GlTab` and sets `title` prop', () => {
+  it('renders `GlTab` and sets title', () => {
     createComponent();
 
-    expect(wrapper.findComponent(GlTab).attributes('title')).toBe(s__('UserProfile|Followers'));
+    expect(wrapper.findComponent(GlTab).element.textContent).toContain(
+      s__('UserProfile|Followers'),
+    );
+  });
+
+  it('renders `GlBadge`, sets size and content', () => {
+    createComponent();
+
+    expect(wrapper.findComponent(GlBadge).attributes('size')).toBe('sm');
+    expect(wrapper.findComponent(GlBadge).element.textContent).toBe('2');
   });
 });
diff --git a/spec/frontend/profile/components/following_tab_spec.js b/spec/frontend/profile/components/following_tab_spec.js
index 75123274ccb..c9d56360c3e 100644
--- a/spec/frontend/profile/components/following_tab_spec.js
+++ b/spec/frontend/profile/components/following_tab_spec.js
@@ -1,4 +1,4 @@
-import { GlTab } from '@gitlab/ui';
+import { GlBadge, GlTab } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
 import FollowingTab from '~/profile/components/following_tab.vue';
@@ -8,12 +8,25 @@ describe('FollowingTab', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMountExtended(FollowingTab);
+    wrapper = shallowMountExtended(FollowingTab, {
+      provide: {
+        followees: 3,
+      },
+    });
   };
 
-  it('renders `GlTab` and sets `title` prop', () => {
+  it('renders `GlTab` and sets title', () => {
     createComponent();
 
-    expect(wrapper.findComponent(GlTab).attributes('title')).toBe(s__('UserProfile|Following'));
+    expect(wrapper.findComponent(GlTab).element.textContent).toContain(
+      s__('UserProfile|Following'),
+    );
+  });
+
+  it('renders `GlBadge`, sets size and content', () => {
+    createComponent();
+
+    expect(wrapper.findComponent(GlBadge).attributes('size')).toBe('sm');
+    expect(wrapper.findComponent(GlBadge).element.textContent).toBe('3');
   });
 });
diff --git a/spec/frontend/profile/components/overview_tab_spec.js b/spec/frontend/profile/components/overview_tab_spec.js
index eb27515bca3..d4cb1dfd15d 100644
--- a/spec/frontend/profile/components/overview_tab_spec.js
+++ b/spec/frontend/profile/components/overview_tab_spec.js
@@ -3,6 +3,7 @@ import { GlTab } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import OverviewTab from '~/profile/components/overview_tab.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ActivityCalendar from '~/profile/components/activity_calendar.vue';
 
 describe('OverviewTab', () => {
   let wrapper;
@@ -16,4 +17,10 @@ describe('OverviewTab', () => {
 
     expect(wrapper.findComponent(GlTab).attributes('title')).toBe(s__('UserProfile|Overview'));
   });
+
+  it('renders `ActivityCalendar` component', () => {
+    createComponent();
+
+    expect(wrapper.findComponent(ActivityCalendar).exists()).toBe(true);
+  });
 });
diff --git a/spec/frontend/profile/components/user_achievements_spec.js b/spec/frontend/profile/components/user_achievements_spec.js
new file mode 100644
index 00000000000..5b584eff362
--- /dev/null
+++ b/spec/frontend/profile/components/user_achievements_spec.js
@@ -0,0 +1,102 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import getUserAchievementsEmptyResponse from 'test_fixtures/graphql/get_user_achievements_empty_response.json';
+import getUserAchievementsLongResponse from 'test_fixtures/graphql/get_user_achievements_long_response.json';
+import getUserAchievementsResponse from 'test_fixtures/graphql/get_user_achievements_with_avatar_and_description_response.json';
+import getUserAchievementsNoAvatarResponse from 'test_fixtures/graphql/get_user_achievements_without_avatar_or_description_response.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import UserAchievements from '~/profile/components/user_achievements.vue';
+import getUserAchievements from '~/profile/components//graphql/get_user_achievements.query.graphql';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+
+const USER_ID = 123;
+const ROOT_URL = 'https://gitlab.com/';
+const PLACEHOLDER_URL = 'https://gitlab.com/assets/gitlab_logo.png';
+const userAchievement1 = getUserAchievementsResponse.data.user.userAchievements.nodes[0];
+
+Vue.use(VueApollo);
+
+describe('UserAchievements', () => {
+  let wrapper;
+
+  const getUserAchievementsQueryHandler = jest.fn().mockResolvedValue(getUserAchievementsResponse);
+  const achievement = () => wrapper.findByTestId('user-achievement');
+
+  const createComponent = ({ queryHandler = getUserAchievementsQueryHandler } = {}) => {
+    const fakeApollo = createMockApollo([[getUserAchievements, queryHandler]]);
+
+    wrapper = mountExtended(UserAchievements, {
+      apolloProvider: fakeApollo,
+      provide: {
+        rootUrl: ROOT_URL,
+        userId: USER_ID,
+      },
+    });
+  };
+
+  it('renders no achievements on reject', async () => {
+    createComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
+
+    await waitForPromises();
+
+    expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
+  });
+
+  it('renders no achievements when none are present', async () => {
+    createComponent({
+      queryHandler: jest.fn().mockResolvedValue(getUserAchievementsEmptyResponse),
+    });
+
+    await waitForPromises();
+
+    expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
+  });
+
+  it('only renders 3 achievements when more are present', async () => {
+    createComponent({ queryHandler: jest.fn().mockResolvedValue(getUserAchievementsLongResponse) });
+
+    await waitForPromises();
+
+    expect(wrapper.findAllByTestId('user-achievement').length).toBe(3);
+  });
+
+  it('renders achievement correctly', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(achievement().text()).toContain(userAchievement1.achievement.name);
+    expect(achievement().text()).toContain(
+      `Awarded ${timeagoMixin.methods.timeFormatted(userAchievement1.createdAt)} by`,
+    );
+    expect(achievement().text()).toContain(userAchievement1.achievement.namespace.fullPath);
+    expect(achievement().text()).toContain(userAchievement1.achievement.description);
+    expect(achievement().find('img').attributes('src')).toBe(
+      userAchievement1.achievement.avatarUrl,
+    );
+  });
+
+  it('renders a placeholder when no avatar is present', async () => {
+    gon.gitlab_logo = PLACEHOLDER_URL;
+    createComponent({
+      queryHandler: jest.fn().mockResolvedValue(getUserAchievementsNoAvatarResponse),
+    });
+
+    await waitForPromises();
+
+    expect(achievement().find('img').attributes('src')).toBe(PLACEHOLDER_URL);
+  });
+
+  it('does not render a description when none is present', async () => {
+    gon.gitlab_logo = PLACEHOLDER_URL;
+    createComponent({
+      queryHandler: jest.fn().mockResolvedValue(getUserAchievementsNoAvatarResponse),
+    });
+
+    await waitForPromises();
+
+    expect(wrapper.findAllByTestId('achievement-description').length).toBe(0);
+  });
+});
diff --git a/spec/frontend/profile/mock_data.js b/spec/frontend/profile/mock_data.js
new file mode 100644
index 00000000000..7106ea84619
--- /dev/null
+++ b/spec/frontend/profile/mock_data.js
@@ -0,0 +1,22 @@
+export const userCalendarResponse = {
+  '2022-11-18': 13,
+  '2022-11-19': 21,
+  '2022-11-20': 14,
+  '2022-11-21': 15,
+  '2022-11-22': 20,
+  '2022-11-23': 21,
+  '2022-11-24': 15,
+  '2022-11-25': 14,
+  '2022-11-26': 16,
+  '2022-11-27': 13,
+  '2022-11-28': 4,
+  '2022-11-29': 1,
+  '2022-11-30': 1,
+  '2022-12-13': 1,
+  '2023-01-10': 3,
+  '2023-01-11': 2,
+  '2023-01-20': 1,
+  '2023-02-02': 1,
+  '2023-02-06': 2,
+  '2023-02-07': 2,
+};
diff --git a/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js b/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js
index e60602ab336..e69bfad765a 100644
--- a/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js
+++ b/spec/frontend/profile/preferences/components/diffs_colors_preview_spec.js
@@ -12,11 +12,6 @@ describe('DiffsColorsPreview component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders diff colors preview', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/profile/preferences/components/diffs_colors_spec.js b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
index 02f501a0b06..e80851d0629 100644
--- a/spec/frontend/profile/preferences/components/diffs_colors_spec.js
+++ b/spec/frontend/profile/preferences/components/diffs_colors_spec.js
@@ -29,11 +29,6 @@ describe('DiffsColors component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('mounts', () => {
     createComponent();
 
diff --git a/spec/frontend/profile/preferences/components/integration_view_spec.js b/spec/frontend/profile/preferences/components/integration_view_spec.js
index f650bee7fda..b809f2f4aed 100644
--- a/spec/frontend/profile/preferences/components/integration_view_spec.js
+++ b/spec/frontend/profile/preferences/components/integration_view_spec.js
@@ -38,11 +38,6 @@ describe('IntegrationView component', () => {
   const findHiddenField = () =>
     wrapper.findByTestId('profile-preferences-integration-hidden-field');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should render the form group legend correctly', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
index 91cd868daac..21167dccda9 100644
--- a/spec/frontend/profile/preferences/components/profile_preferences_spec.js
+++ b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import { createAlert, VARIANT_DANGER, VARIANT_INFO } from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_INFO } from '~/alert';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
 import { i18n } from '~/profile/preferences/constants';
@@ -17,7 +17,7 @@ import {
   lightModeThemeId2,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const expectedUrl = '/foo';
 
 useMockLocationHelper();
@@ -83,11 +83,6 @@ describe('ProfilePreferences component', () => {
     document.body.classList.add('content-wrapper');
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should not render Integrations section', () => {
     wrapper = createComponent();
     const views = wrapper.findAllComponents(IntegrationView);
diff --git a/spec/frontend/profile/utils_spec.js b/spec/frontend/profile/utils_spec.js
new file mode 100644
index 00000000000..43537afe169
--- /dev/null
+++ b/spec/frontend/profile/utils_spec.js
@@ -0,0 +1,15 @@
+import { getVisibleCalendarPeriod } from '~/profile/utils';
+import { CALENDAR_PERIOD_12_MONTHS, CALENDAR_PERIOD_6_MONTHS } from '~/profile/constants';
+
+describe('getVisibleCalendarPeriod', () => {
+  it.each`
+    width   | expected
+    ${1000} | ${CALENDAR_PERIOD_12_MONTHS}
+    ${900}  | ${CALENDAR_PERIOD_6_MONTHS}
+  `('returns $expected when container width is $width', ({ width, expected }) => {
+    const container = document.createElement('div');
+    jest.spyOn(container, 'getBoundingClientRect').mockReturnValueOnce({ width });
+
+    expect(getVisibleCalendarPeriod(container)).toBe(expected);
+  });
+});
diff --git a/spec/frontend/projects/clusters_deprecation_slert/components/clusters_deprecation_alert_spec.js b/spec/frontend/projects/clusters_deprecation_slert/components/clusters_deprecation_alert_spec.js
index d230b96ad82..68ea3a4dc4d 100644
--- a/spec/frontend/projects/clusters_deprecation_slert/components/clusters_deprecation_alert_spec.js
+++ b/spec/frontend/projects/clusters_deprecation_slert/components/clusters_deprecation_alert_spec.js
@@ -26,10 +26,6 @@ describe('ClustersDeprecationAlert', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('should render a non-dismissible warning alert', () => {
       expect(findAlert().props()).toMatchObject({
diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
index 6aa5a9a5a3a..0e68bd21cd4 100644
--- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js
@@ -12,7 +12,7 @@ describe('BranchesDropdown', () => {
   let store;
   const spyFetchBranches = jest.fn();
 
-  const createComponent = (props, state = { isFetching: false }) => {
+  const createComponent = (props, state = { isFetching: false, branch: '_main_' }) => {
     store = new Vuex.Store({
       getters: {
         joinedBranches: () => ['_main_', '_branch_1_', '_branch_2_'],
@@ -41,8 +41,6 @@ describe('BranchesDropdown', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     spyFetchBranches.mockReset();
   });
 
diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js
index c59cf700e0d..84cb30953c3 100644
--- a/spec/frontend/projects/commit/components/form_modal_spec.js
+++ b/spec/frontend/projects/commit/components/form_modal_spec.js
@@ -55,7 +55,6 @@ describe('CommitFormModal', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
@@ -166,7 +165,7 @@ describe('CommitFormModal', () => {
 
     it('Changes the target_project_id input value', async () => {
       createComponent(shallowMount, {}, {}, { isCherryPick: true });
-      findProjectsDropdown().vm.$emit('selectProject', '_changed_project_value_');
+      findProjectsDropdown().vm.$emit('input', '_changed_project_value_');
 
       await nextTick();
 
diff --git a/spec/frontend/projects/commit/components/projects_dropdown_spec.js b/spec/frontend/projects/commit/components/projects_dropdown_spec.js
index 0e213ff388a..baf2ea2656f 100644
--- a/spec/frontend/projects/commit/components/projects_dropdown_spec.js
+++ b/spec/frontend/projects/commit/components/projects_dropdown_spec.js
@@ -1,6 +1,6 @@
 import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ProjectsDropdown from '~/projects/commit/components/projects_dropdown.vue';
@@ -38,7 +38,6 @@ describe('ProjectsDropdown', () => {
   const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
 
   afterEach(() => {
-    wrapper.destroy();
     spyFetchProjects.mockReset();
   });
 
@@ -48,20 +47,24 @@ describe('ProjectsDropdown', () => {
     });
 
     describe('Custom events', () => {
-      it('should emit selectProject if a project is clicked', () => {
+      it('should emit input if a project is clicked', () => {
         findDropdown().vm.$emit('select', '1');
 
-        expect(wrapper.emitted('selectProject')).toEqual([['1']]);
+        expect(wrapper.emitted('input')).toEqual([['1']]);
       });
     });
   });
 
   describe('Case insensitive for search term', () => {
     beforeEach(() => {
-      createComponent('_PrOjEcT_1_');
+      createComponent('_PrOjEcT_1_', { targetProjectId: '1' });
     });
 
-    it('renders only the project searched for', () => {
+    it('renders only the project searched for', async () => {
+      findDropdown().vm.$emit('search', '_project_1_');
+
+      await nextTick();
+
       expect(findDropdown().props('items')).toEqual([{ text: '_project_1_', value: '1' }]);
     });
   });
diff --git a/spec/frontend/projects/commit/store/actions_spec.js b/spec/frontend/projects/commit/store/actions_spec.js
index 008710984b9..d48f9fd6fc0 100644
--- a/spec/frontend/projects/commit/store/actions_spec.js
+++ b/spec/frontend/projects/commit/store/actions_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { PROJECT_BRANCHES_ERROR } from '~/projects/commit/constants';
 import * as actions from '~/projects/commit/store/actions';
@@ -8,7 +8,7 @@ import * as types from '~/projects/commit/store/mutation_types';
 import getInitialState from '~/projects/commit/store/state';
 import mockData from '../mock_data';
 
-jest.mock('~/flash.js');
+jest.mock('~/alert');
 
 describe('Commit form modal store actions', () => {
   let axiosMock;
@@ -63,7 +63,7 @@ describe('Commit form modal store actions', () => {
       );
     });
 
-    it('should show flash error and set error in state on fetchBranches failure', async () => {
+    it('should show alert error and set error in state on fetchBranches failure', async () => {
       jest.spyOn(axios, 'get').mockRejectedValue();
 
       await testAction(actions.fetchBranches, {}, state, [], [{ type: 'requestBranches' }]);
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 907e0e226b6..ff1d860fd53 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -54,7 +54,6 @@ describe('Author Select', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/projects/commits/store/actions_spec.js b/spec/frontend/projects/commits/store/actions_spec.js
index bae9c48fc1e..f5184e59420 100644
--- a/spec/frontend/projects/commits/store/actions_spec.js
+++ b/spec/frontend/projects/commits/store/actions_spec.js
@@ -1,13 +1,13 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import actions from '~/projects/commits/store/actions';
 import * as types from '~/projects/commits/store/mutation_types';
 import createState from '~/projects/commits/store/state';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Project commits actions', () => {
   let state;
@@ -34,8 +34,8 @@ describe('Project commits actions', () => {
       ]));
   });
 
-  describe('shows a flash message when there is an error', () => {
-    it('creates a flash', () => {
+  describe('shows an alert message when there is an error', () => {
+    it('creates an alert', () => {
       const mockDispatchContext = { dispatch: () => {}, commit: () => {}, state };
       actions.receiveAuthorsError(mockDispatchContext);
 
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index 9b052a17caa..ee96f46ea0c 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -21,11 +21,6 @@ describe('CompareApp component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeEach(() => {
     createComponent();
   });
diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
index 21cca857c6a..0b1085470b8 100644
--- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
@@ -16,11 +16,6 @@ describe('RepoDropdown component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findHiddenInput = () => wrapper.find('input[type="hidden"]');
 
diff --git a/spec/frontend/projects/compare/components/revision_card_spec.js b/spec/frontend/projects/compare/components/revision_card_spec.js
index b23bd91ceda..3c9c61c8903 100644
--- a/spec/frontend/projects/compare/components/revision_card_spec.js
+++ b/spec/frontend/projects/compare/components/revision_card_spec.js
@@ -16,11 +16,6 @@ describe('RepoDropdown component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeEach(() => {
     createComponent();
   });
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
index 53763bd7d8f..645d0483a5f 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
@@ -1,8 +1,8 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
-import { createAlert } from '~/flash';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue';
@@ -14,7 +14,7 @@ const defaultProps = {
   paramsBranch: 'main',
 };
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('RevisionDropdown component', () => {
   let wrapper;
@@ -35,11 +35,14 @@ describe('RevisionDropdown component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findBranchesDropdownItem = () =>
+    wrapper.findAllComponents('[data-testid="branches-dropdown-item"]');
+  const findTagsDropdownItem = () =>
+    wrapper.findAllComponents('[data-testid="tags-dropdown-item"]');
 
   it('sets hidden input', () => {
     expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe(
@@ -58,10 +61,21 @@ describe('RevisionDropdown component', () => {
 
     createComponent();
 
-    await axios.waitForAll();
+    expect(findBranchesDropdownItem()).toHaveLength(0);
+    expect(findTagsDropdownItem()).toHaveLength(0);
 
-    expect(wrapper.vm.branches).toEqual(Branches);
-    expect(wrapper.vm.tags).toEqual(Tags);
+    await waitForPromises();
+
+    Branches.forEach((branch, index) => {
+      expect(findBranchesDropdownItem().at(index).text()).toBe(branch);
+    });
+
+    Tags.forEach((tag, index) => {
+      expect(findTagsDropdownItem().at(index).text()).toBe(tag);
+    });
+
+    expect(findBranchesDropdownItem()).toHaveLength(Branches.length);
+    expect(findTagsDropdownItem()).toHaveLength(Tags.length);
   });
 
   it('sets branches and tags to be an empty array when no tags or branches are given', async () => {
@@ -70,16 +84,17 @@ describe('RevisionDropdown component', () => {
       Tags: undefined,
     });
 
-    await axios.waitForAll();
+    await waitForPromises();
 
-    expect(wrapper.vm.branches).toEqual([]);
-    expect(wrapper.vm.tags).toEqual([]);
+    expect(findBranchesDropdownItem()).toHaveLength(0);
+    expect(findTagsDropdownItem()).toHaveLength(0);
   });
 
-  it('shows flash message on error', async () => {
+  it('shows alert message on error', async () => {
     axiosMock.onGet('some/invalid/path').replyOnce(HTTP_STATUS_NOT_FOUND);
 
-    await wrapper.vm.fetchBranchesAndTags();
+    await waitForPromises();
+
     expect(createAlert).toHaveBeenCalled();
   });
 
@@ -102,17 +117,19 @@ describe('RevisionDropdown component', () => {
     it('emits a "selectRevision" event when a revision is selected', async () => {
       const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
       const findFirstGlDropdownItem = () => findGlDropdownItems().at(0);
+      const branchName = 'some-branch';
 
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ branches: ['some-branch'] });
+      axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, {
+        Branches: [branchName],
+      });
 
-      await nextTick();
+      createComponent();
+      await waitForPromises();
 
       findFirstGlDropdownItem().vm.$emit('click');
 
       expect(wrapper.emitted()).toEqual({
-        selectRevision: [[{ direction: 'from', revision: 'some-branch' }]],
+        selectRevision: [[{ direction: 'from', revision: branchName }]],
       });
     });
   });
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index db4a1158996..3a256682549 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -2,13 +2,14 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
-import { createAlert } from '~/flash';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
 import { revisionDropdownDefaultProps as defaultProps } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('RevisionDropdown component', () => {
   let wrapper;
@@ -32,12 +33,15 @@ describe('RevisionDropdown component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     axiosMock.restore();
   });
 
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findBranchesDropdownItem = () =>
+    wrapper.findAllComponents('[data-testid="branches-dropdown-item"]');
+  const findTagsDropdownItem = () =>
+    wrapper.findAllComponents('[data-testid="tags-dropdown-item"]');
 
   it('sets hidden input', () => {
     createComponent();
@@ -57,17 +61,29 @@ describe('RevisionDropdown component', () => {
 
     createComponent();
 
-    await axios.waitForAll();
-    expect(wrapper.vm.branches).toEqual(Branches);
-    expect(wrapper.vm.tags).toEqual(Tags);
+    expect(findBranchesDropdownItem()).toHaveLength(0);
+    expect(findTagsDropdownItem()).toHaveLength(0);
+
+    await waitForPromises();
+
+    expect(findBranchesDropdownItem()).toHaveLength(Branches.length);
+    expect(findTagsDropdownItem()).toHaveLength(Tags.length);
+
+    Branches.forEach((branch, index) => {
+      expect(findBranchesDropdownItem().at(index).text()).toBe(branch);
+    });
+
+    Tags.forEach((tag, index) => {
+      expect(findTagsDropdownItem().at(index).text()).toBe(tag);
+    });
   });
 
-  it('shows flash message on error', async () => {
+  it('shows alert message on error', async () => {
     axiosMock.onGet('some/invalid/path').replyOnce(HTTP_STATUS_NOT_FOUND);
 
     createComponent();
+    await waitForPromises();
 
-    await wrapper.vm.fetchBranchesAndTags();
     expect(createAlert).toHaveBeenCalled();
   });
 
@@ -83,17 +99,17 @@ describe('RevisionDropdown component', () => {
       refsProjectPath: newRefsProjectPath,
     });
 
-    await axios.waitForAll();
+    await waitForPromises();
     expect(axios.get).toHaveBeenLastCalledWith(newRefsProjectPath);
   });
 
   describe('search', () => {
-    it('shows flash message on error', async () => {
+    it('shows alert message on error', async () => {
       axiosMock.onGet('some/invalid/path').replyOnce(HTTP_STATUS_NOT_FOUND);
 
       createComponent();
+      await waitForPromises();
 
-      await wrapper.vm.searchBranchesAndTags();
       expect(createAlert).toHaveBeenCalled();
     });
 
@@ -108,7 +124,7 @@ describe('RevisionDropdown component', () => {
       const mockSearchTerm = 'foobar';
       createComponent();
       findSearchBox().vm.$emit('input', mockSearchTerm);
-      await axios.waitForAll();
+      await waitForPromises();
 
       expect(axios.get).toHaveBeenCalledWith(
         defaultProps.refsProjectPath,
@@ -141,8 +157,14 @@ describe('RevisionDropdown component', () => {
   });
 
   it('emits `selectRevision` event when another revision is selected', async () => {
+    jest.spyOn(axios, 'get').mockResolvedValue({
+      data: {
+        Branches: ['some-branch'],
+        Tags: [],
+      },
+    });
+
     createComponent();
-    wrapper.vm.branches = ['some-branch'];
     await nextTick();
 
     findGlDropdown().findAllComponents(GlDropdownItem).at(0).vm.$emit('click');
diff --git a/spec/frontend/projects/components/project_delete_button_spec.js b/spec/frontend/projects/components/project_delete_button_spec.js
index 49e3218e5bc..bae76e7eeb6 100644
--- a/spec/frontend/projects/components/project_delete_button_spec.js
+++ b/spec/frontend/projects/components/project_delete_button_spec.js
@@ -33,11 +33,6 @@ describe('Project remove modal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('initialized', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js
index 097b18025a3..364a29d0e41 100644
--- a/spec/frontend/projects/components/shared/delete_button_spec.js
+++ b/spec/frontend/projects/components/shared/delete_button_spec.js
@@ -45,11 +45,6 @@ describe('Project remove modal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('intialized', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/projects/details/upload_button_spec.js b/spec/frontend/projects/details/upload_button_spec.js
index 50638755260..e9b11ce544a 100644
--- a/spec/frontend/projects/details/upload_button_spec.js
+++ b/spec/frontend/projects/details/upload_button_spec.js
@@ -27,10 +27,6 @@ describe('UploadButton', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays an upload button', () => {
     expect(wrapper.findComponent(GlButton).exists()).toBe(true);
   });
diff --git a/spec/frontend/projects/new/components/app_spec.js b/spec/frontend/projects/new/components/app_spec.js
index f6edbab3cca..5b2dc25077e 100644
--- a/spec/frontend/projects/new/components/app_spec.js
+++ b/spec/frontend/projects/new/components/app_spec.js
@@ -6,12 +6,12 @@ describe('Experimental new project creation app', () => {
   let wrapper;
 
   const createComponent = (propsData) => {
-    wrapper = shallowMount(App, { propsData });
+    wrapper = shallowMount(App, {
+      propsData: { projectsUrl: '/dashboard/projects', ...propsData },
+    });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findNewNamespacePage = () => wrapper.findComponent(NewNamespacePage);
 
   it('passes custom new project guideline text to underlying component', () => {
     const DEMO_GUIDELINES = 'Demo guidelines';
@@ -34,11 +34,28 @@ describe('Experimental new project creation app', () => {
 
     expect(
       Boolean(
-        wrapper
-          .findComponent(NewNamespacePage)
+        findNewNamespacePage()
           .props()
           .panels.find((p) => p.name === 'cicd_for_external_repo'),
       ),
     ).toBe(isCiCdAvailable);
   });
+
+  it('creates correct breadcrumbs for top-level projects', () => {
+    createComponent();
+
+    expect(findNewNamespacePage().props('initialBreadcrumbs')).toEqual([
+      { href: '/dashboard/projects', text: 'Projects' },
+      { href: '#', text: 'New project' },
+    ]);
+  });
+
+  it('creates correct breadcrumbs for projects within groups', () => {
+    createComponent({ parentGroupUrl: '/parent-group', parentGroupName: 'Parent Group' });
+
+    expect(findNewNamespacePage().props('initialBreadcrumbs')).toEqual([
+      { href: '/parent-group', text: 'Parent Group' },
+      { href: '#', text: 'New project' },
+    ]);
+  });
 });
diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js
index f3b22d4a1b9..bec738f7765 100644
--- a/spec/frontend/projects/new/components/deployment_target_select_spec.js
+++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js
@@ -47,7 +47,6 @@ describe('Deployment target select', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
index 16b4493c622..1a43dcb682b 100644
--- a/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
+++ b/spec/frontend/projects/new/components/new_project_push_tip_popover_spec.js
@@ -37,7 +37,6 @@ describe('New project push tip popover', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js
index 67532cea61e..fa720f4487c 100644
--- a/spec/frontend/projects/new/components/new_project_url_select_spec.js
+++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js
@@ -3,8 +3,8 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownSectionHeader,
-  GlSearchBoxByType,
   GlTruncate,
+  GlSearchBoxByType,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
@@ -12,6 +12,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import { stubComponent } from 'helpers/stub_component';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import eventHub from '~/projects/new/event_hub';
 import NewProjectUrlSelect from '~/projects/new/components/new_project_url_select.vue';
@@ -68,6 +69,7 @@ describe('NewProjectUrlSelect component', () => {
   };
 
   let mockQueryResponse;
+  let focusInputSpy;
 
   const mountComponent = ({
     search = '',
@@ -78,6 +80,7 @@ describe('NewProjectUrlSelect component', () => {
     mockQueryResponse = jest.fn().mockResolvedValue({ data: queryResponse });
     const requestHandlers = [[searchQuery, mockQueryResponse]];
     const apolloProvider = createMockApollo(requestHandlers);
+    focusInputSpy = jest.fn();
 
     return mountFn(NewProjectUrlSelect, {
       apolloProvider,
@@ -87,13 +90,17 @@ describe('NewProjectUrlSelect component', () => {
           search,
         };
       },
+      stubs: {
+        GlSearchBoxByType: stubComponent(GlSearchBoxByType, {
+          methods: { focusInput: focusInputSpy },
+        }),
+      },
     });
   };
 
   const findButtonLabel = () => wrapper.findComponent(GlButton);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findSelectedPath = () => wrapper.findComponent(GlTruncate);
-  const findInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findHiddenNamespaceInput = () => wrapper.find(`[name="${defaultProvide.inputName}`);
 
   const findHiddenSelectedNamespaceInput = () =>
@@ -111,10 +118,6 @@ describe('NewProjectUrlSelect component', () => {
     await waitForPromises();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the root url as a label', () => {
     wrapper = mountComponent();
 
@@ -177,13 +180,11 @@ describe('NewProjectUrlSelect component', () => {
   });
 
   it('focuses on the input when the dropdown is opened', async () => {
-    wrapper = mountComponent({ mountFn: mount });
-
-    const spy = jest.spyOn(findInput().vm, 'focusInput');
+    wrapper = mountComponent();
 
     await showDropdown();
 
-    expect(spy).toHaveBeenCalledTimes(1);
+    expect(focusInputSpy).toHaveBeenCalledTimes(1);
   });
 
   it('renders expected dropdown items', async () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
index fc51825f15b..1545c52d7cb 100644
--- a/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
+++ b/spec/frontend/projects/pipelines/charts/components/__snapshots__/ci_cd_analytics_area_chart_spec.js.snap
@@ -8,20 +8,19 @@ exports[`CiCdAnalyticsAreaChart matches the snapshot 1`] = `
     Some title
   </p>
    
-  <div>
-    <glareachart-stub
-      annotations=""
-      data="[object Object],[object Object]"
-      height="300"
-      legendaveragetext="Avg"
-      legendcurrenttext="Current"
-      legendlayout="inline"
-      legendmaxtext="Max"
-      legendmintext="Min"
-      option="[object Object]"
-      thresholds=""
-      width="0"
-    />
-  </div>
+  <glareachart-stub
+    annotations=""
+    data="[object Object],[object Object]"
+    height="300"
+    legendaveragetext="Avg"
+    legendcurrenttext="Current"
+    legendlayout="inline"
+    legendmaxtext="Max"
+    legendmintext="Min"
+    option="[object Object]"
+    responsive=""
+    thresholds=""
+    width="auto"
+  />
 </div>
 `;
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index d8876349c5e..94f421239da 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -49,10 +49,6 @@ describe('ProjectsPipelinesChartsApp', () => {
     );
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlTabs = () => wrapper.findComponent(GlTabs);
   const findAllGlTabs = () => wrapper.findAllComponents(GlTab);
   const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
index 2b523467379..5fc121b5c9f 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_area_chart_spec.js
@@ -28,11 +28,6 @@ describe('CiCdAnalyticsAreaChart', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index 8fb59f38ee1..ab2a12219e5 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -37,11 +37,6 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
     await waitForPromises();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('overall statistics', () => {
     it('displays the statistics list', () => {
       const list = wrapper.findComponent(StatisticsList);
diff --git a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
index 57a864cb2c4..24dbc628ce6 100644
--- a/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/statistics_list_spec.js
@@ -21,10 +21,6 @@ describe('StatisticsList', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays the counts data with labels', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/projects/prune_unreachable_objects_button_spec.js b/spec/frontend/projects/prune_unreachable_objects_button_spec.js
index b345f264ca7..012b19ea3d3 100644
--- a/spec/frontend/projects/prune_unreachable_objects_button_spec.js
+++ b/spec/frontend/projects/prune_unreachable_objects_button_spec.js
@@ -22,16 +22,11 @@ describe('Project remove modal', () => {
     wrapper = shallowMountExtended(PruneObjectsButton, {
       propsData: defaultProps,
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-modal'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('intialized', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
index 11f219c1f90..6d3317a5f78 100644
--- a/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
@@ -8,10 +8,10 @@ import BranchDropdown, {
 import createMockApollo from 'helpers/mock_apollo_helper';
 import branchesQuery from '~/projects/settings/branch_rules/queries/branches.query.graphql';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 Vue.use(VueApollo);
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Branch dropdown', () => {
   let wrapper;
@@ -46,10 +46,6 @@ describe('Branch dropdown', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a GlDropdown component with the correct props', () => {
     expect(findGlDropdown().props()).toMatchObject({ text: value });
   });
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
index 21e63fdb24d..e9982872e03 100644
--- a/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
@@ -24,10 +24,6 @@ describe('Edit branch rule', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('gets the branch param from url', () => {
     expect(getParameterByName).toHaveBeenCalledWith('branch');
   });
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
index ee90ff8318f..14edaf31a1f 100644
--- a/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
@@ -26,10 +26,6 @@ describe('Branch Protections', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a heading', () => {
     expect(findHeading().text()).toBe(i18n.protections);
   });
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
index b5fdc46d600..ca561ef87ec 100644
--- a/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
@@ -24,10 +24,6 @@ describe('Merge Protections', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a form group with the correct label', () => {
     expect(findFormGroup().text()).toContain(i18n.allowedToMerge);
   });
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
index 60bb7a51dcb..82998640f17 100644
--- a/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
@@ -24,10 +24,6 @@ describe('Push Protections', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a form group with the correct label', () => {
     expect(findFormGroup().attributes('label')).toBe(i18n.allowedToPush);
   });
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
index 714e0df596e..077995ab6e4 100644
--- a/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
@@ -9,6 +9,10 @@ import Protection from '~/projects/settings/branch_rules/components/view/protect
 import {
   I18N,
   ALL_BRANCHES_WILDCARD,
+  REQUIRED_ICON,
+  NOT_REQUIRED_ICON,
+  REQUIRED_ICON_CLASS,
+  NOT_REQUIRED_ICON_CLASS,
 } from '~/projects/settings/branch_rules/components/view/constants';
 import branchRulesQuery from 'ee_else_ce/projects/settings/branch_rules/queries/branch_rules_details.query.graphql';
 import { sprintf } from '~/locale';
@@ -19,7 +23,7 @@ import {
 
 jest.mock('~/lib/utils/url_utility', () => ({
   getParameterByName: jest.fn().mockReturnValue('main'),
-  mergeUrlParams: jest.fn().mockReturnValue('/branches?state=all&search=main'),
+  mergeUrlParams: jest.fn().mockReturnValue('/branches?state=all&search=%5Emain%24'),
   joinPaths: jest.fn(),
 }));
 
@@ -39,12 +43,13 @@ describe('View branch rules', () => {
   let fakeApollo;
   const projectPath = 'test/testing';
   const protectedBranchesPath = 'protected/branches';
-  const branchProtectionsMockRequestHandler = jest
-    .fn()
-    .mockResolvedValue(branchProtectionsMockResponse);
+  const branchProtectionsMockRequestHandler = (response = branchProtectionsMockResponse) =>
+    jest.fn().mockResolvedValue(response);
 
-  const createComponent = async () => {
-    fakeApollo = createMockApollo([[branchRulesQuery, branchProtectionsMockRequestHandler]]);
+  const createComponent = async (mockResponse) => {
+    fakeApollo = createMockApollo([
+      [branchRulesQuery, branchProtectionsMockRequestHandler(mockResponse)],
+    ]);
 
     wrapper = shallowMountExtended(RuleView, {
       apolloProvider: fakeApollo,
@@ -57,13 +62,13 @@ describe('View branch rules', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   const findBranchName = () => wrapper.findByTestId('branch');
   const findBranchTitle = () => wrapper.findByTestId('branch-title');
   const findBranchProtectionTitle = () => wrapper.findByText(I18N.protectBranchTitle);
   const findBranchProtections = () => wrapper.findAllComponents(Protection);
-  const findForcePushTitle = () => wrapper.findByText(I18N.allowForcePushDescription);
+  const findForcePushIcon = () => wrapper.findByTestId('force-push-icon');
+  const findForcePushTitle = (title) => wrapper.findByText(title);
+  const findForcePushDescription = () => wrapper.findByText(I18N.forcePushDescription);
   const findApprovalsTitle = () => wrapper.findByText(I18N.approvalsTitle);
   const findStatusChecksTitle = () => wrapper.findByText(I18N.statusChecksTitle);
   const findMatchingBranchesLink = () =>
@@ -94,9 +99,12 @@ describe('View branch rules', () => {
   });
 
   it('renders matching branches link', () => {
+    const mergeUrlParams = jest.spyOn(util, 'mergeUrlParams');
     const matchingBranchesLink = findMatchingBranchesLink();
+
+    expect(mergeUrlParams).toHaveBeenCalledWith({ state: 'all', search: `^main$` }, '');
     expect(matchingBranchesLink.exists()).toBe(true);
-    expect(matchingBranchesLink.attributes().href).toBe('/branches?state=all&search=main');
+    expect(matchingBranchesLink.attributes().href).toBe('/branches?state=all&search=%5Emain%24');
   });
 
   it('renders a branch protection title', () => {
@@ -123,9 +131,23 @@ describe('View branch rules', () => {
       });
   });
 
-  it('renders force push protection', () => {
-    expect(findForcePushTitle().exists()).toBe(true);
-  });
+  it.each`
+    allowForcePush | iconName             | iconClass                  | title
+    ${true}        | ${REQUIRED_ICON}     | ${REQUIRED_ICON_CLASS}     | ${I18N.allowForcePushTitle}
+    ${false}       | ${NOT_REQUIRED_ICON} | ${NOT_REQUIRED_ICON_CLASS} | ${I18N.doesNotAllowForcePushTitle}
+  `(
+    'renders force push section with the correct icon, title and description',
+    async ({ allowForcePush, iconName, iconClass, title }) => {
+      const mockResponse = branchProtectionsMockResponse;
+      mockResponse.data.project.branchRules.nodes[0].branchProtection.allowForcePush = allowForcePush;
+      await createComponent(mockResponse);
+
+      expect(findForcePushIcon().props('name')).toBe(iconName);
+      expect(findForcePushIcon().attributes('class')).toBe(iconClass);
+      expect(findForcePushTitle(title).exists()).toBe(true);
+      expect(findForcePushDescription().exists()).toBe(true);
+    },
+  );
 
   it('renders a branch protection component for merge rules', () => {
     expect(findBranchProtections().at(1).props()).toMatchObject({
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
index a98b156f94e..1bfd04e10a1 100644
--- a/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
@@ -18,8 +18,6 @@ describe('Branch rule protection row', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   const findTitle = () => wrapper.findByText(protectionRowPropsMock.title);
   const findAvatarsInline = () => wrapper.findComponent(GlAvatarsInline);
   const findAvatarLinks = () => wrapper.findAllComponents(GlAvatarLink);
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
index caf967b4257..f10d8d6d770 100644
--- a/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
@@ -16,8 +16,6 @@ describe('Branch rule protection', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   const findCard = () => wrapper.findComponent(GlCard);
   const findHeader = () => wrapper.findByText(protectionPropsMock.header);
   const findLink = () => wrapper.findComponent(GlLink);
diff --git a/spec/frontend/projects/settings/components/default_branch_selector_spec.js b/spec/frontend/projects/settings/components/default_branch_selector_spec.js
index ca9a72663d2..c1412d01b53 100644
--- a/spec/frontend/projects/settings/components/default_branch_selector_spec.js
+++ b/spec/frontend/projects/settings/components/default_branch_selector_spec.js
@@ -19,10 +19,6 @@ describe('projects/settings/components/default_branch_selector', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     buildWrapper();
   });
diff --git a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
index 26297d0c3ff..f3e536de703 100644
--- a/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
+++ b/spec/frontend/projects/settings/components/new_access_dropdown_spec.js
@@ -89,15 +89,12 @@ describe('Access Level Dropdown', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownToggleLabel = () => findDropdown().props('text');
   const findAllDropdownItems = () => findDropdown().findAllComponents(GlDropdownItem);
   const findAllDropdownHeaders = () => findDropdown().findAllComponents(GlDropdownSectionHeader);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findDeployKeyDropdownItem = () => wrapper.findByTestId('deploy_key-dropdown-item');
 
   const findDropdownItemWithText = (items, text) =>
     items.filter((item) => item.text().includes(text)).at(0);
@@ -142,6 +139,21 @@ describe('Access Level Dropdown', () => {
     it('renders dropdown item for each access level type', () => {
       expect(findAllDropdownItems()).toHaveLength(12);
     });
+
+    it.each`
+      accessLevel             | shouldRenderDeployKeyItems
+      ${ACCESS_LEVELS.PUSH}   | ${true}
+      ${ACCESS_LEVELS.CREATE} | ${true}
+      ${ACCESS_LEVELS.MERGE}  | ${false}
+    `(
+      'conditionally renders deploy keys based on access levels',
+      async ({ accessLevel, shouldRenderDeployKeyItems }) => {
+        createComponent({ accessLevel });
+        await waitForPromises();
+
+        expect(findDeployKeyDropdownItem().exists()).toBe(shouldRenderDeployKeyItems);
+      },
+    );
   });
 
   describe('toggleLabel', () => {
diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
index f82ad80135e..0ec0e981d65 100644
--- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
+++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
@@ -9,7 +9,7 @@ import SharedRunnersToggleComponent from '~/projects/settings/components/shared_
 
 const TEST_UPDATE_PATH = '/test/update_shared_runners';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('projects/settings/components/shared_runners', () => {
   let wrapper;
@@ -41,8 +41,6 @@ describe('projects/settings/components/shared_runners', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     mockAxios.restore();
   });
 
diff --git a/spec/frontend/projects/settings/components/transfer_project_form_spec.js b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
index e091f3e25c3..d8c2cf83f38 100644
--- a/spec/frontend/projects/settings/components/transfer_project_form_spec.js
+++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
@@ -31,10 +31,6 @@ describe('Transfer project form', () => {
   const findTransferLocations = () => wrapper.findComponent(TransferLocations);
   const findConfirmDanger = () => wrapper.findComponent(ConfirmDanger);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the namespace selector and passes `groupTransferLocationsApiMethod` prop', () => {
     createComponent();
 
diff --git a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
index 56b39f04580..dd534bec25d 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
@@ -7,7 +7,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BranchRules from '~/projects/settings/repository/branch_rules/app.vue';
 import BranchRule from '~/projects/settings/repository/branch_rules/components/branch_rule.vue';
 import branchRulesQuery from 'ee_else_ce/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   branchRulesMockResponse,
   appProvideMock,
@@ -22,7 +22,7 @@ import { expandSection } from '~/settings_panels';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/settings_panels');
 jest.mock('~/lib/utils/common_utils');
 
@@ -41,7 +41,7 @@ describe('Branch rules app', () => {
       apolloProvider: fakeApollo,
       provide: appProvideMock,
       stubs: { GlModal: stubComponent(GlModal, { template: RENDER_ALL_SLOTS_TEMPLATE }) },
-      directives: { GlModal: createMockDirective() },
+      directives: { GlModal: createMockDirective('gl-modal') },
     });
 
     await waitForPromises();
diff --git a/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
index 8d0fd390e35..8bea84f4429 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/components/branch_rule_spec.js
@@ -71,8 +71,10 @@ describe('Branch rule', () => {
   });
 
   it('renders a detail button with the correct href', () => {
+    const encodedBranchName = encodeURIComponent(branchRulePropsMock.name);
+
     expect(findDetailsButton().attributes('href')).toBe(
-      `${branchRuleProvideMock.branchRulesPath}?branch=${branchRulePropsMock.name}`,
+      `${branchRuleProvideMock.branchRulesPath}?branch=${encodedBranchName}`,
     );
   });
 });
diff --git a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
index de7f6c8b88d..d169397241d 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
@@ -74,7 +74,7 @@ export const branchRuleProvideMock = {
 };
 
 export const branchRulePropsMock = {
-  name: 'main',
+  name: 'branch-with-$speci@l-#-chars',
   isDefault: true,
   matchingBranchesCount: 1,
   branchProtection: {
diff --git a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
index 8b8e7d1454d..4b94c179f74 100644
--- a/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
+++ b/spec/frontend/projects/settings/topics/components/topics_token_selector_spec.js
@@ -64,7 +64,6 @@ describe('TopicsTokenSelector', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     div.remove();
     input.remove();
   });
diff --git a/spec/frontend/projects/settings/utils_spec.js b/spec/frontend/projects/settings/utils_spec.js
index 319aa4000b5..d85f43778b1 100644
--- a/spec/frontend/projects/settings/utils_spec.js
+++ b/spec/frontend/projects/settings/utils_spec.js
@@ -1,4 +1,5 @@
-import { getAccessLevels } from '~/projects/settings/utils';
+import { getAccessLevels, generateRefDestinationPath } from '~/projects/settings/utils';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { pushAccessLevelsMockResponse, pushAccessLevelsMockResult } from './mock_data';
 
 describe('Utils', () => {
@@ -8,4 +9,25 @@ describe('Utils', () => {
       expect(pushAccessLevels).toEqual(pushAccessLevelsMockResult);
     });
   });
+
+  describe('generateRefDestinationPath', () => {
+    const projectRootPath = 'http://test.host/root/Project1';
+    const settingsCi = '-/settings/ci_cd';
+
+    it.each`
+      currentPath                           | selectedRef             | result
+      ${`${projectRootPath}`}               | ${undefined}            | ${`${projectRootPath}`}
+      ${`${projectRootPath}`}               | ${'test'}               | ${`${projectRootPath}`}
+      ${`${projectRootPath}/${settingsCi}`} | ${'test'}               | ${`${projectRootPath}/${settingsCi}?ref=test`}
+      ${`${projectRootPath}/${settingsCi}`} | ${'branch-hyphen'}      | ${`${projectRootPath}/${settingsCi}?ref=branch-hyphen`}
+      ${`${projectRootPath}/${settingsCi}`} | ${'test/branch'}        | ${`${projectRootPath}/${settingsCi}?ref=test%2Fbranch`}
+      ${`${projectRootPath}/${settingsCi}`} | ${'test/branch-hyphen'} | ${`${projectRootPath}/${settingsCi}?ref=test%2Fbranch-hyphen`}
+    `(
+      'generates the correct destination path for the `$selectedRef` ref and current url $currentPath by outputting $result',
+      ({ currentPath, selectedRef, result }) => {
+        setWindowLocation(currentPath);
+        expect(generateRefDestinationPath(selectedRef)).toBe(result);
+      },
+    );
+  });
 });
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
index 5fc9f9ba629..4d0d2191176 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
@@ -41,7 +41,6 @@ describe('ServiceDeskRoot', () => {
 
   afterEach(() => {
     axiosMock.restore();
-    wrapper.destroy();
     if (spy) {
       spy.mockRestore();
     }
diff --git a/spec/frontend/projects/terraform_notification/terraform_notification_spec.js b/spec/frontend/projects/terraform_notification/terraform_notification_spec.js
index 6576ce70d60..1d0faebbcb2 100644
--- a/spec/frontend/projects/terraform_notification/terraform_notification_spec.js
+++ b/spec/frontend/projects/terraform_notification/terraform_notification_spec.js
@@ -41,10 +41,6 @@ describe('TerraformNotificationBanner', () => {
     trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when user has already dismissed the banner', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js
index b4029d94980..4141d000a1c 100644
--- a/spec/frontend/protected_branches/protected_branch_edit_spec.js
+++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js
@@ -2,12 +2,12 @@ import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_URL = `${TEST_HOST}/url`;
 const FORCE_PUSH_TOGGLE_TESTID = 'force-push-toggle';
@@ -149,7 +149,7 @@ describe('ProtectedBranchEdit', () => {
         toggle.click();
       });
 
-      it('flashes error', async () => {
+      it('alerts error', async () => {
         await axios.waitForAll();
 
         expect(createAlert).toHaveBeenCalled();
diff --git a/spec/frontend/ref/components/__snapshots__/ref_selector_spec.js.snap b/spec/frontend/ref/components/__snapshots__/ref_selector_spec.js.snap
deleted file mode 100644
index 5053778369e..00000000000
--- a/spec/frontend/ref/components/__snapshots__/ref_selector_spec.js.snap
+++ /dev/null
@@ -1,80 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Ref selector component footer slot passes the expected slot props 1`] = `
-Object {
-  "isLoading": false,
-  "matches": Object {
-    "branches": Object {
-      "error": null,
-      "list": Array [
-        Object {
-          "default": false,
-          "name": "add_images_and_changes",
-          "value": undefined,
-        },
-        Object {
-          "default": false,
-          "name": "conflict-contains-conflict-markers",
-          "value": undefined,
-        },
-        Object {
-          "default": false,
-          "name": "deleted-image-test",
-          "value": undefined,
-        },
-        Object {
-          "default": false,
-          "name": "diff-files-image-to-symlink",
-          "value": undefined,
-        },
-        Object {
-          "default": false,
-          "name": "diff-files-symlink-to-image",
-          "value": undefined,
-        },
-        Object {
-          "default": false,
-          "name": "markdown",
-          "value": undefined,
-        },
-        Object {
-          "default": true,
-          "name": "master",
-          "value": undefined,
-        },
-      ],
-      "totalCount": 123,
-    },
-    "commits": Object {
-      "error": null,
-      "list": Array [
-        Object {
-          "name": "b83d6e39",
-          "subtitle": "Merge branch 'branch-merged' into 'master'",
-          "value": "b83d6e391c22777fca1ed3012fce84f633d7fed0",
-        },
-      ],
-      "totalCount": 1,
-    },
-    "tags": Object {
-      "error": null,
-      "list": Array [
-        Object {
-          "name": "v1.1.1",
-          "value": undefined,
-        },
-        Object {
-          "name": "v1.1.0",
-          "value": undefined,
-        },
-        Object {
-          "name": "v1.0.0",
-          "value": undefined,
-        },
-      ],
-      "totalCount": 456,
-    },
-  },
-  "query": "abcd1234",
-}
-`;
diff --git a/spec/frontend/ref/components/ref_selector_spec.js b/spec/frontend/ref/components/ref_selector_spec.js
index 40d3a291074..6b90827f9c2 100644
--- a/spec/frontend/ref/components/ref_selector_spec.js
+++ b/spec/frontend/ref/components/ref_selector_spec.js
@@ -4,9 +4,9 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { merge, last } from 'lodash';
 import Vuex from 'vuex';
+import tags from 'test_fixtures/api/tags/tags.json';
 import commit from 'test_fixtures/api/commits/commit.json';
 import branches from 'test_fixtures/api/branches/branches.json';
-import tags from 'test_fixtures/api/tags/tags.json';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
 import {
@@ -33,6 +33,8 @@ describe('Ref selector component', () => {
   const fixtures = { branches, tags, commit };
 
   const projectId = '8';
+  const totalBranchesCount = 123;
+  const totalTagsCount = 456;
 
   let wrapper;
   let branchesApiCallSpy;
@@ -69,10 +71,14 @@ describe('Ref selector component', () => {
 
     branchesApiCallSpy = jest
       .fn()
-      .mockReturnValue([HTTP_STATUS_OK, fixtures.branches, { [X_TOTAL_HEADER]: '123' }]);
+      .mockReturnValue([
+        HTTP_STATUS_OK,
+        fixtures.branches,
+        { [X_TOTAL_HEADER]: totalBranchesCount },
+      ]);
     tagsApiCallSpy = jest
       .fn()
-      .mockReturnValue([HTTP_STATUS_OK, fixtures.tags, { [X_TOTAL_HEADER]: '456' }]);
+      .mockReturnValue([HTTP_STATUS_OK, fixtures.tags, { [X_TOTAL_HEADER]: totalTagsCount }]);
     commitApiCallSpy = jest.fn().mockReturnValue([HTTP_STATUS_OK, fixtures.commit]);
     requestSpies = { branchesApiCallSpy, tagsApiCallSpy, commitApiCallSpy };
 
@@ -690,7 +696,46 @@ describe('Ref selector component', () => {
       // is updated. For the sake of this test, we'll just test the last call, which
       // represents the final state of the slot props.
       const lastCallProps = last(createFooter.mock.calls)[0];
-      expect(lastCallProps).toMatchSnapshot();
+      expect(lastCallProps.isLoading).toBe(false);
+      expect(lastCallProps.query).toBe('abcd1234');
+
+      const branchesList = fixtures.branches.map((branch) => {
+        return {
+          default: branch.default,
+          name: branch.name,
+        };
+      });
+
+      const commitsList = [
+        {
+          name: fixtures.commit.short_id,
+          subtitle: fixtures.commit.title,
+          value: fixtures.commit.id,
+        },
+      ];
+
+      const tagsList = fixtures.tags.map((tag) => {
+        return {
+          name: tag.name,
+        };
+      });
+
+      const expectedMatches = {
+        branches: {
+          list: branchesList,
+          totalCount: totalBranchesCount,
+        },
+        commits: {
+          list: commitsList,
+          totalCount: 1,
+        },
+        tags: {
+          list: tagsList,
+          totalCount: totalTagsCount,
+        },
+      };
+
+      expect(lastCallProps.matches).toMatchObject(expectedMatches);
     });
   });
 });
diff --git a/spec/frontend/releases/components/app_edit_new_spec.js b/spec/frontend/releases/components/app_edit_new_spec.js
index bd61e4537f9..dcb6a3293a6 100644
--- a/spec/frontend/releases/components/app_edit_new_spec.js
+++ b/spec/frontend/releases/components/app_edit_new_spec.js
@@ -16,6 +16,7 @@ import AssetLinksForm from '~/releases/components/asset_links_form.vue';
 import ConfirmDeleteModal from '~/releases/components/confirm_delete_modal.vue';
 import { BACK_URL_PARAM } from '~/releases/constants';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { ValidationResult } from '~/lib/utils/ref_validator';
 
 const originalRelease = originalOneReleaseForEditingQueryResponse.data.project.release;
 const originalMilestones = originalRelease.milestones;
@@ -58,6 +59,7 @@ describe('Release edit/new component', () => {
         assets: {
           links: [],
         },
+        tagNameValidation: new ValidationResult(),
       }),
       formattedReleaseNotes: () => 'these notes are formatted',
     };
@@ -101,11 +103,6 @@ describe('Release edit/new component', () => {
     release = convertOneReleaseGraphQLResponse(originalOneReleaseForEditingQueryResponse).data;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findSubmitButton = () => wrapper.find('button[type=submit]');
   const findForm = () => wrapper.find('form');
 
diff --git a/spec/frontend/releases/components/app_index_spec.js b/spec/frontend/releases/components/app_index_spec.js
index ef3bd5ca873..7a0e9fb7326 100644
--- a/spec/frontend/releases/components/app_index_spec.js
+++ b/spec/frontend/releases/components/app_index_spec.js
@@ -6,7 +6,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import allReleasesQuery from '~/releases/graphql/queries/all_releases.query.graphql';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { historyPushState } from '~/lib/utils/common_utils';
 import { sprintf, __ } from '~/locale';
 import ReleasesIndexApp from '~/releases/components/app_index.vue';
@@ -20,7 +20,7 @@ import { deleteReleaseSessionKey } from '~/releases/util';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 let mockQueryParams;
 jest.mock('~/lib/utils/common_utils', () => ({
@@ -114,7 +114,7 @@ describe('app_index.vue', () => {
     const toDescription = (bool) => (bool ? 'does' : 'does not');
 
     describe.each`
-      description                                                       | singleResponseFn                  | fullResponseFn                  | loadingIndicator | emptyState | flashMessage | releaseCount | pagination
+      description                                                       | singleResponseFn                  | fullResponseFn                  | loadingIndicator | emptyState | alertMessage | releaseCount | pagination
       ${'both requests loading'}                                        | ${getInProgressResponse}          | ${getInProgressResponse}        | ${true}          | ${false}   | ${false}     | ${0}         | ${false}
       ${'both requests failed'}                                         | ${getErrorResponse}               | ${getErrorResponse}             | ${false}         | ${false}   | ${true}      | ${0}         | ${false}
       ${'both requests loaded'}                                         | ${getSingleRequestLoadedResponse} | ${getFullRequestLoadedResponse} | ${false}         | ${false}   | ${false}     | ${2}         | ${true}
@@ -134,7 +134,7 @@ describe('app_index.vue', () => {
         fullResponseFn,
         loadingIndicator,
         emptyState,
-        flashMessage,
+        alertMessage,
         releaseCount,
         pagination,
       }) => {
@@ -154,9 +154,9 @@ describe('app_index.vue', () => {
           expect(findEmptyState().exists()).toBe(emptyState);
         });
 
-        it(`${toDescription(flashMessage)} show a flash message`, async () => {
+        it(`${toDescription(alertMessage)} show a flash message`, async () => {
           await waitForPromises();
-          if (flashMessage) {
+          if (alertMessage) {
             expect(createAlert).toHaveBeenCalledWith({
               message: ReleasesIndexApp.i18n.errorMessage,
               captureError: true,
diff --git a/spec/frontend/releases/components/app_show_spec.js b/spec/frontend/releases/components/app_show_spec.js
index efe72e8000a..942280cb6a2 100644
--- a/spec/frontend/releases/components/app_show_spec.js
+++ b/spec/frontend/releases/components/app_show_spec.js
@@ -4,14 +4,14 @@ import VueApollo from 'vue-apollo';
 import oneReleaseQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { popCreateReleaseNotification } from '~/releases/release_notification_service';
 import ReleaseShowApp from '~/releases/components/app_show.vue';
 import ReleaseBlock from '~/releases/components/release_block.vue';
 import ReleaseSkeletonLoader from '~/releases/components/release_skeleton_loader.vue';
 import oneReleaseQuery from '~/releases/graphql/queries/one_release.query.graphql';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/releases/release_notification_service');
 
 Vue.use(VueApollo);
@@ -33,11 +33,6 @@ describe('Release show component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findLoadingSkeleton = () => wrapper.findComponent(ReleaseSkeletonLoader);
   const findReleaseBlock = () => wrapper.findComponent(ReleaseBlock);
 
@@ -54,13 +49,13 @@ describe('Release show component', () => {
   };
 
   const expectNoFlash = () => {
-    it('does not show a flash message', () => {
+    it('does not show an alert message', () => {
       expect(createAlert).not.toHaveBeenCalled();
     });
   };
 
   const expectFlashWithMessage = (message) => {
-    it(`shows a flash message that reads "${message}"`, () => {
+    it(`shows an alert message that reads "${message}"`, () => {
       expect(createAlert).toHaveBeenCalledWith({
         message,
         captureError: true,
@@ -152,7 +147,7 @@ describe('Release show component', () => {
     beforeEach(async () => {
       // As we return a release as `null`, Apollo also throws an error to the console
       // about the missing field. We need to suppress console.error in order to check
-      // that flash message was called
+      // that alert message was called
 
       // eslint-disable-next-line no-console
       console.error = jest.fn();
diff --git a/spec/frontend/releases/components/asset_links_form_spec.js b/spec/frontend/releases/components/asset_links_form_spec.js
index b1e9d8d1256..8eee9acd808 100644
--- a/spec/frontend/releases/components/asset_links_form_spec.js
+++ b/spec/frontend/releases/components/asset_links_form_spec.js
@@ -60,11 +60,6 @@ describe('Release edit component', () => {
     release = commonUtils.convertObjectPropsToCamelCase(originalRelease, { deep: true });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with a basic store state', () => {
     beforeEach(() => {
       factory();
diff --git a/spec/frontend/releases/components/confirm_delete_modal_spec.js b/spec/frontend/releases/components/confirm_delete_modal_spec.js
index f7c526c1ced..b4699302779 100644
--- a/spec/frontend/releases/components/confirm_delete_modal_spec.js
+++ b/spec/frontend/releases/components/confirm_delete_modal_spec.js
@@ -42,10 +42,6 @@ describe('~/releases/components/confirm_delete_modal.vue', () => {
     factory();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('button', () => {
     it('should open the modal on click', async () => {
       await wrapper.findByRole('button', { name: 'Delete' }).trigger('click');
diff --git a/spec/frontend/releases/components/evidence_block_spec.js b/spec/frontend/releases/components/evidence_block_spec.js
index 69443cb7a11..42eac31e5ac 100644
--- a/spec/frontend/releases/components/evidence_block_spec.js
+++ b/spec/frontend/releases/components/evidence_block_spec.js
@@ -27,10 +27,6 @@ describe('Evidence Block', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the evidence icon', () => {
     expect(wrapper.findComponent(GlIcon).props('name')).toBe('review-list');
   });
diff --git a/spec/frontend/releases/components/issuable_stats_spec.js b/spec/frontend/releases/components/issuable_stats_spec.js
index 3ac75e138ee..c8cdf9cb951 100644
--- a/spec/frontend/releases/components/issuable_stats_spec.js
+++ b/spec/frontend/releases/components/issuable_stats_spec.js
@@ -34,11 +34,6 @@ describe('~/releases/components/issuable_stats.vue', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches snapshot', () => {
     createComponent();
 
diff --git a/spec/frontend/releases/components/release_block_footer_spec.js b/spec/frontend/releases/components/release_block_footer_spec.js
index 19b41d05a44..12e3807c9fa 100644
--- a/spec/frontend/releases/components/release_block_footer_spec.js
+++ b/spec/frontend/releases/components/release_block_footer_spec.js
@@ -33,11 +33,6 @@ describe('Release block footer', () => {
     release = cloneDeep(originalRelease);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const commitInfoSection = () => wrapper.find('.js-commit-info');
   const commitInfoSectionLink = () => commitInfoSection().findComponent(GlLink);
   const tagInfoSection = () => wrapper.find('.js-tag-info');
diff --git a/spec/frontend/releases/components/release_block_header_spec.js b/spec/frontend/releases/components/release_block_header_spec.js
index fc421776d60..dd39a1bce53 100644
--- a/spec/frontend/releases/components/release_block_header_spec.js
+++ b/spec/frontend/releases/components/release_block_header_spec.js
@@ -25,10 +25,6 @@ describe('Release block header', () => {
     release = convertObjectPropsToCamelCase(originalRelease, { deep: true });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findHeader = () => wrapper.find('h2');
   const findHeaderLink = () => findHeader().findComponent(GlLink);
   const findEditButton = () => wrapper.find('.js-edit-button');
diff --git a/spec/frontend/releases/components/release_block_milestone_info_spec.js b/spec/frontend/releases/components/release_block_milestone_info_spec.js
index 541d487091c..b8030ae1fd2 100644
--- a/spec/frontend/releases/components/release_block_milestone_info_spec.js
+++ b/spec/frontend/releases/components/release_block_milestone_info_spec.js
@@ -25,11 +25,6 @@ describe('Release block milestone info', () => {
     milestones = convertObjectPropsToCamelCase(originalMilestones, { deep: true });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const milestoneProgressBarContainer = () => wrapper.find('.js-milestone-progress-bar-container');
   const milestoneListContainer = () => wrapper.find('.js-milestone-list-container');
   const issuesContainer = () => wrapper.find('[data-testid="issue-stats"]');
diff --git a/spec/frontend/releases/components/release_block_spec.js b/spec/frontend/releases/components/release_block_spec.js
index f1b8554fbc3..3355b5ab2c3 100644
--- a/spec/frontend/releases/components/release_block_spec.js
+++ b/spec/frontend/releases/components/release_block_spec.js
@@ -39,10 +39,6 @@ describe('Release block', () => {
     release = convertOneReleaseGraphQLResponse(originalOneReleaseQueryResponse).data;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with default props', () => {
     beforeEach(() => factory(release));
 
diff --git a/spec/frontend/releases/components/releases_pagination_spec.js b/spec/frontend/releases/components/releases_pagination_spec.js
index 59be808c802..923d84ae2b3 100644
--- a/spec/frontend/releases/components/releases_pagination_spec.js
+++ b/spec/frontend/releases/components/releases_pagination_spec.js
@@ -29,10 +29,6 @@ describe('releases_pagination.vue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const singlePageInfo = {
     hasPreviousPage: false,
     hasNextPage: false,
diff --git a/spec/frontend/releases/components/releases_sort_spec.js b/spec/frontend/releases/components/releases_sort_spec.js
index c6e1846d252..92199896ab4 100644
--- a/spec/frontend/releases/components/releases_sort_spec.js
+++ b/spec/frontend/releases/components/releases_sort_spec.js
@@ -17,10 +17,6 @@ describe('releases_sort.vue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSorting = () => wrapper.findComponent(GlSorting);
   const findSortingItems = () => wrapper.findAllComponents(GlSortingItem);
   const findReleasedDateItem = () =>
diff --git a/spec/frontend/releases/components/tag_field_exsting_spec.js b/spec/frontend/releases/components/tag_field_exsting_spec.js
index 8105aa4f6f2..0e896eb645c 100644
--- a/spec/frontend/releases/components/tag_field_exsting_spec.js
+++ b/spec/frontend/releases/components/tag_field_exsting_spec.js
@@ -37,11 +37,6 @@ describe('releases/components/tag_field_existing', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     it('shows the tag name', () => {
       createComponent();
diff --git a/spec/frontend/releases/components/tag_field_new_spec.js b/spec/frontend/releases/components/tag_field_new_spec.js
index fcba0da3462..2508495429c 100644
--- a/spec/frontend/releases/components/tag_field_new_spec.js
+++ b/spec/frontend/releases/components/tag_field_new_spec.js
@@ -9,6 +9,7 @@ import { __ } from '~/locale';
 import TagFieldNew from '~/releases/components/tag_field_new.vue';
 import createStore from '~/releases/stores';
 import createEditNewModule from '~/releases/stores/modules/edit_new';
+import { i18n } from '~/releases/constants';
 
 const TEST_TAG_NAME = 'test-tag-name';
 const TEST_TAG_MESSAGE = 'Test tag message';
@@ -81,7 +82,6 @@ describe('releases/components/tag_field_new', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
@@ -210,9 +210,7 @@ describe('releases/components/tag_field_new', () => {
           store.state.editNew.existingRelease = {};
 
           await expectValidationMessageToBe('shown');
-          expect(findTagNameFormGroup().text()).toContain(
-            __('Selected tag is already in use. Choose another option.'),
-          );
+          expect(findTagNameFormGroup().text()).toContain(i18n.tagIsAlredyInUseMessage);
         });
       });
 
@@ -222,7 +220,7 @@ describe('releases/components/tag_field_new', () => {
           findTagNameDropdown().vm.$emit('hide');
 
           await expectValidationMessageToBe('shown');
-          expect(findTagNameFormGroup().text()).toContain(__('Tag name is required.'));
+          expect(findTagNameFormGroup().text()).toContain(i18n.tagNameIsRequiredMessage);
         });
       });
     });
diff --git a/spec/frontend/releases/components/tag_field_spec.js b/spec/frontend/releases/components/tag_field_spec.js
index 85a40f02c53..8509c347291 100644
--- a/spec/frontend/releases/components/tag_field_spec.js
+++ b/spec/frontend/releases/components/tag_field_spec.js
@@ -24,11 +24,6 @@ describe('releases/components/tag_field', () => {
   const findTagFieldNew = () => wrapper.findComponent(TagFieldNew);
   const findTagFieldExisting = () => wrapper.findComponent(TagFieldExisting);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when an existing release is being edited', () => {
     beforeEach(() => {
       createComponent({ isExistingRelease: true });
diff --git a/spec/frontend/releases/release_notification_service_spec.js b/spec/frontend/releases/release_notification_service_spec.js
index 2344d4b929a..a90bfa3dcbd 100644
--- a/spec/frontend/releases/release_notification_service_spec.js
+++ b/spec/frontend/releases/release_notification_service_spec.js
@@ -2,9 +2,9 @@ import {
   popCreateReleaseNotification,
   putCreateReleaseNotification,
 } from '~/releases/release_notification_service';
-import { createAlert, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/alert';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('~/releases/release_notification_service', () => {
   const projectPath = 'test-project-path';
@@ -35,7 +35,7 @@ describe('~/releases/release_notification_service', () => {
         expect(item).toBe(null);
       });
 
-      it('should create a flash message', () => {
+      it('should create an alert message', () => {
         expect(createAlert).toHaveBeenCalledTimes(1);
         expect(createAlert).toHaveBeenCalledWith({
           message: `Release ${releaseName} has been successfully created.`,
@@ -49,7 +49,7 @@ describe('~/releases/release_notification_service', () => {
         popCreateReleaseNotification(projectPath);
       });
 
-      it('should not create a flash message', () => {
+      it('should not create an alert message', () => {
         expect(createAlert).toHaveBeenCalledTimes(0);
       });
     });
diff --git a/spec/frontend/releases/stores/modules/detail/actions_spec.js b/spec/frontend/releases/stores/modules/detail/actions_spec.js
index ca3b2d5f734..2fca3396a1f 100644
--- a/spec/frontend/releases/stores/modules/detail/actions_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/actions_spec.js
@@ -2,7 +2,7 @@ import { cloneDeep } from 'lodash';
 import originalOneReleaseForEditingQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/one_release_for_editing.query.graphql.json';
 import testAction from 'helpers/vuex_action_helper';
 import { getTag } from '~/api/tags_api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { ASSET_LINK_TYPE } from '~/releases/constants';
@@ -21,7 +21,7 @@ import {
 
 jest.mock('~/api/tags_api');
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 jest.mock('~/releases/release_notification_service');
 
@@ -154,7 +154,7 @@ describe('Release edit/new actions', () => {
           ]);
         });
 
-        it(`shows a flash message`, () => {
+        it(`shows an alert message`, () => {
           return actions.fetchRelease({ commit: jest.fn(), state, rootState: state }).then(() => {
             expect(createAlert).toHaveBeenCalledTimes(1);
             expect(createAlert).toHaveBeenCalledWith({
@@ -380,7 +380,7 @@ describe('Release edit/new actions', () => {
           ]);
         });
 
-        it(`shows a flash message`, () => {
+        it(`shows an alert message`, () => {
           return actions
             .createRelease({ commit: jest.fn(), dispatch: jest.fn(), state, getters: {} })
             .then(() => {
@@ -406,7 +406,7 @@ describe('Release edit/new actions', () => {
           ]);
         });
 
-        it(`shows a flash message`, () => {
+        it(`shows an alert message`, () => {
           return actions
             .createRelease({ commit: jest.fn(), dispatch: jest.fn(), state, getters: {} })
             .then(() => {
@@ -538,7 +538,7 @@ describe('Release edit/new actions', () => {
           expect(commit.mock.calls).toEqual([[types.RECEIVE_SAVE_RELEASE_ERROR, error]]);
         });
 
-        it('shows a flash message', async () => {
+        it('shows an alert message', async () => {
           await actions.updateRelease({ commit, dispatch, state, getters });
 
           expect(createAlert).toHaveBeenCalledTimes(1);
@@ -558,7 +558,7 @@ describe('Release edit/new actions', () => {
             ]);
           });
 
-          it('shows a flash message', async () => {
+          it('shows an alert message', async () => {
             await actions.updateRelease({ commit, dispatch, state, getters });
 
             expect(createAlert).toHaveBeenCalledTimes(1);
@@ -711,7 +711,7 @@ describe('Release edit/new actions', () => {
         expect(commit.mock.calls).toContainEqual([types.RECEIVE_SAVE_RELEASE_ERROR, error]);
       });
 
-      it('shows a flash message', async () => {
+      it('shows an alert message', async () => {
         await actions.deleteRelease({ commit, dispatch, state, getters });
 
         expect(createAlert).toHaveBeenCalledTimes(1);
@@ -747,7 +747,7 @@ describe('Release edit/new actions', () => {
         ]);
       });
 
-      it('shows a flash message', async () => {
+      it('shows an alert message', async () => {
         await actions.deleteRelease({ commit, dispatch, state, getters });
 
         expect(createAlert).toHaveBeenCalledTimes(1);
@@ -778,7 +778,7 @@ describe('Release edit/new actions', () => {
 
       expect(getTag).toHaveBeenCalledWith(state.projectId, tagName);
     });
-    it('creates a flash on error', async () => {
+    it('creates an alert on error', async () => {
       error = new Error();
       getTag.mockRejectedValue(error);
 
diff --git a/spec/frontend/releases/stores/modules/detail/getters_spec.js b/spec/frontend/releases/stores/modules/detail/getters_spec.js
index f8b87ec71dc..649e772f956 100644
--- a/spec/frontend/releases/stores/modules/detail/getters_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/getters_spec.js
@@ -1,5 +1,16 @@
 import { s__ } from '~/locale';
 import * as getters from '~/releases/stores/modules/edit_new/getters';
+import { i18n } from '~/releases/constants';
+import { validateTag, ValidationResult } from '~/lib/utils/ref_validator';
+
+jest.mock('~/lib/utils/ref_validator', () => {
+  const original = jest.requireActual('~/lib/utils/ref_validator');
+  return {
+    __esModule: true,
+    ValidationResult: original.ValidationResult,
+    validateTag: jest.fn(() => new original.ValidationResult()),
+  };
+});
 
 describe('Release edit/new getters', () => {
   describe('releaseLinksToCreate', () => {
@@ -59,23 +70,23 @@ describe('Release edit/new getters', () => {
   });
 
   describe('validationErrors', () => {
+    const validState = {
+      release: {
+        tagName: 'test-tag-name',
+        assets: {
+          links: [
+            { id: 1, url: 'https://example.com/valid', name: 'Link 1' },
+            { id: 2, url: '', name: '' },
+            { id: 3, url: '', name: ' ' },
+            { id: 4, url: ' ', name: '' },
+            { id: 5, url: ' ', name: ' ' },
+          ],
+        },
+      },
+    };
     describe('when the form is valid', () => {
+      const state = validState;
       it('returns no validation errors', () => {
-        const state = {
-          release: {
-            tagName: 'test-tag-name',
-            assets: {
-              links: [
-                { id: 1, url: 'https://example.com/valid', name: 'Link 1' },
-                { id: 2, url: '', name: '' },
-                { id: 3, url: '', name: ' ' },
-                { id: 4, url: ' ', name: '' },
-                { id: 5, url: ' ', name: ' ' },
-              ],
-            },
-          },
-        };
-
         const expectedErrors = {
           assets: {
             links: {
@@ -88,7 +99,27 @@ describe('Release edit/new getters', () => {
           },
         };
 
-        expect(getters.validationErrors(state)).toEqual(expectedErrors);
+        expect(getters.validationErrors(state).assets).toEqual(expectedErrors.assets);
+        expect(getters.validationErrors(state).tagNameValidation.isValid).toBe(true);
+      });
+    });
+
+    describe('when validating tag', () => {
+      const state = validState;
+      it('validateTag is called with right parameters', () => {
+        getters.validationErrors(state);
+        expect(validateTag).toHaveBeenCalledWith(state.release.tagName);
+      });
+
+      it('validation error is correctly returned', () => {
+        const validationError = new ValidationResult();
+        const errorText = 'Tag format validation error';
+        validationError.addValidationError(errorText);
+        validateTag.mockReturnValue(validationError);
+
+        const result = getters.validationErrors(state);
+        expect(validateTag).toHaveBeenCalledWith(state.release.tagName);
+        expect(result.tagNameValidation.validationErrors).toContain(errorText);
       });
     });
 
@@ -140,19 +171,17 @@ describe('Release edit/new getters', () => {
       });
 
       it('returns a validation error if the tag name is empty', () => {
-        const expectedErrors = {
-          isTagNameEmpty: true,
-        };
-
-        expect(actualErrors).toMatchObject(expectedErrors);
+        expect(actualErrors.tagNameValidation.isValid).toBe(false);
+        expect(actualErrors.tagNameValidation.validationErrors).toContain(
+          i18n.tagNameIsRequiredMessage,
+        );
       });
 
       it('returns a validation error if the tag has an existing release', () => {
-        const expectedErrors = {
-          existingRelease: true,
-        };
-
-        expect(actualErrors).toMatchObject(expectedErrors);
+        expect(actualErrors.tagNameValidation.isValid).toBe(false);
+        expect(actualErrors.tagNameValidation.validationErrors).toContain(
+          i18n.tagIsAlredyInUseMessage,
+        );
       });
 
       it('returns a validation error if links share a URL', () => {
diff --git a/spec/frontend/repository/commits_service_spec.js b/spec/frontend/repository/commits_service_spec.js
index e56975d021a..22ef552c2f9 100644
--- a/spec/frontend/repository/commits_service_spec.js
+++ b/spec/frontend/repository/commits_service_spec.js
@@ -2,11 +2,11 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { loadCommits, isRequested, resetRequestedCommits } from '~/repository/commits_service';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { I18N_COMMIT_DATA_FETCH_ERROR } from '~/repository/constants';
 import { refWithSpecialCharMock } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('commits service', () => {
   let mock;
diff --git a/spec/frontend/repository/components/blob_button_group_spec.js b/spec/frontend/repository/components/blob_button_group_spec.js
index 33a85c04fcf..96dedd54126 100644
--- a/spec/frontend/repository/components/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/blob_button_group_spec.js
@@ -38,10 +38,6 @@ describe('BlobButtonGroup component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDeleteBlobModal = () => wrapper.findComponent(DeleteBlobModal);
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
   const findDeleteButton = () => wrapper.findByTestId('delete');
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 03a8ee6ac5d..a588251c4bd 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -175,7 +175,6 @@ describe('Blob content viewer component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mockAxios.reset();
   });
 
@@ -482,11 +481,6 @@ describe('Blob content viewer component', () => {
         repository: { empty },
       } = projectMock;
 
-      afterEach(() => {
-        delete gon.current_user_id;
-        delete gon.current_username;
-      });
-
       it('renders component', async () => {
         window.gon.current_user_id = 1;
         window.gon.current_username = 'root';
diff --git a/spec/frontend/repository/components/blob_controls_spec.js b/spec/frontend/repository/components/blob_controls_spec.js
index 0d52542397f..3ced5f6c4d2 100644
--- a/spec/frontend/repository/components/blob_controls_spec.js
+++ b/spec/frontend/repository/components/blob_controls_spec.js
@@ -50,8 +50,6 @@ describe('Blob controls component', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   it('renders a find button with the correct href', () => {
     expect(findFindButton().attributes('href')).toBe('find/file.js');
   });
diff --git a/spec/frontend/repository/components/blob_viewers/lfs_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/lfs_viewer_spec.js
index 599443bf862..b4f4b0058de 100644
--- a/spec/frontend/repository/components/blob_viewers/lfs_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_viewers/lfs_viewer_spec.js
@@ -21,8 +21,6 @@ describe('LFS Viewer', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   it('renders the correct text', () => {
     expect(wrapper.text()).toBe(
       'This content could not be displayed because it is stored in LFS. You can download it instead.',
diff --git a/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
index 51f3d31ec72..5d37692bf90 100644
--- a/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_viewers/notebook_viewer_spec.js
@@ -1,7 +1,6 @@
-import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NotebookViewer from '~/repository/components/blob_viewers/notebook_viewer.vue';
-import notebookLoader from '~/blob/notebook';
+import Notebook from '~/blob/notebook/notebook_viewer.vue';
 
 jest.mock('~/blob/notebook');
 
@@ -17,24 +16,11 @@ describe('Notebook Viewer', () => {
     });
   };
 
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findNotebookWrapper = () => wrapper.findByTestId('notebook');
+  const findNotebook = () => wrapper.findComponent(Notebook);
 
   beforeEach(() => createComponent());
 
-  it('calls the notebook loader', () => {
-    expect(notebookLoader).toHaveBeenCalledWith({
-      el: wrapper.vm.$refs.viewer,
-      relativeRawPath: ROOT_RELATIVE_PATH,
-    });
-  });
-
-  it('renders a loading icon component', () => {
-    expect(findLoadingIcon().props('size')).toBe('lg');
-  });
-
-  it('renders the notebook wrapper', () => {
-    expect(findNotebookWrapper().exists()).toBe(true);
-    expect(findNotebookWrapper().attributes('data-endpoint')).toBe(DEFAULT_BLOB_DATA.rawPath);
+  it('renders a Notebook component', () => {
+    expect(findNotebook().props('endpoint')).toBe(DEFAULT_BLOB_DATA.rawPath);
   });
 });
diff --git a/spec/frontend/repository/components/breadcrumbs_spec.js b/spec/frontend/repository/components/breadcrumbs_spec.js
index c2f34f79f89..8b7a7d91125 100644
--- a/spec/frontend/repository/components/breadcrumbs_spec.js
+++ b/spec/frontend/repository/components/breadcrumbs_spec.js
@@ -42,10 +42,6 @@ describe('Repository breadcrumbs component', () => {
   const findUploadBlobModal = () => wrapper.findComponent(UploadBlobModal);
   const findNewDirectoryModal = () => wrapper.findComponent(NewDirectoryModal);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     path                        | linkCount
     ${'/'}                      | ${1}
diff --git a/spec/frontend/repository/components/delete_blob_modal_spec.js b/spec/frontend/repository/components/delete_blob_modal_spec.js
index b5996816ad8..9ca45bfb655 100644
--- a/spec/frontend/repository/components/delete_blob_modal_spec.js
+++ b/spec/frontend/repository/components/delete_blob_modal_spec.js
@@ -49,10 +49,6 @@ describe('DeleteBlobModal', () => {
     await findCommitTextarea().vm.$emit('input', commitText);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders Modal component', () => {
     createComponent();
 
@@ -187,7 +183,7 @@ describe('DeleteBlobModal', () => {
       });
 
       it('disables submit button', async () => {
-        expect(findModal().props('actionPrimary').attributes[0]).toEqual(
+        expect(findModal().props('actionPrimary').attributes).toEqual(
           expect.objectContaining({ disabled: true }),
         );
       });
@@ -207,7 +203,7 @@ describe('DeleteBlobModal', () => {
       });
 
       it('enables submit button', async () => {
-        expect(findModal().props('actionPrimary').attributes[0]).toEqual(
+        expect(findModal().props('actionPrimary').attributes).toEqual(
           expect.objectContaining({ disabled: false }),
         );
       });
diff --git a/spec/frontend/repository/components/directory_download_links_spec.js b/spec/frontend/repository/components/directory_download_links_spec.js
index 72c4165c2e9..3739829c759 100644
--- a/spec/frontend/repository/components/directory_download_links_spec.js
+++ b/spec/frontend/repository/components/directory_download_links_spec.js
@@ -16,10 +16,6 @@ function factory(currentPath) {
 }
 
 describe('Repository directory download links component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it.each`
     path
     ${'app'}
diff --git a/spec/frontend/repository/components/fork_info_spec.js b/spec/frontend/repository/components/fork_info_spec.js
index f327a8cfae7..7a2b03a8d8f 100644
--- a/spec/frontend/repository/components/fork_info_spec.js
+++ b/spec/frontend/repository/components/fork_info_spec.js
@@ -1,42 +1,75 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlSkeletonLoader, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlSkeletonLoader, GlIcon, GlLink, GlSprintf, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubComponent } from 'helpers/stub_component';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 
 import ForkInfo, { i18n } from '~/repository/components/fork_info.vue';
+import ConflictsModal from '~/repository/components/fork_sync_conflicts_modal.vue';
 import forkDetailsQuery from '~/repository/queries/fork_details.query.graphql';
+import syncForkMutation from '~/repository/mutations/sync_fork.mutation.graphql';
 import { propsForkInfo } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('ForkInfo component', () => {
   let wrapper;
   let mockResolver;
   const forkInfoError = new Error('Something went wrong');
   const projectId = 'gid://gitlab/Project/1';
+  const showMock = jest.fn();
+  const synchronizeFork = true;
 
   Vue.use(VueApollo);
 
-  const createCommitData = ({ ahead = 3, behind = 7 }) => {
+  const createForkDetailsData = (
+    forkDetails = { ahead: 3, behind: 7, isSyncing: false, hasConflicts: false },
+  ) => {
     return {
       data: {
-        project: { id: projectId, forkDetails: { ahead, behind, __typename: 'ForkDetails' } },
+        project: { id: projectId, forkDetails },
       },
     };
   };
 
-  const createComponent = (props = {}, data = {}, isRequestFailed = false) => {
+  const createSyncForkDetailsData = (
+    forkDetails = { ahead: 3, behind: 7, isSyncing: false, hasConflicts: false },
+  ) => {
+    return {
+      data: {
+        projectSyncFork: { details: forkDetails, errors: [] },
+      },
+    };
+  };
+
+  const createComponent = (props = {}, data = {}, mutationData = {}, isRequestFailed = false) => {
     mockResolver = isRequestFailed
       ? jest.fn().mockRejectedValue(forkInfoError)
-      : jest.fn().mockResolvedValue(createCommitData(data));
+      : jest.fn().mockResolvedValue(createForkDetailsData(data));
 
     wrapper = shallowMountExtended(ForkInfo, {
-      apolloProvider: createMockApollo([[forkDetailsQuery, mockResolver]]),
+      apolloProvider: createMockApollo([
+        [forkDetailsQuery, mockResolver],
+        [syncForkMutation, jest.fn().mockResolvedValue(createSyncForkDetailsData(mutationData))],
+      ]),
       propsData: { ...propsForkInfo, ...props },
-      stubs: { GlSprintf },
+      stubs: {
+        GlSprintf,
+        GlButton,
+        ConflictsModal: stubComponent(ConflictsModal, {
+          template:
+            '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+          methods: { show: showMock },
+        }),
+      },
+      provide: {
+        glFeatures: {
+          synchronizeFork,
+        },
+      },
     });
     return waitForPromises();
   };
@@ -44,6 +77,8 @@ describe('ForkInfo component', () => {
   const findLink = () => wrapper.findComponent(GlLink);
   const findSkeleton = () => wrapper.findComponent(GlSkeletonLoader);
   const findIcon = () => wrapper.findComponent(GlIcon);
+  const findUpdateForkButton = () => wrapper.findComponent(GlButton);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findDivergenceMessage = () => wrapper.findByTestId('divergence-message');
   const findInaccessibleMessage = () => wrapper.findByTestId('inaccessible-project');
   const findCompareLinks = () => findDivergenceMessage().findAllComponents(GlLink);
@@ -87,14 +122,50 @@ describe('ForkInfo component', () => {
     expect(link.attributes('href')).toBe(propsForkInfo.sourcePath);
   });
 
-  it('renders unknown divergence message when divergence is unknown', async () => {
-    await createComponent({}, { ahead: null, behind: null });
-    expect(findDivergenceMessage().text()).toBe(i18n.unknown);
+  describe('Unknown divergence', () => {
+    beforeEach(async () => {
+      await createComponent(
+        {},
+        { ahead: null, behind: null, isSyncing: false, hasConflicts: false },
+      );
+    });
+
+    it('renders unknown divergence message when divergence is unknown', async () => {
+      expect(findDivergenceMessage().text()).toBe(i18n.unknown);
+    });
+
+    it('renders Update Fork button', async () => {
+      expect(findUpdateForkButton().exists()).toBe(true);
+      expect(findUpdateForkButton().text()).toBe(i18n.sync);
+    });
+  });
+
+  describe('Up to date divergence', () => {
+    beforeEach(async () => {
+      await createComponent({}, { ahead: 0, behind: 0, isSyncing: false, hasConflicts: false });
+    });
+
+    it('renders up to date message when fork is up to date', async () => {
+      expect(findDivergenceMessage().text()).toBe(i18n.upToDate);
+    });
+
+    it('does not render Update Fork button', async () => {
+      expect(findUpdateForkButton().exists()).toBe(false);
+    });
   });
 
-  it('renders up to date message when divergence is unknown', async () => {
-    await createComponent({}, { ahead: 0, behind: 0 });
-    expect(findDivergenceMessage().text()).toBe(i18n.upToDate);
+  describe('Limited visibility project', () => {
+    beforeEach(async () => {
+      await createComponent({}, null);
+    });
+
+    it('renders limited visibility messsage when forkDetails are empty', async () => {
+      expect(findDivergenceMessage().text()).toBe(i18n.limitedVisibility);
+    });
+
+    it('does not render Update Fork button', async () => {
+      expect(findUpdateForkButton().exists()).toBe(false);
+    });
   });
 
   describe.each([
@@ -104,6 +175,7 @@ describe('ForkInfo component', () => {
       message: '3 commits behind, 7 commits ahead of the upstream repository.',
       firstLink: propsForkInfo.behindComparePath,
       secondLink: propsForkInfo.aheadComparePath,
+      hasButton: true,
     },
     {
       ahead: 7,
@@ -111,6 +183,7 @@ describe('ForkInfo component', () => {
       message: '7 commits ahead of the upstream repository.',
       firstLink: propsForkInfo.aheadComparePath,
       secondLink: '',
+      hasButton: false,
     },
     {
       ahead: 0,
@@ -118,12 +191,13 @@ describe('ForkInfo component', () => {
       message: '3 commits behind the upstream repository.',
       firstLink: propsForkInfo.behindComparePath,
       secondLink: '',
+      hasButton: true,
     },
   ])(
     'renders correct divergence message for ahead: $ahead, behind: $behind divergence commits',
-    ({ ahead, behind, message, firstLink, secondLink }) => {
+    ({ ahead, behind, message, firstLink, secondLink, hasButton }) => {
       beforeEach(async () => {
-        await createComponent({}, { ahead, behind });
+        await createComponent({}, { ahead, behind, isSyncing: false, hasConflicts: false });
       });
 
       it('displays correct text', () => {
@@ -138,9 +212,38 @@ describe('ForkInfo component', () => {
           expect(links.at(1).attributes('href')).toBe(secondLink);
         }
       });
+
+      it('renders Update Fork button when fork is behind', () => {
+        expect(findUpdateForkButton().exists()).toBe(hasButton);
+        if (hasButton) {
+          expect(findUpdateForkButton().text()).toBe(i18n.sync);
+        }
+      });
     },
   );
 
+  describe('when sync is not possible due to conflicts', () => {
+    it('opens Conflicts Modal', async () => {
+      await createComponent({}, { ahead: 7, behind: 3, isSyncing: false, hasConflicts: true });
+      findUpdateForkButton().vm.$emit('click');
+      expect(showMock).toHaveBeenCalled();
+    });
+  });
+
+  describe('projectSyncFork mutation', () => {
+    it('changes button to have loading state', async () => {
+      await createComponent(
+        {},
+        { ahead: 0, behind: 3, isSyncing: false, hasConflicts: false },
+        { ahead: 0, behind: 3, isSyncing: true, hasConflicts: false },
+      );
+      expect(findLoadingIcon().exists()).toBe(false);
+      findUpdateForkButton().vm.$emit('click');
+      await waitForPromises();
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
   it('renders alert with error message when request fails', async () => {
     await createComponent({}, {}, true);
     expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/repository/components/fork_suggestion_spec.js b/spec/frontend/repository/components/fork_suggestion_spec.js
index 36a48a3fdb8..a9e5c18c0a9 100644
--- a/spec/frontend/repository/components/fork_suggestion_spec.js
+++ b/spec/frontend/repository/components/fork_suggestion_spec.js
@@ -14,8 +14,6 @@ describe('ForkSuggestion component', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   const { i18n } = ForkSuggestion;
   const findMessage = () => wrapper.findByTestId('message');
   const findForkButton = () => wrapper.findByTestId('fork');
diff --git a/spec/frontend/repository/components/fork_sync_conflicts_modal_spec.js b/spec/frontend/repository/components/fork_sync_conflicts_modal_spec.js
new file mode 100644
index 00000000000..f97c970275b
--- /dev/null
+++ b/spec/frontend/repository/components/fork_sync_conflicts_modal_spec.js
@@ -0,0 +1,42 @@
+import { GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ConflictsModal, { i18n } from '~/repository/components/fork_sync_conflicts_modal.vue';
+import { propsConflictsModal } from '../mock_data';
+
+describe('ConflictsModal', () => {
+  let wrapper;
+
+  function createComponent({ props = {} } = {}) {
+    wrapper = shallowMount(ConflictsModal, {
+      propsData: props,
+      stubs: { GlModal },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent({ props: propsConflictsModal });
+  });
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findInstructions = () => wrapper.findAll('[ data-testid="resolve-conflict-instructions"]');
+
+  it('renders a modal', () => {
+    expect(findModal().exists()).toBe(true);
+  });
+
+  it('passes title as a prop to a gl-modal component', () => {
+    expect(findModal().props().title).toBe(i18n.modalTitle);
+  });
+
+  it('renders a selection of markdown fields', () => {
+    expect(findInstructions().length).toBe(3);
+  });
+
+  it('renders a source url in a first intruction', () => {
+    expect(findInstructions().at(0).text()).toContain(propsConflictsModal.sourcePath);
+  });
+
+  it('renders default branch name in a first intruction', () => {
+    expect(findInstructions().at(0).text()).toContain(propsConflictsModal.sourceDefaultBranch);
+  });
+});
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index 7226e7baa36..f16edcb0b7c 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -6,6 +6,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import LastCommit from '~/repository/components/last_commit.vue';
+import SignatureBadge from '~/commit/components/signature_badge.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { refMock } from '../mock_data';
@@ -20,7 +21,7 @@ const findUserAvatarLink = () => wrapper.findComponent(UserAvatarLink);
 const findLastCommitLabel = () => wrapper.findByTestId('last-commit-id-label');
 const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 const findCommitRowDescription = () => wrapper.find('.commit-row-description');
-const findStatusBox = () => wrapper.find('.signature-badge');
+const findStatusBox = () => wrapper.findComponent(SignatureBadge);
 const findItemTitle = () => wrapper.find('.item-title');
 
 const defaultPipelineEdges = [
@@ -56,7 +57,7 @@ const createCommitData = ({
   pipelineEdges = defaultPipelineEdges,
   author = defaultAuthor,
   descriptionHtml = '',
-  signatureHtml = null,
+  signature = null,
   message = defaultMessage,
 }) => {
   return {
@@ -84,7 +85,7 @@ const createCommitData = ({
                   authorName: 'Test',
                   authorGravatar: 'https://test.com',
                   author,
-                  signatureHtml,
+                  signature,
                   pipelines: {
                     __typename: 'PipelineConnection',
                     edges: pipelineEdges,
@@ -110,11 +111,13 @@ const createComponent = async (data = {}) => {
     apolloProvider: createMockApollo([[pathLastCommitQuery, mockResolver]]),
     propsData: { currentPath },
     mixins: [{ data: () => ({ ref: refMock }) }],
+    stubs: {
+      SignatureBadge,
+    },
   });
 };
 
 afterEach(() => {
-  wrapper.destroy();
   mockResolver = null;
 });
 
@@ -204,23 +207,19 @@ describe('Repository last commit component', () => {
   });
 
   it('renders the signature HTML as returned by the backend', async () => {
+    const signatureResponse = {
+      __typename: 'GpgSignature',
+      gpgKeyPrimaryKeyid: 'xxx',
+      verificationStatus: 'VERIFIED',
+    };
     createComponent({
-      signatureHtml: `<a
-      class="btn signature-badge"
-      data-content="signature-content"
-      data-html="true"
-      data-placement="top"
-      data-title="signature-title"
-      data-toggle="popover"
-      role="button"
-      tabindex="0"
-      ><span class="gl-badge badge badge-pill badge-success md">Verified</span></a>`,
+      signature: {
+        ...signatureResponse,
+      },
     });
     await waitForPromises();
 
-    expect(findStatusBox().html()).toBe(
-      `<a class="btn signature-badge" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0"><span class="gl-badge badge badge-pill badge-success md">Verified</span></a>`,
-    );
+    expect(findStatusBox().props()).toMatchObject({ signature: signatureResponse });
   });
 
   it('sets correct CSS class if the commit message is empty', async () => {
diff --git a/spec/frontend/repository/components/new_directory_modal_spec.js b/spec/frontend/repository/components/new_directory_modal_spec.js
index 4e5c9a685c4..c920159375f 100644
--- a/spec/frontend/repository/components/new_directory_modal_spec.js
+++ b/spec/frontend/repository/components/new_directory_modal_spec.js
@@ -4,12 +4,12 @@ import { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 import NewDirectoryModal from '~/repository/components/new_directory_modal.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
 }));
@@ -76,10 +76,6 @@ describe('NewDirectoryModal', () => {
     await waitForPromises();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders modal component', () => {
     createComponent();
 
@@ -185,10 +181,10 @@ describe('NewDirectoryModal', () => {
 
       it('disables submit button', async () => {
         await fillForm({ dirName: '', branchName: '', commitMessage: '' });
-        expect(findModal().props('actionPrimary').attributes[0].disabled).toBe(true);
+        expect(findModal().props('actionPrimary').attributes.disabled).toBe(true);
       });
 
-      it('creates a flash error', async () => {
+      it('creates an alert error', async () => {
         mock.onPost(initialProps.path).timeout();
 
         await fillForm({ dirName: 'foo', branchName: 'master', commitMessage: 'foo' });
diff --git a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap b/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
deleted file mode 100644
index 48a4feca1e5..00000000000
--- a/spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Repository file preview component renders file HTML 1`] = `
-<article
-  class="file-holder limited-width-container readme-holder"
->
-  <div
-    class="js-file-title file-title-flex-parent"
-  >
-    <div
-      class="file-header-content"
-    >
-      <gl-icon-stub
-        name="doc-text"
-        size="16"
-      />
-       
-      <gl-link-stub
-        href="http://test.com"
-      >
-        <strong>
-          README.md
-        </strong>
-      </gl-link-stub>
-    </div>
-  </div>
-   
-  <div
-    class="blob-viewer"
-    data-qa-selector="blob_viewer_content"
-    itemprop="about"
-  >
-    <div>
-      <div
-        class="blob"
-      >
-        test
-      </div>
-    </div>
-  </div>
-</article>
-`;
diff --git a/spec/frontend/repository/components/preview/index_spec.js b/spec/frontend/repository/components/preview/index_spec.js
index d4c746b67d6..8a88c5b9c61 100644
--- a/spec/frontend/repository/components/preview/index_spec.js
+++ b/spec/frontend/repository/components/preview/index_spec.js
@@ -1,77 +1,60 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { handleLocationHash } from '~/lib/utils/common_utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import Preview from '~/repository/components/preview/index.vue';
 
+const PROPS_DATA = {
+  blob: {
+    webPath: 'http://test.com',
+    name: 'README.md',
+  },
+};
+
+const MOCK_README_DATA = {
+  __typename: 'ReadmeFile',
+  html: '<div class="blob">test</div>',
+};
+
 jest.mock('~/lib/utils/common_utils');
 
-let vm;
-let $apollo;
+Vue.use(VueApollo);
+
+let wrapper;
+let mockApollo;
+let mockReadmeData;
 
-function factory(blob, loading) {
-  $apollo = {
-    queries: {
-      readme: {
-        query: jest.fn().mockReturnValue(Promise.resolve({})),
-        loading,
-      },
-    },
-  };
+const mockResolvers = {
+  Query: {
+    readme: () => mockReadmeData(),
+  },
+};
 
-  vm = shallowMount(Preview, {
-    propsData: {
-      blob,
-    },
-    mocks: {
-      $apollo,
-    },
+function createComponent() {
+  mockApollo = createMockApollo([], mockResolvers);
+
+  return shallowMount(Preview, {
+    propsData: PROPS_DATA,
+    apolloProvider: mockApollo,
   });
 }
 
 describe('Repository file preview component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
-  it('renders file HTML', async () => {
-    factory({
-      webPath: 'http://test.com',
-      name: 'README.md',
-    });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    vm.setData({ readme: { html: '<div class="blob">test</div>' } });
-
-    await nextTick();
-    expect(vm.element).toMatchSnapshot();
+  beforeEach(() => {
+    mockReadmeData = jest.fn();
+    wrapper = createComponent();
+    mockReadmeData.mockResolvedValue(MOCK_README_DATA);
   });
 
   it('handles hash after render', async () => {
-    factory({
-      webPath: 'http://test.com',
-      name: 'README.md',
-    });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    vm.setData({ readme: { html: '<div class="blob">test</div>' } });
-
-    await nextTick();
+    await waitForPromises();
     expect(handleLocationHash).toHaveBeenCalled();
   });
 
   it('renders loading icon', async () => {
-    factory(
-      {
-        webPath: 'http://test.com',
-        name: 'README.md',
-      },
-      true,
-    );
-
-    await nextTick();
-    expect(vm.findComponent(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index 8b987551b33..f7be367887c 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -88,10 +88,6 @@ function factory({ path, isLoading = false, hasMore = true, entries = {}, commit
 const findTableRows = () => vm.findAllComponents(TableRow);
 
 describe('Repository table component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it.each`
     path            | ref
     ${'/'}          | ${'main'}
diff --git a/spec/frontend/repository/components/table/parent_row_spec.js b/spec/frontend/repository/components/table/parent_row_spec.js
index 03fb4242e40..77822a148b7 100644
--- a/spec/frontend/repository/components/table/parent_row_spec.js
+++ b/spec/frontend/repository/components/table/parent_row_spec.js
@@ -26,10 +26,6 @@ function factory(path, loadingPath) {
 }
 
 describe('Repository parent row component', () => {
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it.each`
     path                        | to
     ${'app'}                    | ${'/-/tree/main/'}
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 5d9138ab9cd..055616d6e8e 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -28,7 +28,7 @@ function factory(propsData = {}) {
       rowNumber: 123,
     },
     directives: {
-      GlHoverLoad: createMockDirective(),
+      GlHoverLoad: createMockDirective('gl-hover-load'),
     },
     mocks: {
       $router,
@@ -47,10 +47,6 @@ describe('Repository table row component', () => {
   const findRouterLink = () => vm.findComponent(RouterLinkStub);
   const findIntersectionObserver = () => vm.findComponent(GlIntersectionObserver);
 
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders table row', async () => {
     factory({
       id: '1',
diff --git a/spec/frontend/repository/components/tree_content_spec.js b/spec/frontend/repository/components/tree_content_spec.js
index f694c8e9166..9597d8a7b77 100644
--- a/spec/frontend/repository/components/tree_content_spec.js
+++ b/spec/frontend/repository/components/tree_content_spec.js
@@ -1,12 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import FilePreview from '~/repository/components/preview/index.vue';
 import FileTable from '~/repository/components/table/index.vue';
 import TreeContent from 'jh_else_ce/repository/components/tree_content.vue';
 import { loadCommits, isRequested, resetRequestedCommits } from '~/repository/commits_service';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { i18n } from '~/repository/constants';
 import { graphQLErrors } from '../mock_data';
 
@@ -15,15 +14,15 @@ jest.mock('~/repository/commits_service', () => ({
   isRequested: jest.fn(),
   resetRequestedCommits: jest.fn(),
 }));
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 let vm;
 let $apollo;
 const mockResponse = jest.fn().mockReturnValue(Promise.resolve({ data: {} }));
 
-function factory(path, appoloMockResponse = mockResponse) {
+function factory(path, apolloMockResponse = mockResponse) {
   $apollo = {
-    query: appoloMockResponse,
+    query: apolloMockResponse,
   };
 
   vm = shallowMount(TreeContent, {
@@ -33,22 +32,12 @@ function factory(path, appoloMockResponse = mockResponse) {
     mocks: {
       $apollo,
     },
-    provide: {
-      glFeatures: {
-        increasePageSizeExponentially: true,
-        paginatedTreeGraphqlQuery: true,
-      },
-    },
   });
 }
 
 describe('Repository table component', () => {
   const findFileTable = () => vm.findComponent(FileTable);
 
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders file preview', async () => {
     factory('/');
 
@@ -171,37 +160,6 @@ describe('Repository table component', () => {
 
       expect(findFileTable().props('hasMore')).toBe(limitReached);
     });
-
-    it.each`
-      fetchCounter | pageSize
-      ${0}         | ${10}
-      ${2}         | ${30}
-      ${4}         | ${50}
-      ${6}         | ${70}
-      ${8}         | ${90}
-      ${10}        | ${100}
-      ${20}        | ${100}
-      ${100}       | ${100}
-      ${200}       | ${100}
-    `('exponentially increases page size, to a maximum of 100', ({ fetchCounter, pageSize }) => {
-      factory('/');
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      vm.setData({ fetchCounter });
-
-      vm.vm.fetchFiles();
-
-      expect($apollo.query).toHaveBeenCalledWith({
-        query: paginatedTreeQuery,
-        variables: {
-          pageSize,
-          nextPageCursor: '',
-          path: '/',
-          projectPath: '',
-          ref: '',
-        },
-      });
-    });
   });
 
   describe('commit data', () => {
diff --git a/spec/frontend/repository/components/upload_blob_modal_spec.js b/spec/frontend/repository/components/upload_blob_modal_spec.js
index 9de0666f27a..319321cfcb4 100644
--- a/spec/frontend/repository/components/upload_blob_modal_spec.js
+++ b/spec/frontend/repository/components/upload_blob_modal_spec.js
@@ -4,13 +4,13 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
   joinPaths: () => '/new_upload',
@@ -53,14 +53,9 @@ describe('UploadBlobModal', () => {
   const findBranchName = () => wrapper.findComponent(GlFormInput);
   const findMrToggle = () => wrapper.findComponent(GlToggle);
   const findUploadDropzone = () => wrapper.findComponent(UploadDropzone);
-  const actionButtonDisabledState = () => findModal().props('actionPrimary').attributes[0].disabled;
-  const cancelButtonDisabledState = () => findModal().props('actionCancel').attributes[0].disabled;
-  const actionButtonLoadingState = () => findModal().props('actionPrimary').attributes[0].loading;
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
+  const actionButtonDisabledState = () => findModal().props('actionPrimary').attributes.disabled;
+  const cancelButtonDisabledState = () => findModal().props('actionCancel').attributes.disabled;
+  const actionButtonLoadingState = () => findModal().props('actionPrimary').attributes.loading;
 
   describe.each`
     canPushCode | displayBranchName | displayForkedBranchMessage
@@ -110,9 +105,7 @@ describe('UploadBlobModal', () => {
       if (canPushCode) {
         describe('when changing the branch name', () => {
           it('displays the MR toggle', async () => {
-            // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-            // eslint-disable-next-line no-restricted-syntax
-            wrapper.setData({ target: 'Not main' });
+            createComponent({ targetBranch: 'Not main' });
 
             await nextTick();
 
@@ -123,12 +116,10 @@ describe('UploadBlobModal', () => {
 
       describe('completed form', () => {
         beforeEach(() => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({
-            file: { type: 'jpg' },
-            filePreviewURL: 'http://file.com?format=jpg',
-          });
+          findUploadDropzone().vm.$emit(
+            'change',
+            new File(['http://file.com?format=jpg'], 'file.jpg'),
+          );
         });
 
         it('enables the upload button when the form is completed', () => {
@@ -184,7 +175,7 @@ describe('UploadBlobModal', () => {
             await waitForPromises();
           });
 
-          it('creates a flash error', () => {
+          it('creates an alert error', () => {
             expect(createAlert).toHaveBeenCalledWith({
               message: 'Error uploading file. Please try again.',
             });
@@ -199,13 +190,6 @@ describe('UploadBlobModal', () => {
   );
 
   describe('blob file submission type', () => {
-    const submitForm = async () => {
-      wrapper.vm.uploadFile = jest.fn();
-      wrapper.vm.replaceFile = jest.fn();
-      wrapper.vm.submitForm();
-      await nextTick();
-    };
-
     const submitRequest = async () => {
       mock = new MockAdapter(axios);
       findModal().vm.$emit('primary', mockEvent);
@@ -225,13 +209,6 @@ describe('UploadBlobModal', () => {
         expect(findModal().props('actionPrimary').text).toBe('Upload file');
       });
 
-      it('calls the default uploadFile when the form submit', async () => {
-        await submitForm();
-
-        expect(wrapper.vm.uploadFile).toHaveBeenCalled();
-        expect(wrapper.vm.replaceFile).not.toHaveBeenCalled();
-      });
-
       it('makes a POST request', async () => {
         await submitRequest();
 
@@ -261,13 +238,6 @@ describe('UploadBlobModal', () => {
         expect(findModal().props('actionPrimary').text).toBe(primaryBtnText);
       });
 
-      it('calls the replaceFile when the form submit', async () => {
-        await submitForm();
-
-        expect(wrapper.vm.replaceFile).toHaveBeenCalled();
-        expect(wrapper.vm.uploadFile).not.toHaveBeenCalled();
-      });
-
       it('makes a PUT request', async () => {
         await submitRequest();
 
diff --git a/spec/frontend/repository/mixins/highlight_mixin_spec.js b/spec/frontend/repository/mixins/highlight_mixin_spec.js
index 7c48fe440d2..5f872749581 100644
--- a/spec/frontend/repository/mixins/highlight_mixin_spec.js
+++ b/spec/frontend/repository/mixins/highlight_mixin_spec.js
@@ -44,8 +44,6 @@ describe('HighlightMixin', () => {
 
   beforeEach(() => createComponent());
 
-  afterEach(() => wrapper.destroy());
-
   describe('initHighlightWorker', () => {
     const firstSeventyLines = contentArray.slice(0, LINES_PER_CHUNK).join('\n');
 
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index 04ffe52bc3f..418a93a10cc 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -126,3 +126,9 @@ export const propsForkInfo = {
   aheadComparePath: '/nataliia/myGitLab/-/compare/main...ref?from_project_id=1',
   behindComparePath: 'gitlab-org/gitlab/-/compare/ref...main?from_project_id=2',
 };
+
+export const propsConflictsModal = {
+  sourceDefaultBranch: 'branch-name',
+  sourceName: 'source-name',
+  sourcePath: 'path/to/project',
+};
diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js
index 4fe6188370e..366523e2b8b 100644
--- a/spec/frontend/repository/pages/blob_spec.js
+++ b/spec/frontend/repository/pages/blob_spec.js
@@ -16,10 +16,6 @@ describe('Repository blob page component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a Blob Content Viewer component', () => {
     expect(findBlobContentViewer().exists()).toBe(true);
     expect(findBlobContentViewer().props('path')).toBe(path);
diff --git a/spec/frontend/repository/pages/index_spec.js b/spec/frontend/repository/pages/index_spec.js
index 559257d414c..e50557e7d61 100644
--- a/spec/frontend/repository/pages/index_spec.js
+++ b/spec/frontend/repository/pages/index_spec.js
@@ -13,8 +13,6 @@ describe('Repository index page component', () => {
   }
 
   afterEach(() => {
-    wrapper.destroy();
-
     updateElementsVisibility.mockClear();
   });
 
diff --git a/spec/frontend/repository/pages/tree_spec.js b/spec/frontend/repository/pages/tree_spec.js
index 36662696c91..b1529d77c7d 100644
--- a/spec/frontend/repository/pages/tree_spec.js
+++ b/spec/frontend/repository/pages/tree_spec.js
@@ -12,8 +12,6 @@ describe('Repository tree page component', () => {
   }
 
   afterEach(() => {
-    wrapper.destroy();
-
     updateElementsVisibility.mockClear();
   });
 
diff --git a/spec/frontend/saved_replies/components/__snapshots__/list_item_spec.js.snap b/spec/frontend/saved_replies/components/__snapshots__/list_item_spec.js.snap
index 3abdfcdaf20..204afc744e7 100644
--- a/spec/frontend/saved_replies/components/__snapshots__/list_item_spec.js.snap
+++ b/spec/frontend/saved_replies/components/__snapshots__/list_item_spec.js.snap
@@ -7,9 +7,39 @@ exports[`Saved replies list item component renders list item 1`] = `
   <div
     class="gl-display-flex gl-align-items-center"
   >
-    <strong>
+    <strong
+      data-testid="saved-reply-name"
+    >
       test
     </strong>
+     
+    <div
+      class="gl-ml-auto"
+    >
+      <gl-button-stub
+        aria-label="Edit"
+        buttontextclasses=""
+        category="primary"
+        class="gl-mr-3"
+        data-testid="saved-reply-edit-btn"
+        icon="pencil"
+        size="medium"
+        title="Edit"
+        to="[object Object]"
+        variant="default"
+      />
+       
+      <gl-button-stub
+        aria-label="Delete"
+        buttontextclasses=""
+        category="secondary"
+        data-testid="saved-reply-delete-btn"
+        icon="remove"
+        size="medium"
+        title="Delete"
+        variant="danger"
+      />
+    </div>
   </div>
    
   <div
@@ -17,5 +47,21 @@ exports[`Saved replies list item component renders list item 1`] = `
   >
     /assign_reviewer
   </div>
+   
+  <gl-modal-stub
+    actionprimary="[object Object]"
+    actionsecondary="[object Object]"
+    arialabel=""
+    dismisslabel="Close"
+    modalclass=""
+    modalid="delete-saved-reply-2"
+    size="sm"
+    title="Delete saved reply"
+    titletag="h4"
+  >
+    <gl-sprintf-stub
+      message="Are you sure you want to delete %{name}? This action cannot be undone."
+    />
+  </gl-modal-stub>
 </li>
 `;
diff --git a/spec/frontend/saved_replies/components/form_spec.js b/spec/frontend/saved_replies/components/form_spec.js
new file mode 100644
index 00000000000..adeda498e6f
--- /dev/null
+++ b/spec/frontend/saved_replies/components/form_spec.js
@@ -0,0 +1,144 @@
+import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import VueApollo from 'vue-apollo';
+import createdSavedReplyResponse from 'test_fixtures/graphql/saved_replies/create_saved_reply.mutation.graphql.json';
+import createdSavedReplyErrorResponse from 'test_fixtures/graphql/saved_replies/create_saved_reply_with_errors.mutation.graphql.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import Form from '~/saved_replies/components/form.vue';
+import createSavedReplyMutation from '~/saved_replies/queries/create_saved_reply.mutation.graphql';
+import updateSavedReplyMutation from '~/saved_replies/queries/update_saved_reply.mutation.graphql';
+
+let wrapper;
+let createSavedReplyResponseSpy;
+let updateSavedReplyResponseSpy;
+
+function createMockApolloProvider(response) {
+  Vue.use(VueApollo);
+
+  createSavedReplyResponseSpy = jest.fn().mockResolvedValue(response);
+  updateSavedReplyResponseSpy = jest.fn().mockResolvedValue(response);
+
+  const requestHandlers = [
+    [createSavedReplyMutation, createSavedReplyResponseSpy],
+    [updateSavedReplyMutation, updateSavedReplyResponseSpy],
+  ];
+
+  return createMockApollo(requestHandlers);
+}
+
+function createComponent(id = null, response = createdSavedReplyResponse) {
+  const mockApollo = createMockApolloProvider(response);
+
+  return mount(Form, {
+    propsData: {
+      id,
+    },
+    apolloProvider: mockApollo,
+  });
+}
+
+const findSavedReplyNameInput = () => wrapper.find('[data-testid="saved-reply-name-input"]');
+const findSavedReplyNameFormGroup = () =>
+  wrapper.find('[data-testid="saved-reply-name-form-group"]');
+const findSavedReplyContentInput = () => wrapper.find('[data-testid="saved-reply-content-input"]');
+const findSavedReplyContentFormGroup = () =>
+  wrapper.find('[data-testid="saved-reply-content-form-group"]');
+const findSavedReplyFrom = () => wrapper.find('[data-testid="saved-reply-form"]');
+const findAlerts = () => wrapper.findAllComponents(GlAlert);
+const findSubmitBtn = () => wrapper.find('[data-testid="saved-reply-form-submit-btn"]');
+
+describe('Saved replies form component', () => {
+  describe('create saved reply', () => {
+    it('calls apollo mutation', async () => {
+      wrapper = createComponent();
+
+      findSavedReplyNameInput().setValue('Test');
+      findSavedReplyContentInput().setValue('Test content');
+      findSavedReplyFrom().trigger('submit');
+
+      await waitForPromises();
+
+      expect(createSavedReplyResponseSpy).toHaveBeenCalledWith({
+        id: null,
+        content: 'Test content',
+        name: 'Test',
+      });
+    });
+
+    it('does not submit when form validation fails', async () => {
+      wrapper = createComponent();
+
+      findSavedReplyFrom().trigger('submit');
+
+      await waitForPromises();
+
+      expect(createSavedReplyResponseSpy).not.toHaveBeenCalled();
+    });
+
+    it.each`
+      findFormGroup                     | findInput                     | fieldName
+      ${findSavedReplyNameFormGroup}    | ${findSavedReplyContentInput} | ${'name'}
+      ${findSavedReplyContentFormGroup} | ${findSavedReplyNameInput}    | ${'content'}
+    `('shows errors for empty $fieldName input', async ({ findFormGroup, findInput }) => {
+      wrapper = createComponent(null, createdSavedReplyErrorResponse);
+
+      findInput().setValue('Test');
+      findSavedReplyFrom().trigger('submit');
+
+      await waitForPromises();
+
+      expect(findFormGroup().classes('is-invalid')).toBe(true);
+    });
+
+    it('displays errors when mutation fails', async () => {
+      wrapper = createComponent(null, createdSavedReplyErrorResponse);
+
+      findSavedReplyNameInput().setValue('Test');
+      findSavedReplyContentInput().setValue('Test content');
+      findSavedReplyFrom().trigger('submit');
+
+      await waitForPromises();
+
+      const { errors } = createdSavedReplyErrorResponse;
+      const alertMessages = findAlerts().wrappers.map((x) => x.text());
+
+      expect(alertMessages).toEqual(errors.map((x) => x.message));
+    });
+
+    it('shows loading state when saving', async () => {
+      wrapper = createComponent();
+
+      findSavedReplyNameInput().setValue('Test');
+      findSavedReplyContentInput().setValue('Test content');
+      findSavedReplyFrom().trigger('submit');
+
+      await nextTick();
+
+      expect(findSubmitBtn().props('loading')).toBe(true);
+
+      await waitForPromises();
+
+      expect(findSubmitBtn().props('loading')).toBe(false);
+    });
+  });
+
+  describe('updates saved reply', () => {
+    it('calls apollo mutation', async () => {
+      wrapper = createComponent('1');
+
+      findSavedReplyNameInput().setValue('Test');
+      findSavedReplyContentInput().setValue('Test content');
+      findSavedReplyFrom().trigger('submit');
+
+      await waitForPromises();
+
+      expect(updateSavedReplyResponseSpy).toHaveBeenCalledWith({
+        id: '1',
+        content: 'Test content',
+        name: 'Test',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/saved_replies/components/list_item_spec.js b/spec/frontend/saved_replies/components/list_item_spec.js
index cad1000473b..f1ecdfecb15 100644
--- a/spec/frontend/saved_replies/components/list_item_spec.js
+++ b/spec/frontend/saved_replies/components/list_item_spec.js
@@ -1,22 +1,50 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { createMockDirective } from 'helpers/vue_mock_directive';
+import waitForPromises from 'helpers/wait_for_promises';
 import ListItem from '~/saved_replies/components/list_item.vue';
+import deleteSavedReplyMutation from '~/saved_replies/queries/delete_saved_reply.mutation.graphql';
 
 let wrapper;
+let deleteSavedReplyMutationResponse;
 
 function createComponent(propsData = {}) {
+  Vue.use(VueApollo);
+
+  deleteSavedReplyMutationResponse = jest
+    .fn()
+    .mockResolvedValue({ data: { savedReplyDestroy: { errors: [] } } });
+
   return shallowMount(ListItem, {
     propsData,
+    directives: {
+      GlModal: createMockDirective('gl-modal'),
+    },
+    apolloProvider: createMockApollo([
+      [deleteSavedReplyMutation, deleteSavedReplyMutationResponse],
+    ]),
   });
 }
 
 describe('Saved replies list item component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders list item', async () => {
     wrapper = createComponent({ reply: { name: 'test', content: '/assign_reviewer' } });
 
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('delete button', () => {
+    it('calls Apollo mutate', async () => {
+      wrapper = createComponent({ reply: { name: 'test', content: '/assign_reviewer', id: 1 } });
+
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+
+      await waitForPromises();
+
+      expect(deleteSavedReplyMutationResponse).toHaveBeenCalledWith({ id: 1 });
+    });
+  });
 });
diff --git a/spec/frontend/saved_replies/components/list_spec.js b/spec/frontend/saved_replies/components/list_spec.js
index 66e9ddfe148..bc69cb852e0 100644
--- a/spec/frontend/saved_replies/components/list_spec.js
+++ b/spec/frontend/saved_replies/components/list_spec.js
@@ -1,61 +1,39 @@
-import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
 import noSavedRepliesResponse from 'test_fixtures/graphql/saved_replies/saved_replies_empty.query.graphql.json';
 import savedRepliesResponse from 'test_fixtures/graphql/saved_replies/saved_replies.query.graphql.json';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
 import List from '~/saved_replies/components/list.vue';
 import ListItem from '~/saved_replies/components/list_item.vue';
-import savedRepliesQuery from '~/saved_replies/queries/saved_replies.query.graphql';
 
 let wrapper;
 
-function createMockApolloProvider(response) {
-  Vue.use(VueApollo);
-
-  const requestHandlers = [[savedRepliesQuery, jest.fn().mockResolvedValue(response)]];
-
-  return createMockApollo(requestHandlers);
-}
-
-function createComponent(options = {}) {
-  const { mockApollo } = options;
+function createComponent(res = {}) {
+  const { savedReplies } = res.data.currentUser;
 
   return mount(List, {
-    apolloProvider: mockApollo,
+    propsData: {
+      savedReplies: savedReplies.nodes,
+      pageInfo: savedReplies.pageInfo,
+      count: savedReplies.count,
+    },
   });
 }
 
 describe('Saved replies list component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('does not render any list items when response is empty', async () => {
-    const mockApollo = createMockApolloProvider(noSavedRepliesResponse);
-    wrapper = createComponent({ mockApollo });
-
-    await waitForPromises();
+  it('does not render any list items when response is empty', () => {
+    wrapper = createComponent(noSavedRepliesResponse);
 
     expect(wrapper.findAllComponents(ListItem).length).toBe(0);
   });
 
-  it('render saved replies count', async () => {
-    const mockApollo = createMockApolloProvider(savedRepliesResponse);
-    wrapper = createComponent({ mockApollo });
-
-    await waitForPromises();
+  it('render saved replies count', () => {
+    wrapper = createComponent(savedRepliesResponse);
 
     expect(wrapper.find('[data-testid="title"]').text()).toEqual('My saved replies (2)');
   });
 
-  it('renders list of saved replies', async () => {
-    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+  it('renders list of saved replies', () => {
     const savedReplies = savedRepliesResponse.data.currentUser.savedReplies.nodes;
-    wrapper = createComponent({ mockApollo });
-
-    await waitForPromises();
+    wrapper = createComponent(savedRepliesResponse);
 
     expect(wrapper.findAllComponents(ListItem).length).toBe(2);
     expect(wrapper.findAllComponents(ListItem).at(0).props('reply')).toEqual(
diff --git a/spec/frontend/saved_replies/pages/index_spec.js b/spec/frontend/saved_replies/pages/index_spec.js
new file mode 100644
index 00000000000..771025d64ec
--- /dev/null
+++ b/spec/frontend/saved_replies/pages/index_spec.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import savedRepliesResponse from 'test_fixtures/graphql/saved_replies/saved_replies.query.graphql.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import IndexPage from '~/saved_replies/pages/index.vue';
+import ListItem from '~/saved_replies/components/list_item.vue';
+import savedRepliesQuery from '~/saved_replies/queries/saved_replies.query.graphql';
+
+let wrapper;
+
+function createMockApolloProvider(response) {
+  Vue.use(VueApollo);
+
+  const requestHandlers = [[savedRepliesQuery, jest.fn().mockResolvedValue(response)]];
+
+  return createMockApollo(requestHandlers);
+}
+
+function createComponent(options = {}) {
+  const { mockApollo } = options;
+
+  return mount(IndexPage, {
+    apolloProvider: mockApollo,
+  });
+}
+
+describe('Saved replies index page component', () => {
+  it('renders list of saved replies', async () => {
+    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+    const savedReplies = savedRepliesResponse.data.currentUser.savedReplies.nodes;
+    wrapper = createComponent({ mockApollo });
+
+    await waitForPromises();
+
+    expect(wrapper.findAllComponents(ListItem).length).toBe(2);
+    expect(wrapper.findAllComponents(ListItem).at(0).props('reply')).toEqual(
+      expect.objectContaining(savedReplies[0]),
+    );
+    expect(wrapper.findAllComponents(ListItem).at(1).props('reply')).toEqual(
+      expect.objectContaining(savedReplies[1]),
+    );
+  });
+});
diff --git a/spec/frontend/search/mock_data.js b/spec/frontend/search/mock_data.js
index fb9c0a93907..0aa4f0e1c84 100644
--- a/spec/frontend/search/mock_data.js
+++ b/spec/frontend/search/mock_data.js
@@ -653,3 +653,10 @@ export const TEST_FILTER_DATA = {
     JSON: { label: 'JSON', value: 'JSON', count: 15 },
   },
 };
+
+export const SMALL_MOCK_AGGREGATIONS = [
+  {
+    name: 'language',
+    buckets: TEST_RAW_BUCKETS,
+  },
+];
diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index 83302b90233..8a35ae96d5e 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -17,6 +17,10 @@ describe('GlobalSearchSidebar', () => {
     resetQuery: jest.fn(),
   };
 
+  const getterSpies = {
+    currentScope: jest.fn(() => 'issues'),
+  };
+
   const createComponent = (initialState, featureFlags) => {
     const store = new Vuex.Store({
       state: {
@@ -24,6 +28,7 @@ describe('GlobalSearchSidebar', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: getterSpies,
     });
 
     wrapper = shallowMount(GlobalSearchSidebar, {
@@ -52,22 +57,23 @@ describe('GlobalSearchSidebar', () => {
     });
 
     describe.each`
-      scope               | showFilters | ShowsLanguage
+      scope               | showFilters | showsLanguage
       ${'issues'}         | ${true}     | ${false}
       ${'merge_requests'} | ${true}     | ${false}
       ${'projects'}       | ${false}    | ${false}
       ${'blobs'}          | ${false}    | ${true}
-    `('sidebar scope: $scope', ({ scope, showFilters, ShowsLanguage }) => {
+    `('sidebar scope: $scope', ({ scope, showFilters, showsLanguage }) => {
       beforeEach(() => {
-        createComponent({ urlQuery: { scope } }, { searchBlobsLanguageAggregation: true });
+        getterSpies.currentScope = jest.fn(() => scope);
+        createComponent({ urlQuery: { scope } });
       });
 
       it(`${!showFilters ? "doesn't" : ''} shows filters`, () => {
         expect(findFilters().exists()).toBe(showFilters);
       });
 
-      it(`${!ShowsLanguage ? "doesn't" : ''} shows language filters`, () => {
-        expect(findLanguageAggregation().exists()).toBe(ShowsLanguage);
+      it(`${!showsLanguage ? "doesn't" : ''} shows language filters`, () => {
+        expect(findLanguageAggregation().exists()).toBe(showsLanguage);
       });
     });
 
@@ -80,22 +86,4 @@ describe('GlobalSearchSidebar', () => {
       });
     });
   });
-
-  describe('when search_blobs_language_aggregation is enabled', () => {
-    beforeEach(() => {
-      createComponent({ urlQuery: { scope: 'blobs' } }, { searchBlobsLanguageAggregation: true });
-    });
-    it('shows the language filter', () => {
-      expect(findLanguageAggregation().exists()).toBe(true);
-    });
-  });
-
-  describe('when search_blobs_language_aggregation is disabled', () => {
-    beforeEach(() => {
-      createComponent({ urlQuery: { scope: 'blobs' } }, { searchBlobsLanguageAggregation: false });
-    });
-    it('hides the language filter', () => {
-      expect(findLanguageAggregation().exists()).toBe(false);
-    });
-  });
 });
diff --git a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
index 82017754b23..f7b35c7bb14 100644
--- a/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/checkbox_filter_spec.js
@@ -17,8 +17,12 @@ describe('CheckboxFilter', () => {
     setQuery: jest.fn(),
   };
 
+  const getterSpies = {
+    queryLanguageFilters: jest.fn(() => []),
+  };
+
   const defaultProps = {
-    filterData: convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+    filtersData: convertFiltersData(MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
   };
 
   const createComponent = () => {
@@ -27,6 +31,7 @@ describe('CheckboxFilter', () => {
         query: MOCK_QUERY,
       },
       actions: actionSpies,
+      getters: getterSpies,
     });
 
     wrapper = shallowMountExtended(CheckboxFilter, {
@@ -73,7 +78,7 @@ describe('CheckboxFilter', () => {
   describe('actions', () => {
     it('triggers setQuery', () => {
       const filter =
-        defaultProps.filterData.filters[Object.keys(defaultProps.filterData.filters)[0]].value;
+        defaultProps.filtersData.filters[Object.keys(defaultProps.filtersData.filters)[0]].value;
       findFormCheckboxGroup().vm.$emit('input', filter);
 
       expect(actionSpies.setQuery).toHaveBeenCalledWith(expect.any(Object), {
diff --git a/spec/frontend/search/sidebar/components/filters_spec.js b/spec/frontend/search/sidebar/components/filters_spec.js
index 7e564bfa005..51c7bdd9609 100644
--- a/spec/frontend/search/sidebar/components/filters_spec.js
+++ b/spec/frontend/search/sidebar/components/filters_spec.js
@@ -17,6 +17,10 @@ describe('GlobalSearchSidebarFilters', () => {
     resetQuery: jest.fn(),
   };
 
+  const defaultGetters = {
+    currentScope: () => 'issues',
+  };
+
   const createComponent = (initialState) => {
     const store = new Vuex.Store({
       state: {
@@ -24,6 +28,7 @@ describe('GlobalSearchSidebarFilters', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: defaultGetters,
     });
 
     wrapper = shallowMount(ResultsFilters, {
@@ -31,10 +36,6 @@ describe('GlobalSearchSidebarFilters', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSidebarForm = () => wrapper.find('form');
   const findStatusFilter = () => wrapper.findComponent(StatusFilter);
   const findConfidentialityFilter = () => wrapper.findComponent(ConfidentialityFilter);
@@ -142,7 +143,11 @@ describe('GlobalSearchSidebarFilters', () => {
     ${'blobs'}          | ${false}
   `(`ConfidentialityFilter`, ({ scope, showFilter }) => {
     beforeEach(() => {
-      createComponent({ urlQuery: { scope } });
+      defaultGetters.currentScope = () => scope;
+      createComponent();
+    });
+    afterEach(() => {
+      defaultGetters.currentScope = () => 'issues';
     });
 
     it(`does${showFilter ? '' : ' not'} render when scope is ${scope}`, () => {
@@ -162,7 +167,11 @@ describe('GlobalSearchSidebarFilters', () => {
     ${'blobs'}          | ${false}
   `(`StatusFilter`, ({ scope, showFilter }) => {
     beforeEach(() => {
-      createComponent({ urlQuery: { scope } });
+      defaultGetters.currentScope = () => scope;
+      createComponent();
+    });
+    afterEach(() => {
+      defaultGetters.currentScope = () => 'issues';
     });
 
     it(`does${showFilter ? '' : ' not'} render when scope is ${scope}`, () => {
diff --git a/spec/frontend/search/sidebar/components/language_filters_spec.js b/spec/frontend/search/sidebar/components/language_filter_spec.js
index e297d1c33b0..17656ba749b 100644
--- a/spec/frontend/search/sidebar/components/language_filters_spec.js
+++ b/spec/frontend/search/sidebar/components/language_filter_spec.js
@@ -22,7 +22,8 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
   };
 
   const getterSpies = {
-    langugageAggregationBuckets: jest.fn(() => MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+    languageAggregationBuckets: jest.fn(() => MOCK_LANGUAGE_AGGREGATIONS_BUCKETS),
+    queryLanguageFilters: jest.fn(() => []),
   };
 
   const createComponent = (initialState) => {
@@ -48,6 +49,7 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
   const findForm = () => wrapper.findComponent(GlForm);
   const findCheckboxFilter = () => wrapper.findComponent(CheckboxFilter);
   const findApplyButton = () => wrapper.findByTestId('apply-button');
+  const findResetButton = () => wrapper.findByTestId('reset-button');
   const findShowMoreButton = () => wrapper.findByTestId('show-more-button');
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findAllCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
@@ -84,6 +86,25 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
     });
   });
 
+  describe('resetButton', () => {
+    describe.each`
+      description                          | sidebarDirty | queryFilters     | isDisabled
+      ${'sidebar dirty only'}              | ${true}      | ${[]}            | ${undefined}
+      ${'query filters only'}              | ${false}     | ${['JSON', 'C']} | ${undefined}
+      ${'sidebar dirty and query filters'} | ${true}      | ${['JSON', 'C']} | ${undefined}
+      ${'no sidebar and no query filters'} | ${false}     | ${[]}            | ${'true'}
+    `('$description', ({ sidebarDirty, queryFilters, isDisabled }) => {
+      beforeEach(() => {
+        getterSpies.queryLanguageFilters = jest.fn(() => queryFilters);
+        createComponent({ sidebarDirty, query: { ...MOCK_QUERY, language: queryFilters } });
+      });
+
+      it(`button is ${isDisabled ? 'enabled' : 'disabled'}`, () => {
+        expect(findResetButton().attributes('disabled')).toBe(isDisabled);
+      });
+    });
+  });
+
   describe('ApplyButton', () => {
     describe('when sidebarDirty is false', () => {
       beforeEach(() => {
@@ -135,8 +156,8 @@ describe('GlobalSearchSidebarLanguageFilter', () => {
       createComponent({});
     });
 
-    it('uses getter langugageAggregationBuckets', () => {
-      expect(getterSpies.langugageAggregationBuckets).toHaveBeenCalled();
+    it('uses getter languageAggregationBuckets', () => {
+      expect(getterSpies.languageAggregationBuckets).toHaveBeenCalled();
     });
 
     it('uses action fetchLanguageAggregation', () => {
diff --git a/spec/frontend/search/sidebar/components/radio_filter_spec.js b/spec/frontend/search/sidebar/components/radio_filter_spec.js
index 94d529348a9..47235b828c3 100644
--- a/spec/frontend/search/sidebar/components/radio_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/radio_filter_spec.js
@@ -16,6 +16,10 @@ describe('RadioFilter', () => {
     setQuery: jest.fn(),
   };
 
+  const defaultGetters = {
+    currentScope: jest.fn(() => 'issues'),
+  };
+
   const defaultProps = {
     filterData: stateFilterData,
   };
@@ -27,6 +31,7 @@ describe('RadioFilter', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: defaultGetters,
     });
 
     wrapper = shallowMount(RadioFilter, {
@@ -38,11 +43,6 @@ describe('RadioFilter', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findGlRadioButtonGroup = () => wrapper.findComponent(GlFormRadioGroup);
   const findGlRadioButtons = () => findGlRadioButtonGroup().findAllComponents(GlFormRadio);
   const findGlRadioButtonsText = () => findGlRadioButtons().wrappers.map((w) => w.text());
diff --git a/spec/frontend/search/sidebar/components/scope_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_navigation_spec.js
index 23c158239dc..3b2d528e1d7 100644
--- a/spec/frontend/search/sidebar/components/scope_navigation_spec.js
+++ b/spec/frontend/search/sidebar/components/scope_navigation_spec.js
@@ -14,6 +14,10 @@ describe('ScopeNavigation', () => {
     fetchSidebarCount: jest.fn(),
   };
 
+  const getterSpies = {
+    currentScope: jest.fn(() => 'issues'),
+  };
+
   const createComponent = (initialState) => {
     const store = new Vuex.Store({
       state: {
@@ -22,6 +26,7 @@ describe('ScopeNavigation', () => {
         ...initialState,
       },
       actions: actionSpies,
+      getters: getterSpies,
     });
 
     wrapper = shallowMount(ScopeNavigation, {
@@ -29,16 +34,12 @@ describe('ScopeNavigation', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findNavElement = () => wrapper.find('nav');
   const findGlNav = () => wrapper.findComponent(GlNav);
   const findGlNavItems = () => wrapper.findAllComponents(GlNavItem);
-  const findGlNavItemActive = () => findGlNavItems().wrappers.filter((w) => w.attributes('active'));
-  const findGlNavItemActiveLabel = () => findGlNavItemActive().at(0).findAll('span').at(0).text();
-  const findGlNavItemActiveCount = () => findGlNavItemActive().at(0).findAll('span').at(1);
+  const findGlNavItemActive = () => wrapper.find('[active=true]');
+  const findGlNavItemActiveLabel = () => findGlNavItemActive().find('[data-testid="label"]');
+  const findGlNavItemActiveCount = () => findGlNavItemActive().find('[data-testid="count"]');
 
   describe('scope navigation', () => {
     beforeEach(() => {
@@ -71,8 +72,8 @@ describe('ScopeNavigation', () => {
     });
 
     it('has correct active item', () => {
-      expect(findGlNavItemActive()).toHaveLength(1);
-      expect(findGlNavItemActiveLabel()).toBe('Issues');
+      expect(findGlNavItemActive().exists()).toBe(true);
+      expect(findGlNavItemActiveLabel().text()).toBe('Issues');
     });
 
     it('has correct active item count', () => {
@@ -80,7 +81,7 @@ describe('ScopeNavigation', () => {
     });
 
     it('does not have plus sign after count text', () => {
-      expect(findGlNavItemActive().at(0).findComponent(GlIcon).exists()).toBe(false);
+      expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(false);
     });
 
     it('has count is highlighted correctly', () => {
@@ -90,14 +91,26 @@ describe('ScopeNavigation', () => {
 
   describe('scope navigation sets proper state with NO url scope set', () => {
     beforeEach(() => {
+      getterSpies.currentScope = jest.fn(() => 'projects');
       createComponent({
         urlQuery: {},
+        navigation: {
+          ...MOCK_NAVIGATION,
+          projects: {
+            ...MOCK_NAVIGATION.projects,
+            active: true,
+          },
+          issues: {
+            ...MOCK_NAVIGATION.issues,
+            active: false,
+          },
+        },
       });
     });
 
     it('has correct active item', () => {
-      expect(findGlNavItems().at(0).attributes('active')).toBe('true');
-      expect(findGlNavItemActiveLabel()).toBe('Projects');
+      expect(findGlNavItemActive().exists()).toBe(true);
+      expect(findGlNavItemActiveLabel().text()).toBe('Projects');
     });
 
     it('has correct active item count', () => {
@@ -105,7 +118,7 @@ describe('ScopeNavigation', () => {
     });
 
     it('has correct active item count and over limit sign', () => {
-      expect(findGlNavItemActive().at(0).findComponent(GlIcon).exists()).toBe(true);
+      expect(findGlNavItemActive().findComponent(GlIcon).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/search/sort/components/app_spec.js b/spec/frontend/search/sort/components/app_spec.js
index a566b9b99d3..322ce1b16ef 100644
--- a/spec/frontend/search/sort/components/app_spec.js
+++ b/spec/frontend/search/sort/components/app_spec.js
@@ -38,11 +38,6 @@ describe('GlobalSearchSort', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findSortButtonGroup = () => wrapper.findComponent(GlButtonGroup);
   const findSortDropdown = () => wrapper.findComponent(GlDropdown);
   const findSortDirectionButton = () => wrapper.findComponent(GlButton);
diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js
index 2f87802dfe6..0884411df0c 100644
--- a/spec/frontend/search/store/actions_spec.js
+++ b/spec/frontend/search/store/actions_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import * as logger from '~/lib/logger';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
@@ -33,7 +33,7 @@ import {
   MOCK_AGGREGATIONS,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   setUrlParams: jest.fn(),
   joinPaths: jest.fn().mockReturnValue(''),
@@ -47,7 +47,7 @@ describe('Global Search Store Actions', () => {
   let mock;
   let state;
 
-  const flashCallback = (callCount) => {
+  const alertCallback = (callCount) => {
     expect(createAlert).toHaveBeenCalledTimes(callCount);
     createAlert.mockClear();
   };
@@ -63,12 +63,12 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                   | axiosMock                                                                  | type         | expectedMutations                                                                                       | flashCallCount
+    action                   | axiosMock                                                                  | type         | expectedMutations                                                                                       | alertCallCount
     ${actions.fetchGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_GROUPS }}             | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]}       | ${0}
     ${actions.fetchGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }} | ${'error'}   | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]}                               | ${1}
     ${actions.fetchProjects} | ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_PROJECTS }}           | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${0}
     ${actions.fetchProjects} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }} | ${'error'}   | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]}                           | ${1}
-  `(`axios calls`, ({ action, axiosMock, type, expectedMutations, flashCallCount }) => {
+  `(`axios calls`, ({ action, axiosMock, type, expectedMutations, alertCallCount }) => {
     describe(action.name, () => {
       describe(`on ${type}`, () => {
         beforeEach(() => {
@@ -76,7 +76,7 @@ describe('Global Search Store Actions', () => {
         });
         it(`should dispatch the correct mutations`, () => {
           return testAction({ action, state, expectedMutations }).then(() =>
-            flashCallback(flashCallCount),
+            alertCallback(alertCallCount),
           );
         });
       });
@@ -84,12 +84,12 @@ describe('Global Search Store Actions', () => {
   });
 
   describe.each`
-    action                          | axiosMock                                                       | type         | expectedMutations                               | flashCallCount
+    action                          | axiosMock                                                       | type         | expectedMutations                               | alertCallCount
     ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resGroups]}   | ${0}
     ${actions.loadFrequentGroups}   | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${[]}                                           | ${1}
     ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${[PROMISE_ALL_EXPECTED_MUTATIONS.resProjects]} | ${0}
     ${actions.loadFrequentProjects} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${[]}                                           | ${1}
-  `('Promise.all calls', ({ action, axiosMock, type, expectedMutations, flashCallCount }) => {
+  `('Promise.all calls', ({ action, axiosMock, type, expectedMutations, alertCallCount }) => {
     describe(action.name, () => {
       describe(`on ${type}`, () => {
         beforeEach(() => {
@@ -103,7 +103,7 @@ describe('Global Search Store Actions', () => {
 
         it(`should dispatch the correct mutations`, () => {
           return testAction({ action, state, expectedMutations }).then(() => {
-            flashCallback(flashCallCount);
+            alertCallback(alertCallCount);
           });
         });
       });
@@ -275,7 +275,7 @@ describe('Global Search Store Actions', () => {
   describe.each`
     action                       | axiosMock                                                       | type         | scope         | expectedMutations                    | errorLogs
     ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: HTTP_STATUS_OK }}                    | ${'success'} | ${'issues'}   | ${[MOCK_NAVIGATION_ACTION_MUTATION]} | ${0}
-    ${actions.fetchSidebarCount} | ${{ method: null, code: 0 }}                                    | ${'success'} | ${'projects'} | ${[]}                                | ${0}
+    ${actions.fetchSidebarCount} | ${{ method: null, code: 0 }}                                    | ${'error'}   | ${'projects'} | ${[]}                                | ${1}
     ${actions.fetchSidebarCount} | ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR }} | ${'error'}   | ${'issues'}   | ${[]}                                | ${1}
   `('fetchSidebarCount', ({ action, axiosMock, type, expectedMutations, scope, errorLogs }) => {
     describe(`on ${type}`, () => {
@@ -290,9 +290,9 @@ describe('Global Search Store Actions', () => {
         }
       });
 
-      it(`should ${expectedMutations.length === 0 ? 'NOT ' : ''}dispatch ${
-        expectedMutations.length === 0 ? '' : 'the correct '
-      }mutations for ${scope}`, () => {
+      it(`should ${expectedMutations.length === 0 ? 'NOT' : ''} dispatch ${
+        expectedMutations.length === 0 ? '' : 'the correct'
+      } mutations for ${scope}`, () => {
         return testAction({ action, state, expectedMutations }).then(() => {
           expect(logger.logError).toHaveBeenCalledTimes(errorLogs);
         });
@@ -325,4 +325,26 @@ describe('Global Search Store Actions', () => {
       });
     });
   });
+
+  describe('resetLanguageQueryWithRedirect', () => {
+    it('calls visitUrl and setParams with the state.query', () => {
+      return testAction(actions.resetLanguageQueryWithRedirect, null, state, [], [], () => {
+        expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ ...state.query, page: null });
+        expect(urlUtils.visitUrl).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('resetLanguageQuery', () => {
+    it('calls commit SET_QUERY with value []', () => {
+      state = { ...state, query: { ...state.query, language: ['YAML', 'Text', 'Markdown'] } };
+      return testAction(
+        actions.resetLanguageQuery,
+        null,
+        state,
+        [{ type: types.SET_QUERY, payload: { key: 'language', value: [] } }],
+        [],
+      );
+    });
+  });
 });
diff --git a/spec/frontend/search/store/getters_spec.js b/spec/frontend/search/store/getters_spec.js
index 818902ee720..0ef0922c4b0 100644
--- a/spec/frontend/search/store/getters_spec.js
+++ b/spec/frontend/search/store/getters_spec.js
@@ -1,12 +1,15 @@
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from '~/search/store/constants';
 import * as getters from '~/search/store/getters';
 import createState from '~/search/store/state';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import {
   MOCK_QUERY,
   MOCK_GROUPS,
   MOCK_PROJECTS,
   MOCK_AGGREGATIONS,
   MOCK_LANGUAGE_AGGREGATIONS_BUCKETS,
+  TEST_FILTER_DATA,
+  MOCK_NAVIGATION,
 } from '../mock_data';
 
 describe('Global Search Store Getters', () => {
@@ -14,37 +17,55 @@ describe('Global Search Store Getters', () => {
 
   beforeEach(() => {
     state = createState({ query: MOCK_QUERY });
+    useMockLocationHelper();
   });
 
   describe('frequentGroups', () => {
-    beforeEach(() => {
-      state.frequentItems[GROUPS_LOCAL_STORAGE_KEY] = MOCK_GROUPS;
-    });
-
     it('returns the correct data', () => {
+      state.frequentItems[GROUPS_LOCAL_STORAGE_KEY] = MOCK_GROUPS;
       expect(getters.frequentGroups(state)).toStrictEqual(MOCK_GROUPS);
     });
   });
 
   describe('frequentProjects', () => {
-    beforeEach(() => {
-      state.frequentItems[PROJECTS_LOCAL_STORAGE_KEY] = MOCK_PROJECTS;
-    });
-
     it('returns the correct data', () => {
+      state.frequentItems[PROJECTS_LOCAL_STORAGE_KEY] = MOCK_PROJECTS;
       expect(getters.frequentProjects(state)).toStrictEqual(MOCK_PROJECTS);
     });
   });
 
-  describe('langugageAggregationBuckets', () => {
-    beforeEach(() => {
+  describe('languageAggregationBuckets', () => {
+    it('returns the correct data', () => {
       state.aggregations.data = MOCK_AGGREGATIONS;
+      expect(getters.languageAggregationBuckets(state)).toStrictEqual(
+        MOCK_LANGUAGE_AGGREGATIONS_BUCKETS,
+      );
     });
+  });
 
+  describe('queryLanguageFilters', () => {
     it('returns the correct data', () => {
-      expect(getters.langugageAggregationBuckets(state)).toStrictEqual(
-        MOCK_LANGUAGE_AGGREGATIONS_BUCKETS,
-      );
+      state.query.language = Object.keys(TEST_FILTER_DATA.filters);
+      expect(getters.queryLanguageFilters(state)).toStrictEqual(state.query.language);
+    });
+  });
+
+  describe('currentScope', () => {
+    it('returns the correct scope name', () => {
+      state.navigation = MOCK_NAVIGATION;
+      expect(getters.currentScope(state)).toBe('issues');
+    });
+  });
+
+  describe('currentUrlQueryHasLanguageFilters', () => {
+    it.each`
+      description             | lang                        | result
+      ${'has valid language'} | ${{ language: ['a', 'b'] }} | ${true}
+      ${'has empty lang'}     | ${{ language: [] }}         | ${false}
+      ${'has no lang'}        | ${{}}                       | ${false}
+    `('$description', ({ lang, result }) => {
+      state.urlQuery = lang;
+      expect(getters.currentUrlQueryHasLanguageFilters(state)).toBe(result);
     });
   });
 });
diff --git a/spec/frontend/search/store/utils_spec.js b/spec/frontend/search/store/utils_spec.js
index 487ed7bfe03..dfe4e801f11 100644
--- a/spec/frontend/search/store/utils_spec.js
+++ b/spec/frontend/search/store/utils_spec.js
@@ -7,6 +7,7 @@ import {
   isSidebarDirty,
   formatSearchResultCount,
   getAggregationsUrl,
+  prepareSearchAggregations,
 } from '~/search/store/utils';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import {
@@ -15,6 +16,9 @@ import {
   MOCK_INFLATED_DATA,
   FRESH_STORED_DATA,
   STALE_STORED_DATA,
+  MOCK_AGGREGATIONS,
+  SMALL_MOCK_AGGREGATIONS,
+  TEST_RAW_BUCKETS,
 } from '../mock_data';
 
 const PREV_TIME = new Date().getTime() - 1;
@@ -226,11 +230,14 @@ describe('Global Search Store Utils', () => {
   });
 
   describe.each`
-    description            | currentQuery                                                          | urlQuery                                                              | isDirty
-    ${'identical'}         | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${false}
-    ${'different'}         | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'new' }}     | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default' }} | ${true}
-    ${'null/undefined'}    | ${{ [SIDEBAR_PARAMS[0]]: null, [SIDEBAR_PARAMS[1]]: null }}           | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined }} | ${false}
-    ${'updated/undefined'} | ${{ [SIDEBAR_PARAMS[0]]: 'new', [SIDEBAR_PARAMS[1]]: 'new' }}         | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined }} | ${true}
+    description                             | currentQuery                                                                                           | urlQuery                                                                                               | isDirty
+    ${'identical'}                          | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default', [SIDEBAR_PARAMS[2]]: ['a', 'b'] }} | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default', [SIDEBAR_PARAMS[2]]: ['a', 'b'] }} | ${false}
+    ${'different'}                          | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'new', [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}     | ${{ [SIDEBAR_PARAMS[0]]: 'default', [SIDEBAR_PARAMS[1]]: 'default', [SIDEBAR_PARAMS[2]]: ['a', 'c'] }} | ${true}
+    ${'null/undefined'}                     | ${{ [SIDEBAR_PARAMS[0]]: null, [SIDEBAR_PARAMS[1]]: null, [SIDEBAR_PARAMS[2]]: null }}                 | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined, [SIDEBAR_PARAMS[2]]: undefined }}  | ${false}
+    ${'updated/undefined'}                  | ${{ [SIDEBAR_PARAMS[0]]: 'new', [SIDEBAR_PARAMS[1]]: 'new', [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}         | ${{ [SIDEBAR_PARAMS[0]]: undefined, [SIDEBAR_PARAMS[1]]: undefined, [SIDEBAR_PARAMS[2]]: [] }}         | ${true}
+    ${'language only no url params'}        | ${{ [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}                                                                 | ${{ [SIDEBAR_PARAMS[2]]: undefined }}                                                                  | ${true}
+    ${'language only url params symetric'}  | ${{ [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}                                                                 | ${{ [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}                                                                 | ${false}
+    ${'language only url params asymetric'} | ${{ [SIDEBAR_PARAMS[2]]: ['a'] }}                                                                      | ${{ [SIDEBAR_PARAMS[2]]: ['a', 'b'] }}                                                                 | ${true}
   `('isSidebarDirty', ({ description, currentQuery, urlQuery, isDirty }) => {
     describe(`with ${description} sidebar query data`, () => {
       let res;
@@ -263,4 +270,22 @@ describe('Global Search Store Utils', () => {
       expect(getAggregationsUrl()).toStrictEqual(`${testURL}search/aggregations`);
     });
   });
+
+  const TEST_LANGUAGE_QUERY = ['Markdown', 'JSON'];
+  const TEST_EXPECTED_ORDERED_BUCKETS = [
+    TEST_RAW_BUCKETS.find((x) => x.key === 'Markdown'),
+    TEST_RAW_BUCKETS.find((x) => x.key === 'JSON'),
+    ...TEST_RAW_BUCKETS.filter((x) => !TEST_LANGUAGE_QUERY.includes(x.key)),
+  ];
+
+  describe('prepareSearchAggregations', () => {
+    it.each`
+      description        | query                                | data                       | result
+      ${'has no query'}  | ${undefined}                         | ${MOCK_AGGREGATIONS}       | ${MOCK_AGGREGATIONS}
+      ${'has query'}     | ${{ language: TEST_LANGUAGE_QUERY }} | ${SMALL_MOCK_AGGREGATIONS} | ${[{ ...SMALL_MOCK_AGGREGATIONS[0], buckets: TEST_EXPECTED_ORDERED_BUCKETS }]}
+      ${'has bad query'} | ${{ language: ['sdf', 'wrt'] }}      | ${SMALL_MOCK_AGGREGATIONS} | ${SMALL_MOCK_AGGREGATIONS}
+    `('$description', ({ query, data, result }) => {
+      expect(prepareSearchAggregations({ query }, data)).toStrictEqual(result);
+    });
+  });
 });
diff --git a/spec/frontend/search/topbar/components/app_spec.js b/spec/frontend/search/topbar/components/app_spec.js
index 3975887cfff..423ec6ff63b 100644
--- a/spec/frontend/search/topbar/components/app_spec.js
+++ b/spec/frontend/search/topbar/components/app_spec.js
@@ -36,10 +36,6 @@ describe('GlobalSearchTopbar', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlSearchBox = () => wrapper.findComponent(GlSearchBoxByClick);
   const findGroupFilter = () => wrapper.findComponent(GroupFilter);
   const findProjectFilter = () => wrapper.findComponent(ProjectFilter);
diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js
index b2d0297fdc2..78d9efbd686 100644
--- a/spec/frontend/search/topbar/components/group_filter_spec.js
+++ b/spec/frontend/search/topbar/components/group_filter_spec.js
@@ -49,10 +49,6 @@ describe('GroupFilter', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSearchableDropdown = () => wrapper.findComponent(SearchableDropdown);
 
   describe('template', () => {
diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js
index 297a536e075..9eda34b1633 100644
--- a/spec/frontend/search/topbar/components/project_filter_spec.js
+++ b/spec/frontend/search/topbar/components/project_filter_spec.js
@@ -49,10 +49,6 @@ describe('ProjectFilter', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSearchableDropdown = () => wrapper.findComponent(SearchableDropdown);
 
   describe('template', () => {
diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js
index e51fe9a4cf9..c911fe53d40 100644
--- a/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js
+++ b/spec/frontend/search/topbar/components/searchable_dropdown_item_spec.js
@@ -24,10 +24,6 @@ describe('Global Search Searchable Dropdown Item', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem);
   const findGlAvatar = () => wrapper.findComponent(GlAvatar);
   const findDropdownTitle = () => wrapper.findByTestId('item-title');
diff --git a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
index de1cefa9e9d..5e5f46ff34e 100644
--- a/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
+++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js
@@ -1,6 +1,6 @@
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data';
@@ -40,10 +40,6 @@ describe('Global Search Searchable Dropdown', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findGlDropdownSearch = () => findGlDropdown().findComponent(GlSearchBoxByType);
   const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text');
@@ -133,9 +129,7 @@ describe('Global Search Searchable Dropdown', () => {
       describe(`when search is ${searchText} and frequentItems length is ${frequentItems.length}`, () => {
         beforeEach(() => {
           createComponent({}, { frequentItems });
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({ searchText });
+          findGlDropdownSearch().vm.$emit('input', searchText);
         });
 
         it(`should${length ? '' : ' not'} render frequent dropdown items`, () => {
@@ -191,28 +185,33 @@ describe('Global Search Searchable Dropdown', () => {
     });
 
     describe('opening the dropdown', () => {
-      describe('for the first time', () => {
-        beforeEach(() => {
-          findGlDropdown().vm.$emit('show');
-        });
+      beforeEach(() => {
+        findGlDropdown().vm.$emit('show');
+      });
 
-        it('$emits @search and @first-open', () => {
-          expect(wrapper.emitted('search')[0]).toStrictEqual([wrapper.vm.searchText]);
-          expect(wrapper.emitted('first-open')[0]).toStrictEqual([]);
-        });
+      it('$emits @search and @first-open on the first open', async () => {
+        expect(wrapper.emitted('search')[0]).toStrictEqual(['']);
+        expect(wrapper.emitted('first-open')[0]).toStrictEqual([]);
       });
 
-      describe('not for the first time', () => {
-        beforeEach(() => {
-          // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-          // eslint-disable-next-line no-restricted-syntax
-          wrapper.setData({ hasBeenOpened: true });
-          findGlDropdown().vm.$emit('show');
+      describe('when the dropdown has been opened', () => {
+        it('$emits @search with the searchText', async () => {
+          const searchText = 'foo';
+
+          findGlDropdownSearch().vm.$emit('input', searchText);
+          await nextTick();
+
+          expect(wrapper.emitted('search')[1]).toStrictEqual([searchText]);
+          expect(wrapper.emitted('first-open')).toHaveLength(1);
         });
 
-        it('$emits @search and not @first-open', () => {
-          expect(wrapper.emitted('search')[0]).toStrictEqual([wrapper.vm.searchText]);
-          expect(wrapper.emitted('first-open')).toBeUndefined();
+        it('does not emit @first-open again', async () => {
+          expect(wrapper.emitted('first-open')).toHaveLength(1);
+
+          findGlDropdownSearch().vm.$emit('input');
+          await nextTick();
+
+          expect(wrapper.emitted('first-open')).toHaveLength(1);
         });
       });
     });
diff --git a/spec/frontend/search_autocomplete_spec.js b/spec/frontend/search_autocomplete_spec.js
index a3098fb81ea..dfb31eeda78 100644
--- a/spec/frontend/search_autocomplete_spec.js
+++ b/spec/frontend/search_autocomplete_spec.js
@@ -119,7 +119,6 @@ describe('Search autocomplete dropdown', () => {
   afterEach(() => {
     // Undo what we did to the shared <body>
     removeBodyAttributes();
-    window.gon = {};
 
     resetHTMLFixture();
   });
diff --git a/spec/frontend/search_settings/components/search_settings_spec.js b/spec/frontend/search_settings/components/search_settings_spec.js
index 3f856968db6..fe761049a70 100644
--- a/spec/frontend/search_settings/components/search_settings_spec.js
+++ b/spec/frontend/search_settings/components/search_settings_spec.js
@@ -79,10 +79,6 @@ describe('search_settings/components/search_settings.vue', () => {
     buildWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('hides sections that do not match the search term', () => {
     const hiddenSection = document.querySelector(`#${GENERAL_SETTINGS_ID}`);
     search(SEARCH_TERM);
diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index ddefda2ffc3..0ca350f9ed7 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -26,6 +26,8 @@ import {
   REPORT_TYPE_LICENSE_COMPLIANCE,
   REPORT_TYPE_SAST,
 } from '~/vue_shared/security_reports/constants';
+import { USER_FACING_ERROR_MESSAGE_PREFIX } from '~/lib/utils/error_message';
+import { manageViaMRErrorMessage } from '../constants';
 
 const upgradePath = '/upgrade';
 const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
@@ -129,10 +131,6 @@ describe('App component', () => {
   const findAutoDevopsEnabledAlert = () => wrapper.findComponent(AutoDevopsEnabledAlert);
   const findVulnerabilityManagementTab = () => wrapper.findByTestId('vulnerability-management-tab');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('basic structure', () => {
     beforeEach(() => {
       createComponent();
@@ -141,7 +139,7 @@ describe('App component', () => {
     it('renders main-heading with correct text', () => {
       const mainHeading = findMainHeading();
       expect(mainHeading.exists()).toBe(true);
-      expect(mainHeading.text()).toContain('Security Configuration');
+      expect(mainHeading.text()).toContain('Security configuration');
     });
 
     describe('tabs', () => {
@@ -204,18 +202,21 @@ describe('App component', () => {
       });
     });
 
-    describe('when error occurs', () => {
+    describe('when user facing error occurs', () => {
       it('should show Alert with error Message', async () => {
         expect(findManageViaMRErrorAlert().exists()).toBe(false);
-        findFeatureCards().at(1).vm.$emit('error', 'There was a manage via MR error');
+        // Prefixed with USER_FACING_ERROR_MESSAGE_PREFIX as used in lib/gitlab/utils/error_message.rb to indicate a user facing error
+        findFeatureCards()
+          .at(1)
+          .vm.$emit('error', `${USER_FACING_ERROR_MESSAGE_PREFIX} ${manageViaMRErrorMessage}`);
 
         await nextTick();
         expect(findManageViaMRErrorAlert().exists()).toBe(true);
-        expect(findManageViaMRErrorAlert().text()).toEqual('There was a manage via MR error');
+        expect(findManageViaMRErrorAlert().text()).toEqual(manageViaMRErrorMessage);
       });
 
       it('should hide Alert when it is dismissed', async () => {
-        findFeatureCards().at(1).vm.$emit('error', 'There was a manage via MR error');
+        findFeatureCards().at(1).vm.$emit('error', manageViaMRErrorMessage);
 
         await nextTick();
         expect(findManageViaMRErrorAlert().exists()).toBe(true);
@@ -225,6 +226,17 @@ describe('App component', () => {
         expect(findManageViaMRErrorAlert().exists()).toBe(false);
       });
     });
+
+    describe('when non-user facing error occurs', () => {
+      it('should show Alert with generic error Message', async () => {
+        expect(findManageViaMRErrorAlert().exists()).toBe(false);
+        findFeatureCards().at(1).vm.$emit('error', manageViaMRErrorMessage);
+
+        await nextTick();
+        expect(findManageViaMRErrorAlert().exists()).toBe(true);
+        expect(findManageViaMRErrorAlert().text()).toEqual(i18n.genericErrorText);
+      });
+    });
   });
 
   describe('Auto DevOps hint alert', () => {
diff --git a/spec/frontend/security_configuration/components/auto_dev_ops_alert_spec.js b/spec/frontend/security_configuration/components/auto_dev_ops_alert_spec.js
index 467ae35408c..df1fa1a8084 100644
--- a/spec/frontend/security_configuration/components/auto_dev_ops_alert_spec.js
+++ b/spec/frontend/security_configuration/components/auto_dev_ops_alert_spec.js
@@ -23,10 +23,6 @@ describe('AutoDevopsAlert component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains correct body text', () => {
     expect(wrapper.text()).toContain('Quickly enable all');
   });
diff --git a/spec/frontend/security_configuration/components/auto_dev_ops_enabled_alert_spec.js b/spec/frontend/security_configuration/components/auto_dev_ops_enabled_alert_spec.js
index 778fea2896a..22f45a92f70 100644
--- a/spec/frontend/security_configuration/components/auto_dev_ops_enabled_alert_spec.js
+++ b/spec/frontend/security_configuration/components/auto_dev_ops_enabled_alert_spec.js
@@ -21,10 +21,6 @@ describe('AutoDevopsEnabledAlert component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('contains correct body text', () => {
     expect(wrapper.text()).toMatchInterpolatedText(AutoDevopsEnabledAlert.i18n.body);
   });
diff --git a/spec/frontend/security_configuration/components/feature_card_spec.js b/spec/frontend/security_configuration/components/feature_card_spec.js
index d10722be8ea..23edd8a69de 100644
--- a/spec/frontend/security_configuration/components/feature_card_spec.js
+++ b/spec/frontend/security_configuration/components/feature_card_spec.js
@@ -5,6 +5,7 @@ import FeatureCard from '~/security_configuration/components/feature_card.vue';
 import FeatureCardBadge from '~/security_configuration/components/feature_card_badge.vue';
 import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import { REPORT_TYPE_SAST } from '~/vue_shared/security_reports/constants';
+import { manageViaMRErrorMessage } from '../constants';
 import { makeFeature } from './utils';
 
 describe('FeatureCard component', () => {
@@ -78,7 +79,6 @@ describe('FeatureCard component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     feature = undefined;
   });
 
@@ -107,8 +107,8 @@ describe('FeatureCard component', () => {
     });
 
     it('should catch and emit manage-via-mr-error', () => {
-      findManageViaMr().vm.$emit('error', 'There was a manage via MR error');
-      expect(wrapper.emitted('error')).toEqual([['There was a manage via MR error']]);
+      findManageViaMr().vm.$emit('error', manageViaMRErrorMessage);
+      expect(wrapper.emitted('error')).toEqual([[manageViaMRErrorMessage]]);
     });
   });
 
diff --git a/spec/frontend/security_configuration/components/training_provider_list_spec.js b/spec/frontend/security_configuration/components/training_provider_list_spec.js
index 8f2b5383191..1f8f306c931 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -106,7 +106,7 @@ describe('TrainingProviderList component', () => {
         projectFullPath: testProjectPath,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       propsData: {
         securityTrainingEnabled: true,
@@ -132,7 +132,6 @@ describe('TrainingProviderList component', () => {
   const toggleFirstProvider = () => findFirstToggle().vm.$emit('change', testProviderIds[0]);
 
   afterEach(() => {
-    wrapper.destroy();
     apolloProvider = null;
   });
 
diff --git a/spec/frontend/security_configuration/components/upgrade_banner_spec.js b/spec/frontend/security_configuration/components/upgrade_banner_spec.js
index c34d8e47a6c..97087877224 100644
--- a/spec/frontend/security_configuration/components/upgrade_banner_spec.js
+++ b/spec/frontend/security_configuration/components/upgrade_banner_spec.js
@@ -44,7 +44,6 @@ describe('UpgradeBanner component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     unmockTracking();
   });
 
diff --git a/spec/frontend/security_configuration/constants.js b/spec/frontend/security_configuration/constants.js
new file mode 100644
index 00000000000..d31036a2534
--- /dev/null
+++ b/spec/frontend/security_configuration/constants.js
@@ -0,0 +1 @@
+export const manageViaMRErrorMessage = 'There was a manage via MR error';
diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
index efe3f7e8dbf..c278bb4579f 100644
--- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
+++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
@@ -40,6 +40,41 @@ exports[`self-monitor component When the self-monitor project has not been creat
     </p>
   </div>
    
+  <gl-alert-stub
+    class="gl-mb-3"
+    dismissible="true"
+    dismisslabel="Dismiss"
+    primarybuttonlink=""
+    primarybuttontext=""
+    secondarybuttonlink=""
+    secondarybuttontext=""
+    showicon="true"
+    title="Deprecation notice"
+    variant="danger"
+  >
+    <div>
+      Self-monitoring was 
+      <a
+        href="/help/update/deprecations.md#gitlab-self-monitoring-project"
+      >
+        deprecated
+      </a>
+       in GitLab 14.9, and is 
+      <a
+        href="https://gitlab.com/gitlab-org/gitlab/-/issues/348909"
+      >
+        scheduled for removal
+      </a>
+       in GitLab 16.0. For information on a possible replacement, 
+      <a
+        href="https://gitlab.com/groups/gitlab-org/-/epics/6976"
+      >
+        learn more about Opstrace
+      </a>
+      .
+    </div>
+  </gl-alert-stub>
+   
   <div
     class="settings-content"
   >
diff --git a/spec/frontend/sentry/index_spec.js b/spec/frontend/sentry/index_spec.js
index 2dd528a8a1c..83195e9d306 100644
--- a/spec/frontend/sentry/index_spec.js
+++ b/spec/frontend/sentry/index_spec.js
@@ -4,8 +4,6 @@ import LegacySentryConfig from '~/sentry/legacy_sentry_config';
 import SentryConfig from '~/sentry/sentry_config';
 
 describe('Sentry init', () => {
-  let originalGon;
-
   const dsn = 'https://123@sentry.gitlab.test/123';
   const environment = 'test';
   const currentUserId = '1';
@@ -14,7 +12,6 @@ describe('Sentry init', () => {
   const featureCategory = 'my_feature_category';
 
   beforeEach(() => {
-    originalGon = window.gon;
     window.gon = {
       sentry_dsn: dsn,
       sentry_environment: environment,
@@ -28,10 +25,6 @@ describe('Sentry init', () => {
     jest.spyOn(SentryConfig, 'init').mockImplementation();
   });
 
-  afterEach(() => {
-    window.gon = originalGon;
-  });
-
   it('exports new version of Sentry in the global object', () => {
     // eslint-disable-next-line no-underscore-dangle
     expect(window._Sentry.SDK_VERSION).not.toMatch(/^5\./);
diff --git a/spec/frontend/sentry/legacy_index_spec.js b/spec/frontend/sentry/legacy_index_spec.js
index 5c336f8392e..493b4dfde67 100644
--- a/spec/frontend/sentry/legacy_index_spec.js
+++ b/spec/frontend/sentry/legacy_index_spec.js
@@ -4,8 +4,6 @@ import LegacySentryConfig from '~/sentry/legacy_sentry_config';
 import SentryConfig from '~/sentry/sentry_config';
 
 describe('Sentry init', () => {
-  let originalGon;
-
   const dsn = 'https://123@sentry.gitlab.test/123';
   const environment = 'test';
   const currentUserId = '1';
@@ -14,7 +12,6 @@ describe('Sentry init', () => {
   const featureCategory = 'my_feature_category';
 
   beforeEach(() => {
-    originalGon = window.gon;
     window.gon = {
       sentry_dsn: dsn,
       sentry_environment: environment,
@@ -28,10 +25,6 @@ describe('Sentry init', () => {
     jest.spyOn(SentryConfig, 'init').mockImplementation();
   });
 
-  afterEach(() => {
-    window.gon = originalGon;
-  });
-
   it('exports legacy version of Sentry in the global object', () => {
     // eslint-disable-next-line no-underscore-dangle
     expect(window._Sentry.SDK_VERSION).toMatch(/^5\./);
diff --git a/spec/frontend/sentry/sentry_config_spec.js b/spec/frontend/sentry/sentry_config_spec.js
index 44acbee9b38..34c5221ef0d 100644
--- a/spec/frontend/sentry/sentry_config_spec.js
+++ b/spec/frontend/sentry/sentry_config_spec.js
@@ -1,5 +1,4 @@
 import * as Sentry from 'sentrybrowser7';
-import { IGNORE_ERRORS, DENY_URLS, SAMPLE_RATE } from '~/sentry/constants';
 
 import SentryConfig from '~/sentry/sentry_config';
 
@@ -62,11 +61,8 @@ describe('SentryConfig', () => {
       expect(Sentry.init).toHaveBeenCalledWith({
         dsn: options.dsn,
         release: options.release,
-        sampleRate: SAMPLE_RATE,
         allowUrls: options.allowUrls,
         environment: options.environment,
-        ignoreErrors: IGNORE_ERRORS,
-        denyUrls: DENY_URLS,
       });
     });
 
@@ -82,11 +78,8 @@ describe('SentryConfig', () => {
       expect(Sentry.init).toHaveBeenCalledWith({
         dsn: options.dsn,
         release: options.release,
-        sampleRate: SAMPLE_RATE,
         allowUrls: options.allowUrls,
         environment: 'development',
-        ignoreErrors: IGNORE_ERRORS,
-        denyUrls: DENY_URLS,
       });
     });
   });
diff --git a/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js b/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
index 85cd8d51272..b5bf739b35a 100644
--- a/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
+++ b/spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js
@@ -5,13 +5,13 @@ import { useFakeDate } from 'helpers/fake_date';
 import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
 import EmojiPicker from '~/emoji/components/picker.vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import stubChildren from 'helpers/stub_children';
 import SetStatusModalWrapper from '~/set_status_modal/set_status_modal_wrapper.vue';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
 import SetStatusForm from '~/set_status_modal/set_status_form.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('SetStatusModalWrapper', () => {
   let wrapper;
@@ -72,7 +72,6 @@ describe('SetStatusModalWrapper', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     clearEmojiMock();
   });
 
@@ -244,7 +243,7 @@ describe('SetStatusModalWrapper', () => {
         return initModal({ mockOnUpdateFailure: false });
       });
 
-      it('flashes an error message', async () => {
+      it('alerts an error message', async () => {
         findModal().vm.$emit('primary');
         await nextTick();
 
diff --git a/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js b/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js
index a4a2a86dc73..a6ad90123b7 100644
--- a/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js
+++ b/spec/frontend/set_status_modal/user_profile_set_status_wrapper_spec.js
@@ -37,10 +37,6 @@ describe('UserProfileSetStatusWrapper', () => {
   const findInput = (name) => wrapper.find(`[name="${name}"]`);
   const findSetStatusForm = () => wrapper.findComponent(SetStatusForm);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders `SetStatusForm` component and passes expected props', () => {
     createComponent();
 
diff --git a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
index 60edab8766a..81b65f4f050 100644
--- a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
@@ -30,10 +30,6 @@ describe('AssigneeAvatarLink component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTooltipText = () => wrapper.attributes('title');
   const findUserLink = () => wrapper.findComponent(GlLink);
 
diff --git a/spec/frontend/sidebar/components/assignees/assignee_avatar_spec.js b/spec/frontend/sidebar/components/assignees/assignee_avatar_spec.js
index 7df37d11987..b6b3dbd5b6b 100644
--- a/spec/frontend/sidebar/components/assignees/assignee_avatar_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignee_avatar_spec.js
@@ -7,7 +7,6 @@ const TEST_AVATAR = `${TEST_HOST}/avatar.png`;
 const TEST_DEFAULT_AVATAR_URL = `${TEST_HOST}/default/avatar/url.png`;
 
 describe('AssigneeAvatar', () => {
-  let origGon;
   let wrapper;
 
   function createComponent(props = {}) {
@@ -24,15 +23,9 @@ describe('AssigneeAvatar', () => {
   }
 
   beforeEach(() => {
-    origGon = window.gon;
     window.gon = { default_avatar_url: TEST_DEFAULT_AVATAR_URL };
   });
 
-  afterEach(() => {
-    window.gon = origGon;
-    wrapper.destroy();
-  });
-
   const findImg = () => wrapper.find('img');
 
   it('does not show warning icon if assignee can merge', () => {
diff --git a/spec/frontend/sidebar/components/assignees/assignee_title_spec.js b/spec/frontend/sidebar/components/assignees/assignee_title_spec.js
index 14a6bdbf907..d561c761c99 100644
--- a/spec/frontend/sidebar/components/assignees/assignee_title_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignee_title_spec.js
@@ -17,11 +17,6 @@ describe('AssigneeTitle component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('assignee title', () => {
     it('renders assignee', () => {
       wrapper = createComponent({
diff --git a/spec/frontend/sidebar/components/assignees/assignees_realtime_spec.js b/spec/frontend/sidebar/components/assignees/assignees_realtime_spec.js
index 080171fb2ea..0501c1bae23 100644
--- a/spec/frontend/sidebar/components/assignees/assignees_realtime_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignees_realtime_spec.js
@@ -49,7 +49,6 @@ describe('Assignees Realtime', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
     SidebarMediator.singleton = null;
   });
diff --git a/spec/frontend/sidebar/components/assignees/assignees_spec.js b/spec/frontend/sidebar/components/assignees/assignees_spec.js
index d422292ed9e..1661e28abd2 100644
--- a/spec/frontend/sidebar/components/assignees/assignees_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignees_spec.js
@@ -25,10 +25,6 @@ describe('Assignee component', () => {
   const findComponentTextNoUsers = () => wrapper.find('[data-testid="no-value"]');
   const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('No assignees/users', () => {
     it('displays no assignee icon when collapsed', () => {
       createWrapper();
diff --git a/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js
index 7e7d4921cfa..40d3d090bb4 100644
--- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js
+++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js
@@ -26,10 +26,6 @@ describe('CollapsedAssigneeList component', () => {
   const findAssignees = () => wrapper.findAllComponents(CollapsedAssignee);
   const getTooltipTitle = () => wrapper.attributes('title');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('No assignees/users', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
index 4db95114b96..851eaedf0bd 100644
--- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
+++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
@@ -21,10 +21,6 @@ describe('CollapsedAssignee assignee component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has author name', () => {
     createComponent();
 
diff --git a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
index 1161fefcc64..82145b82e21 100644
--- a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
+++ b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
@@ -20,11 +20,6 @@ describe('IssuableAssignees', () => {
   const findUncollapsedAssigneeList = () => wrapper.findComponent(UncollapsedAssigneeList);
   const findEmptyAssignee = () => wrapper.find('[data-testid="none"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when no assignees are present', () => {
     it.each`
       signedIn | editable | message
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_spec.js
index 58b174059fa..a189d3656a2 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_spec.js
@@ -39,9 +39,6 @@ describe('sidebar assignees', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     SidebarService.singleton = null;
     SidebarStore.singleton = null;
     SidebarMediator.singleton = null;
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
index 3aca346ff5f..9f7c587ca9d 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -5,8 +5,8 @@ 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 { createAlert } from '~/flash';
-import { IssuableType } from '~/issues/constants';
+import { createAlert } from '~/alert';
+import { TYPE_MERGE_REQUEST } from '~/issues/constants';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
@@ -17,7 +17,7 @@ import updateIssueAssigneesMutation from '~/sidebar/queries/update_issue_assigne
 import UserSelect from '~/vue_shared/components/user_select/user_select.vue';
 import { issuableQueryResponse, updateIssueAssigneesMutationResponse } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const updateIssueAssigneesMutationSuccess = jest
   .fn()
@@ -98,10 +98,7 @@ describe('Sidebar assignees widget', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     fakeApollo = null;
-    delete gon.current_username;
   });
 
   describe('with passed initial assignees', () => {
@@ -397,7 +394,7 @@ describe('Sidebar assignees widget', () => {
   });
 
   it('does not render invite members link on non-issue sidebar', async () => {
-    createComponent({ props: { issuableType: IssuableType.MergeRequest } });
+    createComponent({ props: { issuableType: TYPE_MERGE_REQUEST } });
     await waitForPromises();
     expect(findInviteMembersLink().exists()).toBe(false);
   });
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
index 6c22d2f687d..27c31ac56c9 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
@@ -21,11 +21,6 @@ describe('boards sidebar remove issue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('template', () => {
     it('renders title', () => {
       const title = 'Sidebar item title';
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_invite_members_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_invite_members_spec.js
index b738d931040..501048bf056 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_invite_members_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_invite_members_spec.js
@@ -16,10 +16,6 @@ describe('Sidebar invite members component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when directly inviting members', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/sidebar/components/assignees/sidebar_participant_spec.js b/spec/frontend/sidebar/components/assignees/sidebar_participant_spec.js
index be0b14fa997..7895274ab6d 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_participant_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_participant_spec.js
@@ -1,6 +1,6 @@
 import { GlAvatarLabeled, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import SidebarParticipant from '~/sidebar/components/assignees/sidebar_participant.vue';
 
 const user = {
@@ -32,10 +32,6 @@ describe('Sidebar participant component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not show `Busy` status when user is not busy', () => {
     createComponent();
 
@@ -56,13 +52,13 @@ describe('Sidebar participant component', () => {
 
   describe('when on merge request sidebar', () => {
     it('when project member cannot merge', () => {
-      createComponent({ issuableType: IssuableType.MergeRequest });
+      createComponent({ issuableType: TYPE_MERGE_REQUEST });
 
       expect(findIcon().exists()).toBe(true);
     });
 
     it('when project member can merge', () => {
-      createComponent({ issuableType: IssuableType.MergeRequest, canMerge: true });
+      createComponent({ issuableType: TYPE_MERGE_REQUEST, canMerge: true });
 
       expect(findIcon().exists()).toBe(false);
     });
diff --git a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
index 03c2e1a37a9..c74a714cca4 100644
--- a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
+++ b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
@@ -24,10 +24,6 @@ describe('UncollapsedAssigneeList component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findMoreButton = () => wrapper.find('.user-list-more button');
 
   describe('One assignee/user', () => {
diff --git a/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js b/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js
index 37c16bc9235..877d7cd61ee 100644
--- a/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js
+++ b/spec/frontend/sidebar/components/assignees/user_name_with_status_spec.js
@@ -18,10 +18,6 @@ describe('UserNameWithStatus', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('will render the users name', () => {
     expect(wrapper.html()).toContain(name);
   });
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
index 81354d64a90..4a2b3b30e6d 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
@@ -18,10 +18,6 @@ describe('Sidebar Confidentiality Content', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits `expandSidebar` event on collapsed icon click', () => {
     createComponent();
     findCollapsedIcon().trigger('click');
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
index b27f7c6b4e1..1ca20dad1c6 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
@@ -2,11 +2,11 @@ import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import SidebarConfidentialityForm from '~/sidebar/components/confidential/sidebar_confidentiality_form.vue';
 import { confidentialityQueries } from '~/sidebar/constants';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Sidebar Confidentiality Form', () => {
   let wrapper;
@@ -38,10 +38,6 @@ describe('Sidebar Confidentiality Form', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits a `closeForm` event when Cancel button is clicked', () => {
     createComponent();
     findCancelButton().vm.$emit('click');
@@ -58,7 +54,7 @@ describe('Sidebar Confidentiality Form', () => {
     expect(findConfidentialToggle().props('loading')).toBe(true);
   });
 
-  it('creates a flash if mutation is rejected', async () => {
+  it('creates an alert if mutation is rejected', async () => {
     createComponent({ mutate: jest.fn().mockRejectedValue('Error!') });
     findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
     await waitForPromises();
@@ -68,7 +64,7 @@ describe('Sidebar Confidentiality Form', () => {
     });
   });
 
-  it('creates a flash if mutation contains errors', async () => {
+  it('creates an alert if mutation contains errors', async () => {
     createComponent({
       mutate: jest.fn().mockResolvedValue({
         data: { issuableSetConfidential: { errors: ['Houston, we have a problem!'] } },
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
index e486a8e9ec7..39b30307dd7 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import SidebarConfidentialityContent from '~/sidebar/components/confidential/sidebar_confidentiality_content.vue';
 import SidebarConfidentialityForm from '~/sidebar/components/confidential/sidebar_confidentiality_form.vue';
 import SidebarConfidentialityWidget, {
@@ -14,7 +14,7 @@ import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue'
 import issueConfidentialQuery from '~/sidebar/queries/issue_confidential.query.graphql';
 import { issueConfidentialityResponse } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -48,7 +48,6 @@ describe('Sidebar Confidentiality Widget', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -120,7 +119,7 @@ describe('Sidebar Confidentiality Widget', () => {
     });
   });
 
-  it('displays a flash message when query is rejected', async () => {
+  it('displays an alert message when query is rejected', async () => {
     createComponent({
       confidentialQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),
     });
diff --git a/spec/frontend/sidebar/components/copy/copyable_field_spec.js b/spec/frontend/sidebar/components/copy/copyable_field_spec.js
index 7790d77bc65..03e131aab35 100644
--- a/spec/frontend/sidebar/components/copy/copyable_field_spec.js
+++ b/spec/frontend/sidebar/components/copy/copyable_field_spec.js
@@ -20,10 +20,6 @@ describe('SidebarCopyableField', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
diff --git a/spec/frontend/sidebar/components/copy/sidebar_reference_widget_spec.js b/spec/frontend/sidebar/components/copy/sidebar_reference_widget_spec.js
index c3de076d6aa..2ae80b2c97b 100644
--- a/spec/frontend/sidebar/components/copy/sidebar_reference_widget_spec.js
+++ b/spec/frontend/sidebar/components/copy/sidebar_reference_widget_spec.js
@@ -3,7 +3,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 { IssuableType, TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import SidebarReferenceWidget from '~/sidebar/components/copy/sidebar_reference_widget.vue';
 import issueReferenceQuery from '~/sidebar/queries/issue_reference.query.graphql';
 import mergeRequestReferenceQuery from '~/sidebar/queries/merge_request_reference.query.graphql';
@@ -39,10 +39,6 @@ describe('Sidebar Reference Widget', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when reference is loading', () => {
     it('sets CopyableField `is-loading` prop to `true`', () => {
       createComponent({ referenceQueryHandler: jest.fn().mockReturnValue(new Promise(() => {})) });
@@ -52,7 +48,7 @@ describe('Sidebar Reference Widget', () => {
 
   describe.each([
     [TYPE_ISSUE, issueReferenceQuery],
-    [IssuableType.MergeRequest, mergeRequestReferenceQuery],
+    [TYPE_MERGE_REQUEST, mergeRequestReferenceQuery],
   ])('when issuableType is %s', (issuableType, referenceQuery) => {
     it('sets CopyableField `value` prop to reference value', async () => {
       createComponent({
diff --git a/spec/frontend/sidebar/components/crm_contacts/crm_contacts_spec.js b/spec/frontend/sidebar/components/crm_contacts/crm_contacts_spec.js
index ca43c219d92..546cabd07d3 100644
--- a/spec/frontend/sidebar/components/crm_contacts/crm_contacts_spec.js
+++ b/spec/frontend/sidebar/components/crm_contacts/crm_contacts_spec.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import CrmContacts from '~/sidebar/components/crm_contacts/crm_contacts.vue';
 import getIssueCrmContactsQuery from '~/sidebar/queries/get_issue_crm_contacts.query.graphql';
 import issueCrmContactsSubscription from '~/sidebar/queries/issue_crm_contacts.subscription.graphql';
@@ -13,7 +13,7 @@ import {
   issueCrmContactsUpdateNullResponse,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Issue crm contacts component', () => {
   Vue.use(VueApollo);
@@ -39,7 +39,6 @@ describe('Issue crm contacts component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js b/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js
index 67413cffdda..b9c8655d5d8 100644
--- a/spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_date_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
 import SidebarFormattedDate from '~/sidebar/components/date/sidebar_formatted_date.vue';
 import SidebarInheritDate from '~/sidebar/components/date/sidebar_inherit_date.vue';
@@ -13,7 +13,7 @@ import epicStartDateQuery from '~/sidebar/queries/epic_start_date.query.graphql'
 import issueDueDateQuery from '~/sidebar/queries/issue_due_date.query.graphql';
 import { issuableDueDateResponse, issuableStartDateResponse } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -22,10 +22,6 @@ describe('Sidebar date Widget', () => {
   let fakeApollo;
   const date = '2021-04-15';
 
-  window.gon = {
-    first_day_of_week: 1,
-  };
-
   const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
   const findPopoverIcon = () => wrapper.find('[data-testid="inherit-date-popover"]');
   const findDatePicker = () => wrapper.findComponent(GlDatepicker);
@@ -61,8 +57,11 @@ describe('Sidebar date Widget', () => {
     });
   };
 
+  beforeEach(() => {
+    window.gon.first_day_of_week = 1;
+  });
+
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -159,7 +158,7 @@ describe('Sidebar date Widget', () => {
     expect(wrapper.findComponent(SidebarInheritDate).exists()).toBe(false);
   });
 
-  it('displays a flash message when query is rejected', async () => {
+  it('displays an alert message when query is rejected', async () => {
     createComponent({
       dueDateQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),
     });
diff --git a/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js b/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js
index cbe01263dcd..1bb910c53ea 100644
--- a/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js
@@ -27,10 +27,6 @@ describe('SidebarFormattedDate', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays formatted date', () => {
     expect(findFormattedDate().text()).toBe('Apr 15, 2021');
   });
diff --git a/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js b/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
index a7556b9110c..97debe3088d 100644
--- a/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js
@@ -31,10 +31,6 @@ describe('SidebarInheritDate', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays formatted fixed and inherited dates with radio buttons', () => {
     expect(wrapper.findAllComponents(SidebarFormattedDate)).toHaveLength(2);
     expect(wrapper.findAllComponents(GlFormRadio)).toHaveLength(2);
diff --git a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
index 1a78ce4ddee..e356f02a36b 100644
--- a/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
+++ b/spec/frontend/sidebar/components/incidents/escalation_status_spec.js
@@ -17,10 +17,6 @@ describe('EscalationStatus', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownComponent = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownMenu = () => findDropdownComponent().find('.dropdown-menu');
diff --git a/spec/frontend/sidebar/components/incidents/sidebar_escalation_status_spec.js b/spec/frontend/sidebar/components/incidents/sidebar_escalation_status_spec.js
index 2dded61c073..00b57b4916e 100644
--- a/spec/frontend/sidebar/components/incidents/sidebar_escalation_status_spec.js
+++ b/spec/frontend/sidebar/components/incidents/sidebar_escalation_status_spec.js
@@ -18,11 +18,11 @@ import {
 } from '~/sidebar/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import EscalationStatus from 'ee_else_ce/sidebar/components/incidents/escalation_status.vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { logError } from '~/lib/logger';
 
 jest.mock('~/lib/logger');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -57,7 +57,7 @@ describe('SidebarEscalationStatus', () => {
         canUpdate: true,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
       apolloProvider,
     });
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_button_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_button_spec.js
index 4f2a89e20db..084ca5ed3fc 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_button_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_button_spec.js
@@ -29,10 +29,6 @@ describe('DropdownButton', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownButton = () => wrapper.findComponent(GlButton);
   const findDropdownText = () => wrapper.find('.dropdown-toggle-text');
   const findDropdownIcon = () => wrapper.findComponent(GlIcon);
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_create_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_create_view_spec.js
index 59e95edfa20..bb7554ff21d 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_create_view_spec.js
@@ -32,10 +32,6 @@ describe('DropdownContentsCreateView', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('disableCreate', () => {
       it('returns `true` when label title and color is not defined', () => {
@@ -174,11 +170,17 @@ describe('DropdownContentsCreateView', () => {
       });
 
       await nextTick();
-      const colorPreviewEl = wrapper.find('.color-input-container > .dropdown-label-color-preview');
-      const colorInputEl = wrapper.find('.color-input-container').findComponent(GlFormInput);
+      const colorPreviewEl = wrapper
+        .find('.color-input-container')
+        .findAllComponents(GlFormInput)
+        .at(0);
+      const colorInputEl = wrapper
+        .find('.color-input-container')
+        .findAllComponents(GlFormInput)
+        .at(1);
 
       expect(colorPreviewEl.exists()).toBe(true);
-      expect(colorPreviewEl.attributes('style')).toContain('background-color');
+      expect(colorPreviewEl.attributes('value')).toBe('#ff0000');
       expect(colorInputEl.exists()).toBe(true);
       expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
       expect(colorInputEl.attributes('value')).toBe('#ff0000');
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
index 865dc8fe8fb..7940518f1e8 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -51,10 +51,6 @@ describe('DropdownContentsLabelsView', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownContent = () => wrapper.find('[data-testid="dropdown-content"]');
   const findDropdownTitle = () => wrapper.find('[data-testid="dropdown-title"]');
   const findDropdownFooter = () => wrapper.find('[data-testid="dropdown-footer"]');
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_spec.js
index e9ffda7c251..0a17c5f8721 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_contents_spec.js
@@ -28,10 +28,6 @@ describe('DropdownContent', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('dropdownContentsView', () => {
       it('returns string "dropdown-contents-create-view" when `showDropdownContentsCreateView` prop is `true`', () => {
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_title_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_title_spec.js
index 6c3fda421ff..367f6007194 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_title_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_title_spec.js
@@ -31,10 +31,6 @@ describe('DropdownTitle', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('renders component container element with string "Labels"', () => {
       expect(wrapper.text()).toContain('Labels');
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_collapsed_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_collapsed_spec.js
index 56f25a1c6a4..6684cf0c5f4 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_collapsed_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_collapsed_spec.js
@@ -19,15 +19,11 @@ describe('DropdownValueCollapsedComponent', () => {
     wrapper = shallowMount(DropdownValueCollapsedComponent, {
       propsData: { ...defaultProps, ...props },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlIcon = () => wrapper.findComponent(GlIcon);
   const getTooltip = () => getBinding(wrapper.element, 'gl-tooltip');
 
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_spec.js
index a1ccc9d2ab1..70aafceb00c 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/dropdown_value_spec.js
@@ -28,10 +28,6 @@ describe('DropdownValue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('methods', () => {
     describe('labelFilterUrl', () => {
       it('returns a label filter URL based on provided label param', () => {
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/label_item_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/label_item_spec.js
index e14c0e308ce..468dd14c9ee 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/label_item_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/label_item_spec.js
@@ -26,10 +26,6 @@ describe('LabelItem', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('renders gl-link component', () => {
       expect(wrapper.findComponent(GlLink).exists()).toBe(true);
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/labels_select_root_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/labels_select_root_spec.js
index a3b10c18374..806064b2202 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/labels_select_root_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/labels_select_root_spec.js
@@ -40,10 +40,6 @@ describe('LabelsSelectRoot', () => {
     store = new Vuex.Store(labelsSelectModule());
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('methods', () => {
     describe('handleVuexActionDispatch', () => {
       const touchedLabels = [
diff --git a/spec/frontend/sidebar/components/labels/labels_select_vue/store/actions_spec.js b/spec/frontend/sidebar/components/labels/labels_select_vue/store/actions_spec.js
index 55651bccaa8..c27afb75375 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_vue/store/actions_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_vue/store/actions_spec.js
@@ -1,14 +1,14 @@
 import MockAdapter from 'axios-mock-adapter';
 
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import * as actions from '~/sidebar/components/labels/labels_select_vue/store/actions';
 import * as types from '~/sidebar/components/labels/labels_select_vue/store/mutation_types';
 import defaultState from '~/sidebar/components/labels/labels_select_vue/store/state';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('LabelsSelect Actions', () => {
   let state;
@@ -100,7 +100,7 @@ describe('LabelsSelect Actions', () => {
       );
     });
 
-    it('shows flash error', () => {
+    it('shows alert error', () => {
       actions.receiveLabelsFailure({ commit: () => {} });
 
       expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
@@ -184,7 +184,7 @@ describe('LabelsSelect Actions', () => {
       );
     });
 
-    it('shows flash error', () => {
+    it('shows alert error', () => {
       actions.receiveCreateLabelFailure({ commit: () => {} });
 
       expect(createAlert).toHaveBeenCalledWith({ message: 'Error creating label.' });
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js
index 79b164b0ea7..4ca0a813da2 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view_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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import DropdownContentsCreateView from '~/sidebar/components/labels/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/sidebar/components/labels/labels_select_widget/graphql/create_label.mutation.graphql';
@@ -15,7 +15,7 @@ import {
   workspaceLabelsQueryResponse,
 } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const colors = Object.keys(mockSuggestedColors);
 
@@ -87,10 +87,6 @@ describe('DropdownContentsCreateView', () => {
     gon.suggested_label_colors = mockSuggestedColors;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a palette of 21 colors', () => {
     createComponent();
     expect(findAllColors()).toHaveLength(21);
@@ -103,7 +99,7 @@ describe('DropdownContentsCreateView', () => {
     findAllColors().at(0).vm.$emit('click', new Event('mouseclick'));
     await nextTick();
 
-    expect(findSelectedColor().attributes('style')).toBe('background-color: rgb(0, 153, 102);');
+    expect(findSelectedColor().attributes('value')).toBe('#009966');
   });
 
   it('shows correct color hex code after selecting a color', async () => {
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view_spec.js
index 913badccbe4..c351a60735b 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view_spec.js
@@ -9,7 +9,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { DropdownVariant } from '~/sidebar/components/labels/labels_select_widget/constants';
 import DropdownContentsLabelsView from '~/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view.vue';
@@ -17,7 +17,7 @@ import projectLabelsQuery from '~/sidebar/components/labels/labels_select_widget
 import LabelItem from '~/sidebar/components/labels/labels_select_widget/label_item.vue';
 import { mockConfig, workspaceLabelsQueryResponse } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -64,10 +64,6 @@ describe('DropdownContentsLabelsView', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findLabels = () => wrapper.findAllComponents(LabelItem);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findObserver = () => wrapper.findComponent(GlIntersectionObserver);
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_spec.js
index 9bbb1413ee9..e9023cb9ff6 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_contents_spec.js
@@ -66,10 +66,6 @@ describe('DropdownContent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findCreateView = () => wrapper.findComponent(DropdownContentsCreateView);
   const findLabelsView = () => wrapper.findComponent(DropdownContentsLabelsView);
   const findDropdownHeader = () => wrapper.findComponent(DropdownHeaderStub);
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_footer_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_footer_spec.js
index 9a6e0ca3ccd..ad1edaa6671 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_footer_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_footer_spec.js
@@ -20,10 +20,6 @@ describe('DropdownFooter', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findCreateLabelButton = () => wrapper.find('[data-testid="create-label-button"]');
 
   describe('Labels view', () => {
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_header_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_header_spec.js
index d9001dface4..824f91812fb 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_header_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_header_spec.js
@@ -28,10 +28,6 @@ describe('DropdownHeader', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
   const findGoBackButton = () => wrapper.findByTestId('go-back-button');
   const findDropdownTitle = () => wrapper.findByTestId('dropdown-header-title');
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js
index 585048983c9..d70b989b493 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js
@@ -30,10 +30,6 @@ describe('DropdownValue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there are no labels', () => {
     beforeEach(() => {
       createComponent(
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/embedded_labels_list_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/embedded_labels_list_spec.js
index 4fa65c752f9..715dd4e034e 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/embedded_labels_list_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/embedded_labels_list_spec.js
@@ -30,10 +30,6 @@ describe('EmbeddedLabelsList', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there are no labels', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/label_item_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/label_item_spec.js
index 74188a77994..377d1894411 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/label_item_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/label_item_spec.js
@@ -19,10 +19,6 @@ describe('LabelItem', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('renders label color element', () => {
       const colorEl = wrapper.find('[data-testid="label-color-box"]');
diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/labels_select_root_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/labels_select_root_spec.js
index fd8e72bac49..3101fd90f2e 100644
--- a/spec/frontend/sidebar/components/labels/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/labels_select_root_spec.js
@@ -3,8 +3,8 @@ 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 { createAlert } from '~/flash';
-import { IssuableType, TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
+import { createAlert } from '~/alert';
+import { TYPE_EPIC, TYPE_ISSUE, TYPE_MERGE_REQUEST, TYPE_TEST_CASE } from '~/issues/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/sidebar/components/labels/labels_select_widget/dropdown_contents.vue';
 import DropdownValue from '~/sidebar/components/labels/labels_select_widget/dropdown_value.vue';
@@ -25,7 +25,7 @@ import {
   mockRegularLabel,
 } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -36,9 +36,9 @@ const errorQueryHandler = jest.fn().mockRejectedValue('Houston, we have a proble
 
 const updateLabelsMutation = {
   [TYPE_ISSUE]: updateIssueLabelsMutation,
-  [IssuableType.MergeRequest]: updateMergeRequestLabelsMutation,
+  [TYPE_MERGE_REQUEST]: updateMergeRequestLabelsMutation,
   [TYPE_EPIC]: updateEpicLabelsMutation,
-  [IssuableType.TestCase]: updateTestCaseLabelsMutation,
+  [TYPE_TEST_CASE]: updateTestCaseLabelsMutation,
 };
 
 describe('LabelsSelectRoot', () => {
@@ -83,10 +83,6 @@ describe('LabelsSelectRoot', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders component with classes `labels-select-wrapper gl-relative`', () => {
     createComponent();
     expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'gl-relative']);
@@ -150,7 +146,7 @@ describe('LabelsSelectRoot', () => {
       });
     });
 
-    it('creates flash with error message when query is rejected', async () => {
+    it('creates alert with error message when query is rejected', async () => {
       createComponent({ queryHandler: errorQueryHandler });
       await waitForPromises();
       expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
@@ -214,9 +210,9 @@ describe('LabelsSelectRoot', () => {
   describe.each`
     issuableType
     ${TYPE_ISSUE}
-    ${IssuableType.MergeRequest}
+    ${TYPE_MERGE_REQUEST}
     ${TYPE_EPIC}
-    ${IssuableType.TestCase}
+    ${TYPE_TEST_CASE}
   `('when updating labels for $issuableType', ({ issuableType }) => {
     const label = { id: 'gid://gitlab/ProjectLabel/2' };
 
diff --git a/spec/frontend/sidebar/components/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/components/lock/edit_form_buttons_spec.js
index 2abb0c24d7d..ad9efc371f0 100644
--- a/spec/frontend/sidebar/components/lock/edit_form_buttons_spec.js
+++ b/spec/frontend/sidebar/components/lock/edit_form_buttons_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { createStore as createMrStore } from '~/mr_notes/stores';
 import createStore from '~/notes/stores';
 import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
@@ -8,7 +8,7 @@ import eventHub from '~/sidebar/event_hub';
 import { ISSUABLE_TYPE_ISSUE, ISSUABLE_TYPE_MR } from './constants';
 
 jest.mock('~/sidebar/event_hub', () => ({ $emit: jest.fn() }));
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('EditFormButtons', () => {
   let wrapper;
@@ -51,11 +51,6 @@ describe('EditFormButtons', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     pageType
     ${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
@@ -128,7 +123,7 @@ describe('EditFormButtons', () => {
             expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
-          it('does not flash an error message', () => {
+          it('does not alert an error message', () => {
             expect(createAlert).not.toHaveBeenCalled();
           });
         });
@@ -161,7 +156,7 @@ describe('EditFormButtons', () => {
             expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
-          it('calls flash with the correct message', () => {
+          it('calls alert with the correct message', () => {
             expect(createAlert).toHaveBeenCalledWith({
               message: `Something went wrong trying to change the locked state of this ${issuableDisplayName}`,
             });
diff --git a/spec/frontend/sidebar/components/lock/edit_form_spec.js b/spec/frontend/sidebar/components/lock/edit_form_spec.js
index 4ae9025ee39..06cce7bd7ca 100644
--- a/spec/frontend/sidebar/components/lock/edit_form_spec.js
+++ b/spec/frontend/sidebar/components/lock/edit_form_spec.js
@@ -24,11 +24,6 @@ describe('Edit Form Dropdown', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     pageType
     ${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
diff --git a/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js
index 8f825847cfc..d26ef7298ce 100644
--- a/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js
+++ b/spec/frontend/sidebar/components/lock/issuable_lock_form_spec.js
@@ -62,16 +62,11 @@ describe('IssuableLockForm', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     pageType
     ${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR}
diff --git a/spec/frontend/sidebar/components/milestone/milestone_dropdown_spec.js b/spec/frontend/sidebar/components/milestone/milestone_dropdown_spec.js
index b492753867b..8a0db1715f3 100644
--- a/spec/frontend/sidebar/components/milestone/milestone_dropdown_spec.js
+++ b/spec/frontend/sidebar/components/milestone/milestone_dropdown_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { TYPE_ISSUE, WorkspaceType } from '~/issues/constants';
+import { TYPE_ISSUE, WORKSPACE_PROJECT } from '~/issues/constants';
 import { __ } from '~/locale';
 import MilestoneDropdown from '~/sidebar/components/milestone/milestone_dropdown.vue';
 import SidebarDropdown from '~/sidebar/components/sidebar_dropdown.vue';
@@ -12,7 +12,7 @@ describe('MilestoneDropdown component', () => {
   const propsData = {
     attrWorkspacePath: 'full/path',
     issuableType: TYPE_ISSUE,
-    workspaceType: WorkspaceType.project,
+    workspaceType: WORKSPACE_PROJECT,
   };
 
   const findHiddenInput = () => wrapper.find('input');
diff --git a/spec/frontend/sidebar/components/move/issuable_move_dropdown_spec.js b/spec/frontend/sidebar/components/move/issuable_move_dropdown_spec.js
index 72279f44e80..e247f5d27fa 100644
--- a/spec/frontend/sidebar/components/move/issuable_move_dropdown_spec.js
+++ b/spec/frontend/sidebar/components/move/issuable_move_dropdown_spec.js
@@ -63,7 +63,6 @@ describe('IssuableMoveDropdown', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/sidebar/components/move/move_issue_button_spec.js b/spec/frontend/sidebar/components/move/move_issue_button_spec.js
index acd6b23c1f5..eb5e23c6047 100644
--- a/spec/frontend/sidebar/components/move/move_issue_button_spec.js
+++ b/spec/frontend/sidebar/components/move/move_issue_button_spec.js
@@ -4,14 +4,14 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import ProjectSelect from '~/sidebar/components/move/issuable_move_dropdown.vue';
 import MoveIssueButton from '~/sidebar/components/move/move_issue_button.vue';
 import moveIssueMutation from '~/sidebar/queries/move_issue.mutation.graphql';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
 }));
@@ -118,7 +118,7 @@ describe('MoveIssueButton', () => {
       expect(findProjectSelect().props('moveInProgress')).toBe(false);
     });
 
-    it('creates a flash and logs errors when a mutation returns errors', async () => {
+    it('creates an alert and logs errors when a mutation returns errors', async () => {
       createComponent(resolvedMutationWithErrorsMock);
       emitProjectSelectEvent();
 
diff --git a/spec/frontend/sidebar/components/move/move_issues_button_spec.js b/spec/frontend/sidebar/components/move/move_issues_button_spec.js
index c65bad642a0..662a39c829d 100644
--- a/spec/frontend/sidebar/components/move/move_issues_button_spec.js
+++ b/spec/frontend/sidebar/components/move/move_issues_button_spec.js
@@ -6,7 +6,7 @@ import { GlAlert } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { logError } from '~/lib/logger';
 import IssuableMoveDropdown from '~/sidebar/components/move/issuable_move_dropdown.vue';
 import issuableEventHub from '~/issues/list/eventhub';
@@ -22,7 +22,7 @@ import {
   WORK_ITEM_TYPE_ENUM_TEST_CASE,
 } from '~/work_items/constants';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/logger');
 useMockLocationHelper();
 
@@ -159,7 +159,6 @@ describe('MoveIssuesButton', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -389,7 +388,7 @@ describe('MoveIssuesButton', () => {
     });
 
     describe('shows errors', () => {
-      it('does not create flashes or logs errors when no issue is selected', async () => {
+      it('does not create alerts or logs errors when no issue is selected', async () => {
         createComponent();
         emitMoveIssuablesEvent();
 
@@ -399,7 +398,7 @@ describe('MoveIssuesButton', () => {
         expect(createAlert).not.toHaveBeenCalled();
       });
 
-      it('does not create flashes or logs errors when only tasks are selected', async () => {
+      it('does not create alerts or logs errors when only tasks are selected', async () => {
         createComponent({ selectedIssuables: selectedIssuesMocks.tasksOnly });
         emitMoveIssuablesEvent();
 
@@ -409,7 +408,7 @@ describe('MoveIssuesButton', () => {
         expect(createAlert).not.toHaveBeenCalled();
       });
 
-      it('does not create flashes or logs errors when only test cases are selected', async () => {
+      it('does not create alerts or logs errors when only test cases are selected', async () => {
         createComponent({ selectedIssuables: selectedIssuesMocks.testCasesOnly });
         emitMoveIssuablesEvent();
 
@@ -419,7 +418,7 @@ describe('MoveIssuesButton', () => {
         expect(createAlert).not.toHaveBeenCalled();
       });
 
-      it('does not create flashes or logs errors when only tasks and test cases are selected', async () => {
+      it('does not create alerts or logs errors when only tasks and test cases are selected', async () => {
         createComponent({ selectedIssuables: selectedIssuesMocks.tasksAndTestCases });
         emitMoveIssuablesEvent();
 
@@ -429,7 +428,7 @@ describe('MoveIssuesButton', () => {
         expect(createAlert).not.toHaveBeenCalled();
       });
 
-      it('does not create flashes or logs errors when issues are moved without errors', async () => {
+      it('does not create alerts or logs errors when issues are moved without errors', async () => {
         createComponent(
           { selectedIssuables: selectedIssuesMocks.issuesTasksAndTestCases },
           resolvedMutationWithoutErrorsMock,
@@ -442,7 +441,7 @@ describe('MoveIssuesButton', () => {
         expect(createAlert).not.toHaveBeenCalled();
       });
 
-      it('creates a flash and logs errors when a mutation returns errors', async () => {
+      it('creates an alert and logs errors when a mutation returns errors', async () => {
         createComponent(
           { selectedIssuables: selectedIssuesMocks.issuesTasksAndTestCases },
           resolvedMutationWithErrorsMock,
@@ -462,14 +461,14 @@ describe('MoveIssuesButton', () => {
           `Error moving issue. Error message: ${mockMutationErrorMessage}`,
         );
 
-        // Only one flash is created even if multiple errors are reported
+        // Only one alert is created even if multiple errors are reported
         expect(createAlert).toHaveBeenCalledTimes(1);
         expect(createAlert).toHaveBeenCalledWith({
           message: 'There was an error while moving the issues.',
         });
       });
 
-      it('creates a flash but not logs errors when a mutation is rejected', async () => {
+      it('creates an alert but not logs errors when a mutation is rejected', async () => {
         createComponent({ selectedIssuables: selectedIssuesMocks.issuesTasksAndTestCases });
         emitMoveIssuablesEvent();
 
diff --git a/spec/frontend/sidebar/components/participants/participants_spec.js b/spec/frontend/sidebar/components/participants/participants_spec.js
index f7a626a189c..72d83ebeca4 100644
--- a/spec/frontend/sidebar/components/participants/participants_spec.js
+++ b/spec/frontend/sidebar/components/participants/participants_spec.js
@@ -1,203 +1,114 @@
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import Participants from '~/sidebar/components/participants/participants.vue';
 
-const PARTICIPANT = {
-  id: 1,
-  state: 'active',
-  username: 'marcene',
-  name: 'Allie Will',
-  web_url: 'foo.com',
-  avatar_url: 'gravatar.com/avatar/xxx',
-};
-
-const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }];
-
-describe('Participants', () => {
+describe('Participants component', () => {
   let wrapper;
 
-  const getMoreParticipantsButton = () => wrapper.find('[data-testid="more-participants"]');
-  const getCollapsedParticipantsCount = () => wrapper.find('[data-testid="collapsed-count"]');
+  const participant = {
+    id: 1,
+    state: 'active',
+    username: 'marcene',
+    name: 'Allie Will',
+    web_url: 'foo.com',
+    avatar_url: 'gravatar.com/avatar/xxx',
+  };
 
-  const mountComponent = (propsData) =>
-    shallowMount(Participants, {
-      propsData,
-    });
+  const participants = [participant, { ...participant, id: 2 }, { ...participant, id: 3 }];
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findMoreParticipantsButton = () => wrapper.findComponent(GlButton);
+  const findCollapsedIcon = () => wrapper.find('.sidebar-collapsed-icon');
+  const findParticipantsAuthor = () => wrapper.findAll('.participants-author');
+
+  const mountComponent = (propsData) => shallowMount(Participants, { propsData });
 
   describe('collapsed sidebar state', () => {
     it('shows loading spinner when loading', () => {
-      wrapper = mountComponent({
-        loading: true,
-      });
+      wrapper = mountComponent({ loading: true });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoadingIcon().exists()).toBe(true);
     });
 
-    it('does not show loading spinner not loading', () => {
-      wrapper = mountComponent({
-        loading: false,
-      });
+    it('does not show loading spinner when not loading', () => {
+      wrapper = mountComponent({ loading: false });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
+      expect(findLoadingIcon().exists()).toBe(false);
     });
 
     it('shows participant count when given', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-      });
+      wrapper = mountComponent({ participants });
 
-      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+      expect(findCollapsedIcon().text()).toBe(participants.length.toString());
     });
 
     it('shows full participant count when there are hidden participants', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 1,
-      });
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 1 });
 
-      expect(getCollapsedParticipantsCount().text()).toBe(`${PARTICIPANT_LIST.length}`);
+      expect(findCollapsedIcon().text()).toBe(participants.length.toString());
     });
   });
 
   describe('expanded sidebar state', () => {
     it('shows loading spinner when loading', () => {
-      wrapper = mountComponent({
-        loading: true,
-      });
+      wrapper = mountComponent({ loading: true });
 
-      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      expect(findLoadingIcon().exists()).toBe(true);
     });
 
-    it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
       const numberOfLessParticipants = 2;
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: false,
-      });
-
-      await nextTick();
-      expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
+      wrapper = mountComponent({ participants, numberOfLessParticipants });
+
+      expect(findParticipantsAuthor()).toHaveLength(numberOfLessParticipants);
     });
 
     it('when only showing all participants, each has an avatar', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: true,
-      });
-
-      await nextTick();
-      expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
+
+      await findMoreParticipantsButton().vm.$emit('click');
+
+      expect(findParticipantsAuthor()).toHaveLength(participants.length);
     });
 
     it('does not have more participants link when they can all be shown', () => {
       const numberOfLessParticipants = 100;
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants,
-      });
-
-      expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
-      expect(getMoreParticipantsButton().exists()).toBe(false);
-    });
+      wrapper = mountComponent({ participants, numberOfLessParticipants });
 
-    it('when too many participants, has more participants link to show more', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: false,
-      });
-
-      await nextTick();
-      expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
+      expect(participants.length).toBeLessThan(numberOfLessParticipants);
+      expect(findMoreParticipantsButton().exists()).toBe(false);
     });
 
-    it('when too many participants and already showing them, has more participants link to show less', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        isShowingMoreParticipants: true,
-      });
-
-      await nextTick();
-      expect(getMoreParticipantsButton().text()).toBe('- show less');
-    });
+    it('when too many participants, has more participants link to show more', () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-    it('clicking more participants link emits event', () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
+      expect(findMoreParticipantsButton().text()).toBe('+ 1 more');
+    });
 
-      expect(wrapper.vm.isShowingMoreParticipants).toBe(false);
+    it('when too many participants and already showing them, has more participants link to show less', async () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-      getMoreParticipantsButton().vm.$emit('click');
+      await findMoreParticipantsButton().vm.$emit('click');
 
-      expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
+      expect(findMoreParticipantsButton().text()).toBe('- show less');
     });
 
-    it('clicking on participants icon emits `toggleSidebar` event', async () => {
-      wrapper = mountComponent({
-        loading: false,
-        participants: PARTICIPANT_LIST,
-        numberOfLessParticipants: 2,
-      });
-
-      const spy = jest.spyOn(wrapper.vm, '$emit');
+    it('clicking on participants icon emits `toggleSidebar` event', () => {
+      wrapper = mountComponent({ participants, numberOfLessParticipants: 2 });
 
-      wrapper.find('.sidebar-collapsed-icon').trigger('click');
+      findCollapsedIcon().trigger('click');
 
-      await nextTick();
-      expect(spy).toHaveBeenCalledWith('toggleSidebar');
-      spy.mockRestore();
+      expect(wrapper.emitted('toggleSidebar')).toEqual([[]]);
     });
   });
 
   describe('when not showing participants label', () => {
     beforeEach(() => {
-      wrapper = mountComponent({
-        participants: PARTICIPANT_LIST,
-        showParticipantLabel: false,
-      });
+      wrapper = mountComponent({ participants, showParticipantLabel: false });
     });
 
     it('does not show sidebar collapsed icon', () => {
-      expect(wrapper.find('.sidebar-collapsed-icon').exists()).toBe(false);
+      expect(findCollapsedIcon().exists()).toBe(false);
     });
 
     it('does not show participants label title', () => {
diff --git a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
index 859e63b3df6..914e848eced 100644
--- a/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
+++ b/spec/frontend/sidebar/components/participants/sidebar_participants_widget_spec.js
@@ -35,7 +35,6 @@ describe('Sidebar Participants Widget', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/sidebar/components/reviewers/reviewer_title_spec.js b/spec/frontend/sidebar/components/reviewers/reviewer_title_spec.js
index 68ecd62e4c6..0f595ab21a5 100644
--- a/spec/frontend/sidebar/components/reviewers/reviewer_title_spec.js
+++ b/spec/frontend/sidebar/components/reviewers/reviewer_title_spec.js
@@ -16,11 +16,6 @@ describe('ReviewerTitle component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('reviewer title', () => {
     it('renders reviewer', () => {
       wrapper = createComponent({
diff --git a/spec/frontend/sidebar/components/reviewers/reviewers_spec.js b/spec/frontend/sidebar/components/reviewers/reviewers_spec.js
index 229f7ffbe04..016ec9225da 100644
--- a/spec/frontend/sidebar/components/reviewers/reviewers_spec.js
+++ b/spec/frontend/sidebar/components/reviewers/reviewers_spec.js
@@ -35,10 +35,6 @@ describe('Reviewer component', () => {
 
   const findCollapsedChildren = () => wrapper.findAll('.sidebar-collapsed-icon > *');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('No reviewers/users', () => {
     it('displays no reviewer icon when collapsed', () => {
       createWrapper();
diff --git a/spec/frontend/sidebar/components/reviewers/sidebar_reviewers_spec.js b/spec/frontend/sidebar/components/reviewers/sidebar_reviewers_spec.js
index 57ae146a27a..a221d28704b 100644
--- a/spec/frontend/sidebar/components/reviewers/sidebar_reviewers_spec.js
+++ b/spec/frontend/sidebar/components/reviewers/sidebar_reviewers_spec.js
@@ -44,9 +44,6 @@ describe('sidebar reviewers', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     SidebarService.singleton = null;
     SidebarStore.singleton = null;
     SidebarMediator.singleton = null;
diff --git a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
index d00c8dcb653..483449f924b 100644
--- a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
+++ b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
@@ -38,10 +38,6 @@ describe('UncollapsedReviewerList component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('single reviewer', () => {
     const user = userDataMock();
 
diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
index 71c6c259c32..8a27e82093d 100644
--- a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
+++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
@@ -2,13 +2,14 @@ import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlTooltip, GlSprintf } from
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
-import { INCIDENT_SEVERITY, ISSUABLE_TYPES } from '~/sidebar/constants';
+import { createAlert } from '~/alert';
+import { TYPE_INCIDENT } from '~/issues/constants';
+import { INCIDENT_SEVERITY } from '~/sidebar/constants';
 import updateIssuableSeverity from '~/sidebar/queries/update_issuable_severity.mutation.graphql';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import SidebarSeverityWidget from '~/sidebar/components/severity/sidebar_severity_widget.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('SidebarSeverity', () => {
   let wrapper;
@@ -22,7 +23,7 @@ describe('SidebarSeverity', () => {
     const propsData = {
       projectPath,
       iid,
-      issuableType: ISSUABLE_TYPES.INCIDENT,
+      issuableType: TYPE_INCIDENT,
       initialSeverity: severity,
       ...props,
     };
@@ -47,10 +48,6 @@ describe('SidebarSeverity', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSeverityToken = () => wrapper.findAllComponents(SeverityToken);
   const findEditBtn = () => wrapper.findByTestId('edit-button');
   const findDropdown = () => wrapper.findComponent(GlDropdown);
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_spec.js
index 9f3d689edee..7a0044c00ac 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_spec.js
@@ -10,7 +10,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { TYPE_ISSUE } from '~/issues/constants';
 import SidebarDropdown from '~/sidebar/components/sidebar_dropdown.vue';
 import { IssuableAttributeType } from '~/sidebar/constants';
@@ -23,7 +23,7 @@ import {
   noCurrentMilestoneResponse,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('SidebarDropdown component', () => {
   let wrapper;
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index 060a2873e04..53d81e3fcaf 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -7,7 +7,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_ISSUE } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
@@ -27,7 +27,7 @@ import {
   mockMilestone2,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('SidebarDropdownWidget', () => {
   let wrapper;
@@ -140,7 +140,7 @@ describe('SidebarDropdownWidget', () => {
           },
         },
         directives: {
-          GlTooltip: createMockDirective(),
+          GlTooltip: createMockDirective('gl-tooltip'),
         },
         stubs: {
           SidebarEditableItem,
@@ -157,11 +157,6 @@ describe('SidebarDropdownWidget', () => {
     jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when not editing', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/sidebar/components/status/status_dropdown_spec.js b/spec/frontend/sidebar/components/status/status_dropdown_spec.js
index 5a75299c3a4..229b51ea568 100644
--- a/spec/frontend/sidebar/components/status/status_dropdown_spec.js
+++ b/spec/frontend/sidebar/components/status/status_dropdown_spec.js
@@ -14,10 +14,6 @@ describe('SubscriptionsDropdown component', () => {
     wrapper = shallowMount(StatusDropdown);
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with no value selected', () => {
     beforeEach(() => {
       createComponent();
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 c94f9918243..7275557e7f2 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 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';
@@ -15,7 +15,7 @@ import {
   mergeRequestSubscriptionMutationResponse,
 } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/vue_shared/plugins/global_toast');
 
 Vue.use(VueApollo);
@@ -62,7 +62,6 @@ describe('Sidebar Subscriptions Widget', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -138,7 +137,7 @@ describe('Sidebar Subscriptions Widget', () => {
     });
   });
 
-  it('displays a flash message when query is rejected', async () => {
+  it('displays an alert message when query is rejected', async () => {
     createComponent({
       subscriptionsQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),
     });
diff --git a/spec/frontend/sidebar/components/subscriptions/subscriptions_dropdown_spec.js b/spec/frontend/sidebar/components/subscriptions/subscriptions_dropdown_spec.js
index 3fb8214606c..eaf7bc13d20 100644
--- a/spec/frontend/sidebar/components/subscriptions/subscriptions_dropdown_spec.js
+++ b/spec/frontend/sidebar/components/subscriptions/subscriptions_dropdown_spec.js
@@ -15,10 +15,6 @@ describe('SubscriptionsDropdown component', () => {
     wrapper = shallowMount(SubscriptionsDropdown);
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with no value selected', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/sidebar/components/subscriptions/subscriptions_spec.js b/spec/frontend/sidebar/components/subscriptions/subscriptions_spec.js
index 1a1aa370eef..cae21189ee0 100644
--- a/spec/frontend/sidebar/components/subscriptions/subscriptions_spec.js
+++ b/spec/frontend/sidebar/components/subscriptions/subscriptions_spec.js
@@ -16,11 +16,6 @@ describe('Subscriptions', () => {
       }),
     );
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('shows loading spinner when loading', () => {
     wrapper = mountComponent({
       loading: true,
diff --git a/spec/frontend/sidebar/components/time_tracking/create_timelog_form_spec.js b/spec/frontend/sidebar/components/time_tracking/create_timelog_form_spec.js
index 715f66d305a..a7c3867c359 100644
--- a/spec/frontend/sidebar/components/time_tracking/create_timelog_form_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/create_timelog_form_spec.js
@@ -47,8 +47,8 @@ describe('Create Timelog Form', () => {
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findDocsLink = () => wrapper.findByTestId('timetracking-docs-link');
   const findSaveButton = () => findModal().props('actionPrimary');
-  const findSaveButtonLoadingState = () => findSaveButton().attributes[0].loading;
-  const findSaveButtonDisabledState = () => findSaveButton().attributes[0].disabled;
+  const findSaveButtonLoadingState = () => findSaveButton().attributes.loading;
+  const findSaveButtonDisabledState = () => findSaveButton().attributes.disabled;
 
   const submitForm = () => findForm().trigger('submit');
 
diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js
index 0259aee48f0..713ae83cbf1 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import Report from '~/sidebar/components/time_tracking/report.vue';
 import getIssueTimelogsQuery from '~/sidebar/queries/get_issue_timelogs.query.graphql';
 import getMrTimelogsQuery from '~/sidebar/queries/get_mr_timelogs.query.graphql';
@@ -17,7 +17,7 @@ import {
   timelogToRemoveId,
 } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Issuable Time Tracking Report', () => {
   Vue.use(VueApollo);
@@ -51,7 +51,6 @@ describe('Issuable Time Tracking Report', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
diff --git a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
index 45d8b5e4647..91c013596d7 100644
--- a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
@@ -32,7 +32,7 @@ describe('Issuable Time Tracker', () => {
   const mountComponent = ({ props = {}, issuableType = 'issue', loading = false } = {}) => {
     return mount(TimeTracker, {
       propsData: { ...defaultProps, ...props },
-      directives: { GlTooltip: createMockDirective() },
+      directives: { GlTooltip: createMockDirective('gl-tooltip') },
       stubs: {
         transition: stubTransition(),
       },
@@ -53,10 +53,6 @@ describe('Issuable Time Tracker', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Initialization', () => {
     beforeEach(() => {
       wrapper = mountComponent();
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 5bfe3b59eb3..39b480b295c 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,13 +4,13 @@ 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import epicTodoQuery from '~/sidebar/queries/epic_todo.query.graphql';
 import TodoButton from '~/sidebar/components/todo_toggle/todo_button.vue';
 import { todosResponse, noTodosResponse } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -41,7 +41,6 @@ describe('Sidebar Todo Widget', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -77,7 +76,7 @@ describe('Sidebar Todo Widget', () => {
     });
   });
 
-  it('displays a flash message when query is rejected', async () => {
+  it('displays an alert message when query is rejected', async () => {
     createComponent({
       todosQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),
     });
diff --git a/spec/frontend/sidebar/components/todo_toggle/todo_button_spec.js b/spec/frontend/sidebar/components/todo_toggle/todo_button_spec.js
index fb07029a249..472a89e9b21 100644
--- a/spec/frontend/sidebar/components/todo_toggle/todo_button_spec.js
+++ b/spec/frontend/sidebar/components/todo_toggle/todo_button_spec.js
@@ -22,7 +22,6 @@ describe('Todo Button', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     dispatchEventSpy = null;
     jest.clearAllMocks();
   });
diff --git a/spec/frontend/sidebar/components/todo_toggle/todo_spec.js b/spec/frontend/sidebar/components/todo_toggle/todo_spec.js
index 8e6597bf80f..4da915f0dd3 100644
--- a/spec/frontend/sidebar/components/todo_toggle/todo_spec.js
+++ b/spec/frontend/sidebar/components/todo_toggle/todo_spec.js
@@ -21,10 +21,6 @@ describe('SidebarTodo', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     state    | classes
     ${false} | ${['gl-button', 'btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
diff --git a/spec/frontend/sidebar/components/toggle/toggle_sidebar_spec.js b/spec/frontend/sidebar/components/toggle/toggle_sidebar_spec.js
index cf9b2828dde..0370d5e337d 100644
--- a/spec/frontend/sidebar/components/toggle/toggle_sidebar_spec.js
+++ b/spec/frontend/sidebar/components/toggle/toggle_sidebar_spec.js
@@ -17,10 +17,6 @@ describe('ToggleSidebar', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findGlButton = () => wrapper.findComponent(GlButton);
 
   it('should render the "chevron-double-lg-left" icon when collapsed', () => {
diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js
index 391cbb1e0d5..844320efc1c 100644
--- a/spec/frontend/sidebar/mock_data.js
+++ b/spec/frontend/sidebar/mock_data.js
@@ -243,6 +243,7 @@ export const issuableDueDateResponse = (dueDate = null) => ({
         __typename: 'Issue',
         id: 'gid://gitlab/Issue/4',
         dueDate,
+        dueDateFixed: dueDate,
       },
     },
   },
diff --git a/spec/frontend/sidebar/sidebar_mediator_spec.js b/spec/frontend/sidebar/sidebar_mediator_spec.js
index 77b1ccb4f9a..f2003aee96e 100644
--- a/spec/frontend/sidebar/sidebar_mediator_spec.js
+++ b/spec/frontend/sidebar/sidebar_mediator_spec.js
@@ -7,7 +7,7 @@ import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
 import Mock from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/vue_shared/plugins/global_toast');
 jest.mock('~/commons/nav/user_merge_requests');
 
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
index fec300ddd7e..7eb0468c5be 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap
@@ -28,10 +28,13 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
       data-uploads-path=""
     >
       <markdown-header-stub
+        data-testid="markdownHeader"
         enablepreview="true"
         linecontent=""
+        markdownpreviewpath="foo/"
         restrictedtoolbaritems=""
         suggestionstartindex="0"
+        uploadspath=""
       />
        
       <div
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index e7dab0ad79d..0d0e78e9179 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 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';
@@ -25,7 +25,7 @@ import UpdateSnippetMutation from '~/snippets/mutations/update_snippet.mutation.
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
 import { testEntries, createGQLSnippetsQueryResponse, createGQLSnippet } from '../test_utils';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_UPLOADED_FILES = ['foo/bar.txt', 'alpha/beta.js'];
 const TEST_API_ERROR = new Error('TEST_API_ERROR');
@@ -94,7 +94,6 @@ describe('Snippet Edit app', () => {
   let mutateSpy;
 
   const relativeUrlRoot = '/foo/';
-  const originalRelativeUrlRoot = gon.relative_url_root;
 
   beforeEach(() => {
     stubPerformanceWebAPI();
@@ -108,12 +107,6 @@ describe('Snippet Edit app', () => {
     jest.spyOn(urlUtils, 'redirectTo').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-    gon.relative_url_root = originalRelativeUrlRoot;
-  });
-
   const findBlobActions = () => wrapper.findComponent(SnippetBlobActionsEdit);
   const findCancelButton = () => wrapper.findByTestId('snippet-cancel-btn');
   const clickSubmitBtn = () => wrapper.findByTestId('snippet-edit-form').trigger('submit');
@@ -132,10 +125,6 @@ describe('Snippet Edit app', () => {
     props = {},
     selectedLevel = VISIBILITY_LEVEL_PRIVATE_STRING,
   } = {}) => {
-    if (wrapper) {
-      throw new Error('wrapper already created');
-    }
-
     const requestHandlers = [
       [GetSnippetQuery, getSpy],
       // See `mutateSpy` declaration comment for why we send a key
@@ -347,7 +336,7 @@ describe('Snippet Edit app', () => {
           projectPath
           ${'project/path'}
           ${''}
-        `('should flash error (projectPath=$projectPath)', async ({ projectPath }) => {
+        `('should alert error (projectPath=$projectPath)', async ({ projectPath }) => {
           mutateSpy.mockResolvedValue(createMutationResponseWithErrors('createSnippet'));
 
           await createComponentAndLoad({
@@ -373,7 +362,7 @@ describe('Snippet Edit app', () => {
           ${'project/path'}
           ${''}
         `(
-          'should flash error with (snippet=$snippetGid, projectPath=$projectPath)',
+          'should alert error with (snippet=$snippetGid, projectPath=$projectPath)',
           async ({ projectPath }) => {
             mutateSpy.mockResolvedValue(createMutationResponseWithErrors('updateSnippet'));
 
@@ -405,7 +394,7 @@ describe('Snippet Edit app', () => {
           expect(urlUtils.redirectTo).not.toHaveBeenCalled();
         });
 
-        it('should flash', () => {
+        it('should alert', () => {
           // Apollo automatically wraps the resolver's error in a NetworkError
           expect(createAlert).toHaveBeenCalledWith({
             message: `Can't update snippet: ${TEST_API_ERROR.message}`,
diff --git a/spec/frontend/snippets/components/embed_dropdown_spec.js b/spec/frontend/snippets/components/embed_dropdown_spec.js
index ed5ea6cab8a..d8c6ad3278a 100644
--- a/spec/frontend/snippets/components/embed_dropdown_spec.js
+++ b/spec/frontend/snippets/components/embed_dropdown_spec.js
@@ -17,11 +17,6 @@ describe('snippets/components/embed_dropdown', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findSectionsData = () => {
     const sections = [];
     let current = {};
diff --git a/spec/frontend/snippets/components/show_spec.js b/spec/frontend/snippets/components/show_spec.js
index 032dcf8e5f5..45a7c7b0b4a 100644
--- a/spec/frontend/snippets/components/show_spec.js
+++ b/spec/frontend/snippets/components/show_spec.js
@@ -50,10 +50,6 @@ describe('Snippet view app', () => {
     stubPerformanceWebAPI();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders loader while the query is in flight', () => {
     createComponent({ loading: true });
     expect(findLoadingIcon().exists()).toBe(true);
diff --git a/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js
index a650353093d..58f47e8b0dc 100644
--- a/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js
@@ -56,11 +56,6 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
   const triggerBlobDelete = (idx) => findBlobEdits().at(idx).vm.$emit('delete');
   const triggerBlobUpdate = (idx, props) => findBlobEdits().at(idx).vm.$emit('blob-updated', props);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('multi-file snippets rendering', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 82c4a37ccc9..b699e056576 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -4,14 +4,14 @@ 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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { joinPaths } from '~/lib/utils/url_utility';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const TEST_ID = 'blob_local_7';
 const TEST_PATH = 'foo/bar/test.md';
@@ -62,8 +62,6 @@ describe('Snippet Blob Edit component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     axiosMock.restore();
   });
 
@@ -123,7 +121,7 @@ describe('Snippet Blob Edit component', () => {
       createComponent();
     });
 
-    it('should call flash', async () => {
+    it('should call alert', async () => {
       await waitForPromises();
 
       expect(createAlert).toHaveBeenCalledWith({
diff --git a/spec/frontend/snippets/components/snippet_blob_view_spec.js b/spec/frontend/snippets/components/snippet_blob_view_spec.js
index c7ff8c21d80..840bca8c9c8 100644
--- a/spec/frontend/snippets/components/snippet_blob_view_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_view_spec.js
@@ -62,10 +62,6 @@ describe('Blob Embeddable', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     it('renders correct components', () => {
       createComponent();
diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js
index ff75515e71a..2b42eba19c2 100644
--- a/spec/frontend/snippets/components/snippet_description_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js
@@ -30,10 +30,6 @@ describe('Snippet Description Edit component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     it('matches the snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/snippets/components/snippet_description_view_spec.js b/spec/frontend/snippets/components/snippet_description_view_spec.js
index 14f116f2aaf..3c5d50ccaa6 100644
--- a/spec/frontend/snippets/components/snippet_description_view_spec.js
+++ b/spec/frontend/snippets/components/snippet_description_view_spec.js
@@ -17,10 +17,6 @@ describe('Snippet Description component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index c930c9f635b..994cf65c1f5 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -1,8 +1,9 @@
-import { GlButton, GlModal, GlDropdown } from '@gitlab/ui';
+import { GlModal, GlButton, GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { ApolloMutation } from 'vue-apollo';
+import VueApollo from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { Blob, BinaryBlob } from 'jest/blob/components/mock_data';
@@ -10,31 +11,41 @@ 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 { createAlert, VARIANT_DANGER, VARIANT_SUCCESS } from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_SUCCESS } from '~/alert';
+import CanCreateProjectSnippet from 'shared_queries/snippet/project_permissions.query.graphql';
+import CanCreatePersonalSnippet from 'shared_queries/snippet/user_permissions.query.graphql';
+import { getCanCreateProjectSnippetMock, getCanCreatePersonalSnippetMock } from '../mock_data';
 
-jest.mock('~/flash');
+const ERROR_MSG = 'Foo bar';
+const ERR = { message: ERROR_MSG };
+
+const MUTATION_TYPES = {
+  RESOLVE: jest.fn().mockResolvedValue({ data: { destroySnippet: { errors: [] } } }),
+  REJECT: jest.fn().mockRejectedValue(ERR),
+};
+
+jest.mock('~/alert');
+
+Vue.use(VueApollo);
 
 describe('Snippet header component', () => {
   let wrapper;
   let snippet;
-  let mutationTypes;
-  let mutationVariables;
   let mock;
+  let mockApollo;
 
-  let errorMsg;
-  let err;
-  const originalRelativeUrlRoot = gon.relative_url_root;
   const reportAbusePath = '/-/snippets/42/mark_as_spam';
   const canReportSpam = true;
 
   const GlEmoji = { template: '<img/>' };
 
   function createComponent({
-    loading = false,
     permissions = {},
-    mutationRes = mutationTypes.RESOLVE,
     snippetProps = {},
     provide = {},
+    canCreateProjectSnippetMock = jest.fn().mockResolvedValue(getCanCreateProjectSnippetMock()),
+    canCreatePersonalSnippetMock = jest.fn().mockResolvedValue(getCanCreatePersonalSnippetMock()),
+    deleteSnippetMock = MUTATION_TYPES.RESOLVE,
   } = {}) {
     const defaultProps = Object.assign(snippet, snippetProps);
     if (permissions) {
@@ -42,17 +53,14 @@ describe('Snippet header component', () => {
         ...permissions,
       });
     }
-    const $apollo = {
-      queries: {
-        canCreateSnippet: {
-          loading,
-        },
-      },
-      mutate: mutationRes,
-    };
+
+    mockApollo = createMockApollo([
+      [CanCreateProjectSnippet, canCreateProjectSnippetMock],
+      [CanCreatePersonalSnippet, canCreatePersonalSnippetMock],
+      [DeleteSnippetMutation, deleteSnippetMock],
+    ]);
 
     wrapper = mount(SnippetHeader, {
-      mocks: { $apollo },
       provide: {
         reportAbusePath,
         canReportSpam,
@@ -64,9 +72,9 @@ describe('Snippet header component', () => {
         },
       },
       stubs: {
-        ApolloMutation,
         GlEmoji,
       },
+      apolloProvider: mockApollo,
     });
   }
 
@@ -91,6 +99,7 @@ describe('Snippet header component', () => {
       title: x.attributes('title'),
       text: x.text(),
     }));
+  const findDeleteModal = () => wrapper.findComponent(GlModal);
 
   beforeEach(() => {
     gon.relative_url_root = '/foo/';
@@ -113,28 +122,12 @@ describe('Snippet header component', () => {
       createdAt: new Date(differenceInMilliseconds(32 * 24 * 3600 * 1000)).toISOString(),
     };
 
-    mutationVariables = {
-      mutation: DeleteSnippetMutation,
-      variables: {
-        id: snippet.id,
-      },
-    };
-
-    errorMsg = 'Foo bar';
-    err = { message: errorMsg };
-
-    mutationTypes = {
-      RESOLVE: jest.fn(() => Promise.resolve({ data: { destroySnippet: { errors: [] } } })),
-      REJECT: jest.fn(() => Promise.reject(err)),
-    };
-
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    mockApollo = null;
     mock.restore();
-    gon.relative_url_root = originalRelativeUrlRoot;
   });
 
   it('renders itself', () => {
@@ -238,15 +231,16 @@ describe('Snippet header component', () => {
   });
 
   it('with canCreateSnippet permission, renders create button', async () => {
-    createComponent();
+    createComponent({
+      canCreateProjectSnippetMock: jest
+        .fn()
+        .mockResolvedValue(getCanCreateProjectSnippetMock(true)),
+      canCreatePersonalSnippetMock: jest
+        .fn()
+        .mockResolvedValue(getCanCreatePersonalSnippetMock(true)),
+    });
 
-    // TODO: we should avoid `wrapper.setData` since they
-    // are component internals. Let's use the apollo mock helpers
-    // in a follow-up.
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({ canCreateSnippet: true });
-    await nextTick();
+    await waitForPromises();
 
     expect(findButtonsAsModel()).toEqual(
       expect.arrayContaining([
@@ -271,7 +265,7 @@ describe('Snippet header component', () => {
       ${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',
+      'renders a "$variant" alert message with "$text" message for a request with a "$request" response',
       async ({ request, variant, text }) => {
         const submitAsSpamBtn = findButtons().at(2);
         mock.onPost(reportAbusePath).reply(request);
@@ -329,21 +323,37 @@ describe('Snippet header component', () => {
   });
 
   describe('Delete mutation', () => {
-    it('dispatches a mutation to delete the snippet with correct variables', () => {
+    const deleteSnippet = async () => {
+      // Click delete action
+      findButtons().at(1).trigger('click');
+      await nextTick();
+
+      expect(findDeleteModal().props().visible).toBe(true);
+
+      // Click delete button in delete modal
+      document.querySelector('[data-testid="delete-snippet"').click();
+      await waitForPromises();
+    };
+
+    it('dispatches a mutation to delete the snippet with correct variables', async () => {
       createComponent();
-      wrapper.vm.deleteSnippet();
-      expect(mutationTypes.RESOLVE).toHaveBeenCalledWith(mutationVariables);
+
+      await deleteSnippet();
+
+      expect(MUTATION_TYPES.RESOLVE).toHaveBeenCalledWith({
+        id: snippet.id,
+      });
     });
 
     it('sets error message if mutation fails', async () => {
-      createComponent({ mutationRes: mutationTypes.REJECT });
+      createComponent({ deleteSnippetMock: MUTATION_TYPES.REJECT });
       expect(Boolean(wrapper.vm.errorMessage)).toBe(false);
 
-      wrapper.vm.deleteSnippet();
-
-      await waitForPromises();
+      await deleteSnippet();
 
-      expect(wrapper.vm.errorMessage).toEqual(errorMsg);
+      expect(document.querySelector('[data-testid="delete-alert"').textContent.trim()).toBe(
+        ERROR_MSG,
+      );
     });
 
     describe('in case of successful mutation, closes modal and redirects to correct listing', () => {
@@ -353,15 +363,16 @@ describe('Snippet header component', () => {
         createComponent({
           snippetProps,
         });
-        wrapper.vm.closeDeleteModal = jest.fn();
 
-        wrapper.vm.deleteSnippet();
-        await nextTick();
+        await deleteSnippet();
       };
 
       it('redirects to dashboard/snippets for personal snippet', async () => {
         await createDeleteSnippet();
-        expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
+
+        // Check that the modal is hidden after deleting the snippet
+        expect(findDeleteModal().props().visible).toBe(false);
+
         expect(window.location.pathname).toBe(`${gon.relative_url_root}dashboard/snippets`);
       });
 
@@ -372,7 +383,10 @@ describe('Snippet header component', () => {
             fullPath,
           },
         });
-        expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
+
+        // Check that the modal is hidden after deleting the snippet
+        expect(findDeleteModal().props().visible).toBe(false);
+
         expect(window.location.pathname).toBe(`${fullPath}/-/snippets`);
       });
     });
diff --git a/spec/frontend/snippets/components/snippet_title_spec.js b/spec/frontend/snippets/components/snippet_title_spec.js
index 7c40735d64e..0a3b57c9244 100644
--- a/spec/frontend/snippets/components/snippet_title_spec.js
+++ b/spec/frontend/snippets/components/snippet_title_spec.js
@@ -26,10 +26,6 @@ describe('Snippet header component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders itself', () => {
     createComponent();
     expect(wrapper.find('.snippet-header').exists()).toBe(true);
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
index 29eb002ef4a..70eb719f706 100644
--- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -51,10 +51,6 @@ describe('Snippet Visibility Edit component', () => {
       };
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('rendering', () => {
     it('matches the snapshot', () => {
       createComponent();
diff --git a/spec/frontend/snippets/mock_data.js b/spec/frontend/snippets/mock_data.js
new file mode 100644
index 00000000000..7546fa575c6
--- /dev/null
+++ b/spec/frontend/snippets/mock_data.js
@@ -0,0 +1,19 @@
+export const getCanCreateProjectSnippetMock = (createSnippet = false) => ({
+  data: {
+    project: {
+      userPermissions: {
+        createSnippet,
+      },
+    },
+  },
+});
+
+export const getCanCreatePersonalSnippetMock = (createSnippet = false) => ({
+  data: {
+    currentUser: {
+      userPermissions: {
+        createSnippet,
+      },
+    },
+  },
+});
diff --git a/spec/frontend/streaming/chunk_writer_spec.js b/spec/frontend/streaming/chunk_writer_spec.js
new file mode 100644
index 00000000000..2aadb332838
--- /dev/null
+++ b/spec/frontend/streaming/chunk_writer_spec.js
@@ -0,0 +1,214 @@
+import { ChunkWriter } from '~/streaming/chunk_writer';
+import { RenderBalancer } from '~/streaming/render_balancer';
+
+jest.mock('~/streaming/render_balancer');
+
+describe('ChunkWriter', () => {
+  let accumulator = '';
+  let write;
+  let close;
+  let abort;
+  let config;
+  let render;
+
+  const createChunk = (text) => {
+    const encoder = new TextEncoder();
+    return encoder.encode(text);
+  };
+
+  const createHtmlStream = () => {
+    write = jest.fn((part) => {
+      accumulator += part;
+    });
+    close = jest.fn();
+    abort = jest.fn();
+    return {
+      write,
+      close,
+      abort,
+    };
+  };
+
+  const createWriter = () => {
+    return new ChunkWriter(createHtmlStream(), config);
+  };
+
+  const pushChunks = (...chunks) => {
+    const writer = createWriter();
+    chunks.forEach((chunk) => {
+      writer.write(createChunk(chunk));
+    });
+    writer.close();
+  };
+
+  afterAll(() => {
+    global.JEST_DEBOUNCE_THROTTLE_TIMEOUT = undefined;
+  });
+
+  beforeEach(() => {
+    global.JEST_DEBOUNCE_THROTTLE_TIMEOUT = 100;
+    accumulator = '';
+    config = undefined;
+    render = jest.fn((cb) => {
+      while (cb()) {
+        // render until 'false'
+      }
+    });
+    RenderBalancer.mockImplementation(() => ({ render }));
+  });
+
+  describe('when chunk length must be "1"', () => {
+    beforeEach(() => {
+      config = { minChunkSize: 1, maxChunkSize: 1 };
+    });
+
+    it('splits big chunks into smaller ones', () => {
+      const text = 'foobar';
+      pushChunks(text);
+      expect(accumulator).toBe(text);
+      expect(write).toHaveBeenCalledTimes(text.length);
+    });
+
+    it('handles small emoji chunks', () => {
+      const text = 'foo👀bar👨‍👩‍👧baz👧👧🏻👧🏼👧🏽👧🏾👧🏿';
+      pushChunks(text);
+      expect(accumulator).toBe(text);
+      expect(write).toHaveBeenCalledTimes(createChunk(text).length);
+    });
+  });
+
+  describe('when chunk length must not be lower than "5" and exceed "10"', () => {
+    beforeEach(() => {
+      config = { minChunkSize: 5, maxChunkSize: 10 };
+    });
+
+    it('joins small chunks', () => {
+      const text = '12345';
+      pushChunks(...text.split(''));
+      expect(accumulator).toBe(text);
+      expect(write).toHaveBeenCalledTimes(1);
+      expect(close).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles overflow with small chunks', () => {
+      const text = '123456789';
+      pushChunks(...text.split(''));
+      expect(accumulator).toBe(text);
+      expect(write).toHaveBeenCalledTimes(2);
+      expect(close).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls flush on small chunks', () => {
+      global.JEST_DEBOUNCE_THROTTLE_TIMEOUT = undefined;
+      const flushAccumulator = jest.spyOn(ChunkWriter.prototype, 'flushAccumulator');
+      const text = '1';
+      pushChunks(text);
+      expect(accumulator).toBe(text);
+      expect(flushAccumulator).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls flush on large chunks', () => {
+      const flushAccumulator = jest.spyOn(ChunkWriter.prototype, 'flushAccumulator');
+      const text = '1234567890123';
+      const writer = createWriter();
+      writer.write(createChunk(text));
+      jest.runAllTimers();
+      expect(accumulator).toBe(text);
+      expect(flushAccumulator).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('chunk balancing', () => {
+    let increase;
+    let decrease;
+    let renderOnce;
+
+    beforeEach(() => {
+      render = jest.fn((cb) => {
+        let next = true;
+        renderOnce = () => {
+          if (!next) return;
+          next = cb();
+        };
+      });
+      RenderBalancer.mockImplementation(({ increase: inc, decrease: dec }) => {
+        increase = jest.fn(inc);
+        decrease = jest.fn(dec);
+        return {
+          render,
+        };
+      });
+    });
+
+    describe('when frame time exceeds low limit', () => {
+      beforeEach(() => {
+        config = {
+          minChunkSize: 1,
+          maxChunkSize: 5,
+          balanceRate: 10,
+        };
+      });
+
+      it('increases chunk size', () => {
+        const text = '111222223';
+        const writer = createWriter();
+        const chunk = createChunk(text);
+
+        writer.write(chunk);
+
+        renderOnce();
+        increase();
+        renderOnce();
+        renderOnce();
+
+        writer.close();
+
+        expect(accumulator).toBe(text);
+        expect(write.mock.calls).toMatchObject([['111'], ['22222'], ['3']]);
+        expect(close).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('when frame time exceeds high limit', () => {
+      beforeEach(() => {
+        config = {
+          minChunkSize: 1,
+          maxChunkSize: 10,
+          balanceRate: 2,
+        };
+      });
+
+      it('decreases chunk size', () => {
+        const text = '1111112223345';
+        const writer = createWriter();
+        const chunk = createChunk(text);
+
+        writer.write(chunk);
+
+        renderOnce();
+        decrease();
+
+        renderOnce();
+        decrease();
+
+        renderOnce();
+        decrease();
+
+        renderOnce();
+        renderOnce();
+
+        writer.close();
+
+        expect(accumulator).toBe(text);
+        expect(write.mock.calls).toMatchObject([['111111'], ['222'], ['33'], ['4'], ['5']]);
+        expect(close).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  it('calls abort on htmlStream', () => {
+    const writer = createWriter();
+    writer.abort();
+    expect(abort).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/spec/frontend/streaming/handle_streamed_anchor_link_spec.js b/spec/frontend/streaming/handle_streamed_anchor_link_spec.js
new file mode 100644
index 00000000000..ef17957b2fc
--- /dev/null
+++ b/spec/frontend/streaming/handle_streamed_anchor_link_spec.js
@@ -0,0 +1,132 @@
+import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
+import waitForPromises from 'helpers/wait_for_promises';
+import { handleStreamedAnchorLink } from '~/streaming/handle_streamed_anchor_link';
+import { scrollToElement } from '~/lib/utils/common_utils';
+import LineHighlighter from '~/blob/line_highlighter';
+import { TEST_HOST } from 'spec/test_constants';
+
+jest.mock('~/lib/utils/common_utils');
+jest.mock('~/blob/line_highlighter');
+
+describe('handleStreamedAnchorLink', () => {
+  const ANCHOR_START = 'L100';
+  const ANCHOR_END = '300';
+  const findRoot = () => document.querySelector('#root');
+
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
+  describe('when single line anchor is given', () => {
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(`${TEST_HOST}#${ANCHOR_START}`);
+    });
+
+    describe('when element is present', () => {
+      beforeEach(() => {
+        setHTMLFixture(`<div id="root"><div id="${ANCHOR_START}"></div></div>`);
+        handleStreamedAnchorLink(findRoot());
+      });
+
+      it('does nothing', async () => {
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when element is streamed', () => {
+      let stop;
+      const insertElement = () => {
+        findRoot().insertAdjacentHTML('afterbegin', `<div id="${ANCHOR_START}"></div>`);
+      };
+
+      beforeEach(() => {
+        setHTMLFixture('<div id="root"></div>');
+        stop = handleStreamedAnchorLink(findRoot());
+      });
+
+      afterEach(() => {
+        stop = undefined;
+      });
+
+      it('scrolls to the anchor when inserted', async () => {
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).toHaveBeenCalledTimes(1);
+        expect(LineHighlighter).toHaveBeenCalledTimes(1);
+      });
+
+      it("doesn't scroll to the anchor when destroyed", async () => {
+        stop();
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when line range anchor is given', () => {
+    beforeEach(() => {
+      delete window.location;
+      window.location = new URL(`${TEST_HOST}#${ANCHOR_START}-${ANCHOR_END}`);
+    });
+
+    describe('when last element is present', () => {
+      beforeEach(() => {
+        setHTMLFixture(`<div id="root"><div id="L${ANCHOR_END}"></div></div>`);
+        handleStreamedAnchorLink(findRoot());
+      });
+
+      it('does nothing', async () => {
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when last element is streamed', () => {
+      let stop;
+      const insertElement = () => {
+        findRoot().insertAdjacentHTML(
+          'afterbegin',
+          `<div id="${ANCHOR_START}"></div><div id="L${ANCHOR_END}"></div>`,
+        );
+      };
+
+      beforeEach(() => {
+        setHTMLFixture('<div id="root"></div>');
+        stop = handleStreamedAnchorLink(findRoot());
+      });
+
+      afterEach(() => {
+        stop = undefined;
+      });
+
+      it('scrolls to the anchor when inserted', async () => {
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).toHaveBeenCalledTimes(1);
+        expect(LineHighlighter).toHaveBeenCalledTimes(1);
+      });
+
+      it("doesn't scroll to the anchor when destroyed", async () => {
+        stop();
+        insertElement();
+        await waitForPromises();
+        expect(scrollToElement).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when anchor is not given', () => {
+    beforeEach(() => {
+      setHTMLFixture(`<div id="root"></div>`);
+      handleStreamedAnchorLink(findRoot());
+    });
+
+    it('does nothing', async () => {
+      await waitForPromises();
+      expect(scrollToElement).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/streaming/html_stream_spec.js b/spec/frontend/streaming/html_stream_spec.js
new file mode 100644
index 00000000000..115a9ddc803
--- /dev/null
+++ b/spec/frontend/streaming/html_stream_spec.js
@@ -0,0 +1,46 @@
+import { HtmlStream } from '~/streaming/html_stream';
+import { ChunkWriter } from '~/streaming/chunk_writer';
+
+jest.mock('~/streaming/chunk_writer');
+
+describe('HtmlStream', () => {
+  let write;
+  let close;
+  let streamingElement;
+
+  beforeEach(() => {
+    write = jest.fn();
+    close = jest.fn();
+    jest.spyOn(Document.prototype, 'write').mockImplementation(write);
+    jest.spyOn(Document.prototype, 'close').mockImplementation(close);
+    jest.spyOn(Document.prototype, 'querySelector').mockImplementation(() => {
+      streamingElement = document.createElement('div');
+      return streamingElement;
+    });
+  });
+
+  it('attaches to original document', () => {
+    // eslint-disable-next-line no-new
+    new HtmlStream(document.body);
+    expect(document.body.contains(streamingElement)).toBe(true);
+  });
+
+  it('can write to a document', () => {
+    const htmlStream = new HtmlStream(document.body);
+    htmlStream.write('foo');
+    htmlStream.close();
+    expect(write.mock.calls).toEqual([['<streaming-element>'], ['foo'], ['</streaming-element>']]);
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns chunked writer', () => {
+    const htmlStream = new HtmlStream(document.body).withChunkWriter();
+    expect(htmlStream).toBeInstanceOf(ChunkWriter);
+  });
+
+  it('closes on abort', () => {
+    const htmlStream = new HtmlStream(document.body);
+    htmlStream.abort();
+    expect(close).toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/streaming/rate_limit_stream_requests_spec.js b/spec/frontend/streaming/rate_limit_stream_requests_spec.js
new file mode 100644
index 00000000000..02e3cf93014
--- /dev/null
+++ b/spec/frontend/streaming/rate_limit_stream_requests_spec.js
@@ -0,0 +1,155 @@
+import waitForPromises from 'helpers/wait_for_promises';
+import { rateLimitStreamRequests } from '~/streaming/rate_limit_stream_requests';
+
+describe('rateLimitStreamRequests', () => {
+  const encoder = new TextEncoder('utf-8');
+  const createStreamResponse = (content = 'foo') =>
+    new ReadableStream({
+      pull(controller) {
+        controller.enqueue(encoder.encode(content));
+        controller.close();
+      },
+    });
+
+  const createFactory = (content) => {
+    return jest.fn(() => {
+      return Promise.resolve(createStreamResponse(content));
+    });
+  };
+
+  it('does nothing for zero total requests', () => {
+    const factory = jest.fn();
+    const requests = rateLimitStreamRequests({
+      factory,
+      total: 0,
+    });
+    expect(factory).toHaveBeenCalledTimes(0);
+    expect(requests.length).toBe(0);
+  });
+
+  it('does not exceed total requests', () => {
+    const factory = createFactory();
+    const requests = rateLimitStreamRequests({
+      factory,
+      immediateCount: 100,
+      maxConcurrentRequests: 100,
+      total: 2,
+    });
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(requests.length).toBe(2);
+  });
+
+  it('creates immediate requests', () => {
+    const factory = createFactory();
+    const requests = rateLimitStreamRequests({
+      factory,
+      maxConcurrentRequests: 2,
+      total: 2,
+    });
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(requests.length).toBe(2);
+  });
+
+  it('returns correct values', async () => {
+    const fixture = 'foobar';
+    const factory = createFactory(fixture);
+    const requests = rateLimitStreamRequests({
+      factory,
+      maxConcurrentRequests: 2,
+      total: 2,
+    });
+
+    const decoder = new TextDecoder('utf-8');
+    let result = '';
+    for await (const stream of requests) {
+      await stream.pipeTo(
+        new WritableStream({
+          // eslint-disable-next-line no-loop-func
+          write(content) {
+            result += decoder.decode(content);
+          },
+        }),
+      );
+    }
+
+    expect(result).toBe(fixture + fixture);
+  });
+
+  it('delays rate limited requests', async () => {
+    const factory = createFactory();
+    const requests = rateLimitStreamRequests({
+      factory,
+      maxConcurrentRequests: 2,
+      total: 3,
+    });
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(requests.length).toBe(3);
+
+    await waitForPromises();
+
+    expect(factory).toHaveBeenCalledTimes(3);
+  });
+
+  it('runs next request after previous has been fulfilled', async () => {
+    let res;
+    const factory = jest
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            res = resolve;
+          }),
+      )
+      .mockImplementationOnce(() => Promise.resolve(createStreamResponse()));
+    const requests = rateLimitStreamRequests({
+      factory,
+      maxConcurrentRequests: 1,
+      total: 2,
+    });
+    expect(factory).toHaveBeenCalledTimes(1);
+    expect(requests.length).toBe(2);
+
+    await waitForPromises();
+
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    res(createStreamResponse());
+
+    await waitForPromises();
+
+    expect(factory).toHaveBeenCalledTimes(2);
+  });
+
+  it('uses timer to schedule next request', async () => {
+    let res;
+    const factory = jest
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            res = resolve;
+          }),
+      )
+      .mockImplementationOnce(() => Promise.resolve(createStreamResponse()));
+    const requests = rateLimitStreamRequests({
+      factory,
+      immediateCount: 1,
+      maxConcurrentRequests: 2,
+      total: 2,
+      timeout: 9999,
+    });
+    expect(factory).toHaveBeenCalledTimes(1);
+    expect(requests.length).toBe(2);
+
+    await waitForPromises();
+
+    expect(factory).toHaveBeenCalledTimes(1);
+
+    jest.runAllTimers();
+
+    await waitForPromises();
+
+    expect(factory).toHaveBeenCalledTimes(2);
+    res(createStreamResponse());
+  });
+});
diff --git a/spec/frontend/streaming/render_balancer_spec.js b/spec/frontend/streaming/render_balancer_spec.js
new file mode 100644
index 00000000000..dae0c98d678
--- /dev/null
+++ b/spec/frontend/streaming/render_balancer_spec.js
@@ -0,0 +1,69 @@
+import { RenderBalancer } from '~/streaming/render_balancer';
+
+const HIGH_FRAME_TIME = 100;
+const LOW_FRAME_TIME = 10;
+
+describe('renderBalancer', () => {
+  let frameTime = 0;
+  let frameTimeDelta = 0;
+  let decrease;
+  let increase;
+
+  const createBalancer = () => {
+    decrease = jest.fn();
+    increase = jest.fn();
+    return new RenderBalancer({
+      highFrameTime: HIGH_FRAME_TIME,
+      lowFrameTime: LOW_FRAME_TIME,
+      increase,
+      decrease,
+    });
+  };
+
+  const renderTimes = (times) => {
+    const balancer = createBalancer();
+    return new Promise((resolve) => {
+      let counter = 0;
+      balancer.render(() => {
+        if (counter === times) {
+          resolve(counter);
+          return false;
+        }
+        counter += 1;
+        return true;
+      });
+    });
+  };
+
+  beforeEach(() => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+      frameTime += frameTimeDelta;
+      cb(frameTime);
+    });
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame.mockRestore();
+    frameTime = 0;
+    frameTimeDelta = 0;
+  });
+
+  it('renders in a loop', async () => {
+    const count = await renderTimes(5);
+    expect(count).toBe(5);
+  });
+
+  it('calls decrease', async () => {
+    frameTimeDelta = 200;
+    await renderTimes(5);
+    expect(decrease).toHaveBeenCalled();
+    expect(increase).not.toHaveBeenCalled();
+  });
+
+  it('calls increase', async () => {
+    frameTimeDelta = 1;
+    await renderTimes(5);
+    expect(increase).toHaveBeenCalled();
+    expect(decrease).not.toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/streaming/render_html_streams_spec.js b/spec/frontend/streaming/render_html_streams_spec.js
new file mode 100644
index 00000000000..55cef0ea469
--- /dev/null
+++ b/spec/frontend/streaming/render_html_streams_spec.js
@@ -0,0 +1,96 @@
+import { ReadableStream } from 'node:stream/web';
+import { renderHtmlStreams } from '~/streaming/render_html_streams';
+import { HtmlStream } from '~/streaming/html_stream';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/streaming/html_stream');
+jest.mock('~/streaming/constants', () => {
+  return {
+    HIGH_FRAME_TIME: 0,
+    LOW_FRAME_TIME: 0,
+    MAX_CHUNK_SIZE: 1,
+    MIN_CHUNK_SIZE: 1,
+  };
+});
+
+const firstStreamContent = 'foobar';
+const secondStreamContent = 'bazqux';
+
+describe('renderHtmlStreams', () => {
+  let htmlWriter;
+  const encoder = new TextEncoder();
+  const createSingleChunkStream = (chunk) => {
+    const encoded = encoder.encode(chunk);
+    const stream = new ReadableStream({
+      pull(controller) {
+        controller.enqueue(encoded);
+        controller.close();
+      },
+    });
+    return [stream, encoded];
+  };
+
+  beforeEach(() => {
+    htmlWriter = {
+      write: jest.fn(),
+      close: jest.fn(),
+      abort: jest.fn(),
+    };
+    jest.spyOn(HtmlStream.prototype, 'withChunkWriter').mockReturnValue(htmlWriter);
+  });
+
+  it('renders a single stream', async () => {
+    const [stream, encoded] = createSingleChunkStream(firstStreamContent);
+
+    await renderHtmlStreams([Promise.resolve(stream)], document.body);
+
+    expect(htmlWriter.write).toHaveBeenCalledWith(encoded);
+    expect(htmlWriter.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders stream sequence', async () => {
+    const [stream1, encoded1] = createSingleChunkStream(firstStreamContent);
+    const [stream2, encoded2] = createSingleChunkStream(secondStreamContent);
+
+    await renderHtmlStreams([Promise.resolve(stream1), Promise.resolve(stream2)], document.body);
+
+    expect(htmlWriter.write.mock.calls).toMatchObject([[encoded1], [encoded2]]);
+    expect(htmlWriter.close).toHaveBeenCalledTimes(1);
+  });
+
+  it("doesn't wait for the whole sequence to resolve before streaming", async () => {
+    const [stream1, encoded1] = createSingleChunkStream(firstStreamContent);
+    const [stream2, encoded2] = createSingleChunkStream(secondStreamContent);
+
+    let res;
+    const delayedStream = new Promise((resolve) => {
+      res = resolve;
+    });
+
+    renderHtmlStreams([Promise.resolve(stream1), delayedStream], document.body);
+
+    await waitForPromises();
+
+    expect(htmlWriter.write.mock.calls).toMatchObject([[encoded1]]);
+    expect(htmlWriter.close).toHaveBeenCalledTimes(0);
+
+    res(stream2);
+    await waitForPromises();
+
+    expect(htmlWriter.write.mock.calls).toMatchObject([[encoded1], [encoded2]]);
+    expect(htmlWriter.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('closes HtmlStream on error', async () => {
+    const [stream1] = createSingleChunkStream(firstStreamContent);
+    const error = new Error();
+
+    try {
+      await renderHtmlStreams([Promise.resolve(stream1), Promise.reject(error)], document.body);
+    } catch (err) {
+      expect(err).toBe(error);
+    }
+
+    expect(htmlWriter.abort).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/context_switcher_spec.js b/spec/frontend/super_sidebar/components/context_switcher_spec.js
new file mode 100644
index 00000000000..538e87cf843
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/context_switcher_spec.js
@@ -0,0 +1,219 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlSearchBoxByType } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { s__ } from '~/locale';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContextSwitcher from '~/super_sidebar/components/context_switcher.vue';
+import ProjectsList from '~/super_sidebar/components/projects_list.vue';
+import GroupsList from '~/super_sidebar/components/groups_list.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import searchUserProjectsAndGroupsQuery from '~/super_sidebar/graphql/queries/search_user_groups_and_projects.query.graphql';
+import { trackContextAccess, formatContextSwitcherItems } from '~/super_sidebar/utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
+import waitForPromises from 'helpers/wait_for_promises';
+import { stubComponent } from 'helpers/stub_component';
+import { searchUserProjectsAndGroupsResponseMock } from '../mock_data';
+
+jest.mock('~/super_sidebar/utils', () => ({
+  getStorageKeyFor: jest.requireActual('~/super_sidebar/utils').getStorageKeyFor,
+  getTopFrequentItems: jest.requireActual('~/super_sidebar/utils').getTopFrequentItems,
+  formatContextSwitcherItems: jest.requireActual('~/super_sidebar/utils')
+    .formatContextSwitcherItems,
+  trackContextAccess: jest.fn(),
+}));
+
+const username = 'root';
+const projectsPath = 'projectsPath';
+const groupsPath = 'groupsPath';
+
+Vue.use(VueApollo);
+
+describe('ContextSwitcher component', () => {
+  let wrapper;
+  let mockApollo;
+
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findProjectsList = () => wrapper.findComponent(ProjectsList);
+  const findGroupsList = () => wrapper.findComponent(GroupsList);
+
+  const triggerSearchQuery = async () => {
+    findSearchBox().vm.$emit('input', 'foo');
+    await nextTick();
+    jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
+    return waitForPromises();
+  };
+
+  const searchUserProjectsAndGroupsHandlerSuccess = jest
+    .fn()
+    .mockResolvedValue(searchUserProjectsAndGroupsResponseMock);
+
+  const createWrapper = ({ props = {}, requestHandlers = {} } = {}) => {
+    mockApollo = createMockApollo([
+      [
+        searchUserProjectsAndGroupsQuery,
+        requestHandlers.searchUserProjectsAndGroupsQueryHandler ??
+          searchUserProjectsAndGroupsHandlerSuccess,
+      ],
+    ]);
+
+    wrapper = shallowMountExtended(ContextSwitcher, {
+      apolloProvider: mockApollo,
+      propsData: {
+        username,
+        projectsPath,
+        groupsPath,
+        ...props,
+      },
+      stubs: {
+        GlSearchBoxByType: stubComponent(GlSearchBoxByType, {
+          props: ['placeholder'],
+        }),
+        ProjectsList: stubComponent(ProjectsList, {
+          props: ['username', 'viewAllLink', 'isSearch', 'searchResults'],
+        }),
+        GroupsList: stubComponent(GroupsList, {
+          props: ['username', 'viewAllLink', 'isSearch', 'searchResults'],
+        }),
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('passes the placeholder to the search box', () => {
+      expect(findSearchBox().props('placeholder')).toBe(
+        s__('Navigation|Search for projects or groups'),
+      );
+    });
+
+    it('passes the correct props the frequent projects list', () => {
+      expect(findProjectsList().props()).toEqual({
+        username,
+        viewAllLink: projectsPath,
+        isSearch: false,
+        searchResults: [],
+      });
+    });
+
+    it('passes the correct props the frequent groups list', () => {
+      expect(findGroupsList().props()).toEqual({
+        username,
+        viewAllLink: groupsPath,
+        isSearch: false,
+        searchResults: [],
+      });
+    });
+
+    it('does not trigger the search query on mount', () => {
+      expect(searchUserProjectsAndGroupsHandlerSuccess).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('item access tracking', () => {
+    it('does not track anything if not within a trackable context', () => {
+      createWrapper();
+
+      expect(trackContextAccess).not.toHaveBeenCalled();
+    });
+
+    it('tracks item access if within a trackable context', () => {
+      const currentContext = { namespace: 'groups' };
+      createWrapper({
+        props: {
+          currentContext,
+        },
+      });
+
+      expect(trackContextAccess).toHaveBeenCalledWith(username, currentContext);
+    });
+  });
+
+  describe('on search', () => {
+    beforeEach(() => {
+      createWrapper();
+      return triggerSearchQuery();
+    });
+
+    it('triggers the search query on search', () => {
+      expect(searchUserProjectsAndGroupsHandlerSuccess).toHaveBeenCalled();
+    });
+
+    it('passes the projects to the frequent projects list', () => {
+      expect(findProjectsList().props('isSearch')).toBe(true);
+      expect(findProjectsList().props('searchResults')).toEqual(
+        formatContextSwitcherItems(searchUserProjectsAndGroupsResponseMock.data.projects.nodes),
+      );
+    });
+
+    it('passes the groups to the frequent groups list', () => {
+      expect(findGroupsList().props('isSearch')).toBe(true);
+      expect(findGroupsList().props('searchResults')).toEqual(
+        formatContextSwitcherItems(searchUserProjectsAndGroupsResponseMock.data.user.groups.nodes),
+      );
+    });
+  });
+
+  describe('when search query does not match any items', () => {
+    beforeEach(() => {
+      createWrapper({
+        requestHandlers: {
+          searchUserProjectsAndGroupsQueryHandler: jest.fn().mockResolvedValue({
+            data: {
+              projects: {
+                nodes: [],
+              },
+              user: {
+                id: '1',
+                groups: {
+                  nodes: [],
+                },
+              },
+            },
+          }),
+        },
+      });
+      return triggerSearchQuery();
+    });
+
+    it('passes empty results to the lists', () => {
+      expect(findProjectsList().props('isSearch')).toBe(true);
+      expect(findProjectsList().props('searchResults')).toEqual([]);
+      expect(findGroupsList().props('isSearch')).toBe(true);
+      expect(findGroupsList().props('searchResults')).toEqual([]);
+    });
+  });
+
+  describe('when search query fails', () => {
+    beforeEach(() => {
+      jest.spyOn(Sentry, 'captureException');
+    });
+
+    it('captures exception if response is formatted incorrectly', async () => {
+      createWrapper({
+        requestHandlers: {
+          searchUserProjectsAndGroupsQueryHandler: jest.fn().mockResolvedValue({
+            data: {},
+          }),
+        },
+      });
+      await triggerSearchQuery();
+
+      expect(Sentry.captureException).toHaveBeenCalled();
+    });
+
+    it('captures exception if query fails', async () => {
+      createWrapper({
+        requestHandlers: {
+          searchUserProjectsAndGroupsQueryHandler: jest.fn().mockRejectedValue(),
+        },
+      });
+      await triggerSearchQuery();
+
+      expect(Sentry.captureException).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/context_switcher_toggle_spec.js b/spec/frontend/super_sidebar/components/context_switcher_toggle_spec.js
new file mode 100644
index 00000000000..7172b60d0fa
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/context_switcher_toggle_spec.js
@@ -0,0 +1,50 @@
+import { GlAvatar } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ContextSwitcherToggle from '~/super_sidebar/components/context_switcher_toggle.vue';
+
+describe('ContextSwitcherToggle component', () => {
+  let wrapper;
+
+  const context = {
+    id: 1,
+    title: 'Title',
+    avatar: '/path/to/avatar.png',
+  };
+
+  const findGlAvatar = () => wrapper.getComponent(GlAvatar);
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(ContextSwitcherToggle, {
+      propsData: {
+        context,
+        expanded: false,
+        ...props,
+      },
+    });
+  };
+
+  describe('with an avatar', () => {
+    it('passes the correct props to GlAvatar', () => {
+      createWrapper();
+      const avatar = findGlAvatar();
+
+      expect(avatar.props('shape')).toBe('rect');
+      expect(avatar.props('entityName')).toBe(context.title);
+      expect(avatar.props('entityId')).toBe(context.id);
+      expect(avatar.props('src')).toBe(context.avatar);
+    });
+
+    it('renders the avatar with a custom shape', () => {
+      const customShape = 'circle';
+      createWrapper({
+        context: {
+          ...context,
+          avatar_shape: customShape,
+        },
+      });
+      const avatar = findGlAvatar();
+
+      expect(avatar.props('shape')).toBe(customShape);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/frequent_items_list_spec.js b/spec/frontend/super_sidebar/components/frequent_items_list_spec.js
new file mode 100644
index 00000000000..1e98db091f2
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/frequent_items_list_spec.js
@@ -0,0 +1,68 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import FrequentItemsList from '~/super_sidebar/components//frequent_items_list.vue';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import { cachedFrequentProjects } from '../mock_data';
+
+const title = s__('Navigation|FREQUENT PROJECTS');
+const pristineText = s__('Navigation|Projects you visit often will appear here.');
+const storageKey = 'storageKey';
+const maxItems = 5;
+
+describe('FrequentItemsList component', () => {
+  useLocalStorageSpy();
+
+  let wrapper;
+
+  const findListTitle = () => wrapper.findByTestId('list-title');
+  const findItemsList = () => wrapper.findComponent(ItemsList);
+  const findEmptyText = () => wrapper.findByTestId('empty-text');
+
+  const createWrapper = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(FrequentItemsList, {
+      propsData: {
+        title,
+        pristineText,
+        storageKey,
+        maxItems,
+        ...props,
+      },
+    });
+  };
+
+  describe('default', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it("renders the list's title", () => {
+      expect(findListTitle().text()).toBe(title);
+    });
+
+    it('renders the empty text', () => {
+      expect(findEmptyText().exists()).toBe(true);
+      expect(findEmptyText().text()).toBe(pristineText);
+    });
+  });
+
+  describe('when there are cached frequent items', () => {
+    beforeEach(() => {
+      window.localStorage.setItem(storageKey, cachedFrequentProjects);
+      createWrapper();
+    });
+
+    it('attempts to retrieve the items from the local storage', () => {
+      expect(window.localStorage.getItem).toHaveBeenCalledTimes(1);
+      expect(window.localStorage.getItem).toHaveBeenCalledWith(storageKey);
+    });
+
+    it('renders the maximum amount of items', () => {
+      expect(findItemsList().props('items').length).toBe(maxItems);
+    });
+
+    it('does not render the empty text slot', () => {
+      expect(findEmptyText().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_autocomplete_items_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_autocomplete_items_spec.js
new file mode 100644
index 00000000000..e5ba1c63996
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_autocomplete_items_spec.js
@@ -0,0 +1,238 @@
+import { GlDropdownItem, GlLoadingIcon, GlAvatar, GlAlert, GlDropdownDivider } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
+import HeaderSearchAutocompleteItems from '~/super_sidebar/components/global_search/components/global_search_autocomplete_items.vue';
+import {
+  LARGE_AVATAR_PX,
+  SMALL_AVATAR_PX,
+} from '~/super_sidebar/components/global_search/constants';
+import {
+  PROJECTS_CATEGORY,
+  GROUPS_CATEGORY,
+  ISSUES_CATEGORY,
+  MERGE_REQUEST_CATEGORY,
+  RECENT_EPICS_CATEGORY,
+} from '~/vue_shared/global_search/constants';
+import {
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP,
+  MOCK_SEARCH,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2,
+} from '../mock_data';
+
+Vue.use(Vuex);
+
+describe('HeaderSearchAutocompleteItems', () => {
+  let wrapper;
+
+  const createComponent = (initialState, mockGetters, props) => {
+    const store = new Vuex.Store({
+      state: {
+        loading: false,
+        ...initialState,
+      },
+      getters: {
+        autocompleteGroupedSearchOptions: () => MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+        ...mockGetters,
+      },
+    });
+
+    wrapper = shallowMount(HeaderSearchAutocompleteItems, {
+      store,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGlDropdownDividers = () => wrapper.findAllComponents(GlDropdownDivider);
+  const findFirstDropdownItem = () => findDropdownItems().at(0);
+  const findDropdownItemTitles = () =>
+    findDropdownItems().wrappers.map((w) => w.findAll('span').at(1).text());
+  const findDropdownItemSubTitles = () =>
+    findDropdownItems()
+      .wrappers.filter((w) => w.findAll('span').length > 2)
+      .map((w) => w.findAll('span').at(2).text());
+  const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+
+  describe('template', () => {
+    describe('when loading is true', () => {
+      beforeEach(() => {
+        createComponent({ loading: true });
+      });
+
+      it('renders GlLoadingIcon', () => {
+        expect(findGlLoadingIcon().exists()).toBe(true);
+      });
+
+      it('does not render autocomplete options', () => {
+        expect(findDropdownItems()).toHaveLength(0);
+      });
+    });
+
+    describe('when api returns error', () => {
+      beforeEach(() => {
+        createComponent({ autocompleteError: true });
+      });
+
+      it('renders Alert', () => {
+        expect(findGlAlert().exists()).toBe(true);
+      });
+    });
+    describe('when loading is false', () => {
+      beforeEach(() => {
+        createComponent({ loading: false });
+      });
+
+      it('does not render GlLoadingIcon', () => {
+        expect(findGlLoadingIcon().exists()).toBe(false);
+      });
+
+      describe('Dropdown items', () => {
+        it('renders item for each option in autocomplete option', () => {
+          expect(findDropdownItems()).toHaveLength(MOCK_SORTED_AUTOCOMPLETE_OPTIONS.length);
+        });
+
+        it('renders titles correctly', () => {
+          const expectedTitles = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.map((o) => o.value || o.label);
+          expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
+        });
+
+        it('renders sub-titles correctly', () => {
+          const expectedSubTitles = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.filter((o) => o.value).map(
+            (o) => o.label,
+          );
+          expect(findDropdownItemSubTitles()).toStrictEqual(expectedSubTitles);
+        });
+
+        it('renders links correctly', () => {
+          const expectedLinks = MOCK_SORTED_AUTOCOMPLETE_OPTIONS.map((o) => o.url);
+          expect(findDropdownItemLinks()).toStrictEqual(expectedLinks);
+        });
+      });
+
+      describe.each`
+        item                                                                                                          | showAvatar | avatarSize                 | searchContext                            | entityId | entityName
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 29 } }}               | ${'29'}  | ${''}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: '/123' }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 12 } }}                 | ${'12'}  | ${''}
+        ${{ data: [{ category: 'Help', avatar_url: '' }] }}                                                           | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'0'}   | ${''}
+        ${{ data: [{ category: 'Settings' }] }}                                                                       | ${false}   | ${false}                   | ${null}                                  | ${false} | ${false}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null }] }}                                                | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 1, name: 'test1' } }}   | ${'1'}   | ${'test1'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null }] }}                                              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 2, name: 'test2' } }} | ${'2'}   | ${'test2'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null }] }}                                                | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 3, name: 'test3' } }} | ${'3'}   | ${'test3'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null }] }}                                         | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 4, name: 'test4' } }} | ${'4'}   | ${'test4'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null }] }}                                          | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ group: { id: 5, name: 'test5' } }}   | ${'5'}   | ${'test5'}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null, group_id: 6, group_name: 'test6' }] }}              | ${true}    | ${String(LARGE_AVATAR_PX)} | ${null}                                  | ${'6'}   | ${'test6'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null, project_id: 7, project_name: 'test7' }] }}        | ${true}    | ${String(LARGE_AVATAR_PX)} | ${null}                                  | ${'7'}   | ${'test7'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null, project_id: 8, project_name: 'test8' }] }}          | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'8'}   | ${'test8'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null, project_id: 9, project_name: 'test9' }] }}   | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'9'}   | ${'test9'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null, group_id: 10, group_name: 'test10' }] }}      | ${true}    | ${String(SMALL_AVATAR_PX)} | ${null}                                  | ${'10'}  | ${'test10'}
+        ${{ data: [{ category: GROUPS_CATEGORY, avatar_url: null, group_id: 11, group_name: 'test11' }] }}            | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ group: { id: 1, name: 'test1' } }}   | ${'11'}  | ${'test11'}
+        ${{ data: [{ category: PROJECTS_CATEGORY, avatar_url: null, project_id: 12, project_name: 'test12' }] }}      | ${true}    | ${String(LARGE_AVATAR_PX)} | ${{ project: { id: 2, name: 'test2' } }} | ${'12'}  | ${'test12'}
+        ${{ data: [{ category: ISSUES_CATEGORY, avatar_url: null, project_id: 13, project_name: 'test13' }] }}        | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 3, name: 'test3' } }} | ${'13'}  | ${'test13'}
+        ${{ data: [{ category: MERGE_REQUEST_CATEGORY, avatar_url: null, project_id: 14, project_name: 'test14' }] }} | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ project: { id: 4, name: 'test4' } }} | ${'14'}  | ${'test14'}
+        ${{ data: [{ category: RECENT_EPICS_CATEGORY, avatar_url: null, group_id: 15, group_name: 'test15' }] }}      | ${true}    | ${String(SMALL_AVATAR_PX)} | ${{ group: { id: 5, name: 'test5' } }}   | ${'15'}  | ${'test15'}
+      `('GlAvatar', ({ item, showAvatar, avatarSize, searchContext, entityId, entityName }) => {
+        describe(`when category is ${item.data[0].category} and avatar_url is ${item.data[0].avatar_url}`, () => {
+          beforeEach(() => {
+            createComponent({ searchContext }, { autocompleteGroupedSearchOptions: () => [item] });
+          });
+
+          it(`should${showAvatar ? '' : ' not'} render`, () => {
+            expect(findGlAvatar().exists()).toBe(showAvatar);
+          });
+
+          it(`should set avatarSize to ${avatarSize}`, () => {
+            expect(findGlAvatar().exists() && findGlAvatar().attributes('size')).toBe(avatarSize);
+          });
+
+          it(`should set avatar entityId to ${entityId}`, () => {
+            expect(findGlAvatar().exists() && findGlAvatar().attributes('entityid')).toBe(entityId);
+          });
+
+          it(`should set avatar entityName to ${entityName}`, () => {
+            expect(findGlAvatar().exists() && findGlAvatar().attributes('entityname')).toBe(
+              entityName,
+            );
+          });
+        });
+      });
+    });
+
+    describe.each`
+      currentFocusedOption                   | isFocused | ariaSelected
+      ${null}                                | ${false}  | ${undefined}
+      ${{ html_id: 'not-a-match' }}          | ${false}  | ${undefined}
+      ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS[0]} | ${true}   | ${'true'}
+    `('isOptionFocused', ({ currentFocusedOption, isFocused, ariaSelected }) => {
+      describe(`when currentFocusedOption.html_id is ${currentFocusedOption?.html_id}`, () => {
+        beforeEach(() => {
+          createComponent({}, {}, { currentFocusedOption });
+        });
+
+        it(`should${isFocused ? '' : ' not'} have gl-bg-gray-50 applied`, () => {
+          expect(findFirstDropdownItem().classes('gl-bg-gray-50')).toBe(isFocused);
+        });
+
+        it(`sets "aria-selected to ${ariaSelected}`, () => {
+          expect(findFirstDropdownItem().attributes('aria-selected')).toBe(ariaSelected);
+        });
+      });
+    });
+
+    describe.each`
+      search         | items                                              | dividerCount
+      ${null}        | ${[]}                                              | ${0}
+      ${''}          | ${[]}                                              | ${0}
+      ${'1'}         | ${[]}                                              | ${0}
+      ${')'}         | ${[]}                                              | ${0}
+      ${'t'}         | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP} | ${1}
+      ${'te'}        | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP}          | ${0}
+      ${'tes'}       | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2}             | ${1}
+      ${MOCK_SEARCH} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2}             | ${1}
+    `('Header Search Dropdown Dividers', ({ search, items, dividerCount }) => {
+      describe(`when search is ${search}`, () => {
+        beforeEach(() => {
+          createComponent(
+            { search },
+            {
+              autocompleteGroupedSearchOptions: () => items,
+            },
+            {},
+          );
+        });
+
+        it(`component should have ${dividerCount} dividers`, () => {
+          expect(findGlDropdownDividers()).toHaveLength(dividerCount);
+        });
+      });
+    });
+  });
+
+  describe('watchers', () => {
+    describe('currentFocusedOption', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('when focused changes to existing element calls scroll into view on the newly focused element', async () => {
+        const focusedElement = findFirstDropdownItem().element;
+        const scrollSpy = jest.spyOn(focusedElement, 'scrollIntoView');
+
+        wrapper.setProps({ currentFocusedOption: MOCK_SORTED_AUTOCOMPLETE_OPTIONS[0] });
+
+        await nextTick();
+
+        expect(scrollSpy).toHaveBeenCalledWith(false);
+        scrollSpy.mockRestore();
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_default_items_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_default_items_spec.js
new file mode 100644
index 00000000000..132f8e60598
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_default_items_spec.js
@@ -0,0 +1,102 @@
+import { GlDropdownItem, GlDropdownSectionHeader } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import HeaderSearchDefaultItems from '~/super_sidebar/components/global_search/components/global_search_default_items.vue';
+import { MOCK_SEARCH_CONTEXT, MOCK_DEFAULT_SEARCH_OPTIONS } from '../mock_data';
+
+Vue.use(Vuex);
+
+describe('HeaderSearchDefaultItems', () => {
+  let wrapper;
+
+  const createComponent = (initialState, props) => {
+    const store = new Vuex.Store({
+      state: {
+        searchContext: MOCK_SEARCH_CONTEXT,
+        ...initialState,
+      },
+      getters: {
+        defaultSearchOptions: () => MOCK_DEFAULT_SEARCH_OPTIONS,
+      },
+    });
+
+    wrapper = shallowMount(HeaderSearchDefaultItems, {
+      store,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findFirstDropdownItem = () => findDropdownItems().at(0);
+  const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => w.text());
+  const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
+
+  describe('template', () => {
+    describe('Dropdown items', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders item for each option in defaultSearchOptions', () => {
+        expect(findDropdownItems()).toHaveLength(MOCK_DEFAULT_SEARCH_OPTIONS.length);
+      });
+
+      it('renders titles correctly', () => {
+        const expectedTitles = MOCK_DEFAULT_SEARCH_OPTIONS.map((o) => o.title);
+        expect(findDropdownItemTitles()).toStrictEqual(expectedTitles);
+      });
+
+      it('renders links correctly', () => {
+        const expectedLinks = MOCK_DEFAULT_SEARCH_OPTIONS.map((o) => o.url);
+        expect(findDropdownItemLinks()).toStrictEqual(expectedLinks);
+      });
+    });
+
+    describe.each`
+      group                     | project                     | dropdownTitle
+      ${null}                   | ${null}                     | ${'All GitLab'}
+      ${{ name: 'Test Group' }} | ${null}                     | ${'Test Group'}
+      ${{ name: 'Test Group' }} | ${{ name: 'Test Project' }} | ${'Test Project'}
+    `('Dropdown Header', ({ group, project, dropdownTitle }) => {
+      describe(`when group is ${group?.name} and project is ${project?.name}`, () => {
+        beforeEach(() => {
+          createComponent({
+            searchContext: {
+              group,
+              project,
+            },
+          });
+        });
+
+        it(`should render as ${dropdownTitle}`, () => {
+          expect(findDropdownHeader().text()).toBe(dropdownTitle);
+        });
+      });
+    });
+
+    describe.each`
+      currentFocusedOption              | isFocused | ariaSelected
+      ${null}                           | ${false}  | ${undefined}
+      ${{ html_id: 'not-a-match' }}     | ${false}  | ${undefined}
+      ${MOCK_DEFAULT_SEARCH_OPTIONS[0]} | ${true}   | ${'true'}
+    `('isOptionFocused', ({ currentFocusedOption, isFocused, ariaSelected }) => {
+      describe(`when currentFocusedOption.html_id is ${currentFocusedOption?.html_id}`, () => {
+        beforeEach(() => {
+          createComponent({}, { currentFocusedOption });
+        });
+
+        it(`should${isFocused ? '' : ' not'} have gl-bg-gray-50 applied`, () => {
+          expect(findFirstDropdownItem().classes('gl-bg-gray-50')).toBe(isFocused);
+        });
+
+        it(`sets "aria-selected to ${ariaSelected}`, () => {
+          expect(findFirstDropdownItem().attributes('aria-selected')).toBe(ariaSelected);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_scoped_items_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_scoped_items_spec.js
new file mode 100644
index 00000000000..fa91ef43ced
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_scoped_items_spec.js
@@ -0,0 +1,120 @@
+import { GlDropdownItem, GlToken, GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { trimText } from 'helpers/text_helper';
+import HeaderSearchScopedItems from '~/super_sidebar/components/global_search/components/global_search_scoped_items.vue';
+import { truncate } from '~/lib/utils/text_utility';
+import { SCOPE_TOKEN_MAX_LENGTH } from '~/super_sidebar/components/global_search/constants';
+import { MSG_IN_ALL_GITLAB } from '~/vue_shared/global_search/constants';
+import {
+  MOCK_SEARCH,
+  MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+} from '../mock_data';
+
+Vue.use(Vuex);
+
+describe('HeaderSearchScopedItems', () => {
+  let wrapper;
+
+  const createComponent = (initialState, mockGetters, props) => {
+    const store = new Vuex.Store({
+      state: {
+        search: MOCK_SEARCH,
+        ...initialState,
+      },
+      getters: {
+        scopedSearchOptions: () => MOCK_SCOPED_SEARCH_OPTIONS,
+        autocompleteGroupedSearchOptions: () => MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+        ...mockGetters,
+      },
+    });
+
+    wrapper = shallowMount(HeaderSearchScopedItems, {
+      store,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findFirstDropdownItem = () => findDropdownItems().at(0);
+  const findDropdownItemTitles = () => findDropdownItems().wrappers.map((w) => trimText(w.text()));
+  const findScopeTokens = () => wrapper.findAllComponents(GlToken);
+  const findScopeTokensText = () => findScopeTokens().wrappers.map((w) => trimText(w.text()));
+  const findScopeTokensIcons = () =>
+    findScopeTokens().wrappers.map((w) => w.findAllComponents(GlIcon));
+  const findDropdownItemAriaLabels = () =>
+    findDropdownItems().wrappers.map((w) => trimText(w.attributes('aria-label')));
+  const findDropdownItemLinks = () => findDropdownItems().wrappers.map((w) => w.attributes('href'));
+
+  describe('template', () => {
+    describe('Dropdown items', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders item for each option in scopedSearchOptions', () => {
+        expect(findDropdownItems()).toHaveLength(MOCK_SCOPED_SEARCH_OPTIONS.length);
+      });
+
+      it('renders titles correctly', () => {
+        findDropdownItemTitles().forEach((title) => expect(title).toContain(MOCK_SEARCH));
+      });
+
+      it('renders scope names correctly', () => {
+        const expectedTitles = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
+          truncate(trimText(`in ${o.description || o.scope}`), SCOPE_TOKEN_MAX_LENGTH),
+        );
+
+        expect(findScopeTokensText()).toStrictEqual(expectedTitles);
+      });
+
+      it('renders scope icons correctly', () => {
+        findScopeTokensIcons().forEach((icon, i) => {
+          const w = icon.wrappers[0];
+          expect(w?.attributes('name')).toBe(MOCK_SCOPED_SEARCH_OPTIONS[i].icon);
+        });
+      });
+
+      it(`renders scope ${MSG_IN_ALL_GITLAB} correctly`, () => {
+        expect(findScopeTokens().at(-1).findComponent(GlIcon).exists()).toBe(false);
+      });
+
+      it('renders aria-labels correctly', () => {
+        const expectedLabels = MOCK_SCOPED_SEARCH_OPTIONS.map((o) =>
+          trimText(`${MOCK_SEARCH} ${o.description || o.icon} ${o.scope || ''}`),
+        );
+        expect(findDropdownItemAriaLabels()).toStrictEqual(expectedLabels);
+      });
+
+      it('renders links correctly', () => {
+        const expectedLinks = MOCK_SCOPED_SEARCH_OPTIONS.map((o) => o.url);
+        expect(findDropdownItemLinks()).toStrictEqual(expectedLinks);
+      });
+    });
+
+    describe.each`
+      currentFocusedOption             | isFocused | ariaSelected
+      ${null}                          | ${false}  | ${undefined}
+      ${{ html_id: 'not-a-match' }}    | ${false}  | ${undefined}
+      ${MOCK_SCOPED_SEARCH_OPTIONS[0]} | ${true}   | ${'true'}
+    `('isOptionFocused', ({ currentFocusedOption, isFocused, ariaSelected }) => {
+      describe(`when currentFocusedOption.html_id is ${currentFocusedOption?.html_id}`, () => {
+        beforeEach(() => {
+          createComponent({}, {}, { currentFocusedOption });
+        });
+
+        it(`should${isFocused ? '' : ' not'} have gl-bg-gray-50 applied`, () => {
+          expect(findFirstDropdownItem().classes('gl-bg-gray-50')).toBe(isFocused);
+        });
+
+        it(`sets "aria-selected to ${ariaSelected}`, () => {
+          expect(findFirstDropdownItem().attributes('aria-selected')).toBe(ariaSelected);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js
new file mode 100644
index 00000000000..0dcfc448125
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/components/global_search_spec.js
@@ -0,0 +1,516 @@
+import { GlSearchBoxByType, GlToken, GlIcon } from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import { s__, sprintf } from '~/locale';
+import HeaderSearchApp from '~/super_sidebar/components/global_search/components/global_search.vue';
+import HeaderSearchAutocompleteItems from '~/super_sidebar/components/global_search/components/global_search_autocomplete_items.vue';
+import HeaderSearchDefaultItems from '~/super_sidebar/components/global_search/components/global_search_default_items.vue';
+import HeaderSearchScopedItems from '~/super_sidebar/components/global_search/components/global_search_scoped_items.vue';
+import {
+  SEARCH_INPUT_DESCRIPTION,
+  SEARCH_RESULTS_DESCRIPTION,
+  SEARCH_BOX_INDEX,
+  ICON_PROJECT,
+  ICON_GROUP,
+  ICON_SUBGROUP,
+  SCOPE_TOKEN_MAX_LENGTH,
+  IS_SEARCHING,
+  IS_NOT_FOCUSED,
+  IS_FOCUSED,
+  SEARCH_SHORTCUTS_MIN_CHARACTERS,
+} from '~/super_sidebar/components/global_search/constants';
+import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
+import { ENTER_KEY } from '~/lib/utils/keys';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { truncate } from '~/lib/utils/text_utility';
+import {
+  MOCK_SEARCH,
+  MOCK_SEARCH_QUERY,
+  MOCK_USERNAME,
+  MOCK_DEFAULT_SEARCH_OPTIONS,
+  MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_SEARCH_CONTEXT_FULL,
+} from '../mock_data';
+
+Vue.use(Vuex);
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  visitUrl: jest.fn(),
+}));
+
+describe('HeaderSearchApp', () => {
+  let wrapper;
+
+  const actionSpies = {
+    setSearch: jest.fn(),
+    fetchAutocompleteOptions: jest.fn(),
+    clearAutocomplete: jest.fn(),
+  };
+
+  const createComponent = (initialState, mockGetters) => {
+    const store = new Vuex.Store({
+      state: {
+        ...initialState,
+      },
+      actions: actionSpies,
+      getters: {
+        searchQuery: () => MOCK_SEARCH_QUERY,
+        searchOptions: () => MOCK_DEFAULT_SEARCH_OPTIONS,
+        ...mockGetters,
+      },
+    });
+
+    wrapper = shallowMountExtended(HeaderSearchApp, {
+      store,
+    });
+  };
+
+  const formatScopeName = (scopeName) => {
+    if (!scopeName) {
+      return false;
+    }
+    const searchResultsScope = s__('GlobalSearch|in %{scope}');
+    return truncate(
+      sprintf(searchResultsScope, {
+        scope: scopeName,
+      }),
+      SCOPE_TOKEN_MAX_LENGTH,
+    );
+  };
+
+  const findHeaderSearchForm = () => wrapper.findByTestId('header-search-form');
+  const findHeaderSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
+  const findScopeToken = () => wrapper.findComponent(GlToken);
+  const findHeaderSearchInputKBD = () => wrapper.find('.keyboard-shortcut-helper');
+  const findHeaderSearchDropdown = () => wrapper.findByTestId('header-search-dropdown-menu');
+  const findHeaderSearchDefaultItems = () => wrapper.findComponent(HeaderSearchDefaultItems);
+  const findHeaderSearchScopedItems = () => wrapper.findComponent(HeaderSearchScopedItems);
+  const findHeaderSearchAutocompleteItems = () =>
+    wrapper.findComponent(HeaderSearchAutocompleteItems);
+  const findDropdownKeyboardNavigation = () => wrapper.findComponent(DropdownKeyboardNavigation);
+  const findSearchInputDescription = () => wrapper.find(`#${SEARCH_INPUT_DESCRIPTION}`);
+  const findSearchResultsDescription = () => wrapper.findByTestId(SEARCH_RESULTS_DESCRIPTION);
+
+  describe('template', () => {
+    describe('always renders', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('Header Search Input', () => {
+        expect(findHeaderSearchInput().exists()).toBe(true);
+      });
+
+      it('Header Search Input KBD hint', () => {
+        expect(findHeaderSearchInputKBD().exists()).toBe(true);
+        expect(findHeaderSearchInputKBD().text()).toContain('/');
+        expect(findHeaderSearchInputKBD().attributes('title')).toContain(
+          'Use the shortcut key <kbd>/</kbd> to start a search',
+        );
+      });
+
+      it('Search Input Description', () => {
+        expect(findSearchInputDescription().exists()).toBe(true);
+      });
+
+      it('Search Results Description', () => {
+        expect(findSearchResultsDescription().exists()).toBe(true);
+      });
+    });
+
+    describe.each`
+      showDropdown | username         | showSearchDropdown
+      ${false}     | ${null}          | ${false}
+      ${false}     | ${MOCK_USERNAME} | ${false}
+      ${true}      | ${null}          | ${false}
+      ${true}      | ${MOCK_USERNAME} | ${true}
+    `('Header Search Dropdown', ({ showDropdown, username, showSearchDropdown }) => {
+      describe(`when showDropdown is ${showDropdown} and current_username is ${username}`, () => {
+        beforeEach(() => {
+          window.gon.current_username = username;
+          createComponent();
+          findHeaderSearchInput().vm.$emit(showDropdown ? 'click' : '');
+        });
+
+        it(`should${showSearchDropdown ? '' : ' not'} render`, () => {
+          expect(findHeaderSearchDropdown().exists()).toBe(showSearchDropdown);
+        });
+      });
+    });
+
+    describe.each`
+      search         | showDefault | showScoped | showAutocomplete
+      ${null}        | ${true}     | ${false}   | ${false}
+      ${''}          | ${true}     | ${false}   | ${false}
+      ${'t'}         | ${false}    | ${false}   | ${true}
+      ${'te'}        | ${false}    | ${false}   | ${true}
+      ${'tes'}       | ${false}    | ${true}    | ${true}
+      ${MOCK_SEARCH} | ${false}    | ${true}    | ${true}
+    `('Header Search Dropdown Items', ({ search, showDefault, showScoped, showAutocomplete }) => {
+      describe(`when search is ${search}`, () => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent({ search }, {});
+          findHeaderSearchInput().vm.$emit('click');
+        });
+
+        it(`should${showDefault ? '' : ' not'} render the Default Dropdown Items`, () => {
+          expect(findHeaderSearchDefaultItems().exists()).toBe(showDefault);
+        });
+
+        it(`should${showScoped ? '' : ' not'} render the Scoped Dropdown Items`, () => {
+          expect(findHeaderSearchScopedItems().exists()).toBe(showScoped);
+        });
+
+        it(`should${showAutocomplete ? '' : ' not'} render the Autocomplete Dropdown Items`, () => {
+          expect(findHeaderSearchAutocompleteItems().exists()).toBe(showAutocomplete);
+        });
+
+        it(`should render the Dropdown Navigation Component`, () => {
+          expect(findDropdownKeyboardNavigation().exists()).toBe(true);
+        });
+
+        it(`should close the dropdown when press escape key`, async () => {
+          findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: 27 }));
+          await nextTick();
+          expect(findHeaderSearchDropdown().exists()).toBe(false);
+          expect(wrapper.emitted().expandSearchBar.length).toBe(1);
+        });
+      });
+    });
+
+    describe.each`
+      username         | showDropdown | expectedDesc
+      ${null}          | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${null}          | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_NO_DROPDOWN}
+      ${MOCK_USERNAME} | ${false}     | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
+      ${MOCK_USERNAME} | ${true}      | ${HeaderSearchApp.i18n.SEARCH_INPUT_DESCRIBE_BY_WITH_DROPDOWN}
+    `('Search Input Description', ({ username, showDropdown, expectedDesc }) => {
+      describe(`current_username is ${username} and showDropdown is ${showDropdown}`, () => {
+        beforeEach(() => {
+          window.gon.current_username = username;
+          createComponent();
+          findHeaderSearchInput().vm.$emit(showDropdown ? 'click' : '');
+        });
+
+        it(`sets description to ${expectedDesc}`, () => {
+          expect(findSearchInputDescription().text()).toBe(expectedDesc);
+        });
+      });
+    });
+
+    describe.each`
+      username         | showDropdown | search         | loading  | searchOptions                  | expectedDesc
+      ${null}          | ${true}      | ${''}          | ${false} | ${[]}                          | ${''}
+      ${MOCK_USERNAME} | ${false}     | ${''}          | ${false} | ${[]}                          | ${''}
+      ${MOCK_USERNAME} | ${true}      | ${''}          | ${false} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
+      ${MOCK_USERNAME} | ${true}      | ${''}          | ${true}  | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${`${MOCK_DEFAULT_SEARCH_OPTIONS.length} default results provided. Use the up and down arrow keys to navigate search results list.`}
+      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${false} | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${`Results updated. ${MOCK_SCOPED_SEARCH_OPTIONS.length} results available. Use the up and down arrow keys to navigate search results list, or ENTER to submit.`}
+      ${MOCK_USERNAME} | ${true}      | ${MOCK_SEARCH} | ${true}  | ${MOCK_SCOPED_SEARCH_OPTIONS}  | ${HeaderSearchApp.i18n.SEARCH_RESULTS_LOADING}
+    `(
+      'Search Results Description',
+      ({ username, showDropdown, search, loading, searchOptions, expectedDesc }) => {
+        describe(`search is "${search}", loading is ${loading}, and showSearchDropdown is ${showDropdown}`, () => {
+          beforeEach(() => {
+            window.gon.current_username = username;
+            createComponent(
+              {
+                search,
+                loading,
+              },
+              {
+                searchOptions: () => searchOptions,
+              },
+            );
+            findHeaderSearchInput().vm.$emit(showDropdown ? 'click' : '');
+          });
+
+          it(`sets description to ${expectedDesc}`, () => {
+            expect(findSearchResultsDescription().text()).toBe(expectedDesc);
+          });
+        });
+      },
+    );
+
+    describe('input box', () => {
+      describe.each`
+        search         | searchOptions                      | hasToken
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[1]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}
+        ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${true}
+        ${'te'}        | ${[MOCK_SCOPED_SEARCH_OPTIONS[5]]} | ${false}
+        ${'x'}         | ${[]}                              | ${false}
+      `('token', ({ search, searchOptions, hasToken }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent(
+            { search },
+            {
+              searchOptions: () => searchOptions,
+            },
+          );
+          findHeaderSearchInput().vm.$emit('click');
+        });
+
+        it(`${hasToken ? 'is' : 'is NOT'} rendered when data set has type "${
+          searchOptions[0]?.html_id
+        }"`, () => {
+          expect(findScopeToken().exists()).toBe(hasToken);
+        });
+
+        it(`text ${hasToken ? 'is correctly' : 'is NOT'} rendered when text is "${
+          searchOptions[0]?.scope || searchOptions[0]?.description
+        }"`, () => {
+          expect(findScopeToken().exists() && findScopeToken().text()).toBe(
+            formatScopeName(searchOptions[0]?.scope || searchOptions[0]?.description),
+          );
+        });
+      });
+    });
+
+    describe('form', () => {
+      describe.each`
+        searchContext               | search         | searchOptions                 | isFocused
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${null}        | ${[]}                         | ${true}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${[]}                         | ${true}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${true}
+        ${MOCK_SEARCH_CONTEXT_FULL} | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${false}
+        ${null}                     | ${MOCK_SEARCH} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${true}
+        ${null}                     | ${null}        | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${true}
+        ${null}                     | ${null}        | ${[]}                         | ${true}
+      `('wrapper', ({ searchContext, search, searchOptions, isFocused }) => {
+        beforeEach(() => {
+          window.gon.current_username = MOCK_USERNAME;
+          createComponent({ search, searchContext }, { searchOptions: () => searchOptions });
+          if (isFocused) {
+            findHeaderSearchInput().vm.$emit('click');
+          }
+        });
+
+        const isSearching = search?.length > SEARCH_SHORTCUTS_MIN_CHARACTERS;
+
+        it(`classes ${isSearching ? 'contain' : 'do not contain'} "${IS_SEARCHING}"`, () => {
+          if (isSearching) {
+            expect(findHeaderSearchForm().classes()).toContain(IS_SEARCHING);
+            return;
+          }
+          if (!isSearching) {
+            expect(findHeaderSearchForm().classes()).not.toContain(IS_SEARCHING);
+          }
+        });
+
+        it(`classes ${isSearching ? 'contain' : 'do not contain'} "${
+          isFocused ? IS_FOCUSED : IS_NOT_FOCUSED
+        }"`, () => {
+          expect(findHeaderSearchForm().classes()).toContain(
+            isFocused ? IS_FOCUSED : IS_NOT_FOCUSED,
+          );
+        });
+      });
+    });
+
+    describe.each`
+      search         | searchOptions                      | hasIcon  | iconName
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[0]]} | ${true}  | ${ICON_PROJECT}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[2]]} | ${true}  | ${ICON_GROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[3]]} | ${true}  | ${ICON_SUBGROUP}
+      ${MOCK_SEARCH} | ${[MOCK_SCOPED_SEARCH_OPTIONS[4]]} | ${false} | ${false}
+    `('token', ({ search, searchOptions, hasIcon, iconName }) => {
+      beforeEach(() => {
+        window.gon.current_username = MOCK_USERNAME;
+        createComponent(
+          { search },
+          {
+            searchOptions: () => searchOptions,
+          },
+        );
+        findHeaderSearchInput().vm.$emit('click');
+      });
+
+      it(`icon for data set type "${searchOptions[0]?.html_id}" ${
+        hasIcon ? 'is' : 'is NOT'
+      } rendered`, () => {
+        expect(findScopeToken().findComponent(GlIcon).exists()).toBe(hasIcon);
+      });
+
+      it(`render ${iconName ? `"${iconName}"` : 'NO'} icon for data set type "${
+        searchOptions[0]?.html_id
+      }"`, () => {
+        expect(
+          findScopeToken().findComponent(GlIcon).exists() &&
+            findScopeToken().findComponent(GlIcon).attributes('name'),
+        ).toBe(iconName);
+      });
+    });
+  });
+
+  describe('events', () => {
+    beforeEach(() => {
+      window.gon.current_username = MOCK_USERNAME;
+      createComponent();
+    });
+
+    describe('Header Search Input', () => {
+      describe('when dropdown is closed', () => {
+        let trackingSpy;
+
+        beforeEach(() => {
+          trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        });
+
+        it('onFocus opens dropdown and triggers snowplow event', async () => {
+          expect(findHeaderSearchDropdown().exists()).toBe(false);
+          findHeaderSearchInput().vm.$emit('focus');
+
+          await nextTick();
+
+          expect(findHeaderSearchDropdown().exists()).toBe(true);
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'focus_input', {
+            label: 'global_search',
+            property: 'navigation_top',
+          });
+        });
+
+        it('onClick opens dropdown and triggers snowplow event', async () => {
+          expect(findHeaderSearchDropdown().exists()).toBe(false);
+          findHeaderSearchInput().vm.$emit('click');
+
+          await nextTick();
+
+          expect(findHeaderSearchDropdown().exists()).toBe(true);
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'focus_input', {
+            label: 'global_search',
+            property: 'navigation_top',
+          });
+        });
+
+        it('onClick followed by onFocus only triggers a single snowplow event', async () => {
+          findHeaderSearchInput().vm.$emit('click');
+          findHeaderSearchInput().vm.$emit('focus');
+
+          expect(trackingSpy).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      describe('onInput', () => {
+        describe('when search has text', () => {
+          beforeEach(() => {
+            findHeaderSearchInput().vm.$emit('input', MOCK_SEARCH);
+          });
+
+          it('calls setSearch with search term', () => {
+            expect(actionSpies.setSearch).toHaveBeenCalledWith(expect.any(Object), MOCK_SEARCH);
+          });
+
+          it('calls fetchAutocompleteOptions', () => {
+            expect(actionSpies.fetchAutocompleteOptions).toHaveBeenCalled();
+          });
+
+          it('does not call clearAutocomplete', () => {
+            expect(actionSpies.clearAutocomplete).not.toHaveBeenCalled();
+          });
+        });
+
+        describe('when search is emptied', () => {
+          beforeEach(() => {
+            findHeaderSearchInput().vm.$emit('input', '');
+          });
+
+          it('calls setSearch with empty term', () => {
+            expect(actionSpies.setSearch).toHaveBeenCalledWith(expect.any(Object), '');
+          });
+
+          it('does not call fetchAutocompleteOptions', () => {
+            expect(actionSpies.fetchAutocompleteOptions).not.toHaveBeenCalled();
+          });
+
+          it('calls clearAutocomplete', () => {
+            expect(actionSpies.clearAutocomplete).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+
+    describe('Dropdown Keyboard Navigation', () => {
+      beforeEach(() => {
+        findHeaderSearchInput().vm.$emit('click');
+      });
+
+      it('closes dropdown when @tab is emitted', async () => {
+        expect(findHeaderSearchDropdown().exists()).toBe(true);
+        findDropdownKeyboardNavigation().vm.$emit('tab');
+
+        await nextTick();
+
+        expect(findHeaderSearchDropdown().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe.each`
+      MOCK_INDEX          | search
+      ${1}                | ${null}
+      ${SEARCH_BOX_INDEX} | ${'test'}
+      ${2}                | ${'test1'}
+    `('currentFocusedOption', ({ MOCK_INDEX, search }) => {
+      beforeEach(() => {
+        window.gon.current_username = MOCK_USERNAME;
+        createComponent({ search });
+        findHeaderSearchInput().vm.$emit('click');
+      });
+
+      it(`when currentFocusIndex changes to ${MOCK_INDEX} updates the data to searchOptions[${MOCK_INDEX}]`, () => {
+        findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
+        expect(wrapper.vm.currentFocusedOption).toBe(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX]);
+      });
+    });
+  });
+
+  describe('Submitting a search', () => {
+    describe('with no currentFocusedOption', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('onKey-enter submits a search', () => {
+        findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+
+        expect(visitUrl).toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
+      });
+    });
+
+    describe('with less than min characters and no dropdown results', () => {
+      beforeEach(() => {
+        createComponent({ search: 'x' });
+      });
+
+      it('onKey-enter will NOT submit a search', () => {
+        findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+
+        expect(visitUrl).not.toHaveBeenCalledWith(MOCK_SEARCH_QUERY);
+      });
+    });
+
+    describe('with currentFocusedOption', () => {
+      const MOCK_INDEX = 1;
+
+      beforeEach(() => {
+        window.gon.current_username = MOCK_USERNAME;
+        createComponent();
+        findHeaderSearchInput().vm.$emit('click');
+      });
+
+      it('onKey-enter clicks the selected dropdown item rather than submitting a search', () => {
+        findDropdownKeyboardNavigation().vm.$emit('change', MOCK_INDEX);
+
+        findHeaderSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY }));
+        expect(visitUrl).toHaveBeenCalledWith(MOCK_DEFAULT_SEARCH_OPTIONS[MOCK_INDEX].url);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/mock_data.js b/spec/frontend/super_sidebar/components/global_search/mock_data.js
new file mode 100644
index 00000000000..58e578e4c4c
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/mock_data.js
@@ -0,0 +1,404 @@
+import {
+  ICON_PROJECT,
+  ICON_GROUP,
+  ICON_SUBGROUP,
+} from '~/super_sidebar/components/global_search/constants';
+import {
+  PROJECTS_CATEGORY,
+  GROUPS_CATEGORY,
+  MSG_ISSUES_ASSIGNED_TO_ME,
+  MSG_ISSUES_IVE_CREATED,
+  MSG_MR_ASSIGNED_TO_ME,
+  MSG_MR_IM_REVIEWER,
+  MSG_MR_IVE_CREATED,
+  MSG_IN_ALL_GITLAB,
+} from '~/vue_shared/global_search/constants';
+
+export const MOCK_USERNAME = 'anyone';
+
+export const MOCK_SEARCH_PATH = '/search';
+
+export const MOCK_ISSUE_PATH = '/dashboard/issues';
+
+export const MOCK_MR_PATH = '/dashboard/merge_requests';
+
+export const MOCK_ALL_PATH = '/';
+
+export const MOCK_AUTOCOMPLETE_PATH = '/autocomplete';
+
+export const MOCK_PROJECT = {
+  id: 123,
+  name: 'MockProject',
+  path: '/mock-project',
+};
+
+export const MOCK_PROJECT_LONG = {
+  id: 124,
+  name: 'Mock Project Name That Is Ridiculously Long And It Goes Forever',
+  path: '/mock-project-name-that-is-ridiculously-long-and-it-goes-forever',
+};
+
+export const MOCK_GROUP = {
+  id: 321,
+  name: 'MockGroup',
+  path: '/mock-group',
+};
+
+export const MOCK_SUBGROUP = {
+  id: 322,
+  name: 'MockSubGroup',
+  path: `${MOCK_GROUP}/mock-subgroup`,
+};
+
+export const MOCK_SEARCH_QUERY = 'http://gitlab.com/search?search=test';
+
+export const MOCK_SEARCH = 'test';
+
+export const MOCK_SEARCH_CONTEXT = {
+  project: null,
+  project_metadata: {},
+  group: null,
+  group_metadata: {},
+};
+
+export const MOCK_SEARCH_CONTEXT_FULL = {
+  group: {
+    id: 31,
+    name: 'testGroup',
+    full_name: 'testGroup',
+  },
+  group_metadata: {
+    group_path: 'testGroup',
+    name: 'testGroup',
+    issues_path: '/groups/testGroup/-/issues',
+    mr_path: '/groups/testGroup/-/merge_requests',
+  },
+};
+
+export const MOCK_DEFAULT_SEARCH_OPTIONS = [
+  {
+    html_id: 'default-issues-assigned',
+    title: MSG_ISSUES_ASSIGNED_TO_ME,
+    url: `${MOCK_ISSUE_PATH}/?assignee_username=${MOCK_USERNAME}`,
+  },
+  {
+    html_id: 'default-issues-created',
+    title: MSG_ISSUES_IVE_CREATED,
+    url: `${MOCK_ISSUE_PATH}/?author_username=${MOCK_USERNAME}`,
+  },
+  {
+    html_id: 'default-mrs-assigned',
+    title: MSG_MR_ASSIGNED_TO_ME,
+    url: `${MOCK_MR_PATH}/?assignee_username=${MOCK_USERNAME}`,
+  },
+  {
+    html_id: 'default-mrs-reviewer',
+    title: MSG_MR_IM_REVIEWER,
+    url: `${MOCK_MR_PATH}/?reviewer_username=${MOCK_USERNAME}`,
+  },
+  {
+    html_id: 'default-mrs-created',
+    title: MSG_MR_IVE_CREATED,
+    url: `${MOCK_MR_PATH}/?author_username=${MOCK_USERNAME}`,
+  },
+];
+
+export const MOCK_SCOPED_SEARCH_OPTIONS = [
+  {
+    html_id: 'scoped-in-project',
+    scope: MOCK_PROJECT.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT.path,
+  },
+  {
+    html_id: 'scoped-in-project-long',
+    scope: MOCK_PROJECT_LONG.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT_LONG.path,
+  },
+  {
+    html_id: 'scoped-in-group',
+    scope: MOCK_GROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
+    url: MOCK_GROUP.path,
+  },
+  {
+    html_id: 'scoped-in-subgroup',
+    scope: MOCK_SUBGROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_SUBGROUP,
+    url: MOCK_SUBGROUP.path,
+  },
+  {
+    html_id: 'scoped-in-all',
+    description: MSG_IN_ALL_GITLAB,
+    url: MOCK_ALL_PATH,
+  },
+];
+
+export const MOCK_SCOPED_SEARCH_OPTIONS_DEF = [
+  {
+    html_id: 'scoped-in-project',
+    scope: MOCK_PROJECT.name,
+    scopeCategory: PROJECTS_CATEGORY,
+    icon: ICON_PROJECT,
+    url: MOCK_PROJECT.path,
+  },
+  {
+    html_id: 'scoped-in-group',
+    scope: MOCK_GROUP.name,
+    scopeCategory: GROUPS_CATEGORY,
+    icon: ICON_GROUP,
+    url: MOCK_GROUP.path,
+  },
+  {
+    html_id: 'scoped-in-all',
+    description: MSG_IN_ALL_GITLAB,
+    url: MOCK_ALL_PATH,
+  },
+];
+
+export const MOCK_AUTOCOMPLETE_OPTIONS_RES = [
+  {
+    category: 'Projects',
+    id: 1,
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
+    url: 'project/1',
+  },
+  {
+    category: 'Groups',
+    id: 1,
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
+    url: 'group/1',
+  },
+  {
+    category: 'Projects',
+    id: 2,
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
+    url: 'project/2',
+  },
+  {
+    category: 'Help',
+    label: 'GitLab Help',
+    url: 'help/gitlab',
+  },
+];
+
+export const MOCK_AUTOCOMPLETE_OPTIONS = [
+  {
+    category: 'Projects',
+    html_id: 'autocomplete-Projects-0',
+    id: 1,
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
+    url: 'project/1',
+  },
+  {
+    category: 'Groups',
+    html_id: 'autocomplete-Groups-1',
+    id: 1,
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
+    url: 'group/1',
+  },
+  {
+    category: 'Projects',
+    html_id: 'autocomplete-Projects-2',
+    id: 2,
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
+    url: 'project/2',
+  },
+  {
+    category: 'Help',
+    html_id: 'autocomplete-Help-3',
+    label: 'GitLab Help',
+    url: 'help/gitlab',
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS = [
+  {
+    category: 'Groups',
+    data: [
+      {
+        category: 'Groups',
+        html_id: 'autocomplete-Groups-1',
+
+        id: 1,
+        label: 'Gitlab Org / MockGroup1',
+        value: 'MockGroup1',
+        url: 'group/1',
+      },
+    ],
+  },
+  {
+    category: 'Projects',
+    data: [
+      {
+        category: 'Projects',
+        html_id: 'autocomplete-Projects-0',
+
+        id: 1,
+        label: 'Gitlab Org / MockProject1',
+        value: 'MockProject1',
+        url: 'project/1',
+      },
+      {
+        category: 'Projects',
+        html_id: 'autocomplete-Projects-2',
+
+        id: 2,
+        label: 'Gitlab Org / MockProject2',
+        value: 'MockProject2',
+        url: 'project/2',
+      },
+    ],
+  },
+  {
+    category: 'Help',
+    data: [
+      {
+        category: 'Help',
+        html_id: 'autocomplete-Help-3',
+
+        label: 'GitLab Help',
+        url: 'help/gitlab',
+      },
+    ],
+  },
+];
+
+export const MOCK_SORTED_AUTOCOMPLETE_OPTIONS = [
+  {
+    category: 'Groups',
+    html_id: 'autocomplete-Groups-1',
+    id: 1,
+    label: 'Gitlab Org / MockGroup1',
+    value: 'MockGroup1',
+    url: 'group/1',
+  },
+  {
+    category: 'Projects',
+    html_id: 'autocomplete-Projects-0',
+    id: 1,
+    label: 'Gitlab Org / MockProject1',
+    value: 'MockProject1',
+    url: 'project/1',
+  },
+  {
+    category: 'Projects',
+    html_id: 'autocomplete-Projects-2',
+    id: 2,
+    label: 'Gitlab Org / MockProject2',
+    value: 'MockProject2',
+    url: 'project/2',
+  },
+  {
+    category: 'Help',
+    html_id: 'autocomplete-Help-3',
+    label: 'GitLab Help',
+    url: 'help/gitlab',
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_HELP = [
+  {
+    category: 'Help',
+    data: [
+      {
+        html_id: 'autocomplete-Help-1',
+        category: 'Help',
+        label: 'Rake Tasks Help',
+        url: '/help/raketasks/index',
+      },
+      {
+        html_id: 'autocomplete-Help-2',
+        category: 'Help',
+        label: 'System Hooks Help',
+        url: '/help/system_hooks/system_hooks',
+      },
+    ],
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_SETTINGS_HELP = [
+  {
+    category: 'Settings',
+    data: [
+      {
+        html_id: 'autocomplete-Settings-0',
+        category: 'Settings',
+        label: 'User settings',
+        url: '/-/profile',
+      },
+      {
+        html_id: 'autocomplete-Settings-3',
+        category: 'Settings',
+        label: 'Admin Section',
+        url: '/admin',
+      },
+    ],
+  },
+  {
+    category: 'Help',
+    data: [
+      {
+        html_id: 'autocomplete-Help-1',
+        category: 'Help',
+        label: 'Rake Tasks Help',
+        url: '/help/raketasks/index',
+      },
+      {
+        html_id: 'autocomplete-Help-2',
+        category: 'Help',
+        label: 'System Hooks Help',
+        url: '/help/system_hooks/system_hooks',
+      },
+    ],
+  },
+];
+
+export const MOCK_GROUPED_AUTOCOMPLETE_OPTIONS_2 = [
+  {
+    category: 'Groups',
+    data: [
+      {
+        html_id: 'autocomplete-Groups-0',
+        category: 'Groups',
+        id: 148,
+        label: 'Jashkenas / Test Subgroup / test-subgroup',
+        url: '/jashkenas/test-subgroup/test-subgroup',
+        avatar_url: '',
+      },
+      {
+        html_id: 'autocomplete-Groups-1',
+        category: 'Groups',
+        id: 147,
+        label: 'Jashkenas / Test Subgroup',
+        url: '/jashkenas/test-subgroup',
+        avatar_url: '',
+      },
+    ],
+  },
+  {
+    category: 'Projects',
+    data: [
+      {
+        html_id: 'autocomplete-Projects-2',
+        category: 'Projects',
+        id: 1,
+        value: 'Gitlab Test',
+        label: 'Gitlab Org / Gitlab Test',
+        url: '/gitlab-org/gitlab-test',
+        avatar_url: '/uploads/-/system/project/avatar/1/icons8-gitlab-512.png',
+      },
+    ],
+  },
+];
diff --git a/spec/frontend/super_sidebar/components/global_search/store/actions_spec.js b/spec/frontend/super_sidebar/components/global_search/store/actions_spec.js
new file mode 100644
index 00000000000..c87b4513309
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/store/actions_spec.js
@@ -0,0 +1,113 @@
+import MockAdapter from 'axios-mock-adapter';
+import testAction from 'helpers/vuex_action_helper';
+import * as actions from '~/super_sidebar/components/global_search/store/actions';
+import * as types from '~/super_sidebar/components/global_search/store/mutation_types';
+import initState from '~/super_sidebar/components/global_search/store/state';
+import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import {
+  MOCK_SEARCH,
+  MOCK_AUTOCOMPLETE_OPTIONS_RES,
+  MOCK_AUTOCOMPLETE_PATH,
+  MOCK_PROJECT,
+  MOCK_SEARCH_CONTEXT,
+  MOCK_SEARCH_PATH,
+  MOCK_MR_PATH,
+  MOCK_ISSUE_PATH,
+} from '../mock_data';
+
+jest.mock('~/alert');
+
+describe('Header Search Store Actions', () => {
+  let state;
+  let mock;
+
+  const createState = (initialState) =>
+    initState({
+      searchPath: MOCK_SEARCH_PATH,
+      issuesPath: MOCK_ISSUE_PATH,
+      mrPath: MOCK_MR_PATH,
+      autocompletePath: MOCK_AUTOCOMPLETE_PATH,
+      searchContext: MOCK_SEARCH_CONTEXT,
+      ...initialState,
+    });
+
+  afterEach(() => {
+    state = null;
+    mock.restore();
+  });
+
+  describe.each`
+    axiosMock                                                                        | type         | expectedMutations
+    ${{ method: 'onGet', code: HTTP_STATUS_OK, res: MOCK_AUTOCOMPLETE_OPTIONS_RES }} | ${'success'} | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }, { type: types.RECEIVE_AUTOCOMPLETE_SUCCESS, payload: MOCK_AUTOCOMPLETE_OPTIONS_RES }]}
+    ${{ method: 'onGet', code: HTTP_STATUS_INTERNAL_SERVER_ERROR, res: null }}       | ${'error'}   | ${[{ type: types.REQUEST_AUTOCOMPLETE }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }, { type: types.RECEIVE_AUTOCOMPLETE_ERROR }]}
+  `('fetchAutocompleteOptions', ({ axiosMock, type, expectedMutations }) => {
+    describe(`on ${type}`, () => {
+      beforeEach(() => {
+        state = createState({});
+        mock = new MockAdapter(axios);
+        mock[axiosMock.method]().reply(axiosMock.code, axiosMock.res);
+      });
+      it(`should dispatch the correct mutations`, () => {
+        return testAction({
+          action: actions.fetchAutocompleteOptions,
+          state,
+          expectedMutations,
+        });
+      });
+    });
+  });
+
+  describe.each`
+    project         | ref                | fetchType    | expectedPath
+    ${null}         | ${null}            | ${null}      | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}`}
+    ${MOCK_PROJECT} | ${null}            | ${'generic'} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}&filter=generic`}
+    ${null}         | ${MOCK_PROJECT.id} | ${'generic'} | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_ref=${MOCK_PROJECT.id}&filter=generic`}
+    ${MOCK_PROJECT} | ${MOCK_PROJECT.id} | ${'search'}  | ${`${MOCK_AUTOCOMPLETE_PATH}?term=${MOCK_SEARCH}&project_id=${MOCK_PROJECT.id}&project_ref=${MOCK_PROJECT.id}&filter=search`}
+  `('autocompleteQuery', ({ project, ref, fetchType, expectedPath }) => {
+    describe(`when project is ${project?.name} and project ref is ${ref}`, () => {
+      beforeEach(() => {
+        state = createState({
+          search: MOCK_SEARCH,
+          searchContext: {
+            project,
+            ref,
+          },
+        });
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(actions.autocompleteQuery({ state, fetchType })).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe('clearAutocomplete', () => {
+    beforeEach(() => {
+      state = createState({});
+    });
+
+    it('calls the CLEAR_AUTOCOMPLETE mutation', () => {
+      return testAction({
+        action: actions.clearAutocomplete,
+        state,
+        expectedMutations: [{ type: types.CLEAR_AUTOCOMPLETE }],
+      });
+    });
+  });
+
+  describe('setSearch', () => {
+    beforeEach(() => {
+      state = createState({});
+    });
+
+    it('calls the SET_SEARCH mutation', () => {
+      return testAction({
+        action: actions.setSearch,
+        payload: MOCK_SEARCH,
+        state,
+        expectedMutations: [{ type: types.SET_SEARCH, payload: MOCK_SEARCH }],
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/store/getters_spec.js b/spec/frontend/super_sidebar/components/global_search/store/getters_spec.js
new file mode 100644
index 00000000000..dca96da01a7
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/store/getters_spec.js
@@ -0,0 +1,333 @@
+import * as getters from '~/super_sidebar/components/global_search/store/getters';
+import initState from '~/super_sidebar/components/global_search/store/state';
+import {
+  MOCK_USERNAME,
+  MOCK_SEARCH_PATH,
+  MOCK_ISSUE_PATH,
+  MOCK_MR_PATH,
+  MOCK_AUTOCOMPLETE_PATH,
+  MOCK_SEARCH_CONTEXT,
+  MOCK_DEFAULT_SEARCH_OPTIONS,
+  MOCK_SCOPED_SEARCH_OPTIONS,
+  MOCK_SCOPED_SEARCH_OPTIONS_DEF,
+  MOCK_PROJECT,
+  MOCK_GROUP,
+  MOCK_ALL_PATH,
+  MOCK_SEARCH,
+  MOCK_AUTOCOMPLETE_OPTIONS,
+  MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+  MOCK_SORTED_AUTOCOMPLETE_OPTIONS,
+} from '../mock_data';
+
+describe('Header Search Store Getters', () => {
+  let state;
+
+  const createState = (initialState) => {
+    state = initState({
+      searchPath: MOCK_SEARCH_PATH,
+      issuesPath: MOCK_ISSUE_PATH,
+      mrPath: MOCK_MR_PATH,
+      autocompletePath: MOCK_AUTOCOMPLETE_PATH,
+      searchContext: MOCK_SEARCH_CONTEXT,
+      ...initialState,
+    });
+  };
+
+  afterEach(() => {
+    state = null;
+  });
+
+  describe.each`
+    group         | project         | scope       | forSnippets | codeSearch | ref              | expectedPath
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${null}       | ${null}         | ${null}     | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&snippets=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&search_code=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&repository_ref=test-branch`}
+    ${MOCK_GROUP} | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}`}
+    ${null}       | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true&repository_ref=test-branch`}
+  `('searchQuery', ({ group, project, scope, forSnippets, codeSearch, ref, expectedPath }) => {
+    describe(`when group is ${group?.name}, project is ${project?.name}, scope is ${scope}, for_snippets is ${forSnippets}, code_search is ${codeSearch}, and ref is ${ref}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            project,
+            scope,
+            for_snippets: forSnippets,
+            code_search: codeSearch,
+            ref,
+          },
+        });
+        state.search = MOCK_SEARCH;
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.searchQuery(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe.each`
+    group                     | group_metadata                   | project                     | project_metadata                   | expectedPath
+    ${null}                   | ${null}                          | ${null}                     | ${null}                            | ${MOCK_ISSUE_PATH}
+    ${{ name: 'Test Group' }} | ${{ issues_path: 'group/path' }} | ${null}                     | ${null}                            | ${'group/path'}
+    ${{ name: 'Test Group' }} | ${{ issues_path: 'group/path' }} | ${{ name: 'Test Project' }} | ${{ issues_path: 'project/path' }} | ${'project/path'}
+  `('scopedIssuesPath', ({ group, group_metadata, project, project_metadata, expectedPath }) => {
+    describe(`when group is ${group?.name} and project is ${project?.name}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            group_metadata,
+            project,
+            project_metadata,
+          },
+        });
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.scopedIssuesPath(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe.each`
+    group                     | group_metadata               | project                     | project_metadata               | expectedPath
+    ${null}                   | ${null}                      | ${null}                     | ${null}                        | ${MOCK_MR_PATH}
+    ${{ name: 'Test Group' }} | ${{ mr_path: 'group/path' }} | ${null}                     | ${null}                        | ${'group/path'}
+    ${{ name: 'Test Group' }} | ${{ mr_path: 'group/path' }} | ${{ name: 'Test Project' }} | ${{ mr_path: 'project/path' }} | ${'project/path'}
+  `('scopedMRPath', ({ group, group_metadata, project, project_metadata, expectedPath }) => {
+    describe(`when group is ${group?.name} and project is ${project?.name}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            group_metadata,
+            project,
+            project_metadata,
+          },
+        });
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.scopedMRPath(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe.each`
+    group         | project         | scope       | forSnippets | codeSearch | ref              | expectedPath
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${null}       | ${null}         | ${null}     | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&snippets=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&search_code=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&repository_ref=test-branch`}
+    ${MOCK_GROUP} | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}`}
+    ${null}       | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&project_id=${MOCK_PROJECT.id}&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true&repository_ref=test-branch`}
+  `('projectUrl', ({ group, project, scope, forSnippets, codeSearch, ref, expectedPath }) => {
+    describe(`when group is ${group?.name}, project is ${project?.name}, scope is ${scope}, for_snippets is ${forSnippets}, code_search is ${codeSearch}, and ref is ${ref}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            project,
+            scope,
+            for_snippets: forSnippets,
+            code_search: codeSearch,
+            ref,
+          },
+        });
+        state.search = MOCK_SEARCH;
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.projectUrl(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe.each`
+    group         | project         | scope       | forSnippets | codeSearch | ref              | expectedPath
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${null}       | ${null}         | ${null}     | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&snippets=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&search_code=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&repository_ref=test-branch`}
+    ${MOCK_GROUP} | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}`}
+    ${null}       | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}&scope=issues`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&group_id=${MOCK_GROUP.id}&scope=issues&snippets=true&search_code=true&repository_ref=test-branch`}
+  `('groupUrl', ({ group, project, scope, forSnippets, codeSearch, ref, expectedPath }) => {
+    describe(`when group is ${group?.name}, project is ${project?.name}, scope is ${scope}, for_snippets is ${forSnippets}, code_search is ${codeSearch}, and ref is ${ref}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            project,
+            scope,
+            for_snippets: forSnippets,
+            code_search: codeSearch,
+            ref,
+          },
+        });
+        state.search = MOCK_SEARCH;
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.groupUrl(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe.each`
+    group         | project         | scope       | forSnippets | codeSearch | ref              | expectedPath
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${null}       | ${null}         | ${null}     | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&snippets=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&search_code=true`}
+    ${null}       | ${null}         | ${null}     | ${false}    | ${false}   | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&repository_ref=test-branch`}
+    ${MOCK_GROUP} | ${null}         | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${null}       | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${null}     | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${false}    | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&scope=issues`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${false}   | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&scope=issues&snippets=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${null}          | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&scope=issues&snippets=true&search_code=true`}
+    ${MOCK_GROUP} | ${MOCK_PROJECT} | ${'issues'} | ${true}     | ${true}    | ${'test-branch'} | ${`${MOCK_SEARCH_PATH}?search=${MOCK_SEARCH}&nav_source=navbar&scope=issues&snippets=true&search_code=true&repository_ref=test-branch`}
+  `('allUrl', ({ group, project, scope, forSnippets, codeSearch, ref, expectedPath }) => {
+    describe(`when group is ${group?.name}, project is ${project?.name}, scope is ${scope}, for_snippets is ${forSnippets}, code_search is ${codeSearch}, and ref is ${ref}`, () => {
+      beforeEach(() => {
+        createState({
+          searchContext: {
+            group,
+            project,
+            scope,
+            for_snippets: forSnippets,
+            code_search: codeSearch,
+            ref,
+          },
+        });
+        state.search = MOCK_SEARCH;
+      });
+
+      it(`should return ${expectedPath}`, () => {
+        expect(getters.allUrl(state)).toBe(expectedPath);
+      });
+    });
+  });
+
+  describe('defaultSearchOptions', () => {
+    const mockGetters = {
+      scopedIssuesPath: MOCK_ISSUE_PATH,
+      scopedMRPath: MOCK_MR_PATH,
+    };
+
+    beforeEach(() => {
+      createState();
+      window.gon.current_username = MOCK_USERNAME;
+    });
+
+    it('returns the correct array', () => {
+      expect(getters.defaultSearchOptions(state, mockGetters)).toStrictEqual(
+        MOCK_DEFAULT_SEARCH_OPTIONS,
+      );
+    });
+
+    it('returns the correct array if issues path is false', () => {
+      mockGetters.scopedIssuesPath = undefined;
+      expect(getters.defaultSearchOptions(state, mockGetters)).toStrictEqual(
+        MOCK_DEFAULT_SEARCH_OPTIONS.slice(2, MOCK_DEFAULT_SEARCH_OPTIONS.length),
+      );
+    });
+  });
+
+  describe('scopedSearchOptions', () => {
+    const mockGetters = {
+      projectUrl: MOCK_PROJECT.path,
+      groupUrl: MOCK_GROUP.path,
+      allUrl: MOCK_ALL_PATH,
+    };
+
+    beforeEach(() => {
+      createState({
+        searchContext: {
+          project: MOCK_PROJECT,
+          group: MOCK_GROUP,
+        },
+      });
+    });
+
+    it('returns the correct array', () => {
+      expect(getters.scopedSearchOptions(state, mockGetters)).toStrictEqual(
+        MOCK_SCOPED_SEARCH_OPTIONS_DEF,
+      );
+    });
+  });
+
+  describe('autocompleteGroupedSearchOptions', () => {
+    beforeEach(() => {
+      createState();
+      state.autocompleteOptions = MOCK_AUTOCOMPLETE_OPTIONS;
+    });
+
+    it('returns the correct grouped array', () => {
+      expect(getters.autocompleteGroupedSearchOptions(state)).toStrictEqual(
+        MOCK_GROUPED_AUTOCOMPLETE_OPTIONS,
+      );
+    });
+  });
+
+  describe.each`
+    search         | defaultSearchOptions           | scopedSearchOptions           | autocompleteGroupedSearchOptions     | expectedArray
+    ${null}        | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_DEFAULT_SEARCH_OPTIONS}
+    ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${[]}                                | ${MOCK_SCOPED_SEARCH_OPTIONS}
+    ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${MOCK_SEARCH} | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
+    ${1}           | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'('}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${[]}                         | ${[]}                                | ${[]}
+    ${'t'}         | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'te'}        | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SORTED_AUTOCOMPLETE_OPTIONS}
+    ${'tes'}       | ${MOCK_DEFAULT_SEARCH_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS} | ${MOCK_GROUPED_AUTOCOMPLETE_OPTIONS} | ${MOCK_SCOPED_SEARCH_OPTIONS.concat(MOCK_SORTED_AUTOCOMPLETE_OPTIONS)}
+  `(
+    'searchOptions',
+    ({
+      search,
+      defaultSearchOptions,
+      scopedSearchOptions,
+      autocompleteGroupedSearchOptions,
+      expectedArray,
+    }) => {
+      describe(`when search is ${search} and the defaultSearchOptions${
+        defaultSearchOptions.length ? '' : ' do not'
+      } exist, scopedSearchOptions${
+        scopedSearchOptions.length ? '' : ' do not'
+      } exist, and autocompleteGroupedSearchOptions${
+        autocompleteGroupedSearchOptions.length ? '' : ' do not'
+      } exist`, () => {
+        const mockGetters = {
+          defaultSearchOptions,
+          scopedSearchOptions,
+          autocompleteGroupedSearchOptions,
+        };
+
+        beforeEach(() => {
+          createState();
+          state.search = search;
+        });
+
+        it(`should return the correct combined array`, () => {
+          expect(getters.searchOptions(state, mockGetters)).toStrictEqual(expectedArray);
+        });
+      });
+    },
+  );
+});
diff --git a/spec/frontend/super_sidebar/components/global_search/store/mutations_spec.js b/spec/frontend/super_sidebar/components/global_search/store/mutations_spec.js
new file mode 100644
index 00000000000..d2dc484e825
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/global_search/store/mutations_spec.js
@@ -0,0 +1,63 @@
+import * as types from '~/super_sidebar/components/global_search/store/mutation_types';
+import mutations from '~/super_sidebar/components/global_search/store/mutations';
+import createState from '~/super_sidebar/components/global_search/store/state';
+import {
+  MOCK_SEARCH,
+  MOCK_AUTOCOMPLETE_OPTIONS_RES,
+  MOCK_AUTOCOMPLETE_OPTIONS,
+} from '../mock_data';
+
+describe('Header Search Store Mutations', () => {
+  let state;
+
+  beforeEach(() => {
+    state = createState({});
+  });
+
+  describe('REQUEST_AUTOCOMPLETE', () => {
+    it('sets loading to true and empties autocompleteOptions array', () => {
+      mutations[types.REQUEST_AUTOCOMPLETE](state);
+
+      expect(state.loading).toBe(true);
+      expect(state.autocompleteOptions).toStrictEqual([]);
+      expect(state.autocompleteError).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_AUTOCOMPLETE_SUCCESS', () => {
+    it('sets loading to false and then formats and sets the autocompleteOptions array', () => {
+      mutations[types.RECEIVE_AUTOCOMPLETE_SUCCESS](state, MOCK_AUTOCOMPLETE_OPTIONS_RES);
+
+      expect(state.loading).toBe(false);
+      expect(state.autocompleteOptions).toStrictEqual(MOCK_AUTOCOMPLETE_OPTIONS);
+      expect(state.autocompleteError).toBe(false);
+    });
+  });
+
+  describe('RECEIVE_AUTOCOMPLETE_ERROR', () => {
+    it('sets loading to false and empties autocompleteOptions array', () => {
+      mutations[types.RECEIVE_AUTOCOMPLETE_ERROR](state);
+
+      expect(state.loading).toBe(false);
+      expect(state.autocompleteOptions).toStrictEqual([]);
+      expect(state.autocompleteError).toBe(true);
+    });
+  });
+
+  describe('CLEAR_AUTOCOMPLETE', () => {
+    it('empties autocompleteOptions array', () => {
+      mutations[types.CLEAR_AUTOCOMPLETE](state);
+
+      expect(state.autocompleteOptions).toStrictEqual([]);
+      expect(state.autocompleteError).toBe(false);
+    });
+  });
+
+  describe('SET_SEARCH', () => {
+    it('sets search to value', () => {
+      mutations[types.SET_SEARCH](state, MOCK_SEARCH);
+
+      expect(state.search).toBe(MOCK_SEARCH);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/groups_list_spec.js b/spec/frontend/super_sidebar/components/groups_list_spec.js
new file mode 100644
index 00000000000..6aee895f611
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/groups_list_spec.js
@@ -0,0 +1,87 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import GroupsList from '~/super_sidebar/components/groups_list.vue';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { MAX_FREQUENT_GROUPS_COUNT } from '~/super_sidebar/constants';
+
+const username = 'root';
+const viewAllLink = '/path/to/groups';
+const storageKey = `${username}/frequent-groups`;
+
+describe('GroupsList component', () => {
+  let wrapper;
+
+  const findSearchResults = () => wrapper.findComponent(SearchResults);
+  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
+  const findViewAllLink = () => wrapper.findComponent(NavItem);
+
+  const itRendersViewAllItem = () => {
+    it('renders the "View all..." item', () => {
+      expect(findViewAllLink().props('item')).toEqual({
+        icon: 'group',
+        link: viewAllLink,
+        title: s__('Navigation|View all groups'),
+      });
+    });
+  };
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(GroupsList, {
+      propsData: {
+        username,
+        viewAllLink,
+        ...props,
+      },
+    });
+  };
+
+  describe('when displaying search results', () => {
+    const searchResults = ['A search result'];
+
+    beforeEach(() => {
+      createWrapper({
+        isSearch: true,
+        searchResults,
+      });
+    });
+
+    it('renders the search results component', () => {
+      expect(findSearchResults().exists()).toBe(true);
+      expect(findFrequentItemsList().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the search results component', () => {
+      expect(findSearchResults().props()).toEqual({
+        title: s__('Navigation|Groups'),
+        noResultsText: s__('Navigation|No group matches found'),
+        searchResults,
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+
+  describe('when displaying frequent groups', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('renders the frequent items list', () => {
+      expect(findFrequentItemsList().exists()).toBe(true);
+      expect(findSearchResults().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the frequent items list', () => {
+      expect(findFrequentItemsList().props()).toEqual({
+        title: s__('Navigation|Frequent groups'),
+        storageKey,
+        maxItems: MAX_FREQUENT_GROUPS_COUNT,
+        pristineText: s__('Navigation|Groups you visit often will appear here.'),
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/help_center_spec.js b/spec/frontend/super_sidebar/components/help_center_spec.js
index bc847a3e159..1d072c0ba3c 100644
--- a/spec/frontend/super_sidebar/components/help_center_spec.js
+++ b/spec/frontend/super_sidebar/components/help_center_spec.js
@@ -68,18 +68,23 @@ describe('HelpCenter component', () => {
     });
 
     describe('showKeyboardShortcuts', () => {
+      let button;
+
       beforeEach(() => {
         jest.spyOn(wrapper.vm.$refs.dropdown, 'close');
-        window.toggleShortcutsHelp = jest.fn();
-        findButton('Keyboard shortcuts ?').click();
+
+        button = findButton('Keyboard shortcuts ?');
       });
 
       it('closes the dropdown', () => {
+        button.click();
         expect(wrapper.vm.$refs.dropdown.close).toHaveBeenCalled();
       });
 
       it('shows the keyboard shortcuts modal', () => {
-        expect(window.toggleShortcutsHelp).toHaveBeenCalled();
+        // This relies on the event delegation set up by the Shortcuts class in
+        // ~/behaviors/shortcuts/shortcuts.js.
+        expect(button.classList.contains('js-shortcuts-modal-trigger')).toBe(true);
       });
     });
 
diff --git a/spec/frontend/super_sidebar/components/items_list_spec.js b/spec/frontend/super_sidebar/components/items_list_spec.js
new file mode 100644
index 00000000000..8e00984f500
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/items_list_spec.js
@@ -0,0 +1,63 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { cachedFrequentProjects } from '../mock_data';
+
+const mockItems = JSON.parse(cachedFrequentProjects);
+const [firstMockedProject] = mockItems;
+
+describe('ItemsList component', () => {
+  let wrapper;
+
+  const findNavItems = () => wrapper.findAllComponents(NavItem);
+
+  const createWrapper = ({ props = {}, slots = {} } = {}) => {
+    wrapper = shallowMountExtended(ItemsList, {
+      propsData: {
+        ...props,
+      },
+      slots,
+    });
+  };
+
+  it('does not render nav items when there are no items', () => {
+    createWrapper();
+
+    expect(findNavItems().length).toBe(0);
+  });
+
+  it('renders one nav item per item', () => {
+    createWrapper({
+      props: {
+        items: mockItems,
+      },
+    });
+
+    expect(findNavItems().length).not.toBe(0);
+    expect(findNavItems().length).toBe(mockItems.length);
+  });
+
+  it('passes the correct props to the nav items', () => {
+    createWrapper({
+      props: {
+        items: mockItems,
+      },
+    });
+    const firstNavItem = findNavItems().at(0);
+
+    expect(firstNavItem.props('item')).toEqual(firstMockedProject);
+  });
+
+  it('renders the `view-all-items` slot', () => {
+    const testId = 'view-all-items';
+    createWrapper({
+      slots: {
+        'view-all-items': {
+          template: `<div data-testid="${testId}" />`,
+        },
+      },
+    });
+
+    expect(wrapper.findByTestId(testId).exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/nav_item_spec.js b/spec/frontend/super_sidebar/components/nav_item_spec.js
new file mode 100644
index 00000000000..22989c1a5f9
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/nav_item_spec.js
@@ -0,0 +1,49 @@
+import { GlBadge } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+
+describe('NavItem component', () => {
+  let wrapper;
+
+  const findLink = () => wrapper.findByTestId('nav-item-link');
+  const findPill = () => wrapper.findComponent(GlBadge);
+  const createWrapper = (item, props = {}) => {
+    wrapper = shallowMountExtended(NavItem, {
+      propsData: {
+        item,
+        ...props,
+      },
+    });
+  };
+
+  describe('pills', () => {
+    it.each([0, 5, 3.4, 'foo', '10%'])('item with pill_data `%p` renders a pill', (pillCount) => {
+      createWrapper({ title: 'Foo', pill_count: pillCount });
+
+      expect(findPill().text()).toEqual(pillCount.toString());
+    });
+
+    it.each([null, undefined, false, true, '', NaN, Number.POSITIVE_INFINITY])(
+      'item with pill_data `%p` renders no pill',
+      (pillCount) => {
+        createWrapper({ title: 'Foo', pill_count: pillCount });
+
+        expect(findPill().exists()).toEqual(false);
+      },
+    );
+  });
+
+  it('applies custom link classes', () => {
+    const customClass = 'customClass';
+    createWrapper(
+      { title: 'Foo' },
+      {
+        linkClasses: {
+          [customClass]: true,
+        },
+      },
+    );
+
+    expect(findLink().attributes('class')).toContain(customClass);
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/projects_list_spec.js b/spec/frontend/super_sidebar/components/projects_list_spec.js
new file mode 100644
index 00000000000..cdc003b14e0
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/projects_list_spec.js
@@ -0,0 +1,82 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import ProjectsList from '~/super_sidebar/components/projects_list.vue';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import FrequentItemsList from '~/super_sidebar/components/frequent_items_list.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { MAX_FREQUENT_PROJECTS_COUNT } from '~/super_sidebar/constants';
+
+const username = 'root';
+const viewAllLink = '/path/to/projects';
+const storageKey = `${username}/frequent-projects`;
+
+describe('ProjectsList component', () => {
+  let wrapper;
+
+  const findSearchResults = () => wrapper.findComponent(SearchResults);
+  const findFrequentItemsList = () => wrapper.findComponent(FrequentItemsList);
+  const findViewAllLink = () => wrapper.findComponent(NavItem);
+
+  const itRendersViewAllItem = () => {
+    it('renders the "View all..." item', () => {
+      expect(findViewAllLink().props('item')).toEqual({
+        icon: 'project',
+        link: viewAllLink,
+        title: s__('Navigation|View all projects'),
+      });
+    });
+  };
+
+  const createWrapper = (props = {}) => {
+    wrapper = shallowMountExtended(ProjectsList, {
+      propsData: {
+        username,
+        viewAllLink,
+        ...props,
+      },
+    });
+  };
+
+  describe('when displaying search results', () => {
+    const searchResults = ['A search result'];
+
+    beforeEach(() => {
+      createWrapper({
+        isSearch: true,
+        searchResults,
+      });
+    });
+
+    it('renders the search results component', () => {
+      expect(findSearchResults().exists()).toBe(true);
+      expect(findFrequentItemsList().exists()).toBe(false);
+    });
+
+    it('passes the correct props to the search results component', () => {
+      expect(findSearchResults().props()).toEqual({
+        title: s__('Navigation|Projects'),
+        noResultsText: s__('Navigation|No project matches found'),
+        searchResults,
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+
+  describe('when displaying frequent projects', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('passes the correct props to the frequent items list', () => {
+      expect(findFrequentItemsList().props()).toEqual({
+        title: s__('Navigation|Frequent projects'),
+        storageKey,
+        maxItems: MAX_FREQUENT_PROJECTS_COUNT,
+        pristineText: s__('Navigation|Projects you visit often will appear here.'),
+      });
+    });
+
+    itRendersViewAllItem();
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/search_results_spec.js b/spec/frontend/super_sidebar/components/search_results_spec.js
new file mode 100644
index 00000000000..dd48935c138
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/search_results_spec.js
@@ -0,0 +1,57 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { s__ } from '~/locale';
+import SearchResults from '~/super_sidebar/components/search_results.vue';
+import ItemsList from '~/super_sidebar/components/items_list.vue';
+
+const title = s__('Navigation|PROJECTS');
+const noResultsText = s__('Navigation|No project matches found');
+
+describe('SearchResults component', () => {
+  let wrapper;
+
+  const findListTitle = () => wrapper.findByTestId('list-title');
+  const findItemsList = () => wrapper.findComponent(ItemsList);
+  const findEmptyText = () => wrapper.findByTestId('empty-text');
+
+  const createWrapper = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(SearchResults, {
+      propsData: {
+        title,
+        noResultsText,
+        ...props,
+      },
+    });
+  };
+
+  describe('default state', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it("renders the list's title", () => {
+      expect(findListTitle().text()).toBe(title);
+    });
+
+    it('renders the empty text', () => {
+      expect(findEmptyText().exists()).toBe(true);
+      expect(findEmptyText().text()).toBe(noResultsText);
+    });
+  });
+
+  describe('when displaying search results', () => {
+    it('shows search results', () => {
+      const searchResults = [{ id: 1 }];
+      createWrapper({ props: { isSearch: true, searchResults } });
+
+      expect(findItemsList().props('items')[0]).toEqual(searchResults[0]);
+    });
+
+    it('shows the no results text if search results are empty', () => {
+      const searchResults = [];
+      createWrapper({ props: { isSearch: true, searchResults } });
+
+      expect(findItemsList().props('items').length).toEqual(0);
+      expect(findEmptyText().text()).toBe(noResultsText);
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/sidebar_portal_spec.js b/spec/frontend/super_sidebar/components/sidebar_portal_spec.js
new file mode 100644
index 00000000000..3ef1cb7e692
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/sidebar_portal_spec.js
@@ -0,0 +1,68 @@
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue';
+import SidebarPortalTarget from '~/super_sidebar/components/sidebar_portal_target.vue';
+
+describe('SidebarPortal', () => {
+  let targetWrapper;
+
+  const Target = {
+    components: { SidebarPortalTarget },
+    props: ['show'],
+    template: '<sidebar-portal-target v-if="show" />',
+  };
+
+  const Source = {
+    components: { SidebarPortal },
+    template: '<sidebar-portal><br data-testid="test"></sidebar-portal>',
+  };
+
+  const mountSource = () => {
+    mount(Source);
+  };
+
+  const mountTarget = ({ show = true } = {}) => {
+    targetWrapper = mount(Target, {
+      propsData: { show },
+      attachTo: document.body,
+    });
+  };
+
+  const findTestContent = () => targetWrapper.find('[data-testid="test"]');
+
+  it('renders content into the target', async () => {
+    mountTarget();
+    await nextTick();
+
+    mountSource();
+    await nextTick();
+
+    expect(findTestContent().exists()).toBe(true);
+  });
+
+  it('waits for target to be available before rendering', async () => {
+    mountSource();
+    await nextTick();
+
+    mountTarget();
+    await nextTick();
+
+    expect(findTestContent().exists()).toBe(true);
+  });
+
+  it('supports conditional rendering of target', async () => {
+    mountTarget({ show: false });
+    await nextTick();
+
+    mountSource();
+    await nextTick();
+
+    expect(findTestContent().exists()).toBe(false);
+
+    await targetWrapper.setProps({ show: true });
+    expect(findTestContent().exists()).toBe(true);
+
+    await targetWrapper.setProps({ show: false });
+    expect(findTestContent().exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/super_sidebar_spec.js b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
index 45fc30c08f0..32921da23aa 100644
--- a/spec/frontend/super_sidebar/components/super_sidebar_spec.js
+++ b/spec/frontend/super_sidebar/components/super_sidebar_spec.js
@@ -2,13 +2,21 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SuperSidebar from '~/super_sidebar/components/super_sidebar.vue';
 import HelpCenter from '~/super_sidebar/components/help_center.vue';
 import UserBar from '~/super_sidebar/components/user_bar.vue';
+import SidebarPortalTarget from '~/super_sidebar/components/sidebar_portal_target.vue';
+import { isCollapsed } from '~/super_sidebar/super_sidebar_collapsed_state_manager';
 import { sidebarData } from '../mock_data';
 
+jest.mock('~/super_sidebar/super_sidebar_collapsed_state_manager', () => ({
+  isCollapsed: jest.fn(),
+}));
+
 describe('SuperSidebar component', () => {
   let wrapper;
 
+  const findSidebar = () => wrapper.find('.super-sidebar');
   const findUserBar = () => wrapper.findComponent(UserBar);
   const findHelpCenter = () => wrapper.findComponent(HelpCenter);
+  const findSidebarPortalTarget = () => wrapper.findComponent(SidebarPortalTarget);
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMountExtended(SuperSidebar, {
@@ -20,16 +28,33 @@ describe('SuperSidebar component', () => {
   };
 
   describe('default', () => {
-    beforeEach(() => {
+    it('add aria-hidden and inert attributes when collapsed', () => {
+      isCollapsed.mockReturnValue(true);
       createWrapper();
+      expect(findSidebar().attributes('aria-hidden')).toBe('true');
+      expect(findSidebar().attributes('inert')).toBe('inert');
+    });
+
+    it('does not add aria-hidden and inert attributes when expanded', () => {
+      isCollapsed.mockReturnValue(false);
+      createWrapper();
+      expect(findSidebar().attributes('aria-hidden')).toBe('false');
+      expect(findSidebar().attributes('inert')).toBe(undefined);
     });
 
     it('renders UserBar with sidebarData', () => {
+      createWrapper();
       expect(findUserBar().props('sidebarData')).toBe(sidebarData);
     });
 
     it('renders HelpCenter with sidebarData', () => {
+      createWrapper();
       expect(findHelpCenter().props('sidebarData')).toBe(sidebarData);
     });
+
+    it('renders SidebarPortalTarget', () => {
+      createWrapper();
+      expect(findSidebarPortalTarget().exists()).toBe(true);
+    });
   });
 });
diff --git a/spec/frontend/super_sidebar/components/user_bar_spec.js b/spec/frontend/super_sidebar/components/user_bar_spec.js
index eceb792c3db..ae15dd55644 100644
--- a/spec/frontend/super_sidebar/components/user_bar_spec.js
+++ b/spec/frontend/super_sidebar/components/user_bar_spec.js
@@ -1,3 +1,4 @@
+import { GlBadge } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { __ } from '~/locale';
 import CreateMenu from '~/super_sidebar/components/create_menu.vue';
@@ -12,12 +13,12 @@ describe('UserBar component', () => {
   const findCreateMenu = () => wrapper.findComponent(CreateMenu);
   const findCounter = (at) => wrapper.findAllComponents(Counter).at(at);
   const findMergeRequestMenu = () => wrapper.findComponent(MergeRequestMenu);
+  const findBrandLogo = () => wrapper.findByTestId('brand-header-custom-logo');
 
-  const createWrapper = (props = {}) => {
+  const createWrapper = (extraSidebarData = {}) => {
     wrapper = shallowMountExtended(UserBar, {
       propsData: {
-        sidebarData,
-        ...props,
+        sidebarData: { ...sidebarData, ...extraSidebarData },
       },
       provide: {
         rootPath: '/',
@@ -55,5 +56,29 @@ describe('UserBar component', () => {
       expect(findCounter(2).props('href')).toBe('/dashboard/todos');
       expect(findCounter(2).props('label')).toBe(__('To-Do list'));
     });
+
+    it('renders branding logo', () => {
+      expect(findBrandLogo().exists()).toBe(true);
+      expect(findBrandLogo().attributes('src')).toBe(sidebarData.logo_url);
+    });
+  });
+
+  describe('GitLab Next badge', () => {
+    describe('when on canary', () => {
+      it('should render a badge to switch off GitLab Next', () => {
+        createWrapper({ gitlab_com_and_canary: true });
+        const badge = wrapper.findComponent(GlBadge);
+        expect(badge.text()).toBe('Next');
+        expect(badge.attributes('href')).toBe(sidebarData.canary_toggle_com_url);
+      });
+    });
+
+    describe('when not on canary', () => {
+      it('should not render the GitLab Next badge', () => {
+        createWrapper({ gitlab_com_and_canary: false });
+        const badge = wrapper.findComponent(GlBadge);
+        expect(badge.exists()).toBe(false);
+      });
+    });
   });
 });
diff --git a/spec/frontend/super_sidebar/components/user_menu_spec.js b/spec/frontend/super_sidebar/components/user_menu_spec.js
new file mode 100644
index 00000000000..b6231e03722
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/user_menu_spec.js
@@ -0,0 +1,375 @@
+import { GlAvatar, GlDisclosureDropdown } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import UserMenu from '~/super_sidebar/components/user_menu.vue';
+import UserNameGroup from '~/super_sidebar/components/user_name_group.vue';
+import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
+import invalidUrl from '~/lib/utils/invalid_url';
+import { mockTracking } from 'helpers/tracking_helper';
+import PersistentUserCallout from '~/persistent_user_callout';
+import { userMenuMockData, userMenuMockStatus, userMenuMockPipelineMinutes } from '../mock_data';
+
+describe('UserMenu component', () => {
+  let wrapper;
+  let trackingSpy;
+
+  const GlEmoji = { template: '<img/>' };
+  const toggleNewNavEndpoint = invalidUrl;
+  const showDropdown = () => wrapper.findComponent(GlDisclosureDropdown).vm.$emit('shown');
+
+  const createWrapper = (userDataChanges = {}) => {
+    wrapper = mountExtended(UserMenu, {
+      propsData: {
+        data: {
+          ...userMenuMockData,
+          ...userDataChanges,
+        },
+      },
+      stubs: {
+        GlEmoji,
+        GlAvatar: true,
+      },
+      provide: {
+        toggleNewNavEndpoint,
+      },
+    });
+
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+  };
+
+  describe('Toggle button', () => {
+    let toggle;
+
+    beforeEach(() => {
+      createWrapper();
+      toggle = wrapper.findByTestId('base-dropdown-toggle');
+    });
+
+    it('renders User Avatar in a toggle', () => {
+      const avatar = toggle.findComponent(GlAvatar);
+      expect(avatar.exists()).toBe(true);
+      expect(avatar.props()).toMatchObject({
+        entityName: userMenuMockData.name,
+        src: userMenuMockData.avatar_url,
+      });
+    });
+
+    it('renders screen reader text', () => {
+      expect(toggle.find('.gl-sr-only').text()).toBe(`${userMenuMockData.name} user’s menu`);
+    });
+  });
+
+  describe('User Menu Group', () => {
+    it('renders and passes data to it', () => {
+      createWrapper();
+      const userNameGroup = wrapper.findComponent(UserNameGroup);
+      expect(userNameGroup.exists()).toBe(true);
+      expect(userNameGroup.props('user')).toEqual(userMenuMockData);
+    });
+  });
+
+  describe('User status item', () => {
+    let item;
+
+    const setItem = ({ can_update, busy, customized } = {}) => {
+      createWrapper({ status: { ...userMenuMockStatus, can_update, busy, customized } });
+      item = wrapper.findByTestId('status-item');
+    };
+
+    describe('When user cannot update the status', () => {
+      it('does not render the status menu item', () => {
+        setItem();
+        expect(item.exists()).toBe(false);
+      });
+    });
+
+    describe('When user can update the status', () => {
+      it('renders the status menu item', () => {
+        setItem({ can_update: true });
+        expect(item.exists()).toBe(true);
+      });
+
+      it('should set the CSS class for triggering status update modal', () => {
+        setItem({ can_update: true });
+        expect(item.find('.js-set-status-modal-trigger').exists()).toBe(true);
+      });
+
+      describe('renders correct label', () => {
+        it.each`
+          busy     | customized | label
+          ${false} | ${false}   | ${'Set status'}
+          ${false} | ${true}    | ${'Edit status'}
+          ${true}  | ${false}   | ${'Edit status'}
+          ${true}  | ${true}    | ${'Edit status'}
+        `(
+          'when busy is "$busy" and customized is "$customized" the label is "$label"',
+          ({ busy, customized, label }) => {
+            setItem({ can_update: true, busy, customized });
+            expect(item.text()).toBe(label);
+          },
+        );
+      });
+
+      describe('Status update modal wrapper', () => {
+        const findModalWrapper = () => wrapper.find('.js-set-status-modal-wrapper');
+
+        it('renders the modal wrapper', () => {
+          setItem({ can_update: true });
+          expect(findModalWrapper().exists()).toBe(true);
+        });
+
+        it('sets default data attributes when status is not customized', () => {
+          setItem({ can_update: true });
+          expect(findModalWrapper().attributes()).toMatchObject({
+            'data-current-emoji': '',
+            'data-current-message': '',
+            'data-default-emoji': 'speech_balloon',
+          });
+        });
+
+        it('sets user status as data attributes when status is customized', () => {
+          setItem({ can_update: true, customized: true });
+          expect(findModalWrapper().attributes()).toMatchObject({
+            'data-current-emoji': userMenuMockStatus.emoji,
+            'data-current-message': userMenuMockStatus.message,
+            'data-current-availability': userMenuMockStatus.availability,
+            'data-current-clear-status-after': userMenuMockStatus.clear_after,
+          });
+        });
+      });
+    });
+  });
+
+  describe('Start Ultimate trial item', () => {
+    let item;
+
+    const setItem = ({ has_start_trial } = {}) => {
+      createWrapper({ trial: { has_start_trial } });
+      item = wrapper.findByTestId('start-trial-item');
+    };
+
+    describe('When Ultimate trial is not suggested for the user', () => {
+      it('does not render the start trial menu item', () => {
+        setItem();
+        expect(item.exists()).toBe(false);
+      });
+    });
+
+    describe('When Ultimate trial can be suggested for the user', () => {
+      it('does render the start trial menu item', () => {
+        setItem({ has_start_trial: true });
+        expect(item.exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('Buy Pipeline Minutes item', () => {
+    let item;
+
+    const setItem = ({
+      show_buy_pipeline_minutes,
+      show_with_subtext,
+      show_notification_dot,
+    } = {}) => {
+      createWrapper({
+        pipeline_minutes: {
+          ...userMenuMockPipelineMinutes,
+          show_buy_pipeline_minutes,
+          show_with_subtext,
+          show_notification_dot,
+        },
+      });
+      item = wrapper.findByTestId('buy-pipeline-minutes-item');
+    };
+
+    describe('When does NOT meet the condition to buy CI minutes', () => {
+      beforeEach(() => {
+        setItem();
+      });
+
+      it('does NOT render the buy pipeline minutes item', () => {
+        expect(item.exists()).toBe(false);
+      });
+
+      it('does not track the Sentry event', () => {
+        showDropdown();
+        expect(trackingSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('When does meet the condition to buy CI minutes', () => {
+      it('does render the menu item', () => {
+        setItem({ show_buy_pipeline_minutes: true });
+        expect(item.exists()).toBe(true);
+      });
+
+      it('tracks the Sentry event', () => {
+        setItem({ show_buy_pipeline_minutes: true });
+        showDropdown();
+        expect(trackingSpy).toHaveBeenCalledWith(
+          undefined,
+          userMenuMockPipelineMinutes.tracking_attrs['track-action'],
+          {
+            label: userMenuMockPipelineMinutes.tracking_attrs['track-label'],
+            property: userMenuMockPipelineMinutes.tracking_attrs['track-property'],
+          },
+        );
+      });
+
+      describe('Callout & notification dot', () => {
+        let spyFactory;
+
+        beforeEach(() => {
+          spyFactory = jest.spyOn(PersistentUserCallout, 'factory');
+        });
+
+        describe('When `show_notification_dot` is `false`', () => {
+          beforeEach(() => {
+            setItem({ show_buy_pipeline_minutes: true, show_notification_dot: false });
+            showDropdown();
+          });
+
+          it('does not set callout attributes', () => {
+            expect(item.attributes()).not.toEqual(
+              expect.objectContaining({
+                'data-feature-id': userMenuMockPipelineMinutes.callout_attrs.feature_id,
+                'data-dismiss-endpoint': userMenuMockPipelineMinutes.callout_attrs.dismiss_endpoint,
+              }),
+            );
+          });
+
+          it('does not initialize the Persistent Callout', () => {
+            expect(spyFactory).not.toHaveBeenCalled();
+          });
+
+          it('does not render notification dot', () => {
+            expect(wrapper.findByTestId('buy-pipeline-minutes-notification-dot').exists()).toBe(
+              false,
+            );
+          });
+        });
+
+        describe('When `show_notification_dot` is `true`', () => {
+          beforeEach(() => {
+            setItem({ show_buy_pipeline_minutes: true, show_notification_dot: true });
+            showDropdown();
+          });
+
+          it('sets the callout data attributes', () => {
+            expect(item.attributes()).toEqual(
+              expect.objectContaining({
+                'data-feature-id': userMenuMockPipelineMinutes.callout_attrs.feature_id,
+                'data-dismiss-endpoint': userMenuMockPipelineMinutes.callout_attrs.dismiss_endpoint,
+              }),
+            );
+          });
+
+          it('initializes the Persistent Callout', () => {
+            expect(spyFactory).toHaveBeenCalled();
+          });
+
+          it('renders notification dot', () => {
+            expect(wrapper.findByTestId('buy-pipeline-minutes-notification-dot').exists()).toBe(
+              true,
+            );
+          });
+        });
+      });
+
+      describe('Warning message', () => {
+        it('does not display the warning message when `show_with_subtext` is `false`', () => {
+          setItem({ show_buy_pipeline_minutes: true });
+
+          expect(item.text()).not.toContain(UserMenu.i18n.oneOfGroupsRunningOutOfPipelineMinutes);
+        });
+
+        it('displays the text and warning message when `show_with_subtext` is true', () => {
+          setItem({ show_buy_pipeline_minutes: true, show_with_subtext: true });
+
+          expect(item.text()).toContain(UserMenu.i18n.oneOfGroupsRunningOutOfPipelineMinutes);
+        });
+      });
+    });
+  });
+
+  describe('Edit profile item', () => {
+    it('should render a link to the profile page', () => {
+      createWrapper();
+      const item = wrapper.findByTestId('edit-profile-item');
+      expect(item.text()).toBe(UserMenu.i18n.editProfile);
+      expect(item.find('a').attributes('href')).toBe(userMenuMockData.settings.profile_path);
+    });
+  });
+
+  describe('Preferences item', () => {
+    it('should render a link to the profile page', () => {
+      createWrapper();
+      const item = wrapper.findByTestId('preferences-item');
+      expect(item.text()).toBe(UserMenu.i18n.preferences);
+      expect(item.find('a').attributes('href')).toBe(
+        userMenuMockData.settings.profile_preferences_path,
+      );
+    });
+  });
+
+  describe('GitLab Next item', () => {
+    describe('on gitlab.com', () => {
+      it('should render a link to switch to GitLab Next', () => {
+        createWrapper({ gitlab_com_but_not_canary: true });
+        const item = wrapper.findByTestId('gitlab-next-item');
+        expect(item.text()).toBe(UserMenu.i18n.gitlabNext);
+        expect(item.find('a').attributes('href')).toBe(userMenuMockData.canary_toggle_com_url);
+      });
+    });
+
+    describe('anywhere else', () => {
+      it('should not render the GitLab Next link', () => {
+        createWrapper({ gitlab_com_but_not_canary: false });
+        const item = wrapper.findByTestId('gitlab-next-item');
+        expect(item.exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('New navigation toggle item', () => {
+    it('should render menu item with new navigation toggle', () => {
+      createWrapper();
+      const toggleItem = wrapper.findComponent(NewNavToggle);
+      expect(toggleItem.exists()).toBe(true);
+      expect(toggleItem.props('endpoint')).toBe(toggleNewNavEndpoint);
+    });
+  });
+
+  describe('Feedback item', () => {
+    it('should render feedback item with a link to a new GitLab issue', () => {
+      createWrapper();
+      const feedbackItem = wrapper.findByTestId('feedback-item');
+      expect(feedbackItem.find('a').attributes('href')).toBe(UserMenu.feedbackUrl);
+    });
+  });
+
+  describe('Sign out group', () => {
+    const findSignOutGroup = () => wrapper.findByTestId('sign-out-group');
+
+    it('should not render sign out group when user cannot sign out', () => {
+      createWrapper();
+      expect(findSignOutGroup().exists()).toBe(false);
+    });
+
+    describe('when user can sign out', () => {
+      beforeEach(() => {
+        createWrapper({ can_sign_out: true });
+      });
+
+      it('should render sign out group', () => {
+        expect(findSignOutGroup().exists()).toBe(true);
+      });
+
+      it('should render the menu item with a link to sign out and correct data attribute', () => {
+        expect(findSignOutGroup().find('a').attributes('href')).toBe(
+          userMenuMockData.sign_out_link,
+        );
+        expect(findSignOutGroup().find('a').attributes('data-method')).toBe('post');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/user_name_group_spec.js b/spec/frontend/super_sidebar/components/user_name_group_spec.js
new file mode 100644
index 00000000000..c06c8c218d4
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/user_name_group_spec.js
@@ -0,0 +1,100 @@
+import { GlDisclosureDropdownGroup, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import UserNameGroup from '~/super_sidebar/components/user_name_group.vue';
+import { userMenuMockData, userMenuMockStatus } from '../mock_data';
+
+describe('UserNameGroup component', () => {
+  let wrapper;
+
+  const findGlDisclosureDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup);
+  const findGlDisclosureDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findGlTooltip = () => wrapper.findComponent(GlTooltip);
+  const findUserStatus = () => wrapper.findByTestId('user-menu-status');
+
+  const GlEmoji = { template: '<img/>' };
+
+  const createWrapper = (userDataChanges = {}) => {
+    wrapper = shallowMountExtended(UserNameGroup, {
+      propsData: {
+        user: {
+          ...userMenuMockData,
+          ...userDataChanges,
+        },
+      },
+      stubs: {
+        GlEmoji,
+        GlDisclosureDropdownItem,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  it('renders the menu item in a separate group', () => {
+    expect(findGlDisclosureDropdownGroup().exists()).toBe(true);
+  });
+
+  it('renders menu item', () => {
+    expect(findGlDisclosureDropdownItem().exists()).toBe(true);
+  });
+
+  it('passes the item to the disclosure dropdown item', () => {
+    expect(findGlDisclosureDropdownItem().props('item')).toEqual({
+      text: userMenuMockData.name,
+      href: userMenuMockData.link_to_profile,
+    });
+  });
+
+  it("renders user's name", () => {
+    expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.name);
+  });
+
+  it("renders user's username", () => {
+    expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.username);
+  });
+
+  describe('Busy status', () => {
+    it('should not render "Busy" when user is NOT busy', () => {
+      expect(findGlDisclosureDropdownItem().text()).not.toContain('Busy');
+    });
+    it('should  render "Busy" when user is busy', () => {
+      createWrapper({ status: { customized: true, busy: true } });
+
+      expect(findGlDisclosureDropdownItem().text()).toContain('Busy');
+    });
+  });
+
+  describe('User status', () => {
+    describe('when not customized', () => {
+      it('should not render it', () => {
+        expect(findUserStatus().exists()).toBe(false);
+      });
+    });
+
+    describe('when customized', () => {
+      beforeEach(() => {
+        createWrapper({ status: { ...userMenuMockStatus, customized: true } });
+      });
+
+      it('should render it', () => {
+        expect(findUserStatus().exists()).toBe(true);
+      });
+
+      it('should render status emoji', () => {
+        expect(findUserStatus().findComponent(GlEmoji).attributes('data-name')).toBe(
+          userMenuMockData.status.emoji,
+        );
+      });
+
+      it('should render status message', () => {
+        expect(findUserStatus().text()).toContain(userMenuMockData.status.message);
+      });
+
+      it("sets the tooltip's target to the status container", () => {
+        expect(findGlTooltip().props('target')?.()).toBe(findUserStatus().element);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/mock_data.js b/spec/frontend/super_sidebar/mock_data.js
index 91a2dc93a47..b540f85d9fe 100644
--- a/spec/frontend/super_sidebar/mock_data.js
+++ b/spec/frontend/super_sidebar/mock_data.js
@@ -1,3 +1,5 @@
+import invalidUrl from '~/lib/utils/invalid_url';
+
 export const createNewMenuGroups = [
   {
     name: 'This group',
@@ -58,15 +60,23 @@ export const mergeRequestMenuGroup = [
 ];
 
 export const sidebarData = {
+  current_menu_items: [],
+  current_context_header: {
+    title: 'Your Work',
+    icon: 'work',
+  },
   name: 'Administrator',
   username: 'root',
   avatar_url: 'path/to/img_administrator',
+  logo_url: 'path/to/logo',
   assigned_open_issues_count: 1,
   todos_pending_count: 3,
   issues_dashboard_path: 'path/to/issues',
   total_merge_requests_count: 4,
   create_new_menu_groups: createNewMenuGroups,
   merge_request_menu: mergeRequestMenuGroup,
+  projects_path: 'path/to/projects',
+  groups_path: 'path/to/groups',
   support_path: '/support',
   display_whats_new: true,
   whats_new_most_recent_release_items_count: 5,
@@ -74,4 +84,181 @@ export const sidebarData = {
   show_version_check: false,
   gitlab_version: { major: 16, minor: 0 },
   gitlab_version_check: { severity: 'success' },
+  gitlab_com_and_canary: false,
+  canary_toggle_com_url: 'https://next.gitlab.com',
+};
+
+export const userMenuMockStatus = {
+  can_update: false,
+  busy: false,
+  customized: false,
+  emoji: 'art',
+  message: 'Working on user menu in super sidebar',
+  availability: 'busy',
+  clear_after: '2023-02-09 20:06:35 UTC',
+};
+
+export const userMenuMockPipelineMinutes = {
+  show_buy_pipeline_minutes: false,
+  show_notification_dot: false,
+  callout_attrs: {
+    feature_id: 'pipeline_minutes',
+    dismiss_endpoint: '/-/dismiss',
+  },
+  buy_pipeline_minutes_path: '/buy/pipeline_minutes',
+  tracking_attrs: {
+    'track-action': 'trackAction',
+    'track-label': 'label',
+    'track-property': 'property',
+  },
+};
+
+export const userMenuMockData = {
+  name: 'Orange Fox',
+  username: 'thefox',
+  avatar_url: invalidUrl,
+  has_link_to_profile: true,
+  link_to_profile: '/thefox',
+  status: userMenuMockStatus,
+  trial: {
+    has_start_trial: false,
+  },
+  settings: {
+    profile_path: invalidUrl,
+    profile_preferences_path: invalidUrl,
+  },
+  pipeline_minutes: userMenuMockPipelineMinutes,
+  can_sign_out: false,
+  sign_out_link: invalidUrl,
+  gitlab_com_but_not_canary: true,
+  canary_toggle_com_url: 'https://next.gitlab.com',
+};
+
+export const cachedFrequentProjects = JSON.stringify([
+  {
+    id: 1,
+    name: 'Cached project 1',
+    namespace: 'Cached Namespace 1 / Cached project 1',
+    webUrl: '/cached-namespace-1/cached-project-1',
+    avatarUrl: '/uploads/-/avatar1.png',
+    lastAccessedOn: 1676325329054,
+    frequency: 10,
+  },
+  {
+    id: 2,
+    name: 'Cached project 2',
+    namespace: 'Cached Namespace 2 / Cached project 2',
+    webUrl: '/cached-namespace-2/cached-project-2',
+    avatarUrl: '/uploads/-/avatar2.png',
+    lastAccessedOn: 1674314684308,
+    frequency: 8,
+  },
+  {
+    id: 3,
+    name: 'Cached project 3',
+    namespace: 'Cached Namespace 3 / Cached project 3',
+    webUrl: '/cached-namespace-3/cached-project-3',
+    avatarUrl: '/uploads/-/avatar3.png',
+    lastAccessedOn: 1664977333191,
+    frequency: 12,
+  },
+  {
+    id: 4,
+    name: 'Cached project 4',
+    namespace: 'Cached Namespace 4 / Cached project 4',
+    webUrl: '/cached-namespace-4/cached-project-4',
+    avatarUrl: '/uploads/-/avatar4.png',
+    lastAccessedOn: 1674315407569,
+    frequency: 3,
+  },
+  {
+    id: 5,
+    name: 'Cached project 5',
+    namespace: 'Cached Namespace 5 / Cached project 5',
+    webUrl: '/cached-namespace-5/cached-project-5',
+    avatarUrl: '/uploads/-/avatar5.png',
+    lastAccessedOn: 1677084729436,
+    frequency: 21,
+  },
+  {
+    id: 6,
+    name: 'Cached project 6',
+    namespace: 'Cached Namespace 6 / Cached project 6',
+    webUrl: '/cached-namespace-6/cached-project-6',
+    avatarUrl: '/uploads/-/avatar6.png',
+    lastAccessedOn: 1676325329679,
+    frequency: 5,
+  },
+]);
+
+export const cachedFrequentGroups = JSON.stringify([
+  {
+    id: 1,
+    name: 'Cached group 1',
+    namespace: 'Cached Namespace 1',
+    webUrl: '/cached-namespace-1/cached-group-1',
+    avatarUrl: '/uploads/-/avatar1.png',
+    lastAccessedOn: 1676325329054,
+    frequency: 10,
+  },
+  {
+    id: 2,
+    name: 'Cached group 2',
+    namespace: 'Cached Namespace 2',
+    webUrl: '/cached-namespace-2/cached-group-2',
+    avatarUrl: '/uploads/-/avatar2.png',
+    lastAccessedOn: 1674314684308,
+    frequency: 8,
+  },
+  {
+    id: 3,
+    name: 'Cached group 3',
+    namespace: 'Cached Namespace 3',
+    webUrl: '/cached-namespace-3/cached-group-3',
+    avatarUrl: '/uploads/-/avatar3.png',
+    lastAccessedOn: 1664977333191,
+    frequency: 12,
+  },
+  {
+    id: 4,
+    name: 'Cached group 4',
+    namespace: 'Cached Namespace 4',
+    webUrl: '/cached-namespace-4/cached-group-4',
+    avatarUrl: '/uploads/-/avatar4.png',
+    lastAccessedOn: 1674315407569,
+    frequency: 3,
+  },
+]);
+
+export const searchUserProjectsAndGroupsResponseMock = {
+  data: {
+    projects: {
+      nodes: [
+        {
+          id: 'gid://gitlab/Project/2',
+          name: 'Gitlab Shell',
+          namespace: 'Gitlab Org / Gitlab Shell',
+          webUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell',
+          avatarUrl: null,
+          __typename: 'Project',
+        },
+      ],
+    },
+
+    user: {
+      id: 'gid://gitlab/User/1',
+      groups: {
+        nodes: [
+          {
+            id: 'gid://gitlab/Group/60',
+            name: 'GitLab Instance',
+            namespace: 'gitlab-instance-2e4abb29',
+            webUrl: 'http://gdk.test:3000/groups/gitlab-instance-2e4abb29',
+            avatarUrl: null,
+            __typename: 'Group',
+          },
+        ],
+      },
+    },
+  },
 };
diff --git a/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js
new file mode 100644
index 00000000000..3824965970b
--- /dev/null
+++ b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js
@@ -0,0 +1,157 @@
+import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import {
+  SIDEBAR_COLLAPSED_CLASS,
+  SIDEBAR_COLLAPSED_COOKIE,
+  SIDEBAR_COLLAPSED_COOKIE_EXPIRATION,
+  toggleSuperSidebarCollapsed,
+  initSuperSidebarCollapsedState,
+  bindSuperSidebarCollapsedEvents,
+  findPage,
+  findSidebar,
+  findToggles,
+} from '~/super_sidebar/super_sidebar_collapsed_state_manager';
+
+const { xl, sm } = breakpoints;
+
+jest.mock('~/lib/utils/common_utils', () => ({
+  getCookie: jest.fn(),
+  setCookie: jest.fn(),
+}));
+
+const pageHasCollapsedClass = (hasClass) => {
+  if (hasClass) {
+    expect(findPage().classList).toContain(SIDEBAR_COLLAPSED_CLASS);
+  } else {
+    expect(findPage().classList).not.toContain(SIDEBAR_COLLAPSED_CLASS);
+  }
+};
+
+describe('Super Sidebar Collapsed State Manager', () => {
+  beforeEach(() => {
+    setHTMLFixture(`
+      <div class="page-with-super-sidebar">
+        <aside class="super-sidebar"></aside>
+        <button class="js-super-sidebar-toggle"></button>
+      </div>
+    `);
+  });
+
+  afterEach(() => {
+    resetHTMLFixture();
+  });
+
+  describe('toggleSuperSidebarCollapsed', () => {
+    it.each`
+      collapsed | saveCookie | windowWidth | hasClass
+      ${true}   | ${true}    | ${xl}       | ${true}
+      ${true}   | ${false}   | ${xl}       | ${true}
+      ${true}   | ${true}    | ${sm}       | ${true}
+      ${true}   | ${false}   | ${sm}       | ${true}
+      ${false}  | ${true}    | ${xl}       | ${false}
+      ${false}  | ${false}   | ${xl}       | ${false}
+      ${false}  | ${true}    | ${sm}       | ${false}
+      ${false}  | ${false}   | ${sm}       | ${false}
+    `(
+      'when collapsed is $collapsed, saveCookie is $saveCookie, and windowWidth is $windowWidth then page class contains `page-with-super-sidebar-collapsed` is $hasClass',
+      ({ collapsed, saveCookie, windowWidth, hasClass }) => {
+        jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth);
+
+        toggleSuperSidebarCollapsed(collapsed, saveCookie);
+
+        pageHasCollapsedClass(hasClass);
+        expect(findSidebar().ariaHidden).toBe(collapsed);
+        expect(findSidebar().inert).toBe(collapsed);
+
+        if (saveCookie && windowWidth >= xl) {
+          expect(setCookie).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_COOKIE, collapsed, {
+            expires: SIDEBAR_COLLAPSED_COOKIE_EXPIRATION,
+          });
+        } else {
+          expect(setCookie).not.toHaveBeenCalled();
+        }
+      },
+    );
+
+    describe('focus', () => {
+      it.each`
+        collapsed | isUserAction
+        ${false}  | ${true}
+        ${false}  | ${false}
+        ${true}   | ${true}
+        ${true}   | ${false}
+      `(
+        'when collapsed is $collapsed, isUserAction is $isUserAction',
+        ({ collapsed, isUserAction }) => {
+          const sidebar = findSidebar();
+          jest.spyOn(sidebar, 'focus');
+          toggleSuperSidebarCollapsed(collapsed, false, isUserAction);
+
+          if (!collapsed && isUserAction) {
+            expect(sidebar.focus).toHaveBeenCalled();
+          } else {
+            expect(sidebar.focus).not.toHaveBeenCalled();
+          }
+        },
+      );
+    });
+  });
+
+  describe('initSuperSidebarCollapsedState', () => {
+    it.each`
+      windowWidth | cookie       | hasClass
+      ${xl}       | ${undefined} | ${false}
+      ${sm}       | ${undefined} | ${true}
+      ${xl}       | ${'true'}    | ${true}
+      ${sm}       | ${'true'}    | ${true}
+    `(
+      'sets page class to `page-with-super-sidebar-collapsed` when windowWidth is $windowWidth and cookie value is $cookie',
+      ({ windowWidth, cookie, hasClass }) => {
+        jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth);
+        getCookie.mockReturnValue(cookie);
+
+        initSuperSidebarCollapsedState();
+
+        pageHasCollapsedClass(hasClass);
+        expect(setCookie).not.toHaveBeenCalled();
+      },
+    );
+  });
+
+  describe('bindSuperSidebarCollapsedEvents', () => {
+    it.each`
+      windowWidth | cookie       | hasClass
+      ${xl}       | ${undefined} | ${true}
+      ${sm}       | ${undefined} | ${true}
+      ${xl}       | ${'true'}    | ${false}
+      ${sm}       | ${'true'}    | ${false}
+    `(
+      'toggle click sets page class to `page-with-super-sidebar-collapsed` when windowWidth is $windowWidth and cookie value is $cookie',
+      ({ windowWidth, cookie, hasClass }) => {
+        setHTMLFixture(`
+          <div class="page-with-super-sidebar ${cookie ? SIDEBAR_COLLAPSED_CLASS : ''}">
+            <aside class="super-sidebar"></aside>
+            <button class="js-super-sidebar-toggle"></button>
+          </div>
+        `);
+        jest.spyOn(bp, 'windowWidth').mockReturnValue(windowWidth);
+        getCookie.mockReturnValue(cookie);
+
+        bindSuperSidebarCollapsedEvents();
+
+        findToggles()[0].click();
+
+        pageHasCollapsedClass(hasClass);
+
+        if (windowWidth >= xl) {
+          expect(setCookie).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_COOKIE, !cookie, {
+            expires: SIDEBAR_COLLAPSED_COOKIE_EXPIRATION,
+          });
+        } else {
+          expect(setCookie).not.toHaveBeenCalled();
+        }
+      },
+    );
+  });
+});
diff --git a/spec/frontend/super_sidebar/utils_spec.js b/spec/frontend/super_sidebar/utils_spec.js
new file mode 100644
index 00000000000..1f236616e77
--- /dev/null
+++ b/spec/frontend/super_sidebar/utils_spec.js
@@ -0,0 +1,160 @@
+import {
+  getTopFrequentItems,
+  trackContextAccess,
+  formatContextSwitcherItems,
+} from '~/super_sidebar/utils';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import AccessorUtilities from '~/lib/utils/accessor';
+import { FREQUENT_ITEMS, FIFTEEN_MINUTES_IN_MS } from '~/frequent_items/constants';
+import { unsortedFrequentItems, sortedFrequentItems } from '../frequent_items/mock_data';
+import { searchUserProjectsAndGroupsResponseMock } from './mock_data';
+
+describe('Super sidebar utils spec', () => {
+  describe('getTopFrequentItems', () => {
+    const maxItems = 3;
+
+    it('returns empty array if no items provided', () => {
+      const result = getTopFrequentItems();
+
+      expect(result.length).toBe(0);
+    });
+
+    it('returns the requested amount of items', () => {
+      const result = getTopFrequentItems(unsortedFrequentItems, maxItems);
+
+      expect(result.length).toBe(maxItems);
+    });
+
+    it('sorts frequent items in order of frequency and lastAccessedOn', () => {
+      const result = getTopFrequentItems(unsortedFrequentItems, maxItems);
+      const expectedResult = sortedFrequentItems.slice(0, maxItems);
+
+      expect(result).toEqual(expectedResult);
+    });
+  });
+
+  describe('trackContextAccess', () => {
+    useLocalStorageSpy();
+
+    const username = 'root';
+    const context = {
+      namespace: 'groups',
+      item: { id: 1 },
+    };
+    const storageKey = `${username}/frequent-${context.namespace}`;
+
+    it('returns `false` if local storage is not available', () => {
+      jest.spyOn(AccessorUtilities, 'canUseLocalStorage').mockReturnValue(false);
+
+      expect(trackContextAccess()).toBe(false);
+    });
+
+    it('creates a new item if it does not exist in the local storage', () => {
+      trackContextAccess(username, context);
+
+      expect(window.localStorage.setItem).toHaveBeenCalledWith(
+        storageKey,
+        JSON.stringify([
+          {
+            id: 1,
+            frequency: 1,
+            lastAccessedOn: Date.now(),
+          },
+        ]),
+      );
+    });
+
+    it('updates existing item if it was persisted to the local storage over 15 minutes ago', () => {
+      window.localStorage.setItem(
+        storageKey,
+        JSON.stringify([
+          {
+            id: 1,
+            frequency: 2,
+            lastAccessedOn: Date.now() - FIFTEEN_MINUTES_IN_MS - 1,
+          },
+        ]),
+      );
+      trackContextAccess(username, context);
+
+      expect(window.localStorage.setItem).toHaveBeenCalledWith(
+        storageKey,
+        JSON.stringify([
+          {
+            id: 1,
+            frequency: 3,
+            lastAccessedOn: Date.now(),
+          },
+        ]),
+      );
+    });
+
+    it('leaves item as is if it was persisted to the local storage under 15 minutes ago', () => {
+      const jsonString = JSON.stringify([
+        {
+          id: 1,
+          frequency: 2,
+          lastAccessedOn: Date.now() - FIFTEEN_MINUTES_IN_MS,
+        },
+      ]);
+      window.localStorage.setItem(storageKey, jsonString);
+
+      expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
+      expect(window.localStorage.setItem).toHaveBeenCalledWith(storageKey, jsonString);
+
+      trackContextAccess(username, context);
+
+      expect(window.localStorage.setItem).toHaveBeenCalledTimes(3);
+      expect(window.localStorage.setItem).toHaveBeenLastCalledWith(storageKey, jsonString);
+    });
+
+    it('replaces the least popular item in the local storage once the persisted items limit has been hit', () => {
+      // Add the maximum amount of items to the local storage, in increasing popularity
+      const storedItems = Array.from({ length: FREQUENT_ITEMS.MAX_COUNT }).map((_, i) => ({
+        id: i + 1,
+        frequency: i + 1,
+        lastAccessedOn: Date.now(),
+      }));
+      // The first item is considered the least popular one as it has the lowest frequency (1)
+      const [leastPopularItem] = storedItems;
+      // Persist the list to the local storage
+      const jsonString = JSON.stringify(storedItems);
+      window.localStorage.setItem(storageKey, jsonString);
+      // Track some new item that hasn't been visited yet
+      const newItem = {
+        id: FREQUENT_ITEMS.MAX_COUNT + 1,
+      };
+      trackContextAccess(username, {
+        namespace: 'groups',
+        item: newItem,
+      });
+      // Finally, retrieve the final data from the local storage
+      const finallyStoredItems = JSON.parse(window.localStorage.getItem(storageKey));
+
+      expect(finallyStoredItems).not.toEqual(expect.arrayContaining([leastPopularItem]));
+      expect(finallyStoredItems).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            id: newItem.id,
+            frequency: 1,
+          }),
+        ]),
+      );
+    });
+  });
+
+  describe('formatContextSwitcherItems', () => {
+    it('returns the formatted items', () => {
+      const projects = searchUserProjectsAndGroupsResponseMock.data.projects.nodes;
+      expect(formatContextSwitcherItems(projects)).toEqual([
+        {
+          id: projects[0].id,
+          avatar: null,
+          title: projects[0].name,
+          subtitle: 'Gitlab Org',
+          link: projects[0].webUrl,
+        },
+      ]);
+    });
+  });
+});
diff --git a/spec/frontend/syntax_highlight_spec.js b/spec/frontend/syntax_highlight_spec.js
index 1be6c213350..a573c37ca44 100644
--- a/spec/frontend/syntax_highlight_spec.js
+++ b/spec/frontend/syntax_highlight_spec.js
@@ -1,14 +1,10 @@
-/* eslint-disable no-return-assign */
 import $ from 'jquery';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import syntaxHighlight from '~/syntax_highlight';
 
 describe('Syntax Highlighter', () => {
   const stubUserColorScheme = (value) => {
-    if (window.gon == null) {
-      window.gon = {};
-    }
-    return (window.gon.user_color_scheme = value);
+    window.gon.user_color_scheme = value;
   };
 
   // We have to bind `document.querySelectorAll` to `document` to not mess up the fn's context
diff --git a/spec/frontend/tags/components/delete_tag_modal_spec.js b/spec/frontend/tags/components/delete_tag_modal_spec.js
index b1726a2c0ef..8438bdb7db0 100644
--- a/spec/frontend/tags/components/delete_tag_modal_spec.js
+++ b/spec/frontend/tags/components/delete_tag_modal_spec.js
@@ -44,10 +44,6 @@ const findFormInput = () => wrapper.findComponent(GlFormInput);
 const findForm = () => wrapper.find('form');
 
 describe('Delete tag modal', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Deleting a regular tag', () => {
     const expectedTitle = 'Delete tag. Are you ABSOLUTELY SURE?';
     const expectedMessage = "You're about to permanently delete the tag test-tag.";
diff --git a/spec/frontend/terms/components/app_spec.js b/spec/frontend/terms/components/app_spec.js
index 99f61a31dbd..c60c6c79f17 100644
--- a/spec/frontend/terms/components/app_spec.js
+++ b/spec/frontend/terms/components/app_spec.js
@@ -37,10 +37,6 @@ describe('TermsApp', () => {
     isLoggedIn.mockReturnValue(true);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findFormWithAction = (path) => wrapper.find(`form[action="${path}"]`);
   const findButton = (path) => findFormWithAction(path).find('button[type="submit"]');
   const findScrollableViewport = () => wrapper.findByTestId('scrollable-viewport');
diff --git a/spec/frontend/terraform/components/empty_state_spec.js b/spec/frontend/terraform/components/empty_state_spec.js
index 21bfff5f1be..db3de556244 100644
--- a/spec/frontend/terraform/components/empty_state_spec.js
+++ b/spec/frontend/terraform/components/empty_state_spec.js
@@ -16,10 +16,6 @@ describe('EmptyStateComponent', () => {
     wrapper = shallowMount(EmptyState, { propsData });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render content', () => {
     expect(findEmptyState().props('title')).toBe(
       "Your project doesn't have any Terraform state files",
diff --git a/spec/frontend/terraform/components/init_command_modal_spec.js b/spec/frontend/terraform/components/init_command_modal_spec.js
index 911bb8878da..ca9aa26a776 100644
--- a/spec/frontend/terraform/components/init_command_modal_spec.js
+++ b/spec/frontend/terraform/components/init_command_modal_spec.js
@@ -49,10 +49,6 @@ describe('InitCommandModal', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('on rendering', () => {
     it('renders the explanatory text', () => {
       expect(findExplanatoryText().text()).toContain('personal access token');
diff --git a/spec/frontend/terraform/components/states_table_actions_spec.js b/spec/frontend/terraform/components/states_table_actions_spec.js
index 40b7448d78d..31a644b39b4 100644
--- a/spec/frontend/terraform/components/states_table_actions_spec.js
+++ b/spec/frontend/terraform/components/states_table_actions_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlModal, GlSprintf, GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -85,6 +85,7 @@ describe('StatesTableActions', () => {
   const findDownloadBtn = () => wrapper.find('[data-testid="terraform-state-download"]');
   const findRemoveBtn = () => wrapper.find('[data-testid="terraform-state-remove"]');
   const findRemoveModal = () => wrapper.findComponent(GlModal);
+  const findFormInput = () => wrapper.findComponent(GlFormInput);
 
   beforeEach(() => {
     return createComponent();
@@ -96,7 +97,6 @@ describe('StatesTableActions', () => {
     toast = null;
     unlockResponse = null;
     updateStateResponse = null;
-    wrapper.destroy();
   });
 
   describe('when the state is loading', () => {
@@ -296,9 +296,7 @@ describe('StatesTableActions', () => {
 
         describe('when state name is present', () => {
           beforeEach(async () => {
-            // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-            // eslint-disable-next-line no-restricted-syntax
-            await wrapper.setData({ removeConfirmText: defaultProps.state.name });
+            await findFormInput().vm.$emit('input', defaultProps.state.name);
 
             findRemoveModal().vm.$emit('ok');
 
diff --git a/spec/frontend/terraform/components/states_table_spec.js b/spec/frontend/terraform/components/states_table_spec.js
index 0b3b169891b..7c783c9f717 100644
--- a/spec/frontend/terraform/components/states_table_spec.js
+++ b/spec/frontend/terraform/components/states_table_spec.js
@@ -127,7 +127,7 @@ describe('StatesTable', () => {
         propsData,
         provide: { projectPath: 'path/to/project' },
         directives: {
-          GlTooltip: createMockDirective(),
+          GlTooltip: createMockDirective('gl-tooltip'),
         },
       }),
     );
@@ -140,11 +140,6 @@ describe('StatesTable', () => {
     return createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each`
     name         | toolTipText                            | hasBadge | loading  | lineNumber
     ${'state-1'} | ${'Locked by user-1 2 days ago'}       | ${true}  | ${false} | ${0}
diff --git a/spec/frontend/terraform/components/terraform_list_spec.js b/spec/frontend/terraform/components/terraform_list_spec.js
index 580951e799a..dc59e2769f6 100644
--- a/spec/frontend/terraform/components/terraform_list_spec.js
+++ b/spec/frontend/terraform/components/terraform_list_spec.js
@@ -63,11 +63,6 @@ describe('TerraformList', () => {
   const findStatesTable = () => wrapper.findComponent(StatesTable);
   const findTab = () => wrapper.findComponent(GlTab);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when the terraform query has succeeded', () => {
     describe('when there is a list of terraform states', () => {
       const states = [
diff --git a/spec/frontend/toggles/index_spec.js b/spec/frontend/toggles/index_spec.js
index f8c43e0ad0c..89e35991914 100644
--- a/spec/frontend/toggles/index_spec.js
+++ b/spec/frontend/toggles/index_spec.js
@@ -44,7 +44,6 @@ describe('toggles/index.js', () => {
   afterEach(() => {
     document.body.innerHTML = '';
     instance = null;
-    toggleWrapper = null;
   });
 
   describe('initToggle', () => {
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
index fcd1a33fa68..1ca58053e68 100644
--- a/spec/frontend/token_access/inbound_token_access_spec.js
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import InboundTokenAccess from '~/token_access/components/inbound_token_access.vue';
 import inboundAddProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_add_project_ci_job_token_scope.mutation.graphql';
 import inboundRemoveProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/inbound_remove_project_ci_job_token_scope.mutation.graphql';
@@ -26,7 +26,7 @@ const error = new Error(message);
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('TokenAccess component', () => {
   let wrapper;
diff --git a/spec/frontend/token_access/opt_in_jwt_spec.js b/spec/frontend/token_access/opt_in_jwt_spec.js
index 3a68f247aa6..cdb385aa743 100644
--- a/spec/frontend/token_access/opt_in_jwt_spec.js
+++ b/spec/frontend/token_access/opt_in_jwt_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { OPT_IN_JWT_HELP_LINK } from '~/token_access/constants';
 import OptInJwt from '~/token_access/components/opt_in_jwt.vue';
 import getOptInJwtSettingQuery from '~/token_access/graphql/queries/get_opt_in_jwt_setting.query.graphql';
@@ -16,7 +16,7 @@ const error = new Error(errorMessage);
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('OptInJwt component', () => {
   let wrapper;
diff --git a/spec/frontend/token_access/outbound_token_access_spec.js b/spec/frontend/token_access/outbound_token_access_spec.js
index 893a021197f..347ea1178bc 100644
--- a/spec/frontend/token_access/outbound_token_access_spec.js
+++ b/spec/frontend/token_access/outbound_token_access_spec.js
@@ -4,7 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import OutboundTokenAccess from '~/token_access/components/outbound_token_access.vue';
 import addProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/add_project_ci_job_token_scope.mutation.graphql';
 import removeProjectCIJobTokenScopeMutation from '~/token_access/graphql/mutations/remove_project_ci_job_token_scope.mutation.graphql';
@@ -26,7 +26,7 @@ const error = new Error(message);
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('TokenAccess component', () => {
   let wrapper;
diff --git a/spec/frontend/token_access/token_access_app_spec.js b/spec/frontend/token_access/token_access_app_spec.js
index 7f269ee5fda..cff16fd125c 100644
--- a/spec/frontend/token_access/token_access_app_spec.js
+++ b/spec/frontend/token_access/token_access_app_spec.js
@@ -11,12 +11,8 @@ describe('TokenAccessApp component', () => {
   const findInboundTokenAccess = () => wrapper.findComponent(InboundTokenAccess);
   const findOptInJwt = () => wrapper.findComponent(OptInJwt);
 
-  const createComponent = (flagState = false) => {
-    wrapper = shallowMount(TokenAccessApp, {
-      provide: {
-        glFeatures: { ciInboundJobTokenScope: flagState },
-      },
-    });
+  const createComponent = () => {
+    wrapper = shallowMount(TokenAccessApp);
   };
 
   describe('default', () => {
@@ -32,12 +28,6 @@ describe('TokenAccessApp component', () => {
       expect(findOutboundTokenAccess().exists()).toBe(true);
     });
 
-    it('does not render the inbound token access component', () => {
-      expect(findInboundTokenAccess().exists()).toBe(false);
-    });
-  });
-
-  describe('with feature flag enabled', () => {
     it('renders the inbound token access component', () => {
       createComponent(true);
 
diff --git a/spec/frontend/token_access/token_projects_table_spec.js b/spec/frontend/token_access/token_projects_table_spec.js
index b51d8b3ccea..7654aa09b0a 100644
--- a/spec/frontend/token_access/token_projects_table_spec.js
+++ b/spec/frontend/token_access/token_projects_table_spec.js
@@ -6,14 +6,19 @@ import { mockProjects, mockFields } from './mock_data';
 describe('Token projects table', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const defaultProps = {
+    tableFields: mockFields,
+    projects: mockProjects,
+  };
+
+  const createComponent = (props) => {
     wrapper = mountExtended(TokenProjectsTable, {
       provide: {
         fullPath: 'root/ci-project',
       },
       propsData: {
-        tableFields: mockFields,
-        projects: mockProjects,
+        ...defaultProps,
+        ...props,
       },
     });
   };
@@ -25,31 +30,52 @@ describe('Token projects table', () => {
   const findProjectNameCell = () => wrapper.findByTestId('token-access-project-name');
   const findProjectNamespaceCell = () => wrapper.findByTestId('token-access-project-namespace');
 
-  beforeEach(() => {
+  it('displays a table', () => {
     createComponent();
-  });
 
-  it('displays a table', () => {
     expect(findTable().exists()).toBe(true);
   });
 
   it('displays the correct amount of table rows', () => {
+    createComponent();
+
     expect(findAllTableRows()).toHaveLength(mockProjects.length);
   });
 
   it('delete project button emits event with correct project to delete', async () => {
+    createComponent();
+
     await findDeleteProjectBtn().trigger('click');
 
     expect(wrapper.emitted('removeProject')).toEqual([[mockProjects[0].fullPath]]);
   });
 
   it('does not show the remove icon if the project is locked', () => {
+    createComponent();
+
     // currently two mock projects with one being a locked project
     expect(findAllDeleteProjectBtn()).toHaveLength(1);
   });
 
   it('displays project and namespace cells', () => {
+    createComponent();
+
     expect(findProjectNameCell().text()).toBe('merge-train-stuff');
     expect(findProjectNamespaceCell().text()).toBe('root');
   });
+
+  it('displays empty string for namespace when namespace is null', () => {
+    const nullNamespace = {
+      id: '1',
+      name: 'merge-train-stuff',
+      namespace: null,
+      fullPath: 'root/merge-train-stuff',
+      isLocked: false,
+      __typename: 'Project',
+    };
+
+    createComponent({ projects: [nullNamespace] });
+
+    expect(findProjectNamespaceCell().text()).toBe('');
+  });
 });
diff --git a/spec/frontend/tooltips/components/tooltips_spec.js b/spec/frontend/tooltips/components/tooltips_spec.js
index d5a63a99601..e473091f405 100644
--- a/spec/frontend/tooltips/components/tooltips_spec.js
+++ b/spec/frontend/tooltips/components/tooltips_spec.js
@@ -30,11 +30,6 @@ describe('tooltips/components/tooltips.vue', () => {
 
   const allTooltips = () => wrapper.findAllComponents(GlTooltip);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('addTooltips', () => {
     let target;
 
diff --git a/spec/frontend/usage_quotas/components/usage_quotas_app_spec.js b/spec/frontend/usage_quotas/components/usage_quotas_app_spec.js
index cb70ea4e72d..3508bf7cfde 100644
--- a/spec/frontend/usage_quotas/components/usage_quotas_app_spec.js
+++ b/spec/frontend/usage_quotas/components/usage_quotas_app_spec.js
@@ -23,10 +23,6 @@ describe('UsageQuotasApp', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSubTitle = () => wrapper.findByTestId('usage-quotas-page-subtitle');
 
   it('renders the view title', () => {
diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
index 3379af3f41c..1a200090805 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js
@@ -53,10 +53,6 @@ describe('ProjectStorageApp', () => {
   const findUsageQuotasHelpLink = () => wrapper.findByTestId('usage-quotas-help-link');
   const findUsageGraph = () => wrapper.findComponent(UsageGraph);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with apollo fetching successful', () => {
     let mockApollo;
 
diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
index ce489f69cad..6065ec9e4bf 100644
--- a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js
@@ -54,9 +54,6 @@ describe('ProjectStorageDetail', () => {
   beforeEach(() => {
     createComponent();
   });
-  afterEach(() => {
-    wrapper.destroy();
-  });
 
   describe('with storage types', () => {
     it.each(storageTypes)(
diff --git a/spec/frontend/usage_quotas/storage/components/storage_type_icon_spec.js b/spec/frontend/usage_quotas/storage/components/storage_type_icon_spec.js
index 1eb3386bfb8..364cf1e587b 100644
--- a/spec/frontend/usage_quotas/storage/components/storage_type_icon_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/storage_type_icon_spec.js
@@ -16,10 +16,6 @@ describe('StorageTypeIcon', () => {
   const findGlIcon = () => wrapper.findComponent(GlIcon);
 
   describe('rendering icon', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it.each`
       expected                     | provided
       ${'doc-image'}               | ${'lfsObjectsSize'}
diff --git a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
index 75b970d937a..02268e1c9d8 100644
--- a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
@@ -39,10 +39,6 @@ describe('Storage Counter usage graph component', () => {
     mountComponent(data);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the legend in order', () => {
     const types = wrapper.findAll('[data-testid="storage-type-legend"]');
 
diff --git a/spec/frontend/user_lists/components/user_lists_spec.js b/spec/frontend/user_lists/components/user_lists_spec.js
index 161eb036361..603289ac11e 100644
--- a/spec/frontend/user_lists/components/user_lists_spec.js
+++ b/spec/frontend/user_lists/components/user_lists_spec.js
@@ -39,11 +39,6 @@ describe('~/user_lists/components/user_lists.vue', () => {
 
   const newButton = () => within(wrapper.element).queryAllByText('New user list');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('without permissions', () => {
     const provideData = {
       ...mockProvide,
diff --git a/spec/frontend/user_lists/components/user_lists_table_spec.js b/spec/frontend/user_lists/components/user_lists_table_spec.js
index 3324b040b86..96e9705f02b 100644
--- a/spec/frontend/user_lists/components/user_lists_table_spec.js
+++ b/spec/frontend/user_lists/components/user_lists_table_spec.js
@@ -22,10 +22,6 @@ describe('User Lists Table', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should display the details of a user list', () => {
     expect(wrapper.find('[data-testid="ffUserListName"]').text()).toBe(userList.name);
     expect(wrapper.find('[data-testid="ffUserListIds"]').text()).toBe(
diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js
index 8ce071c075f..3808cc8b0fc 100644
--- a/spec/frontend/user_popovers_spec.js
+++ b/spec/frontend/user_popovers_spec.js
@@ -10,8 +10,6 @@ jest.mock('~/api/user_api', () => ({
 }));
 
 describe('User Popovers', () => {
-  let origGon;
-
   const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
 
   const selector = '.js-user-link[data-user], .js-user-link[data-user-id]';
@@ -60,15 +58,6 @@ describe('User Popovers', () => {
     });
   };
 
-  beforeEach(() => {
-    origGon = window.gon;
-    window.gon = {};
-  });
-
-  afterEach(() => {
-    window.gon = origGon;
-  });
-
   describe('when signed out', () => {
     beforeEach(() => {
       setupTestSubject();
diff --git a/spec/frontend/validators/length_validator_spec.js b/spec/frontend/validators/length_validator_spec.js
new file mode 100644
index 00000000000..ece8238b3e3
--- /dev/null
+++ b/spec/frontend/validators/length_validator_spec.js
@@ -0,0 +1,91 @@
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import LengthValidator, { isAboveMaxLength, isBelowMinLength } from '~/validators/length_validator';
+
+describe('length_validator', () => {
+  describe('isAboveMaxLength', () => {
+    it('should return true if the string is longer than the maximum length', () => {
+      expect(isAboveMaxLength('123456', '5')).toBe(true);
+    });
+
+    it('should return false if the string is shorter than the maximum length', () => {
+      expect(isAboveMaxLength('1234', '5')).toBe(false);
+    });
+  });
+
+  describe('isBelowMinLength', () => {
+    it('should return true if the string is shorter than the minimum length and not empty', () => {
+      expect(isBelowMinLength('1234', '5', 'false')).toBe(true);
+    });
+
+    it('should return false if the string is longer than the minimum length', () => {
+      expect(isBelowMinLength('123456', '5', 'false')).toBe(false);
+    });
+
+    it('should return false if the string is empty and allowed to be empty', () => {
+      expect(isBelowMinLength('', '5', 'true')).toBe(false);
+    });
+
+    it('should return true if the string is empty and not allowed to be empty', () => {
+      expect(isBelowMinLength('', '5', 'false')).toBe(true);
+    });
+  });
+
+  describe('LengthValidator', () => {
+    let input;
+    let validator;
+
+    beforeEach(() => {
+      setHTMLFixture(
+        '<div class="container"><input class="js-validate-length" /><span class="gl-field-error"></span></div>',
+      );
+      input = document.querySelector('input');
+      input.dataset.minLength = '3';
+      input.dataset.maxLength = '5';
+      input.dataset.minLengthMessage = 'Too short';
+      input.dataset.maxLengthMessage = 'Too long';
+      validator = new LengthValidator({ container: '.container' });
+    });
+
+    afterEach(() => {
+      resetHTMLFixture();
+    });
+
+    it('sets error message for input with value longer than max length', () => {
+      input.value = '123456';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBe('Too long');
+    });
+
+    it('sets error message for input with value shorter than min length', () => {
+      input.value = '12';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBe('Too short');
+    });
+
+    it('does not set error message for input with valid length', () => {
+      input.value = '123';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBeNull();
+    });
+
+    it('does not set error message for empty input if allowEmpty is true', () => {
+      input.dataset.allowEmpty = 'true';
+      input.value = '';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBeNull();
+    });
+
+    it('sets error message for empty input if allowEmpty is false', () => {
+      input.dataset.allowEmpty = 'false';
+      input.value = '';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBe('Too short');
+    });
+
+    it('sets error message for empty input if allowEmpty is not defined', () => {
+      input.value = '';
+      input.dispatchEvent(new Event('input'));
+      expect(validator.errorMessage).toBe('Too short');
+    });
+  });
+});
diff --git a/spec/frontend/vue_compat_test_setup.js b/spec/frontend/vue_compat_test_setup.js
new file mode 100644
index 00000000000..b6234c51535
--- /dev/null
+++ b/spec/frontend/vue_compat_test_setup.js
@@ -0,0 +1,60 @@
+/* eslint-disable import/no-commonjs */
+const Vue = require('vue');
+const VTU = require('@vue/test-utils');
+const { installCompat: installVTUCompat, fullCompatConfig } = require('vue-test-utils-compat');
+
+if (global.document) {
+  const compatConfig = {
+    MODE: 2,
+
+    GLOBAL_MOUNT: 'suppress-warning',
+    GLOBAL_EXTEND: 'suppress-warning',
+    GLOBAL_PROTOTYPE: 'suppress-warning',
+    RENDER_FUNCTION: 'suppress-warning',
+
+    INSTANCE_DESTROY: 'suppress-warning',
+    INSTANCE_DELETE: 'suppress-warning',
+
+    INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
+    INSTANCE_CHILDREN: 'suppress-warning',
+    INSTANCE_SCOPED_SLOTS: 'suppress-warning',
+    INSTANCE_LISTENERS: 'suppress-warning',
+    INSTANCE_EVENT_EMITTER: 'suppress-warning',
+    INSTANCE_EVENT_HOOKS: 'suppress-warning',
+    INSTANCE_SET: 'suppress-warning',
+    GLOBAL_OBSERVABLE: 'suppress-warning',
+    GLOBAL_SET: 'suppress-warning',
+    COMPONENT_FUNCTIONAL: 'suppress-warning',
+    COMPONENT_V_MODEL: 'suppress-warning',
+    CUSTOM_DIR: 'suppress-warning',
+    OPTIONS_BEFORE_DESTROY: 'suppress-warning',
+    OPTIONS_DATA_MERGE: 'suppress-warning',
+    OPTIONS_DATA_FN: 'suppress-warning',
+    OPTIONS_DESTROYED: 'suppress-warning',
+    ATTR_FALSE_VALUE: 'suppress-warning',
+
+    COMPILER_V_ON_NATIVE: 'suppress-warning',
+    COMPILER_V_BIND_OBJECT_ORDER: 'suppress-warning',
+
+    CONFIG_WHITESPACE: 'suppress-warning',
+    CONFIG_OPTION_MERGE_STRATS: 'suppress-warning',
+    PRIVATE_APIS: 'suppress-warning',
+    WATCH_ARRAY: 'suppress-warning',
+  };
+
+  let compatH;
+  Vue.config.compilerOptions.whitespace = 'condense';
+  Vue.createApp({
+    compatConfig: {
+      MODE: 3,
+      RENDER_FUNCTION: 'suppress-warning',
+    },
+    render(h) {
+      compatH = h;
+    },
+  }).mount(document.createElement('div'));
+
+  Vue.configureCompat(compatConfig);
+  installVTUCompat(VTU, fullCompatConfig, compatH);
+  VTU.config.global.renderStubDefaultSlot = true;
+}
diff --git a/spec/frontend/vue_merge_request_widget/components/action_buttons.js b/spec/frontend/vue_merge_request_widget/components/action_buttons.js
index 6d714aeaf18..7334f061dc9 100644
--- a/spec/frontend/vue_merge_request_widget/components/action_buttons.js
+++ b/spec/frontend/vue_merge_request_widget/components/action_buttons.js
@@ -11,10 +11,6 @@ function factory(propsData = {}) {
 }
 
 describe('MR widget extension actions', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('tertiaryButtons', () => {
     it('renders buttons', () => {
       factory({
diff --git a/spec/frontend/vue_merge_request_widget/components/added_commit_message_spec.js b/spec/frontend/vue_merge_request_widget/components/added_commit_message_spec.js
index 063425454d7..4164a7df482 100644
--- a/spec/frontend/vue_merge_request_widget/components/added_commit_message_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/added_commit_message_spec.js
@@ -14,10 +14,6 @@ function factory(propsData) {
 }
 
 describe('Widget added commit message', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('displays changes where not merged when state is closed', () => {
     factory({ state: 'closed' });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
index bf208f16d18..e78e1be7882 100644
--- a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_spec.js
@@ -1,26 +1,32 @@
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { createAlert } from '~/flash';
+import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { createAlert } from '~/alert';
 import Approvals from '~/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import ApprovalsSummaryOptional from '~/vue_merge_request_widget/components/approvals/approvals_summary_optional.vue';
 import {
-  FETCH_LOADING,
-  FETCH_ERROR,
   APPROVE_ERROR,
   UNAPPROVE_ERROR,
 } from '~/vue_merge_request_widget/components/approvals/messages';
 import eventHub from '~/vue_merge_request_widget/event_hub';
+import approvedByQuery from 'ee_else_ce/vue_merge_request_widget/components/approvals/queries/approvals.query.graphql';
+import { createCanApproveResponse } from 'jest/approvals/mock_data';
+
+Vue.use(VueApollo);
 
 const mockAlertDismiss = jest.fn();
-jest.mock('~/flash', () => ({
+jest.mock('~/alert', () => ({
   createAlert: jest.fn().mockImplementation(() => ({
     dismiss: mockAlertDismiss,
   })),
 }));
 
-const RULE_NAME = 'first_rule';
 const TEST_HELP_PATH = 'help/path';
 const testApprovedBy = () => [1, 7, 10].map((id) => ({ id }));
 const testApprovals = () => ({
@@ -34,15 +40,18 @@ const testApprovals = () => ({
   require_password_to_approve: false,
   invalid_approvers_rules: [],
 });
-const testApprovalRulesResponse = () => ({ rules: [{ id: 2 }] });
 
 describe('MRWidget approvals', () => {
   let wrapper;
   let service;
   let mr;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, response = approvedByCurrentUser) => {
+    const requestHandlers = [[approvedByQuery, jest.fn().mockResolvedValue(response)]];
+    const apolloProvider = createMockApollo(requestHandlers);
+
     wrapper = shallowMount(Approvals, {
+      apolloProvider,
       propsData: {
         mr,
         service,
@@ -68,15 +77,10 @@ describe('MRWidget approvals', () => {
   };
   const findSummary = () => wrapper.findComponent(ApprovalsSummary);
   const findOptionalSummary = () => wrapper.findComponent(ApprovalsSummaryOptional);
-  const findInvalidRules = () => wrapper.find('[data-testid="invalid-rules"]');
 
   beforeEach(() => {
     service = {
       ...{
-        fetchApprovals: jest.fn().mockReturnValue(Promise.resolve(testApprovals())),
-        fetchApprovalSettings: jest
-          .fn()
-          .mockReturnValue(Promise.resolve(testApprovalRulesResponse())),
         approveMergeRequest: jest.fn().mockReturnValue(Promise.resolve(testApprovals())),
         unapproveMergeRequest: jest.fn().mockReturnValue(Promise.resolve(testApprovals())),
         approveMergeRequestWithAuth: jest.fn().mockReturnValue(Promise.resolve(testApprovals())),
@@ -97,55 +101,21 @@ describe('MRWidget approvals', () => {
     };
 
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-  });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('when created', () => {
-    it('shows loading message', async () => {
-      service = {
-        fetchApprovals: jest.fn().mockReturnValue(new Promise(() => {})),
-      };
-
-      createComponent();
-      await nextTick();
-      expect(wrapper.text()).toContain(FETCH_LOADING);
-    });
-
-    it('fetches approvals', () => {
-      createComponent();
-      expect(service.fetchApprovals).toHaveBeenCalled();
-    });
-  });
-
-  describe('when fetch approvals error', () => {
-    beforeEach(() => {
-      jest.spyOn(service, 'fetchApprovals').mockReturnValue(Promise.reject());
-      createComponent();
-      return nextTick();
-    });
-
-    it('still shows loading message', () => {
-      expect(wrapper.text()).toContain(FETCH_LOADING);
-    });
-
-    it('flashes error', () => {
-      expect(createAlert).toHaveBeenCalledWith({ message: FETCH_ERROR });
-    });
+    gon.current_user_id = getIdFromGraphQLId(
+      approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes[0].id,
+    );
   });
 
   describe('action button', () => {
     describe('when mr is closed', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
+        const response = createCanApproveResponse();
+
         mr.isOpen = false;
-        mr.approvals.user_has_approved = false;
-        mr.approvals.user_can_approve = true;
 
-        createComponent();
-        return nextTick();
+        createComponent({}, response);
+        await waitForPromises();
       });
 
       it('action is not rendered', () => {
@@ -154,12 +124,12 @@ describe('MRWidget approvals', () => {
     });
 
     describe('when user cannot approve', () => {
-      beforeEach(() => {
-        mr.approvals.user_has_approved = false;
-        mr.approvals.user_can_approve = false;
+      beforeEach(async () => {
+        const response = JSON.parse(JSON.stringify(approvedByCurrentUser));
+        response.data.project.mergeRequest.approvedBy.nodes = [];
 
-        createComponent();
-        return nextTick();
+        createComponent({}, response);
+        await waitForPromises();
       });
 
       it('action is not rendered', () => {
@@ -168,15 +138,16 @@ describe('MRWidget approvals', () => {
     });
 
     describe('when user can approve', () => {
+      let canApproveResponse;
+
       beforeEach(() => {
-        mr.approvals.user_has_approved = false;
-        mr.approvals.user_can_approve = true;
+        canApproveResponse = createCanApproveResponse();
       });
 
       describe('and MR is unapproved', () => {
-        beforeEach(() => {
-          createComponent();
-          return nextTick();
+        beforeEach(async () => {
+          createComponent({}, canApproveResponse);
+          await waitForPromises();
         });
 
         it('approve action is rendered', () => {
@@ -190,30 +161,33 @@ describe('MRWidget approvals', () => {
 
       describe('and MR is approved', () => {
         beforeEach(() => {
-          mr.approvals.approved = true;
+          canApproveResponse.data.project.mergeRequest.approved = true;
         });
 
         describe('with no approvers', () => {
-          beforeEach(() => {
-            mr.approvals.approved_by = [];
-            createComponent();
-            return nextTick();
+          beforeEach(async () => {
+            canApproveResponse.data.project.mergeRequest.approvedBy.nodes = [];
+            createComponent({}, canApproveResponse);
+            await nextTick();
           });
 
-          it('approve action (with inverted style) is rendered', () => {
-            expect(findActionData()).toEqual({
+          it('approve action is rendered', () => {
+            expect(findActionData()).toMatchObject({
               variant: 'confirm',
               text: 'Approve',
-              category: 'secondary',
             });
           });
         });
 
         describe('with approvers', () => {
-          beforeEach(() => {
-            mr.approvals.approved_by = [{ user: { id: 7 } }];
-            createComponent();
-            return nextTick();
+          beforeEach(async () => {
+            canApproveResponse.data.project.mergeRequest.approvedBy.nodes =
+              approvedByCurrentUser.data.project.mergeRequest.approvedBy.nodes;
+
+            canApproveResponse.data.project.mergeRequest.approvedBy.nodes[0].id = 2;
+
+            createComponent({}, canApproveResponse);
+            await waitForPromises();
           });
 
           it('approve additionally action is rendered', () => {
@@ -227,9 +201,9 @@ describe('MRWidget approvals', () => {
       });
 
       describe('when approve action is clicked', () => {
-        beforeEach(() => {
-          createComponent();
-          return nextTick();
+        beforeEach(async () => {
+          createComponent({}, canApproveResponse);
+          await waitForPromises();
         });
 
         it('shows loading icon', () => {
@@ -258,10 +232,6 @@ describe('MRWidget approvals', () => {
           it('emits to eventHub', () => {
             expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
           });
-
-          it('calls store setApprovals', () => {
-            expect(mr.setApprovals).toHaveBeenCalledWith(testApprovals());
-          });
         });
 
         describe('and error', () => {
@@ -286,12 +256,12 @@ describe('MRWidget approvals', () => {
     });
 
     describe('when user has approved', () => {
-      beforeEach(() => {
-        mr.approvals.user_has_approved = true;
-        mr.approvals.user_can_approve = false;
+      beforeEach(async () => {
+        const response = JSON.parse(JSON.stringify(approvedByCurrentUser));
 
-        createComponent();
-        return nextTick();
+        createComponent({}, response);
+
+        await waitForPromises();
       });
 
       it('revoke action is rendered', () => {
@@ -316,10 +286,6 @@ describe('MRWidget approvals', () => {
           it('emits to eventHub', () => {
             expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
           });
-
-          it('calls store setApprovals', () => {
-            expect(mr.setApprovals).toHaveBeenCalledWith(testApprovals());
-          });
         });
 
         describe('and error', () => {
@@ -329,7 +295,7 @@ describe('MRWidget approvals', () => {
             return nextTick();
           });
 
-          it('flashes error message', () => {
+          it('alerts error message', () => {
             expect(createAlert).toHaveBeenCalledWith({ message: UNAPPROVE_ERROR });
           });
         });
@@ -338,19 +304,24 @@ describe('MRWidget approvals', () => {
   });
 
   describe('approvals optional summary', () => {
+    let optionalApprovalsResponse;
+
+    beforeEach(() => {
+      optionalApprovalsResponse = JSON.parse(JSON.stringify(approvedByCurrentUser));
+    });
+
     describe('when no approvals required and no approvers', () => {
       beforeEach(() => {
-        mr.approvals.approved_by = [];
-        mr.approvals.approvals_required = 0;
-        mr.approvals.user_has_approved = false;
+        optionalApprovalsResponse.data.project.mergeRequest.approvedBy.nodes = [];
+        optionalApprovalsResponse.data.project.mergeRequest.approvalsRequired = 0;
       });
 
       describe('and can approve', () => {
-        beforeEach(() => {
-          mr.approvals.user_can_approve = true;
+        beforeEach(async () => {
+          optionalApprovalsResponse.data.project.mergeRequest.userPermissions.canApprove = true;
 
-          createComponent();
-          return nextTick();
+          createComponent({}, optionalApprovalsResponse);
+          await waitForPromises();
         });
 
         it('is shown', () => {
@@ -363,11 +334,9 @@ describe('MRWidget approvals', () => {
       });
 
       describe('and cannot approve', () => {
-        beforeEach(() => {
-          mr.approvals.user_can_approve = false;
-
-          createComponent();
-          return nextTick();
+        beforeEach(async () => {
+          createComponent({}, optionalApprovalsResponse);
+          await nextTick();
         });
 
         it('is shown', () => {
@@ -382,9 +351,9 @@ describe('MRWidget approvals', () => {
   });
 
   describe('approvals summary', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent();
-      return nextTick();
+      await nextTick();
     });
 
     it('is rendered with props', () => {
@@ -393,41 +362,7 @@ describe('MRWidget approvals', () => {
       expect(findOptionalSummary().exists()).toBe(false);
       expect(summary.exists()).toBe(true);
       expect(summary.props()).toMatchObject({
-        projectPath: 'gitlab-org/gitlab',
-        iid: '1',
-        updatedCount: 0,
-      });
-    });
-  });
-
-  describe('invalid rules', () => {
-    beforeEach(() => {
-      mr.approvals.merge_request_approvers_available = true;
-      createComponent();
-    });
-
-    it('does not render related components', () => {
-      expect(findInvalidRules().exists()).toBe(false);
-    });
-
-    describe('when invalid rules are present', () => {
-      beforeEach(() => {
-        mr.approvals.invalid_approvers_rules = [{ name: RULE_NAME }];
-        createComponent();
-      });
-
-      it('renders related components', () => {
-        const invalidRules = findInvalidRules();
-
-        expect(invalidRules.exists()).toBe(true);
-
-        const invalidRulesText = invalidRules.text();
-
-        expect(invalidRulesText).toContain(RULE_NAME);
-        expect(invalidRulesText).toContain(
-          'GitLab has approved this rule automatically to unblock the merge request.',
-        );
-        expect(invalidRulesText).toContain('Learn more.');
+        approvalState: approvedByCurrentUser.data.project.mergeRequest,
       });
     });
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_optional_spec.js b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_optional_spec.js
index e6fb0495947..bf3df70d423 100644
--- a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_optional_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_optional_spec.js
@@ -13,11 +13,6 @@ describe('MRWidget approvals summary optional', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findHelpLink = () => wrapper.findComponent(GlLink);
 
   describe('when can approve', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_spec.js b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_spec.js
index e75ce7c60c9..8c6b3cc464c 100644
--- a/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/approvals/approvals_summary_spec.js
@@ -1,11 +1,10 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { mount } from '@vue/test-utils';
-import approvedByMultipleUsers from 'test_fixtures/graphql/merge_requests/approvals/approved_by.query.graphql_multiple_users.json';
-import noApprovalsResponse from 'test_fixtures/graphql/merge_requests/approvals/approved_by.query.graphql_no_approvals.json';
-import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approved_by.query.graphql.json';
+import approvedByMultipleUsers from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql_multiple_users.json';
+import noApprovalsResponse from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql_no_approvals.json';
+import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
 import waitForPromises from 'helpers/wait_for_promises';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ApprovalsSummary from '~/vue_merge_request_widget/components/approvals/approvals_summary.vue';
 import {
@@ -14,32 +13,22 @@ import {
   APPROVED_BY_YOU_AND_OTHERS,
 } from '~/vue_merge_request_widget/components/approvals/messages';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
-import approvedByQuery from 'ee_else_ce/vue_merge_request_widget/components/approvals/queries/approved_by.query.graphql';
 
 Vue.use(VueApollo);
 
 describe('MRWidget approvals summary', () => {
-  const originalUserId = gon.current_user_id;
   let wrapper;
 
-  const createComponent = (response = approvedByCurrentUser) => {
+  const createComponent = (data = approvedByCurrentUser) => {
     wrapper = mount(ApprovalsSummary, {
       propsData: {
-        projectPath: 'gitlab-org/gitlab',
-        iid: '1',
+        approvalState: data.data.project.mergeRequest,
       },
-      apolloProvider: createMockApollo([[approvedByQuery, jest.fn().mockResolvedValue(response)]]),
     });
   };
 
   const findAvatars = () => wrapper.findComponent(UserAvatarList);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-    gon.current_user_id = originalUserId;
-  });
-
   describe('when approved', () => {
     beforeEach(async () => {
       createComponent();
diff --git a/spec/frontend/vue_merge_request_widget/components/artifacts_list_app_spec.js b/spec/frontend/vue_merge_request_widget/components/artifacts_list_app_spec.js
index 52e2393bf05..332f14a1721 100644
--- a/spec/frontend/vue_merge_request_widget/components/artifacts_list_app_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/artifacts_list_app_spec.js
@@ -26,7 +26,6 @@ describe('Merge Requests Artifacts list app', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/artifacts_list_spec.js b/spec/frontend/vue_merge_request_widget/components/artifacts_list_spec.js
index b7bf72cd215..bb049a5d52f 100644
--- a/spec/frontend/vue_merge_request_widget/components/artifacts_list_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/artifacts_list_spec.js
@@ -18,10 +18,6 @@ describe('Artifacts List', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     mountComponent(data);
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/extensions/child_content_spec.js b/spec/frontend/vue_merge_request_widget/components/extensions/child_content_spec.js
index 198a4c2823a..3a621db7b44 100644
--- a/spec/frontend/vue_merge_request_widget/components/extensions/child_content_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/extensions/child_content_spec.js
@@ -20,11 +20,6 @@ function factory(propsData) {
 }
 
 describe('MR widget extension child content', () => {
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders child components', () => {
     factory({
       data: {
diff --git a/spec/frontend/vue_merge_request_widget/components/extensions/status_icon_spec.js b/spec/frontend/vue_merge_request_widget/components/extensions/status_icon_spec.js
index f3aa5bb774f..ffa6b5538d3 100644
--- a/spec/frontend/vue_merge_request_widget/components/extensions/status_icon_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/extensions/status_icon_spec.js
@@ -11,10 +11,6 @@ function factory(propsData = {}) {
 }
 
 describe('MR widget extensions status icon', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders loading icon', () => {
     factory({ name: 'test', isLoading: true, iconName: 'failed' });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_collapsible_extension_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_collapsible_extension_spec.js
index 81f266d8070..6b22c2e26ac 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_collapsible_extension_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_collapsible_extension_spec.js
@@ -25,10 +25,6 @@ describe('Merge Request Collapsible Extension', () => {
   const findErrorMessage = () => wrapper.find('.js-error-state');
   const findIcon = () => wrapper.findComponent(GlIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('while collapsed', () => {
     beforeEach(() => {
       mountComponent(data);
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_alert_message_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_alert_message_spec.js
index 5d923d0383f..01178dab9bb 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_alert_message_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_alert_message_spec.js
@@ -11,10 +11,6 @@ function createComponent(propsData = {}) {
 }
 
 describe('MrWidgetAlertMessage', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render a GlAert', () => {
     createComponent({ type: 'danger' });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_author_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_author_spec.js
index 8a42e2e2ce7..7eafccae083 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_author_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_author_spec.js
@@ -29,7 +29,6 @@ describe('MrWidgetAuthor', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     window.gl = oldWindowGl;
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_author_time_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_author_time_spec.js
index 90a29d15488..534b745aed2 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_author_time_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_author_time_spec.js
@@ -23,10 +23,6 @@ describe('MrWidgetAuthorTime', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders provided action text', () => {
     expect(wrapper.text()).toContain('Merged by');
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_container_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_container_spec.js
index 8dadb0c65d0..25de76ba33c 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_container_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_container_spec.js
@@ -13,10 +13,6 @@ describe('MrWidgetContainer', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has layout', () => {
     factory();
 
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_icon_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_icon_spec.js
index 6a9b019fb4f..090a96d576c 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_icon_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_icon_spec.js
@@ -15,10 +15,6 @@ describe('MrWidgetIcon', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders icon and container', () => {
     expect(wrapper.element.className).toContain('circle-icon-container');
     expect(wrapper.findComponent(GlIcon).props('name')).toEqual(TEST_ICON);
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_container_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_container_spec.js
index 13beb43e10b..18842e996de 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_container_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_pipeline_container_spec.js
@@ -29,10 +29,6 @@ describe('MrWidgetPipelineContainer', () => {
     mock.onGet().reply(HTTP_STATUS_OK, {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDeploymentList = () => wrapper.findComponent(DeploymentList);
   const findCIErrorMessage = () => wrapper.findByTestId('ci-error-message');
 
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
index ec047fe0714..f284ec98a73 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_rebase_spec.js
@@ -1,3 +1,4 @@
+import { GlModal } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import WidgetRebase from '~/vue_merge_request_widget/components/states/mr_widget_rebase.vue';
@@ -8,8 +9,11 @@ jest.mock('~/vue_shared/plugins/global_toast');
 
 let wrapper;
 
-function createWrapper(propsData) {
+function createWrapper(propsData, provideData) {
   wrapper = mount(WidgetRebase, {
+    provide: {
+      ...provideData,
+    },
     propsData,
     data() {
       return {
@@ -19,6 +23,7 @@ function createWrapper(propsData) {
           userPermissions: {
             pushToSourceBranch: propsData.mr.canPushToSourceBranch,
           },
+          pipelines: propsData.mr.pipelines,
         },
       };
     },
@@ -37,11 +42,8 @@ describe('Merge request widget rebase component', () => {
   const findRebaseMessageText = () => findRebaseMessage().text();
   const findStandardRebaseButton = () => wrapper.find('[data-testid="standard-rebase-button"]');
   const findRebaseWithoutCiButton = () => wrapper.find('[data-testid="rebase-without-ci-button"]');
+  const findModal = () => wrapper.findComponent(GlModal);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
   describe('while rebasing', () => {
     it('should show progress message', () => {
       createWrapper({
@@ -199,6 +201,72 @@ describe('Merge request widget rebase component', () => {
         expect(rebaseMock).toHaveBeenCalledWith({ skipCi: true });
       });
     });
+
+    describe('security modal', () => {
+      it('displays modal and rebases after confirming', () => {
+        createWrapper(
+          {
+            mr: {
+              rebaseInProgress: false,
+              canPushToSourceBranch: true,
+              sourceProjectFullPath: 'user/forked',
+              targetProjectFullPath: 'root/original',
+              pipelines: {
+                nodes: [
+                  {
+                    id: '1',
+                    project: {
+                      id: '2',
+                      fullPath: 'user/forked',
+                    },
+                  },
+                ],
+              },
+            },
+            service: {
+              rebase: rebaseMock,
+              poll: pollMock,
+            },
+          },
+          { canCreatePipelineInTargetProject: true },
+        );
+
+        findModal().vm.show = jest.fn();
+
+        findStandardRebaseButton().vm.$emit('click');
+
+        expect(findModal().vm.show).toHaveBeenCalled();
+
+        findModal().vm.$emit('primary');
+
+        expect(rebaseMock).toHaveBeenCalled();
+      });
+
+      it('does not display modal', () => {
+        createWrapper(
+          {
+            mr: {
+              rebaseInProgress: false,
+              canPushToSourceBranch: true,
+              sourceProjectFullPath: 'user/forked',
+              targetProjectFullPath: 'root/original',
+            },
+            service: {
+              rebase: rebaseMock,
+              poll: pollMock,
+            },
+          },
+          { canCreatePipelineInTargetProject: false },
+        );
+
+        findModal().vm.show = jest.fn();
+
+        findStandardRebaseButton().vm.$emit('click');
+
+        expect(findModal().vm.show).not.toHaveBeenCalled();
+        expect(rebaseMock).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('without permissions', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_related_links_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_related_links_spec.js
index 15522f7ac1d..42a16090510 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_related_links_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_related_links_spec.js
@@ -9,10 +9,6 @@ describe('MRWidgetRelatedLinks', () => {
     wrapper = shallowMount(RelatedLinks, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('closesText', () => {
       it('returns Closes text for open merge request', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_status_icon_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_status_icon_spec.js
index 530549b7b9c..b210327aa31 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_status_icon_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_status_icon_spec.js
@@ -17,11 +17,6 @@ describe('MR widget status icon component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('while loading', () => {
     it('renders loading icon', () => {
       createWrapper({ status: 'loading' });
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_suggest_pipeline_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_suggest_pipeline_spec.js
index 73358edee78..70c76687a79 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_suggest_pipeline_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_suggest_pipeline_spec.js
@@ -18,10 +18,6 @@ describe('MRWidgetSuggestPipeline', () => {
   describe('template', () => {
     let wrapper;
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     describe('core functionality', () => {
       const findOkBtn = () => wrapper.find('[data-testid="ok"]');
       let trackingSpy;
diff --git a/spec/frontend/vue_merge_request_widget/components/review_app_link_spec.js b/spec/frontend/vue_merge_request_widget/components/review_app_link_spec.js
index e393b56034d..48484551d59 100644
--- a/spec/frontend/vue_merge_request_widget/components/review_app_link_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/review_app_link_spec.js
@@ -17,10 +17,6 @@ describe('review app link', () => {
     wrapper = shallowMount(ReviewAppLink, { propsData: props });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders provided link as href attribute', () => {
     expect(wrapper.attributes('href')).toBe(props.link);
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/commit_edit_spec.js b/spec/frontend/vue_merge_request_widget/components/states/commit_edit_spec.js
index c0add94e6ed..f520c6a4f78 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/commit_edit_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/commit_edit_spec.js
@@ -26,10 +26,6 @@ describe('Commits edit component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findTextarea = () => wrapper.find('.form-control');
 
   it('has a correct label', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
index e4448346685..c2ab0e384e8 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/merge_checks_failed_spec.js
@@ -12,10 +12,6 @@ function factory(propsData = {}) {
 }
 
 describe('Merge request widget merge checks failed state component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     mrState                                                                  | displayText
     ${{ approvals: true, isApproved: false }}                                | ${'approvalNeeded'}
diff --git a/spec/frontend/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog_spec.js b/spec/frontend/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog_spec.js
index c9aca01083d..7d471b91c37 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/merge_failed_pipeline_confirmation_dialog_spec.js
@@ -37,10 +37,6 @@ describe('MergeFailedPipelineConfirmationDialog', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render informational text explaining why merging immediately can be dangerous', () => {
     expect(trimText(wrapper.text())).toContain(
       'The latest pipeline for this merge request did not succeed. The latest changes are unverified. Are you sure you want to attempt to merge?',
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
index 08700e834d7..3e18ee75125 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_archived_spec.js
@@ -10,11 +10,6 @@ describe('MRWidgetArchived', () => {
     wrapper = shallowMount(archivedComponent, { propsData: { mr: {} } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders error icon', () => {
     expect(wrapper.findComponent(StateContainer).exists()).toBe(true);
     expect(wrapper.findComponent(StateContainer).props().status).toBe('failed');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled_spec.js
index fef5fee5f19..65d170cae8b 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled_spec.js
@@ -83,8 +83,6 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
   afterEach(() => {
     window.gl = oldWindowGl;
-    wrapper.destroy();
-    wrapper = null;
   });
 
   describe('computed', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed_spec.js
index 826f708069c..9b043bda72d 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed_spec.js
@@ -18,10 +18,6 @@ describe('MRWidgetAutoMergeFailed', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     createComponent({
       mr: { mergeError },
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
index ac18ccf9e26..6c3b7f76fe6 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_checking_spec.js
@@ -9,11 +9,6 @@ describe('MRWidgetChecking', () => {
     wrapper = shallowMount(CheckingComponent, { propsData: { mr: {} } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders loading icon', () => {
     expect(wrapper.findComponent(StateContainer).exists()).toBe(true);
     expect(wrapper.findComponent(StateContainer).props().status).toBe('loading');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js
index 5d2d1fdd6f1..e4febda1daa 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js
@@ -36,10 +36,6 @@ describe('Commits message dropdown component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDropdownElements = () => wrapper.findAllComponents(GlDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commits_header_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commits_header_spec.js
index a6d3a6286a7..b3843b066df 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commits_header_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commits_header_spec.js
@@ -21,10 +21,6 @@ describe('Commits header component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
   const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
   const findTargetBranchMessage = () => wrapper.find('.label-branch');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
index 2ca9dc61745..7f0a171d712 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_conflicts_spec.js
@@ -50,10 +50,6 @@ describe('MRWidgetConflicts', () => {
     await nextTick();
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   // There are two permissions we need to consider:
   //
   // 1. Is the user allowed to merge to the target branch?
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js
index 833fa27d453..38e5422325a 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_failed_to_merge_spec.js
@@ -28,10 +28,6 @@ describe('MRWidgetFailedToMerge', () => {
     jest.spyOn(window, 'clearInterval').mockImplementation();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('interval', () => {
     it('sets interval to refresh', () => {
       createComponent();
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merged_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merged_spec.js
index a3aa563b516..e44e2834a0e 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merged_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merged_spec.js
@@ -62,10 +62,6 @@ describe('MRWidgetMerged', () => {
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findButtonByText = (text) =>
     wrapper.findAll('button').wrappers.find((w) => w.text() === text);
   const findRemoveSourceBranchButton = () => findButtonByText('Delete source branch');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
index 5408f731b34..ca75ca11e5b 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_merging_spec.js
@@ -29,10 +29,6 @@ describe('MRWidgetMerging', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders information about merge request being merged', () => {
     const message = wrapper.findComponent(BoldText).props('message');
     expect(message).toContain('Merging!');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_missing_branch_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_missing_branch_spec.js
index f29cf55f7ce..fca25b8bb94 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_missing_branch_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_missing_branch_spec.js
@@ -15,10 +15,6 @@ function factory(sourceBranchRemoved) {
 }
 
 describe('MRWidgetMissingBranch', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     sourceBranchRemoved | branchName
     ${true}             | ${'source'}
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
index 42515c597c5..40b053282de 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_not_allowed_spec.js
@@ -10,11 +10,6 @@ describe('MRWidgetNotAllowed', () => {
     wrapper = shallowMount(notAllowedComponent);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders success icon', () => {
     expect(wrapper.findComponent(StatusIcon).exists()).toBe(true);
     expect(wrapper.findComponent(StatusIcon).props().status).toBe('success');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge_spec.js
index 6de0c06c33d..c8fa1399dcb 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge_spec.js
@@ -1,28 +1,58 @@
-import Vue, { nextTick } from 'vue';
+import { GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NothingToMerge from '~/vue_merge_request_widget/components/states/nothing_to_merge.vue';
 
 describe('NothingToMerge', () => {
-  describe('template', () => {
-    const Component = Vue.extend(NothingToMerge);
-    const newBlobPath = '/foo';
-    const vm = new Component({
-      el: document.createElement('div'),
+  let wrapper;
+  const newBlobPath = '/foo';
+
+  const defaultProps = {
+    mr: {
+      newBlobPath,
+    },
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMountExtended(NothingToMerge, {
       propsData: {
-        mr: { newBlobPath },
+        ...props,
+      },
+      stubs: {
+        GlSprintf,
       },
     });
+  };
+
+  const findCreateButton = () => wrapper.findByTestId('createFileButton');
+  const findNothingToMergeTextBody = () => wrapper.findByTestId('nothing-to-merge-body');
+
+  describe('With Blob link', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows the component with the correct text and highlights', () => {
+      expect(wrapper.text()).toContain('This merge request contains no changes.');
+      expect(findNothingToMergeTextBody().text()).toContain(
+        'Use merge requests to propose changes to your project and discuss them with your team. To make changes, push a commit or edit this merge request to use a different branch.',
+      );
+    });
+
+    it('shows the Create file button with the correct attributes', () => {
+      const createButton = findCreateButton();
+
+      expect(createButton.exists()).toBe(true);
+      expect(createButton.attributes('href')).toBe(newBlobPath);
+    });
+  });
 
-    it('should have correct elements', () => {
-      expect(vm.$el.classList.contains('mr-widget-body')).toBe(true);
-      expect(vm.$el.querySelector('[data-testid="createFileButton"]').href).toContain(newBlobPath);
-      expect(vm.$el.innerText).toContain('Use merge requests to propose changes to your project');
+  describe('Without Blob link', () => {
+    beforeEach(() => {
+      createComponent({ mr: { newBlobPath: '' } });
     });
 
-    it('should not show new blob link if there is no link available', () => {
-      vm.mr.newBlobPath = null;
-      nextTick(() => {
-        expect(vm.$el.querySelector('[data-testid="createFileButton"]')).toEqual(null);
-      });
+    it('does not show the Create file button', () => {
+      expect(findCreateButton().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
index c0197b5e20a..d99106df0a2 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked_spec.js
@@ -10,11 +10,6 @@ describe('MRWidgetPipelineBlocked', () => {
     wrapper = shallowMount(PipelineBlockedComponent);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders error icon', () => {
     expect(wrapper.findComponent(StatusIcon).exists()).toBe(true);
     expect(wrapper.findComponent(StatusIcon).props().status).toBe('failed');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
index 8bae2b62ed1..ea93463f3ab 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_pipeline_failed_spec.js
@@ -19,11 +19,6 @@ describe('PipelineFailed', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should render error status icon', () => {
     createComponent();
 
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
index aaa4591d67d..02b71ebf183 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -20,10 +20,6 @@ describe('ShaMismatch', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render warning message', () => {
     expect(wrapper.text()).toContain('Merge blocked: new changes were just added.');
   });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_squash_before_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_squash_before_merge_spec.js
index c839fa17fe5..97f8e695df9 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_squash_before_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_squash_before_merge_spec.js
@@ -14,10 +14,6 @@ describe('Squash before merge component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
   describe('checkbox', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
index c97b42f61ac..58b9f162815 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions_spec.js
@@ -21,10 +21,6 @@ describe('UnresolvedDiscussions', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('triggers the correct notes event when the jump to first unresolved discussion button is clicked', () => {
     jest.spyOn(notesEventHub, '$emit');
 
@@ -38,10 +34,6 @@ describe('UnresolvedDiscussions', () => {
       wrapper = createComponent({ path: TEST_HOST });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should have correct elements', () => {
       const text = removeBreakLine(wrapper.text()).trim();
       expect(text).toContain('Merge blocked:');
diff --git a/spec/frontend/vue_merge_request_widget/components/states/new_ready_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/new_ready_to_merge_spec.js
index 5ec9654a4af..20d06a7aaee 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/new_ready_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/new_ready_to_merge_spec.js
@@ -15,10 +15,6 @@ function factory({ canMerge }) {
 }
 
 describe('New ready to merge state component', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     canMerge
     ${true}
diff --git a/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js b/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
index e610ceb2122..43ce1769ff3 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/work_in_progress_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import getStateQueryResponse from 'test_fixtures/graphql/merge_requests/get_state.query.graphql.json';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import WorkInProgress, {
   MSG_SOMETHING_WENT_WRONG,
   MSG_MARK_READY,
@@ -22,7 +22,7 @@ const TEST_MR_IID = '23';
 const TEST_MR_TITLE = 'Test MR Title';
 const TEST_PROJECT_PATH = 'lorem/ipsum';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/merge_request');
 
 describe('~/vue_merge_request_widget/components/states/work_in_progress.vue', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
index 366ea113162..adefce9060c 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
@@ -11,10 +11,6 @@ function factory(propsData = {}) {
 }
 
 describe('~/vue_merge_request_widget/components/widget/action_buttons.vue', () => {
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('tertiaryButtons', () => {
     it('renders buttons', () => {
       factory({
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_spec.js
index 973866176c2..5887670a58d 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/widget_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/widget/widget_spec.js
@@ -50,10 +50,6 @@ describe('~/vue_merge_request_widget/components/widget/widget.vue', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('on mount', () => {
     it('fetches collapsed', async () => {
       const fetchCollapsedData = jest
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_action_button_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_action_button_spec.js
index 1bad5dacefa..785515ae846 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_action_button_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_action_button_spec.js
@@ -25,10 +25,6 @@ describe('Deployment action button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when passed only icon via props', () => {
     beforeEach(() => {
       factory({
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
index 41df485b0de..1fdbbadf8b0 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_actions_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { visitUrl } from '~/lib/utils/url_utility';
 import {
@@ -21,7 +21,7 @@ import {
   retryDetails,
 } from './deployment_mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/lib/utils/url_utility');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 
@@ -54,7 +54,6 @@ describe('DeploymentAction component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     confirmAction.mockReset();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_list_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_list_spec.js
index 948d7ebab5e..77dac4204db 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_list_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_list_spec.js
@@ -28,7 +28,6 @@ describe('~/vue_merge_request_widget/components/deployment/deployment_list.vue',
 
   afterEach(() => {
     wrapper?.destroy?.();
-    wrapper = null;
   });
 
   describe('with few deployments', () => {
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js
index f310f7669a9..74122f47ad3 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js
@@ -32,10 +32,6 @@ describe('Deployment component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('always renders DeploymentInfo', () => {
     expect(wrapper.findComponent(DeploymentInfo).exists()).toBe(true);
   });
diff --git a/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
index 8994fa522d0..7a151c26934 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_view_button_spec.js
@@ -28,10 +28,6 @@ describe('Deployment View App button', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findReviewAppLink = () => wrapper.findComponent(ReviewAppLink);
   const findMrWigdetDeploymentDropdown = () => wrapper.findComponent(GlDropdown);
   const findMrWigdetDeploymentDropdownIcon = () =>
diff --git a/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js b/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
index 548b68bc103..d2d622d0534 100644
--- a/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
+++ b/spec/frontend/vue_merge_request_widget/extensions/test_report/index_spec.js
@@ -73,7 +73,6 @@ describe('Test report extension', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/extentions/accessibility/index_spec.js b/spec/frontend/vue_merge_request_widget/extentions/accessibility/index_spec.js
index 01049e54a7f..40158917f52 100644
--- a/spec/frontend/vue_merge_request_widget/extentions/accessibility/index_spec.js
+++ b/spec/frontend/vue_merge_request_widget/extentions/accessibility/index_spec.js
@@ -39,7 +39,6 @@ describe('Accessibility extension', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/extentions/code_quality/index_spec.js b/spec/frontend/vue_merge_request_widget/extentions/code_quality/index_spec.js
index 67b327217ef..4b7870842bd 100644
--- a/spec/frontend/vue_merge_request_widget/extentions/code_quality/index_spec.js
+++ b/spec/frontend/vue_merge_request_widget/extentions/code_quality/index_spec.js
@@ -61,7 +61,6 @@ describe('Code Quality extension', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/extentions/terraform/index_spec.js b/spec/frontend/vue_merge_request_widget/extentions/terraform/index_spec.js
index 13384e1efca..52a244107bd 100644
--- a/spec/frontend/vue_merge_request_widget/extentions/terraform/index_spec.js
+++ b/spec/frontend/vue_merge_request_widget/extentions/terraform/index_spec.js
@@ -48,7 +48,6 @@ describe('Terraform extension', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/mr_widget_how_to_merge_modal_spec.js b/spec/frontend/vue_merge_request_widget/mr_widget_how_to_merge_modal_spec.js
index 015d394312a..20f1796008a 100644
--- a/spec/frontend/vue_merge_request_widget/mr_widget_how_to_merge_modal_spec.js
+++ b/spec/frontend/vue_merge_request_widget/mr_widget_how_to_merge_modal_spec.js
@@ -15,11 +15,6 @@ describe('MRWidgetHowToMerge', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeEach(() => {
     mountComponent();
   });
diff --git a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
index f37276ad594..fad501ee7f5 100644
--- a/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_merge_request_widget/mr_widget_options_spec.js
@@ -1,9 +1,10 @@
 import { GlBadge, GlLink, GlIcon, GlButton, GlDropdown } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import * as Sentry from '@sentry/browser';
+import approvedByCurrentUser from 'test_fixtures/graphql/merge_requests/approvals/approvals.query.graphql.json';
 import getStateQueryResponse from 'test_fixtures/graphql/merge_requests/get_state.query.graphql.json';
 import readyToMergeResponse from 'test_fixtures/graphql/merge_requests/states/ready_to_merge.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -20,6 +21,7 @@ import {
   registerExtension,
   registeredExtensions,
 } from '~/vue_merge_request_widget/components/extensions';
+import { STATE_QUERY_POLLING_INTERVAL_BACKOFF } from '~/vue_merge_request_widget/constants';
 import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/constants';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import MrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
@@ -28,6 +30,7 @@ import StatusIcon from '~/vue_merge_request_widget/components/extensions/status_
 import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
 import getStateQuery from '~/vue_merge_request_widget/queries/get_state.query.graphql';
 import readyToMergeQuery from 'ee_else_ce/vue_merge_request_widget/queries/states/ready_to_merge.query.graphql';
+import approvalsQuery from 'ee_else_ce/vue_merge_request_widget/components/approvals/queries/approvals.query.graphql';
 import userPermissionsQuery from '~/vue_merge_request_widget/queries/permissions.query.graphql';
 import conflictsStateQuery from '~/vue_merge_request_widget/queries/states/conflicts.query.graphql';
 import { faviconDataUrl, overlayDataUrl } from '../lib/utils/mock_data';
@@ -60,6 +63,8 @@ jest.mock('@sentry/browser', () => ({
 Vue.use(VueApollo);
 
 describe('MrWidgetOptions', () => {
+  let stateQueryHandler;
+  let queryResponse;
   let wrapper;
   let mock;
 
@@ -83,37 +88,41 @@ describe('MrWidgetOptions', () => {
 
   afterEach(() => {
     mock.restore();
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
     wrapper.destroy();
-
     gl.mrWidgetData = {};
-    gon.features = {};
   });
 
-  const createComponent = (mrData = mockData, options = {}) => {
-    wrapper = mount(MrWidgetOptions, {
+  const createComponent = (mrData = mockData, options = {}, data = {}, fullMount = true) => {
+    const mounting = fullMount ? mount : shallowMount;
+
+    queryResponse = {
+      data: {
+        project: {
+          ...getStateQueryResponse.data.project,
+          mergeRequest: {
+            ...getStateQueryResponse.data.project.mergeRequest,
+            mergeError: mrData.mergeError || null,
+          },
+        },
+      },
+    };
+    stateQueryHandler = jest.fn().mockResolvedValue(queryResponse);
+    wrapper = mounting(MrWidgetOptions, {
       propsData: {
         mrData: { ...mrData },
       },
       data() {
-        return { loading: false };
+        return {
+          loading: false,
+          ...data,
+        };
       },
 
       ...options,
       apolloProvider: createMockApollo([
-        [
-          getStateQuery,
-          jest.fn().mockResolvedValue({
-            data: {
-              project: {
-                ...getStateQueryResponse.data.project,
-                mergeRequest: {
-                  ...getStateQueryResponse.data.project.mergeRequest,
-                  mergeError: mrData.mergeError || null,
-                },
-              },
-            },
-          }),
-        ],
+        [approvalsQuery, jest.fn().mockResolvedValue(approvedByCurrentUser)],
+        [getStateQuery, stateQueryHandler],
         [readyToMergeQuery, jest.fn().mockResolvedValue(readyToMergeResponse)],
         [
           userPermissionsQuery,
@@ -351,18 +360,6 @@ describe('MrWidgetOptions', () => {
         });
       });
 
-      describe('initPolling', () => {
-        it('should call SmartInterval', () => {
-          wrapper.vm.initPolling();
-
-          expect(SmartInterval).toHaveBeenCalledWith(
-            expect.objectContaining({
-              callback: wrapper.vm.checkStatus,
-            }),
-          );
-        });
-      });
-
       describe('initDeploymentsPolling', () => {
         it('should call SmartInterval', () => {
           wrapper.vm.initDeploymentsPolling();
@@ -529,23 +526,64 @@ describe('MrWidgetOptions', () => {
         });
       });
 
-      describe('resumePolling', () => {
-        it('should call stopTimer on pollingInterval', () => {
-          jest.spyOn(wrapper.vm.pollingInterval, 'resume').mockImplementation(() => {});
+      describe('Apollo query', () => {
+        const interval = 5;
+        const data = 'foo';
+        const mockCheckStatus = jest.fn().mockResolvedValue({ data });
+        const mockSetGraphqlData = jest.fn();
+        const mockSetData = jest.fn();
 
-          wrapper.vm.resumePolling();
+        beforeEach(() => {
+          wrapper.destroy();
+
+          return createComponent(
+            mockData,
+            {},
+            {
+              pollInterval: interval,
+              startingPollInterval: interval,
+              mr: {
+                setData: mockSetData,
+                setGraphqlData: mockSetGraphqlData,
+              },
+              service: {
+                checkStatus: mockCheckStatus,
+              },
+            },
+            false,
+          );
+        });
 
-          expect(wrapper.vm.pollingInterval.resume).toHaveBeenCalled();
+        describe('normal polling behavior', () => {
+          it('responds to the GraphQL query finishing', () => {
+            expect(mockSetGraphqlData).toHaveBeenCalledWith(queryResponse.data.project);
+            expect(mockCheckStatus).toHaveBeenCalled();
+            expect(mockSetData).toHaveBeenCalledWith(data, undefined);
+            expect(stateQueryHandler).toHaveBeenCalledTimes(1);
+          });
         });
-      });
 
-      describe('stopPolling', () => {
-        it('should call stopTimer on pollingInterval', () => {
-          jest.spyOn(wrapper.vm.pollingInterval, 'stopTimer').mockImplementation(() => {});
+        describe('external event control', () => {
+          describe('enablePolling', () => {
+            it('enables the Apollo query polling using the event hub', () => {
+              eventHub.$emit('EnablePolling');
+
+              expect(stateQueryHandler).toHaveBeenCalled();
+              jest.advanceTimersByTime(interval * STATE_QUERY_POLLING_INTERVAL_BACKOFF);
+              expect(stateQueryHandler).toHaveBeenCalledTimes(2);
+            });
+          });
+
+          describe('disablePolling', () => {
+            it('disables the Apollo query polling using the event hub', () => {
+              expect(stateQueryHandler).toHaveBeenCalledTimes(1);
 
-          wrapper.vm.stopPolling();
+              eventHub.$emit('DisablePolling');
+              jest.advanceTimersByTime(interval * STATE_QUERY_POLLING_INTERVAL_BACKOFF);
 
-          expect(wrapper.vm.pollingInterval.stopTimer).toHaveBeenCalled();
+              expect(stateQueryHandler).toHaveBeenCalledTimes(1); // no additional polling after a real interval timeout
+            });
+          });
         });
       });
     });
@@ -890,11 +928,7 @@ describe('MrWidgetOptions', () => {
   });
 
   describe('mock extension', () => {
-    let pollRequest;
-
     beforeEach(() => {
-      pollRequest = jest.spyOn(Poll.prototype, 'makeRequest');
-
       registerExtension(workingExtension());
 
       createComponent();
@@ -945,10 +979,6 @@ describe('MrWidgetOptions', () => {
       expect(collapsedSection.findComponent(GlButton).exists()).toBe(true);
       expect(collapsedSection.findComponent(GlButton).text()).toBe('Full report');
     });
-
-    it('extension polling is not called if enablePolling flag is not passed', () => {
-      expect(pollRequest).toHaveBeenCalledTimes(0);
-    });
   });
 
   describe('expansion', () => {
@@ -1235,10 +1265,6 @@ describe('MrWidgetOptions', () => {
     });
 
     describe('widget container', () => {
-      afterEach(() => {
-        delete window.gon.features.refactorSecurityExtension;
-      });
-
       it('should not be displayed when the refactor_security_extension feature flag is turned off', () => {
         createComponent();
         expect(findWidgetContainer().exists()).toBe(false);
diff --git a/spec/frontend/vue_merge_request_widget/stores/get_state_key_spec.js b/spec/frontend/vue_merge_request_widget/stores/get_state_key_spec.js
index 88d9d0b4cff..a6288b9c725 100644
--- a/spec/frontend/vue_merge_request_widget/stores/get_state_key_spec.js
+++ b/spec/frontend/vue_merge_request_widget/stores/get_state_key_spec.js
@@ -20,7 +20,7 @@ describe('getStateKey', () => {
     };
     const bound = getStateKey.bind(context);
 
-    expect(bound()).toEqual(null);
+    expect(bound()).toEqual('checking');
 
     context.detailedMergeStatus = 'MERGEABLE';
 
diff --git a/spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js b/spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js
index 12c5c190e26..217103ab25c 100644
--- a/spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js
+++ b/spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js
@@ -32,10 +32,6 @@ describe('Alert Details Sidebar To Do', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findToDoButton = () => wrapper.find('[data-testid="alert-todo-button"]');
 
   describe('updating the alert to do', () => {
diff --git a/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
deleted file mode 100644
index ca9d4488870..00000000000
--- a/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File row header component adds multiple ellipsises after 40 characters 1`] = `
-<div
-  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
-  title="app/assets/javascripts/merge_requests/widget/diffs/notes"
->
-  <gl-truncate-stub
-    class="bold"
-    position="middle"
-    text="app/assets/javascripts/merge_requests/widget/diffs/notes"
-  />
-</div>
-`;
-
-exports[`File row header component renders file path 1`] = `
-<div
-  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
-  title="app/assets"
->
-  <gl-truncate-stub
-    class="bold"
-    position="middle"
-    text="app/assets"
-  />
-</div>
-`;
-
-exports[`File row header component trucates path after 40 characters 1`] = `
-<div
-  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
-  title="app/assets/javascripts/merge_requests"
->
-  <gl-truncate-stub
-    class="bold"
-    position="middle"
-    text="app/assets/javascripts/merge_requests"
-  />
-</div>
-`;
diff --git a/spec/frontend/vue_shared/components/actions_button_spec.js b/spec/frontend/vue_shared/components/actions_button_spec.js
index f3fb840b270..8c2f2b52f8e 100644
--- a/spec/frontend/vue_shared/components/actions_button_spec.js
+++ b/spec/frontend/vue_shared/components/actions_button_spec.js
@@ -34,10 +34,6 @@ describe('Actions button component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findButton = () => wrapper.findComponent(GlButton);
   const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
diff --git a/spec/frontend/vue_shared/components/alert_details_table_spec.js b/spec/frontend/vue_shared/components/alert_details_table_spec.js
index 8a9ee4699bd..8e7a10c4d77 100644
--- a/spec/frontend/vue_shared/components/alert_details_table_spec.js
+++ b/spec/frontend/vue_shared/components/alert_details_table_spec.js
@@ -41,11 +41,6 @@ describe('AlertDetails', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findTableComponent = () => wrapper.findComponent(GlTable);
   const findTableKeys = () => findTableComponent().findAll('tbody td:first-child');
   const findTableFieldValueByKey = (fieldKey) =>
diff --git a/spec/frontend/vue_shared/components/awards_list_spec.js b/spec/frontend/vue_shared/components/awards_list_spec.js
index c7f9d8fd8d5..da5516f8db1 100644
--- a/spec/frontend/vue_shared/components/awards_list_spec.js
+++ b/spec/frontend/vue_shared/components/awards_list_spec.js
@@ -64,16 +64,7 @@ const REACTION_CONTROL_CLASSES = [
 describe('vue_shared/components/awards_list', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const createComponent = (props = {}) => {
-    if (wrapper) {
-      throw new Error('There should only be one wrapper created per test');
-    }
-
     wrapper = mount(AwardsList, { propsData: props });
   };
   const matchingEmojiTag = (name) => expect.stringMatching(`gl-emoji data-name="${name}"`);
@@ -98,7 +89,6 @@ describe('vue_shared/components/awards_list', () => {
         addButtonClass: TEST_ADD_BUTTON_CLASS,
       });
     });
-
     it('shows awards in correct order', () => {
       expect(findAwardsData()).toEqual([
         {
diff --git a/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
index ce7fd40937f..6acd1f51a86 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
@@ -24,10 +24,6 @@ describe('Blob Rich Viewer component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the passed content without transformations', () => {
     expect(wrapper.html()).toContain(content);
   });
diff --git a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
index 4b44311b253..a480e0869e8 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
@@ -23,10 +23,6 @@ describe('Blob Simple Viewer component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('does not fail if content is empty', () => {
     const spy = jest.spyOn(window.console, 'error');
     createComponent('');
diff --git a/spec/frontend/vue_shared/components/changed_file_icon_spec.js b/spec/frontend/vue_shared/components/changed_file_icon_spec.js
index ea708b6f3fe..d1b1e58f5d7 100644
--- a/spec/frontend/vue_shared/components/changed_file_icon_spec.js
+++ b/spec/frontend/vue_shared/components/changed_file_icon_spec.js
@@ -21,10 +21,6 @@ describe('Changed file icon', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findIconName = () => findIcon().props('name');
   const findIconClasses = () => findIcon().classes();
diff --git a/spec/frontend/vue_shared/components/chronic_duration_input_spec.js b/spec/frontend/vue_shared/components/chronic_duration_input_spec.js
index 6932a812287..2a40511affb 100644
--- a/spec/frontend/vue_shared/components/chronic_duration_input_spec.js
+++ b/spec/frontend/vue_shared/components/chronic_duration_input_spec.js
@@ -10,8 +10,6 @@ describe('vue_shared/components/chronic_duration_input', () => {
   let hiddenElement;
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     textElement = null;
     hiddenElement = null;
   });
@@ -22,10 +20,6 @@ describe('vue_shared/components/chronic_duration_input', () => {
   };
 
   const createComponent = (props = {}) => {
-    if (wrapper) {
-      throw new Error('There should only be one wrapper created per test');
-    }
-
     wrapper = mount(ChronicDurationInput, { propsData: props });
     findComponents();
   };
diff --git a/spec/frontend/vue_shared/components/ci_badge_link_spec.js b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
index 4f24ec2d015..afb509b9fe6 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -82,10 +82,6 @@ describe('CI Badge Link Component', () => {
     wrapper = shallowMount(CiBadgeLink, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each(Object.keys(statuses))('should render badge for status: %s', (status) => {
     createComponent({ status: statuses[status] });
 
diff --git a/spec/frontend/vue_shared/components/ci_icon_spec.js b/spec/frontend/vue_shared/components/ci_icon_spec.js
index 2064bee9673..31d63654168 100644
--- a/spec/frontend/vue_shared/components/ci_icon_spec.js
+++ b/spec/frontend/vue_shared/components/ci_icon_spec.js
@@ -7,11 +7,6 @@ describe('CI Icon component', () => {
 
   const findIconWrapper = () => wrapper.find('[data-testid="ci-icon-wrapper"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should render a span element with an svg', () => {
     wrapper = shallowMount(ciIcon, {
       propsData: {
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js
index b18b00e70bb..08a9c2a42d8 100644
--- a/spec/frontend/vue_shared/components/clipboard_button_spec.js
+++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js
@@ -59,11 +59,6 @@ describe('clipboard button', () => {
     expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('bv::hide::tooltip', 'clipboard-button-1');
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('without gfm', () => {
     beforeEach(() => {
       createWrapper({
diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
index 31c08260dd0..584e29d94c4 100644
--- a/spec/frontend/vue_shared/components/clone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/clone_dropdown_spec.js
@@ -21,11 +21,6 @@ describe('Clone Dropdown Button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('rendering', () => {
     it('matches the snapshot', () => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/code_block_highlighted_spec.js b/spec/frontend/vue_shared/components/code_block_highlighted_spec.js
index 181692e61b5..25283eb1211 100644
--- a/spec/frontend/vue_shared/components/code_block_highlighted_spec.js
+++ b/spec/frontend/vue_shared/components/code_block_highlighted_spec.js
@@ -11,10 +11,6 @@ describe('Code Block Highlighted', () => {
     wrapper = shallowMount(CodeBlock, { propsData });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders highlighted code if language is supported', async () => {
     createComponent({ code, language: 'javascript' });
 
diff --git a/spec/frontend/vue_shared/components/code_block_spec.js b/spec/frontend/vue_shared/components/code_block_spec.js
index 9a4dbcc47ff..0fdfb96cb23 100644
--- a/spec/frontend/vue_shared/components/code_block_spec.js
+++ b/spec/frontend/vue_shared/components/code_block_spec.js
@@ -13,10 +13,6 @@ describe('Code Block', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('overwrites the default slot', () => {
     createComponent({}, { default: 'DEFAULT SLOT' });
 
diff --git a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
index 060048c4bbd..a839af3b709 100644
--- a/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
+++ b/spec/frontend/vue_shared/components/color_picker/color_picker_spec.js
@@ -34,10 +34,6 @@ describe('ColorPicker', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('label', () => {
     it('hides the label if the label is not passed', () => {
       createComponent(shallowMount);
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
index fe614f03119..700556edfd5 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/color_item_spec.js
@@ -20,10 +20,6 @@ describe('ColorItem', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the correct title', () => {
     expect(wrapper.text()).toBe(propsData.title);
   });
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/color_select_root_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/color_select_root_spec.js
index 5b0772f6e34..61a9ab3225e 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/color_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/color_select_root_spec.js
@@ -3,7 +3,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/color_select_dropdown/dropdown_contents.vue';
 import DropdownValue from '~/vue_shared/components/color_select_dropdown/dropdown_value.vue';
@@ -13,7 +13,7 @@ import ColorSelectRoot from '~/vue_shared/components/color_select_dropdown/color
 import { DROPDOWN_VARIANT } from '~/vue_shared/components/color_select_dropdown/constants';
 import { colorQueryResponse, updateColorMutationResponse, color } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 
@@ -60,10 +60,6 @@ describe('LabelsSelectRoot', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     const defaultClasses = ['labels-select-wrapper', 'gl-relative'];
 
@@ -145,7 +141,7 @@ describe('LabelsSelectRoot', () => {
       await waitForPromises();
     });
 
-    it('creates flash with error message', () => {
+    it('creates alert with error message', () => {
       expect(createAlert).toHaveBeenCalledWith({
         captureError: true,
         message: 'Error fetching epic color.',
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_color_view_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_color_view_spec.js
index 303824c77b3..914dfdbaab0 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_color_view_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_color_view_spec.js
@@ -22,10 +22,6 @@ describe('DropdownContentsColorView', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findColors = () => wrapper.findAllComponents(ColorItem);
   const findColorList = () => wrapper.findComponent(GlDropdownForm);
 
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
index ee4d3a2630a..c07faab20d0 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_contents_spec.js
@@ -28,10 +28,6 @@ describe('DropdownContent', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findColorView = () => wrapper.findComponent(DropdownContentsColorView);
   const findDropdownHeader = () => wrapper.findComponent(DropdownHeader);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_header_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_header_spec.js
index d203d78477f..6c8aabe1c7f 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_header_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_header_spec.js
@@ -15,10 +15,6 @@ describe('DropdownHeader', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     createComponent();
   });
diff --git a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
index 5bbdb136353..825f37c97e0 100644
--- a/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
+++ b/spec/frontend/vue_shared/components/color_select_dropdown/dropdown_value_spec.js
@@ -22,10 +22,6 @@ describe('DropdownValue', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there is a color set', () => {
     it('renders the color', () => {
       expect(findColorItems()).toHaveLength(2);
diff --git a/spec/frontend/vue_shared/components/commit_spec.js b/spec/frontend/vue_shared/components/commit_spec.js
index 1893e127f6f..62a2738d8df 100644
--- a/spec/frontend/vue_shared/components/commit_spec.js
+++ b/spec/frontend/vue_shared/components/commit_spec.js
@@ -24,10 +24,6 @@ describe('Commit component', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render a fork icon if it does not represent a tag', () => {
     createComponent({
       tag: false,
diff --git a/spec/frontend/vue_shared/components/confidentiality_badge_spec.js b/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
index 3f7ec156c19..92cd7597637 100644
--- a/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
+++ b/spec/frontend/vue_shared/components/confidentiality_badge_spec.js
@@ -1,14 +1,11 @@
 import { GlBadge } from '@gitlab/ui';
 
 import { shallowMount } from '@vue/test-utils';
-import { WorkspaceType, TYPE_ISSUE, TYPE_EPIC } from '~/issues/constants';
+import { TYPE_ISSUE, TYPE_EPIC, WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 
 import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 
-const createComponent = ({
-  workspaceType = WorkspaceType.project,
-  issuableType = TYPE_ISSUE,
-} = {}) =>
+const createComponent = ({ workspaceType = WORKSPACE_PROJECT, issuableType = TYPE_ISSUE } = {}) =>
   shallowMount(ConfidentialityBadge, {
     propsData: {
       workspaceType,
@@ -23,14 +20,10 @@ describe('ConfidentialityBadge', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
-    workspaceType            | issuableType  | expectedTooltip
-    ${WorkspaceType.project} | ${TYPE_ISSUE} | ${'Only project members with at least the Reporter role, the author, and assignees can view or be notified about this issue.'}
-    ${WorkspaceType.group}   | ${TYPE_EPIC}  | ${'Only group members with at least the Reporter role can view or be notified about this epic.'}
+    workspaceType        | issuableType  | expectedTooltip
+    ${WORKSPACE_PROJECT} | ${TYPE_ISSUE} | ${'Only project members with at least the Reporter role, the author, and assignees can view or be notified about this issue.'}
+    ${WORKSPACE_GROUP}   | ${TYPE_EPIC}  | ${'Only group members with at least the Reporter role can view or be notified about this epic.'}
   `(
     'should render gl-badge with correct tooltip when workspaceType is $workspaceType and issuableType is $issuableType',
     ({ workspaceType, issuableType, expectedTooltip }) => {
diff --git a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js
index a660643d74f..d7f94c00d09 100644
--- a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_modal_spec.js
@@ -24,7 +24,7 @@ describe('Confirm Danger Modal', () => {
   const findAdditionalMessage = () => wrapper.findByTestId('confirm-danger-message');
   const findPrimaryAction = () => findModal().props('actionPrimary');
   const findCancelAction = () => findModal().props('actionCancel');
-  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[0][attr];
+  const findPrimaryActionAttributes = (attr) => findPrimaryAction().attributes[attr];
 
   const createComponent = ({ provide = {} } = {}) =>
     shallowMountExtended(ConfirmDangerModal, {
@@ -42,10 +42,6 @@ describe('Confirm Danger Modal', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the default warning message', () => {
     expect(findDefaultWarning().text()).toBe(CONFIRM_DANGER_WARNING);
   });
diff --git a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js
index a179afccae0..379b5cde4d5 100644
--- a/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_danger/confirm_danger_spec.js
@@ -32,10 +32,6 @@ describe('Confirm Danger Modal', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the button', () => {
     expect(wrapper.html()).toContain(buttonText);
   });
diff --git a/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js b/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
index 1cde92cf522..fbfef5cbe46 100644
--- a/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_fork_modal_spec.js
@@ -21,10 +21,6 @@ describe('vue_shared/components/confirm_fork_modal', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('visible = false', () => {
     beforeEach(() => {
       wrapper = createComponent();
diff --git a/spec/frontend/vue_shared/components/confirm_modal_spec.js b/spec/frontend/vue_shared/components/confirm_modal_spec.js
index c1e682a1aae..283ef52cee7 100644
--- a/spec/frontend/vue_shared/components/confirm_modal_spec.js
+++ b/spec/frontend/vue_shared/components/confirm_modal_spec.js
@@ -47,10 +47,6 @@ describe('vue_shared/components/confirm_modal', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findModal = () => wrapper.findComponent(GlModalStub);
   const findForm = () => wrapper.find('form');
   const findFormData = () =>
diff --git a/spec/frontend/vue_shared/components/content_transition_spec.js b/spec/frontend/vue_shared/components/content_transition_spec.js
index 8bb6d31cce7..5f2b1f096f3 100644
--- a/spec/frontend/vue_shared/components/content_transition_spec.js
+++ b/spec/frontend/vue_shared/components/content_transition_spec.js
@@ -13,11 +13,6 @@ const TEST_SLOTS = [
 describe('~/vue_shared/components/content_transition.vue', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const createComponent = (props = {}, slots = {}) => {
     wrapper = shallowMount(ContentTransition, {
       propsData: {
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_input_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_input_spec.js
index c1495e8264a..a3e5f187f9b 100644
--- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_input_spec.js
+++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_input_spec.js
@@ -18,10 +18,6 @@ describe('DateTimePickerInput', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders label above the input', () => {
     createComponent({
       label: inputLabel,
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
index aa41df438d2..5620b569409 100644
--- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
+++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js
@@ -26,10 +26,6 @@ describe('DateTimePicker', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders dropdown toggle button with selected text', async () => {
     createComponent();
     await nextTick();
diff --git a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
index 79001b9282f..dde2540e121 100644
--- a/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
+++ b/spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js
@@ -17,10 +17,6 @@ describe('Deploy Board Instance', () => {
     });
 
   describe('as a non-canary deployment', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should render a div with the correct css status and tooltip data', () => {
       wrapper = createComponent({
         tooltipText: 'This is a pod',
@@ -43,10 +39,6 @@ describe('Deploy Board Instance', () => {
   });
 
   describe('as a canary deployment', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should render a div with canary class when stable prop is provided as false', async () => {
       wrapper = createComponent({
         stable: false,
@@ -58,10 +50,6 @@ describe('Deploy Board Instance', () => {
   });
 
   describe('as a legend item', () => {
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('should not have a tooltip', () => {
       wrapper = createComponent();
 
diff --git a/spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js b/spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js
index 353d493add9..ca9c2b7d381 100644
--- a/spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js
+++ b/spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js
@@ -16,10 +16,6 @@ describe('Design note pin component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should match the snapshot of note without index', () => {
     createComponent();
     expect(wrapper.element).toMatchSnapshot();
diff --git a/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js b/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js
index 99c973bdd26..930d2fc8cfe 100644
--- a/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js
@@ -110,10 +110,6 @@ describe('Diff Stats Dropdown', () => {
         createComponent({ changed, added, deleted });
       });
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it(`dropdown header should be '${expectedDropdownHeader}'`, () => {
         expect(findChanged().props('text')).toBe(expectedDropdownHeader);
       });
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 6e0717c29d7..694c69fbe9f 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
@@ -18,10 +18,6 @@ describe('DiffViewer', () => {
     wrapper = mount(DiffViewer, { propsData });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders image diff', () => {
     window.gon = {
       relative_url_root: '',
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
index 16f924b44d8..7863ef45817 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js
@@ -42,10 +42,6 @@ describe('ImageDiffViewer component', () => {
     triggerEvent('mouseup', doc.body);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders image diff for replaced', () => {
     createComponent(allProps);
     const metaInfoElements = wrapper.findAll('.image-info');
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
index c4358f0d9cb..661db19ff0e 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
@@ -13,10 +13,6 @@ describe('Diff viewer mode changed component', () => {
     });
   });
 
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders aMode & bMode', () => {
     expect(vm.text()).toContain('File mode changed from 123 to 321');
   });
diff --git a/spec/frontend/vue_shared/components/dismissible_alert_spec.js b/spec/frontend/vue_shared/components/dismissible_alert_spec.js
index 8b1189f25d5..53e7d9fc7fc 100644
--- a/spec/frontend/vue_shared/components/dismissible_alert_spec.js
+++ b/spec/frontend/vue_shared/components/dismissible_alert_spec.js
@@ -16,10 +16,6 @@ describe('vue_shared/components/dismissible_alert', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAlert = () => wrapper.findComponent(GlAlert);
 
   describe('default', () => {
diff --git a/spec/frontend/vue_shared/components/dismissible_container_spec.js b/spec/frontend/vue_shared/components/dismissible_container_spec.js
index 7d8581e11e9..6d179434d1d 100644
--- a/spec/frontend/vue_shared/components/dismissible_container_spec.js
+++ b/spec/frontend/vue_shared/components/dismissible_container_spec.js
@@ -11,10 +11,6 @@ describe('DismissibleContainer', () => {
     featureId: 'some-feature-id',
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     const findBtn = () => wrapper.find('[data-testid="close"]');
     let mockAxios;
diff --git a/spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js b/spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js
index 4b32fbffebe..b184ec4ac54 100644
--- a/spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js
+++ b/spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js
@@ -23,11 +23,6 @@ describe('Dismissible Feedback Alert', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const createFullComponent = () => createComponent({ mountFn: mount });
   const findAlert = () => wrapper.findComponent(GlAlert);
 
diff --git a/spec/frontend/vue_shared/components/dom_element_listener_spec.js b/spec/frontend/vue_shared/components/dom_element_listener_spec.js
index a848c34b7ce..d31e9b867e4 100644
--- a/spec/frontend/vue_shared/components/dom_element_listener_spec.js
+++ b/spec/frontend/vue_shared/components/dom_element_listener_spec.js
@@ -42,10 +42,6 @@ describe('~/vue_shared/components/dom_element_listener.vue', () => {
     };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js b/spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js
index e34ed31b4bf..82130500458 100644
--- a/spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js
+++ b/spec/frontend/vue_shared/components/dropdown/dropdown_button_spec.js
@@ -11,10 +11,6 @@ describe('DropdownButton component', () => {
     wrapper = mount(DropdownButton, { propsData: props, slots });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('dropdownToggleText', () => {
       it('returns default toggle text', () => {
diff --git a/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js b/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
index dd3e55c82bb..4dfee20764c 100644
--- a/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
+++ b/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
@@ -31,10 +31,6 @@ describe('DropdownWidget component', () => {
       },
     });
 
-    // We need to mock out `showDropdown` which
-    // invokes `show` method of BDropdown used inside GlDropdown.
-    // Context: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54895#note_524281679
-    jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
     jest.spyOn(findDropdown().vm, 'hide').mockImplementation();
   };
 
@@ -42,11 +38,6 @@ describe('DropdownWidget component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('passes default selectText prop to dropdown', () => {
     expect(findDropdown().props('text')).toBe('Select');
   });
diff --git a/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js b/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
index 119d6448507..ef42c17984a 100644
--- a/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
+++ b/spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js
@@ -39,10 +39,6 @@ describe('DropdownKeyboardNavigation', () => {
     },
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('onInit', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/ensure_data_spec.js b/spec/frontend/vue_shared/components/ensure_data_spec.js
index eef8b452f5f..217e795bc64 100644
--- a/spec/frontend/vue_shared/components/ensure_data_spec.js
+++ b/spec/frontend/vue_shared/components/ensure_data_spec.js
@@ -59,7 +59,6 @@ describe('EnsureData', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     Sentry.captureException.mockClear();
   });
 
diff --git a/spec/frontend/vue_shared/components/entity_select/project_select_spec.js b/spec/frontend/vue_shared/components/entity_select/project_select_spec.js
index 57dce032d30..32ce2155494 100644
--- a/spec/frontend/vue_shared/components/entity_select/project_select_spec.js
+++ b/spec/frontend/vue_shared/components/entity_select/project_select_spec.js
@@ -63,11 +63,8 @@ describe('ProjectSelect', () => {
   };
   const openListbox = () => findListbox().vm.$emit('shown');
 
-  beforeAll(() => {
-    gon.api_version = apiVersion;
-  });
-
   beforeEach(() => {
+    gon.api_version = apiVersion;
     mock = new MockAdapter(axios);
   });
 
diff --git a/spec/frontend/vue_shared/components/expand_button_spec.js b/spec/frontend/vue_shared/components/expand_button_spec.js
index 170c947e520..ad2a57d90eb 100644
--- a/spec/frontend/vue_shared/components/expand_button_spec.js
+++ b/spec/frontend/vue_shared/components/expand_button_spec.js
@@ -27,10 +27,6 @@ describe('Expand button', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the prepended collapse button', () => {
     expect(expanderPrependEl().isVisible()).toBe(true);
     expect(expanderAppendEl().isVisible()).toBe(false);
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 f0998b1b5c6..dce6c85b5b3 100644
--- a/spec/frontend/vue_shared/components/file_finder/item_spec.js
+++ b/spec/frontend/vue_shared/components/file_finder/item_spec.js
@@ -22,10 +22,6 @@ describe('File finder item spec', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders file name & path', () => {
     createComponent();
 
diff --git a/spec/frontend/vue_shared/components/file_icon_spec.js b/spec/frontend/vue_shared/components/file_icon_spec.js
index 0fcc0678c13..d95773f2218 100644
--- a/spec/frontend/vue_shared/components/file_icon_spec.js
+++ b/spec/frontend/vue_shared/components/file_icon_spec.js
@@ -16,10 +16,6 @@ describe('File Icon component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render a span element and an icon', () => {
     createComponent({
       fileName: 'test.js',
diff --git a/spec/frontend/vue_shared/components/file_row_header_spec.js b/spec/frontend/vue_shared/components/file_row_header_spec.js
index 80f4c275dcc..885a80f73b5 100644
--- a/spec/frontend/vue_shared/components/file_row_header_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_header_spec.js
@@ -1,36 +1,24 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlTruncate } from '@gitlab/ui';
 import FileRowHeader from '~/vue_shared/components/file_row_header.vue';
 
 describe('File row header component', () => {
-  let vm;
+  let wrapper;
 
   function createComponent(path) {
-    vm = shallowMount(FileRowHeader, {
+    wrapper = shallowMount(FileRowHeader, {
       propsData: {
         path,
       },
     });
   }
 
-  afterEach(() => {
-    vm.destroy();
-  });
-
   it('renders file path', () => {
-    createComponent('app/assets');
-
-    expect(vm.element).toMatchSnapshot();
-  });
-
-  it('trucates path after 40 characters', () => {
-    createComponent('app/assets/javascripts/merge_requests');
-
-    expect(vm.element).toMatchSnapshot();
-  });
-
-  it('adds multiple ellipsises after 40 characters', () => {
-    createComponent('app/assets/javascripts/merge_requests/widget/diffs/notes');
+    const path = 'app/assets';
+    createComponent(path);
 
-    expect(vm.element).toMatchSnapshot();
+    const truncate = wrapper.findComponent(GlTruncate);
+    expect(truncate.exists()).toBe(true);
+    expect(truncate.props('text')).toBe(path);
   });
 });
diff --git a/spec/frontend/vue_shared/components/file_row_spec.js b/spec/frontend/vue_shared/components/file_row_spec.js
index b70d4565f56..976866af27c 100644
--- a/spec/frontend/vue_shared/components/file_row_spec.js
+++ b/spec/frontend/vue_shared/components/file_row_spec.js
@@ -6,6 +6,9 @@ import FileIcon from '~/vue_shared/components/file_icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
 
+const scrollIntoViewMock = jest.fn();
+HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+
 describe('File row component', () => {
   let wrapper;
 
@@ -18,10 +21,6 @@ describe('File row component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders name', () => {
     const fileName = 't4';
     createComponent({
@@ -72,11 +71,10 @@ describe('File row component', () => {
       },
       level: 0,
     });
-    jest.spyOn(wrapper.vm, '$emit');
 
     wrapper.element.click();
 
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('toggleTreeOpen', fileName);
+    expect(wrapper.emitted('toggleTreeOpen')[0][0]).toEqual(fileName);
   });
 
   it('calls scrollIntoView if made active', () => {
@@ -89,14 +87,12 @@ describe('File row component', () => {
       level: 0,
     });
 
-    jest.spyOn(wrapper.vm, 'scrollIntoView');
-
     wrapper.setProps({
       file: { ...wrapper.props('file'), active: true },
     });
 
     return nextTick().then(() => {
-      expect(wrapper.vm.scrollIntoView).toHaveBeenCalled();
+      expect(scrollIntoViewMock).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/file_tree_spec.js b/spec/frontend/vue_shared/components/file_tree_spec.js
index e8818e09dc0..9d2fa369910 100644
--- a/spec/frontend/vue_shared/components/file_tree_spec.js
+++ b/spec/frontend/vue_shared/components/file_tree_spec.js
@@ -33,10 +33,6 @@ describe('File Tree component', () => {
       ...pick(x.attributes(), Object.keys(TEST_EXTA_ARGS)),
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('file row component', () => {
     beforeEach(() => {
       createComponent({ file: {} });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index b0e393bbf5e..123714353e2 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -82,10 +82,6 @@ describe('FilteredSearchBarRoot', () => {
     wrapper = createComponent({ sortOptions: mockSortOptions });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('data', () => {
     it('initializes `filterValue`, `selectedSortOption` and `selectedSortDirection` data props and displays the sort dropdown', () => {
       expect(wrapper.vm.filterValue).toEqual([]);
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/actions_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/actions_spec.js
index 63c22aff3d5..dd0ec65c871 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/actions_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/store/modules/filters/actions_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import { mockBranches } from 'jest/vue_shared/components/filtered_search_bar/mock_data';
 import Api from '~/api';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { HTTP_STATUS_OK, HTTP_STATUS_SERVICE_UNAVAILABLE } from '~/lib/utils/http_status';
 import * as actions from '~/vue_shared/components/filtered_search_bar/store/modules/filters/actions';
 import * as types from '~/vue_shared/components/filtered_search_bar/store/modules/filters/mutation_types';
@@ -15,7 +15,7 @@ const labelsEndpoint = 'fake_labels_endpoint';
 const groupEndpoint = 'fake_group_endpoint';
 const projectEndpoint = 'fake_project_endpoint';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Filters actions', () => {
   let state;
@@ -165,16 +165,10 @@ describe('Filters actions', () => {
   });
 
   describe('fetchAuthors', () => {
-    let restoreVersion;
     beforeEach(() => {
-      restoreVersion = gon.api_version;
       gon.api_version = 'v1';
     });
 
-    afterEach(() => {
-      gon.api_version = restoreVersion;
-    });
-
     describe('success', () => {
       beforeEach(() => {
         mock.onAny().replyOnce(HTTP_STATUS_OK, filterUsers);
@@ -305,17 +299,11 @@ describe('Filters actions', () => {
 
   describe('fetchAssignees', () => {
     describe('success', () => {
-      let restoreVersion;
       beforeEach(() => {
         mock.onAny().replyOnce(HTTP_STATUS_OK, filterUsers);
-        restoreVersion = gon.api_version;
         gon.api_version = 'v1';
       });
 
-      afterEach(() => {
-        gon.api_version = restoreVersion;
-      });
-
       it('dispatches RECEIVE_ASSIGNEES_SUCCESS with received data and groupEndpoint set', () => {
         return testAction(
           actions.fetchAssignees,
@@ -350,17 +338,11 @@ describe('Filters actions', () => {
     });
 
     describe('error', () => {
-      let restoreVersion;
       beforeEach(() => {
         mock.onAny().replyOnce(HTTP_STATUS_SERVICE_UNAVAILABLE);
-        restoreVersion = gon.api_version;
         gon.api_version = 'v1';
       });
 
-      afterEach(() => {
-        gon.api_version = restoreVersion;
-      });
-
       it('dispatches RECEIVE_ASSIGNEES_ERROR and groupEndpoint set', () => {
         return testAction(
           actions.fetchAssignees,
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
index 164235e4bb9..9941abbfaea 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js
@@ -120,10 +120,6 @@ describe('BaseToken', () => {
   const getMockSuggestionListSuggestions = () =>
     JSON.parse(findMockSuggestionList().attributes('data-suggestions'));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('data', () => {
     it('calls `getRecentlyUsedSuggestions` to populate `recentSuggestions` when `recentSuggestionsStorageKey` is defined', () => {
       wrapper = createComponent();
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
index 311d5a13280..a6bb32736db 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js
@@ -9,14 +9,15 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BranchToken from '~/vue_shared/components/filtered_search_bar/tokens/branch_token.vue';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
 import { mockBranches, mockBranchToken } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const defaultStubs = {
   Portal: true,
   GlFilteredSearchSuggestionList: {
@@ -54,58 +55,83 @@ describe('BranchToken', () => {
   let mock;
   let wrapper;
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const triggerFetchBranches = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
     describe('fetchBranches', () => {
-      it('calls `config.fetchBranches` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches');
-
-        wrapper.vm.fetchBranches('foo');
+      it('sets loading state', async () => {
+        wrapper = createComponent({
+          config: {
+            fetchBranches: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
+        });
+        await nextTick();
 
-        expect(wrapper.vm.config.fetchBranches).toHaveBeenCalledWith('foo');
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
       });
 
-      it('sets response to `branches` when request is succesful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockResolvedValue({ data: mockBranches });
+      describe('when request is successful', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchBranches: jest.fn().mockResolvedValue({ data: mockBranches }),
+            },
+          });
+        });
+
+        it('calls `config.fetchBranches` with provided searchTerm param', async () => {
+          const searchTerm = 'foo';
+          await triggerFetchBranches(searchTerm);
 
-        wrapper.vm.fetchBranches('foo');
+          expect(findBaseToken().props('config').fetchBranches).toHaveBeenCalledWith(searchTerm);
+        });
+
+        it('sets response to `branches`', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.branches).toEqual(mockBranches);
+          expect(findBaseToken().props('suggestions')).toEqual(mockBranches);
+        });
+
+        it('sets `loading` to false when request completes', async () => {
+          await triggerFetchBranches();
+
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockRejectedValue({});
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchBranches: jest.fn().mockRejectedValue({}),
+            },
+          });
+        });
 
-        wrapper.vm.fetchBranches('foo');
+        it('calls `createAlert` with alert error message when request fails', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching branches.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchBranches').mockRejectedValue({});
 
-        wrapper.vm.fetchBranches('foo');
+        it('sets `loading` to false when request completes', async () => {
+          await triggerFetchBranches();
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
@@ -120,16 +146,13 @@ describe('BranchToken', () => {
       await nextTick();
     }
 
-    beforeEach(async () => {
-      wrapper = createComponent({ value: { data: mockBranches[0].name } });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        branches: mockBranches,
+    beforeEach(() => {
+      wrapper = createComponent({
+        value: { data: mockBranches[0].name },
+        config: {
+          initialBranches: mockBranches,
+        },
       });
-
-      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_contact_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_contact_token_spec.js
index 7be7035a0f2..ce134f7d24e 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_contact_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_contact_token_spec.js
@@ -8,7 +8,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
@@ -22,7 +22,7 @@ import {
   mockProjectCrmContactsQueryResponse,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const defaultStubs = {
   Portal: true,
@@ -79,7 +79,6 @@ describe('CrmContactToken', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -159,7 +158,7 @@ describe('CrmContactToken', () => {
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', async () => {
+      it('calls `createAlert` with alert error message when request fails', async () => {
         mountComponent();
 
         jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_organization_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_organization_token_spec.js
index ecd3e8a04f1..8526631c63d 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_organization_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/crm_organization_token_spec.js
@@ -8,7 +8,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 { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
@@ -22,7 +22,7 @@ import {
   mockProjectCrmOrganizationsQueryResponse,
 } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const defaultStubs = {
   Portal: true,
@@ -78,7 +78,6 @@ describe('CrmOrganizationToken', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -158,7 +157,7 @@ describe('CrmOrganizationToken', () => {
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', async () => {
+      it('calls `createAlert` with alert error message when request fails', async () => {
         mountComponent();
 
         jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
index 773df01ada7..4e00b6837a3 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
@@ -8,7 +8,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 
 import {
@@ -17,10 +17,11 @@ import {
   OPTIONS_NONE_ANY,
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
 import { mockReactionEmojiToken, mockEmojis } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const GlEmoji = { template: '<img/>' };
 const defaultStubs = {
   Portal: true,
@@ -60,58 +61,72 @@ describe('EmojiToken', () => {
   let mock;
   let wrapper;
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const triggerFetchEmojis = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
     describe('fetchEmojis', () => {
-      it('calls `config.fetchEmojis` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchEmojis');
-
-        wrapper.vm.fetchEmojis('foo');
+      it('sets loading state', async () => {
+        wrapper = createComponent({
+          config: {
+            fetchEmojis: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
+        });
+        await nextTick();
 
-        expect(wrapper.vm.config.fetchEmojis).toHaveBeenCalledWith('foo');
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
       });
 
-      it('sets response to `emojis` when request is successful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockResolvedValue(mockEmojis);
+      describe('when request is successful', () => {
+        const searchTerm = 'foo';
 
-        wrapper.vm.fetchEmojis('foo');
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              fetchEmojis: jest.fn().mockResolvedValue({ data: mockEmojis }),
+            },
+          });
+          return triggerFetchEmojis(searchTerm);
+        });
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.emojis).toEqual(mockEmojis);
+        it('calls `config.fetchEmojis` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchEmojis).toHaveBeenCalledWith(searchTerm);
         });
-      });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockRejectedValue({});
+        it('sets response to `emojis`', () => {
+          expect(findBaseToken().props('suggestions')).toEqual(mockEmojis);
+        });
+      });
 
-        wrapper.vm.fetchEmojis('foo');
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchEmojis: jest.fn().mockRejectedValue({}),
+            },
+          });
+          return triggerFetchEmojis();
+        });
 
-        return waitForPromises().then(() => {
+        it('calls `createAlert` with alert error message', () => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching emojis.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockRejectedValue({});
-
-        wrapper.vm.fetchEmojis('foo');
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
@@ -123,15 +138,10 @@ describe('EmojiToken', () => {
     beforeEach(async () => {
       wrapper = createComponent({
         value: { data: `"${mockEmojis[0].name}"` },
+        config: {
+          initialEmojis: mockEmojis,
+        },
       });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        emojis: mockEmojis,
-      });
-
-      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
index 9d96123c17f..b9275409125 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
@@ -11,7 +11,7 @@ import {
   mockRegularLabel,
   mockLabels,
 } from 'jest/sidebar/components/labels/labels_select_vue/mock_data';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -20,7 +20,7 @@ import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label
 
 import { mockLabelToken } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const defaultStubs = {
   Portal: true,
   BaseToken,
@@ -60,103 +60,125 @@ function createComponent(options = {}) {
 describe('LabelToken', () => {
   let mock;
   let wrapper;
+  const defaultLabels = OPTIONS_NONE_ANY;
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const findSuggestions = () => wrapper.findAllComponents(GlFilteredSearchSuggestion);
+  const findTokenSegments = () => wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+  const triggerFetchLabels = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
-    beforeEach(() => {
-      wrapper = createComponent();
-    });
-
     describe('getActiveLabel', () => {
       it('returns label object from labels array based on provided `currentValue` param', () => {
-        expect(wrapper.vm.getActiveLabel(mockLabels, 'Foo Label')).toEqual(mockRegularLabel);
+        wrapper = createComponent();
+
+        expect(findBaseToken().props('getActiveTokenValue')(mockLabels, 'Foo Label')).toEqual(
+          mockRegularLabel,
+        );
       });
     });
 
     describe('getLabelName', () => {
-      it('returns value of `name` or `title` property present in provided label param', () => {
-        let mockLabel = {
-          title: 'foo',
-        };
+      it('returns value of `name` or `title` property present in provided label param', async () => {
+        const customMockLabels = [
+          { title: 'Title with no name label' },
+          { name: 'Name Label', title: 'Title with name label' },
+        ];
+
+        wrapper = createComponent({
+          active: true,
+          config: {
+            ...mockLabelToken,
+            fetchLabels: jest.fn().mockResolvedValue({ data: customMockLabels }),
+          },
+          stubs: { Portal: true },
+        });
 
-        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.title);
+        await waitForPromises();
 
-        mockLabel = {
-          name: 'foo',
-        };
+        const suggestions = findSuggestions();
+        const indexWithTitle = defaultLabels.length;
+        const indexWithName = defaultLabels.length + 1;
 
-        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.name);
+        expect(suggestions.at(indexWithTitle).text()).toBe(customMockLabels[0].title);
+        expect(suggestions.at(indexWithName).text()).toBe(customMockLabels[1].name);
       });
     });
 
     describe('fetchLabels', () => {
-      it('calls `config.fetchLabels` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels');
-
-        wrapper.vm.fetchLabels('foo');
-
-        expect(wrapper.vm.config.fetchLabels).toHaveBeenCalledWith('foo');
-      });
+      describe('when request is successful', () => {
+        const searchTerm = 'foo';
+
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              fetchLabels: jest.fn().mockResolvedValue({ data: mockLabels }),
+            },
+          });
+          await triggerFetchLabels(searchTerm);
+        });
 
-      it('sets response to `labels` when request is succesful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockResolvedValue(mockLabels);
+        it('calls `config.fetchLabels` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchLabels).toHaveBeenCalledWith(searchTerm);
+        });
 
-        wrapper.vm.fetchLabels('foo');
+        it('sets response to `labels`', () => {
+          expect(findBaseToken().props('suggestions')).toEqual(mockLabels);
+        });
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.labels).toEqual(mockLabels);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
-
-        wrapper.vm.fetchLabels('foo');
+      describe('when request fails', () => {
+        beforeEach(async () => {
+          wrapper = createComponent({
+            config: {
+              fetchLabels: jest.fn().mockRejectedValue({}),
+            },
+          });
+          await triggerFetchLabels();
+        });
 
-        return waitForPromises().then(() => {
+        it('calls `createAlert` with alert error message', () => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching labels.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
-
-        wrapper.vm.fetchLabels('foo');
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
   });
 
   describe('template', () => {
-    const defaultLabels = OPTIONS_NONE_ANY;
-
     beforeEach(async () => {
-      wrapper = createComponent({ value: { data: `"${mockRegularLabel.title}"` } });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        labels: mockLabels,
+      wrapper = createComponent({
+        value: { data: `"${mockRegularLabel.title}"` },
+        config: {
+          initialLabels: mockLabels,
+        },
       });
 
       await nextTick();
     });
 
     it('renders base-token component', () => {
-      const baseTokenEl = wrapper.findComponent(BaseToken);
+      const baseTokenEl = findBaseToken();
 
       expect(baseTokenEl.exists()).toBe(true);
       expect(baseTokenEl.props()).toMatchObject({
@@ -166,7 +188,7 @@ describe('LabelToken', () => {
     });
 
     it('renders token item when value is selected', () => {
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
 
       expect(tokenSegments).toHaveLength(3); // Label, =, "Foo Label"
       expect(tokenSegments.at(2).text()).toBe(`~${mockRegularLabel.title}`); // "Foo Label"
@@ -181,12 +203,12 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken, defaultLabels },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
       await nextTick();
 
-      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
+      const suggestions = findSuggestions();
 
       expect(suggestions).toHaveLength(defaultLabels.length);
       defaultLabels.forEach((label, index) => {
@@ -200,7 +222,7 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken, defaultLabels: [] },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
       await nextTick();
@@ -215,11 +237,10 @@ describe('LabelToken', () => {
         config: { ...mockLabelToken },
         stubs: { Portal: true },
       });
-      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
+      const tokenSegments = findTokenSegments();
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-
-      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
+      const suggestions = findSuggestions();
 
       expect(suggestions).toHaveLength(OPTIONS_NONE_ANY.length);
       OPTIONS_NONE_ANY.forEach((label, index) => {
@@ -234,7 +255,7 @@ describe('LabelToken', () => {
           input: mockInput,
         },
       });
-      wrapper.findComponent(BaseToken).vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
+      findBaseToken().vm.$emit('input', [{ data: 'mockData', operator: '=' }]);
 
       expect(mockInput).toHaveBeenLastCalledWith([{ data: 'mockData', operator: '=' }]);
     });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
index 589697fe542..fea1496a80b 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js
@@ -8,16 +8,17 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { sortMilestonesByDueDate } from '~/milestones/utils';
 
 import { DEFAULT_MILESTONES } from '~/vue_shared/components/filtered_search_bar/constants';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
+import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
 import { mockMilestoneToken, mockMilestones, mockRegularMilestone } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/milestones/utils');
 
 const defaultStubs = {
@@ -57,6 +58,12 @@ describe('MilestoneToken', () => {
   let mock;
   let wrapper;
 
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
+  const triggerFetchMilestones = (searchTerm = null) => {
+    findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+    return waitForPromises();
+  };
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
     wrapper = createComponent();
@@ -64,73 +71,77 @@ describe('MilestoneToken', () => {
 
   afterEach(() => {
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
     describe('fetchMilestones', () => {
-      describe('when config.shouldSkipSort is true', () => {
-        beforeEach(() => {
-          wrapper.vm.config.shouldSkipSort = true;
+      it('sets loading state', async () => {
+        wrapper = createComponent({
+          config: {
+            fetchMilestones: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
         });
+        await nextTick();
 
-        afterEach(() => {
-          wrapper.vm.config.shouldSkipSort = false;
-        });
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
+      });
+
+      describe('when config.shouldSkipSort is true', () => {
         it('does not call sortMilestonesByDueDate', async () => {
-          jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockResolvedValue({
-            data: mockMilestones,
+          wrapper = createComponent({
+            config: {
+              shouldSkipSort: true,
+              fetchMilestones: jest.fn().mockResolvedValue({ data: mockMilestones }),
+            },
           });
 
-          wrapper.vm.fetchMilestones();
-
-          await waitForPromises();
+          await triggerFetchMilestones();
 
           expect(sortMilestonesByDueDate).toHaveBeenCalledTimes(0);
         });
       });
 
-      it('calls `config.fetchMilestones` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchMilestones');
-
-        wrapper.vm.fetchMilestones('foo');
+      describe('when request is successful', () => {
+        const searchTerm = 'foo';
 
-        expect(wrapper.vm.config.fetchMilestones).toHaveBeenCalledWith('foo');
-      });
-
-      it('sets response to `milestones` when request is successful', () => {
-        wrapper.vm.config.shouldSkipSort = false;
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              shouldSkipSort: false,
+              fetchMilestones: jest.fn().mockResolvedValue({ data: mockMilestones }),
+            },
+          });
+          return triggerFetchMilestones(searchTerm);
+        });
 
-        jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockResolvedValue({
-          data: mockMilestones,
+        it('calls `config.fetchMilestones` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchMilestones).toHaveBeenCalledWith(searchTerm);
         });
-        wrapper.vm.fetchMilestones();
 
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.milestones).toEqual(mockMilestones);
+        it('sets response to `milestones`', () => {
           expect(sortMilestonesByDueDate).toHaveBeenCalled();
+          expect(findBaseToken().props('suggestions')).toEqual(mockMilestones);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockRejectedValue({});
-
-        wrapper.vm.fetchMilestones('foo');
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchMilestones: jest.fn().mockRejectedValue({}),
+            },
+          });
+          return triggerFetchMilestones();
+        });
 
-        return waitForPromises().then(() => {
+        it('calls `createAlert` with alert error message', () => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching milestones.',
           });
         });
-      });
 
-      it('sets `loading` to false when request completes', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockRejectedValue({});
-
-        wrapper.vm.fetchMilestones('foo');
-
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.loading).toBe(false);
+        it('sets `loading` to false when request completes', () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
         });
       });
     });
@@ -143,15 +154,12 @@ describe('MilestoneToken', () => {
     ];
 
     beforeEach(async () => {
-      wrapper = createComponent({ value: { data: `"${mockRegularMilestone.title}"` } });
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        milestones: mockMilestones,
+      wrapper = createComponent({
+        value: { data: `"${mockRegularMilestone.title}"` },
+        config: {
+          initialMilestones: mockMilestones,
+        },
       });
-
-      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
@@ -228,7 +236,7 @@ describe('MilestoneToken', () => {
 
       it('finds the correct value from the activeToken', () => {
         DEFAULT_MILESTONES.forEach(({ value, title }) => {
-          const activeToken = wrapper.vm.getActiveMilestone([], value);
+          const activeToken = findBaseToken().props('getActiveTokenValue')([], value);
 
           expect(activeToken.title).toEqual(title);
         });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
index 0e5fa0f66d4..5190ab919b1 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js
@@ -2,11 +2,11 @@ import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui'
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
 import { mockReleaseToken } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('ReleaseToken', () => {
   const id = '123';
@@ -27,10 +27,6 @@ describe('ReleaseToken', () => {
       },
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders release value', async () => {
     wrapper = createComponent({ value: { data: id } });
     await nextTick();
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js
index 32cb74d5f80..89003296854 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/user_token_spec.js
@@ -8,7 +8,7 @@ import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 
 import { OPTIONS_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -17,7 +17,7 @@ import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_t
 
 import { mockAuthorToken, mockUsers } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const defaultStubs = {
   Portal: true,
   GlFilteredSearchSuggestionList: {
@@ -67,99 +67,82 @@ function createComponent(options = {}) {
 }
 
 describe('UserToken', () => {
-  const originalGon = window.gon;
   const currentUserLength = 1;
   let mock;
   let wrapper;
 
-  const getBaseToken = () => wrapper.findComponent(BaseToken);
+  const findBaseToken = () => wrapper.findComponent(BaseToken);
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
-    window.gon = originalGon;
     mock.restore();
-    wrapper.destroy();
   });
 
   describe('methods', () => {
     describe('fetchUsers', () => {
+      const triggerFetchUsers = (searchTerm = null) => {
+        findBaseToken().vm.$emit('fetch-suggestions', searchTerm);
+        return waitForPromises();
+      };
+
       beforeEach(() => {
         wrapper = createComponent();
       });
 
-      it('calls `config.fetchUsers` with provided searchTerm param', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchUsers');
-
-        getBaseToken().vm.$emit('fetch-suggestions', mockUsers[0].username);
-
-        expect(wrapper.vm.config.fetchUsers).toHaveBeenCalledWith(
-          mockAuthorToken.fetchPath,
-          mockUsers[0].username,
-        );
-      });
-
-      it('sets response to `users` when request is successful', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchUsers').mockResolvedValue(mockUsers);
-
-        getBaseToken().vm.$emit('fetch-suggestions', 'root');
-
-        return waitForPromises().then(() => {
-          expect(getBaseToken().props('suggestions')).toEqual(mockUsers);
+      it('sets loading state', async () => {
+        wrapper = createComponent({
+          config: {
+            fetchUsers: jest.fn().mockResolvedValue(new Promise(() => {})),
+          },
         });
+        await nextTick();
+
+        expect(findBaseToken().props('suggestionsLoading')).toBe(true);
       });
 
-      // TODO: rm when completed https://gitlab.com/gitlab-org/gitlab/-/issues/345756
-      describe('when there are null users presents', () => {
-        const mockUsersWithNullUser = mockUsers.concat([null]);
+      describe('when request is successful', () => {
+        const searchTerm = 'foo';
 
         beforeEach(() => {
-          jest
-            .spyOn(wrapper.vm.config, 'fetchUsers')
-            .mockResolvedValue({ data: mockUsersWithNullUser });
-
-          getBaseToken().vm.$emit('fetch-suggestions', 'root');
+          wrapper = createComponent({
+            config: {
+              fetchUsers: jest.fn().mockResolvedValue({ data: mockUsers }),
+            },
+          });
+          return triggerFetchUsers(searchTerm);
         });
 
-        describe('when res.data is present', () => {
-          it('filters the successful response when null values are present', () => {
-            return waitForPromises().then(() => {
-              expect(getBaseToken().props('suggestions')).toEqual(mockUsers);
-            });
-          });
+        it('calls `config.fetchUsers` with provided searchTerm param', () => {
+          expect(findBaseToken().props('config').fetchUsers).toHaveBeenCalledWith(searchTerm);
         });
 
-        describe('when response is an array', () => {
-          it('filters the successful response when null values are present', () => {
-            return waitForPromises().then(() => {
-              expect(getBaseToken().props('suggestions')).toEqual(mockUsers);
-            });
-          });
+        it('sets response to `users` when request is successful', () => {
+          expect(findBaseToken().props('suggestions')).toEqual(mockUsers);
         });
       });
 
-      it('calls `createAlert` with flash error message when request fails', () => {
-        jest.spyOn(wrapper.vm.config, 'fetchUsers').mockRejectedValue({});
-
-        getBaseToken().vm.$emit('fetch-suggestions', 'root');
+      describe('when request fails', () => {
+        beforeEach(() => {
+          wrapper = createComponent({
+            config: {
+              fetchUsers: jest.fn().mockRejectedValue({}),
+            },
+          });
+          return triggerFetchUsers();
+        });
 
-        return waitForPromises().then(() => {
+        it('calls `createAlert` with alert error message', () => {
           expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching users.',
           });
         });
-      });
-
-      it('sets `loading` to false when request completes', async () => {
-        jest.spyOn(wrapper.vm.config, 'fetchUsers').mockRejectedValue({});
-
-        getBaseToken().vm.$emit('fetch-suggestions', 'root');
 
-        await waitForPromises();
-
-        expect(getBaseToken().props('suggestionsLoading')).toBe(false);
+        it('sets `loading` to false when request completes', async () => {
+          expect(findBaseToken().props('suggestionsLoading')).toBe(false);
+        });
       });
     });
   });
@@ -178,12 +161,12 @@ describe('UserToken', () => {
         data: { users: mockUsers },
       });
 
-      const baseTokenEl = getBaseToken();
+      const baseTokenEl = findBaseToken();
 
       expect(baseTokenEl.exists()).toBe(true);
       expect(baseTokenEl.props()).toMatchObject({
         suggestions: mockUsers,
-        getActiveTokenValue: wrapper.vm.getActiveUser,
+        getActiveTokenValue: baseTokenEl.props('getActiveTokenValue'),
       });
     });
 
@@ -191,7 +174,6 @@ describe('UserToken', () => {
       wrapper = createComponent({
         value: { data: mockUsers[0].username },
         data: { users: mockUsers },
-        stubs: { Portal: true },
       });
 
       await nextTick();
@@ -215,30 +197,13 @@ describe('UserToken', () => {
           users: [
             {
               ...mockUsers[0],
+              avatarUrl: mockUsers[0].avatar_url,
+              avatar_url: undefined,
             },
           ],
         },
-        stubs: { Portal: true },
       });
 
-      await nextTick();
-
-      expect(getAvatarEl().props('src')).toBe(mockUsers[0].avatar_url);
-
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        users: [
-          {
-            ...mockUsers[0],
-            avatarUrl: mockUsers[0].avatar_url,
-            avatar_url: undefined,
-          },
-        ],
-      });
-
-      await nextTick();
-
       expect(getAvatarEl().props('src')).toBe(mockUsers[0].avatar_url);
     });
 
@@ -264,7 +229,6 @@ describe('UserToken', () => {
       wrapper = createComponent({
         active: true,
         config: { ...mockAuthorToken, defaultUsers: [] },
-        stubs: { Portal: true },
       });
       const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
diff --git a/spec/frontend/vue_shared/components/form/form_footer_actions_spec.js b/spec/frontend/vue_shared/components/form/form_footer_actions_spec.js
index 361b162b6a0..eee8a0c4532 100644
--- a/spec/frontend/vue_shared/components/form/form_footer_actions_spec.js
+++ b/spec/frontend/vue_shared/components/form/form_footer_actions_spec.js
@@ -10,10 +10,6 @@ describe('Form Footer Actions', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders content properly', () => {
     const defaultSlot = 'Foo';
     const prepend = 'Bar';
diff --git a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
index e1da8b690af..4f1603f93ba 100644
--- a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
+++ b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js
@@ -10,10 +10,6 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 describe('InputCopyToggleVisibility', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const valueProp = 'hR8x1fuJbzwu5uFKLf9e';
 
   const createComponent = (options = {}) => {
@@ -21,7 +17,7 @@ describe('InputCopyToggleVisibility', () => {
       InputCopyToggleVisibility,
       merge({}, options, {
         directives: {
-          GlTooltip: createMockDirective(),
+          GlTooltip: createMockDirective('gl-tooltip'),
         },
       }),
     );
diff --git a/spec/frontend/vue_shared/components/form/title_spec.js b/spec/frontend/vue_shared/components/form/title_spec.js
index 452f3723e76..d499f847c72 100644
--- a/spec/frontend/vue_shared/components/form/title_spec.js
+++ b/spec/frontend/vue_shared/components/form/title_spec.js
@@ -12,10 +12,6 @@ describe('Title edit field', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/vue_shared/components/gl_countdown_spec.js b/spec/frontend/vue_shared/components/gl_countdown_spec.js
index af53d256236..1de206123fe 100644
--- a/spec/frontend/vue_shared/components/gl_countdown_spec.js
+++ b/spec/frontend/vue_shared/components/gl_countdown_spec.js
@@ -10,10 +10,6 @@ describe('GlCountdown', () => {
     jest.spyOn(Date, 'now').mockImplementation(() => new Date(now).getTime());
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when there is time remaining', () => {
     beforeEach(async () => {
       wrapper = mount(GlCountdown, {
diff --git a/spec/frontend/vue_shared/components/header_ci_component_spec.js b/spec/frontend/vue_shared/components/header_ci_component_spec.js
index 458f2cc5374..da9bc0f8a2f 100644
--- a/spec/frontend/vue_shared/components/header_ci_component_spec.js
+++ b/spec/frontend/vue_shared/components/header_ci_component_spec.js
@@ -48,11 +48,6 @@ describe('Header CI Component', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('render', () => {
     beforeEach(() => {
       createComponent({ itemName: 'Pipeline' });
diff --git a/spec/frontend/vue_shared/components/help_popover_spec.js b/spec/frontend/vue_shared/components/help_popover_spec.js
index 77c03dc0c3c..76e66d07fa0 100644
--- a/spec/frontend/vue_shared/components/help_popover_spec.js
+++ b/spec/frontend/vue_shared/components/help_popover_spec.js
@@ -23,10 +23,6 @@ describe('HelpPopover', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('with title and content', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/integration_help_text_spec.js b/spec/frontend/vue_shared/components/integration_help_text_spec.js
index c63e46313b3..dd20b09f176 100644
--- a/spec/frontend/vue_shared/components/integration_help_text_spec.js
+++ b/spec/frontend/vue_shared/components/integration_help_text_spec.js
@@ -22,11 +22,6 @@ describe('IntegrationHelpText component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should use the gl components', () => {
     wrapper = createComponent();
 
diff --git a/spec/frontend/vue_shared/components/keep_alive_slots_spec.js b/spec/frontend/vue_shared/components/keep_alive_slots_spec.js
index 10c6cbe6d94..f69a883ee4d 100644
--- a/spec/frontend/vue_shared/components/keep_alive_slots_spec.js
+++ b/spec/frontend/vue_shared/components/keep_alive_slots_spec.js
@@ -37,10 +37,6 @@ describe('~/vue_shared/components/keep_alive_slots.vue', () => {
       isVisible: x.isVisible(),
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js b/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js
index 7ed6a59c844..4e83f3e1c06 100644
--- a/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js
+++ b/spec/frontend/vue_shared/components/listbox_input/listbox_input_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlFormGroup, GlListbox } from '@gitlab/ui';
+import { GlFormGroup, GlCollapsibleListbox } from '@gitlab/ui';
 import ListboxInput from '~/vue_shared/components/listbox_input/listbox_input.vue';
 
 describe('ListboxInput', () => {
@@ -27,7 +27,7 @@ describe('ListboxInput', () => {
 
   // Finders
   const findGlFormGroup = () => wrapper.findComponent(GlFormGroup);
-  const findGlListbox = () => wrapper.findComponent(GlListbox);
+  const findGlListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findInput = () => wrapper.find('input');
 
   const createComponent = (propsData) => {
@@ -153,7 +153,7 @@ describe('ListboxInput', () => {
       expect(findGlListbox().props('searchable')).toBe(true);
     });
 
-    it('passes all items to GlListbox by default', () => {
+    it('passes all items to GlCollapsibleListbox by default', () => {
       createComponent();
 
       expect(findGlListbox().props('items')).toStrictEqual(items);
diff --git a/spec/frontend/vue_shared/components/local_storage_sync_spec.js b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
index a80717a1aea..1c7f419b118 100644
--- a/spec/frontend/vue_shared/components/local_storage_sync_spec.js
+++ b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
@@ -17,7 +17,6 @@ describe('Local Storage Sync', () => {
   const getStorageValue = (value) => localStorage.getItem(STORAGE_KEY, value);
 
   afterEach(() => {
-    wrapper.destroy();
     localStorage.clear();
   });
 
diff --git a/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js b/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
index ecb2b37c3a5..8aab867f32a 100644
--- a/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/apply_suggestion_spec.js
@@ -17,11 +17,6 @@ describe('Apply Suggestion component', () => {
 
   beforeEach(() => createWrapper());
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('initial template', () => {
     it('renders a dropdown with the correct props', () => {
       const dropdown = findDropdown();
diff --git a/spec/frontend/vue_shared/components/markdown/drawio_toolbar_button_spec.js b/spec/frontend/vue_shared/components/markdown/drawio_toolbar_button_spec.js
new file mode 100644
index 00000000000..67f296b1bf0
--- /dev/null
+++ b/spec/frontend/vue_shared/components/markdown/drawio_toolbar_button_spec.js
@@ -0,0 +1,66 @@
+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import DrawioToolbarButton from '~/vue_shared/components/markdown/drawio_toolbar_button.vue';
+import { launchDrawioEditor } from '~/drawio/drawio_editor';
+import { create } from '~/drawio/markdown_field_editor_facade';
+
+jest.mock('~/drawio/drawio_editor');
+jest.mock('~/drawio/markdown_field_editor_facade');
+
+describe('vue_shared/components/markdown/drawio_toolbar_button', () => {
+  let wrapper;
+  let textArea;
+  const uploadsPath = '/uploads';
+  const markdownPreviewPath = '/markdown/preview';
+
+  const buildWrapper = (props = { uploadsPath, markdownPreviewPath }) => {
+    wrapper = shallowMount(DrawioToolbarButton, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    textArea = document.createElement('textarea');
+    textArea.classList.add('js-gfm-input');
+
+    document.body.appendChild(textArea);
+  });
+
+  afterEach(() => {
+    textArea.remove();
+  });
+
+  describe('default', () => {
+    it('renders button that launches draw.io editor', () => {
+      buildWrapper();
+
+      expect(wrapper.findComponent(GlButton).props()).toMatchObject({
+        icon: 'diagram',
+        category: 'tertiary',
+      });
+    });
+  });
+
+  describe('when clicking button', () => {
+    it('launches draw.io editor', async () => {
+      const editorFacadeStub = {};
+
+      create.mockReturnValueOnce(editorFacadeStub);
+
+      buildWrapper();
+
+      await wrapper.findComponent(GlButton).vm.$emit('click');
+
+      expect(create).toHaveBeenCalledWith({
+        markdownPreviewPath,
+        textArea,
+        uploadsPath,
+      });
+      expect(launchDrawioEditor).toHaveBeenCalledWith({
+        editorFacade: editorFacadeStub,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js
index 34071775b9c..becd4257cbe 100644
--- a/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/editor_mode_dropdown_spec.js
@@ -21,14 +21,10 @@ describe('vue_shared/component/markdown/editor_mode_dropdown', () => {
       .filter((item) => item.text().startsWith(text))
       .at(0);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
-    modeText       | value         | dropdownText        | otherMode
-    ${'Rich text'} | ${'richText'} | ${'View markdown'}  | ${'Markdown'}
-    ${'Markdown'}  | ${'markdown'} | ${'View rich text'} | ${'Rich text'}
+    modeText       | value         | dropdownText           | otherMode
+    ${'Rich text'} | ${'richText'} | ${'Viewing rich text'} | ${'Markdown'}
+    ${'Markdown'}  | ${'markdown'} | ${'Viewing markdown'}  | ${'Rich text'}
   `('$modeText', ({ modeText, value, dropdownText, otherMode }) => {
     beforeEach(() => {
       createComponent({ value });
diff --git a/spec/frontend/vue_shared/components/markdown/field_view_spec.js b/spec/frontend/vue_shared/components/markdown/field_view_spec.js
index 176ccfc5a69..1bbbe0896f2 100644
--- a/spec/frontend/vue_shared/components/markdown/field_view_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/field_view_spec.js
@@ -6,20 +6,14 @@ import { renderGFM } from '~/behaviors/markdown/render_gfm';
 jest.mock('~/behaviors/markdown/render_gfm');
 
 describe('Markdown Field View component', () => {
-  let wrapper;
-
   function createComponent() {
-    wrapper = shallowMount(MarkdownFieldView);
+    shallowMount(MarkdownFieldView);
   }
 
   beforeEach(() => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('processes rendering with GFM', () => {
     expect(renderGFM).toHaveBeenCalledTimes(1);
   });
diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index ed417097e1e..68f05e5119d 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -3,6 +3,7 @@ import { nextTick } from 'vue';
 import { GlTabs } from '@gitlab/ui';
 import HeaderComponent from '~/vue_shared/components/markdown/header.vue';
 import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
+import DrawioToolbarButton from '~/vue_shared/components/markdown/drawio_toolbar_button.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 describe('Markdown field header component', () => {
@@ -26,6 +27,7 @@ describe('Markdown field header component', () => {
     findToolbarButtons()
       .filter((button) => button.props(prop) === value)
       .at(0);
+  const findDrawioToolbarButton = () => wrapper.findComponent(DrawioToolbarButton);
 
   beforeEach(() => {
     window.gl = {
@@ -37,10 +39,6 @@ describe('Markdown field header component', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('markdown header buttons', () => {
     it('renders the buttons with the correct title', () => {
       const buttons = [
@@ -197,4 +195,24 @@ describe('Markdown field header component', () => {
       expect(findToolbarButtons().length).toBe(defaultCount);
     });
   });
+
+  describe('when drawIOEnabled is true', () => {
+    const uploadsPath = '/uploads';
+    const markdownPreviewPath = '/preview';
+
+    beforeEach(() => {
+      createWrapper({
+        drawioEnabled: true,
+        uploadsPath,
+        markdownPreviewPath,
+      });
+    });
+
+    it('renders drawio toolbar button', () => {
+      expect(findDrawioToolbarButton().props()).toEqual({
+        uploadsPath,
+        markdownPreviewPath,
+      });
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
index 26b536984ff..681ff6c8dd3 100644
--- a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import Autosize from 'autosize';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -9,10 +10,15 @@ import BubbleMenu from '~/content_editor/components/bubble_menus/bubble_menu.vue
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { stubComponent } from 'helpers/stub_component';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 
 jest.mock('~/emoji');
+jest.mock('autosize');
 
 describe('vue_shared/component/markdown/markdown_editor', () => {
+  useLocalStorageSpy();
+
   let wrapper;
   const value = 'test markdown';
   const renderMarkdownPath = '/api/markdown';
@@ -57,14 +63,27 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
   const findContentEditor = () => wrapper.findComponent(ContentEditor);
 
+  const enableContentEditor = async () => {
+    findMarkdownField().vm.$emit('enableContentEditor');
+    await nextTick();
+    await waitForPromises();
+  };
+
+  const enableMarkdownEditor = async () => {
+    findContentEditor().vm.$emit('enableMarkdownEditor');
+    await nextTick();
+    await waitForPromises();
+  };
+
   beforeEach(() => {
     window.uploads_path = 'uploads';
     mock = new MockAdapter(axios);
   });
 
   afterEach(() => {
-    wrapper.destroy();
     mock.restore();
+
+    localStorage.clear();
   });
 
   it('displays markdown field by default', () => {
@@ -83,8 +102,133 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
   });
 
+  it('enables content editor switcher when contentEditorEnabled prop is true', () => {
+    buildWrapper({ propsData: { enableContentEditor: true } });
+
+    expect(findMarkdownField().text()).toContain('Rich text');
+  });
+
+  it('hides content editor switcher when contentEditorEnabled prop is false', () => {
+    buildWrapper({ propsData: { enableContentEditor: false } });
+
+    expect(findMarkdownField().text()).not.toContain('Rich text');
+  });
+
+  it('passes down any additional props to markdown field component', () => {
+    const propsData = {
+      line: { text: 'hello world', richText: 'hello world' },
+      lines: [{ text: 'hello world', richText: 'hello world' }],
+      canSuggest: true,
+    };
+
+    buildWrapper({
+      propsData: { ...propsData, myCustomProp: 'myCustomValue', 'data-testid': 'custom id' },
+    });
+
+    expect(findMarkdownField().props()).toMatchObject(propsData);
+    expect(findMarkdownField().vm.$attrs).toMatchObject({
+      myCustomProp: 'myCustomValue',
+
+      // data-testid isn't copied over
+      'data-testid': 'markdown-field',
+    });
+  });
+
+  describe('disabled', () => {
+    it('disables markdown field when disabled prop is true', () => {
+      buildWrapper({ propsData: { disabled: true } });
+
+      expect(findMarkdownField().find('textarea').attributes('disabled')).toBe('disabled');
+    });
+
+    it('enables markdown field when disabled prop is false', () => {
+      buildWrapper({ propsData: { disabled: false } });
+
+      expect(findMarkdownField().find('textarea').attributes('disabled')).toBe(undefined);
+    });
+
+    it('disables content editor when disabled prop is true', async () => {
+      buildWrapper({ propsData: { disabled: true } });
+
+      await enableContentEditor();
+
+      expect(findContentEditor().props('editable')).toBe(false);
+    });
+
+    it('enables content editor when disabled prop is false', async () => {
+      buildWrapper({ propsData: { disabled: false } });
+
+      await enableContentEditor();
+
+      expect(findContentEditor().props('editable')).toBe(true);
+    });
+  });
+
+  describe('autosize', () => {
+    it('autosizes the textarea when the value changes', async () => {
+      buildWrapper();
+      await findTextarea().setValue('Lots of newlines\n\n\n\n\n\n\nMore content\n\n\nand newlines');
+
+      expect(Autosize.update).toHaveBeenCalled();
+    });
+
+    it('autosizes the textarea when the value changes from outside the component', async () => {
+      buildWrapper();
+      wrapper.setProps({ value: 'Lots of newlines\n\n\n\n\n\n\nMore content\n\n\nand newlines' });
+
+      await nextTick();
+      await waitForPromises();
+      expect(Autosize.update).toHaveBeenCalled();
+    });
+
+    it('does not autosize the textarea if markdown editor is disabled', async () => {
+      buildWrapper();
+      await enableContentEditor();
+
+      wrapper.setProps({ value: 'Lots of newlines\n\n\n\n\n\n\nMore content\n\n\nand newlines' });
+
+      expect(Autosize.update).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('autosave', () => {
+    it('automatically saves the textarea value to local storage if autosaveKey is defined', () => {
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234', value: 'This is **markdown**' } });
+
+      expect(localStorage.getItem('autosave/issue/1234')).toBe('This is **markdown**');
+    });
+
+    it("loads value from local storage if autosaveKey is defined, and value isn't", () => {
+      localStorage.setItem('autosave/issue/1234', 'This is **markdown**');
+
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234', value: '' } });
+
+      expect(findTextarea().element.value).toBe('This is **markdown**');
+    });
+
+    it("doesn't load value from local storage if autosaveKey is defined, and value is", () => {
+      localStorage.setItem('autosave/issue/1234', 'This is **markdown**');
+
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234' } });
+
+      expect(findTextarea().element.value).toBe('test markdown');
+    });
+
+    it('does not save the textarea value to local storage if autosaveKey is not defined', () => {
+      buildWrapper({ propsData: { value: 'This is **markdown**' } });
+
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+    });
+
+    it('does not save the textarea value to local storage if value is empty', () => {
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234', value: '' } });
+
+      expect(localStorage.setItem).not.toHaveBeenCalled();
+    });
+  });
+
   it('renders markdown field textarea', () => {
-    buildWrapper();
+    buildWrapper({ propsData: { supportsQuickActions: true } });
 
     expect(findTextarea().attributes()).toEqual(
       expect.objectContaining({
@@ -92,6 +236,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
         name: formFieldName,
         placeholder: formFieldPlaceholder,
         'aria-label': formFieldAriaLabel,
+        'data-supports-quick-actions': 'true',
       }),
     );
 
@@ -107,9 +252,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   it(`emits ${EDITING_MODE_CONTENT_EDITOR} event when enableContentEditor emitted from markdown editor`, async () => {
     buildWrapper();
 
-    findMarkdownField().vm.$emit('enableContentEditor');
-
-    await nextTick();
+    await enableContentEditor();
 
     expect(wrapper.emitted(EDITING_MODE_CONTENT_EDITOR)).toHaveLength(1);
   });
@@ -119,11 +262,8 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       stubs: { ContentEditor: stubComponent(ContentEditor) },
     });
 
-    findMarkdownField().vm.$emit('enableContentEditor');
-
-    await nextTick();
-
-    findContentEditor().vm.$emit('enableMarkdownEditor');
+    await enableContentEditor();
+    await enableMarkdownEditor();
 
     expect(wrapper.emitted(EDITING_MODE_MARKDOWN_FIELD)).toHaveLength(1);
   });
@@ -138,6 +278,16 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       expect(wrapper.emitted('input')).toEqual([[newValue]]);
     });
 
+    it('autosaves the markdown value to local storage', async () => {
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234' } });
+
+      const newValue = 'new value';
+
+      await findTextarea().setValue(newValue);
+
+      expect(localStorage.getItem('autosave/issue/1234')).toBe(newValue);
+    });
+
     describe('when autofocus is true', () => {
       beforeEach(async () => {
         buildWrapper({ attachTo: document.body, propsData: { autofocus: true } });
@@ -159,9 +309,9 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
 
     describe(`when markdown field triggers enableContentEditor event`, () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         buildWrapper();
-        findMarkdownField().vm.$emit('enableContentEditor');
+        await enableContentEditor();
       });
 
       it('displays the content editor', () => {
@@ -169,7 +319,6 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
           expect.objectContaining({
             renderMarkdown: expect.any(Function),
             uploadsPath: window.uploads_path,
-            useBottomToolbar: false,
             markdown: value,
           }),
         );
@@ -198,9 +347,9 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
   });
 
   describe(`when editingMode is ${EDITING_MODE_CONTENT_EDITOR}`, () => {
-    beforeEach(() => {
-      buildWrapper();
-      findMarkdownField().vm.$emit('enableContentEditor');
+    beforeEach(async () => {
+      buildWrapper({ propsData: { autosaveKey: 'issue/1234' } });
+      await enableContentEditor();
     });
 
     describe('when autofocus is true', () => {
@@ -224,6 +373,14 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
       expect(wrapper.emitted('input')).toEqual([[newValue]]);
     });
 
+    it('autosaves the content editor value to local storage', async () => {
+      const newValue = 'new value';
+
+      await findContentEditor().vm.$emit('change', { markdown: newValue });
+
+      expect(localStorage.getItem('autosave/issue/1234')).toBe(newValue);
+    });
+
     it('bubbles up keydown event', () => {
       const event = new Event('keydown');
 
@@ -233,9 +390,7 @@ describe('vue_shared/component/markdown/markdown_editor', () => {
     });
 
     describe(`when richText editor triggers enableMarkdownEditor event`, () => {
-      beforeEach(() => {
-        findContentEditor().vm.$emit('enableMarkdownEditor');
-      });
+      beforeEach(enableMarkdownEditor);
 
       it('hides the content editor', () => {
         expect(findContentEditor().exists()).toBe(false);
diff --git a/spec/frontend/vue_shared/components/markdown/saved_replies_dropdown_spec.js b/spec/frontend/vue_shared/components/markdown/saved_replies_dropdown_spec.js
new file mode 100644
index 00000000000..8ad9ad30c1d
--- /dev/null
+++ b/spec/frontend/vue_shared/components/markdown/saved_replies_dropdown_spec.js
@@ -0,0 +1,62 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import savedRepliesResponse from 'test_fixtures/graphql/saved_replies/saved_replies.query.graphql.json';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import SavedRepliesDropdown from '~/vue_shared/components/markdown/saved_replies_dropdown.vue';
+import savedRepliesQuery from '~/vue_shared/components/markdown/saved_replies.query.graphql';
+
+let wrapper;
+let savedRepliesResp;
+
+function createMockApolloProvider(response) {
+  Vue.use(VueApollo);
+
+  savedRepliesResp = jest.fn().mockResolvedValue(response);
+
+  const requestHandlers = [[savedRepliesQuery, savedRepliesResp]];
+
+  return createMockApollo(requestHandlers);
+}
+
+function createComponent(options = {}) {
+  const { mockApollo } = options;
+
+  return mountExtended(SavedRepliesDropdown, {
+    propsData: {
+      newSavedRepliesPath: '/new',
+    },
+    apolloProvider: mockApollo,
+  });
+}
+
+describe('Saved replies dropdown', () => {
+  it('fetches data when dropdown gets opened', async () => {
+    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+    wrapper = createComponent({ mockApollo });
+
+    wrapper.findByTestId('saved-replies-dropdown-toggle').trigger('click');
+
+    await waitForPromises();
+
+    expect(savedRepliesResp).toHaveBeenCalled();
+  });
+
+  it('adds markdown toolbar attributes to dropdown items', async () => {
+    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+    wrapper = createComponent({ mockApollo });
+
+    wrapper.findByTestId('saved-replies-dropdown-toggle').trigger('click');
+
+    await waitForPromises();
+
+    expect(wrapper.findByTestId('saved-reply-dropdown-item').attributes()).toEqual(
+      expect.objectContaining({
+        'data-md-cursor-offset': '0',
+        'data-md-prepend': 'true',
+        'data-md-tag': 'Saved Reply Content',
+      }),
+    );
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 9db1b779a04..9768bc7a6dd 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -25,7 +25,7 @@ describe('Suggestion Diff component', () => {
         ...props,
       },
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -34,10 +34,6 @@ describe('Suggestion Diff component', () => {
     window.gon.current_user_id = 1;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findApplyButton = () => wrapper.findComponent(ApplySuggestion);
   const findApplyBatchButton = () => wrapper.find('.js-apply-batch-btn');
   const findAddToBatchButton = () => wrapper.find('.js-add-to-batch-btn');
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
index f9a8b64f89b..c46a2d3e117 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js
@@ -36,10 +36,6 @@ describe('SuggestionDiffRow', () => {
   const findNewLineWrapper = () => wrapper.find('.new_line');
   const findSuggestionContent = () => wrapper.find('[data-testid="suggestion-diff-content"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('renders correctly', () => {
     it('renders the correct base suggestion markup', () => {
       factory({
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
index d84483c1663..8c7f51664ad 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -61,11 +61,6 @@ describe('Suggestion Diff component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
index 82210e79799..33e9d6add99 100644
--- a/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js
@@ -20,11 +20,6 @@ describe('toolbar_button', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const getButtonShortcutsAttr = () => {
     return wrapper.findComponent(GlButton).attributes('data-md-shortcuts');
   };
diff --git a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
index b1a1dbbeb7a..fea14f80496 100644
--- a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
@@ -11,10 +11,6 @@ describe('toolbar', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('user can attach file', () => {
     beforeEach(() => {
       createMountedWrapper();
diff --git a/spec/frontend/vue_shared/components/markdown_drawer/markdown_drawer_spec.js b/spec/frontend/vue_shared/components/markdown_drawer/markdown_drawer_spec.js
index 2b311b75f85..37b0767616a 100644
--- a/spec/frontend/vue_shared/components/markdown_drawer/markdown_drawer_spec.js
+++ b/spec/frontend/vue_shared/components/markdown_drawer/markdown_drawer_spec.js
@@ -36,8 +36,6 @@ describe('MarkdownDrawer', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     Object.keys(cache).forEach((key) => delete cache[key]);
   });
 
diff --git a/spec/frontend/vue_shared/components/memory_graph_spec.js b/spec/frontend/vue_shared/components/memory_graph_spec.js
index ae8d5ff78ba..81325fb3269 100644
--- a/spec/frontend/vue_shared/components/memory_graph_spec.js
+++ b/spec/frontend/vue_shared/components/memory_graph_spec.js
@@ -1,10 +1,8 @@
 import { GlSparklineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
 import MemoryGraph from '~/vue_shared/components/memory_graph.vue';
 
 describe('MemoryGraph', () => {
-  const Component = Vue.extend(MemoryGraph);
   let wrapper;
   const metrics = [
     [1573586253.853, '2.87'],
@@ -13,12 +11,10 @@ describe('MemoryGraph', () => {
     [1573586433.853, '3.0066964285714284'],
   ];
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const findGlSparklineChart = () => wrapper.findComponent(GlSparklineChart);
 
   beforeEach(() => {
-    wrapper = shallowMount(Component, {
+    wrapper = shallowMount(MemoryGraph, {
       propsData: {
         metrics,
         width: 100,
@@ -27,19 +23,15 @@ describe('MemoryGraph', () => {
     });
   });
 
-  describe('chartData', () => {
-    it('should calculate chartData', () => {
-      expect(wrapper.vm.chartData.length).toEqual(metrics.length);
-    });
-
-    it('should format date & MB values', () => {
+  describe('Chart data', () => {
+    it('should have formatted date & MB values', () => {
       const formattedData = [
         ['Nov 12 2019 19:17:33', '2.87'],
         ['Nov 12 2019 19:18:33', '2.78'],
         ['Nov 12 2019 19:19:33', '2.78'],
         ['Nov 12 2019 19:20:33', '3.01'],
       ];
-      expect(wrapper.vm.chartData).toEqual(formattedData);
+      expect(findGlSparklineChart().props('data')).toEqual(formattedData);
     });
   });
 
@@ -47,7 +39,7 @@ describe('MemoryGraph', () => {
     it('should draw container with chart', () => {
       expect(wrapper.element).toMatchSnapshot();
       expect(wrapper.find('.memory-graph-container').exists()).toBe(true);
-      expect(wrapper.findComponent(GlSparklineChart).exists()).toBe(true);
+      expect(findGlSparklineChart().exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
index 537367940e0..626f6fc735e 100644
--- a/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/metric_images/store/actions_spec.js
@@ -4,11 +4,11 @@ import actionsFactory from '~/vue_shared/components/metric_images/store/actions'
 import * as types from '~/vue_shared/components/metric_images/store/mutation_types';
 import createStore from '~/vue_shared/components/metric_images/store';
 import testAction from 'helpers/vuex_action_helper';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { fileList, initialData } from '../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 const service = {
   getMetricImages: jest.fn(),
   uploadMetricImage: jest.fn(),
diff --git a/spec/frontend/vue_shared/components/modal_copy_button_spec.js b/spec/frontend/vue_shared/components/modal_copy_button_spec.js
index 61e4e774420..a649b06c50e 100644
--- a/spec/frontend/vue_shared/components/modal_copy_button_spec.js
+++ b/spec/frontend/vue_shared/components/modal_copy_button_spec.js
@@ -6,10 +6,6 @@ import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 describe('modal copy button', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   beforeEach(() => {
     wrapper = shallowMount(ModalCopyButton, {
       propsData: {
diff --git a/spec/frontend/vue_shared/components/navigation_tabs_spec.js b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
index b1bec28bffb..947ee756259 100644
--- a/spec/frontend/vue_shared/components/navigation_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
@@ -38,11 +38,6 @@ describe('navigation tabs component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('should render tabs', () => {
     expect(wrapper.findAllComponents(GlTab)).toHaveLength(data.length);
   });
diff --git a/spec/frontend/vue_shared/components/new_resource_dropdown/new_resource_dropdown_spec.js b/spec/frontend/vue_shared/components/new_resource_dropdown/new_resource_dropdown_spec.js
index 31320b1d2a6..a116233a065 100644
--- a/spec/frontend/vue_shared/components/new_resource_dropdown/new_resource_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/new_resource_dropdown/new_resource_dropdown_spec.js
@@ -21,7 +21,7 @@ import {
   searchProjectsWithinGroupQueryResponse,
 } from './mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('NewResourceDropdown component', () => {
   useLocalStorageSpy();
diff --git a/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js b/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
index 17a62ae8a33..f87674246d1 100644
--- a/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
+++ b/spec/frontend/vue_shared/components/notes/noteable_warning_spec.js
@@ -132,12 +132,6 @@ describe('Issue Warning Component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapperLocked.destroy();
-      wrapperConfidential.destroy();
-      wrapperLockedAndConfidential.destroy();
-    });
-
     it('renders confidential & locked messages with noteable "issue"', () => {
       expect(findLockedBlock(wrapperLocked).text()).toContain('This issue is locked.');
       expect(findConfidentialBlock(wrapperConfidential).text()).toContain(
diff --git a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
index 8f9f1bb336f..7e669fb7c71 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
@@ -30,11 +30,6 @@ describe('Issue placeholder note component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches snapshot', () => {
     createComponent();
 
diff --git a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
index de6ab43bc41..5897b9e0ffc 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js
@@ -12,11 +12,6 @@ describe('Placeholder system note component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches snapshot', () => {
     createComponent();
 
diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js
index bcfd7a8ec70..29e1a9ccf4d 100644
--- a/spec/frontend/vue_shared/components/notes/system_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js
@@ -46,7 +46,6 @@ describe('system note component', () => {
   });
 
   afterEach(() => {
-    vm.destroy();
     mock.restore();
   });
 
diff --git a/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js b/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
index bd4b6a463ab..fa9d3cd28a9 100644
--- a/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
+++ b/spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js
@@ -10,10 +10,6 @@ describe(`TimelineEntryItem`, () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders correctly', () => {
     factory();
 
diff --git a/spec/frontend/vue_shared/components/ordered_layout_spec.js b/spec/frontend/vue_shared/components/ordered_layout_spec.js
index 21588569d6a..b6c8c467028 100644
--- a/spec/frontend/vue_shared/components/ordered_layout_spec.js
+++ b/spec/frontend/vue_shared/components/ordered_layout_spec.js
@@ -37,10 +37,6 @@ describe('Ordered Layout', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when slotKeys are in initial slot order', () => {
     beforeEach(() => {
       createComponent({ slotKeys: regularSlotOrder });
diff --git a/spec/frontend/vue_shared/components/page_size_selector_spec.js b/spec/frontend/vue_shared/components/page_size_selector_spec.js
index 5ec0b863afd..fce7ceee2fe 100644
--- a/spec/frontend/vue_shared/components/page_size_selector_spec.js
+++ b/spec/frontend/vue_shared/components/page_size_selector_spec.js
@@ -14,10 +14,6 @@ describe('Page size selector component', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each(PAGE_SIZES)('shows expected text in the dropdown button for page size %s', (pageSize) => {
     createWrapper({ pageSize });
 
diff --git a/spec/frontend/vue_shared/components/paginated_list_spec.js b/spec/frontend/vue_shared/components/paginated_list_spec.js
index ae9c920ebd2..fc9adab2e2b 100644
--- a/spec/frontend/vue_shared/components/paginated_list_spec.js
+++ b/spec/frontend/vue_shared/components/paginated_list_spec.js
@@ -33,10 +33,6 @@ describe('Pagination links component', () => {
     [glPaginatedList] = wrapper.vm.$children;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Paginated List Component', () => {
     describe('props', () => {
       // We test attrs and not props because we pass through to child component using v-bind:"$attrs"
diff --git a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
index 86a63db0d9e..25bfa688e5b 100644
--- a/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js
@@ -108,16 +108,23 @@ describe('AlertManagementEmptyState', () => {
   const findStatusTabs = () => wrapper.findComponent(GlTabs);
   const findStatusFilterBadge = () => wrapper.findAllComponents(GlBadge);
 
+  const handleFilterItems = (filters) => {
+    Filters().vm.$emit('onFilter', filters);
+    return nextTick();
+  };
+
   describe('Snowplow tracking', () => {
+    const category = 'category';
+    const action = 'action';
+
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');
       mountComponent({
-        props: { trackViewsOptions: { category: 'category', action: 'action' } },
+        props: { trackViewsOptions: { category, action } },
       });
     });
 
     it('should track the items list page views', () => {
-      const { category, action } = wrapper.vm.trackViewsOptions;
       expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
   });
@@ -234,14 +241,14 @@ describe('AlertManagementEmptyState', () => {
         findPagination().vm.$emit('input', 3);
 
         await nextTick();
-        expect(wrapper.vm.previousPage).toBe(2);
+        expect(findPagination().props('prevPage')).toBe(2);
       });
 
       it('returns 0 when it is the first page', async () => {
         findPagination().vm.$emit('input', 1);
 
         await nextTick();
-        expect(wrapper.vm.previousPage).toBe(0);
+        expect(findPagination().props('prevPage')).toBe(0);
       });
     });
 
@@ -265,14 +272,14 @@ describe('AlertManagementEmptyState', () => {
         findPagination().vm.$emit('input', 1);
 
         await nextTick();
-        expect(wrapper.vm.nextPage).toBe(2);
+        expect(findPagination().props('nextPage')).toBe(2);
       });
 
       it('returns `null` when currentPage is already last page', async () => {
         findStatusTabs().vm.$emit('input', 1);
         findPagination().vm.$emit('input', 1);
         await nextTick();
-        expect(wrapper.vm.nextPage).toBeNull();
+        expect(findPagination().props('nextPage')).toBeNull();
       });
     });
   });
@@ -320,36 +327,32 @@ describe('AlertManagementEmptyState', () => {
 
     it('returns correctly applied filter search values', async () => {
       const searchTerm = 'foo';
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        searchTerm,
-      });
-
+      await handleFilterItems([{ type: 'filtered-search-term', value: { data: searchTerm } }]);
       await nextTick();
-      expect(wrapper.vm.filteredSearchValue).toEqual([searchTerm]);
+      expect(Filters().props('initialFilterValue')).toEqual([searchTerm]);
     });
 
-    it('updates props tied to getIncidents GraphQL query', () => {
-      wrapper.vm.handleFilterItems(mockFilters);
-
-      expect(wrapper.vm.authorUsername).toBe('root');
-      expect(wrapper.vm.assigneeUsername).toEqual('root2');
-      expect(wrapper.vm.searchTerm).toBe(mockFilters[2].value.data);
-    });
+    it('updates props tied to getIncidents GraphQL query', async () => {
+      await handleFilterItems(mockFilters);
 
-    it('updates props `searchTerm` and `authorUsername` with empty values when passed filters param is empty', () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        authorUsername: 'foo',
-        searchTerm: 'bar',
-      });
+      const [
+        {
+          value: { data: authorUsername },
+        },
+        {
+          value: { data: assigneeUsername },
+        },
+        searchTerm,
+      ] = Filters().props('initialFilterValue');
 
-      wrapper.vm.handleFilterItems([]);
+      expect(authorUsername).toBe('root');
+      expect(assigneeUsername).toEqual('root2');
+      expect(searchTerm).toBe(mockFilters[2].value.data);
+    });
 
-      expect(wrapper.vm.authorUsername).toBe('');
-      expect(wrapper.vm.searchTerm).toBe('');
+    it('updates props `searchTerm` and `authorUsername` with empty values when passed filters param is empty', async () => {
+      await handleFilterItems([]);
+      expect(Filters().props('initialFilterValue')).toEqual([]);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js b/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js
index 112cdaf74c6..2a1a6342c38 100644
--- a/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js
+++ b/spec/frontend/vue_shared/components/pagination_bar/pagination_bar_spec.js
@@ -25,10 +25,6 @@ describe('Pagination bar', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('events', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js
index d444ad7a733..99a4f776305 100644
--- a/spec/frontend/vue_shared/components/pagination_links_spec.js
+++ b/spec/frontend/vue_shared/components/pagination_links_spec.js
@@ -44,10 +44,6 @@ describe('Pagination links component', () => {
     glPagination = wrapper.findComponent(GlPagination);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should provide translated text to GitLab UI pagination', () => {
     Object.entries(translations).forEach((entry) => {
       expect(glPagination.vm[entry[0]]).toBe(entry[1]);
diff --git a/spec/frontend/vue_shared/components/panel_resizer_spec.js b/spec/frontend/vue_shared/components/panel_resizer_spec.js
index 0e261124cbf..a535fe4939c 100644
--- a/spec/frontend/vue_shared/components/panel_resizer_spec.js
+++ b/spec/frontend/vue_shared/components/panel_resizer_spec.js
@@ -27,10 +27,6 @@ describe('Panel Resizer component', () => {
     el.dispatchEvent(event);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render a div element with the correct classes and styles', () => {
     wrapper = mount(PanelResizer, {
       propsData: {
diff --git a/spec/frontend/vue_shared/components/papa_parse_alert_spec.js b/spec/frontend/vue_shared/components/papa_parse_alert_spec.js
index ff4febd647e..a44a1aba8c0 100644
--- a/spec/frontend/vue_shared/components/papa_parse_alert_spec.js
+++ b/spec/frontend/vue_shared/components/papa_parse_alert_spec.js
@@ -16,10 +16,6 @@ describe('app/assets/javascripts/vue_shared/components/papa_parse_alert.vue', ()
 
   const findAlert = () => wrapper.findComponent(GlAlert);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render alert with correct props', async () => {
     createComponent({ errorMessages: [{ code: 'MissingQuotes' }] });
     await nextTick();
diff --git a/spec/frontend/vue_shared/components/project_avatar_spec.js b/spec/frontend/vue_shared/components/project_avatar_spec.js
index af828fbca51..9378f6e3f1b 100644
--- a/spec/frontend/vue_shared/components/project_avatar_spec.js
+++ b/spec/frontend/vue_shared/components/project_avatar_spec.js
@@ -15,10 +15,6 @@ describe('ProjectAvatar', () => {
     wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props }, attrs });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders GlAvatar with correct props', () => {
     createComponent();
 
diff --git a/spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js b/spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js
index 4e0c318c84e..d704fcc0e7b 100644
--- a/spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js
+++ b/spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js
@@ -1,57 +1,49 @@
-import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import mockProjects from 'test_fixtures_static/projects.json';
 import { trimText } from 'helpers/text_helper';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
 
 describe('ProjectListItem component', () => {
-  const Component = Vue.extend(ProjectListItem);
   let wrapper;
-  let vm;
-  let options;
 
   const project = JSON.parse(JSON.stringify(mockProjects))[0];
 
-  beforeEach(() => {
-    options = {
+  const createWrapper = ({ propsData } = {}) => {
+    wrapper = shallowMountExtended(ProjectListItem, {
       propsData: {
         project,
         selected: false,
+        ...propsData,
       },
-    };
-  });
-
-  afterEach(() => {
-    wrapper.vm.$destroy();
-  });
-
-  it('does not render a check mark icon if selected === false', () => {
-    wrapper = shallowMount(Component, options);
-
-    expect(wrapper.find('.js-selected-icon').exists()).toBe(false);
-  });
+    });
+  };
 
-  it('renders a check mark icon if selected === true', () => {
-    options.propsData.selected = true;
+  const findProjectNamespace = () => wrapper.findByTestId('project-namespace');
+  const findProjectName = () => wrapper.findByTestId('project-name');
 
-    wrapper = shallowMount(Component, options);
+  it.each([true, false])('renders a checkmark correctly when selected === "%s"', (selected) => {
+    createWrapper({
+      propsData: {
+        selected,
+      },
+    });
 
-    expect(wrapper.find('.js-selected-icon').exists()).toBe(true);
+    expect(wrapper.findByTestId('selected-icon').exists()).toBe(selected);
   });
 
-  it(`emits a "clicked" event when clicked`, () => {
-    wrapper = shallowMount(Component, options);
-    ({ vm } = wrapper);
+  it(`emits a "clicked" event when the button is clicked`, () => {
+    createWrapper();
 
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    wrapper.vm.onClick();
+    expect(wrapper.emitted('click')).toBeUndefined();
+    wrapper.findComponent(GlButton).vm.$emit('click');
 
-    expect(wrapper.vm.$emit).toHaveBeenCalledWith('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
   });
 
   it(`renders the project avatar`, () => {
-    wrapper = shallowMount(Component, options);
+    createWrapper();
     const avatar = wrapper.findComponent(ProjectAvatar);
 
     expect(avatar.exists()).toBe(true);
@@ -63,48 +55,73 @@ describe('ProjectListItem component', () => {
   });
 
   it(`renders a simple namespace name with a trailing slash`, () => {
-    options.propsData.project.name_with_namespace = 'a / b';
-
-    wrapper = shallowMount(Component, options);
-    const renderedNamespace = trimText(wrapper.find('.js-project-namespace').text());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name_with_namespace: 'a / b',
+        },
+      },
+    });
+    const renderedNamespace = trimText(findProjectNamespace().text());
 
     expect(renderedNamespace).toBe('a /');
   });
 
   it(`renders a properly truncated namespace with a trailing slash`, () => {
-    options.propsData.project.name_with_namespace = 'a / b / c / d / e / f';
-
-    wrapper = shallowMount(Component, options);
-    const renderedNamespace = trimText(wrapper.find('.js-project-namespace').text());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name_with_namespace: 'a / b / c / d / e / f',
+        },
+      },
+    });
+    const renderedNamespace = trimText(findProjectNamespace().text());
 
     expect(renderedNamespace).toBe('a / ... / e /');
   });
 
   it(`renders a simple namespace name of a GraphQL project`, () => {
-    options.propsData.project.name_with_namespace = undefined;
-    options.propsData.project.nameWithNamespace = 'test';
-
-    wrapper = shallowMount(Component, options);
-    const renderedNamespace = trimText(wrapper.find('.js-project-namespace').text());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name_with_namespace: undefined,
+          nameWithNamespace: 'test',
+        },
+      },
+    });
+    const renderedNamespace = trimText(findProjectNamespace().text());
 
     expect(renderedNamespace).toBe('test /');
   });
 
   it(`renders the project name`, () => {
-    options.propsData.project.name = 'my-test-project';
-
-    wrapper = shallowMount(Component, options);
-    const renderedName = trimText(wrapper.find('.js-project-name').text());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name: 'my-test-project',
+        },
+      },
+    });
+    const renderedName = trimText(findProjectName().text());
 
     expect(renderedName).toBe('my-test-project');
   });
 
   it(`renders the project name with highlighting in the case of a search query match`, () => {
-    options.propsData.project.name = 'my-test-project';
-    options.propsData.matcher = 'pro';
-
-    wrapper = shallowMount(Component, options);
-    const renderedName = trimText(wrapper.find('.js-project-name').html());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name: 'my-test-project',
+        },
+        matcher: 'pro',
+      },
+    });
+    const renderedName = trimText(findProjectName().html());
     const expected = 'my-test-<b>p</b><b>r</b><b>o</b>ject';
 
     expect(renderedName).toContain(expected);
@@ -112,11 +129,16 @@ describe('ProjectListItem component', () => {
 
   it('prevents search query and project name XSS', () => {
     const alertSpy = jest.spyOn(window, 'alert');
-    options.propsData.project.name = "my-xss-pro<script>alert('XSS');</script>ject";
-    options.propsData.matcher = "pro<script>alert('XSS');</script>";
-
-    wrapper = shallowMount(Component, options);
-    const renderedName = trimText(wrapper.find('.js-project-name').html());
+    createWrapper({
+      propsData: {
+        project: {
+          ...project,
+          name: "my-xss-pro<script>alert('XSS');</script>ject",
+        },
+        matcher: "pro<script>alert('XSS');</script>",
+      },
+    });
+    const renderedName = trimText(findProjectName().html());
     const expected = 'my-xss-project';
 
     expect(renderedName).toContain(expected);
diff --git a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
index a0832dd7030..5e304f1c118 100644
--- a/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
+++ b/spec/frontend/vue_shared/components/project_selector/project_selector_spec.js
@@ -1,7 +1,7 @@
 import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { head } from 'lodash';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import mockProjects from 'test_fixtures_static/projects.json';
 import { trimText } from 'helpers/text_helper';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
@@ -25,7 +25,7 @@ describe('ProjectSelector component', () => {
   };
 
   beforeEach(() => {
-    wrapper = mount(Vue.extend(ProjectSelector), {
+    wrapper = mount(ProjectSelector, {
       propsData: {
         projectSearchResults: searchResults,
         selectedProjects: selected,
diff --git a/spec/frontend/vue_shared/components/registry/code_instruction_spec.js b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js
index 8f19f0ea14d..60c1293b7c1 100644
--- a/spec/frontend/vue_shared/components/registry/code_instruction_spec.js
+++ b/spec/frontend/vue_shared/components/registry/code_instruction_spec.js
@@ -26,10 +26,6 @@ describe('Package code instruction', () => {
   const findInputElement = () => wrapper.find('[data-testid="instruction-input"]');
   const findMultilineInstruction = () => wrapper.find('[data-testid="multiline-instruction"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('single line', () => {
     beforeEach(() =>
       createComponent({
diff --git a/spec/frontend/vue_shared/components/registry/details_row_spec.js b/spec/frontend/vue_shared/components/registry/details_row_spec.js
index ebc9816f983..9ef1ce5647d 100644
--- a/spec/frontend/vue_shared/components/registry/details_row_spec.js
+++ b/spec/frontend/vue_shared/components/registry/details_row_spec.js
@@ -20,11 +20,6 @@ describe('DetailsRow', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('has a default slot', () => {
     mountComponent();
     expect(findDefaultSlot().exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/registry/history_item_spec.js b/spec/frontend/vue_shared/components/registry/history_item_spec.js
index 947520567e6..17abe06dbee 100644
--- a/spec/frontend/vue_shared/components/registry/history_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/history_item_spec.js
@@ -22,11 +22,6 @@ describe('History Item', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findTimelineEntry = () => wrapper.findComponent(TimelineEntryItem);
   const findGlIcon = () => wrapper.findComponent(GlIcon);
   const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
diff --git a/spec/frontend/vue_shared/components/registry/list_item_spec.js b/spec/frontend/vue_shared/components/registry/list_item_spec.js
index b941eb77c32..298fa163d59 100644
--- a/spec/frontend/vue_shared/components/registry/list_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/list_item_spec.js
@@ -30,11 +30,6 @@ describe('list item', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     slotName             | finderFunction
     ${'left-primary'}    | ${findLeftPrimarySlot}
diff --git a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
index a04e1e237d4..278b09d80b2 100644
--- a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
+++ b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js
@@ -14,16 +14,11 @@ describe('Metadata Item', () => {
     wrapper = shallowMount(component, {
       propsData,
       directives: {
-        GlTooltip: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
       },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findLink = (w = wrapper) => w.findComponent(GlLink);
   const findText = () => wrapper.find('[data-testid="metadata-item-text"]');
diff --git a/spec/frontend/vue_shared/components/registry/persisted_dropdown_selection_spec.js b/spec/frontend/vue_shared/components/registry/persisted_dropdown_selection_spec.js
index 616fefe847e..b93fa37546f 100644
--- a/spec/frontend/vue_shared/components/registry/persisted_dropdown_selection_spec.js
+++ b/spec/frontend/vue_shared/components/registry/persisted_dropdown_selection_spec.js
@@ -31,10 +31,6 @@ describe('Persisted dropdown selection', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('local storage sync', () => {
     it('uses the local storage sync component with the correct props', () => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/registry/registry_search_spec.js b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
index 591447a37c2..59bb0646350 100644
--- a/spec/frontend/vue_shared/components/registry/registry_search_spec.js
+++ b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
@@ -36,11 +36,6 @@ describe('Registry Search', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('searching', () => {
     it('has a filtered-search component', () => {
       mountComponent();
diff --git a/spec/frontend/vue_shared/components/registry/title_area_spec.js b/spec/frontend/vue_shared/components/registry/title_area_spec.js
index efb57ddd310..ec1451de470 100644
--- a/spec/frontend/vue_shared/components/registry/title_area_spec.js
+++ b/spec/frontend/vue_shared/components/registry/title_area_spec.js
@@ -36,11 +36,6 @@ describe('title area', () => {
       return acc;
     }, {});
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('title', () => {
     it('if slot is not present defaults to prop', () => {
       mountComponent();
diff --git a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/resizable_chart_container_spec.js.snap b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/resizable_chart_container_spec.js.snap
deleted file mode 100644
index cdfe311acd9..00000000000
--- a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/resizable_chart_container_spec.js.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Resizable Chart Container renders the component 1`] = `
-<div>
-  <template>
-    <div
-      class="slot"
-    >
-      <span
-        class="width"
-      >
-        0
-      </span>
-       
-      <span
-        class="height"
-      >
-        0
-      </span>
-    </div>
-  </template>
-</div>
-`;
diff --git a/spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js b/spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js
deleted file mode 100644
index 7536df24ac6..00000000000
--- a/spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import { mount } from '@vue/test-utils';
-import $ from 'jquery';
-import { nextTick } from 'vue';
-import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
-
-jest.mock('~/lib/utils/common_utils', () => ({
-  debounceByAnimationFrame(callback) {
-    return jest.spyOn({ callback }, 'callback');
-  },
-}));
-
-describe('Resizable Chart Container', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(ResizableChartContainer, {
-      scopedSlots: {
-        default: `
-          <template #default="{ width, height }">
-            <div class="slot">
-              <span class="width">{{width}}</span>
-              <span class="height">{{height}}</span>
-            </div>
-          </template>
-        `,
-      },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders the component', () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it('updates the slot width and height props', async () => {
-    const width = 1920;
-    const height = 1080;
-
-    // JSDOM mocks and sets clientWidth/clientHeight to 0 so we set manually
-    wrapper.vm.$refs.chartWrapper = { clientWidth: width, clientHeight: height };
-
-    $(document).trigger('content.resize');
-
-    await nextTick();
-    const widthNode = wrapper.find('.slot > .width');
-    const heightNode = wrapper.find('.slot > .height');
-
-    expect(parseInt(widthNode.text(), 10)).toEqual(width);
-    expect(parseInt(heightNode.text(), 10)).toEqual(height);
-  });
-
-  it('calls onResize on manual resize', () => {
-    $(document).trigger('content.resize');
-    expect(wrapper.vm.debouncedResize).toHaveBeenCalled();
-  });
-
-  it('calls onResize on page resize', () => {
-    window.dispatchEvent(new Event('resize'));
-    expect(wrapper.vm.debouncedResize).toHaveBeenCalled();
-  });
-});
diff --git a/spec/frontend/vue_shared/components/rich_timestamp_tooltip_spec.js b/spec/frontend/vue_shared/components/rich_timestamp_tooltip_spec.js
index 5d96fe27676..11ee2e56c14 100644
--- a/spec/frontend/vue_shared/components/rich_timestamp_tooltip_spec.js
+++ b/spec/frontend/vue_shared/components/rich_timestamp_tooltip_spec.js
@@ -27,10 +27,6 @@ describe('RichTimestampTooltip', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the tooltip text header', () => {
     expect(wrapper.findByTestId('header-text').text()).toBe('Created just now');
   });
diff --git a/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_cli_instructions_spec.js b/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_cli_instructions_spec.js
index f9d700fe67f..c4d4f80c573 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_cli_instructions_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/instructions/runner_cli_instructions_spec.js
@@ -59,10 +59,6 @@ describe('RunnerCliInstructions component', () => {
     runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockInstructions);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the instructions are shown', () => {
     beforeEach(async () => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
index 8f593b6aa1b..cb35cbd35ad 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
@@ -74,10 +74,6 @@ describe('RunnerInstructionsModal component', () => {
     runnerPlatformsHandler = jest.fn().mockResolvedValue(mockRunnerPlatforms);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when the modal is shown', () => {
     beforeEach(async () => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
index 986d76d2b95..260eddbb37d 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
@@ -12,7 +12,7 @@ describe('RunnerInstructions component', () => {
   const createComponent = () => {
     wrapper = shallowMountExtended(RunnerInstructions, {
       directives: {
-        GlModal: createMockDirective(),
+        GlModal: createMockDirective('gl-tooltip'),
       },
     });
   };
@@ -21,10 +21,6 @@ describe('RunnerInstructions component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should show the "Show runner installation instructions" button', () => {
     expect(findModalButton().text()).toBe('Show runner installation instructions');
   });
diff --git a/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js b/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
index 09b0b3d43ad..6eebd129beb 100644
--- a/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/artifact_downloads/merge_request_artifact_download_spec.js
@@ -6,7 +6,7 @@ import {
   expectedDownloadDropdownPropsWithTitle,
   securityReportMergeRequestDownloadPathsQueryResponse,
 } from 'jest/vue_shared/security_reports/mock_data';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import Component from '~/vue_shared/security_reports/components/artifact_downloads/merge_request_artifact_download.vue';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
 import {
@@ -15,7 +15,7 @@ import {
 } from '~/vue_shared/security_reports/constants';
 import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('Merge request artifact Download', () => {
   let wrapper;
@@ -52,10 +52,6 @@ describe('Merge request artifact Download', () => {
 
   const findDownloadDropdown = () => wrapper.findComponent(SecurityReportDownloadDropdown);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('given the query is loading', () => {
     beforeEach(() => {
       createWrapper({
diff --git a/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js b/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
index 08d3d5b19d4..2f6e633fb34 100644
--- a/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/help_icon_spec.js
@@ -21,11 +21,6 @@ describe('HelpIcon component', () => {
   const findPopover = () => wrapper.findComponent(GlPopover);
   const findPopoverTarget = () => wrapper.findComponent({ ref: 'discoverProjectSecurity' });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('given a help path only', () => {
     beforeEach(() => {
       createWrapper();
diff --git a/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js b/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
index f186eb848f2..61cdc329220 100644
--- a/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
+++ b/spec/frontend/vue_shared/components/security_reports/security_summary_spec.js
@@ -15,11 +15,6 @@ describe('SecuritySummary component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each([
     { message: '' },
     { message: 'foo' },
diff --git a/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js
index 88445b6684c..c1feb64dacb 100644
--- a/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js
+++ b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js
@@ -40,10 +40,6 @@ describe('~/vue_shared/components/segmented_control_button_group.vue', () => {
       disabled,
     }));
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     beforeEach(() => {
       createComponent();
diff --git a/spec/frontend/vue_shared/components/settings/settings_block_spec.js b/spec/frontend/vue_shared/components/settings/settings_block_spec.js
index 5e829653c13..94d634f79bd 100644
--- a/spec/frontend/vue_shared/components/settings/settings_block_spec.js
+++ b/spec/frontend/vue_shared/components/settings/settings_block_spec.js
@@ -16,10 +16,6 @@ describe('Settings Block', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findDefaultSlot = () => wrapper.findByTestId('default-slot');
   const findTitleSlot = () => wrapper.findByTestId('title-slot');
   const findDescriptionSlot = () => wrapper.findByTestId('description-slot');
diff --git a/spec/frontend/vue_shared/components/smart_virtual_list_spec.js b/spec/frontend/vue_shared/components/smart_virtual_list_spec.js
index 8802a832781..e5d988f75f5 100644
--- a/spec/frontend/vue_shared/components/smart_virtual_list_spec.js
+++ b/spec/frontend/vue_shared/components/smart_virtual_list_spec.js
@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
 import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue';
 
 describe('Toggle Button', () => {
@@ -16,7 +15,7 @@ describe('Toggle Button', () => {
       remain,
     };
 
-    const Component = Vue.extend({
+    const Component = {
       components: {
         SmartVirtualScrollList,
       },
@@ -26,7 +25,7 @@ describe('Toggle Button', () => {
       <smart-virtual-scroll-list v-bind="$options.smartListProperties">
         <li v-for="(val, key) in $options.items" :key="key">{{ key + 1 }}</li>
       </smart-virtual-scroll-list>`,
-    });
+    };
 
     return mount(Component).vm;
   };
diff --git a/spec/frontend/vue_shared/components/source_editor_spec.js b/spec/frontend/vue_shared/components/source_editor_spec.js
index ca5b990bc29..5b155207029 100644
--- a/spec/frontend/vue_shared/components/source_editor_spec.js
+++ b/spec/frontend/vue_shared/components/source_editor_spec.js
@@ -47,10 +47,6 @@ describe('Source Editor component', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const triggerChangeContent = (val) => {
     mockInstance.getValue.mockReturnValue(val);
     const [cb] = mockInstance.onDidChangeModelContent.mock.calls[0];
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_deprecated_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_deprecated_spec.js
index da9067a8ddc..395ba92d4c6 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_deprecated_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_deprecated_spec.js
@@ -45,8 +45,6 @@ describe('Chunk component', () => {
     createComponent();
   });
 
-  afterEach(() => wrapper.destroy());
-
   describe('Intersection observer', () => {
     it('renders an Intersection observer component', () => {
       expect(findIntersectionObserver().exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
index f661bd6747a..6c8fc244fa0 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
@@ -31,8 +31,6 @@ describe('Chunk Line component', () => {
     createComponent();
   });
 
-  afterEach(() => wrapper.destroy());
-
   describe('rendering', () => {
     it('renders a blame link', () => {
       expect(findBlameLink().attributes()).toMatchObject({
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
index 95ef11d776a..59880496d74 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -24,8 +24,6 @@ describe('Chunk component', () => {
     createComponent();
   });
 
-  afterEach(() => wrapper.destroy());
-
   describe('Intersection observer', () => {
     it('renders an Intersection observer component', () => {
       expect(findIntersectionObserver().exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_deprecated_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_deprecated_spec.js
index 0beec8e9d3e..c911e3d308b 100644
--- a/spec/frontend/vue_shared/components/source_viewer/source_viewer_deprecated_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_deprecated_spec.js
@@ -68,8 +68,6 @@ describe('Source Viewer component', () => {
     return createComponent();
   });
 
-  afterEach(() => wrapper.destroy());
-
   describe('event tracking', () => {
     it('fires a tracking event when the component is created', () => {
       const eventData = { label: EVENT_LABEL_VIEWER, property: language };
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
index 1c75442b4a8..46b582c3668 100644
--- a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
@@ -25,8 +25,6 @@ describe('Source Viewer component', () => {
     return createComponent();
   });
 
-  afterEach(() => wrapper.destroy());
-
   describe('event tracking', () => {
     it('fires a tracking event when the component is created', () => {
       const eventData = { label: EVENT_LABEL_VIEWER, property: LANGUAGE_MOCK };
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 79b1f17afa0..13911d487f2 100644
--- a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
@@ -18,10 +18,6 @@ describe('StackedProgressBarComponent', () => {
     wrapper = mount(StackedProgressBarComponent, { propsData: defaultConfig });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findSuccessBar = () => wrapper.find('.status-green');
   const findNeutralBar = () => wrapper.find('.status-neutral');
   const findFailureBar = () => wrapper.find('.status-red');
diff --git a/spec/frontend/vue_shared/components/table_pagination_spec.js b/spec/frontend/vue_shared/components/table_pagination_spec.js
index 99de26ce2ae..79aba1b2516 100644
--- a/spec/frontend/vue_shared/components/table_pagination_spec.js
+++ b/spec/frontend/vue_shared/components/table_pagination_spec.js
@@ -16,10 +16,6 @@ describe('Pagination component', () => {
     spy = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('render', () => {
     it('should not render anything', () => {
       mountComponent({
diff --git a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
index 28c5acc8110..a1757952dc0 100644
--- a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
+++ b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
@@ -25,7 +25,6 @@ describe('Time ago with tooltip component', () => {
   };
 
   afterEach(() => {
-    vm.destroy();
     timezoneMock.unregister();
   });
 
diff --git a/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js b/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js
index c8351ed61d7..d8dedd8240b 100644
--- a/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdownItem, GlDropdown } from '@gitlab/ui';
+import { GlDropdownItem, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
@@ -9,7 +9,9 @@ describe('Deploy freeze timezone dropdown', () => {
   let wrapper;
   let store;
 
-  const createComponent = (searchTerm, selectedTimezone) => {
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+
+  const createComponent = async (searchTerm, selectedTimezone) => {
     wrapper = shallowMountExtended(TimezoneDropdown, {
       store,
       propsData: {
@@ -19,9 +21,8 @@ describe('Deploy freeze timezone dropdown', () => {
       },
     });
 
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({ searchTerm });
+    findSearchBox().vm.$emit('input', searchTerm);
+    await nextTick();
   };
 
   const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
@@ -29,14 +30,9 @@ describe('Deploy freeze timezone dropdown', () => {
   const findEmptyResultsItem = () => wrapper.findByTestId('noMatchingResults');
   const findHiddenInput = () => wrapper.find('input');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('No time zones found', () => {
-    beforeEach(() => {
-      createComponent('UTC timezone');
+    beforeEach(async () => {
+      await createComponent('UTC timezone');
     });
 
     it('renders empty results message', () => {
@@ -45,8 +41,8 @@ describe('Deploy freeze timezone dropdown', () => {
   });
 
   describe('Search term is empty', () => {
-    beforeEach(() => {
-      createComponent('');
+    beforeEach(async () => {
+      await createComponent('');
     });
 
     it('renders all timezones when search term is empty', () => {
@@ -55,8 +51,8 @@ describe('Deploy freeze timezone dropdown', () => {
   });
 
   describe('Time zones found', () => {
-    beforeEach(() => {
-      createComponent('Alaska');
+    beforeEach(async () => {
+      await createComponent('Alaska');
     });
 
     it('renders only the time zone searched for', () => {
@@ -87,8 +83,8 @@ describe('Deploy freeze timezone dropdown', () => {
   });
 
   describe('Selected time zone not found', () => {
-    beforeEach(() => {
-      createComponent('', 'Berlin');
+    beforeEach(async () => {
+      await createComponent('', 'Berlin');
     });
 
     it('renders empty selections', () => {
@@ -101,8 +97,8 @@ describe('Deploy freeze timezone dropdown', () => {
   });
 
   describe('Selected time zone found', () => {
-    beforeEach(() => {
-      createComponent('', 'Europe/Berlin');
+    beforeEach(async () => {
+      await createComponent('', 'Europe/Berlin');
     });
 
     it('renders selected time zone as dropdown label', () => {
diff --git a/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
index ca1f7996ad6..3807bb4cc63 100644
--- a/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
+++ b/spec/frontend/vue_shared/components/tooltip_on_truncate_spec.js
@@ -30,8 +30,8 @@ describe('TooltipOnTruncate component', () => {
         default: [MOCK_TITLE],
       },
       directives: {
-        GlTooltip: createMockDirective(),
-        GlResizeObserver: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
       },
       ...options,
     });
@@ -42,8 +42,8 @@ describe('TooltipOnTruncate component', () => {
       ...TooltipOnTruncate,
       directives: {
         ...TooltipOnTruncate.directives,
-        GlTooltip: createMockDirective(),
-        GlResizeObserver: createMockDirective(),
+        GlTooltip: createMockDirective('gl-tooltip'),
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
       },
     };
 
@@ -78,10 +78,6 @@ describe('TooltipOnTruncate component', () => {
     await nextTick();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when truncated', () => {
     beforeEach(async () => {
       hasHorizontalOverflow.mockReturnValueOnce(true);
@@ -90,7 +86,7 @@ describe('TooltipOnTruncate component', () => {
 
     it('renders tooltip', async () => {
       expect(hasHorizontalOverflow).toHaveBeenLastCalledWith(wrapper.element);
-      expect(getTooltipValue()).toMatchObject({
+      expect(getTooltipValue()).toStrictEqual({
         title: MOCK_TITLE,
         placement: 'top',
         disabled: false,
@@ -144,7 +140,7 @@ describe('TooltipOnTruncate component', () => {
 
       await nextTick();
 
-      expect(getTooltipValue()).toMatchObject({
+      expect(getTooltipValue()).toStrictEqual({
         title: MOCK_TITLE,
         placement: 'top',
         disabled: false,
@@ -194,20 +190,22 @@ describe('TooltipOnTruncate component', () => {
     });
   });
 
-  describe('placement', () => {
-    it('sets placement when tooltip is rendered', () => {
-      const mockPlacement = 'bottom';
-
+  describe('tooltip customization', () => {
+    it.each`
+      property       | mockValue
+      ${'placement'} | ${'bottom'}
+      ${'boundary'}  | ${'viewport'}
+    `('sets $property when the tooltip is rendered', ({ property, mockValue }) => {
       hasHorizontalOverflow.mockReturnValueOnce(true);
       createComponent({
         propsData: {
-          placement: mockPlacement,
+          [property]: mockValue,
         },
       });
 
       expect(hasHorizontalOverflow).toHaveBeenLastCalledWith(wrapper.element);
       expect(getTooltipValue()).toMatchObject({
-        placement: mockPlacement,
+        [property]: mockValue,
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap b/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
index f9d615d4f68..c816fe790a8 100644
--- a/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
+++ b/spec/frontend/vue_shared/components/upload_dropzone/__snapshots__/upload_dropzone_spec.js.snap
@@ -5,7 +5,7 @@ exports[`Upload dropzone component correctly overrides description and drop mess
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -86,7 +86,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -171,7 +171,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -256,7 +256,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -342,7 +342,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -428,7 +428,7 @@ exports[`Upload dropzone component when dragging renders correct template when d
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
@@ -514,7 +514,7 @@ exports[`Upload dropzone component when no slot provided renders default dropzon
   class="gl-w-full gl-relative"
 >
   <button
-    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-p-4 gl-mb-0"
+    class="card upload-dropzone-card upload-dropzone-border gl-w-full gl-h-full gl-align-items-center gl-justify-content-center gl-px-5 gl-py-4 gl-mb-0"
     type="button"
   >
     <div
diff --git a/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js b/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
index a063a5591e3..24f96195e05 100644
--- a/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
+++ b/spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js
@@ -3,8 +3,6 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 
-jest.mock('~/flash');
-
 describe('Upload dropzone component', () => {
   let wrapper;
 
@@ -34,11 +32,6 @@ describe('Upload dropzone component', () => {
     });
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when slot provided', () => {
     it('renders dropzone with slot content', () => {
       createComponent({
diff --git a/spec/frontend/vue_shared/components/url_sync_spec.js b/spec/frontend/vue_shared/components/url_sync_spec.js
index 30a7439579f..2718be74111 100644
--- a/spec/frontend/vue_shared/components/url_sync_spec.js
+++ b/spec/frontend/vue_shared/components/url_sync_spec.js
@@ -33,10 +33,6 @@ describe('url sync component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const expectUrlSyncWithMergeUrlParams = (
     query,
     times,
diff --git a/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js b/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js
index 662c09d02bf..ba55df5512f 100644
--- a/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js
+++ b/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js
@@ -24,10 +24,6 @@ describe('usage banner', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     slotName                  | finderFunction
     ${'left-primary-text'}    | ${findLeftPrimaryTextSlot}
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
index d63b13981ac..3ae3d89af27 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -20,10 +20,6 @@ describe('User Avatar Image Component', () => {
 
   const findAvatar = () => wrapper.findComponent(GlAvatar);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Initialization', () => {
     beforeEach(() => {
       wrapper = shallowMount(UserAvatarImage, {
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
index df7ce449678..90f9156af38 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -34,10 +34,6 @@ describe('User Avatar Link Component', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render GlLink with correct props', () => {
     const link = wrapper.findComponent(GlAvatarLink);
     expect(link.exists()).toBe(true);
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
index 63371b1492b..1754292cb63 100644
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
+++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js
@@ -50,10 +50,6 @@ describe('UserAvatarList', () => {
     props = { imgSize: TEST_IMAGE_SIZE };
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('empty text', () => {
     it('shows when items are empty', () => {
       factory({ propsData: { items: [] } });
diff --git a/spec/frontend/vue_shared/components/user_callout_dismisser_spec.js b/spec/frontend/vue_shared/components/user_callout_dismisser_spec.js
index 521744154ba..b04e578c931 100644
--- a/spec/frontend/vue_shared/components/user_callout_dismisser_spec.js
+++ b/spec/frontend/vue_shared/components/user_callout_dismisser_spec.js
@@ -28,8 +28,6 @@ const initialSlotProps = (changes = {}) => ({
 });
 
 describe('UserCalloutDismisser', () => {
-  let wrapper;
-
   const MOCK_FEATURE_NAME = 'mock_feature_name';
 
   // Query handlers
@@ -52,7 +50,7 @@ describe('UserCalloutDismisser', () => {
   const callDismissSlotProp = () => defaultScopedSlotSpy.mock.calls[0][0].dismiss();
 
   const createComponent = ({ queryHandler, mutationHandler, ...options }) => {
-    wrapper = mount(
+    mount(
       UserCalloutDismisser,
       merge(
         {
@@ -72,10 +70,6 @@ describe('UserCalloutDismisser', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when loading', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list_spec.js b/spec/frontend/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list_spec.js
index 78abb89e7b8..6491e5a66cd 100644
--- a/spec/frontend/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list_spec.js
+++ b/spec/frontend/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list_spec.js
@@ -51,10 +51,6 @@ describe('User deletion obstacles list', () => {
     );
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findTitle = () => wrapper.findByTestId('title');
   const findFooter = () => wrapper.findByTestId('footer');
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index f6316af6ad8..8ecab5cc043 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -13,11 +13,11 @@ import {
   I18N_ERROR_UNFOLLOW,
 } from '~/vue_shared/components/user_popover/constants';
 import axios from '~/lib/utils/axios_utils';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { followUser, unfollowUser } from '~/api/user_api';
 import { mockTracking } from 'helpers/tracking_helper';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 jest.mock('~/api/user_api', () => ({
   followUser: jest.fn(),
   unfollowUser: jest.fn(),
@@ -51,7 +51,6 @@ describe('User Popover Component', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/vue_shared/components/user_select_spec.js b/spec/frontend/vue_shared/components/user_select_spec.js
index b0e9584a15b..e881bfed35e 100644
--- a/spec/frontend/vue_shared/components/user_select_spec.js
+++ b/spec/frontend/vue_shared/components/user_select_spec.js
@@ -7,7 +7,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import searchUsersQuery from '~/graphql_shared/queries/users_search.query.graphql';
 import searchUsersQueryOnMR from '~/graphql_shared/queries/users_search_with_mr_permissions.graphql';
-import { IssuableType } from '~/issues/constants';
+import { TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import SidebarParticipant from '~/sidebar/components/assignees/sidebar_participant.vue';
 import getIssueParticipantsQuery from '~/sidebar/queries/get_issue_participants.query.graphql';
@@ -105,7 +105,6 @@ describe('User select dropdown', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -409,7 +408,7 @@ describe('User select dropdown', () => {
 
   describe('when on merge request sidebar', () => {
     beforeEach(() => {
-      createComponent({ props: { issuableType: IssuableType.MergeRequest, issuableId: 1 } });
+      createComponent({ props: { issuableType: TYPE_MERGE_REQUEST, issuableId: 1 } });
       return waitForPromises();
     });
 
diff --git a/spec/frontend/vue_shared/components/vuex_module_provider_spec.js b/spec/frontend/vue_shared/components/vuex_module_provider_spec.js
index c136c2054ac..acbb931b7b6 100644
--- a/spec/frontend/vue_shared/components/vuex_module_provider_spec.js
+++ b/spec/frontend/vue_shared/components/vuex_module_provider_spec.js
@@ -27,10 +27,6 @@ describe('~/vue_shared/components/vuex_module_provider', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('provides "vuexModule" set from prop', () => {
     createComponent();
     expect(findProvidedVuexModule()).toBe(TEST_VUEX_MODULE);
diff --git a/spec/frontend/vue_shared/components/web_ide_link_spec.js b/spec/frontend/vue_shared/components/web_ide_link_spec.js
index 18afe049149..f6eb11aaddf 100644
--- a/spec/frontend/vue_shared/components/web_ide_link_spec.js
+++ b/spec/frontend/vue_shared/components/web_ide_link_spec.js
@@ -137,10 +137,6 @@ describe('Web IDE link component', () => {
     localStorage.setItem(PREFERRED_EDITOR_RESET_KEY, 'true');
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findActionsButton = () => wrapper.findComponent(ActionsButton);
   const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
   const findModal = () => wrapper.findComponent(GlModal);
diff --git a/spec/frontend/vue_shared/directives/validation_spec.js b/spec/frontend/vue_shared/directives/validation_spec.js
index dcd3a44a6fc..72a348c1a79 100644
--- a/spec/frontend/vue_shared/directives/validation_spec.js
+++ b/spec/frontend/vue_shared/directives/validation_spec.js
@@ -80,11 +80,6 @@ describe('validation directive', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const getFormData = () => wrapper.vm.form;
   const findForm = () => wrapper.find('form');
   const findInput = () => wrapper.find('input');
diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js
index 7b0f0f7e344..e983519d9fc 100644
--- a/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js
@@ -34,10 +34,6 @@ describe('IssuableCreateRoot', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     it('renders component container element with class "issuable-create-container"', () => {
       expect(wrapper.classes()).toContain('issuable-create-container');
diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js
index ff21b3bc356..ae2fd5ebffa 100644
--- a/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js
+++ b/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js
@@ -36,10 +36,6 @@ describe('IssuableForm', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('methods', () => {
     describe('handleUpdateSelectedLabels', () => {
       it('sets provided `labels` param to prop `selectedLabels`', () => {
diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js
index 76b6efa15b6..ce9e23d9a00 100644
--- a/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js
+++ b/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js
@@ -6,11 +6,8 @@ import {
 } from 'jest/sidebar/components/labels/labels_select_widget/mock_data';
 import IssuableLabelSelector from '~/vue_shared/issuable/create/components/issuable_label_selector.vue';
 import LabelsSelect from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue';
-import {
-  DropdownVariant,
-  LabelType,
-} from '~/sidebar/components/labels/labels_select_widget/constants';
-import { WorkspaceType } from '~/issues/constants';
+import { DropdownVariant } from '~/sidebar/components/labels/labels_select_widget/constants';
+import { WORKSPACE_PROJECT } from '~/issues/constants';
 import { __ } from '~/locale';
 
 const allowLabelRemove = true;
@@ -20,9 +17,9 @@ const fullPath = '/full-path';
 const labelsFilterBasePath = '/labels-filter-base-path';
 const initialLabels = [];
 const issuableType = 'issue';
-const labelType = LabelType.project;
+const labelType = WORKSPACE_PROJECT;
 const variant = DropdownVariant.Embedded;
-const workspaceType = WorkspaceType.project;
+const workspaceType = WORKSPACE_PROJECT;
 
 describe('IssuableLabelSelector', () => {
   let wrapper;
@@ -50,10 +47,6 @@ describe('IssuableLabelSelector', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const expectTitleWithCount = (count) => {
     const title = findTitle();
 
diff --git a/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
index a0b1d64b97c..61e6d2a420a 100644
--- a/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
+++ b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
@@ -7,8 +7,7 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import IssuableBlockedIcon from '~/vue_shared/components/issuable_blocked_icon/issuable_blocked_icon.vue';
 import { blockingIssuablesQueries } from '~/vue_shared/components/issuable_blocked_icon/constants';
-import { issuableTypes } from '~/boards/constants';
-import { TYPE_ISSUE } from '~/issues/constants';
+import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
 import { truncate } from '~/lib/utils/text_utility';
 import {
   mockIssue,
@@ -49,11 +48,6 @@ describe('IssuableBlockedIcon', () => {
     await waitForApollo();
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const createWrapperWithApollo = ({
     item = mockBlockedIssue1,
     blockingIssuablesSpy = jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1),
@@ -121,9 +115,9 @@ describe('IssuableBlockedIcon', () => {
   };
 
   it.each`
-    mockIssuable | issuableType          | expectedIcon
-    ${mockIssue} | ${TYPE_ISSUE}         | ${'issue-block'}
-    ${mockEpic}  | ${issuableTypes.epic} | ${'entity-blocked'}
+    mockIssuable | issuableType  | expectedIcon
+    ${mockIssue} | ${TYPE_ISSUE} | ${'issue-block'}
+    ${mockEpic}  | ${TYPE_EPIC}  | ${'entity-blocked'}
   `(
     'should render blocked icon for $issuableType',
     ({ mockIssuable, issuableType, expectedIcon }) => {
@@ -153,9 +147,9 @@ describe('IssuableBlockedIcon', () => {
 
   describe('on mouseenter on blocked icon', () => {
     it.each`
-      item                 | issuableType          | mockBlockingIssuable  | issuableItem | blockingIssuablesSpy
-      ${mockBlockedIssue1} | ${TYPE_ISSUE}         | ${mockBlockingIssue1} | ${mockIssue} | ${jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1)}
-      ${mockBlockedEpic1}  | ${issuableTypes.epic} | ${mockBlockingEpic1}  | ${mockEpic}  | ${jest.fn().mockResolvedValue(mockBlockingEpicIssuablesResponse1)}
+      item                 | issuableType  | mockBlockingIssuable  | issuableItem | blockingIssuablesSpy
+      ${mockBlockedIssue1} | ${TYPE_ISSUE} | ${mockBlockingIssue1} | ${mockIssue} | ${jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1)}
+      ${mockBlockedEpic1}  | ${TYPE_EPIC}  | ${mockBlockingEpic1}  | ${mockEpic}  | ${jest.fn().mockResolvedValue(mockBlockingEpicIssuablesResponse1)}
     `(
       'should query for blocking issuables and render the result for $issuableType',
       async ({ item, issuableType, issuableItem, mockBlockingIssuable, blockingIssuablesSpy }) => {
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js
index a25f92c9cf2..c23bd002ee5 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_bulk_edit_sidebar_spec.js
@@ -28,7 +28,6 @@ describe('IssuableBulkEditSidebar', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
index 2fac004875a..45daf0dc34b 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js
@@ -39,7 +39,6 @@ describe('IssuableItem', () => {
 
   const mockLabels = mockIssuable.labels.nodes;
   const mockAuthor = mockIssuable.author;
-  const originalUrl = gon.gitlab_url;
   let wrapper;
 
   const findTimestampWrapper = () => wrapper.find('[data-testid="issuable-timestamp"]');
@@ -49,11 +48,6 @@ describe('IssuableItem', () => {
     gon.gitlab_url = MOCK_GITLAB_URL;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    gon.gitlab_url = originalUrl;
-  });
-
   describe('computed', () => {
     describe('author', () => {
       it('returns `issuable.author` reference', () => {
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
index 371844e66f4..9a4636e0f4d 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js
@@ -47,10 +47,6 @@ describe('IssuableListRoot', () => {
   const findVueDraggable = () => wrapper.findComponent(VueDraggable);
   const findPageSizeSelector = () => wrapper.findComponent(PageSizeSelector);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     beforeEach(() => {
       wrapper = createComponent();
diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js
index 27985895c62..9cdd4d75c42 100644
--- a/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js
+++ b/spec/frontend/vue_shared/issuable/list/components/issuable_tabs_spec.js
@@ -35,7 +35,6 @@ describe('IssuableTabs', () => {
 
   afterEach(() => {
     setLanguage(null);
-    wrapper.destroy();
   });
 
   const findAllGlBadges = () => wrapper.findAllComponents(GlBadge);
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
index 6b20f0c77a3..7e665b7c76e 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js
@@ -13,7 +13,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { mockIssuableShowProps, mockIssuable } from '../mock_data';
 
 jest.mock('~/autosave');
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 const issuableBodyProps = {
   ...mockIssuableShowProps,
@@ -48,10 +48,6 @@ describe('IssuableBody', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('computed', () => {
     describe('isUpdated', () => {
       it.each`
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js
index ea58cc2baf5..b4f1c286158 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js
@@ -24,10 +24,6 @@ describe('IssuableDescription', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('mounted', () => {
     it('calls `renderGFM`', () => {
       expect(renderGFM).toHaveBeenCalledTimes(1);
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
index 159be4cd1ef..0d6cd1ad00b 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
@@ -43,6 +43,9 @@ describe('IssuableEditForm', () => {
   });
 
   afterEach(() => {
+    // note: the order of wrapper.destroy() and jest.resetAllMocks() matters.
+    // maybe it'll help with investigation on how to remove this wrapper.destroy() call
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
     wrapper.destroy();
     jest.resetAllMocks();
   });
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
index 6a8b9ef77a9..d9f1b6c15a8 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js
@@ -33,7 +33,6 @@ describe('IssuableHeader', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js
index edfd55c8bb4..f976e0499f0 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js
@@ -41,10 +41,6 @@ describe('IssuableShowRoot', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('template', () => {
     const {
       statusIcon,
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
index 6f62fb77353..39316dfa249 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js
@@ -22,35 +22,35 @@ const createComponent = (propsData = issuableTitleProps) =>
       'status-badge': 'Open',
     },
     directives: {
-      GlTooltip: createMockDirective(),
+      GlTooltip: createMockDirective('gl-tooltip'),
     },
   });
 
 describe('IssuableTitle', () => {
   let wrapper;
 
+  const findStickyHeader = () => wrapper.findComponent('[data-testid="header"]');
+
   beforeEach(() => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('methods', () => {
     describe('handleTitleAppear', () => {
-      it('sets value of `stickyTitleVisible` prop to false', () => {
+      it('sets value of `stickyTitleVisible` prop to false', async () => {
         wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
+        await nextTick();
 
-        expect(wrapper.vm.stickyTitleVisible).toBe(false);
+        expect(findStickyHeader().exists()).toBe(false);
       });
     });
 
     describe('handleTitleDisappear', () => {
-      it('sets value of `stickyTitleVisible` prop to true', () => {
+      it('sets value of `stickyTitleVisible` prop to true', async () => {
         wrapper.findComponent(GlIntersectionObserver).vm.$emit('disappear');
+        await nextTick();
 
-        expect(wrapper.vm.stickyTitleVisible).toBe(true);
+        expect(findStickyHeader().exists()).toBe(true);
       });
     });
   });
@@ -87,14 +87,10 @@ describe('IssuableTitle', () => {
     });
 
     it('renders sticky header when `stickyTitleVisible` prop is true', async () => {
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({
-        stickyTitleVisible: true,
-      });
-
+      wrapper.findComponent(GlIntersectionObserver).vm.$emit('disappear');
       await nextTick();
-      const stickyHeaderEl = wrapper.find('[data-testid="header"]');
+
+      const stickyHeaderEl = findStickyHeader();
 
       expect(stickyHeaderEl.exists()).toBe(true);
       expect(stickyHeaderEl.findComponent(GlBadge).props('variant')).toBe('success');
diff --git a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
index 6c9e5f85fa0..f2509aead77 100644
--- a/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
+++ b/spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js
@@ -38,7 +38,6 @@ describe('IssuableSidebarRoot', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js b/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js
index 52f36aa0e77..052ff518468 100644
--- a/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js
+++ b/spec/frontend/vue_shared/new_namespace/components/legacy_container_spec.js
@@ -11,9 +11,7 @@ describe('Legacy container component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     resetHTMLFixture();
-    wrapper = null;
   });
 
   describe('when selector targets real node', () => {
diff --git a/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js b/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
index c90131fea9a..cc8a8d86d19 100644
--- a/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
+++ b/spec/frontend/vue_shared/new_namespace/components/welcome_spec.js
@@ -27,9 +27,7 @@ describe('Welcome page', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
     window.location.hash = '';
-    wrapper = null;
   });
 
   it('tracks link clicks', async () => {
diff --git a/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
index 6115dc6e61b..5ff7b9f390a 100644
--- a/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
+++ b/spec/frontend/vue_shared/new_namespace/new_namespace_page_spec.js
@@ -14,7 +14,7 @@ describe('Experimental new project creation app', () => {
 
   const DEFAULT_PROPS = {
     title: 'Create something',
-    initialBreadcrumb: 'Something',
+    initialBreadcrumbs: [{ text: 'Something', href: '#' }],
     panels: [
       { name: 'panel1', selector: '#some-selector1' },
       { name: 'panel2', selector: '#some-selector2' },
@@ -33,7 +33,6 @@ describe('Experimental new project creation app', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     window.location.hash = '';
   });
 
@@ -46,8 +45,8 @@ describe('Experimental new project creation app', () => {
       expect(findWelcomePage().exists()).toBe(true);
     });
 
-    it('does not render breadcrumbs', () => {
-      expect(findBreadcrumb().exists()).toBe(false);
+    it('renders breadcrumbs', () => {
+      expect(findBreadcrumb().exists()).toBe(true);
     });
   });
 
@@ -75,7 +74,7 @@ describe('Experimental new project creation app', () => {
     it('renders breadcrumbs', () => {
       const breadcrumb = findBreadcrumb();
       expect(breadcrumb.exists()).toBe(true);
-      expect(breadcrumb.props().items[0].text).toBe(DEFAULT_PROPS.initialBreadcrumb);
+      expect(breadcrumb.props().items[0].text).toBe(DEFAULT_PROPS.initialBreadcrumbs[0].text);
     });
   });
 
diff --git a/spec/frontend/vue_shared/plugins/global_toast_spec.js b/spec/frontend/vue_shared/plugins/global_toast_spec.js
index 322586a772c..0bf2737fb2b 100644
--- a/spec/frontend/vue_shared/plugins/global_toast_spec.js
+++ b/spec/frontend/vue_shared/plugins/global_toast_spec.js
@@ -1,14 +1,16 @@
-import toast, { instance } from '~/vue_shared/plugins/global_toast';
+import toast from '~/vue_shared/plugins/global_toast';
 
-describe('Global toast', () => {
-  let spyFunc;
-
-  beforeEach(() => {
-    spyFunc = jest.spyOn(instance.$toast, 'show').mockImplementation(() => {});
-  });
+const mockSpy = jest.fn();
+jest.mock('@gitlab/ui', () => ({
+  GlToast: (Vue) => {
+    // eslint-disable-next-line no-param-reassign
+    Vue.prototype.$toast = { show: (...args) => mockSpy(...args) };
+  },
+}));
 
+describe('Global toast', () => {
   afterEach(() => {
-    spyFunc.mockRestore();
+    mockSpy.mockRestore();
   });
 
   it("should call GitLab UI's toast method", () => {
@@ -17,7 +19,7 @@ describe('Global toast', () => {
 
     toast(arg1, arg2);
 
-    expect(instance.$toast.show).toHaveBeenCalledTimes(1);
-    expect(instance.$toast.show).toHaveBeenCalledWith(arg1, arg2);
+    expect(mockSpy).toHaveBeenCalledTimes(1);
+    expect(mockSpy).toHaveBeenCalledWith(arg1, arg2);
   });
 });
diff --git a/spec/frontend/vue_shared/security_configuration/components/section_layout_spec.js b/spec/frontend/vue_shared/security_configuration/components/section_layout_spec.js
index 136fe74b0d6..d258658d5e2 100644
--- a/spec/frontend/vue_shared/security_configuration/components/section_layout_spec.js
+++ b/spec/frontend/vue_shared/security_configuration/components/section_layout_spec.js
@@ -21,10 +21,6 @@ describe('Section Layout component', () => {
   const findHeading = () => wrapper.find('h2');
   const findLoader = () => wrapper.findComponent(SectionLoader);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('basic structure', () => {
     beforeEach(() => {
       createComponent({ heading: 'testheading' });
diff --git a/spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js b/spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js
index 0a5e46d9263..6345393951c 100644
--- a/spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js
+++ b/spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js
@@ -56,10 +56,6 @@ describe('ManageViaMr component', () => {
     );
   }
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   // This component supports different report types/mutations depending on
   // whether it's in a CE or EE context. This makes sure we are only testing
   // the ones available in the current test context.
diff --git a/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js b/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
index 5f2b13a79c9..299a3d62421 100644
--- a/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
+++ b/spec/frontend/vue_shared/security_reports/components/security_report_download_dropdown_spec.js
@@ -15,11 +15,6 @@ describe('SecurityReportDownloadDropdown component', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('given report artifacts', () => {
     beforeEach(() => {
       artifacts = [
diff --git a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
index 221da35de3d..257f59612e8 100644
--- a/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
+++ b/spec/frontend/vue_shared/security_reports/security_reports_app_spec.js
@@ -14,7 +14,7 @@ import {
   sastDiffSuccessMock,
   secretDetectionDiffSuccessMock,
 } from 'jest/vue_shared/security_reports/mock_data';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import HelpIcon from '~/vue_shared/security_reports/components/help_icon.vue';
@@ -26,7 +26,7 @@ import {
 import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/graphql/queries/security_report_merge_request_download_paths.query.graphql';
 import SecurityReportsApp from '~/vue_shared/security_reports/security_reports_app.vue';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 Vue.use(VueApollo);
 Vue.use(Vuex);
@@ -74,10 +74,6 @@ describe('Security reports app', () => {
   const findDownloadDropdown = () => wrapper.findComponent(SecurityReportDownloadDropdown);
   const findHelpIconComponent = () => wrapper.findComponent(HelpIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('given the artifacts query is loading', () => {
     beforeEach(() => {
       createComponent({
diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js
index 45a39d2dd58..cbeff184e9d 100644
--- a/spec/frontend/webhooks/components/form_url_app_spec.js
+++ b/spec/frontend/webhooks/components/form_url_app_spec.js
@@ -19,10 +19,6 @@ describe('FormUrlApp', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findAllRadioButtons = () => wrapper.findAllComponents(GlFormRadio);
   const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
   const findUrlMaskDisable = () => findAllRadioButtons().at(0);
diff --git a/spec/frontend/whats_new/components/app_spec.js b/spec/frontend/whats_new/components/app_spec.js
index ee15034daff..000b07f4dfd 100644
--- a/spec/frontend/whats_new/components/app_spec.js
+++ b/spec/frontend/whats_new/components/app_spec.js
@@ -49,7 +49,7 @@ describe('App', () => {
       store,
       propsData: buildProps(),
       directives: {
-        GlResizeObserver: createMockDirective(),
+        GlResizeObserver: createMockDirective('gl-resize-observer'),
       },
     });
   };
@@ -71,7 +71,6 @@ describe('App', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     unmockTracking();
   });
 
diff --git a/spec/frontend/whats_new/components/feature_spec.js b/spec/frontend/whats_new/components/feature_spec.js
index 099054bf8ca..d69ac2803df 100644
--- a/spec/frontend/whats_new/components/feature_spec.js
+++ b/spec/frontend/whats_new/components/feature_spec.js
@@ -30,11 +30,6 @@ describe("What's new single feature", () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders the date', () => {
     createWrapper({ feature: exampleFeature });
 
diff --git a/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js b/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js
index b199f4f0c49..79717b8767e 100644
--- a/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js
+++ b/spec/frontend/whats_new/utils/get_drawer_body_height_spec.js
@@ -11,10 +11,6 @@ describe('~/whats_new/utils/get_drawer_body_height', () => {
     });
   });
 
-  afterEach(() => {
-    drawerWrapper.destroy();
-  });
-
   const setClientHeight = (el, height) => {
     Object.defineProperty(el, 'clientHeight', {
       get() {
diff --git a/spec/frontend/work_items/components/app_spec.js b/spec/frontend/work_items/components/app_spec.js
index 95034085493..d799e8042b1 100644
--- a/spec/frontend/work_items/components/app_spec.js
+++ b/spec/frontend/work_items/components/app_spec.js
@@ -12,10 +12,6 @@ describe('Work Items Application', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders a component', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/item_state_spec.js b/spec/frontend/work_items/components/item_state_spec.js
index c3cc2fbc556..c3bdbfe030e 100644
--- a/spec/frontend/work_items/components/item_state_spec.js
+++ b/spec/frontend/work_items/components/item_state_spec.js
@@ -21,10 +21,6 @@ describe('ItemState', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders label and dropdown', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/item_title_spec.js b/spec/frontend/work_items/components/item_title_spec.js
index 6361f8dafc4..aef310319ab 100644
--- a/spec/frontend/work_items/components/item_title_spec.js
+++ b/spec/frontend/work_items/components/item_title_spec.js
@@ -19,10 +19,6 @@ describe('ItemTitle', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders title contents', () => {
     expect(findInputEl().attributes()).toMatchObject({
       'data-placeholder': 'Add a title...',
diff --git a/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap b/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
index 5901642b8a1..1c01451f047 100644
--- a/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
+++ b/spec/frontend/work_items/components/notes/__snapshots__/work_item_note_replying_spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Work Item Note Replying should have the note body and header 1`] = `"<note-header-stub author=\\"[object Object]\\" actiontext=\\"\\" noteabletype=\\"\\" expanded=\\"true\\" showspinner=\\"true\\"></note-header-stub>"`;
+exports[`Work Item Note Replying should have the note body and header 1`] = `"<note-header-stub author=\\"[object Object]\\" actiontext=\\"\\" noteabletype=\\"\\" expanded=\\"true\\" showspinner=\\"true\\" noteurl=\\"\\"></note-header-stub>"`;
diff --git a/spec/frontend/work_items/components/notes/activity_filter_spec.js b/spec/frontend/work_items/components/notes/activity_filter_spec.js
deleted file mode 100644
index eb4bcbf942b..00000000000
--- a/spec/frontend/work_items/components/notes/activity_filter_spec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { nextTick } from 'vue';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
-import { ASC, DESC } from '~/notes/constants';
-
-import { mockTracking } from 'helpers/tracking_helper';
-import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
-
-describe('Activity Filter', () => {
-  let wrapper;
-
-  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findNewestFirstItem = () => wrapper.findByTestId('js-newest-first');
-
-  const createComponent = ({ sortOrder = ASC, loading = false, workItemType = 'Task' } = {}) => {
-    wrapper = shallowMountExtended(ActivityFilter, {
-      propsData: {
-        sortOrder,
-        loading,
-        workItemType,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  describe('default', () => {
-    it('has a dropdown with 2 options', () => {
-      expect(findDropdown().exists()).toBe(true);
-      expect(findAllDropdownItems()).toHaveLength(ActivityFilter.SORT_OPTIONS.length);
-    });
-
-    it('has local storage sync with the correct props', () => {
-      expect(findLocalStorageSync().props('asString')).toBe(true);
-    });
-
-    it('emits `updateSavedSortOrder` event when update is emitted', async () => {
-      findLocalStorageSync().vm.$emit('input', ASC);
-
-      await nextTick();
-      expect(wrapper.emitted('updateSavedSortOrder')).toHaveLength(1);
-      expect(wrapper.emitted('updateSavedSortOrder')).toEqual([[ASC]]);
-    });
-  });
-
-  describe('when asc', () => {
-    describe('when the dropdown is clicked', () => {
-      it('calls the right actions', async () => {
-        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-        findNewestFirstItem().vm.$emit('click');
-        await nextTick();
-
-        expect(wrapper.emitted('changeSortOrder')).toHaveLength(1);
-        expect(wrapper.emitted('changeSortOrder')).toEqual([[DESC]]);
-
-        expect(trackingSpy).toHaveBeenCalledWith(
-          TRACKING_CATEGORY_SHOW,
-          'notes_sort_order_changed',
-          {
-            category: TRACKING_CATEGORY_SHOW,
-            label: 'item_track_notes_sorting',
-            property: 'type_Task',
-          },
-        );
-      });
-    });
-  });
-});
diff --git a/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js b/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js
new file mode 100644
index 00000000000..5ed9d581446
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_activity_sort_filter_spec.js
@@ -0,0 +1,109 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemActivitySortFilter from '~/work_items/components/notes/work_item_activity_sort_filter.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
+import { ASC, DESC } from '~/notes/constants';
+import {
+  WORK_ITEM_ACTIVITY_SORT_OPTIONS,
+  WORK_ITEM_NOTES_SORT_ORDER_KEY,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+  WORK_ITEM_NOTES_FILTER_KEY,
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_ACTIVITY_FILTER_OPTIONS,
+  TRACKING_CATEGORY_SHOW,
+} from '~/work_items/constants';
+
+import { mockTracking } from 'helpers/tracking_helper';
+
+describe('Work Item Activity/Discussions Filtering', () => {
+  let wrapper;
+
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findByDataTestId = (dataTestId) => wrapper.findByTestId(dataTestId);
+
+  const createComponent = ({
+    loading = false,
+    workItemType = 'Task',
+    sortFilterProp = ASC,
+    filterOptions = WORK_ITEM_ACTIVITY_SORT_OPTIONS,
+    trackingLabel = 'item_track_notes_sorting',
+    trackingAction = 'work_item_notes_sort_order_changed',
+    filterEvent = 'changeSort',
+    defaultSortFilterProp = ASC,
+    storageKey = WORK_ITEM_NOTES_SORT_ORDER_KEY,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemActivitySortFilter, {
+      propsData: {
+        loading,
+        workItemType,
+        sortFilterProp,
+        filterOptions,
+        trackingLabel,
+        trackingAction,
+        filterEvent,
+        defaultSortFilterProp,
+        storageKey,
+      },
+    });
+  };
+
+  describe.each`
+    usedFor        | filterOptions                        | storageKey                        | filterEvent       | newInputOption                          | trackingLabel                 | trackingAction                          | defaultSortFilterProp               | sortFilterProp                      | nonDefaultDataTestId
+    ${'Sorting'}   | ${WORK_ITEM_ACTIVITY_SORT_OPTIONS}   | ${WORK_ITEM_NOTES_SORT_ORDER_KEY} | ${'changeSort'}   | ${DESC}                                 | ${'item_track_notes_sorting'} | ${'work_item_notes_sort_order_changed'} | ${ASC}                              | ${ASC}                              | ${'newest-first'}
+    ${'Filtering'} | ${WORK_ITEM_ACTIVITY_FILTER_OPTIONS} | ${WORK_ITEM_NOTES_FILTER_KEY}     | ${'changeFilter'} | ${WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS} | ${'item_track_notes_sorting'} | ${'work_item_notes_filter_changed'}     | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${WORK_ITEM_NOTES_FILTER_ALL_NOTES} | ${'comments-activity'}
+  `(
+    'When used for $usedFor',
+    ({
+      filterOptions,
+      storageKey,
+      filterEvent,
+      trackingLabel,
+      trackingAction,
+      newInputOption,
+      defaultSortFilterProp,
+      sortFilterProp,
+      nonDefaultDataTestId,
+    }) => {
+      beforeEach(() => {
+        createComponent({
+          sortFilterProp,
+          filterOptions,
+          trackingLabel,
+          trackingAction,
+          filterEvent,
+          defaultSortFilterProp,
+          storageKey,
+        });
+      });
+
+      it('has a dropdown with options equal to the length of `filterOptions`', () => {
+        expect(findDropdown().exists()).toBe(true);
+        expect(findAllDropdownItems()).toHaveLength(filterOptions.length);
+      });
+
+      it('has local storage sync with the correct props', () => {
+        expect(findLocalStorageSync().props('asString')).toBe(true);
+        expect(findLocalStorageSync().props('storageKey')).toBe(storageKey);
+      });
+
+      it(`emits ${filterEvent} event when local storage input is emitted`, () => {
+        findLocalStorageSync().vm.$emit('input', newInputOption);
+
+        expect(wrapper.emitted(filterEvent)).toEqual([[newInputOption]]);
+      });
+
+      it('emits tracking event when the a non default dropdown item is clicked', () => {
+        const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+        findByDataTestId(nonDefaultDataTestId).vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, trackingAction, {
+          category: TRACKING_CATEGORY_SHOW,
+          label: trackingLabel,
+          property: 'type_Task',
+        });
+      });
+    },
+  );
+});
diff --git a/spec/frontend/work_items/components/notes/work_item_discussion_spec.js b/spec/frontend/work_items/components/notes/work_item_discussion_spec.js
index bb65b75c4d8..6b95da0910b 100644
--- a/spec/frontend/work_items/components/notes/work_item_discussion_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_discussion_spec.js
@@ -1,7 +1,5 @@
-import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import ToggleRepliesWidget from '~/notes/components/toggle_replies_widget.vue';
 import WorkItemDiscussion from '~/work_items/components/notes/work_item_discussion.vue';
 import WorkItemNote from '~/work_items/components/notes/work_item_note.vue';
@@ -21,9 +19,6 @@ describe('Work Item Discussion', () => {
   let wrapper;
   const mockWorkItemId = 'gid://gitlab/WorkItem/625';
 
-  const findTimelineEntryItem = () => wrapper.findComponent(TimelineEntryItem);
-  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
-  const findAvatar = () => wrapper.findComponent(GlAvatar);
   const findToggleRepliesWidget = () => wrapper.findComponent(ToggleRepliesWidget);
   const findAllThreads = () => wrapper.findAllComponents(WorkItemNote);
   const findThreadAtIndex = (index) => findAllThreads().at(index);
@@ -55,19 +50,6 @@ describe('Work Item Discussion', () => {
       createComponent();
     });
 
-    it('Should be wrapped inside the timeline entry item', () => {
-      expect(findTimelineEntryItem().exists()).toBe(true);
-    });
-
-    it('should have the author avatar of the work item note', () => {
-      expect(findAvatarLink().exists()).toBe(true);
-      expect(findAvatarLink().attributes('href')).toBe(mockWorkItemCommentNote.author.webUrl);
-
-      expect(findAvatar().exists()).toBe(true);
-      expect(findAvatar().props('src')).toBe(mockWorkItemCommentNote.author.avatarUrl);
-      expect(findAvatar().props('entityName')).toBe(mockWorkItemCommentNote.author.username);
-    });
-
     it('should not show the the toggle replies widget wrapper when no replies', () => {
       expect(findToggleRepliesWidget().exists()).toBe(false);
     });
@@ -89,13 +71,17 @@ describe('Work Item Discussion', () => {
     });
 
     it('the number of threads should be equal to the response length', async () => {
-      findToggleRepliesWidget().vm.$emit('toggle');
-      await nextTick();
       expect(findAllThreads()).toHaveLength(
         mockWorkItemNotesWidgetResponseWithComments.discussions.nodes[0].notes.nodes.length,
       );
     });
 
+    it('should collapse when we click on toggle replies widget', async () => {
+      findToggleRepliesWidget().vm.$emit('toggle');
+      await nextTick();
+      expect(findAllThreads()).toHaveLength(1);
+    });
+
     it('should autofocus when we click expand replies', async () => {
       const mainComment = findThreadAtIndex(0);
 
diff --git a/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js b/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js
new file mode 100644
index 00000000000..339efad0608
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_history_only_filter_note_spec.js
@@ -0,0 +1,44 @@
+import { GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemHistoryOnlyFilterNote from '~/work_items/components/notes/work_item_history_only_filter_note.vue';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS,
+} from '~/work_items/constants';
+
+describe('Work Item History Filter note', () => {
+  let wrapper;
+
+  const findShowAllActivityButton = () => wrapper.findByTestId('show-all-activity');
+  const findShowCommentsButton = () => wrapper.findByTestId('show-comments-only');
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(WorkItemHistoryOnlyFilterNote, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('timelineContent renders a string containing instruction for switching feed type', () => {
+    expect(wrapper.text()).toContain(
+      "You're only seeing other activity in the feed. To add a comment, switch to one of the following options.",
+    );
+  });
+
+  it('emits `changeFilter` event with 0 parameter on clicking Show all activity button', () => {
+    findShowAllActivityButton().vm.$emit('click');
+
+    expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ALL_NOTES]]);
+  });
+
+  it('emits `changeFilter` event with 1 parameter on clicking Show comments only button', () => {
+    findShowCommentsButton().vm.$emit('click');
+
+    expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_COMMENTS]]);
+  });
+});
diff --git a/spec/frontend/work_items/components/notes/work_item_note_actions_spec.js b/spec/frontend/work_items/components/notes/work_item_note_actions_spec.js
index d85cd46c1c3..b293127b6af 100644
--- a/spec/frontend/work_items/components/notes/work_item_note_actions_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_note_actions_spec.js
@@ -1,52 +1,116 @@
 import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import EmojiPicker from '~/emoji/components/picker.vue';
+import waitForPromises from 'helpers/wait_for_promises';
 import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
 import WorkItemNoteActions from '~/work_items/components/notes/work_item_note_actions.vue';
+import addAwardEmojiMutation from '~/work_items/graphql/notes/work_item_note_add_award_emoji.mutation.graphql';
+
+Vue.use(VueApollo);
 
 describe('Work Item Note Actions', () => {
   let wrapper;
+  const noteId = '1';
 
   const findReplyButton = () => wrapper.findComponent(ReplyButton);
   const findEditButton = () => wrapper.find('[data-testid="edit-work-item-note"]');
+  const findEmojiButton = () => wrapper.find('[data-testid="note-emoji-button"]');
+
+  const addEmojiMutationResolver = jest.fn().mockResolvedValue({
+    data: {
+      errors: [],
+    },
+  });
+
+  const EmojiPickerStub = {
+    props: EmojiPicker.props,
+    template: '<div></div>',
+  };
 
-  const createComponent = ({ showReply = true, showEdit = true } = {}) => {
+  const createComponent = ({ showReply = true, showEdit = true, showAwardEmoji = true } = {}) => {
     wrapper = shallowMount(WorkItemNoteActions, {
       propsData: {
         showReply,
         showEdit,
+        noteId,
+        showAwardEmoji,
+      },
+      provide: {
+        glFeatures: {
+          workItemsMvc2: true,
+        },
       },
+      stubs: {
+        EmojiPicker: EmojiPickerStub,
+      },
+      apolloProvider: createMockApollo([[addAwardEmojiMutation, addEmojiMutationResolver]]),
     });
   };
 
-  describe('Default', () => {
-    it('Should show the reply button by default', () => {
+  describe('reply button', () => {
+    it('is visible by default', () => {
       createComponent();
+
       expect(findReplyButton().exists()).toBe(true);
     });
-  });
 
-  describe('When the reply button needs to be hidden', () => {
-    it('Should show the reply button by default', () => {
+    it('is hidden when showReply false', () => {
       createComponent({ showReply: false });
+
       expect(findReplyButton().exists()).toBe(false);
     });
   });
 
-  it('shows edit button when `showEdit` prop is true', () => {
-    createComponent();
+  describe('edit button', () => {
+    it('is visible when `showEdit` prop is true', () => {
+      createComponent();
 
-    expect(findEditButton().exists()).toBe(true);
-  });
+      expect(findEditButton().exists()).toBe(true);
+    });
+
+    it('is hidden when `showEdit` prop is false', () => {
+      createComponent({ showEdit: false });
+
+      expect(findEditButton().exists()).toBe(false);
+    });
 
-  it('does not show edit button when `showEdit` prop is false', () => {
-    createComponent({ showEdit: false });
+    it('emits `startEditing` event when clicked', () => {
+      createComponent();
+      findEditButton().vm.$emit('click');
 
-    expect(findEditButton().exists()).toBe(false);
+      expect(wrapper.emitted('startEditing')).toEqual([[]]);
+    });
   });
 
-  it('emits `startEditing` event when edit button is clicked', () => {
-    createComponent();
-    findEditButton().vm.$emit('click');
+  describe('emoji picker', () => {
+    it('is visible when `showAwardEmoji` prop is true', () => {
+      createComponent();
+
+      expect(findEmojiButton().exists()).toBe(true);
+    });
+
+    it('is hidden when `showAwardEmoji` prop is false', () => {
+      createComponent({ showAwardEmoji: false });
 
-    expect(wrapper.emitted('startEditing')).toEqual([[]]);
+      expect(findEmojiButton().exists()).toBe(false);
+    });
+
+    it('commits mutation on click', async () => {
+      const awardName = 'carrot';
+
+      createComponent();
+
+      findEmojiButton().vm.$emit('click', awardName);
+
+      await waitForPromises();
+
+      expect(findEmojiButton().emitted('errors')).toEqual(undefined);
+      expect(addEmojiMutationResolver).toHaveBeenCalledWith({
+        awardableId: noteId,
+        name: awardName,
+      });
+    });
   });
 });
diff --git a/spec/frontend/work_items/components/notes/work_item_note_spec.js b/spec/frontend/work_items/components/notes/work_item_note_spec.js
index 9b87419cee7..8e574dc1a81 100644
--- a/spec/frontend/work_items/components/notes/work_item_note_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_note_spec.js
@@ -198,10 +198,6 @@ describe('Work Item Note', () => {
         expect(findNoteActions().exists()).toBe(true);
       });
 
-      it('should not have the Avatar link for main thread inside the timeline-entry', () => {
-        expect(findAuthorAvatarLink().exists()).toBe(false);
-      });
-
       it('should have the reply button props', () => {
         expect(findNoteActions().props('showReply')).toBe(true);
       });
@@ -228,7 +224,7 @@ describe('Work Item Note', () => {
       });
     });
 
-    it('should display a dropdown if user has a permission to delete a note', () => {
+    it('should display the `Delete comment` dropdown item if user has a permission to delete a note', () => {
       createComponent({
         note: {
           ...mockWorkItemCommentNote,
@@ -237,12 +233,14 @@ describe('Work Item Note', () => {
       });
 
       expect(findDropdown().exists()).toBe(true);
+      expect(findDeleteNoteButton().exists()).toBe(true);
     });
 
-    it('should not display a dropdown if user has no permission to delete a note', () => {
+    it('should not display the `Delete comment` dropdown item if user has no permission to delete a note', () => {
       createComponent();
 
-      expect(findDropdown().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(true);
+      expect(findDeleteNoteButton().exists()).toBe(false);
     });
 
     it('should emit `deleteNote` event when delete note action is clicked', () => {
diff --git a/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
new file mode 100644
index 00000000000..daf74f7a93b
--- /dev/null
+++ b/spec/frontend/work_items/components/notes/work_item_notes_activity_header_spec.js
@@ -0,0 +1,63 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WorkItemNotesActivityHeader from '~/work_items/components/notes/work_item_notes_activity_header.vue';
+import { ASC } from '~/notes/constants';
+import {
+  WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  WORK_ITEM_NOTES_FILTER_ONLY_HISTORY,
+} from '~/work_items/constants';
+
+describe('Work Item Note Activity Header', () => {
+  let wrapper;
+
+  const findActivityLabelHeading = () => wrapper.find('h3');
+  const findActivityFilterDropdown = () => wrapper.findByTestId('work-item-filter');
+  const findActivitySortDropdown = () => wrapper.findByTestId('work-item-sort');
+
+  const createComponent = ({
+    disableActivityFilterSort = false,
+    sortOrder = ASC,
+    workItemType = 'Task',
+    discussionFilter = WORK_ITEM_NOTES_FILTER_ALL_NOTES,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemNotesActivityHeader, {
+      propsData: {
+        disableActivityFilterSort,
+        sortOrder,
+        workItemType,
+        discussionFilter,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('Should have the Activity label', () => {
+    expect(findActivityLabelHeading().text()).toBe(WorkItemNotesActivityHeader.i18n.activityLabel);
+  });
+
+  it('Should have Activity filtering dropdown', () => {
+    expect(findActivityFilterDropdown().exists()).toBe(true);
+  });
+
+  it('Should have Activity sorting dropdown', () => {
+    expect(findActivitySortDropdown().exists()).toBe(true);
+  });
+
+  describe('Activity Filter', () => {
+    it('emits `changeFilter` when filtering discussions', () => {
+      findActivityFilterDropdown().vm.$emit('changeFilter', WORK_ITEM_NOTES_FILTER_ONLY_HISTORY);
+
+      expect(wrapper.emitted('changeFilter')).toEqual([[WORK_ITEM_NOTES_FILTER_ONLY_HISTORY]]);
+    });
+  });
+
+  describe('Activity Sorting', () => {
+    it('emits `changeSort` when sorting discussions/activity', () => {
+      findActivitySortDropdown().vm.$emit('changeSort', ASC);
+
+      expect(wrapper.emitted('changeSort')).toEqual([[ASC]]);
+    });
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index 3c312fb4552..a0db8172bf6 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -52,10 +52,6 @@ describe('WorkItemActions component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders modal', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_assignees_spec.js b/spec/frontend/work_items/components/work_item_assignees_spec.js
index e85f62b881d..2a8159f7294 100644
--- a/spec/frontend/work_items/components/work_item_assignees_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_spec.js
@@ -113,10 +113,6 @@ describe('WorkItemAssignees component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('passes the correct data-user-id attribute', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_description_rendered_spec.js b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
index 0ab2546440b..4f1d49ee2e5 100644
--- a/spec/frontend/work_items/components/work_item_description_rendered_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
@@ -29,10 +29,6 @@ describe('WorkItemDescription', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders gfm', async () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_description_spec.js b/spec/frontend/work_items/components/work_item_description_spec.js
index a12ec23c15a..b4b7b8989ea 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -99,10 +99,6 @@ describe('WorkItemDescription', () => {
     }
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('editing description with workItemsMvc FF enabled', () => {
     beforeEach(() => {
       workItemsMvc = true;
@@ -117,11 +113,14 @@ describe('WorkItemDescription', () => {
       await createComponent({ isEditing: true });
 
       expect(findMarkdownEditor().props()).toMatchObject({
-        autocompleteDataSources: autocompleteDataSources(fullPath, iid),
         supportsQuickActions: true,
         renderMarkdownPath: markdownPreviewPath(fullPath, iid),
         quickActionsDocsPath: wrapper.vm.$options.quickActionsDocsPath,
       });
+
+      expect(findMarkdownEditor().vm.$attrs).toMatchObject({
+        'autocomplete-data-sources': autocompleteDataSources(fullPath, iid),
+      });
     });
   });
 
diff --git a/spec/frontend/work_items/components/work_item_detail_modal_spec.js b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
index 938cf6e6f51..1bdf5d1c840 100644
--- a/spec/frontend/work_items/components/work_item_detail_modal_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_modal_spec.js
@@ -82,10 +82,6 @@ describe('WorkItemDetailModal component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders WorkItemDetail', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
index 64a7502671e..fe7556f8ec6 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -99,9 +99,7 @@ describe('WorkItemDetail component', () => {
     subscriptionHandler = titleSubscriptionHandler,
     confidentialityMock = [updateWorkItemMutation, jest.fn()],
     error = undefined,
-    workItemsMvcEnabled = false,
     workItemsMvc2Enabled = false,
-    fetchByIid = false,
   } = {}) => {
     const handlers = [
       [workItemQuery, handler],
@@ -124,9 +122,7 @@ describe('WorkItemDetail component', () => {
       },
       provide: {
         glFeatures: {
-          workItemsMvc: workItemsMvcEnabled,
           workItemsMvc2: workItemsMvc2Enabled,
-          useIidInWorkItemsPath: fetchByIid,
         },
         hasIssueWeightsFeature: true,
         hasIterationsFeature: true,
@@ -149,7 +145,6 @@ describe('WorkItemDetail component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     setWindowLocation('');
   });
 
@@ -420,6 +415,12 @@ describe('WorkItemDetail component', () => {
         expect(findParentButton().props('icon')).toBe(mockParent.parent.workItemType.iconName);
       });
 
+      it('shows parent title and iid', () => {
+        expect(findParentButton().text()).toBe(
+          `${mockParent.parent.title} #${mockParent.parent.iid}`,
+        );
+      });
+
       it('sets the parent breadcrumb URL pointing to issue page when parent type is `Issue`', () => {
         expect(findParentButton().attributes().href).toBe('../../issues/5');
       });
@@ -441,6 +442,11 @@ describe('WorkItemDetail component', () => {
 
         expect(findParentButton().attributes().href).toBe(mockParentObjective.parent.webUrl);
       });
+
+      it('shows work item type and iid', () => {
+        const { iid, workItemType } = workItemQueryResponse.data.workItem;
+        expect(findParent().text()).toContain(`${workItemType.name} #${iid}`);
+      });
     });
   });
 
@@ -626,7 +632,7 @@ describe('WorkItemDetail component', () => {
     });
   });
 
-  it('calls the global ID work item query when `useIidInWorkItemsPath` feature flag is false', async () => {
+  it('calls the global ID work item query when there is no `iid_path` parameter in URL', async () => {
     createComponent();
     await waitForPromises();
 
@@ -636,20 +642,10 @@ describe('WorkItemDetail component', () => {
     expect(successByIidHandler).not.toHaveBeenCalled();
   });
 
-  it('calls the global ID work item query when `useIidInWorkItemsPath` feature flag is true but there is no `iid_path` parameter in URL', async () => {
-    createComponent({ fetchByIid: true });
-    await waitForPromises();
-
-    expect(successHandler).toHaveBeenCalledWith({
-      id: workItemQueryResponse.data.workItem.id,
-    });
-    expect(successByIidHandler).not.toHaveBeenCalled();
-  });
-
-  it('calls the IID work item query when `useIidInWorkItemsPath` feature flag is true and `iid_path` route parameter is present', async () => {
+  it('calls the IID work item query when `iid_path` route parameter is present', async () => {
     setWindowLocation(`?iid_path=true`);
 
-    createComponent({ fetchByIid: true, iidPathQueryParam: 'true' });
+    createComponent();
     await waitForPromises();
 
     expect(successHandler).not.toHaveBeenCalled();
@@ -659,10 +655,10 @@ describe('WorkItemDetail component', () => {
     });
   });
 
-  it('calls the IID work item query when `useIidInWorkItemsPath` feature flag is true and `iid_path` route parameter is present and is a modal', async () => {
+  it('calls the IID work item query when `iid_path` route parameter is present and is a modal', async () => {
     setWindowLocation(`?iid_path=true`);
 
-    createComponent({ fetchByIid: true, iidPathQueryParam: 'true', isModal: true });
+    createComponent({ isModal: true });
     await waitForPromises();
 
     expect(successHandler).not.toHaveBeenCalled();
@@ -748,21 +744,10 @@ describe('WorkItemDetail component', () => {
   });
 
   describe('notes widget', () => {
-    it('does not render notes by default', async () => {
+    it('renders notes by default', async () => {
       createComponent();
       await waitForPromises();
 
-      expect(findNotesWidget().exists()).toBe(false);
-    });
-
-    it('renders notes when the work_items_mvc flag is on', async () => {
-      const notesWorkItem = workItemResponseFactory({
-        notesWidgetPresent: true,
-      });
-      const handler = jest.fn().mockResolvedValue(notesWorkItem);
-      createComponent({ workItemsMvcEnabled: true, handler });
-      await waitForPromises();
-
       expect(findNotesWidget().exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/work_items/components/work_item_due_date_spec.js b/spec/frontend/work_items/components/work_item_due_date_spec.js
index 7ebaf8209c7..b4811db8bed 100644
--- a/spec/frontend/work_items/components/work_item_due_date_spec.js
+++ b/spec/frontend/work_items/components/work_item_due_date_spec.js
@@ -46,10 +46,6 @@ describe('WorkItemDueDate component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('when can update', () => {
     describe('start date', () => {
       describe('`Add start date` button', () => {
diff --git a/spec/frontend/work_items/components/work_item_labels_spec.js b/spec/frontend/work_items/components/work_item_labels_spec.js
index 0b6ab5c3290..6d51448194b 100644
--- a/spec/frontend/work_items/components/work_item_labels_spec.js
+++ b/spec/frontend/work_items/components/work_item_labels_spec.js
@@ -72,10 +72,6 @@ describe('WorkItemLabels component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has a label', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js b/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js
index 5fbd8e7e1a7..688dccbda79 100644
--- a/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js
@@ -15,10 +15,6 @@ describe('RelatedItemsTree', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('OkrActionsSplitButton', () => {
     describe('template', () => {
       it('renders objective and key results sections', () => {
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
index 0470249d7ce..721436e217e 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js
@@ -7,7 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 
 import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue';
 
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue';
 
 import getWorkItemTreeQuery from '~/work_items/graphql/work_item_tree.query.graphql';
@@ -31,7 +31,7 @@ import {
   workItemObjectiveMetadataWidgets,
 } from '../../mock_data';
 
-jest.mock('~/flash');
+jest.mock('~/alert');
 
 describe('WorkItemLinkChild', () => {
   const WORK_ITEM_ID = 'gid://gitlab/WorkItem/2';
@@ -67,10 +67,6 @@ describe('WorkItemLinkChild', () => {
     createAlert.mockClear();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it.each`
     status      | childItem             | statusIconName    | statusIconColorClass   | rawTimestamp                   | tooltipContents
     ${'open'}   | ${workItemTask}       | ${'issue-open-m'} | ${'gl-text-green-500'} | ${workItemTask.createdAt}      | ${'Created'}
@@ -109,10 +105,30 @@ describe('WorkItemLinkChild', () => {
     });
 
     it('renders item title', () => {
-      expect(titleEl.attributes('href')).toBe('/gitlab-org/gitlab-test/-/work_items/4');
+      expect(titleEl.attributes('href')).toBe(
+        '/gitlab-org/gitlab-test/-/work_items/4?iid_path=true',
+      );
       expect(titleEl.text()).toBe(workItemTask.title);
     });
 
+    describe('renders item title correctly for relative instance', () => {
+      beforeEach(() => {
+        window.gon = { relative_url_root: '/test' };
+        createComponent();
+        titleEl = wrapper.findByTestId('item-title');
+      });
+
+      it('renders item title with correct href', () => {
+        expect(titleEl.attributes('href')).toBe(
+          '/test/gitlab-org/gitlab-test/-/work_items/4?iid_path=true',
+        );
+      });
+
+      it('renders item title with correct text', () => {
+        expect(titleEl.text()).toBe(workItemTask.title);
+      });
+    });
+
     it.each`
       action                  | event          | emittedEvent
       ${'doing mouseover on'} | ${'mouseover'} | ${'mouseover'}
@@ -149,6 +165,8 @@ describe('WorkItemLinkChild', () => {
       expect(metadataEl.props()).toMatchObject({
         metadataWidgets: workItemObjectiveMetadataWidgets,
       });
+
+      expect(wrapper.find('[data-testid="links-child"]').classes()).toContain('gl-py-3');
     });
 
     it('does not render item metadata component when item has no metadata present', () => {
@@ -158,6 +176,8 @@ describe('WorkItemLinkChild', () => {
       });
 
       expect(findMetadataComponent().exists()).toBe(false);
+
+      expect(wrapper.find('[data-testid="links-child"]').classes()).toContain('gl-py-0');
     });
   });
 
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_form_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_form_spec.js
index 480f8fbcc58..5184b24d202 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_form_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_form_spec.js
@@ -75,10 +75,6 @@ describe('WorkItemLinksForm', () => {
   const findConfidentialCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findAddChildButton = () => wrapper.findByTestId('add-child-button');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('creating a new work item', () => {
     beforeEach(async () => {
       await createComponent();
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
index e3f3b74f296..4e53fc2987b 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js
@@ -17,10 +17,6 @@ describe('WorkItemLinksMenu', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders dropdown and dropdown items', () => {
     expect(findDropdown().exists()).toBe(true);
     expect(findRemoveDropdownItem().exists()).toBe(true);
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
index ec51f92b578..99e44b4d89c 100644
--- a/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
+++ b/spec/frontend/work_items/components/work_item_links/work_item_links_spec.js
@@ -54,7 +54,6 @@ describe('WorkItemLinks', () => {
     mutationHandler = mutationChangeParentHandler,
     issueDetailsQueryHandler = jest.fn().mockResolvedValue(getIssueDetailsResponse()),
     hasIterationsFeature = false,
-    fetchByIid = false,
   } = {}) => {
     mockApollo = createMockApollo(
       [
@@ -76,11 +75,7 @@ describe('WorkItemLinks', () => {
       },
       provide: {
         projectPath: 'project/path',
-        iid: '1',
         hasIterationsFeature,
-        glFeatures: {
-          useIidInWorkItemsPath: fetchByIid,
-        },
       },
       propsData: { issuableId: 1 },
       apolloProvider: mockApollo,
@@ -351,7 +346,7 @@ describe('WorkItemLinks', () => {
 
       beforeEach(async () => {
         setWindowLocation('?iid_path=true');
-        await createComponent({ fetchByIid: true });
+        await createComponent();
 
         firstChild = findFirstWorkItemLinkChild();
       });
@@ -391,7 +386,7 @@ describe('WorkItemLinks', () => {
 
     it('starts prefetching work item by iid if URL contains work item id', async () => {
       setWindowLocation('?work_item_iid=5&iid_path=true');
-      await createComponent({ fetchByIid: true });
+      await createComponent();
 
       expect(childWorkItemByIidHandler).toHaveBeenCalledWith({
         iid: '5',
@@ -402,7 +397,7 @@ describe('WorkItemLinks', () => {
 
   it('does not open the modal if work item iid URL parameter is not found in child items', async () => {
     setWindowLocation('?work_item_iid=555&iid_path=true');
-    await createComponent({ fetchByIid: true });
+    await createComponent();
 
     expect(showModal).not.toHaveBeenCalled();
     expect(wrapper.findComponent(WorkItemDetailModal).props('workItemIid')).toBe(null);
@@ -410,7 +405,7 @@ describe('WorkItemLinks', () => {
 
   it('opens the modal if work item iid URL parameter is found in child items', async () => {
     setWindowLocation('?work_item_iid=2&iid_path=true');
-    await createComponent({ fetchByIid: true });
+    await createComponent();
 
     expect(showModal).toHaveBeenCalled();
     expect(wrapper.findComponent(WorkItemDetailModal).props('workItemIid')).toBe('2');
diff --git a/spec/frontend/work_items/components/work_item_notes_spec.js b/spec/frontend/work_items/components/work_item_notes_spec.js
index 3db848a0ad2..a067923b9fc 100644
--- a/spec/frontend/work_items/components/work_item_notes_spec.js
+++ b/spec/frontend/work_items/components/work_item_notes_spec.js
@@ -9,10 +9,13 @@ import SystemNote from '~/work_items/components/notes/system_note.vue';
 import WorkItemNotes from '~/work_items/components/work_item_notes.vue';
 import WorkItemDiscussion from '~/work_items/components/notes/work_item_discussion.vue';
 import WorkItemAddNote from '~/work_items/components/notes/work_item_add_note.vue';
-import ActivityFilter from '~/work_items/components/notes/activity_filter.vue';
+import WorkItemNotesActivityHeader from '~/work_items/components/notes/work_item_notes_activity_header.vue';
 import workItemNotesQuery from '~/work_items/graphql/notes/work_item_notes.query.graphql';
 import workItemNotesByIidQuery from '~/work_items/graphql/notes/work_item_notes_by_iid.query.graphql';
 import deleteWorkItemNoteMutation from '~/work_items/graphql/notes/delete_work_item_notes.mutation.graphql';
+import workItemNoteCreatedSubscription from '~/work_items/graphql/notes/work_item_note_created.subscription.graphql';
+import workItemNoteUpdatedSubscription from '~/work_items/graphql/notes/work_item_note_updated.subscription.graphql';
+import workItemNoteDeletedSubscription from '~/work_items/graphql/notes/work_item_note_deleted.subscription.graphql';
 import { DEFAULT_PAGE_SIZE_NOTES, WIDGET_TYPE_NOTES } from '~/work_items/constants';
 import { ASC, DESC } from '~/notes/constants';
 import {
@@ -21,6 +24,9 @@ import {
   mockWorkItemNotesByIidResponse,
   mockMoreWorkItemNotesResponse,
   mockWorkItemNotesResponseWithComments,
+  workItemNotesCreateSubscriptionResponse,
+  workItemNotesUpdateSubscriptionResponse,
+  workItemNotesDeleteSubscriptionResponse,
 } from '../mock_data';
 
 const mockWorkItemId = workItemQueryResponse.data.workItem.id;
@@ -53,10 +59,9 @@ describe('WorkItemNotes component', () => {
 
   const findAllSystemNotes = () => wrapper.findAllComponents(SystemNote);
   const findAllListItems = () => wrapper.findAll('ul.timeline > *');
-  const findActivityLabel = () => wrapper.find('label');
   const findWorkItemAddNote = () => wrapper.findComponent(WorkItemAddNote);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
-  const findSortingFilter = () => wrapper.findComponent(ActivityFilter);
+  const findActivityHeader = () => wrapper.findComponent(WorkItemNotesActivityHeader);
   const findSystemNoteAtIndex = (index) => findAllSystemNotes().at(index);
   const findAllWorkItemCommentNotes = () => wrapper.findAllComponents(WorkItemDiscussion);
   const findWorkItemCommentNoteAtIndex = (index) => findAllWorkItemCommentNotes().at(index);
@@ -73,6 +78,15 @@ describe('WorkItemNotes component', () => {
   const deleteWorkItemNoteMutationSuccessHandler = jest.fn().mockResolvedValue({
     data: { destroyNote: { note: null, __typename: 'DestroyNote' } },
   });
+  const notesCreateSubscriptionHandler = jest
+    .fn()
+    .mockResolvedValue(workItemNotesCreateSubscriptionResponse);
+  const notesUpdateSubscriptionHandler = jest
+    .fn()
+    .mockResolvedValue(workItemNotesUpdateSubscriptionResponse);
+  const notesDeleteSubscriptionHandler = jest
+    .fn()
+    .mockResolvedValue(workItemNotesDeleteSubscriptionResponse);
   const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
 
   const createComponent = ({
@@ -86,6 +100,9 @@ describe('WorkItemNotes component', () => {
         [workItemNotesQuery, defaultWorkItemNotesQueryHandler],
         [workItemNotesByIidQuery, workItemNotesByIidQueryHandler],
         [deleteWorkItemNoteMutation, deleteWINoteMutationHandler],
+        [workItemNoteCreatedSubscription, notesCreateSubscriptionHandler],
+        [workItemNoteUpdatedSubscription, notesUpdateSubscriptionHandler],
+        [workItemNoteDeletedSubscription, notesDeleteSubscriptionHandler],
       ]),
       propsData: {
         workItemId,
@@ -96,11 +113,6 @@ describe('WorkItemNotes component', () => {
         fetchByIid,
         workItemType: 'task',
       },
-      provide: {
-        glFeatures: {
-          useIidInWorkItemsPath: fetchByIid,
-        },
-      },
       stubs: {
         GlModal: stubComponent(GlModal, { methods: { show: showModal } }),
       },
@@ -111,8 +123,8 @@ describe('WorkItemNotes component', () => {
     createComponent();
   });
 
-  it('renders activity label', () => {
-    expect(findActivityLabel().exists()).toBe(true);
+  it('has the work item note activity header', () => {
+    expect(findActivityHeader().exists()).toBe(true);
   });
 
   it('passes correct props to comment form component', async () => {
@@ -203,26 +215,22 @@ describe('WorkItemNotes component', () => {
       await waitForPromises();
     });
 
-    it('filter exists', () => {
-      expect(findSortingFilter().exists()).toBe(true);
-    });
-
-    it('sorts the list when the `changeSortOrder` event is emitted', async () => {
+    it('sorts the list when the `changeSort` event is emitted', async () => {
       expect(findSystemNoteAtIndex(0).props('note').id).toEqual(firstSystemNodeId);
 
-      await findSortingFilter().vm.$emit('changeSortOrder', DESC);
+      await findActivityHeader().vm.$emit('changeSort', DESC);
 
       expect(findSystemNoteAtIndex(0).props('note').id).not.toEqual(firstSystemNodeId);
     });
 
     it('puts form at start of list in when sorting by newest first', async () => {
-      await findSortingFilter().vm.$emit('changeSortOrder', DESC);
+      await findActivityHeader().vm.$emit('changeSort', DESC);
 
       expect(findAllListItems().at(0).is(WorkItemAddNote)).toEqual(true);
     });
 
     it('puts form at end of list in when sorting by oldest first', async () => {
-      await findSortingFilter().vm.$emit('changeSortOrder', ASC);
+      await findActivityHeader().vm.$emit('changeSort', ASC);
 
       expect(findAllListItems().at(-1).is(WorkItemAddNote)).toEqual(true);
     });
@@ -334,4 +342,31 @@ describe('WorkItemNotes component', () => {
       ['Something went wrong when deleting a comment. Please try again'],
     ]);
   });
+
+  describe('Notes subscriptions', () => {
+    beforeEach(async () => {
+      createComponent({
+        defaultWorkItemNotesQueryHandler: workItemNotesWithCommentsQueryHandler,
+      });
+      await waitForPromises();
+    });
+
+    it('has create notes subscription', () => {
+      expect(notesCreateSubscriptionHandler).toHaveBeenCalledWith({
+        noteableId: mockWorkItemId,
+      });
+    });
+
+    it('has delete notes subscription', () => {
+      expect(notesDeleteSubscriptionHandler).toHaveBeenCalledWith({
+        noteableId: mockWorkItemId,
+      });
+    });
+
+    it('has update notes subscription', () => {
+      expect(notesUpdateSubscriptionHandler).toHaveBeenCalledWith({
+        noteableId: mockWorkItemId,
+      });
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_state_spec.js b/spec/frontend/work_items/components/work_item_state_spec.js
index b24d940d56a..d1262057c73 100644
--- a/spec/frontend/work_items/components/work_item_state_spec.js
+++ b/spec/frontend/work_items/components/work_item_state_spec.js
@@ -44,10 +44,6 @@ describe('WorkItemState component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders state', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_title_spec.js b/spec/frontend/work_items/components/work_item_title_spec.js
index a549aad5cd8..34391b74cf7 100644
--- a/spec/frontend/work_items/components/work_item_title_spec.js
+++ b/spec/frontend/work_items/components/work_item_title_spec.js
@@ -41,10 +41,6 @@ describe('WorkItemTitle component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders title', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/components/work_item_type_icon_spec.js b/spec/frontend/work_items/components/work_item_type_icon_spec.js
index 182fb0f8cb6..a5e955c4dbf 100644
--- a/spec/frontend/work_items/components/work_item_type_icon_spec.js
+++ b/spec/frontend/work_items/components/work_item_type_icon_spec.js
@@ -9,7 +9,7 @@ function createComponent(propsData) {
   wrapper = shallowMount(WorkItemTypeIcon, {
     propsData,
     directives: {
-      GlTooltip: createMockDirective(),
+      GlTooltip: createMockDirective('gl-tooltip'),
     },
   });
 }
@@ -17,10 +17,6 @@ function createComponent(propsData) {
 describe('Work Item type component', () => {
   const findIcon = () => wrapper.findComponent(GlIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe.each`
     workItemType           | workItemIconName      | iconName                     | text              | showTooltipOnHover
     ${'TASK'}              | ${''}                 | ${'issue-type-task'}         | ${'Task'}         | ${false}
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index d4832fe376d..fecf98b2651 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -82,6 +82,7 @@ export const workItemQueryResponse = {
       userPermissions: {
         deleteWorkItem: false,
         updateWorkItem: false,
+        __typename: 'WorkItemPermissions',
       },
       widgets: [
         {
@@ -182,6 +183,7 @@ export const updateWorkItemMutationResponse = {
         userPermissions: {
           deleteWorkItem: false,
           updateWorkItem: false,
+          __typename: 'WorkItemPermissions',
         },
         widgets: [
           {
@@ -330,6 +332,7 @@ export const workItemResponseFactory = ({
       userPermissions: {
         deleteWorkItem: canDelete,
         updateWorkItem: canUpdate,
+        __typename: 'WorkItemPermissions',
       },
       widgets: [
         {
@@ -473,23 +476,20 @@ export const workItemResponseFactory = ({
 
 export const getIssueDetailsResponse = ({ confidential = false } = {}) => ({
   data: {
-    workspace: {
-      id: 'gid://gitlab/Project/1',
-      issuable: {
-        id: 'gid://gitlab/Issue/4',
-        confidential,
-        iteration: {
-          id: 'gid://gitlab/Iteration/1124',
-          __typename: 'Iteration',
-        },
-        milestone: {
-          id: 'gid://gitlab/Milestone/28',
-          __typename: 'Milestone',
-        },
-        __typename: 'Issue',
+    issue: {
+      id: 'gid://gitlab/Issue/4',
+      confidential,
+      iteration: {
+        id: 'gid://gitlab/Iteration/1124',
+        __typename: 'Iteration',
       },
-      __typename: 'Project',
+      milestone: {
+        id: 'gid://gitlab/Milestone/28',
+        __typename: 'Milestone',
+      },
+      __typename: 'Issue',
     },
+    __typename: 'Project',
   },
 });
 
@@ -542,6 +542,7 @@ export const createWorkItemMutationResponse = {
         userPermissions: {
           deleteWorkItem: false,
           updateWorkItem: false,
+          __typename: 'WorkItemPermissions',
         },
         widgets: [],
       },
@@ -590,6 +591,7 @@ export const createWorkItemFromTaskMutationResponse = {
         userPermissions: {
           deleteWorkItem: false,
           updateWorkItem: false,
+          __typename: 'WorkItemPermissions',
         },
         widgets: [
           {
@@ -630,6 +632,7 @@ export const createWorkItemFromTaskMutationResponse = {
         userPermissions: {
           deleteWorkItem: false,
           updateWorkItem: false,
+          __typename: 'WorkItemPermissions',
         },
         widgets: [],
       },
@@ -831,15 +834,20 @@ export const workItemHierarchyEmptyResponse = {
   data: {
     workItem: {
       id: 'gid://gitlab/WorkItem/1',
+      iid: 1,
+      state: 'OPEN',
       workItemType: {
-        id: 'gid://gitlab/WorkItems::Type/6',
+        id: 'gid://gitlab/WorkItems::Type/1',
         name: 'Issue',
         iconName: 'issue-type-issue',
         __typename: 'WorkItemType',
       },
       title: 'New title',
+      description: '',
       createdAt: '2022-08-03T12:41:54Z',
+      updatedAt: null,
       closedAt: null,
+      author: mockAssignees[0],
       project: {
         __typename: 'Project',
         id: '1',
@@ -849,14 +857,11 @@ export const workItemHierarchyEmptyResponse = {
       userPermissions: {
         deleteWorkItem: false,
         updateWorkItem: false,
+        __typename: 'WorkItemPermissions',
       },
       confidential: false,
       widgets: [
         {
-          type: 'DESCRIPTION',
-          __typename: 'WorkItemWidgetDescription',
-        },
-        {
           type: 'HIERARCHY',
           parent: null,
           hasChildren: false,
@@ -876,6 +881,8 @@ export const workItemHierarchyNoUpdatePermissionResponse = {
   data: {
     workItem: {
       id: 'gid://gitlab/WorkItem/1',
+      iid: 1,
+      state: 'OPEN',
       workItemType: {
         id: 'gid://gitlab/WorkItems::Type/6',
         name: 'Issue',
@@ -883,9 +890,15 @@ export const workItemHierarchyNoUpdatePermissionResponse = {
         __typename: 'WorkItemType',
       },
       title: 'New title',
+      description: '',
+      createdAt: '2022-08-03T12:41:54Z',
+      updatedAt: null,
+      closedAt: null,
+      author: mockAssignees[0],
       userPermissions: {
         deleteWorkItem: false,
         updateWorkItem: false,
+        __typename: 'WorkItemPermissions',
       },
       project: {
         __typename: 'Project',
@@ -896,10 +909,6 @@ export const workItemHierarchyNoUpdatePermissionResponse = {
       confidential: false,
       widgets: [
         {
-          type: 'DESCRIPTION',
-          __typename: 'WorkItemWidgetDescription',
-        },
-        {
           type: 'HIERARCHY',
           parent: null,
           hasChildren: true,
@@ -952,6 +961,7 @@ export const workItemTask = {
   confidential: false,
   createdAt: '2022-08-03T12:41:54Z',
   closedAt: null,
+  widgets: [],
   __typename: 'WorkItem',
 };
 
@@ -969,6 +979,7 @@ export const confidentialWorkItemTask = {
   confidential: true,
   createdAt: '2022-08-03T12:41:54Z',
   closedAt: null,
+  widgets: [],
   __typename: 'WorkItem',
 };
 
@@ -986,6 +997,7 @@ export const closedWorkItemTask = {
   confidential: false,
   createdAt: '2022-08-03T12:41:54Z',
   closedAt: '2022-08-12T13:07:52Z',
+  widgets: [],
   __typename: 'WorkItem',
 };
 
@@ -1007,6 +1019,7 @@ export const childrenWorkItems = [
     confidential: false,
     createdAt: '2022-08-03T12:41:54Z',
     closedAt: null,
+    widgets: [],
     __typename: 'WorkItem',
   },
 ];
@@ -1017,15 +1030,19 @@ export const workItemHierarchyResponse = {
       id: 'gid://gitlab/WorkItem/1',
       iid: '1',
       workItemType: {
-        id: 'gid://gitlab/WorkItems::Type/6',
-        name: 'Objective',
-        iconName: 'issue-type-objective',
+        id: 'gid://gitlab/WorkItems::Type/1',
+        name: 'Issue',
+        iconName: 'issue-type-issue',
         __typename: 'WorkItemType',
       },
       title: 'New title',
       userPermissions: {
         deleteWorkItem: true,
         updateWorkItem: true,
+        __typename: 'WorkItemPermissions',
+      },
+      author: {
+        ...mockAssignees[0],
       },
       confidential: false,
       project: {
@@ -1034,12 +1051,13 @@ export const workItemHierarchyResponse = {
         fullPath: 'test-project-path',
         archived: false,
       },
+      description: 'Issue description',
+      state: 'OPEN',
+      createdAt: '2022-08-03T12:41:54Z',
+      updatedAt: null,
+      closedAt: null,
       widgets: [
         {
-          type: 'DESCRIPTION',
-          __typename: 'WorkItemWidgetDescription',
-        },
-        {
           type: 'HIERARCHY',
           parent: null,
           hasChildren: true,
@@ -1110,6 +1128,7 @@ export const workItemObjectiveWithChild = {
   userPermissions: {
     deleteWorkItem: true,
     updateWorkItem: true,
+    __typename: 'WorkItemPermissions',
   },
   author: {
     ...mockAssignees[0],
@@ -1176,6 +1195,7 @@ export const workItemHierarchyTreeResponse = {
       userPermissions: {
         deleteWorkItem: true,
         updateWorkItem: true,
+        __typename: 'WorkItemPermissions',
       },
       confidential: false,
       project: {
@@ -1252,6 +1272,7 @@ export const changeWorkItemParentMutationResponse = {
         userPermissions: {
           deleteWorkItem: true,
           updateWorkItem: true,
+          __typename: 'WorkItemPermissions',
         },
         description: null,
         id: 'gid://gitlab/WorkItem/2',
@@ -1624,6 +1645,7 @@ export const projectWorkItemResponse = {
       workItems: {
         nodes: [workItemQueryResponse.data.workItem],
       },
+      __typename: 'Project',
     },
   },
 };
@@ -1681,6 +1703,8 @@ export const mockWorkItemNotesResponse = {
                       systemNoteIconName: 'link',
                       createdAt: '2022-11-14T04:18:59Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_199',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -1724,6 +1748,8 @@ export const mockWorkItemNotesResponse = {
                       systemNoteIconName: 'clock',
                       createdAt: '2022-11-14T04:18:59Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_201',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -1766,6 +1792,8 @@ export const mockWorkItemNotesResponse = {
                       systemNoteIconName: 'weight',
                       createdAt: '2022-11-25T07:16:20Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_202',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -1868,6 +1896,8 @@ export const mockWorkItemNotesByIidResponse = {
                             systemNoteIconName: 'link',
                             createdAt: '2022-11-14T04:18:59Z',
                             lastEditedAt: null,
+                            url:
+                              'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                             lastEditedBy: null,
                             system: true,
                             internal: false,
@@ -1913,6 +1943,8 @@ export const mockWorkItemNotesByIidResponse = {
                             systemNoteIconName: 'clock',
                             createdAt: '2022-11-14T04:18:59Z',
                             lastEditedAt: null,
+                            url:
+                              'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                             lastEditedBy: null,
                             system: true,
                             internal: false,
@@ -1959,6 +1991,8 @@ export const mockWorkItemNotesByIidResponse = {
                             systemNoteIconName: 'iteration',
                             createdAt: '2022-11-14T04:19:00Z',
                             lastEditedAt: null,
+                            url:
+                              'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                             lastEditedBy: null,
                             system: true,
                             internal: false,
@@ -2059,6 +2093,8 @@ export const mockMoreWorkItemNotesResponse = {
                       systemNoteIconName: 'link',
                       createdAt: '2022-11-14T04:18:59Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -2102,6 +2138,8 @@ export const mockMoreWorkItemNotesResponse = {
                       systemNoteIconName: 'clock',
                       createdAt: '2022-11-14T04:18:59Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -2144,6 +2182,8 @@ export const mockMoreWorkItemNotesResponse = {
                       systemNoteIconName: 'weight',
                       createdAt: '2022-11-25T07:16:20Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       system: true,
                       internal: false,
@@ -2205,6 +2245,7 @@ export const createWorkItemNoteResponse = {
                 systemNoteIconName: null,
                 createdAt: '2023-01-25T04:49:46Z',
                 lastEditedAt: null,
+                url: 'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                 lastEditedBy: null,
                 discussion: {
                   id: 'gid://gitlab/Discussion/c872ba2d7d3eb780d2255138d67ca8b04f65b122',
@@ -2252,6 +2293,7 @@ export const mockWorkItemCommentNote = {
   systemNoteIconName: false,
   createdAt: '2022-11-25T07:16:20Z',
   lastEditedAt: null,
+  url: 'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
   lastEditedBy: null,
   system: false,
   internal: false,
@@ -2331,6 +2373,8 @@ export const mockWorkItemNotesResponseWithComments = {
                       systemNoteIconName: null,
                       createdAt: '2023-01-12T07:47:40Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       discussion: {
                         id: 'gid://gitlab/Discussion/2bb1162fd0d39297d1a68fdd7d4083d3780af0f3',
@@ -2365,6 +2409,8 @@ export const mockWorkItemNotesResponseWithComments = {
                       systemNoteIconName: null,
                       createdAt: '2023-01-18T09:09:54Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       discussion: {
                         id: 'gid://gitlab/Discussion/2bb1162fd0d39297d1a68fdd7d4083d3780af0f3',
@@ -2406,6 +2452,8 @@ export const mockWorkItemNotesResponseWithComments = {
                       systemNoteIconName: 'weight',
                       createdAt: '2022-11-25T07:16:20Z',
                       lastEditedAt: null,
+                      url:
+                        'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
                       lastEditedBy: null,
                       system: false,
                       internal: false,
@@ -2447,3 +2495,129 @@ export const mockWorkItemNotesResponseWithComments = {
     },
   },
 };
+
+export const workItemNotesCreateSubscriptionResponse = {
+  data: {
+    workItemNoteCreated: {
+      id: 'gid://gitlab/WeightNote/0f2f195ec0d1ef95ee9d5b10446b8e96a7d81864',
+      body: 'changed weight to **89**',
+      bodyHtml: '<p dir="auto">changed weight to <strong>89</strong></p>',
+      systemNoteIconName: 'weight',
+      createdAt: '2022-11-25T07:16:20Z',
+      lastEditedAt: null,
+      url: 'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
+      lastEditedBy: null,
+      system: true,
+      internal: false,
+      discussion: {
+        id: 'gid://gitlab/Discussion/8bbc4890b6ff0f2cde93a5a0947cd2b8a13d3b6e',
+        notes: {
+          nodes: [
+            {
+              id: 'gid://gitlab/WeightNote/0f2f195ec0d1ef95ee9d5b10446b8e96a9881864',
+              body: 'changed weight to **89**',
+              bodyHtml: '<p dir="auto">changed weight to <strong>89</strong></p>',
+              systemNoteIconName: 'weight',
+              createdAt: '2022-11-25T07:16:20Z',
+              lastEditedAt: null,
+              url: 'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
+              lastEditedBy: null,
+              system: true,
+              internal: false,
+              discussion: {
+                id: 'gid://gitlab/Discussion/9c17769ca29798eddaed539d010da12723560987',
+              },
+              userPermissions: {
+                adminNote: false,
+                awardEmoji: true,
+                readNote: true,
+                createNote: true,
+                resolveNote: true,
+                repositionNote: true,
+                __typename: 'NotePermissions',
+              },
+              author: {
+                avatarUrl:
+                  'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+                id: 'gid://gitlab/User/1',
+                name: 'Administrator',
+                username: 'root',
+                webUrl: 'http://127.0.0.1:3000/root',
+                __typename: 'UserCore',
+              },
+              __typename: 'Note',
+            },
+          ],
+        },
+      },
+      userPermissions: {
+        adminNote: false,
+        awardEmoji: true,
+        readNote: true,
+        createNote: true,
+        resolveNote: true,
+        repositionNote: true,
+        __typename: 'NotePermissions',
+      },
+      author: {
+        avatarUrl:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        id: 'gid://gitlab/User/1',
+        name: 'Administrator',
+        username: 'root',
+        webUrl: 'http://127.0.0.1:3000/root',
+        __typename: 'UserCore',
+      },
+      __typename: 'Note',
+    },
+  },
+};
+
+export const workItemNotesUpdateSubscriptionResponse = {
+  data: {
+    workItemNoteUpdated: {
+      id: 'gid://gitlab/Note/0f2f195ec0d1ef95ee9d5b10446b8e96a9883894',
+      body: 'changed title',
+      bodyHtml: '<p dir="auto">changed title<strong>89</strong></p>',
+      systemNoteIconName: 'pencil',
+      createdAt: '2022-11-25T07:16:20Z',
+      lastEditedAt: null,
+      url: 'http://127.0.0.1:3000/flightjs/Flight/-/work_items/37?iid_path=true#note_191',
+      lastEditedBy: null,
+      system: true,
+      internal: false,
+      discussion: {
+        id: 'gid://gitlab/Discussion/9c17769ca29798eddaed539d010da12723560987',
+      },
+      userPermissions: {
+        adminNote: false,
+        awardEmoji: true,
+        readNote: true,
+        createNote: true,
+        resolveNote: true,
+        repositionNote: true,
+        __typename: 'NotePermissions',
+      },
+      author: {
+        avatarUrl:
+          'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+        id: 'gid://gitlab/User/1',
+        name: 'Administrator',
+        username: 'root',
+        webUrl: 'http://127.0.0.1:3000/root',
+        __typename: 'UserCore',
+      },
+      __typename: 'Note',
+    },
+  },
+};
+
+export const workItemNotesDeleteSubscriptionResponse = {
+  data: {
+    workItemNoteDeleted: {
+      id: 'gid://gitlab/DiscussionNote/235',
+      discussionId: 'gid://gitlab/Discussion/2bb1162fd0d39297d1a68fdd7d4083d3780af0f3',
+      lastDiscussionNote: false,
+    },
+  },
+};
diff --git a/spec/frontend/work_items/pages/create_work_item_spec.js b/spec/frontend/work_items/pages/create_work_item_spec.js
index 387c8a355fa..b963f041dd9 100644
--- a/spec/frontend/work_items/pages/create_work_item_spec.js
+++ b/spec/frontend/work_items/pages/create_work_item_spec.js
@@ -37,7 +37,6 @@ describe('Create work item component', () => {
     props = {},
     queryHandler = querySuccessHandler,
     mutationHandler = createWorkItemSuccessHandler,
-    fetchByIid = false,
   } = {}) => {
     fakeApollo = createMockApollo(
       [
@@ -66,15 +65,11 @@ describe('Create work item component', () => {
       },
       provide: {
         fullPath: 'full-path',
-        glFeatures: {
-          useIidInWorkItemsPath: fetchByIid,
-        },
       },
     });
   };
 
   afterEach(() => {
-    wrapper.destroy();
     fakeApollo = null;
   });
 
@@ -109,9 +104,8 @@ describe('Create work item component', () => {
 
       expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
         name: 'workItem',
-        params: {
-          id: '1',
-        },
+        params: { id: '1' },
+        query: { iid_path: 'true' },
       });
     });
 
@@ -210,18 +204,4 @@ describe('Create work item component', () => {
       'Something went wrong when creating work item. Please try again.',
     );
   });
-
-  it('performs a correct redirect when `useIidInWorkItemsPath` feature flag is enabled', async () => {
-    createComponent({ fetchByIid: true });
-    findTitleInput().vm.$emit('title-input', 'Test title');
-
-    wrapper.find('form').trigger('submit');
-    await waitForPromises();
-
-    expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
-      name: 'workItem',
-      params: { id: '1' },
-      query: { iid_path: 'true' },
-    });
-  });
 });
diff --git a/spec/frontend/work_items/pages/work_item_root_spec.js b/spec/frontend/work_items/pages/work_item_root_spec.js
index a766962771a..37326910e13 100644
--- a/spec/frontend/work_items/pages/work_item_root_spec.js
+++ b/spec/frontend/work_items/pages/work_item_root_spec.js
@@ -44,10 +44,6 @@ describe('Work items root component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders WorkItemDetail', () => {
     createComponent();
 
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
index ef9ae4a2eab..5dad7f7c43f 100644
--- a/spec/frontend/work_items/router_spec.js
+++ b/spec/frontend/work_items/router_spec.js
@@ -75,6 +75,7 @@ describe('Work items router', () => {
         WorkItemWeight: true,
         WorkItemIteration: true,
         WorkItemHealthStatus: true,
+        WorkItemNotes: true,
       },
     });
   };
@@ -88,6 +89,7 @@ describe('Work items router', () => {
   });
 
   afterEach(() => {
+    // eslint-disable-next-line @gitlab/vtu-no-explicit-wrapper-destroy
     wrapper.destroy();
     window.location.hash = '';
   });
diff --git a/spec/frontend/work_items_hierarchy/components/app_spec.js b/spec/frontend/work_items_hierarchy/components/app_spec.js
index 124ff5f1608..22fd7d5f48a 100644
--- a/spec/frontend/work_items_hierarchy/components/app_spec.js
+++ b/spec/frontend/work_items_hierarchy/components/app_spec.js
@@ -24,10 +24,6 @@ describe('WorkItemsHierarchy App', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('survey banner', () => {
     it('shows when the banner is visible', () => {
       createComponent({}, { bannerVisible: true });
diff --git a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
index 084aaa754ab..dfdef7915dd 100644
--- a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
+++ b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
@@ -40,10 +40,6 @@ describe('WorkItemsHierarchy Hierarchy', () => {
     );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('available structure', () => {
     let items = [];
 
diff --git a/spec/frontend/zen_mode_spec.js b/spec/frontend/zen_mode_spec.js
index 85f1dbdc305..025a92464f1 100644
--- a/spec/frontend/zen_mode_spec.js
+++ b/spec/frontend/zen_mode_spec.js
@@ -15,6 +15,8 @@ describe('ZenMode', () => {
   let dropzoneForElementSpy;
   const fixtureName = 'snippets/show.html';
 
+  const getTextarea = () => $('.notes-form textarea');
+
   function enterZen() {
     $('.notes-form .js-zen-enter').click();
   }
@@ -24,7 +26,7 @@ describe('ZenMode', () => {
   }
 
   function escapeKeydown() {
-    $('.notes-form textarea').trigger(
+    getTextarea().trigger(
       $.Event('keydown', {
         keyCode: 27,
       }),
@@ -50,6 +52,12 @@ describe('ZenMode', () => {
   });
 
   afterEach(() => {
+    $(document).off('click', '.js-zen-enter');
+    $(document).off('click', '.js-zen-leave');
+    $(document).off('zen_mode:enter');
+    $(document).off('zen_mode:leave');
+    $(document).off('keydown');
+
     resetHTMLFixture();
   });
 
@@ -62,14 +70,14 @@ describe('ZenMode', () => {
       $('.div-dropzone').addClass('js-invalid-dropzone');
       exitZen();
 
-      expect(dropzoneForElementSpy.mock.calls.length).toEqual(0);
+      expect(dropzoneForElementSpy).not.toHaveBeenCalled();
     });
 
     it('should call dropzone if element is dropzone valid', () => {
       $('.div-dropzone').removeClass('js-invalid-dropzone');
       exitZen();
 
-      expect(dropzoneForElementSpy.mock.calls.length).toEqual(2);
+      expect(dropzoneForElementSpy).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -82,10 +90,10 @@ describe('ZenMode', () => {
     });
 
     it('removes textarea styling', () => {
-      $('.notes-form textarea').attr('style', 'height: 400px');
+      getTextarea().attr('style', 'height: 400px');
       enterZen();
 
-      expect($('.notes-form textarea')).not.toHaveAttr('style');
+      expect(getTextarea()).not.toHaveAttr('style');
     });
   });
 
@@ -116,4 +124,15 @@ describe('ZenMode', () => {
       expect(utils.scrollToElement).toHaveBeenCalled();
     });
   });
+
+  it('restores textarea style', () => {
+    const style = 'color: red; overflow-y: hidden;';
+    getTextarea().attr('style', style);
+    expect(getTextarea()).toHaveAttr('style', style);
+
+    enterZen();
+    exitZen();
+
+    expect(getTextarea()).toHaveAttr('style', style);
+  });
 });