Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

526 files changed, 10013 insertions, 5794 deletions

diff --git a/spec/frontend/__helpers__/class_spec_helper.js b/spec/frontend/__helpers__/class_spec_helper.js
deleted file mode 100644
index b26f087f0c5..00000000000
--- a/spec/frontend/__helpers__/class_spec_helper.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// eslint-disable-next-line jest/no-export
-export default class ClassSpecHelper {
-  static itShouldBeAStaticMethod(base, method) {
-    return it('should be a static method', () => {
-      expect(Object.prototype.hasOwnProperty.call(base, method)).toBeTruthy();
-    });
-  }
-}
-
-window.ClassSpecHelper = ClassSpecHelper;
diff --git a/spec/frontend/__helpers__/class_spec_helper_spec.js b/spec/frontend/__helpers__/class_spec_helper_spec.js
deleted file mode 100644
index 533d5687bde..00000000000
--- a/spec/frontend/__helpers__/class_spec_helper_spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* global ClassSpecHelper */
-
-import './class_spec_helper';
-
-describe('ClassSpecHelper', () => {
-  let testContext;
-
-  beforeEach(() => {
-    testContext = {};
-  });
-
-  describe('itShouldBeAStaticMethod', () => {
-    beforeEach(() => {
-      class TestClass {
-        instanceMethod() {
-          this.prop = 'val';
-        }
-        static staticMethod() {}
-      }
-
-      testContext.TestClass = TestClass;
-    });
-
-    ClassSpecHelper.itShouldBeAStaticMethod(ClassSpecHelper, 'itShouldBeAStaticMethod');
-  });
-});
diff --git a/spec/frontend/__helpers__/dom_shims/index.js b/spec/frontend/__helpers__/dom_shims/index.js
index 742d55196b4..3b41e2ca2a7 100644
--- a/spec/frontend/__helpers__/dom_shims/index.js
+++ b/spec/frontend/__helpers__/dom_shims/index.js
@@ -11,3 +11,4 @@ import './window_scroll_to';
 import './scroll_by';
 import './size_properties';
 import './image_element_properties';
+import './text_encoder';
diff --git a/spec/frontend/__helpers__/dom_shims/text_encoder.js b/spec/frontend/__helpers__/dom_shims/text_encoder.js
new file mode 100644
index 00000000000..d3d5221a003
--- /dev/null
+++ b/spec/frontend/__helpers__/dom_shims/text_encoder.js
@@ -0,0 +1,4 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
diff --git a/spec/frontend/__helpers__/graphql_transformer.js b/spec/frontend/__helpers__/graphql_transformer.js
new file mode 100644
index 00000000000..e776e2ea6ac
--- /dev/null
+++ b/spec/frontend/__helpers__/graphql_transformer.js
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-commonjs */
+const loader = require('graphql-tag/loader');
+
+module.exports = {
+  process(src) {
+    return loader.call({ cacheable() {} }, src);
+  },
+};
diff --git a/spec/frontend/__helpers__/shared_test_setup.js b/spec/frontend/__helpers__/shared_test_setup.js
index 45a7b8e0352..2fe9fe89a90 100644
--- a/spec/frontend/__helpers__/shared_test_setup.js
+++ b/spec/frontend/__helpers__/shared_test_setup.js
@@ -1,7 +1,7 @@
 /* Common setup for both unit and integration test environments */
-import { config as testUtilsConfig } from '@vue/test-utils';
 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';
@@ -13,6 +13,8 @@ import './dom_shims';
 import './jquery';
 import '~/commons/bootstrap';
 
+enableAutoDestroy(afterEach);
+
 // This module has some fairly decent visual test coverage in it's own repository.
 jest.mock('@gitlab/favicon-overlay');
 jest.mock('~/lib/utils/axios_utils', () => jest.requireActual('helpers/mocks/axios_utils'));
@@ -44,16 +46,6 @@ Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
 
 expect.extend(customMatchers);
 
-testUtilsConfig.deprecationWarningHandler = (method, message) => {
-  const ALLOWED_DEPRECATED_METHODS = [
-    // https://gitlab.com/gitlab-org/gitlab/-/issues/295679
-    'finding components with `find` or `get`',
-  ];
-  if (!ALLOWED_DEPRECATED_METHODS.includes(method)) {
-    global.console.error(message);
-  }
-};
-
 Object.assign(global, {
   requestIdleCallback(cb) {
     const start = Date.now();
@@ -72,6 +64,7 @@ Object.assign(global, {
 beforeEach(() => {
   // make sure that each test actually tests something
   // see https://jestjs.io/docs/en/expect#expecthasassertions
+  // eslint-disable-next-line jest/no-standalone-expect
   expect.hasAssertions();
 
   // Reset the mocked window.location. This ensures tests don't interfere with
diff --git a/spec/frontend/__helpers__/stub_component.js b/spec/frontend/__helpers__/stub_component.js
index 4f9d1ee6f5d..3e9af994ee3 100644
--- a/spec/frontend/__helpers__/stub_component.js
+++ b/spec/frontend/__helpers__/stub_component.js
@@ -38,7 +38,7 @@ export function stubComponent(Component, options = {}) {
     // Do not render any slots/scoped slots except default
     // This differs from VTU behavior which renders all slots
     template: '<div><slot></slot></div>',
-    // allows wrapper.find(Component) to work for stub
+    // allows wrapper.findComponent(Component) to work for stub
     $_vueTestUtils_original: Component,
     ...options,
   };
diff --git a/spec/frontend/__helpers__/vue_mount_component_helper.js b/spec/frontend/__helpers__/vue_mount_component_helper.js
deleted file mode 100644
index ed43355ea5b..00000000000
--- a/spec/frontend/__helpers__/vue_mount_component_helper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Deprecated. Please do not use.
- * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445
- */
-const mountComponent = (Component, props = {}, el = null) =>
-  new Component({
-    propsData: props,
-  }).$mount(el);
-
-/**
- * Deprecated. Please do not use.
- * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445
- */
-export const createComponentWithStore = (Component, store, propsData = {}) =>
-  new Component({
-    store,
-    propsData,
-  });
-
-/**
- * Deprecated. Please do not use.
- * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445
- */
-export const mountComponentWithStore = (Component, { el, props, store }) =>
-  new Component({
-    store,
-    propsData: props || {},
-  }).$mount(el);
-
-/**
- * Deprecated. Please do not use.
- * Please see https://gitlab.com/groups/gitlab-org/-/epics/2445
- */
-export default mountComponent;
diff --git a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
index ae180c3b49d..466333f8a89 100644
--- a/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
+++ b/spec/frontend/__helpers__/vue_test_utils_helper_spec.js
@@ -140,11 +140,12 @@ describe('Vue test utils helpers', () => {
       const text = 'foo bar';
       const options = { selector: 'div' };
       const mockDiv = document.createElement('div');
-      const mockVm = new Vue({ render: (h) => h('div') }).$mount();
+      let mockVm;
 
       let wrapper;
       beforeEach(() => {
         jest.spyOn(vtu, 'createWrapper');
+        mockVm = new Vue({ render: (h) => h('div') }).$mount();
 
         wrapper = extendedWrapper(
           shallowMount({
diff --git a/spec/frontend/__mocks__/monaco-editor/index.js b/spec/frontend/__mocks__/monaco-editor/index.js
index 384f9993150..d09672a4ecf 100644
--- a/spec/frontend/__mocks__/monaco-editor/index.js
+++ b/spec/frontend/__mocks__/monaco-editor/index.js
@@ -8,10 +8,8 @@ import 'monaco-editor/esm/vs/language/css/monaco.contribution';
 import 'monaco-editor/esm/vs/language/json/monaco.contribution';
 import 'monaco-editor/esm/vs/language/html/monaco.contribution';
 import 'monaco-editor/esm/vs/basic-languages/monaco.contribution';
-import 'monaco-yaml/lib/esm/monaco.contribution';
 
 // This language starts trying to spin up web workers which obviously breaks in Jest environment
 jest.mock('monaco-editor/esm/vs/language/typescript/tsMode');
-jest.mock('monaco-yaml/lib/esm/yamlMode');
 
 export * from 'monaco-editor/esm/vs/editor/editor.api';
diff --git a/spec/frontend/__mocks__/monaco-yaml/index.js b/spec/frontend/__mocks__/monaco-yaml/index.js
new file mode 100644
index 00000000000..36681854d0b
--- /dev/null
+++ b/spec/frontend/__mocks__/monaco-yaml/index.js
@@ -0,0 +1,4 @@
+const setDiagnosticsOptions = jest.fn();
+const yamlDefaults = {};
+
+export { setDiagnosticsOptions, yamlDefaults };
diff --git a/spec/frontend/access_tokens/components/access_token_table_app_spec.js b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
index aed3db4aa4c..2fa14810578 100644
--- a/spec/frontend/access_tokens/components/access_token_table_app_spec.js
+++ b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlPagination, GlTable } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
 import { EVENT_SUCCESS, PAGE_SIZE } from '~/access_tokens/components/constants';
 import { __, s__, sprintf } from '~/locale';
@@ -11,7 +11,7 @@ describe('~/access_tokens/components/access_token_table_app', () => {
 
   const accessTokenType = 'personal access token';
   const accessTokenTypePlural = 'personal access tokens';
-  const initialActiveAccessTokens = [];
+  const information = undefined;
   const noActiveTokensMessage = 'This user has no active personal access tokens.';
   const showRole = false;
 
@@ -43,11 +43,12 @@ describe('~/access_tokens/components/access_token_table_app', () => {
   ];
 
   const createComponent = (props = {}) => {
-    wrapper = mount(AccessTokenTableApp, {
+    wrapper = mountExtended(AccessTokenTableApp, {
       provide: {
         accessTokenType,
         accessTokenTypePlural,
-        initialActiveAccessTokens,
+        information,
+        initialActiveAccessTokens: defaultActiveAccessTokens,
         noActiveTokensMessage,
         showRole,
         ...props,
@@ -71,8 +72,8 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     wrapper?.destroy();
   });
 
-  it('should render the `GlTable` with default empty message', () => {
-    createComponent();
+  it('should render an empty table with a default message', () => {
+    createComponent({ initialActiveAccessTokens: [] });
 
     const cells = findCells();
     expect(cells).toHaveLength(1);
@@ -81,58 +82,61 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     );
   });
 
-  it('should render the `GlTable` with custom empty message', () => {
+  it('should render an empty table with a custom message', () => {
     const noTokensMessage = 'This group has no active access tokens.';
-    createComponent({ noActiveTokensMessage: noTokensMessage });
+    createComponent({ initialActiveAccessTokens: [], noActiveTokensMessage: noTokensMessage });
 
     const cells = findCells();
     expect(cells).toHaveLength(1);
     expect(cells.at(0).text()).toBe(noTokensMessage);
   });
 
-  it('should render an h5 element', () => {
+  it('should show a title indicating the amount of tokens', () => {
     createComponent();
 
     expect(wrapper.find('h5').text()).toBe(
       sprintf(__('Active %{accessTokenTypePlural} (%{totalAccessTokens})'), {
         accessTokenTypePlural,
-        totalAccessTokens: initialActiveAccessTokens.length,
+        totalAccessTokens: defaultActiveAccessTokens.length,
       }),
     );
   });
 
-  it('should render the `GlTable` component with default 6 column headers', () => {
-    createComponent();
+  it('should render information section', () => {
+    const info = 'This is my information';
+    createComponent({ information: info });
 
-    const headers = findHeaders();
-    expect(headers).toHaveLength(6);
-    [
-      __('Token name'),
-      __('Scopes'),
-      s__('AccessTokens|Created'),
-      __('Last Used'),
-      __('Expires'),
-      __('Action'),
-    ].forEach((text, index) => {
-      expect(headers.at(index).text()).toBe(text);
-    });
+    expect(wrapper.findByTestId('information-section').text()).toBe(info);
   });
 
-  it('should render the `GlTable` component with 7 headers', () => {
-    createComponent({ showRole: true });
+  describe('table headers', () => {
+    it('should include `Action` column', () => {
+      createComponent();
+
+      const headers = findHeaders();
+      expect(headers.wrappers.map((header) => header.text())).toStrictEqual([
+        __('Token name'),
+        __('Scopes'),
+        s__('AccessTokens|Created'),
+        __('Last Used'),
+        __('Expires'),
+        __('Action'),
+      ]);
+    });
 
-    const headers = findHeaders();
-    expect(headers).toHaveLength(7);
-    [
-      __('Token name'),
-      __('Scopes'),
-      s__('AccessTokens|Created'),
-      __('Last Used'),
-      __('Expires'),
-      __('Role'),
-      __('Action'),
-    ].forEach((text, index) => {
-      expect(headers.at(index).text()).toBe(text);
+    it('should include `Role` column', () => {
+      createComponent({ showRole: true });
+
+      const headers = findHeaders();
+      expect(headers.wrappers.map((header) => header.text())).toStrictEqual([
+        __('Token name'),
+        __('Scopes'),
+        s__('AccessTokens|Created'),
+        __('Last Used'),
+        __('Expires'),
+        __('Role'),
+        __('Action'),
+      ]);
     });
   });
 
@@ -150,8 +154,8 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(assistiveElement.text()).toBe(s__('AccessTokens|The last time a token was used'));
   });
 
-  it('updates the table after a success AJAX event', async () => {
-    createComponent({ showRole: true });
+  it('updates the table after new tokens are created', async () => {
+    createComponent({ initialActiveAccessTokens: [], showRole: true });
     await triggerSuccess();
 
     const cells = findCells();
@@ -190,16 +194,43 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(button.props('category')).toBe('tertiary');
   });
 
-  describe('revoke path', () => {
-    beforeEach(() => {
-      createComponent({ showRole: true });
+  describe('when revoke_path is', () => {
+    describe('absent in all tokens', () => {
+      it('should not include `Action` column', () => {
+        createComponent({
+          initialActiveAccessTokens: defaultActiveAccessTokens.map(
+            ({ revoke_path, ...rest }) => rest,
+          ),
+          showRole: true,
+        });
+
+        const headers = findHeaders();
+        expect(headers).toHaveLength(6);
+        [
+          __('Token name'),
+          __('Scopes'),
+          s__('AccessTokens|Created'),
+          __('Last Used'),
+          __('Expires'),
+          __('Role'),
+        ].forEach((text, index) => {
+          expect(headers.at(index).text()).toBe(text);
+        });
+      });
     });
 
     it.each([{ revoke_path: null }, { revoke_path: undefined }])(
-      'with %p, does not show revoke button',
-      async (input) => {
-        await triggerSuccess(defaultActiveAccessTokens.map((data) => ({ ...data, ...input })));
-
+      '%p in some tokens, does not show revoke button',
+      (input) => {
+        createComponent({
+          initialActiveAccessTokens: [
+            defaultActiveAccessTokens.map((data) => ({ ...data, ...input }))[0],
+            defaultActiveAccessTokens[1],
+          ],
+          showRole: true,
+        });
+
+        expect(findHeaders().at(6).text()).toBe(__('Action'));
         expect(findCells().at(6).findComponent(GlButton).exists()).toBe(false);
       },
     );
@@ -207,7 +238,6 @@ describe('~/access_tokens/components/access_token_table_app', () => {
 
   it('sorts rows alphabetically', async () => {
     createComponent({ showRole: true });
-    await triggerSuccess();
 
     const cells = findCells();
 
@@ -226,7 +256,6 @@ describe('~/access_tokens/components/access_token_table_app', () => {
 
   it('sorts rows by date', async () => {
     createComponent({ showRole: true });
-    await triggerSuccess();
 
     const cells = findCells();
 
@@ -242,14 +271,20 @@ describe('~/access_tokens/components/access_token_table_app', () => {
     expect(cells.at(10).text()).toBe('Never');
   });
 
-  it('should show the pagination component when needed', async () => {
-    createComponent();
-    expect(findPagination().exists()).toBe(false);
+  describe('pagination', () => {
+    it('does not show pagination component', () => {
+      createComponent({
+        initialActiveAccessTokens: Array(PAGE_SIZE).fill(defaultActiveAccessTokens[0]),
+      });
 
-    await triggerSuccess(Array(PAGE_SIZE).fill(defaultActiveAccessTokens[0]));
-    expect(findPagination().exists()).toBe(false);
+      expect(findPagination().exists()).toBe(false);
+    });
 
-    await triggerSuccess(Array(PAGE_SIZE + 1).fill(defaultActiveAccessTokens[0]));
-    expect(findPagination().exists()).toBe(true);
+    it('shows the pagination component', () => {
+      createComponent({
+        initialActiveAccessTokens: Array(PAGE_SIZE + 1).fill(defaultActiveAccessTokens[0]),
+      });
+      expect(findPagination().exists()).toBe(true);
+    });
   });
 });
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 d12d200d214..b4af11169ad 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
@@ -22,6 +22,8 @@ describe('~/access_tokens/components/new_access_token_app', () => {
     });
   };
 
+  const findButtonEl = () => document.querySelector('[type=submit]');
+
   const triggerSuccess = async (newToken = 'new token') => {
     wrapper
       .findComponent(DomElementListener)
@@ -41,7 +43,7 @@ describe('~/access_tokens/components/new_access_token_app', () => {
         <input type="text" id="expires_at" value="2022-01-01"/>
         <input type="text" value='1'/>
         <input type="checkbox" checked/>
-        <input type="submit" value="Create"/>
+        <button type="submit" value="Create" class="disabled" disabled="disabled"/>
       </form>`,
     );
 
@@ -120,10 +122,10 @@ describe('~/access_tokens/components/new_access_token_app', () => {
       });
 
       it('should not reset the submit button value', async () => {
-        expect(document.querySelector('input[type=submit]').value).toBe('Create');
+        expect(findButtonEl().value).toBe('Create');
         await triggerSuccess();
 
-        expect(document.querySelector('input[type=submit]').value).toBe('Create');
+        expect(findButtonEl().value).toBe('Create');
       });
     });
   });
@@ -162,6 +164,17 @@ describe('~/access_tokens/components/new_access_token_app', () => {
 
       expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
     });
+
+    it('should enable the submit button', async () => {
+      const button = findButtonEl();
+      expect(button).toBeDisabled();
+      expect(button.className).toBe('disabled');
+
+      await triggerError();
+
+      expect(button).not.toBeDisabled();
+      expect(button.className).toBe('');
+    });
   });
 
   describe('before error or success', () => {
diff --git a/spec/frontend/access_tokens/index_spec.js b/spec/frontend/access_tokens/index_spec.js
index 55575ab25fc..1157e44f41a 100644
--- a/spec/frontend/access_tokens/index_spec.js
+++ b/spec/frontend/access_tokens/index_spec.js
@@ -1,7 +1,4 @@
-/* eslint-disable vue/require-prop-types */
-/* eslint-disable vue/one-component-per-file */
 import { createWrapper } from '@vue/test-utils';
-import Vue from 'vue';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 import {
@@ -10,10 +7,11 @@ import {
   initNewAccessTokenApp,
   initTokensApp,
 } from '~/access_tokens';
-import * as AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
+import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
 import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
-import * as NewAccessTokenApp from '~/access_tokens/components/new_access_token_app.vue';
-import * as TokensApp from '~/access_tokens/components/tokens_app.vue';
+import NewAccessTokenApp from '~/access_tokens/components/new_access_token_app.vue';
+import TokensApp from '~/access_tokens/components/tokens_app.vue';
+import { FORM_SELECTOR } from '~/access_tokens/components/constants';
 import { FEED_TOKEN, INCOMING_EMAIL_TOKEN, STATIC_OBJECT_TOKEN } from '~/access_tokens/constants';
 import { __, sprintf } from '~/locale';
 
@@ -28,26 +26,7 @@ describe('access tokens', () => {
   describe('initAccessTokenTableApp', () => {
     const accessTokenType = 'personal access token';
     const accessTokenTypePlural = 'personal access tokens';
-    const initialActiveAccessTokens = [{ id: '1' }];
-
-    const FakeAccessTokenTableApp = Vue.component('FakeComponent', {
-      inject: [
-        'accessTokenType',
-        'accessTokenTypePlural',
-        'initialActiveAccessTokens',
-        'noActiveTokensMessage',
-        'showRole',
-      ],
-      props: [
-        'accessTokenType',
-        'accessTokenTypePlural',
-        'initialActiveAccessTokens',
-        'noActiveTokensMessage',
-        'showRole',
-      ],
-      render: () => null,
-    });
-    AccessTokenTableApp.default = FakeAccessTokenTableApp;
+    const initialActiveAccessTokens = [{ revoked_path: '1' }];
 
     it('mounts the component and provides required values', () => {
       setHTMLFixture(
@@ -60,19 +39,18 @@ describe('access tokens', () => {
       );
 
       const vueInstance = initAccessTokenTableApp();
-
       wrapper = createWrapper(vueInstance);
-      const component = wrapper.findComponent(FakeAccessTokenTableApp);
+      const component = wrapper.findComponent({ name: 'AccessTokenTableRoot' });
 
       expect(component.exists()).toBe(true);
-
-      expect(component.props()).toMatchObject({
+      expect(wrapper.findComponent(AccessTokenTableApp).vm).toMatchObject({
         // Required value
         accessTokenType,
         accessTokenTypePlural,
         initialActiveAccessTokens,
 
         // Default values
+        information: undefined,
         noActiveTokensMessage: sprintf(__('This user has no active %{accessTokenTypePlural}.'), {
           accessTokenTypePlural,
         }),
@@ -81,12 +59,14 @@ describe('access tokens', () => {
     });
 
     it('mounts the component and provides all values', () => {
+      const information = 'Additional information';
       const noActiveTokensMessage = 'This group has no active access tokens.';
       setHTMLFixture(
         `<div id="js-access-token-table-app"
           data-access-token-type="${accessTokenType}"
           data-access-token-type-plural="${accessTokenTypePlural}"
           data-initial-active-access-tokens=${JSON.stringify(initialActiveAccessTokens)}
+          data-information="${information}"
           data-no-active-tokens-message="${noActiveTokensMessage}"
           data-show-role
           >
@@ -94,15 +74,15 @@ describe('access tokens', () => {
       );
 
       const vueInstance = initAccessTokenTableApp();
-
       wrapper = createWrapper(vueInstance);
-      const component = wrapper.findComponent(FakeAccessTokenTableApp);
+      const component = wrapper.findComponent({ name: 'AccessTokenTableRoot' });
 
       expect(component.exists()).toBe(true);
-      expect(component.props()).toMatchObject({
+      expect(component.findComponent(AccessTokenTableApp).vm).toMatchObject({
         accessTokenType,
         accessTokenTypePlural,
         initialActiveAccessTokens,
+        information,
         noActiveTokensMessage,
         showRole: true,
       });
@@ -157,23 +137,16 @@ describe('access tokens', () => {
     it('mounts the component and sets `accessTokenType` prop', () => {
       const accessTokenType = 'personal access token';
       setHTMLFixture(
-        `<div id="js-new-access-token-app" data-access-token-type="${accessTokenType}"></div>`,
+        `<div id="js-new-access-token-app" data-access-token-type="${accessTokenType}"></div>
+        <form id="${FORM_SELECTOR.slice(1)}"></form>`,
       );
 
-      const FakeNewAccessTokenApp = Vue.component('FakeComponent', {
-        inject: ['accessTokenType'],
-        props: ['accessTokenType'],
-        render: () => null,
-      });
-      NewAccessTokenApp.default = FakeNewAccessTokenApp;
-
       const vueInstance = initNewAccessTokenApp();
-
       wrapper = createWrapper(vueInstance);
-      const component = wrapper.findComponent(FakeNewAccessTokenApp);
+      const component = wrapper.findComponent({ name: 'NewAccessTokenRoot' });
 
       expect(component.exists()).toBe(true);
-      expect(component.props('accessTokenType')).toEqual(accessTokenType);
+      expect(component.findComponent(NewAccessTokenApp).vm).toMatchObject({ accessTokenType });
     });
 
     it('returns `null`', () => {
@@ -192,20 +165,12 @@ describe('access tokens', () => {
         `<div id="js-tokens-app" data-tokens-data=${JSON.stringify(tokensData)}></div>`,
       );
 
-      const FakeTokensApp = Vue.component('FakeComponent', {
-        inject: ['tokenTypes'],
-        props: ['tokenTypes'],
-        render: () => null,
-      });
-      TokensApp.default = FakeTokensApp;
-
       const vueInstance = initTokensApp();
-
       wrapper = createWrapper(vueInstance);
-      const component = wrapper.findComponent(FakeTokensApp);
+      const component = wrapper.findComponent(TokensApp);
 
       expect(component.exists()).toBe(true);
-      expect(component.props('tokenTypes')).toEqual(tokensData);
+      expect(component.vm).toMatchObject({ tokenTypes: tokensData });
     });
 
     it('returns `null`', () => {
diff --git a/spec/frontend/admin/broadcast_messages/components/base_spec.js b/spec/frontend/admin/broadcast_messages/components/base_spec.js
new file mode 100644
index 00000000000..020e1c1d7c1
--- /dev/null
+++ b/spec/frontend/admin/broadcast_messages/components/base_spec.js
@@ -0,0 +1,112 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
+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 axios from '~/lib/utils/axios_utils';
+import { redirectTo } from '~/lib/utils/url_utility';
+import BroadcastMessagesBase from '~/admin/broadcast_messages/components/base.vue';
+import MessagesTable from '~/admin/broadcast_messages/components/messages_table.vue';
+import { generateMockMessages, MOCK_MESSAGES } from '../mock_data';
+
+jest.mock('~/flash');
+jest.mock('~/lib/utils/url_utility');
+
+describe('BroadcastMessagesBase', () => {
+  let wrapper;
+  let axiosMock;
+
+  useMockLocationHelper();
+
+  const findTable = () => wrapper.findComponent(MessagesTable);
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(BroadcastMessagesBase, {
+      propsData: {
+        page: 1,
+        messagesCount: MOCK_MESSAGES.length,
+        messages: MOCK_MESSAGES,
+        ...props,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    wrapper.destroy();
+  });
+
+  it('renders the table and pagination when there are existing messages', () => {
+    createComponent();
+
+    expect(findTable().exists()).toBe(true);
+    expect(findPagination().exists()).toBe(true);
+  });
+
+  it('does not render the table when there are no visible messages', () => {
+    createComponent({ messages: [] });
+
+    expect(findTable().exists()).toBe(false);
+    expect(findPagination().exists()).toBe(true);
+  });
+
+  it('does not remove a deleted message if it was not in visibleMessages', async () => {
+    createComponent();
+
+    findTable().vm.$emit('delete-message', -1);
+    await waitForPromises();
+
+    expect(axiosMock.history.delete).toHaveLength(0);
+    expect(wrapper.vm.visibleMessages.length).toBe(MOCK_MESSAGES.length);
+  });
+
+  it('does not remove a deleted message if the request fails', async () => {
+    createComponent();
+    const { id, delete_path } = MOCK_MESSAGES[0];
+    axiosMock.onDelete(delete_path).replyOnce(500);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(wrapper.vm.visibleMessages.find((m) => m.id === id)).not.toBeUndefined();
+    expect(createAlert).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: BroadcastMessagesBase.i18n.deleteError,
+      }),
+    );
+  });
+
+  it('removes a deleted message from visibleMessages on success', async () => {
+    createComponent();
+    const { id, delete_path } = MOCK_MESSAGES[0];
+    axiosMock.onDelete(delete_path).replyOnce(200);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(wrapper.vm.visibleMessages.find((m) => m.id === id)).toBeUndefined();
+    expect(wrapper.vm.totalMessages).toBe(MOCK_MESSAGES.length - 1);
+  });
+
+  it('redirects to the first page when totalMessages changes from 21 to 20', async () => {
+    window.location.pathname = `${TEST_HOST}/admin/broadcast_messages`;
+
+    const messages = generateMockMessages(21);
+    const { id, delete_path } = messages[0];
+    createComponent({ messages, messagesCount: messages.length });
+
+    axiosMock.onDelete(delete_path).replyOnce(200);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(redirectTo).toHaveBeenCalledWith(`${TEST_HOST}/admin/broadcast_messages?page=1`);
+  });
+});
diff --git a/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
new file mode 100644
index 00000000000..349fab03853
--- /dev/null
+++ b/spec/frontend/admin/broadcast_messages/components/messages_table_spec.js
@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils';
+import MessagesTable from '~/admin/broadcast_messages/components/messages_table.vue';
+import { MOCK_MESSAGES } from '../mock_data';
+
+describe('MessagesTable', () => {
+  let wrapper;
+
+  const findRows = () => wrapper.findAll('[data-testid="message-row"]');
+  const findTargetRoles = () => wrapper.find('[data-testid="target-roles-th"]');
+  const findDeleteButton = (id) => wrapper.find(`[data-testid="delete-message-${id}"]`);
+
+  function createComponent(props = {}, glFeatures = {}) {
+    wrapper = mount(MessagesTable, {
+      provide: {
+        glFeatures,
+      },
+      propsData: {
+        messages: MOCK_MESSAGES,
+        ...props,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a table row for each message', () => {
+    createComponent();
+
+    expect(findRows()).toHaveLength(MOCK_MESSAGES.length);
+  });
+
+  it('renders the "Target Roles" column when roleTargetedBroadcastMessages is enabled', () => {
+    createComponent({}, { roleTargetedBroadcastMessages: true });
+    expect(findTargetRoles().exists()).toBe(true);
+  });
+
+  it('does not render the "Target Roles" column when roleTargetedBroadcastMessages is disabled', () => {
+    createComponent();
+    expect(findTargetRoles().exists()).toBe(false);
+  });
+
+  it('emits a delete-message event when a delete button is clicked', () => {
+    const { id } = MOCK_MESSAGES[0];
+    createComponent();
+    findDeleteButton(id).element.click();
+    expect(wrapper.emitted('delete-message')).toHaveLength(1);
+    expect(wrapper.emitted('delete-message')[0]).toEqual([id]);
+  });
+});
diff --git a/spec/frontend/admin/broadcast_messages/mock_data.js b/spec/frontend/admin/broadcast_messages/mock_data.js
new file mode 100644
index 00000000000..8dd98c2319d
--- /dev/null
+++ b/spec/frontend/admin/broadcast_messages/mock_data.js
@@ -0,0 +1,17 @@
+const generateMockMessage = (id) => ({
+  id,
+  delete_path: `/admin/broadcast_messages/${id}.js`,
+  edit_path: `/admin/broadcast_messages/${id}/edit`,
+  starts_at: new Date().toISOString(),
+  ends_at: new Date().toISOString(),
+  preview: '<div>YEET</div>',
+  status: 'Expired',
+  target_path: '*/welcome',
+  target_roles: 'Maintainer, Owner',
+  type: 'Banner',
+});
+
+export const generateMockMessages = (n) =>
+  [...Array(n).keys()].map((id) => generateMockMessage(id + 1));
+
+export const MOCK_MESSAGES = generateMockMessages(5).map((id) => generateMockMessage(id));
diff --git a/spec/frontend/admin/deploy_keys/components/table_spec.js b/spec/frontend/admin/deploy_keys/components/table_spec.js
index a18506c0916..4d4a2caedde 100644
--- a/spec/frontend/admin/deploy_keys/components/table_spec.js
+++ b/spec/frontend/admin/deploy_keys/components/table_spec.js
@@ -9,7 +9,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 
 jest.mock('~/api');
 jest.mock('~/flash');
@@ -243,7 +243,7 @@ describe('DeployKeysTable', () => {
     itRendersTheEmptyState();
 
     it('displays flash', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DeployKeysTable.i18n.apiErrorMessage,
         captureError: true,
         error,
diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js
index fe07f0fce00..a0aec347b6b 100644
--- a/spec/frontend/admin/users/components/users_table_spec.js
+++ b/spec/frontend/admin/users/components/users_table_spec.js
@@ -10,7 +10,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import AdminUserDate from '~/vue_shared/components/user_date.vue';
 
 import { users, paths, createGroupCountResponse } from '../mock_data';
@@ -135,7 +135,7 @@ describe('AdminUsersTable component', () => {
       });
 
       it('creates a flash message and captures the error', () => {
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'Could not load user group counts. Please refresh the page to try again.',
           captureError: true,
           error: expect.any(Error),
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 3e1438c37d6..7fb4f2d2463 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -1,4 +1,4 @@
-import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar } from '@gitlab/ui';
+import { GlTable, GlAlert, GlLoadingIcon, GlDropdown, GlIcon, GlAvatar, GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
@@ -31,6 +31,7 @@ describe('AlertManagementTable', () => {
   const findSearch = () => wrapper.findComponent(FilteredSearchBar);
   const findSeverityColumnHeader = () => wrapper.findByTestId('alert-management-severity-sort');
   const findFirstIDField = () => wrapper.findAllByTestId('idField').at(0);
+  const findFirstIDLink = () => wrapper.findAllByTestId('idField').at(0).findComponent(GlLink);
   const findAssignees = () => wrapper.findAllByTestId('assigneesField');
   const findSeverityFields = () => wrapper.findAllByTestId('severityField');
   const findIssueFields = () => wrapper.findAllByTestId('issueField');
@@ -135,10 +136,11 @@ describe('AlertManagementTable', () => {
       expect(findLoader().exists()).toBe(false);
       expect(findAlertsTable().exists()).toBe(true);
       expect(findAlerts()).toHaveLength(mockAlerts.length);
-      expect(findAlerts().at(0).classes()).toContain('gl-hover-bg-blue-50');
+      expect(findAlerts().at(0).classes()).toContain('gl-hover-bg-gray-50');
+      expect(findAlerts().at(0).classes()).not.toContain('gl-hover-border-blue-200');
     });
 
-    it('displays the alert ID and title formatted correctly', () => {
+    it('displays the alert ID and title as a link', () => {
       mountComponent({
         data: { alerts: { list: mockAlerts }, alertsCount, errored: false },
         loading: false,
@@ -146,6 +148,8 @@ describe('AlertManagementTable', () => {
 
       expect(findFirstIDField().exists()).toBe(true);
       expect(findFirstIDField().text()).toBe(`#${mockAlerts[0].iid} ${mockAlerts[0].title}`);
+      expect(findFirstIDLink().text()).toBe(`#${mockAlerts[0].iid} ${mockAlerts[0].title}`);
+      expect(findFirstIDLink().attributes('href')).toBe('/1527542/details');
     });
 
     it('displays status dropdown', () => {
@@ -266,7 +270,8 @@ describe('AlertManagementTable', () => {
             alerts: {
               list: [
                 {
-                  iid: 1,
+                  iid: '1',
+                  title: 'SyntaxError: Invalid or unexpected token',
                   status: 'acknowledged',
                   startedAt: '2020-03-17T23:18:14.996Z',
                   severity: 'high',
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
index fb9e97e7505..e0075aa71d9 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -304,12 +304,12 @@ describe('AlertsSettingsForm', () => {
     });
 
     describe.each`
-      payload               | resetPayloadAndMappingConfirmed | disabled
-      ${validSamplePayload} | ${true}                         | ${undefined}
-      ${emptySamplePayload} | ${true}                         | ${undefined}
-      ${validSamplePayload} | ${false}                        | ${'disabled'}
-      ${emptySamplePayload} | ${false}                        | ${undefined}
-    `('', ({ payload, resetPayloadAndMappingConfirmed, disabled }) => {
+      context                                      | payload               | resetPayloadAndMappingConfirmed | disabled
+      ${'valid payload, confirmed and enabled'}    | ${validSamplePayload} | ${true}                         | ${undefined}
+      ${'empty payload, confirmed and enabled'}    | ${emptySamplePayload} | ${true}                         | ${undefined}
+      ${'valid payload, unconfirmed and disabled'} | ${validSamplePayload} | ${false}                        | ${'disabled'}
+      ${'empty payload, unconfirmed and enabled'}  | ${emptySamplePayload} | ${false}                        | ${undefined}
+    `('given $context', ({ payload, resetPayloadAndMappingConfirmed, disabled }) => {
       const payloadResetMsg = resetPayloadAndMappingConfirmed
         ? 'was confirmed'
         : 'was not confirmed';
@@ -333,12 +333,12 @@ describe('AlertsSettingsForm', () => {
 
     describe('action buttons for sample payload', () => {
       describe.each`
-        resetPayloadAndMappingConfirmed | payloadExample        | caption
-        ${false}                        | ${validSamplePayload} | ${'Edit payload'}
-        ${true}                         | ${emptySamplePayload} | ${'Parse payload fields'}
-        ${true}                         | ${validSamplePayload} | ${'Parse payload fields'}
-        ${false}                        | ${emptySamplePayload} | ${'Parse payload fields'}
-      `('', ({ resetPayloadAndMappingConfirmed, payloadExample, caption }) => {
+        context                         | resetPayloadAndMappingConfirmed | payloadExample        | caption
+        ${'valid payload, unconfirmed'} | ${false}                        | ${validSamplePayload} | ${'Edit payload'}
+        ${'empty payload, confirmed'}   | ${true}                         | ${emptySamplePayload} | ${'Parse payload fields'}
+        ${'valid payload, confirmed'}   | ${true}                         | ${validSamplePayload} | ${'Parse payload fields'}
+        ${'empty payload, unconfirmed'} | ${false}                        | ${emptySamplePayload} | ${'Parse payload fields'}
+      `('given $context', ({ resetPayloadAndMappingConfirmed, payloadExample, caption }) => {
         const samplePayloadMsg = payloadExample ? 'was provided' : 'was not provided';
         const payloadResetMsg = resetPayloadAndMappingConfirmed
           ? 'was confirmed'
@@ -402,24 +402,27 @@ describe('AlertsSettingsForm', () => {
       ${true}             | ${true}           | ${2}              | ${false}
       ${true}             | ${false}          | ${1}              | ${false}
       ${false}            | ${true}           | ${1}              | ${false}
-    `('', ({ alertFieldsProvided, multiIntegrations, integrationOption, visible }) => {
-      const visibleMsg = visible ? 'rendered' : 'not rendered';
-      const alertFieldsMsg = alertFieldsProvided ? 'provided' : 'not provided';
-      const integrationType = integrationOption === 1 ? typeSet.http : typeSet.prometheus;
-      const multiIntegrationsEnabled = multiIntegrations ? 'enabled' : 'not enabled';
+    `(
+      'given alertFieldsProvided: $alertFieldsProvided, multiIntegrations: $multiIntegrations, integrationOption: $integrationOption, visible: $visible',
+      ({ alertFieldsProvided, multiIntegrations, integrationOption, visible }) => {
+        const visibleMsg = visible ? 'rendered' : 'not rendered';
+        const alertFieldsMsg = alertFieldsProvided ? 'provided' : 'not provided';
+        const integrationType = integrationOption === 1 ? typeSet.http : typeSet.prometheus;
+        const multiIntegrationsEnabled = multiIntegrations ? 'enabled' : 'not enabled';
+
+        it(`is ${visibleMsg} when multiIntegrations are ${multiIntegrationsEnabled}, integration type is ${integrationType} and alert fields are ${alertFieldsMsg}`, async () => {
+          createComponent({
+            multiIntegrations,
+            props: {
+              alertFields: alertFieldsProvided ? alertFields : [],
+            },
+          });
+          await selectOptionAtIndex(integrationOption);
 
-      it(`is ${visibleMsg} when multiIntegrations are ${multiIntegrationsEnabled}, integration type is ${integrationType} and alert fields are ${alertFieldsMsg}`, async () => {
-        createComponent({
-          multiIntegrations,
-          props: {
-            alertFields: alertFieldsProvided ? alertFields : [],
-          },
+          expect(findMappingBuilder().exists()).toBe(visible);
         });
-        await selectOptionAtIndex(integrationOption);
-
-        expect(findMappingBuilder().exists()).toBe(visible);
-      });
-    });
+      },
+    );
   });
 
   describe('Form validation', () => {
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 0266adeb6c7..fcefcb7cf66 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 createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import {
@@ -327,7 +327,7 @@ describe('AlertsSettingsWrapper', () => {
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({ message: ADD_INTEGRATION_ERROR });
+      expect(createAlert).toHaveBeenCalledWith({ message: ADD_INTEGRATION_ERROR });
     });
 
     it('shows an error alert when integration token reset fails', async () => {
@@ -336,7 +336,7 @@ describe('AlertsSettingsWrapper', () => {
       findAlertsSettingsForm().vm.$emit('reset-token', {});
 
       await waitForPromises();
-      expect(createFlash).toHaveBeenCalledWith({ message: RESET_INTEGRATION_TOKEN_ERROR });
+      expect(createAlert).toHaveBeenCalledWith({ message: RESET_INTEGRATION_TOKEN_ERROR });
     });
 
     it('shows an error alert when integration update fails', async () => {
@@ -345,7 +345,7 @@ describe('AlertsSettingsWrapper', () => {
       findAlertsSettingsForm().vm.$emit('update-integration', {});
 
       await waitForPromises();
-      expect(createFlash).toHaveBeenCalledWith({ message: UPDATE_INTEGRATION_ERROR });
+      expect(createAlert).toHaveBeenCalledWith({ message: UPDATE_INTEGRATION_ERROR });
     });
 
     describe('Test alert failure', () => {
@@ -360,17 +360,17 @@ describe('AlertsSettingsWrapper', () => {
       it('shows an error alert when integration test payload is invalid', async () => {
         mock.onPost(/(.*)/).replyOnce(httpStatusCodes.UNPROCESSABLE_ENTITY);
         await wrapper.vm.testAlertPayload({ endpoint: '', data: '', token: '' });
-        expect(createFlash).toHaveBeenCalledWith({ message: INTEGRATION_PAYLOAD_TEST_ERROR });
-        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({ message: INTEGRATION_PAYLOAD_TEST_ERROR });
+        expect(createAlert).toHaveBeenCalledTimes(1);
       });
 
       it('shows an error alert when integration is not activated', async () => {
         mock.onPost(/(.*)/).replyOnce(httpStatusCodes.FORBIDDEN);
         await wrapper.vm.testAlertPayload({ endpoint: '', data: '', token: '' });
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR,
         });
-        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -444,9 +444,9 @@ describe('AlertsSettingsWrapper', () => {
         jest.spyOn(alertsUpdateService, 'updateTestAlert').mockResolvedValueOnce({});
         findAlertsSettingsForm().vm.$emit('test-alert-payload', '');
         await waitForPromises();
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: i18n.alertSent,
-          type: FLASH_TYPES.SUCCESS,
+          variant: VARIANT_SUCCESS,
         });
       });
 
@@ -454,7 +454,7 @@ describe('AlertsSettingsWrapper', () => {
         jest.spyOn(alertsUpdateService, 'updateTestAlert').mockRejectedValueOnce({});
         findAlertsSettingsForm().vm.$emit('test-alert-payload', '');
         await waitForPromises();
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: INTEGRATION_PAYLOAD_TEST_ERROR,
         });
       });
@@ -486,7 +486,7 @@ describe('AlertsSettingsWrapper', () => {
       await destroyHttpIntegration(wrapper);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
 
     it('displays flash if mutation had a non-recoverable error', async () => {
@@ -497,7 +497,7 @@ describe('AlertsSettingsWrapper', () => {
       await destroyHttpIntegration(wrapper);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_INTEGRATION_ERROR,
       });
     });
diff --git a/spec/frontend/api/projects_api_spec.js b/spec/frontend/api/projects_api_spec.js
index 8f40b557e1f..8459021421f 100644
--- a/spec/frontend/api/projects_api_spec.js
+++ b/spec/frontend/api/projects_api_spec.js
@@ -1,5 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
+import getTransferLocationsResponse from 'test_fixtures/api/projects/transfer_locations_page_1.json';
 import * as projectsApi from '~/api/projects_api';
+import { DEFAULT_PER_PAGE } from '~/api';
 import axios from '~/lib/utils/axios_utils';
 
 describe('~/api/projects_api.js', () => {
@@ -59,4 +61,25 @@ describe('~/api/projects_api.js', () => {
       });
     });
   });
+
+  describe('getTransferLocations', () => {
+    beforeEach(() => {
+      jest.spyOn(axios, 'get');
+    });
+
+    it('retrieves transfer locations from the correct URL and returns them in the response data', async () => {
+      const params = { page: 1 };
+      const expectedUrl = '/api/v7/projects/1/transfer_locations';
+
+      mock.onGet(expectedUrl).replyOnce(200, { data: getTransferLocationsResponse });
+
+      await expect(projectsApi.getTransferLocations(projectId, params)).resolves.toMatchObject({
+        data: { data: getTransferLocationsResponse },
+      });
+
+      expect(axios.get).toHaveBeenCalledWith(expectedUrl, {
+        params: { ...params, per_page: DEFAULT_PER_PAGE },
+      });
+    });
+  });
 });
diff --git a/spec/frontend/awards_handler_spec.js b/spec/frontend/awards_handler_spec.js
index b14bc5122b9..1a54b9909ba 100644
--- a/spec/frontend/awards_handler_spec.js
+++ b/spec/frontend/awards_handler_spec.js
@@ -185,7 +185,9 @@ describe('AwardsHandler', () => {
 
   describe('::getAwardUrl', () => {
     it('returns the url for request', () => {
-      expect(awardsHandler.getAwardUrl()).toBe('http://test.host/-/snippets/1/toggle_award_emoji');
+      expect(awardsHandler.getAwardUrl()).toBe(
+        document.querySelector('.js-awards-block').dataset.awardUrl,
+      );
     });
   });
 
diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js
index 6d8a00eb50b..0a736df7075 100644
--- a/spec/frontend/badges/components/badge_form_spec.js
+++ b/spec/frontend/badges/components/badge_form_spec.js
@@ -1,195 +1,183 @@
 import MockAdapter from 'axios-mock-adapter';
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeForm from '~/badges/components/badge_form.vue';
 import createEmptyBadge from '~/badges/empty_badge';
-import store from '~/badges/store';
+
+import createState from '~/badges/store/state';
+import mutations from '~/badges/store/mutations';
+import actions from '~/badges/store/actions';
+
 import axios from '~/lib/utils/axios_utils';
 
-// avoid preview background process
-BadgeForm.methods.debouncedPreview = () => {};
+Vue.use(Vuex);
 
 describe('BadgeForm component', () => {
-  const Component = Vue.extend(BadgeForm);
   let axiosMock;
-  let vm;
+  let mockedActions;
+  let wrapper;
+
+  const createComponent = (propsData, customState = {}) => {
+    mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+
+    const store = new Vuex.Store({
+      state: {
+        ...createState(),
+        ...customState,
+      },
+      mutations,
+      actions: mockedActions,
+    });
 
-  beforeEach(() => {
-    setHTMLFixture(`
-      <div id="dummy-element"></div>
-    `);
+    wrapper = mount(BadgeForm, {
+      store,
+      propsData,
+      attachTo: document.body,
+    });
+  };
 
+  beforeEach(() => {
     axiosMock = new MockAdapter(axios);
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
     axiosMock.restore();
-    resetHTMLFixture();
   });
 
-  describe('methods', () => {
-    beforeEach(() => {
-      vm = mountComponentWithStore(Component, {
-        el: '#dummy-element',
-        store,
-        props: {
-          isEditing: false,
-        },
-      });
-    });
+  it('stops editing when cancel button is clicked', async () => {
+    createComponent({ isEditing: true });
 
-    describe('onCancel', () => {
-      it('calls stopEditing', () => {
-        jest.spyOn(vm, 'stopEditing').mockImplementation(() => {});
+    const cancelButton = wrapper.find('.row-content-block button');
 
-        vm.onCancel();
+    await cancelButton.trigger('click');
 
-        expect(vm.stopEditing).toHaveBeenCalled();
-      });
-    });
+    expect(mockedActions.stopEditing).toHaveBeenCalled();
   });
 
-  const sharedSubmitTests = (submitAction) => {
+  const sharedSubmitTests = (submitAction, props) => {
     const nameSelector = '#badge-name';
     const imageUrlSelector = '#badge-image-url';
-    const findImageUrlElement = () => vm.$el.querySelector(imageUrlSelector);
+    const findImageUrl = () => wrapper.find(imageUrlSelector);
     const linkUrlSelector = '#badge-link-url';
-    const findLinkUrlElement = () => vm.$el.querySelector(linkUrlSelector);
+    const findLinkUrl = () => wrapper.find(linkUrlSelector);
     const setValue = (inputElementSelector, value) => {
-      const inputElement = vm.$el.querySelector(inputElementSelector);
-      inputElement.value = value;
-      inputElement.dispatchEvent(new Event('input'));
+      const input = wrapper.find(inputElementSelector);
+      return input.setValue(value);
     };
     const submitForm = () => {
-      const submitButton = vm.$el.querySelector('button[type="submit"]');
-      submitButton.click();
+      const submitButton = wrapper.find('button[type="submit"]');
+      return submitButton.trigger('click');
     };
     const expectInvalidInput = (inputElementSelector) => {
-      const inputElement = vm.$el.querySelector(inputElementSelector);
+      const input = wrapper.find(inputElementSelector);
 
-      expect(inputElement.checkValidity()).toBe(false);
-      const feedbackElement = vm.$el.querySelector(`${inputElementSelector} + .invalid-feedback`);
+      expect(input.element.checkValidity()).toBe(false);
+      const feedbackElement = wrapper.find(`${inputElementSelector} + .invalid-feedback`);
 
-      expect(feedbackElement).toBeVisible();
+      expect(feedbackElement.isVisible()).toBe(true);
     };
 
-    beforeEach(async () => {
-      jest.spyOn(vm, submitAction).mockReturnValue(Promise.resolve());
-      store.replaceState({
-        ...store.state,
+    beforeEach(() => {
+      createComponent(props, {
         badgeInAddForm: createEmptyBadge(),
         badgeInEditForm: createEmptyBadge(),
         isSaving: false,
       });
 
-      await nextTick();
       setValue(nameSelector, 'TestBadge');
       setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
       setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
     });
 
-    it('returns immediately if imageUrl is empty', () => {
-      setValue(imageUrlSelector, '');
+    it('returns immediately if imageUrl is empty', async () => {
+      await setValue(imageUrlSelector, '');
 
-      submitForm();
+      await submitForm();
 
       expectInvalidInput(imageUrlSelector);
 
-      expect(vm[submitAction]).not.toHaveBeenCalled();
+      expect(mockedActions[submitAction]).not.toHaveBeenCalled();
     });
 
-    it('returns immediately if imageUrl is malformed', () => {
-      setValue(imageUrlSelector, 'not-a-url');
+    it('returns immediately if imageUrl is malformed', async () => {
+      await setValue(imageUrlSelector, 'not-a-url');
 
-      submitForm();
+      await submitForm();
 
       expectInvalidInput(imageUrlSelector);
 
-      expect(vm[submitAction]).not.toHaveBeenCalled();
+      expect(mockedActions[submitAction]).not.toHaveBeenCalled();
     });
 
-    it('returns immediately if linkUrl is empty', () => {
-      setValue(linkUrlSelector, '');
+    it('returns immediately if linkUrl is empty', async () => {
+      await setValue(linkUrlSelector, '');
 
-      submitForm();
+      await submitForm();
 
       expectInvalidInput(linkUrlSelector);
 
-      expect(vm[submitAction]).not.toHaveBeenCalled();
+      expect(mockedActions[submitAction]).not.toHaveBeenCalled();
     });
 
-    it('returns immediately if linkUrl is malformed', () => {
-      setValue(linkUrlSelector, 'not-a-url');
+    it('returns immediately if linkUrl is malformed', async () => {
+      await setValue(linkUrlSelector, 'not-a-url');
 
-      submitForm();
+      await submitForm();
 
       expectInvalidInput(linkUrlSelector);
 
-      expect(vm[submitAction]).not.toHaveBeenCalled();
+      expect(mockedActions[submitAction]).not.toHaveBeenCalled();
     });
 
-    it(`calls ${submitAction}`, () => {
-      submitForm();
+    it(`calls ${submitAction}`, async () => {
+      await submitForm();
 
-      expect(findImageUrlElement().checkValidity()).toBe(true);
-      expect(findLinkUrlElement().checkValidity()).toBe(true);
-      expect(vm[submitAction]).toHaveBeenCalled();
+      expect(findImageUrl().element.checkValidity()).toBe(true);
+      expect(findLinkUrl().element.checkValidity()).toBe(true);
+      expect(mockedActions[submitAction]).toHaveBeenCalled();
     });
   };
 
   describe('if isEditing is false', () => {
-    beforeEach(() => {
-      vm = mountComponentWithStore(Component, {
-        el: '#dummy-element',
-        store,
-        props: {
-          isEditing: false,
-        },
-      });
-    });
+    const props = { isEditing: false };
 
     it('renders one button', () => {
-      expect(vm.$el.querySelector('.row-content-block')).toBeNull();
-      const buttons = vm.$el.querySelectorAll('.form-group:last-of-type button');
+      createComponent(props);
+
+      expect(wrapper.find('.row-content-block').exists()).toBe(false);
+      const buttons = wrapper.findAll('.form-group:last-of-type button');
 
-      expect(buttons.length).toBe(1);
-      const buttonAddElement = buttons[0];
+      expect(buttons).toHaveLength(1);
+      const buttonAddWrapper = buttons.at(0);
 
-      expect(buttonAddElement).toBeVisible();
-      expect(buttonAddElement).toHaveText('Add badge');
+      expect(buttonAddWrapper.isVisible()).toBe(true);
+      expect(buttonAddWrapper.text()).toBe('Add badge');
     });
 
-    sharedSubmitTests('addBadge');
+    sharedSubmitTests('addBadge', props);
   });
 
   describe('if isEditing is true', () => {
-    beforeEach(() => {
-      vm = mountComponentWithStore(Component, {
-        el: '#dummy-element',
-        store,
-        props: {
-          isEditing: true,
-        },
-      });
-    });
+    const props = { isEditing: true };
 
     it('renders two buttons', () => {
-      const buttons = vm.$el.querySelectorAll('.row-content-block button');
+      createComponent(props);
+      const buttons = wrapper.findAll('.row-content-block button');
 
-      expect(buttons.length).toBe(2);
-      const buttonSaveElement = buttons[1];
+      expect(buttons).toHaveLength(2);
 
-      expect(buttonSaveElement).toBeVisible();
-      expect(buttonSaveElement).toHaveText('Save changes');
-      const buttonCancelElement = buttons[0];
+      const saveButton = buttons.at(1);
+      expect(saveButton.isVisible()).toBe(true);
+      expect(saveButton.text()).toBe('Save changes');
 
-      expect(buttonCancelElement).toBeVisible();
-      expect(buttonCancelElement).toHaveText('Cancel');
+      const cancelButton = buttons.at(0);
+      expect(cancelButton.isVisible()).toBe(true);
+      expect(cancelButton.text()).toBe('Cancel');
     });
 
-    sharedSubmitTests('saveBadge');
+    sharedSubmitTests('saveBadge', props);
   });
 });
diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js
index ad8426f3168..ee7ccac974a 100644
--- a/spec/frontend/badges/components/badge_list_row_spec.js
+++ b/spec/frontend/badges/components/badge_list_row_spec.js
@@ -1,103 +1,118 @@
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
+
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeListRow from '~/badges/components/badge_list_row.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-import store from '~/badges/store';
+
+import createState from '~/badges/store/state';
+import mutations from '~/badges/store/mutations';
+import actions from '~/badges/store/actions';
+
 import { createDummyBadge } from '../dummy_badge';
 
+Vue.use(Vuex);
+
 describe('BadgeListRow component', () => {
-  const Component = Vue.extend(BadgeListRow);
   let badge;
-  let vm;
-
-  beforeEach(() => {
-    setHTMLFixture(`
-      <div id="delete-badge-modal" class="modal"></div>
-      <div id="dummy-element"></div>
-    `);
-    store.replaceState({
-      ...store.state,
-      kind: PROJECT_BADGE,
+  let wrapper;
+  let mockedActions;
+
+  const createComponent = (kind) => {
+    setHTMLFixture(`<div id="delete-badge-modal" class="modal"></div>`);
+
+    mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+
+    const store = new Vuex.Store({
+      state: {
+        ...createState(),
+        kind: PROJECT_BADGE,
+      },
+      mutations,
+      actions: mockedActions,
     });
+
     badge = createDummyBadge();
-    vm = mountComponentWithStore(Component, {
-      el: '#dummy-element',
+    badge.kind = kind;
+    wrapper = mount(BadgeListRow, {
+      attachTo: document.body,
       store,
-      props: { badge },
+      propsData: { badge },
     });
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
     resetHTMLFixture();
   });
 
-  it('renders the badge', () => {
-    const badgeElement = vm.$el.querySelector('.project-badge');
+  describe('for a project badge', () => {
+    beforeEach(() => {
+      createComponent(PROJECT_BADGE);
+    });
 
-    expect(badgeElement).not.toBeNull();
-    expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl);
-  });
+    it('renders the badge', () => {
+      const badgeImage = wrapper.find('.project-badge');
 
-  it('renders the badge name', () => {
-    expect(vm.$el.innerText).toMatch(badge.name);
-  });
+      expect(badgeImage.exists()).toBe(true);
+      expect(badgeImage.attributes('src')).toBe(badge.renderedImageUrl);
+    });
 
-  it('renders the badge link', () => {
-    expect(vm.$el.innerText).toMatch(badge.linkUrl);
-  });
+    it('renders the badge name', () => {
+      expect(wrapper.text()).toMatch(badge.name);
+    });
 
-  it('renders the badge kind', () => {
-    expect(vm.$el.innerText).toMatch('Project Badge');
-  });
+    it('renders the badge link', () => {
+      expect(wrapper.text()).toMatch(badge.linkUrl);
+    });
 
-  it('shows edit and delete buttons', () => {
-    const buttons = vm.$el.querySelectorAll('.table-button-footer button');
+    it('renders the badge kind', () => {
+      expect(wrapper.text()).toMatch('Project Badge');
+    });
 
-    expect(buttons).toHaveLength(2);
-    const buttonEditElement = buttons[0];
+    it('shows edit and delete buttons', () => {
+      const buttons = wrapper.findAll('.table-button-footer button');
 
-    expect(buttonEditElement).toBeVisible();
-    expect(buttonEditElement).toHaveSpriteIcon('pencil');
-    const buttonDeleteElement = buttons[1];
+      expect(buttons).toHaveLength(2);
+      const editButton = buttons.at(0);
 
-    expect(buttonDeleteElement).toBeVisible();
-    expect(buttonDeleteElement).toHaveSpriteIcon('remove');
-  });
+      expect(editButton.isVisible()).toBe(true);
+      expect(editButton.element).toHaveSpriteIcon('pencil');
 
-  it('calls editBadge when clicking then edit button', () => {
-    jest.spyOn(vm, 'editBadge').mockImplementation(() => {});
+      const deleteButton = buttons.at(1);
+      expect(deleteButton.isVisible()).toBe(true);
+      expect(deleteButton.element).toHaveSpriteIcon('remove');
+    });
 
-    const editButton = vm.$el.querySelector('.table-button-footer button:first-of-type');
-    editButton.click();
+    it('calls editBadge when clicking then edit button', async () => {
+      const editButton = wrapper.find('.table-button-footer button:first-of-type');
 
-    expect(vm.editBadge).toHaveBeenCalled();
-  });
+      await editButton.trigger('click');
+
+      expect(mockedActions.editBadge).toHaveBeenCalled();
+    });
 
-  it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
-    jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
+    it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
+      const deleteButton = wrapper.find('.table-button-footer button:last-of-type');
 
-    const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
-    deleteButton.click();
+      await deleteButton.trigger('click');
 
-    await nextTick();
-    expect(vm.updateBadgeInModal).toHaveBeenCalled();
+      expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
+    });
   });
 
   describe('for a group badge', () => {
-    beforeEach(async () => {
-      badge.kind = GROUP_BADGE;
-
-      await nextTick();
+    beforeEach(() => {
+      createComponent(GROUP_BADGE);
     });
 
     it('renders the badge kind', () => {
-      expect(vm.$el.innerText).toMatch('Group Badge');
+      expect(wrapper.text()).toMatch('Group Badge');
     });
 
     it('hides edit and delete buttons', () => {
-      const buttons = vm.$el.querySelectorAll('.table-button-footer button');
+      const buttons = wrapper.findAll('.table-button-footer button');
 
       expect(buttons).toHaveLength(0);
     });
diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 32cd9483ef8..606b1bc9cce 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -1,83 +1,96 @@
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
+
 import BadgeList from '~/badges/components/badge_list.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-import store from '~/badges/store';
+
+import createState from '~/badges/store/state';
+import mutations from '~/badges/store/mutations';
+import actions from '~/badges/store/actions';
+
 import { createDummyBadge } from '../dummy_badge';
 
-describe('BadgeList component', () => {
-  const Component = Vue.extend(BadgeList);
-  const numberOfDummyBadges = 3;
-  let vm;
-
-  beforeEach(() => {
-    setHTMLFixture('<div id="dummy-element"></div>');
-    const badges = [];
-    for (let id = 0; id < numberOfDummyBadges; id += 1) {
-      badges.push({ id, ...createDummyBadge() });
-    }
-    store.replaceState({
-      ...store.state,
-      badges,
-      kind: PROJECT_BADGE,
-      isLoading: false,
-    });
+Vue.use(Vuex);
 
-    // Can be removed once GlLoadingIcon no longer throws a warning
-    jest.spyOn(global.console, 'warn').mockImplementation(() => jest.fn());
+const numberOfDummyBadges = 3;
+const badges = Array.from({ length: numberOfDummyBadges }).map((_, idx) => ({
+  ...createDummyBadge(),
+  id: idx,
+}));
 
-    vm = mountComponentWithStore(Component, {
-      el: '#dummy-element',
-      store,
+describe('BadgeList component', () => {
+  let wrapper;
+
+  const createComponent = (customState) => {
+    const mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+
+    const store = new Vuex.Store({
+      state: {
+        ...createState(),
+        isLoading: false,
+        ...customState,
+      },
+      mutations,
+      actions: mockedActions,
     });
-  });
+
+    wrapper = mount(BadgeList, { store });
+  };
 
   afterEach(() => {
-    vm.$destroy();
-    resetHTMLFixture();
+    wrapper.destroy();
   });
 
-  it('renders a header with the badge count', () => {
-    const header = vm.$el.querySelector('.card-header');
+  describe('for project badges', () => {
+    it('renders a header with the badge count', () => {
+      createComponent({
+        kind: PROJECT_BADGE,
+        badges,
+      });
 
-    expect(header).toHaveText(new RegExp(`Your badges\\s+${numberOfDummyBadges}`));
-  });
+      const header = wrapper.find('.card-header');
 
-  it('renders a row for each badge', () => {
-    const rows = vm.$el.querySelectorAll('.gl-responsive-table-row');
+      expect(header.text()).toMatchInterpolatedText('Your badges 3');
+    });
 
-    expect(rows).toHaveLength(numberOfDummyBadges);
-  });
+    it('renders a row for each badge', () => {
+      createComponent({
+        kind: PROJECT_BADGE,
+        badges,
+      });
 
-  it('renders a message if no badges exist', async () => {
-    store.state.badges = [];
+      const rows = wrapper.findAll('.gl-responsive-table-row');
 
-    await nextTick();
-    expect(vm.$el.innerText).toMatch('This project has no badges');
-  });
+      expect(rows).toHaveLength(numberOfDummyBadges);
+    });
 
-  it('shows a loading icon when loading', async () => {
-    store.state.isLoading = true;
+    it('renders a message if no badges exist', () => {
+      createComponent({
+        kind: PROJECT_BADGE,
+        badges: [],
+      });
 
-    await nextTick();
-    const loadingIcon = vm.$el.querySelector('.gl-spinner');
+      expect(wrapper.text()).toMatch('This project has no badges');
+    });
 
-    expect(loadingIcon).toBeVisible();
-  });
+    it('shows a loading icon when loading', () => {
+      createComponent({ isLoading: true });
 
-  describe('for group badges', () => {
-    beforeEach(async () => {
-      store.state.kind = GROUP_BADGE;
+      const loadingIcon = wrapper.find('.gl-spinner');
 
-      await nextTick();
+      expect(loadingIcon.isVisible()).toBe(true);
     });
+  });
 
-    it('renders a message if no badges exist', async () => {
-      store.state.badges = [];
+  describe('for group badges', () => {
+    it('renders a message if no badges exist', () => {
+      createComponent({
+        kind: GROUP_BADGE,
+        badges: [],
+      });
 
-      await nextTick();
-      expect(vm.$el.innerText).toMatch('This group has no badges');
+      expect(wrapper.text()).toMatch('This group has no badges');
     });
   });
 });
diff --git a/spec/frontend/badges/components/badge_spec.js b/spec/frontend/badges/components/badge_spec.js
index 19b3a9f23a6..b468e38f19e 100644
--- a/spec/frontend/badges/components/badge_spec.js
+++ b/spec/frontend/badges/components/badge_spec.js
@@ -1,138 +1,78 @@
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 import Badge from '~/badges/components/badge.vue';
 
 describe('Badge component', () => {
-  const Component = Vue.extend(Badge);
   const dummyProps = {
     imageUrl: DUMMY_IMAGE_URL,
     linkUrl: `${TEST_HOST}/badge/link/url`,
   };
-  let vm;
+  let wrapper;
 
   const findElements = () => {
-    const buttons = vm.$el.querySelectorAll('button');
+    const buttons = wrapper.findAll('button');
     return {
-      badgeImage: vm.$el.querySelector('img.project-badge'),
-      loadingIcon: vm.$el.querySelector('.gl-spinner'),
-      reloadButton: buttons[buttons.length - 1],
+      badgeImage: wrapper.find('img.project-badge'),
+      loadingIcon: wrapper.find('.gl-spinner'),
+      reloadButton: buttons.at(buttons.length - 1),
     };
   };
 
-  const createComponent = (props, el = null) => {
-    vm = mountComponent(Component, props, el);
-    const { badgeImage } = findElements();
-    return new Promise((resolve) => {
-      badgeImage.addEventListener('load', resolve);
-      // Manually dispatch load event as it is not triggered
-      badgeImage.dispatchEvent(new Event('load'));
-    }).then(() => nextTick());
+  const createComponent = (propsData) => {
+    wrapper = mount(Badge, { propsData });
   };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('watchers', () => {
-    describe('imageUrl', () => {
-      it('sets isLoading and resets numRetries and hasError', async () => {
-        const props = { ...dummyProps };
-        await createComponent(props);
-        expect(vm.isLoading).toBe(false);
-        vm.hasError = true;
-        vm.numRetries = 42;
-
-        vm.imageUrl = `${props.imageUrl}#something/else`;
-        await nextTick();
-        expect(vm.isLoading).toBe(true);
-        expect(vm.numRetries).toBe(0);
-        expect(vm.hasError).toBe(false);
-      });
-    });
+  beforeEach(() => {
+    return createComponent({ ...dummyProps }, '#dummy-element');
   });
 
-  describe('methods', () => {
-    beforeEach(async () => {
-      await createComponent({ ...dummyProps });
-    });
+  it('shows a badge image after loading', async () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('load'));
 
-    it('onError resets isLoading and sets hasError', () => {
-      vm.hasError = false;
-      vm.isLoading = true;
+    await nextTick();
 
-      vm.onError();
+    expect(badgeImage.isVisible()).toBe(true);
+    expect(loadingIcon.isVisible()).toBe(false);
+    expect(reloadButton.isVisible()).toBe(false);
+    expect(wrapper.find('.btn-group').isVisible()).toBe(false);
+  });
 
-      expect(vm.hasError).toBe(true);
-      expect(vm.isLoading).toBe(false);
-    });
+  it('shows a loading icon when loading', () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-    it('onLoad sets isLoading', () => {
-      vm.isLoading = true;
+    expect(badgeImage.isVisible()).toBe(false);
+    expect(loadingIcon.isVisible()).toBe(true);
+    expect(reloadButton.isVisible()).toBe(false);
+    expect(wrapper.find('.btn-group').isVisible()).toBe(false);
+  });
 
-      vm.onLoad();
+  it('shows an error and reload button if loading failed', async () => {
+    const { badgeImage, loadingIcon, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('error'));
 
-      expect(vm.isLoading).toBe(false);
-    });
+    await nextTick();
 
-    it('reloadImage resets isLoading and hasError and increases numRetries', () => {
-      vm.hasError = true;
-      vm.isLoading = false;
-      vm.numRetries = 0;
+    expect(badgeImage.isVisible()).toBe(false);
+    expect(loadingIcon.isVisible()).toBe(false);
+    expect(reloadButton.isVisible()).toBe(true);
+    expect(reloadButton.element).toHaveSpriteIcon('retry');
+    expect(wrapper.text()).toBe('No badge image');
+  });
 
-      vm.reloadImage();
+  it('retries an image when loading failed and reload button is clicked', async () => {
+    const { badgeImage, reloadButton } = findElements();
+    badgeImage.element.dispatchEvent(new Event('error'));
+    await nextTick();
 
-      expect(vm.hasError).toBe(false);
-      expect(vm.isLoading).toBe(true);
-      expect(vm.numRetries).toBe(1);
-    });
-  });
+    await reloadButton.trigger('click');
 
-  describe('behavior', () => {
-    beforeEach(() => {
-      setHTMLFixture('<div id="dummy-element"></div>');
-      return createComponent({ ...dummyProps }, '#dummy-element');
-    });
-
-    afterEach(() => {
-      resetHTMLFixture();
-    });
-
-    it('shows a badge image after loading', () => {
-      expect(vm.isLoading).toBe(false);
-      expect(vm.hasError).toBe(false);
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeVisible();
-      expect(loadingIcon).toBeHidden();
-      expect(reloadButton).toBeHidden();
-      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-    });
-
-    it('shows a loading icon when loading', async () => {
-      vm.isLoading = true;
-
-      await nextTick();
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeHidden();
-      expect(loadingIcon).toBeVisible();
-      expect(reloadButton).toBeHidden();
-      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-    });
-
-    it('shows an error and reload button if loading failed', async () => {
-      vm.hasError = true;
-
-      await nextTick();
-      const { badgeImage, loadingIcon, reloadButton } = findElements();
-
-      expect(badgeImage).toBeHidden();
-      expect(loadingIcon).toBeHidden();
-      expect(reloadButton).toBeVisible();
-      expect(reloadButton).toHaveSpriteIcon('retry');
-      expect(vm.$el.innerText.trim()).toBe('No badge image');
-    });
+    expect(badgeImage.attributes('src')).toBe(`${dummyProps.imageUrl}#retries=1`);
   });
 });
diff --git a/spec/frontend/batch_comments/components/drafts_count_spec.js b/spec/frontend/batch_comments/components/drafts_count_spec.js
index 390ef21929c..c3a7946c85c 100644
--- a/spec/frontend/batch_comments/components/drafts_count_spec.js
+++ b/spec/frontend/batch_comments/components/drafts_count_spec.js
@@ -1,40 +1,36 @@
-import Vue, { nextTick } from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import DraftsCount from '~/batch_comments/components/drafts_count.vue';
 import { createStore } from '~/batch_comments/stores';
 
 describe('Batch comments drafts count component', () => {
-  let vm;
-  let Component;
-
-  beforeAll(() => {
-    Component = Vue.extend(DraftsCount);
-  });
+  let store;
+  let wrapper;
 
   beforeEach(() => {
-    const store = createStore();
+    store = createStore();
 
     store.state.batchComments.drafts.push('comment');
 
-    vm = mountComponentWithStore(Component, { store });
+    wrapper = mount(DraftsCount, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders count', () => {
-    expect(vm.$el.textContent).toContain('1');
+    expect(wrapper.text()).toContain('1');
   });
 
   it('renders screen reader text', async () => {
-    const el = vm.$el.querySelector('.sr-only');
+    const el = wrapper.find('.sr-only');
 
-    expect(el.textContent).toContain('draft');
-
-    vm.$store.state.batchComments.drafts.push('comment 2');
+    expect(el.text()).toContain('draft');
 
+    store.state.batchComments.drafts.push('comment 2');
     await nextTick();
-    expect(el.textContent).toContain('drafts');
+
+    expect(el.text()).toContain('drafts');
   });
 });
diff --git a/spec/frontend/batch_comments/components/preview_item_spec.js b/spec/frontend/batch_comments/components/preview_item_spec.js
index 91e6b84a216..6a104f0c787 100644
--- a/spec/frontend/batch_comments/components/preview_item_spec.js
+++ b/spec/frontend/batch_comments/components/preview_item_spec.js
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import PreviewItem from '~/batch_comments/components/preview_item.vue';
 import { createStore } from '~/batch_comments/stores';
 import diffsModule from '~/diffs/store/modules';
@@ -8,8 +7,7 @@ import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 
 describe('Batch comments draft preview item component', () => {
-  let vm;
-  let Component;
+  let wrapper;
   let draft;
 
   function createComponent(isLast = false, extra = {}, extendStore = () => {}) {
@@ -24,21 +22,17 @@ describe('Batch comments draft preview item component', () => {
       ...extra,
     };
 
-    vm = mountComponentWithStore(Component, { store, props: { draft, isLast } });
+    wrapper = mount(PreviewItem, { store, propsData: { draft, isLast } });
   }
 
-  beforeAll(() => {
-    Component = Vue.extend(PreviewItem);
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders text content', () => {
     createComponent(false, { note_html: '<img src="" /><p>Hello world</p>' });
 
-    expect(vm.$el.querySelector('.review-preview-item-content').innerHTML).toEqual(
+    expect(wrapper.find('.review-preview-item-content').element.innerHTML).toBe(
       '<p>Hello world</p>',
     );
   });
@@ -47,9 +41,7 @@ describe('Batch comments draft preview item component', () => {
     it('renders file path', () => {
       createComponent(false, { file_path: 'index.js', file_hash: 'abc', position: {} });
 
-      expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain(
-        'index.js',
-      );
+      expect(wrapper.find('.review-preview-item-header-text').text()).toContain('index.js');
     });
 
     it('renders new line position', () => {
@@ -66,7 +58,7 @@ describe('Batch comments draft preview item component', () => {
         },
       });
 
-      expect(vm.$el.querySelector('.bold').textContent).toContain(':+1');
+      expect(wrapper.find('.bold').text()).toContain(':+1');
     });
 
     it('renders old line position', () => {
@@ -82,7 +74,7 @@ describe('Batch comments draft preview item component', () => {
         },
       });
 
-      expect(vm.$el.querySelector('.bold').textContent).toContain(':2');
+      expect(wrapper.find('.bold').text()).toContain(':2');
     });
 
     it('renders image position', () => {
@@ -92,7 +84,7 @@ describe('Batch comments draft preview item component', () => {
         position: { position_type: 'image', x: 10, y: 20 },
       });
 
-      expect(vm.$el.querySelector('.bold').textContent).toContain('10x 20y');
+      expect(wrapper.find('.bold').text()).toContain('10x 20y');
     });
   });
 
@@ -113,15 +105,13 @@ describe('Batch comments draft preview item component', () => {
     });
 
     it('renders title', () => {
-      expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain(
+      expect(wrapper.find('.review-preview-item-header-text').text()).toContain(
         "Author 'Nick' Name's thread",
       );
     });
 
     it('renders thread resolved text', () => {
-      expect(vm.$el.querySelector('.draft-note-resolution').textContent).toContain(
-        'Thread will be resolved',
-      );
+      expect(wrapper.find('.draft-note-resolution').text()).toContain('Thread will be resolved');
     });
   });
 
@@ -131,9 +121,7 @@ describe('Batch comments draft preview item component', () => {
         store.state.notes.discussions.push({});
       });
 
-      expect(vm.$el.querySelector('.review-preview-item-header-text').textContent).toContain(
-        'Your new comment',
-      );
+      expect(wrapper.find('.review-preview-item-header-text').text()).toContain('Your new comment');
     });
   });
 });
diff --git a/spec/frontend/batch_comments/components/publish_button_spec.js b/spec/frontend/batch_comments/components/publish_button_spec.js
index 9a782ec09b6..5e3fa3e9446 100644
--- a/spec/frontend/batch_comments/components/publish_button_spec.js
+++ b/spec/frontend/batch_comments/components/publish_button_spec.js
@@ -1,38 +1,34 @@
-import Vue, { nextTick } from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import PublishButton from '~/batch_comments/components/publish_button.vue';
 import { createStore } from '~/batch_comments/stores';
 
 describe('Batch comments publish button component', () => {
-  let vm;
-  let Component;
-
-  beforeAll(() => {
-    Component = Vue.extend(PublishButton);
-  });
+  let wrapper;
+  let store;
 
   beforeEach(() => {
-    const store = createStore();
+    store = createStore();
 
-    vm = mountComponentWithStore(Component, { store, props: { shouldPublish: true } });
+    wrapper = mount(PublishButton, { store, propsData: { shouldPublish: true } });
 
-    jest.spyOn(vm.$store, 'dispatch').mockImplementation();
+    jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('dispatches publishReview on click', () => {
-    vm.$el.click();
+  it('dispatches publishReview on click', async () => {
+    await wrapper.trigger('click');
 
-    expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/publishReview', undefined);
+    expect(store.dispatch).toHaveBeenCalledWith('batchComments/publishReview', undefined);
   });
 
   it('sets loading when isPublishing is true', async () => {
-    vm.$store.state.batchComments.isPublishing = true;
+    store.state.batchComments.isPublishing = true;
 
     await nextTick();
-    expect(vm.$el.getAttribute('disabled')).toBe('disabled');
+    expect(wrapper.attributes('disabled')).toBe('disabled');
   });
 });
diff --git a/spec/frontend/behaviors/bind_in_out_spec.js b/spec/frontend/behaviors/bind_in_out_spec.js
index 4d958e30b4d..7b40b1d3cd7 100644
--- a/spec/frontend/behaviors/bind_in_out_spec.js
+++ b/spec/frontend/behaviors/bind_in_out_spec.js
@@ -1,4 +1,3 @@
-import ClassSpecHelper from 'helpers/class_spec_helper';
 import BindInOut from '~/behaviors/bind_in_out';
 
 describe('BindInOut', () => {
@@ -142,7 +141,9 @@ describe('BindInOut', () => {
       testContext.initAll = BindInOut.initAll();
     });
 
-    ClassSpecHelper.itShouldBeAStaticMethod(BindInOut, 'initAll');
+    it('should be a static method', () => {
+      expect(BindInOut.initAll).toEqual(expect.any(Function));
+    });
 
     it('should call .querySelectorAll', () => {
       expect(document.querySelectorAll).toHaveBeenCalledWith('*[data-bind-in]');
@@ -169,7 +170,9 @@ describe('BindInOut', () => {
       testContext.init = BindInOut.init({}, {});
     });
 
-    ClassSpecHelper.itShouldBeAStaticMethod(BindInOut, 'init');
+    it('should be a static method', () => {
+      expect(BindInOut.init).toEqual(expect.any(Function));
+    });
 
     it('should call .addEvents', () => {
       expect(BindInOut.prototype.addEvents).toHaveBeenCalled();
diff --git a/spec/frontend/blame/blame_redirect_spec.js b/spec/frontend/blame/blame_redirect_spec.js
new file mode 100644
index 00000000000..beb10139b3a
--- /dev/null
+++ b/spec/frontend/blame/blame_redirect_spec.js
@@ -0,0 +1,70 @@
+import redirectToCorrectPage from '~/blame/blame_redirect';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import { createAlert } from '~/flash';
+
+jest.mock('~/flash');
+
+describe('Blame page redirect', () => {
+  beforeEach(() => {
+    global.window = Object.create(window);
+    const url = 'https://gitlab.com/flightjs/Flight/-/blame/master/file.json';
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: {
+        href: url,
+        hash: '',
+        search: '',
+      },
+    });
+
+    setHTMLFixture(`<div class="js-per-page" data-per-page="1000"></div>`);
+  });
+
+  afterEach(() => {
+    createAlert.mockClear();
+    resetHTMLFixture();
+  });
+
+  it('performs redirect to further pages when needed', () => {
+    window.location.hash = '#L1001';
+    redirectToCorrectPage();
+    expect(window.location.href).toMatch('?page=2');
+  });
+
+  it('performs redirect back to first page when needed', () => {
+    window.location.href = 'https://gitlab.com/flightjs/Flight/-/blame/master/file.json';
+    window.location.search = '?page=200';
+    window.location.hash = '#L999';
+    redirectToCorrectPage();
+    expect(window.location.href).toMatch('?page=1');
+  });
+
+  it('doesn`t perform redirect when the line is still on page 1', () => {
+    window.location.hash = '#L1000';
+    redirectToCorrectPage();
+    expect(window.location.href).not.toMatch('?page');
+  });
+
+  it('doesn`t perform redirect when "no_pagination" param is present', () => {
+    window.location.href = 'https://gitlab.com/flightjs/Flight/-/blame/master/file.json';
+    window.location.search = '?no_pagination=true';
+    window.location.hash = '#L1001';
+    redirectToCorrectPage();
+    expect(window.location.href).not.toMatch('?page');
+  });
+
+  it('doesn`t perform redirect when perPage is not present', () => {
+    setHTMLFixture(`<div class="js-per-page"></div>`);
+    window.location.hash = '#L1001';
+    redirectToCorrectPage();
+    expect(window.location.href).not.toMatch('?page');
+  });
+
+  it('shows alert with a message', () => {
+    window.location.hash = '#L1001';
+    redirectToCorrectPage();
+    expect(createAlert).toHaveBeenCalledWith({
+      message: 'Please wait a few moments while we load the file history for this line.',
+    });
+  });
+});
diff --git a/spec/frontend/blob/3d_viewer/mesh_object_spec.js b/spec/frontend/blob/3d_viewer/mesh_object_spec.js
index 3014af073f5..1b0fd362778 100644
--- a/spec/frontend/blob/3d_viewer/mesh_object_spec.js
+++ b/spec/frontend/blob/3d_viewer/mesh_object_spec.js
@@ -1,4 +1,4 @@
-import { BoxGeometry } from 'three/build/three.module';
+import { BoxGeometry } from 'three';
 import MeshObject from '~/blob/3d_viewer/mesh_object';
 
 describe('Mesh object', () => {
diff --git a/spec/frontend/blob/blob_blame_link_spec.js b/spec/frontend/blob/blob_blame_link_spec.js
index 0d19177a11f..060e8803520 100644
--- a/spec/frontend/blob/blob_blame_link_spec.js
+++ b/spec/frontend/blob/blob_blame_link_spec.js
@@ -29,19 +29,19 @@ describe('Blob links', () => {
   it('adds wrapper elements with correct classes', () => {
     const wrapper = document.querySelector('.line-links');
 
-    expect(wrapper).toBeTruthy();
+    expect(wrapper).not.toBeNull();
     expect(wrapper.classList).toContain('diff-line-num');
   });
 
   it('adds blame link with correct classes and path', () => {
     const blameLink = document.querySelector('.file-line-blame');
-    expect(blameLink).toBeTruthy();
+    expect(blameLink).not.toBeNull();
     expect(blameLink.getAttribute('href')).toBe('/blamePath#L5');
   });
 
   it('adds line link within wraper with correct classes and path', () => {
     const lineLink = document.querySelector('.file-line-num');
-    expect(lineLink).toBeTruthy();
+    expect(lineLink).not.toBeNull();
     expect(lineLink.getAttribute('href')).toBe('#L5');
   });
 });
diff --git a/spec/frontend/blob/components/blob_content_spec.js b/spec/frontend/blob/components/blob_content_spec.js
index 788ee0a86ab..f7b819b6e94 100644
--- a/spec/frontend/blob/components/blob_content_spec.js
+++ b/spec/frontend/blob/components/blob_content_spec.js
@@ -91,13 +91,13 @@ describe('Blob Content component', () => {
       it(`properly proxies ${BLOB_RENDER_EVENT_LOAD} event`, () => {
         expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeUndefined();
         findErrorEl().vm.$emit(BLOB_RENDER_EVENT_LOAD);
-        expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toBeTruthy();
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_LOAD)).toHaveLength(1);
       });
 
       it(`properly proxies ${BLOB_RENDER_EVENT_SHOW_SOURCE} event`, () => {
         expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeUndefined();
         findErrorEl().vm.$emit(BLOB_RENDER_EVENT_SHOW_SOURCE);
-        expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toBeTruthy();
+        expect(wrapper.emitted(BLOB_RENDER_EVENT_SHOW_SOURCE)).toHaveLength(1);
       });
     });
   });
diff --git a/spec/frontend/blob/components/table_contents_spec.js b/spec/frontend/blob/components/table_contents_spec.js
index 2cbac809a0d..5fe328b65ff 100644
--- a/spec/frontend/blob/components/table_contents_spec.js
+++ b/spec/frontend/blob/components/table_contents_spec.js
@@ -71,6 +71,11 @@ describe('Markdown table of contents component', () => {
 
       expect(dropdownItems.exists()).toBe(true);
       expect(dropdownItems.length).toBe(4);
+
+      // make sure that this only happens once
+      await setLoaded(true);
+
+      expect(wrapper.findAllComponents(GlDropdownItem).length).toBe(4);
     });
 
     it('sets padding for dropdown items', async () => {
diff --git a/spec/frontend/boards/board_card_inner_spec.js b/spec/frontend/boards/board_card_inner_spec.js
index 2c3ec69f9ae..3ebc51c4bcb 100644
--- a/spec/frontend/boards/board_card_inner_spec.js
+++ b/spec/frontend/boards/board_card_inner_spec.js
@@ -5,7 +5,7 @@ import { nextTick } from 'vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue';
+import IssuableBlockedIcon from '~/vue_shared/components/issuable_blocked_icon/issuable_blocked_icon.vue';
 import BoardCardInner from '~/boards/components/board_card_inner.vue';
 import BoardCardMoveToPosition from '~/boards/components/board_card_move_to_position.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
@@ -39,7 +39,7 @@ describe('Board card component', () => {
   let list;
   let store;
 
-  const findBoardBlockedIcon = () => wrapper.findComponent(BoardBlockedIcon);
+  const findIssuableBlockedIcon = () => wrapper.findComponent(IssuableBlockedIcon);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findEpicCountablesTotalTooltip = () => wrapper.findComponent(GlTooltip);
   const findEpicCountables = () => wrapper.findByTestId('epic-countables');
@@ -189,7 +189,7 @@ describe('Board card component', () => {
         },
       });
 
-      expect(findBoardBlockedIcon().exists()).toBe(true);
+      expect(findIssuableBlockedIcon().exists()).toBe(true);
     });
 
     it('does not show blocked icon if issue is not blocked', () => {
@@ -200,7 +200,7 @@ describe('Board card component', () => {
         },
       });
 
-      expect(findBoardBlockedIcon().exists()).toBe(false);
+      expect(findIssuableBlockedIcon().exists()).toBe(false);
     });
   });
 
@@ -595,5 +595,10 @@ describe('Board card component', () => {
       expect(findEpicCountablesTotalWeight().text()).toBe('15');
       expect(findEpicProgressTooltip().text()).toBe('10 of 15 weight completed');
     });
+
+    it('does not render the move to position icon', () => {
+      createWrapper();
+      expect(findMoveToPositionComponent().exists()).toBe(false);
+    });
   });
 });
diff --git a/spec/frontend/boards/components/board_filtered_search_spec.js b/spec/frontend/boards/components/board_filtered_search_spec.js
index 731578e15a3..1a07b9f0b78 100644
--- a/spec/frontend/boards/components/board_filtered_search_spec.js
+++ b/spec/frontend/boards/components/board_filtered_search_spec.js
@@ -126,6 +126,7 @@ describe('BoardFilteredSearch', () => {
         { type: 'weight', value: { data: '2', operator: '=' } },
         { type: 'iteration', value: { data: 'Any&3', operator: '=' } },
         { type: 'release', value: { data: 'v1.0.0', operator: '=' } },
+        { type: 'health_status', value: { data: 'onTrack', operator: '=' } },
       ];
       jest.spyOn(urlUtility, 'updateHistory');
       findFilteredSearch().vm.$emit('onFilter', mockFilters);
@@ -134,7 +135,7 @@ describe('BoardFilteredSearch', () => {
         title: '',
         replace: true,
         url:
-          'http://test.host/?author_username=root&label_name[]=label&label_name[]=label%262&assignee_username=root&milestone_title=New%20Milestone&iteration_id=Any&iteration_cadence_id=3&types=INCIDENT&weight=2&release_tag=v1.0.0',
+          'http://test.host/?author_username=root&label_name[]=label&label_name[]=label%262&assignee_username=root&milestone_title=New%20Milestone&iteration_id=Any&iteration_cadence_id=3&types=INCIDENT&weight=2&release_tag=v1.0.0&health_status=onTrack',
       });
     });
 
@@ -160,7 +161,9 @@ describe('BoardFilteredSearch', () => {
 
   describe('when url params are already set', () => {
     beforeEach(() => {
-      createComponent({ initialFilterParams: { authorUsername: 'root', labelName: ['label'] } });
+      createComponent({
+        initialFilterParams: { authorUsername: 'root', labelName: ['label'], healthStatus: 'Any' },
+      });
 
       jest.spyOn(store, 'dispatch');
     });
@@ -169,6 +172,7 @@ describe('BoardFilteredSearch', () => {
       expect(findFilteredSearch().props('initialFilterValue')).toEqual([
         { type: 'author', value: { data: 'root', operator: '=' } },
         { type: 'label', value: { data: 'label', operator: '=' } },
+        { type: 'health_status', value: { data: 'Any', operator: '=' } },
       ]);
     });
   });
diff --git a/spec/frontend/boards/stores/actions_spec.js b/spec/frontend/boards/stores/actions_spec.js
index e919300228a..78859525a63 100644
--- a/spec/frontend/boards/stores/actions_spec.js
+++ b/spec/frontend/boards/stores/actions_spec.js
@@ -1047,60 +1047,58 @@ describe('moveIssueCard and undoMoveIssueCard', () => {
     let undoMutations;
 
     describe('when re-ordering card', () => {
-      beforeEach(
-        ({
-          itemId = 123,
-          fromListId = 'gid://gitlab/List/1',
-          toListId = 'gid://gitlab/List/1',
-          originalIssue = { foo: 'bar' },
-          originalIndex = 0,
-          moveBeforeId = undefined,
-          moveAfterId = undefined,
-          allItemsLoadedInList = true,
-          listPosition = undefined,
-        } = {}) => {
-          state = {
-            boardLists: {
-              [toListId]: { listType: ListType.backlog },
-              [fromListId]: { listType: ListType.backlog },
-            },
-            boardItems: { [itemId]: originalIssue },
-            boardItemsByListId: { [fromListId]: [123] },
-          };
-          params = {
-            itemId,
-            fromListId,
-            toListId,
-            moveBeforeId,
-            moveAfterId,
-            listPosition,
-            allItemsLoadedInList,
-          };
-          moveMutations = [
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: {
-                itemId,
-                listId: toListId,
-                moveBeforeId,
-                moveAfterId,
-                listPosition,
-                allItemsLoadedInList,
-                atIndex: originalIndex,
-              },
-            },
-          ];
-          undoMutations = [
-            { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: fromListId, atIndex: originalIndex },
+      beforeEach(() => {
+        const itemId = 123;
+        const fromListId = 'gid://gitlab/List/1';
+        const toListId = 'gid://gitlab/List/1';
+        const originalIssue = { foo: 'bar' };
+        const originalIndex = 0;
+        const moveBeforeId = undefined;
+        const moveAfterId = undefined;
+        const allItemsLoadedInList = true;
+        const listPosition = undefined;
+
+        state = {
+          boardLists: {
+            [toListId]: { listType: ListType.backlog },
+            [fromListId]: { listType: ListType.backlog },
+          },
+          boardItems: { [itemId]: originalIssue },
+          boardItemsByListId: { [fromListId]: [123] },
+        };
+        params = {
+          itemId,
+          fromListId,
+          toListId,
+          moveBeforeId,
+          moveAfterId,
+          listPosition,
+          allItemsLoadedInList,
+        };
+        moveMutations = [
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: {
+              itemId,
+              listId: toListId,
+              moveBeforeId,
+              moveAfterId,
+              listPosition,
+              allItemsLoadedInList,
+              atIndex: originalIndex,
             },
-          ];
-        },
-      );
+          },
+        ];
+        undoMutations = [
+          { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: fromListId, atIndex: originalIndex },
+          },
+        ];
+      });
 
       it('moveIssueCard commits a correct set of actions', () => {
         testAction({
@@ -1144,42 +1142,40 @@ describe('moveIssueCard and undoMoveIssueCard', () => {
         },
       ],
     ])('when %s', (_, { toListType, fromListType }) => {
-      beforeEach(
-        ({
-          itemId = 123,
-          fromListId = 'gid://gitlab/List/1',
-          toListId = 'gid://gitlab/List/2',
-          originalIssue = { foo: 'bar' },
-          originalIndex = 0,
-          moveBeforeId = undefined,
-          moveAfterId = undefined,
-        } = {}) => {
-          state = {
-            boardLists: {
-              [fromListId]: { listType: fromListType },
-              [toListId]: { listType: toListType },
-            },
-            boardItems: { [itemId]: originalIssue },
-            boardItemsByListId: { [fromListId]: [123], [toListId]: [] },
-          };
-          params = { itemId, fromListId, toListId, moveBeforeId, moveAfterId };
-          moveMutations = [
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: toListId, moveBeforeId, moveAfterId },
-            },
-          ];
-          undoMutations = [
-            { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: toListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: fromListId, atIndex: originalIndex },
-            },
-          ];
-        },
-      );
+      beforeEach(() => {
+        const itemId = 123;
+        const fromListId = 'gid://gitlab/List/1';
+        const toListId = 'gid://gitlab/List/2';
+        const originalIssue = { foo: 'bar' };
+        const originalIndex = 0;
+        const moveBeforeId = undefined;
+        const moveAfterId = undefined;
+
+        state = {
+          boardLists: {
+            [fromListId]: { listType: fromListType },
+            [toListId]: { listType: toListType },
+          },
+          boardItems: { [itemId]: originalIssue },
+          boardItemsByListId: { [fromListId]: [123], [toListId]: [] },
+        };
+        params = { itemId, fromListId, toListId, moveBeforeId, moveAfterId };
+        moveMutations = [
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: toListId, moveBeforeId, moveAfterId },
+          },
+        ];
+        undoMutations = [
+          { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: toListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: fromListId, atIndex: originalIndex },
+          },
+        ];
+      });
 
       it('moveIssueCard commits a correct set of actions', () => {
         testAction({
@@ -1216,47 +1212,45 @@ describe('moveIssueCard and undoMoveIssueCard', () => {
         },
       ],
     ])('when %s', (_, { toListType, fromListType }) => {
-      beforeEach(
-        ({
-          itemId = 123,
-          fromListId = 'gid://gitlab/List/1',
-          toListId = 'gid://gitlab/List/2',
-          originalIssue = { foo: 'bar' },
-          originalIndex = 0,
-          moveBeforeId = undefined,
-          moveAfterId = undefined,
-        } = {}) => {
-          state = {
-            boardLists: {
-              [fromListId]: { listType: fromListType },
-              [toListId]: { listType: toListType },
-            },
-            boardItems: { [itemId]: originalIssue },
-            boardItemsByListId: { [fromListId]: [123], [toListId]: [] },
-          };
-          params = { itemId, fromListId, toListId, moveBeforeId, moveAfterId };
-          moveMutations = [
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: toListId, moveBeforeId, moveAfterId },
-            },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: fromListId, atIndex: originalIndex },
-            },
-          ];
-          undoMutations = [
-            { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
-            { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: toListId } },
-            {
-              type: types.ADD_BOARD_ITEM_TO_LIST,
-              payload: { itemId, listId: fromListId, atIndex: originalIndex },
-            },
-          ];
-        },
-      );
+      beforeEach(() => {
+        const itemId = 123;
+        const fromListId = 'gid://gitlab/List/1';
+        const toListId = 'gid://gitlab/List/2';
+        const originalIssue = { foo: 'bar' };
+        const originalIndex = 0;
+        const moveBeforeId = undefined;
+        const moveAfterId = undefined;
+
+        state = {
+          boardLists: {
+            [fromListId]: { listType: fromListType },
+            [toListId]: { listType: toListType },
+          },
+          boardItems: { [itemId]: originalIssue },
+          boardItemsByListId: { [fromListId]: [123], [toListId]: [] },
+        };
+        params = { itemId, fromListId, toListId, moveBeforeId, moveAfterId };
+        moveMutations = [
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: toListId, moveBeforeId, moveAfterId },
+          },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: fromListId, atIndex: originalIndex },
+          },
+        ];
+        undoMutations = [
+          { type: types.UPDATE_BOARD_ITEM, payload: originalIssue },
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: fromListId } },
+          { type: types.REMOVE_BOARD_ITEM_FROM_LIST, payload: { itemId, listId: toListId } },
+          {
+            type: types.ADD_BOARD_ITEM_TO_LIST,
+            payload: { itemId, listId: fromListId, atIndex: originalIndex },
+          },
+        ];
+      });
 
       it('moveIssueCard commits a correct set of actions', () => {
         testAction({
diff --git a/spec/frontend/captcha/init_recaptcha_script_spec.js b/spec/frontend/captcha/init_recaptcha_script_spec.js
index af07c9e474e..78480821d95 100644
--- a/spec/frontend/captcha/init_recaptcha_script_spec.js
+++ b/spec/frontend/captcha/init_recaptcha_script_spec.js
@@ -1,5 +1,4 @@
 import {
-  RECAPTCHA_API_URL_PREFIX,
   RECAPTCHA_ONLOAD_CALLBACK_NAME,
   clearMemoizeCache,
   initRecaptchaScript,
@@ -26,7 +25,7 @@ describe('initRecaptchaScript', () => {
         <head>
           <script
             class="js-recaptcha-script"
-            src="${RECAPTCHA_API_URL_PREFIX}?onload=${RECAPTCHA_ONLOAD_CALLBACK_NAME}&render=explicit"
+            src="undefined?onload=recaptchaOnloadCallback&render=explicit"
           />
         </head>
       `);
diff --git a/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
index 920ceaefb70..864041141b8 100644
--- a/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
@@ -4,8 +4,8 @@ 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 createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { createAlert } from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 
 import ciAdminVariables from '~/ci_variable_list/components/ci_admin_variables.vue';
 import ciVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
@@ -92,8 +92,8 @@ describe('Ci Admin Variable list', () => {
         );
       });
 
-      it('createFlash was not called', () => {
-        expect(createFlash).not.toHaveBeenCalled();
+      it('createAlert was not called', () => {
+        expect(createAlert).not.toHaveBeenCalled();
       });
     });
 
@@ -104,8 +104,8 @@ describe('Ci Admin Variable list', () => {
         await createComponentWithApollo();
       });
 
-      it('calls createFlash with the expected error message', () => {
-        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      it('calls createAlert with the expected error message', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: variableFetchErrorText });
       });
     });
   });
@@ -153,7 +153,7 @@ describe('Ci Admin Variable list', () => {
         await nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+        expect(createAlert).toHaveBeenCalledWith({ message: graphQLErrorMessage });
       },
     );
 
@@ -171,7 +171,7 @@ describe('Ci Admin Variable list', () => {
         await findCiSettings().vm.$emit(event, newVariable);
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+        expect(createAlert).toHaveBeenCalledWith({ message: genericMutationErrorText });
       },
     );
   });
diff --git a/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
index e45656acfd8..8a48e73eb9f 100644
--- a/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
@@ -4,8 +4,8 @@ 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 createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { createAlert } from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 
 import ciGroupVariables from '~/ci_variable_list/components/ci_group_variables.vue';
@@ -95,8 +95,8 @@ describe('Ci Group Variable list', () => {
         );
       });
 
-      it('createFlash was not called', () => {
-        expect(createFlash).not.toHaveBeenCalled();
+      it('createAlert was not called', () => {
+        expect(createAlert).not.toHaveBeenCalled();
       });
     });
 
@@ -107,8 +107,8 @@ describe('Ci Group Variable list', () => {
         await createComponentWithApollo();
       });
 
-      it('calls createFlash with the expected error message', () => {
-        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      it('calls createAlert with the expected error message', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: variableFetchErrorText });
       });
     });
   });
@@ -158,7 +158,7 @@ describe('Ci Group Variable list', () => {
         await nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+        expect(createAlert).toHaveBeenCalledWith({ message: graphQLErrorMessage });
       },
     );
 
@@ -176,7 +176,7 @@ describe('Ci Group Variable list', () => {
         await findCiSettings().vm.$emit(event, newVariable);
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+        expect(createAlert).toHaveBeenCalledWith({ message: genericMutationErrorText });
       },
     );
   });
diff --git a/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
index 867f8e0cf8f..c630278fbde 100644
--- a/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
@@ -4,8 +4,8 @@ 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 createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { createAlert } from '~/flash';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 
 import ciProjectVariables from '~/ci_variable_list/components/ci_project_variables.vue';
@@ -112,8 +112,8 @@ describe('Ci Project Variable list', () => {
         );
       });
 
-      it('createFlash was not called', () => {
-        expect(createFlash).not.toHaveBeenCalled();
+      it('createAlert was not called', () => {
+        expect(createAlert).not.toHaveBeenCalled();
       });
     });
 
@@ -125,8 +125,8 @@ describe('Ci Project Variable list', () => {
         await createComponentWithApollo();
       });
 
-      it('calls createFlash with the expected error message', () => {
-        expect(createFlash).toHaveBeenCalledWith({ message: variableFetchErrorText });
+      it('calls createAlert with the expected error message', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: variableFetchErrorText });
       });
     });
 
@@ -138,8 +138,8 @@ describe('Ci Project Variable list', () => {
         await createComponentWithApollo();
       });
 
-      it('calls createFlash with the expected error message', () => {
-        expect(createFlash).toHaveBeenCalledWith({ message: environmentFetchErrorText });
+      it('calls createAlert with the expected error message', () => {
+        expect(createAlert).toHaveBeenCalledWith({ message: environmentFetchErrorText });
       });
     });
   });
@@ -190,7 +190,7 @@ describe('Ci Project Variable list', () => {
         await nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: graphQLErrorMessage });
+        expect(createAlert).toHaveBeenCalledWith({ message: graphQLErrorMessage });
       },
     );
 
@@ -208,7 +208,7 @@ describe('Ci Project Variable list', () => {
         await findCiSettings().vm.$emit(event, newVariable);
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({ message: genericMutationErrorText });
+        expect(createAlert).toHaveBeenCalledWith({ message: genericMutationErrorText });
       },
     );
   });
diff --git a/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js b/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
index 9c941f99982..7def4dd4f29 100644
--- a/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
+++ b/spec/frontend/ci_variable_list/components/legacy_ci_variable_settings_spec.js
@@ -9,11 +9,11 @@ Vue.use(Vuex);
 describe('Ci variable table', () => {
   let wrapper;
   let store;
-  let isGroup;
+  let isProject;
 
-  const createComponent = (groupState) => {
+  const createComponent = (projectState) => {
     store = createStore();
-    store.state.isGroup = groupState;
+    store.state.isProject = projectState;
     jest.spyOn(store, 'dispatch').mockImplementation();
     wrapper = shallowMount(LegacyCiVariableSettings, {
       store,
@@ -25,14 +25,14 @@ describe('Ci variable table', () => {
   });
 
   it('dispatches fetchEnvironments when mounted', () => {
-    isGroup = false;
-    createComponent(isGroup);
+    isProject = true;
+    createComponent(isProject);
     expect(store.dispatch).toHaveBeenCalledWith('fetchEnvironments');
   });
 
   it('does not dispatch fetchenvironments when in group context', () => {
-    isGroup = true;
-    createComponent(isGroup);
+    isProject = false;
+    createComponent(isProject);
     expect(store.dispatch).not.toHaveBeenCalled();
   });
 });
diff --git a/spec/frontend/ci_variable_list/mocks.js b/spec/frontend/ci_variable_list/mocks.js
index 6d633c8b740..6f3e73f8b83 100644
--- a/spec/frontend/ci_variable_list/mocks.js
+++ b/spec/frontend/ci_variable_list/mocks.js
@@ -45,6 +45,12 @@ const createDefaultVars = ({ withScope = true, kind } = {}) => {
 
   return {
     __typename: `Ci${kind}VariableConnection`,
+    pageInfo: {
+      startCursor: 'adsjsd12kldpsa',
+      endCursor: 'adsjsd12kldpsa',
+      hasPreviousPage: false,
+      hasNextPage: true,
+    },
     nodes: base,
   };
 };
diff --git a/spec/frontend/ci_variable_list/store/actions_spec.js b/spec/frontend/ci_variable_list/store/actions_spec.js
index eb31fcd3ef4..e8c81a53a55 100644
--- a/spec/frontend/ci_variable_list/store/actions_spec.js
+++ b/spec/frontend/ci_variable_list/store/actions_spec.js
@@ -5,7 +5,7 @@ import * as actions from '~/ci_variable_list/store/actions';
 import * as types from '~/ci_variable_list/store/mutation_types';
 import getInitialState from '~/ci_variable_list/store/state';
 import { prepareDataForDisplay, prepareEnvironments } from '~/ci_variable_list/store/utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import mockData from '../services/mock_data';
 
@@ -118,7 +118,7 @@ describe('CI variable list store actions', () => {
           },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -155,7 +155,7 @@ describe('CI variable list store actions', () => {
           },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -192,7 +192,7 @@ describe('CI variable list store actions', () => {
           },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -219,7 +219,7 @@ describe('CI variable list store actions', () => {
       mock.onGet(state.endpoint).reply(500);
 
       await testAction(actions.fetchVariables, {}, state, [], [{ type: 'requestVariables' }]);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'There was an error fetching the variables.',
       });
     });
@@ -249,7 +249,7 @@ describe('CI variable list store actions', () => {
 
       await testAction(actions.fetchEnvironments, {}, state, [], [{ type: 'requestEnvironments' }]);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'There was an error fetching the environments information.',
       });
     });
diff --git a/spec/frontend/clusters_list/store/actions_spec.js b/spec/frontend/clusters_list/store/actions_spec.js
index 7663f329b3f..09b1f80ff9b 100644
--- a/spec/frontend/clusters_list/store/actions_spec.js
+++ b/spec/frontend/clusters_list/store/actions_spec.js
@@ -5,7 +5,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
 import { apiData } from '../mock_data';
@@ -98,7 +98,7 @@ describe('Clusters store actions', () => {
           },
         ],
       );
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: expect.stringMatching('error'),
       });
     });
diff --git a/spec/frontend/code_navigation/utils/index_spec.js b/spec/frontend/code_navigation/utils/index_spec.js
index 700c912029c..6f0d93c466c 100644
--- a/spec/frontend/code_navigation/utils/index_spec.js
+++ b/spec/frontend/code_navigation/utils/index_spec.js
@@ -87,5 +87,13 @@ describe('addInteractionClass', () => {
       expect(spans[1].textContent).toBe('Text');
       expect(spans[2].textContent).toBe(' ');
     });
+
+    it('adds the correct class names to wrapped nodes', () => {
+      setHTMLFixture(
+        '<div data-path="index.js"><div class="blob-content"><div id="LC1" class="line"><span class="test"> Text </span></div></div></div>',
+      );
+      addInteractionClass({ ...params, wrapTextNodes: true });
+      expect(findAllSpans()[1].classList.contains('test')).toBe(true);
+    });
   });
 });
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 fddc767953a..16737003fa0 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -178,12 +178,12 @@ describe('Commit box pipeline mini graph', () => {
   });
 
   describe('error state', () => {
-    it('createFlash should show if there is an error fetching the data', async () => {
+    it('createAlert should show if there is an error fetching the data', async () => {
       createComponent({ handler: failedHandler });
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'There was a problem fetching linked pipelines.',
       });
     });
diff --git a/spec/frontend/commit/commit_pipeline_status_component_spec.js b/spec/frontend/commit/commit_pipeline_status_component_spec.js
index 73720c1cc88..e75fb697a7b 100644
--- a/spec/frontend/commit/commit_pipeline_status_component_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_component_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Visibility from 'visibilityjs';
 import { nextTick } from 'vue';
 import fixture from 'test_fixtures/pipelines/pipelines.json';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -170,7 +170,7 @@ describe('Commit pipeline status component', () => {
       });
 
       it('displays flash error message', () => {
-        expect(createFlash).toHaveBeenCalled();
+        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 db7b7b45397..8d455f8a3d7 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitBoxPipelineStatus from '~/projects/commit_box/info/components/commit_box_pipeline_status.vue';
 import {
@@ -78,7 +78,7 @@ describe('Commit box pipeline status', () => {
       expect(findStatusIcon().exists()).toBe(true);
 
       expect(findLoadingIcon().exists()).toBe(false);
-      expect(createFlash).toHaveBeenCalledTimes(0);
+      expect(createAlert).toHaveBeenCalledTimes(0);
     });
 
     it('should link to the latest pipeline', () => {
@@ -97,12 +97,12 @@ describe('Commit box pipeline status', () => {
   });
 
   describe('error state', () => {
-    it('createFlash should show if there is an error fetching the pipeline status', async () => {
+    it('createAlert should show if there is an error fetching the pipeline status', async () => {
       createComponent(failedHandler);
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: PIPELINE_STATUS_FETCH_ERROR,
       });
     });
diff --git a/spec/frontend/content_editor/components/content_editor_spec.js b/spec/frontend/content_editor/components/content_editor_spec.js
index ae52cb05eaf..c1c2a125515 100644
--- a/spec/frontend/content_editor/components/content_editor_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_spec.js
@@ -13,6 +13,7 @@ import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubb
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
 import LoadingIndicator from '~/content_editor/components/loading_indicator.vue';
 import waitForPromises from 'helpers/wait_for_promises';
+import { KEYDOWN_EVENT } from '~/content_editor/constants';
 
 jest.mock('~/emoji');
 
@@ -26,12 +27,13 @@ describe('ContentEditor', () => {
   const findEditorStateObserver = () => wrapper.findComponent(EditorStateObserver);
   const findLoadingIndicator = () => wrapper.findComponent(LoadingIndicator);
   const findContentEditorAlert = () => wrapper.findComponent(ContentEditorAlert);
-  const createWrapper = ({ markdown } = {}) => {
+  const createWrapper = ({ markdown, autofocus } = {}) => {
     wrapper = shallowMountExtended(ContentEditor, {
       propsData: {
         renderMarkdown,
         uploadsPath,
         markdown,
+        autofocus,
       },
       stubs: {
         EditorStateObserver,
@@ -70,14 +72,22 @@ describe('ContentEditor', () => {
     expect(editorContent.classes()).toContain('md');
   });
 
-  it('renders ContentEditorProvider component', async () => {
-    await createWrapper();
+  it('allows setting the tiptap editor to autofocus', async () => {
+    createWrapper({ autofocus: 'start' });
+
+    await nextTick();
+
+    expect(findEditorContent().props().editor.options.autofocus).toBe('start');
+  });
+
+  it('renders ContentEditorProvider component', () => {
+    createWrapper();
 
     expect(wrapper.findComponent(ContentEditorProvider).exists()).toBe(true);
   });
 
-  it('renders top toolbar component', async () => {
-    await createWrapper();
+  it('renders top toolbar component', () => {
+    createWrapper();
 
     expect(wrapper.findComponent(TopToolbar).exists()).toBe(true);
   });
@@ -213,6 +223,17 @@ describe('ContentEditor', () => {
     });
   });
 
+  describe('when editorStateObserver emits keydown event', () => {
+    it('bubbles up event', () => {
+      const event = new Event('keydown');
+
+      createWrapper();
+
+      findEditorStateObserver().vm.$emit(KEYDOWN_EVENT, event);
+      expect(wrapper.emitted(KEYDOWN_EVENT)).toEqual([[event]]);
+    });
+  });
+
   it.each`
     name            | component
     ${'formatting'} | ${FormattingBubbleMenu}
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 e8c2d8c8793..9b42f61c98c 100644
--- a/spec/frontend/content_editor/components/editor_state_observer_spec.js
+++ b/spec/frontend/content_editor/components/editor_state_observer_spec.js
@@ -4,7 +4,7 @@ import EditorStateObserver, {
   tiptapToComponentMap,
 } from '~/content_editor/components/editor_state_observer.vue';
 import eventHubFactory from '~/helpers/event_hub_factory';
-import { ALERT_EVENT } from '~/content_editor/constants';
+import { ALERT_EVENT, KEYDOWN_EVENT } from '~/content_editor/constants';
 import { createTestEditor } from '../test_utils';
 
 describe('content_editor/components/editor_state_observer', () => {
@@ -14,6 +14,7 @@ describe('content_editor/components/editor_state_observer', () => {
   let onSelectionUpdateListener;
   let onTransactionListener;
   let onAlertListener;
+  let onKeydownListener;
   let eventHub;
 
   const buildEditor = () => {
@@ -30,6 +31,7 @@ describe('content_editor/components/editor_state_observer', () => {
         selectionUpdate: onSelectionUpdateListener,
         transaction: onTransactionListener,
         [ALERT_EVENT]: onAlertListener,
+        [KEYDOWN_EVENT]: onKeydownListener,
       },
     });
   };
@@ -39,6 +41,7 @@ describe('content_editor/components/editor_state_observer', () => {
     onSelectionUpdateListener = jest.fn();
     onTransactionListener = jest.fn();
     onAlertListener = jest.fn();
+    onKeydownListener = jest.fn();
     buildEditor();
   });
 
@@ -67,8 +70,9 @@ describe('content_editor/components/editor_state_observer', () => {
   });
 
   it.each`
-    event          | listener
-    ${ALERT_EVENT} | ${() => onAlertListener}
+    event            | listener
+    ${ALERT_EVENT}   | ${() => onAlertListener}
+    ${KEYDOWN_EVENT} | ${() => onKeydownListener}
   `('listens to $event event in the eventBus object', ({ event, listener }) => {
     const args = {};
 
@@ -97,6 +101,7 @@ describe('content_editor/components/editor_state_observer', () => {
     it.each`
       event
       ${ALERT_EVENT}
+      ${KEYDOWN_EVENT}
     `('removes $event event hook from eventHub', ({ event }) => {
       jest.spyOn(eventHub, '$off');
       jest.spyOn(eventHub, '$on');
diff --git a/spec/frontend/content_editor/components/suggestions_dropdown_spec.js b/spec/frontend/content_editor/components/suggestions_dropdown_spec.js
new file mode 100644
index 00000000000..e72eb892e74
--- /dev/null
+++ b/spec/frontend/content_editor/components/suggestions_dropdown_spec.js
@@ -0,0 +1,286 @@
+import { GlAvatarLabeled, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import SuggestionsDropdown from '~/content_editor/components/suggestions_dropdown.vue';
+
+describe('~/content_editor/components/suggestions_dropdown', () => {
+  let wrapper;
+
+  const buildWrapper = ({ propsData } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(SuggestionsDropdown, {
+        propsData: {
+          nodeType: 'reference',
+          command: jest.fn(),
+          ...propsData,
+        },
+      }),
+    );
+  };
+
+  const exampleUser = { username: 'root', avatar_url: 'root_avatar.png', type: 'User' };
+  const exampleIssue = { iid: 123, title: 'Test Issue' };
+  const exampleMergeRequest = { iid: 224, title: 'Test MR' };
+  const exampleMilestone1 = { iid: 21, title: '13' };
+  const exampleMilestone2 = { iid: 24, title: 'Milestone with spaces' };
+
+  const exampleCommand = {
+    name: 'due',
+    description: 'Set due date',
+    params: ['<in 2 days | this Friday | December 31st>'],
+  };
+  const exampleEpic = {
+    iid: 8884,
+    title: '❓ Remote Development | Solution validation',
+    reference: 'gitlab-org&8884',
+  };
+  const exampleLabel1 = {
+    title: 'Create',
+    color: '#E44D2A',
+    type: 'GroupLabel',
+    textColor: '#FFFFFF',
+  };
+  const exampleLabel2 = {
+    title: 'Weekly Team Announcement',
+    color: '#E44D2A',
+    type: 'GroupLabel',
+    textColor: '#FFFFFF',
+  };
+  const exampleLabel3 = {
+    title: 'devops::create',
+    color: '#E44D2A',
+    type: 'GroupLabel',
+    textColor: '#FFFFFF',
+  };
+  const exampleVulnerability = {
+    id: 60850147,
+    title: 'System procs network activity',
+  };
+  const exampleSnippet = {
+    id: 2420859,
+    title: 'Project creation QueryRecorder logs',
+  };
+  const exampleEmoji = {
+    c: 'people',
+    e: '😃',
+    d: 'smiling face with open mouth',
+    u: '6.0',
+    name: 'smiley',
+  };
+
+  const insertedEmojiProps = {
+    name: 'smiley',
+    title: 'smiling face with open mouth',
+    moji: '😃',
+    unicodeVersion: '6.0',
+  };
+
+  describe('on item select', () => {
+    it.each`
+      nodeType       | referenceType      | char                 | reference               | insertedText                  | insertedProps
+      ${'reference'} | ${'user'}          | ${'@'}               | ${exampleUser}          | ${`@root`}                    | ${{}}
+      ${'reference'} | ${'issue'}         | ${'#'}               | ${exampleIssue}         | ${`#123`}                     | ${{}}
+      ${'reference'} | ${'merge_request'} | ${'!'}               | ${exampleMergeRequest}  | ${`!224`}                     | ${{}}
+      ${'reference'} | ${'milestone'}     | ${'%'}               | ${exampleMilestone1}    | ${`%13`}                      | ${{}}
+      ${'reference'} | ${'milestone'}     | ${'%'}               | ${exampleMilestone2}    | ${`%Milestone with spaces`}   | ${{ originalText: '%"Milestone with spaces"' }}
+      ${'reference'} | ${'command'}       | ${'/'}               | ${exampleCommand}       | ${'/due'}                     | ${{}}
+      ${'reference'} | ${'epic'}          | ${'&'}               | ${exampleEpic}          | ${`gitlab-org&8884`}          | ${{}}
+      ${'reference'} | ${'label'}         | ${'~'}               | ${exampleLabel1}        | ${`Create`}                   | ${{}}
+      ${'reference'} | ${'label'}         | ${'~'}               | ${exampleLabel2}        | ${`Weekly Team Announcement`} | ${{ originalText: '~"Weekly Team Announcement"' }}
+      ${'reference'} | ${'label'}         | ${'~'}               | ${exampleLabel3}        | ${`devops::create`}           | ${{ originalText: '~"devops::create"', text: 'devops::create' }}
+      ${'reference'} | ${'vulnerability'} | ${'[vulnerability:'} | ${exampleVulnerability} | ${`[vulnerability:60850147]`} | ${{}}
+      ${'reference'} | ${'snippet'}       | ${'$'}               | ${exampleSnippet}       | ${`$2420859`}                 | ${{}}
+      ${'emoji'}     | ${'emoji'}         | ${':'}               | ${exampleEmoji}         | ${`😃`}                       | ${insertedEmojiProps}
+    `(
+      'runs a command to insert the selected $referenceType',
+      ({ char, nodeType, referenceType, reference, insertedText, insertedProps }) => {
+        const commandSpy = jest.fn();
+
+        buildWrapper({
+          propsData: {
+            char,
+            command: commandSpy,
+            nodeType,
+            nodeProps: {
+              referenceType,
+              test: 'prop',
+            },
+            items: [reference],
+          },
+        });
+
+        wrapper.findComponent(GlDropdownItem).vm.$emit('click');
+
+        expect(commandSpy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            text: insertedText,
+            test: 'prop',
+            ...insertedProps,
+          }),
+        );
+      },
+    );
+  });
+
+  describe('rendering user references', () => {
+    it('displays avatar labeled component', () => {
+      buildWrapper({
+        propsData: {
+          char: '@',
+          nodeProps: {
+            referenceType: 'user',
+          },
+          items: [exampleUser],
+        },
+      });
+
+      expect(wrapper.findComponent(GlAvatarLabeled).attributes()).toEqual(
+        expect.objectContaining({
+          label: exampleUser.username,
+          shape: 'circle',
+          src: exampleUser.avatar_url,
+        }),
+      );
+    });
+
+    describe.each`
+      referenceType      | char   | reference              | displaysID
+      ${'issue'}         | ${'#'} | ${exampleIssue}        | ${true}
+      ${'merge_request'} | ${'!'} | ${exampleMergeRequest} | ${true}
+      ${'milestone'}     | ${'%'} | ${exampleMilestone1}   | ${false}
+    `('rendering $referenceType references', ({ referenceType, char, reference, displaysID }) => {
+      it(`displays ${referenceType} ID and title`, () => {
+        buildWrapper({
+          propsData: {
+            char,
+            nodeType: 'reference',
+            nodeProps: {
+              referenceType,
+            },
+            items: [reference],
+          },
+        });
+
+        if (displaysID) expect(wrapper.text()).toContain(`${reference.iid}`);
+        else expect(wrapper.text()).not.toContain(`${reference.iid}`);
+        expect(wrapper.text()).toContain(`${reference.title}`);
+      });
+    });
+
+    describe.each`
+      referenceType      | char                 | reference
+      ${'snippet'}       | ${'$'}               | ${exampleSnippet}
+      ${'vulnerability'} | ${'[vulnerability:'} | ${exampleVulnerability}
+    `('rendering $referenceType references', ({ referenceType, char, reference }) => {
+      it(`displays ${referenceType} ID and title`, () => {
+        buildWrapper({
+          propsData: {
+            char,
+            nodeProps: {
+              referenceType,
+            },
+            items: [reference],
+          },
+        });
+
+        expect(wrapper.text()).toContain(`${reference.id}`);
+        expect(wrapper.text()).toContain(`${reference.title}`);
+      });
+    });
+
+    describe('rendering label references', () => {
+      it.each`
+        label            | displayedTitle                | displayedColor
+        ${exampleLabel1} | ${'Create'}                   | ${'rgb(228, 77, 42)' /* #E44D2A */}
+        ${exampleLabel2} | ${'Weekly Team Announcement'} | ${'rgb(228, 77, 42)' /* #E44D2A */}
+        ${exampleLabel3} | ${'devops::create'}           | ${'rgb(228, 77, 42)' /* #E44D2A */}
+      `('displays label title and color', ({ label, displayedTitle, displayedColor }) => {
+        buildWrapper({
+          propsData: {
+            char: '~',
+            nodeProps: {
+              referenceType: 'label',
+            },
+            items: [label],
+          },
+        });
+
+        expect(wrapper.text()).toContain(displayedTitle);
+        expect(wrapper.text()).not.toContain('"'); // no quotes in the dropdown list
+        expect(wrapper.findByTestId('label-color-box').attributes().style).toEqual(
+          `background-color: ${displayedColor};`,
+        );
+      });
+    });
+
+    describe('rendering epic references', () => {
+      it('displays epic title and reference', () => {
+        buildWrapper({
+          propsData: {
+            char: '&',
+            nodeProps: {
+              referenceType: 'epic',
+            },
+            items: [exampleEpic],
+          },
+        });
+
+        expect(wrapper.text()).toContain(`${exampleEpic.reference}`);
+        expect(wrapper.text()).toContain(`${exampleEpic.title}`);
+      });
+    });
+
+    describe('rendering a command (quick action)', () => {
+      it('displays command name with a slash', () => {
+        buildWrapper({
+          propsData: {
+            char: '/',
+            nodeProps: {
+              referenceType: 'command',
+            },
+            items: [exampleCommand],
+          },
+        });
+
+        expect(wrapper.text()).toContain(`${exampleCommand.name} `);
+      });
+    });
+
+    describe('rendering emoji references', () => {
+      it('displays emoji', () => {
+        const testEmojis = [
+          {
+            c: 'people',
+            e: '😄',
+            d: 'smiling face with open mouth and smiling eyes',
+            u: '6.0',
+            name: 'smile',
+          },
+          {
+            c: 'people',
+            e: '😸',
+            d: 'grinning cat face with smiling eyes',
+            u: '6.0',
+            name: 'smile_cat',
+          },
+          { c: 'people', e: '😃', d: 'smiling face with open mouth', u: '6.0', name: 'smiley' },
+        ];
+
+        buildWrapper({
+          propsData: {
+            char: ':',
+            nodeType: 'emoji',
+            nodeProps: {},
+            items: testEmojis,
+          },
+        });
+
+        testEmojis.forEach((testEmoji) => {
+          expect(wrapper.text()).toContain(testEmoji.e);
+          expect(wrapper.text()).toContain(testEmoji.d);
+          expect(wrapper.text()).toContain(testEmoji.name);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/components/wrappers/label_spec.js b/spec/frontend/content_editor/components/wrappers/label_spec.js
new file mode 100644
index 00000000000..9e58669b0ea
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/label_spec.js
@@ -0,0 +1,36 @@
+import { GlLabel } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import LabelWrapper from '~/content_editor/components/wrappers/label.vue';
+
+describe('content/components/wrappers/label', () => {
+  let wrapper;
+
+  const createWrapper = async (node = {}) => {
+    wrapper = shallowMountExtended(LabelWrapper, {
+      propsData: { node },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it("renders a GlLabel with the node's text and color", () => {
+    createWrapper({ attrs: { color: '#ff0000', text: 'foo bar', originalText: '~"foo bar"' } });
+
+    const glLabel = wrapper.findComponent(GlLabel);
+
+    expect(glLabel.props()).toMatchObject(
+      expect.objectContaining({
+        title: 'foo bar',
+        backgroundColor: '#ff0000',
+      }),
+    );
+  });
+
+  it('renders a scoped label if there is a "::" in the label', () => {
+    createWrapper({ attrs: { color: '#ff0000', text: 'foo::bar', originalText: '~"foo::bar"' } });
+
+    expect(wrapper.findComponent(GlLabel).props().scoped).toBe(true);
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/heading_spec.js b/spec/frontend/content_editor/extensions/heading_spec.js
new file mode 100644
index 00000000000..2fa25e03cdc
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/heading_spec.js
@@ -0,0 +1,54 @@
+import Heading from '~/content_editor/extensions/heading';
+import { createTestEditor, createDocBuilder, triggerNodeInputRule } from '../test_utils';
+
+describe('content_editor/extensions/heading', () => {
+  let tiptapEditor;
+  let doc;
+  let p;
+  let heading;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [Heading] });
+    ({
+      builders: { doc, p, heading },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        heading: { nodeType: Heading.name },
+      },
+    }));
+  });
+
+  describe('when typing a valid heading input rule', () => {
+    it.each`
+      level | inputRuleText
+      ${1}  | ${'# '}
+      ${2}  | ${'## '}
+      ${3}  | ${'### '}
+      ${4}  | ${'#### '}
+      ${5}  | ${'##### '}
+      ${6}  | ${'###### '}
+    `('inserts a heading node for $inputRuleText', ({ level, inputRuleText }) => {
+      const expectedDoc = doc(heading({ level }));
+
+      triggerNodeInputRule({ tiptapEditor, inputRuleText });
+
+      expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    });
+  });
+
+  describe('when typing a invalid heading input rule', () => {
+    it.each`
+      inputRuleText
+      ${'#hi'}
+      ${'#\n'}
+    `('does not insert a heading node for $inputRuleText', ({ inputRuleText }) => {
+      const expectedDoc = doc(p());
+
+      triggerNodeInputRule({ tiptapEditor, inputRuleText });
+
+      // no change to the document
+      expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/markdown_processing_spec_helper.js b/spec/frontend/content_editor/markdown_processing_spec_helper.js
index 228d009e42c..6f10f294fb0 100644
--- a/spec/frontend/content_editor/markdown_processing_spec_helper.js
+++ b/spec/frontend/content_editor/markdown_processing_spec_helper.js
@@ -1,7 +1,10 @@
 import fs from 'fs';
 import jsYaml from 'js-yaml';
 import { memoize } from 'lodash';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
 import { createContentEditor } from '~/content_editor';
+import httpStatus from '~/lib/utils/http_status';
 
 const getFocusedMarkdownExamples = memoize(
   () => process.env.FOCUSED_MARKDOWN_EXAMPLES?.split(',') || [],
@@ -42,6 +45,11 @@ const loadMarkdownApiExamples = (markdownYamlPath) => {
 };
 
 const testSerializesHtmlToMarkdownForElement = async ({ markdown, html }) => {
+  const mock = new MockAdapter(axios);
+
+  // Ignore any API requests from the suggestions plugin
+  mock.onGet().reply(httpStatus.OK, []);
+
   const contentEditor = createContentEditor({
     // Overwrite renderMarkdown to always return this specific html
     renderMarkdown: () => html,
@@ -55,6 +63,8 @@ const testSerializesHtmlToMarkdownForElement = async ({ markdown, html }) => {
   // Assert that the markdown we ended up with after sending it through all the ContentEditor
   // plumbing matches the original markdown from the YAML.
   expect(serializedContent.trim()).toBe(markdown.trim());
+
+  mock.restore();
 };
 
 // describeMarkdownProcesssing
@@ -74,7 +84,7 @@ export const describeMarkdownProcessing = (description, markdownYamlPath) => {
         return;
       }
 
-      it(exampleName, async () => {
+      it(`${exampleName}`, async () => {
         await testSerializesHtmlToMarkdownForElement(example);
       });
     });
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 56394c85e8b..32193d97fd8 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -1204,6 +1204,24 @@ Oranges are orange [^1]
     );
   });
 
+  it('correctly adds a space between a preceding block element and a markdown table', () => {
+    expect(
+      serialize(
+        bulletList(listItem(paragraph('List item 1')), listItem(paragraph('List item 2'))),
+        table(tableRow(tableHeader(paragraph('header'))), tableRow(tableCell(paragraph('cell')))),
+      ).trim(),
+    ).toBe(
+      `
+* List item 1
+* List item 2
+
+| header |
+|--------|
+| cell |
+    `.trim(),
+    );
+  });
+
   it('correctly serializes reference definition', () => {
     expect(
       serialize(
diff --git a/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js b/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
index 459780cc7cf..8c1a3831a74 100644
--- a/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
+++ b/spec/frontend/content_editor/services/track_input_rules_and_shortcuts_spec.js
@@ -44,7 +44,7 @@ describe('content_editor/services/track_input_rules_and_shortcuts', () => {
 
     describe('when creating a heading using an keyboard shortcut', () => {
       it('sends a tracking event indicating that a heading was created using an input rule', async () => {
-        const shortcuts = Heading.config.addKeyboardShortcuts.call(Heading);
+        const shortcuts = Heading.parent.config.addKeyboardShortcuts.call(Heading);
         const [firstShortcut] = Object.keys(shortcuts);
         const nodeName = Heading.name;
 
diff --git a/spec/frontend/contributors/component/contributors_spec.js b/spec/frontend/contributors/component/contributors_spec.js
index bdf3b3636ed..2f0b5719326 100644
--- a/spec/frontend/contributors/component/contributors_spec.js
+++ b/spec/frontend/contributors/component/contributors_spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import ContributorsCharts from '~/contributors/components/contributors.vue';
@@ -52,14 +53,14 @@ describe('Contributors charts', () => {
   it('should display loader whiled loading data', async () => {
     wrapper.vm.$store.state.loading = true;
     await nextTick();
-    expect(wrapper.find('.contributors-loader').exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('should render charts when loading completed and there is chart data', async () => {
     wrapper.vm.$store.state.loading = false;
     wrapper.vm.$store.state.chartData = chartData;
     await nextTick();
-    expect(wrapper.find('.contributors-loader').exists()).toBe(false);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     expect(wrapper.find('.contributors-charts').exists()).toBe(true);
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/spec/frontend/contributors/store/actions_spec.js b/spec/frontend/contributors/store/actions_spec.js
index ef0ff8ca208..865f683a91a 100644
--- a/spec/frontend/contributors/store/actions_spec.js
+++ b/spec/frontend/contributors/store/actions_spec.js
@@ -2,7 +2,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/flash.js');
@@ -47,7 +47,7 @@ describe('Contributors store actions', () => {
         [{ type: types.SET_LOADING_STATE, payload: true }],
         [],
       );
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: expect.stringMatching('error'),
       });
     });
diff --git a/spec/frontend/crm/contacts_root_spec.js b/spec/frontend/crm/contacts_root_spec.js
index 7aaaf480c44..ec7172434bf 100644
--- a/spec/frontend/crm/contacts_root_spec.js
+++ b/spec/frontend/crm/contacts_root_spec.js
@@ -87,7 +87,7 @@ describe('Customer relations contacts root app', () => {
         editButtonLabel: 'Edit',
         title: 'Customer relations contacts',
         newContact: 'New contact',
-        errorText: 'Something went wrong. Please try again.',
+        errorMsg: 'Something went wrong. Please try again.',
       },
       serverErrorMessage: '',
       filterSearchKey: 'contacts',
@@ -117,6 +117,18 @@ describe('Customer relations contacts root app', () => {
 
       expect(wrapper.text()).toContain('Something went wrong. Please try again.');
     });
+
+    it('should be removed on error-alert-dismissed event', async () => {
+      mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain('Something went wrong. Please try again.');
+
+      findTable().vm.$emit('error-alert-dismissed');
+      await waitForPromises();
+
+      expect(wrapper.text()).not.toContain('Something went wrong. Please try again.');
+    });
   });
 
   describe('on successful load', () => {
diff --git a/spec/frontend/crm/organizations_root_spec.js b/spec/frontend/crm/organizations_root_spec.js
index a0b56596177..1fcf6aa8f50 100644
--- a/spec/frontend/crm/organizations_root_spec.js
+++ b/spec/frontend/crm/organizations_root_spec.js
@@ -91,7 +91,7 @@ describe('Customer relations organizations root app', () => {
         editButtonLabel: 'Edit',
         title: 'Customer relations organizations',
         newOrganization: 'New organization',
-        errorText: 'Something went wrong. Please try again.',
+        errorMsg: 'Something went wrong. Please try again.',
       },
       serverErrorMessage: '',
       filterSearchKey: 'organizations',
diff --git a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
index 9c8cd6a3dbc..948dc5c9be2 100644
--- a/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
+++ b/spec/frontend/cycle_analytics/value_stream_metrics_spec.js
@@ -8,7 +8,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { group } from './mock_data';
 
 jest.mock('~/flash');
@@ -177,7 +177,7 @@ describe('ValueStreamMetrics', () => {
     });
 
     it('should render an error message', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: `There was an error while fetching value stream analytics ${fakeReqName} data.`,
       });
     });
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 bbafdc000db..113e0d8f60d 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
@@ -5,8 +5,9 @@ import Vuex from 'vuex';
 import Api from '~/api';
 import DeployFreezeModal from '~/deploy_freeze/components/deploy_freeze_modal.vue';
 import createStore from '~/deploy_freeze/store';
-import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
-import { freezePeriodsFixture, timezoneDataFixture } from '../helpers';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
+import { freezePeriodsFixture } from '../helpers';
+import { timezoneDataFixture } from '../../vue_shared/components/timezone_dropdown/helpers';
 
 jest.mock('~/api');
 
@@ -52,7 +53,7 @@ describe('Deploy freeze modal', () => {
 
   describe('Basic interactions', () => {
     it('button is disabled when freeze period is invalid', () => {
-      expect(submitDeployFreezeButton().attributes('disabled')).toBeTruthy();
+      expect(submitDeployFreezeButton().attributes('disabled')).toBe('true');
     });
   });
 
@@ -92,7 +93,7 @@ describe('Deploy freeze modal', () => {
       });
 
       it('disables the add deploy freeze button', () => {
-        expect(submitDeployFreezeButton().attributes('disabled')).toBeTruthy();
+        expect(submitDeployFreezeButton().attributes('disabled')).toBe('true');
       });
     });
 
@@ -103,7 +104,7 @@ describe('Deploy freeze modal', () => {
       });
 
       it('does not disable the submit button', () => {
-        expect(submitDeployFreezeButton().attributes('disabled')).toBeFalsy();
+        expect(submitDeployFreezeButton().attributes('disabled')).toBeUndefined();
       });
     });
   });
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 637efe30022..27d8fea9d5e 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
@@ -5,7 +5,7 @@ import DeployFreezeModal from '~/deploy_freeze/components/deploy_freeze_modal.vu
 import DeployFreezeSettings from '~/deploy_freeze/components/deploy_freeze_settings.vue';
 import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue';
 import createStore from '~/deploy_freeze/store';
-import { timezoneDataFixture } from '../helpers';
+import { timezoneDataFixture } from '../../vue_shared/components/timezone_dropdown/helpers';
 
 Vue.use(Vuex);
 
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 137776edfab..c2d6eb399bc 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_table_spec.js
@@ -5,7 +5,8 @@ import Vuex from 'vuex';
 import DeployFreezeTable from '~/deploy_freeze/components/deploy_freeze_table.vue';
 import createStore from '~/deploy_freeze/store';
 import { RECEIVE_FREEZE_PERIODS_SUCCESS } from '~/deploy_freeze/store/mutation_types';
-import { freezePeriodsFixture, timezoneDataFixture } from '../helpers';
+import { freezePeriodsFixture } from '../helpers';
+import { timezoneDataFixture } from '../../vue_shared/components/timezone_dropdown/helpers';
 
 Vue.use(Vuex);
 
diff --git a/spec/frontend/deploy_freeze/helpers.js b/spec/frontend/deploy_freeze/helpers.js
index 43e66183ab5..920901c97a8 100644
--- a/spec/frontend/deploy_freeze/helpers.js
+++ b/spec/frontend/deploy_freeze/helpers.js
@@ -1,10 +1,3 @@
 import freezePeriodsFixture from 'test_fixtures/api/freeze-periods/freeze_periods.json';
-import timezoneDataFixture from 'test_fixtures/timezones/short.json';
-import { secondsToHours } from '~/lib/utils/datetime_utility';
 
-export { freezePeriodsFixture, timezoneDataFixture };
-
-export const findTzByName = (identifier = '') =>
-  timezoneDataFixture.find(({ name }) => name.toLowerCase() === identifier.toLowerCase());
-
-export const formatTz = ({ offset, name }) => `[UTC ${secondsToHours(offset)}] ${name}`;
+export { freezePeriodsFixture };
diff --git a/spec/frontend/deploy_freeze/store/actions_spec.js b/spec/frontend/deploy_freeze/store/actions_spec.js
index ad67afdce75..ce0c924bed2 100644
--- a/spec/frontend/deploy_freeze/store/actions_spec.js
+++ b/spec/frontend/deploy_freeze/store/actions_spec.js
@@ -7,7 +7,8 @@ import getInitialState from '~/deploy_freeze/store/state';
 import createFlash from '~/flash';
 import * as logger from '~/lib/logger';
 import axios from '~/lib/utils/axios_utils';
-import { freezePeriodsFixture, timezoneDataFixture } from '../helpers';
+import { freezePeriodsFixture } from '../helpers';
+import { timezoneDataFixture } from '../../vue_shared/components/timezone_dropdown/helpers';
 
 jest.mock('~/api.js');
 jest.mock('~/flash.js');
diff --git a/spec/frontend/deploy_freeze/store/mutations_spec.js b/spec/frontend/deploy_freeze/store/mutations_spec.js
index 878a755088c..984105d6655 100644
--- a/spec/frontend/deploy_freeze/store/mutations_spec.js
+++ b/spec/frontend/deploy_freeze/store/mutations_spec.js
@@ -2,7 +2,12 @@ import * as types from '~/deploy_freeze/store/mutation_types';
 import mutations from '~/deploy_freeze/store/mutations';
 import state from '~/deploy_freeze/store/state';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { findTzByName, formatTz, freezePeriodsFixture, timezoneDataFixture } from '../helpers';
+import { formatTimezone } from '~/lib/utils/datetime_utility';
+import { freezePeriodsFixture } from '../helpers';
+import {
+  timezoneDataFixture,
+  findTzByName,
+} from '../../vue_shared/components/timezone_dropdown/helpers';
 
 describe('Deploy freeze mutations', () => {
   let stateCopy;
@@ -28,9 +33,9 @@ describe('Deploy freeze mutations', () => {
   describe('RECEIVE_FREEZE_PERIODS_SUCCESS', () => {
     it('should set freeze periods and format timezones from identifiers to names', () => {
       const timezoneNames = {
-        'Europe/Berlin': '[UTC 2] Berlin',
+        'Europe/Berlin': '[UTC + 2] Berlin',
         'Etc/UTC': '[UTC 0] UTC',
-        'America/New_York': '[UTC -4] Eastern Time (US & Canada)',
+        'America/New_York': '[UTC - 4] Eastern Time (US & Canada)',
       };
 
       mutations[types.RECEIVE_FREEZE_PERIODS_SUCCESS](stateCopy, freezePeriodsFixture);
@@ -51,7 +56,7 @@ describe('Deploy freeze mutations', () => {
     it('should set the cron timezone', () => {
       const selectedTz = findTzByName('Pacific Time (US & Canada)');
       const timezone = {
-        formattedTimezone: formatTz(selectedTz),
+        formattedTimezone: formatTimezone(selectedTz),
         identifier: selectedTz.identifier,
       };
       mutations[types.SET_SELECTED_TIMEZONE](stateCopy, timezone);
diff --git a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
new file mode 100644
index 00000000000..19e9ba8b268
--- /dev/null
+++ b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
@@ -0,0 +1,103 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { GlButton, GlFormCheckbox, GlFormInput, GlFormInputGroup, GlDatepicker } from '@gitlab/ui';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { TEST_HOST } from 'helpers/test_constants';
+import NewDeployToken from '~/deploy_tokens/components/new_deploy_token.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+const createNewTokenPath = `${TEST_HOST}/create`;
+const deployTokensHelpUrl = `${TEST_HOST}/help`;
+describe('New Deploy Token', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const defaults = {
+      containerRegistryEnabled: true,
+      packagesRegistryEnabled: true,
+      tokenType: 'project',
+    };
+    const { containerRegistryEnabled, packagesRegistryEnabled, tokenType } = {
+      ...defaults,
+      ...options,
+    };
+    return shallowMount(NewDeployToken, {
+      propsData: {
+        deployTokensHelpUrl,
+        containerRegistryEnabled,
+        packagesRegistryEnabled,
+        createNewTokenPath,
+        tokenType,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('without a container registry', () => {
+    beforeEach(() => {
+      wrapper = factory({ containerRegistryEnabled: false });
+    });
+
+    it('should not show the read registry scope', () => {
+      wrapper
+        .findAllComponents(GlFormCheckbox)
+        .wrappers.forEach((checkbox) => expect(checkbox.text()).not.toBe('read_registry'));
+    });
+  });
+
+  describe('with a container registry', () => {
+    beforeEach(() => {
+      wrapper = factory();
+    });
+
+    it('should show the read registry scope', () => {
+      const checkbox = wrapper.findAllComponents(GlFormCheckbox).at(1);
+      expect(checkbox.text()).toBe('read_registry');
+    });
+
+    it('should make a request to create a token on submit', () => {
+      const mockAxios = new MockAdapter(axios);
+
+      const date = new Date();
+      const formInputs = wrapper.findAllComponents(GlFormInput);
+      const name = formInputs.at(0);
+      const username = formInputs.at(2);
+      name.vm.$emit('input', 'test name');
+      username.vm.$emit('input', 'test username');
+
+      const datepicker = wrapper.findAllComponents(GlDatepicker).at(0);
+      datepicker.vm.$emit('input', date);
+
+      const [readRepo, readRegistry] = wrapper.findAllComponents(GlFormCheckbox).wrappers;
+      readRepo.vm.$emit('input', true);
+      readRegistry.vm.$emit('input', true);
+
+      mockAxios
+        .onPost(createNewTokenPath, {
+          deploy_token: {
+            name: 'test name',
+            expires_at: date.toISOString(),
+            username: 'test username',
+            read_repository: true,
+            read_registry: true,
+          },
+        })
+        .replyOnce(200, { username: 'test token username', token: 'test token' });
+
+      wrapper.findAllComponents(GlButton).at(0).vm.$emit('click');
+
+      return waitForPromises()
+        .then(() => nextTick())
+        .then(() => {
+          const [tokenUsername, tokenValue] = wrapper.findAllComponents(GlFormInputGroup).wrappers;
+
+          expect(tokenUsername.props('value')).toBe('test token username');
+          expect(tokenValue.props('value')).toBe('test token');
+        });
+    });
+  });
+});
diff --git a/spec/frontend/design_management/components/delete_button_spec.js b/spec/frontend/design_management/components/delete_button_spec.js
index cee1eec792d..426a61f5a47 100644
--- a/spec/frontend/design_management/components/delete_button_spec.js
+++ b/spec/frontend/design_management/components/delete_button_spec.js
@@ -29,12 +29,12 @@ describe('Batch delete button component', () => {
     createComponent();
 
     expect(findButton().exists()).toBe(true);
-    expect(findButton().attributes('disabled')).toBeFalsy();
+    expect(findButton().attributes('disabled')).toBeUndefined();
   });
 
   it('renders disabled button when design is deleting', () => {
     createComponent({ isDeleting: true });
-    expect(findButton().attributes('disabled')).toBeTruthy();
+    expect(findButton().attributes('disabled')).toBe('true');
   });
 
   it('emits `delete-selected-designs` event on modal ok click', async () => {
@@ -45,7 +45,7 @@ describe('Batch delete button component', () => {
     findModal().vm.$emit('ok');
 
     await nextTick();
-    expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
+    expect(wrapper.emitted('delete-selected-designs')).toHaveLength(1);
   });
 
   it('renders slot content', () => {
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 e36f5c79e3e..5fd61b25edc 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,16 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Autosave from '~/autosave';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 
-const showModal = jest.fn();
-
-const GlModal = {
-  template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>',
-  methods: {
-    show: showModal,
-  },
-};
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 
 describe('Design reply form component', () => {
   let wrapper;
@@ -19,7 +13,6 @@ describe('Design reply form component', () => {
   const findTextarea = () => wrapper.find('textarea');
   const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
   const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
-  const findModal = () => wrapper.findComponent({ ref: 'cancelCommentModal' });
 
   function createComponent(props = {}, mountOptions = {}) {
     wrapper = mount(DesignReplyForm, {
@@ -29,7 +22,6 @@ describe('Design reply form component', () => {
         noteableId: 'gid://gitlab/DesignManagement::Design/6',
         ...props,
       },
-      stubs: { GlModal },
       ...mountOptions,
     });
   }
@@ -42,6 +34,7 @@ describe('Design reply form component', () => {
   afterEach(() => {
     wrapper.destroy();
     window.gon = originalGon;
+    confirmAction.mockReset();
   });
 
   it('textarea has focus after component mount', () => {
@@ -102,7 +95,7 @@ describe('Design reply form component', () => {
     });
 
     it('submit button is disabled', () => {
-      expect(findSubmitButton().attributes().disabled).toBeTruthy();
+      expect(findSubmitButton().attributes().disabled).toBe('disabled');
     });
 
     it('does not emit submitForm event on textarea ctrl+enter keydown', async () => {
@@ -111,7 +104,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeFalsy();
+      expect(wrapper.emitted('submit-form')).toBeUndefined();
     });
 
     it('does not emit submitForm event on textarea meta+enter keydown', async () => {
@@ -120,13 +113,13 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeFalsy();
+      expect(wrapper.emitted('submit-form')).toBeUndefined();
     });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('emits cancelForm event on clicking Cancel button', () => {
@@ -144,7 +137,7 @@ describe('Design reply form component', () => {
     });
 
     it('submit button is enabled', () => {
-      expect(findSubmitButton().attributes().disabled).toBeFalsy();
+      expect(findSubmitButton().attributes().disabled).toBeUndefined();
     });
 
     it('emits submitForm event on Comment button click', async () => {
@@ -153,7 +146,7 @@ describe('Design reply form component', () => {
       findSubmitButton().vm.$emit('click');
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -165,7 +158,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -177,7 +170,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -185,13 +178,13 @@ describe('Design reply form component', () => {
       findTextarea().setValue('test2');
 
       await nextTick();
-      expect(wrapper.emitted('input')).toBeTruthy();
+      expect(wrapper.emitted('input')).toEqual([['test'], ['test2']]);
     });
 
     it('emits cancelForm event on Escape key if text was not changed', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('opens confirmation modal on Escape key when text has changed', async () => {
@@ -199,13 +192,13 @@ describe('Design reply form component', () => {
 
       await nextTick();
       findTextarea().trigger('keyup.esc');
-      expect(showModal).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
     });
 
     it('emits cancelForm event on Cancel button click if text was not changed', () => {
       findCancelButton().trigger('click');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('opens confirmation modal on Cancel button click when text has changed', async () => {
@@ -213,17 +206,41 @@ describe('Design reply form component', () => {
 
       await nextTick();
       findCancelButton().trigger('click');
-      expect(showModal).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
     });
 
-    it('emits cancelForm event on modal Ok button click', () => {
+    it('emits cancelForm event when confirmed', async () => {
+      confirmAction.mockResolvedValueOnce(true);
       const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
 
+      wrapper.setProps({ value: 'test3' });
+      await nextTick();
+
       findTextarea().trigger('keyup.esc');
-      findModal().vm.$emit('ok');
+      await nextTick();
+
+      expect(confirmAction).toHaveBeenCalled();
+      await nextTick();
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
+
+    it("doesn't emit cancelForm event when not confirmed", async () => {
+      confirmAction.mockResolvedValueOnce(false);
+      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+
+      wrapper.setProps({ value: 'test3' });
+      await nextTick();
+
+      findTextarea().trigger('keyup.esc');
+      await nextTick();
+
+      expect(confirmAction).toHaveBeenCalled();
+      await nextTick();
+
+      expect(wrapper.emitted('cancel-form')).toBeUndefined();
+      expect(autosaveResetSpy).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js
index 056959425a6..169f2dbdccb 100644
--- a/spec/frontend/design_management/components/design_overlay_spec.js
+++ b/spec/frontend/design_management/components/design_overlay_spec.js
@@ -170,6 +170,14 @@ describe('Design overlay component', () => {
     });
 
     it('should call an update active discussion mutation when clicking a note without moving it', async () => {
+      createComponent({
+        notes,
+        dimensions: {
+          width: 400,
+          height: 400,
+        },
+      });
+
       const note = notes[0];
       const { position } = note;
       const mutationVariables = {
diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js
index 774e37a8b21..a11463ab663 100644
--- a/spec/frontend/design_management/pages/design/index_spec.js
+++ b/spec/frontend/design_management/pages/design/index_spec.js
@@ -23,7 +23,7 @@ import {
   DESIGN_SNOWPLOW_EVENT_TYPES,
   DESIGN_SERVICE_PING_EVENT_TYPES,
 } from '~/design_management/utils/tracking';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import mockAllVersions from '../../mock_data/all_versions';
 import design from '../../mock_data/design';
 import mockResponseWithDesigns from '../../mock_data/designs';
@@ -301,8 +301,8 @@ describe('Design management design index page', () => {
 
         wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false });
         await nextTick();
-        expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR });
+        expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({ message: DESIGN_NOT_FOUND_ERROR });
         expect(router.push).toHaveBeenCalledTimes(1);
         expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
       });
@@ -323,8 +323,8 @@ describe('Design management design index page', () => {
 
         wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false });
         await nextTick();
-        expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR });
+        expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({ message: DESIGN_VERSION_NOT_EXIST_ERROR });
         expect(router.push).toHaveBeenCalledTimes(1);
         expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
       });
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 1033b509419..76ece922ded 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -29,7 +29,7 @@ import {
   DESIGN_TRACKING_PAGE_NAME,
   DESIGN_SNOWPLOW_EVENT_TYPES,
 } from '~/design_management/utils/tracking';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import {
   designListQueryResponse,
@@ -808,7 +808,7 @@ describe('Design management index page', () => {
       await moveDesigns(wrapper);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Houston, we have a problem' });
     });
 
     it('displays alert if mutation had a non-recoverable error', async () => {
diff --git a/spec/frontend/design_management/utils/cache_update_spec.js b/spec/frontend/design_management/utils/cache_update_spec.js
index 5e2c37e24a1..42777adfd58 100644
--- a/spec/frontend/design_management/utils/cache_update_spec.js
+++ b/spec/frontend/design_management/utils/cache_update_spec.js
@@ -10,7 +10,7 @@ import {
   ADD_IMAGE_DIFF_NOTE_ERROR,
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
 } from '~/design_management/utils/error_messages';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import design from '../mock_data/design';
 
 jest.mock('~/flash.js');
@@ -32,10 +32,10 @@ describe('Design Management cache update', () => {
       ${'updateStoreAfterUploadDesign'}        | ${updateStoreAfterUploadDesign}            | ${mockErrors[0]}                | ${[]}
       ${'updateStoreAfterUpdateImageDiffNote'} | ${updateStoreAfterRepositionImageDiffNote} | ${UPDATE_IMAGE_DIFF_NOTE_ERROR} | ${[]}
     `('$fnName handles errors in response', ({ subject, extraArgs, errorMessage }) => {
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(() => subject(mockStore, { errors: mockErrors }, {}, ...extraArgs)).toThrow();
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({ message: errorMessage });
+      expect(createAlert).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledWith({ message: errorMessage });
     });
   });
 });
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index b88206c3b9a..936f4744e94 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -152,6 +152,30 @@ describe('diffs/components/app', () => {
     });
   });
 
+  describe('fetch diff with no changes', () => {
+    beforeEach(() => {
+      const fetchResolver = () => {
+        store.state.diffs.retrievingBatches = false;
+        return Promise.resolve({ real_size: null });
+      };
+
+      createComponent();
+      jest.spyOn(wrapper.vm, 'fetchDiffFilesMeta').mockImplementation(fetchResolver);
+
+      return nextTick();
+    });
+
+    it('diff counter to be 0 after fetch', async () => {
+      expect(wrapper.vm.diffFilesLength).toEqual(0);
+      wrapper.vm.fetchData(false);
+
+      await nextTick();
+
+      expect(wrapper.vm.fetchDiffFilesMeta).toHaveBeenCalled();
+      expect(wrapper.vm.diffFilesLength).toEqual(0);
+    });
+  });
+
   describe('codequality diff', () => {
     it('does not fetch code quality data on FOSS', async () => {
       createComponent();
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index 440f169be86..75d55376d09 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -82,7 +82,7 @@ describe('diffs/components/commit_item', () => {
       const imgElement = avatarElement.find('img');
 
       expect(avatarElement.attributes('href')).toBe(commit.author.web_url);
-      expect(imgElement.classes()).toContain('s32');
+      expect(imgElement.classes()).toContain('gl-avatar-s32');
       expect(imgElement.attributes('alt')).toBe(commit.author.name);
       expect(imgElement.attributes('src')).toBe(commit.author.avatar_url);
     });
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index 9f593ee0d49..0bce6451ce4 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -53,7 +53,7 @@ describe('DiffContent', () => {
           namespaced: true,
           getters: {
             draftsForFile: () => () => true,
-            draftForLine: () => () => true,
+            draftsForLine: () => () => true,
             shouldRenderDraftRow: () => () => true,
             hasParallelDraftLeft: () => () => true,
             hasParallelDraftRight: () => () => true,
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index a74013dc2d4..a7a95ed2f35 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -219,7 +219,7 @@ describe('DiffRow', () => {
       shouldRenderDraftRow: jest.fn(),
       hasParallelDraftLeft: jest.fn(),
       hasParallelDraftRight: jest.fn(),
-      draftForLine: jest.fn(),
+      draftsForLine: jest.fn().mockReturnValue([]),
     };
 
     const applyMap = mapParallel(mockDiffContent);
diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
index 930b8bcdb08..8b25691ce34 100644
--- a/spec/frontend/diffs/components/diff_row_utils_spec.js
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -216,7 +216,7 @@ describe('mapParallel', () => {
       diffFile: {},
       hasParallelDraftLeft: () => false,
       hasParallelDraftRight: () => false,
-      draftForLine: () => ({}),
+      draftsForLine: () => [],
     };
     const line = { left: side, right: side };
     const expectation = {
@@ -234,13 +234,13 @@ describe('mapParallel', () => {
     const leftExpectation = {
       renderDiscussion: true,
       hasDraft: false,
-      lineDraft: {},
+      lineDrafts: [],
       hasCommentForm: true,
     };
     const rightExpectation = {
       renderDiscussion: false,
       hasDraft: false,
-      lineDraft: {},
+      lineDrafts: [],
       hasCommentForm: false,
     };
     const mapped = utils.mapParallel(content)(line);
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index 1dd4a2f6c23..9bff6bd14f1 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -21,7 +21,7 @@ describe('DiffView', () => {
       getters: {
         shouldRenderDraftRow: () => false,
         shouldRenderParallelDraftRow: () => () => true,
-        draftForLine: () => false,
+        draftsForLine: () => false,
         draftsForFile: () => false,
         hasParallelDraftLeft: () => false,
         hasParallelDraftRight: () => false,
@@ -75,12 +75,12 @@ describe('DiffView', () => {
   });
 
   it.each`
-    type          | side       | container | sides                                                                                                    | total
-    ${'parallel'} | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true }, right: { lineDraft: {}, renderDiscussion: true } }} | ${2}
-    ${'parallel'} | ${'right'} | ${'.new'} | ${{ left: { lineDraft: {}, renderDiscussion: true }, right: { lineDraft: {}, renderDiscussion: true } }} | ${2}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
-    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDraft: {}, renderDiscussion: true } }}                                                   | ${1}
+    type          | side       | container | sides                                                                                                      | total
+    ${'parallel'} | ${'left'}  | ${'.old'} | ${{ left: { lineDrafts: [], renderDiscussion: true }, right: { lineDrafts: [], renderDiscussion: true } }} | ${2}
+    ${'parallel'} | ${'right'} | ${'.new'} | ${{ left: { lineDrafts: [], renderDiscussion: true }, right: { lineDrafts: [], renderDiscussion: true } }} | ${2}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDrafts: [], renderDiscussion: true } }}                                                    | ${1}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDrafts: [], renderDiscussion: true } }}                                                    | ${1}
+    ${'inline'}   | ${'left'}  | ${'.old'} | ${{ left: { lineDrafts: [], renderDiscussion: true } }}                                                    | ${1}
   `(
     'renders a $type comment row with comment cell on $side',
     ({ type, container, sides, total }) => {
@@ -95,7 +95,7 @@ describe('DiffView', () => {
 
   it('renders a draft row', () => {
     const wrapper = createWrapper({
-      diffLines: [{ renderCommentRow: true, left: { lineDraft: { isDraft: true } } }],
+      diffLines: [{ renderCommentRow: true, left: { lineDrafts: [{ isDraft: true }] } }],
     });
     expect(wrapper.findComponent(DraftNote).exists()).toBe(true);
   });
diff --git a/spec/frontend/diffs/components/file_row_stats_spec.js b/spec/frontend/diffs/components/file_row_stats_spec.js
index 3f5a63c19e5..7d3b60d2ba4 100644
--- a/spec/frontend/diffs/components/file_row_stats_spec.js
+++ b/spec/frontend/diffs/components/file_row_stats_spec.js
@@ -2,13 +2,21 @@ import { mount } from '@vue/test-utils';
 import FileRowStats from '~/diffs/components/file_row_stats.vue';
 
 describe('Diff file row stats', () => {
-  const wrapper = mount(FileRowStats, {
-    propsData: {
-      file: {
-        addedLines: 20,
-        removedLines: 10,
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = mount(FileRowStats, {
+      propsData: {
+        file: {
+          addedLines: 20,
+          removedLines: 10,
+        },
       },
-    },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
   });
 
   it('renders added lines count', () => {
diff --git a/spec/frontend/diffs/mock_data/diff_code_quality.js b/spec/frontend/diffs/mock_data/diff_code_quality.js
index 2ca421a20b4..befab3b676b 100644
--- a/spec/frontend/diffs/mock_data/diff_code_quality.js
+++ b/spec/frontend/diffs/mock_data/diff_code_quality.js
@@ -36,7 +36,7 @@ export const diffCodeQuality = {
         old_line: 1,
         new_line: null,
         codequality: [],
-        lineDraft: {},
+        lineDrafts: [],
       },
     },
     {
@@ -45,7 +45,7 @@ export const diffCodeQuality = {
         old_line: 2,
         new_line: 1,
         codequality: [],
-        lineDraft: {},
+        lineDrafts: [],
       },
     },
     {
@@ -55,7 +55,7 @@ export const diffCodeQuality = {
         new_line: 2,
 
         codequality: [multipleFindingsArr[0]],
-        lineDraft: {},
+        lineDrafts: [],
       },
     },
   ],
diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js
index 346e43e5a72..bf75f956d7f 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -54,7 +54,7 @@ describe('DiffsStoreActions', () => {
     ['requestAnimationFrame', 'requestIdleCallback'].forEach((method) => {
       global[method] = originalMethods[method];
     });
-    createFlash.mockClear();
+    createAlert.mockClear();
     mock.restore();
   });
 
@@ -175,35 +175,10 @@ describe('DiffsStoreActions', () => {
         [{ type: 'startRenderDiffsQueue' }, { type: 'startRenderDiffsQueue' }],
       );
     });
-
-    it.each`
-      viewStyle     | otherView
-      ${'inline'}   | ${'parallel'}
-      ${'parallel'} | ${'inline'}
-    `(
-      'should make a request with the view parameter "$viewStyle" when the batchEndpoint already contains "$otherView"',
-      ({ viewStyle, otherView }) => {
-        const endpointBatch = '/fetch/diffs_batch';
-
-        diffActions
-          .fetchDiffFilesBatch({
-            commit: () => {},
-            state: {
-              endpointBatch: `${endpointBatch}?view=${otherView}`,
-              diffViewType: viewStyle,
-            },
-          })
-          .then(() => {
-            expect(mock.history.get[0].url).toContain(`view=${viewStyle}`);
-            expect(mock.history.get[0].url).not.toContain(`view=${otherView}`);
-          })
-          .catch(() => {});
-      },
-    );
   });
 
   describe('fetchDiffFilesMeta', () => {
-    const endpointMetadata = '/fetch/diffs_metadata.json?view=inline';
+    const endpointMetadata = '/fetch/diffs_metadata.json?view=inline&w=0';
     const noFilesData = { ...diffMetadata };
 
     beforeEach(() => {
@@ -216,7 +191,7 @@ describe('DiffsStoreActions', () => {
       return testAction(
         diffActions.fetchDiffFilesMeta,
         {},
-        { endpointMetadata, diffViewType: 'inline' },
+        { endpointMetadata, diffViewType: 'inline', showWhitespace: true },
         [
           { type: types.SET_LOADING, payload: true },
           { type: types.SET_LOADING, payload: false },
@@ -254,8 +229,8 @@ describe('DiffsStoreActions', () => {
       mock.onGet(endpointCoverage).reply(400);
 
       await testAction(diffActions.fetchCoverageFiles, {}, { endpointCoverage }, [], []);
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledWith({
         message: expect.stringMatching('Something went wrong'),
       });
     });
diff --git a/spec/frontend/editor/schema/ci/ci_schema_spec.js b/spec/frontend/editor/schema/ci/ci_schema_spec.js
index c9010fbec0c..fc86907c144 100644
--- a/spec/frontend/editor/schema/ci/ci_schema_spec.js
+++ b/spec/frontend/editor/schema/ci/ci_schema_spec.js
@@ -29,12 +29,36 @@ import CacheYaml from './yaml_tests/positive_tests/cache.yml';
 import FilterYaml from './yaml_tests/positive_tests/filter.yml';
 import IncludeYaml from './yaml_tests/positive_tests/include.yml';
 import RulesYaml from './yaml_tests/positive_tests/rules.yml';
+import ProjectPathYaml from './yaml_tests/positive_tests/project_path.yml';
+import VariablesYaml from './yaml_tests/positive_tests/variables.yml';
 
 // YAML NEGATIVE TEST
 import ArtifactsNegativeYaml from './yaml_tests/negative_tests/artifacts.yml';
 import CacheNegativeYaml from './yaml_tests/negative_tests/cache.yml';
 import IncludeNegativeYaml from './yaml_tests/negative_tests/include.yml';
 import RulesNegativeYaml from './yaml_tests/negative_tests/rules.yml';
+import VariablesNegativeYaml from './yaml_tests/negative_tests/variables.yml';
+
+import ProjectPathIncludeEmptyYaml from './yaml_tests/negative_tests/project_path/include/empty.yml';
+import ProjectPathIncludeInvalidVariableYaml from './yaml_tests/negative_tests/project_path/include/invalid_variable.yml';
+import ProjectPathIncludeLeadSlashYaml from './yaml_tests/negative_tests/project_path/include/leading_slash.yml';
+import ProjectPathIncludeNoSlashYaml from './yaml_tests/negative_tests/project_path/include/no_slash.yml';
+import ProjectPathIncludeTailSlashYaml from './yaml_tests/negative_tests/project_path/include/tailing_slash.yml';
+import ProjectPathTriggerIncludeEmptyYaml from './yaml_tests/negative_tests/project_path/trigger/include/empty.yml';
+import ProjectPathTriggerIncludeInvalidVariableYaml from './yaml_tests/negative_tests/project_path/trigger/include/invalid_variable.yml';
+import ProjectPathTriggerIncludeLeadSlashYaml from './yaml_tests/negative_tests/project_path/trigger/include/leading_slash.yml';
+import ProjectPathTriggerIncludeNoSlashYaml from './yaml_tests/negative_tests/project_path/trigger/include/no_slash.yml';
+import ProjectPathTriggerIncludeTailSlashYaml from './yaml_tests/negative_tests/project_path/trigger/include/tailing_slash.yml';
+import ProjectPathTriggerMinimalEmptyYaml from './yaml_tests/negative_tests/project_path/trigger/minimal/empty.yml';
+import ProjectPathTriggerMinimalInvalidVariableYaml from './yaml_tests/negative_tests/project_path/trigger/minimal/invalid_variable.yml';
+import ProjectPathTriggerMinimalLeadSlashYaml from './yaml_tests/negative_tests/project_path/trigger/minimal/leading_slash.yml';
+import ProjectPathTriggerMinimalNoSlashYaml from './yaml_tests/negative_tests/project_path/trigger/minimal/no_slash.yml';
+import ProjectPathTriggerMinimalTailSlashYaml from './yaml_tests/negative_tests/project_path/trigger/minimal/tailing_slash.yml';
+import ProjectPathTriggerProjectEmptyYaml from './yaml_tests/negative_tests/project_path/trigger/project/empty.yml';
+import ProjectPathTriggerProjectInvalidVariableYaml from './yaml_tests/negative_tests/project_path/trigger/project/invalid_variable.yml';
+import ProjectPathTriggerProjectLeadSlashYaml from './yaml_tests/negative_tests/project_path/trigger/project/leading_slash.yml';
+import ProjectPathTriggerProjectNoSlashYaml from './yaml_tests/negative_tests/project_path/trigger/project/no_slash.yml';
+import ProjectPathTriggerProjectTailSlashYaml from './yaml_tests/negative_tests/project_path/trigger/project/tailing_slash.yml';
 
 const ajv = new Ajv({
   strictTypes: false,
@@ -67,6 +91,8 @@ describe('positive tests', () => {
       FilterYaml,
       IncludeYaml,
       RulesYaml,
+      VariablesYaml,
+      ProjectPathYaml,
     }),
   )('schema validates %s', (_, input) => {
     expect(input).toValidateJsonSchema(schema);
@@ -90,6 +116,27 @@ describe('negative tests', () => {
       CacheNegativeYaml,
       IncludeNegativeYaml,
       RulesNegativeYaml,
+      VariablesNegativeYaml,
+      ProjectPathIncludeEmptyYaml,
+      ProjectPathIncludeInvalidVariableYaml,
+      ProjectPathIncludeLeadSlashYaml,
+      ProjectPathIncludeNoSlashYaml,
+      ProjectPathIncludeTailSlashYaml,
+      ProjectPathTriggerIncludeEmptyYaml,
+      ProjectPathTriggerIncludeInvalidVariableYaml,
+      ProjectPathTriggerIncludeLeadSlashYaml,
+      ProjectPathTriggerIncludeNoSlashYaml,
+      ProjectPathTriggerIncludeTailSlashYaml,
+      ProjectPathTriggerMinimalEmptyYaml,
+      ProjectPathTriggerMinimalInvalidVariableYaml,
+      ProjectPathTriggerMinimalLeadSlashYaml,
+      ProjectPathTriggerMinimalNoSlashYaml,
+      ProjectPathTriggerMinimalTailSlashYaml,
+      ProjectPathTriggerProjectEmptyYaml,
+      ProjectPathTriggerProjectInvalidVariableYaml,
+      ProjectPathTriggerProjectLeadSlashYaml,
+      ProjectPathTriggerProjectNoSlashYaml,
+      ProjectPathTriggerProjectTailSlashYaml,
     }),
   )('schema validates %s', (_, input) => {
     expect(input).not.toValidateJsonSchema(schema);
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/empty.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/empty.yml
new file mode 100644
index 00000000000..d9838fbb6fd
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/empty.yml
@@ -0,0 +1,3 @@
+include:
+  - project: ''
+    file: '/templates/.gitlab-ci-template.yml'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/invalid_variable.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/invalid_variable.yml
new file mode 100644
index 00000000000..32933f856c7
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/invalid_variable.yml
@@ -0,0 +1,3 @@
+include:
+  - project: 'slug#'
+    file: '/templates/.gitlab-ci-template.yml'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/leading_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/leading_slash.yml
new file mode 100644
index 00000000000..c463318be31
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/leading_slash.yml
@@ -0,0 +1,3 @@
+include:
+  - project: '/slug'
+    file: '/templates/.gitlab-ci-template.yml'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/no_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/no_slash.yml
new file mode 100644
index 00000000000..51194a1d40c
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/no_slash.yml
@@ -0,0 +1,3 @@
+include:
+  - project: 'slug'
+    file: '/templates/.gitlab-ci-template.yml'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/tailing_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/tailing_slash.yml
new file mode 100644
index 00000000000..91f258888d8
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/include/tailing_slash.yml
@@ -0,0 +1,3 @@
+include:
+  - project: 'slug/'
+    file: '/templates/.gitlab-ci-template.yml'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/empty.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/empty.yml
new file mode 100644
index 00000000000..ee2bb3e8ace
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/empty.yml
@@ -0,0 +1,5 @@
+trigger-include:
+  trigger:
+    include:
+      - file: '/path/to/child-pipeline.yml'
+        project: ''
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/invalid_variable.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/invalid_variable.yml
new file mode 100644
index 00000000000..770305be0dc
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/invalid_variable.yml
@@ -0,0 +1,5 @@
+trigger-include:
+  trigger:
+    include:
+      - file: '/path/to/child-pipeline.yml'
+        project: 'slug#'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/leading_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/leading_slash.yml
new file mode 100644
index 00000000000..82fd77cf0d3
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/leading_slash.yml
@@ -0,0 +1,5 @@
+trigger-include:
+  trigger:
+    include:
+      - file: '/path/to/child-pipeline.yml'
+        project: '/slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/no_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/no_slash.yml
new file mode 100644
index 00000000000..f4ea59c7945
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/no_slash.yml
@@ -0,0 +1,5 @@
+trigger-include:
+  trigger:
+    include:
+      - file: '/path/to/child-pipeline.yml'
+        project: 'slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/tailing_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/tailing_slash.yml
new file mode 100644
index 00000000000..a0195c03352
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/include/tailing_slash.yml
@@ -0,0 +1,5 @@
+trigger-include:
+  trigger:
+    include:
+      - file: '/path/to/child-pipeline.yml'
+        project: 'slug/'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/empty.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/empty.yml
new file mode 100644
index 00000000000..cad8dbbf430
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/empty.yml
@@ -0,0 +1,2 @@
+trigger-minimal:
+  trigger: ''
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/invalid_variable.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/invalid_variable.yml
new file mode 100644
index 00000000000..6ca37666d09
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/invalid_variable.yml
@@ -0,0 +1,2 @@
+trigger-minimal:
+  trigger: 'slug#'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/leading_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/leading_slash.yml
new file mode 100644
index 00000000000..9d7c6b44125
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/leading_slash.yml
@@ -0,0 +1,2 @@
+trigger-minimal:
+  trigger: '/slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/no_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/no_slash.yml
new file mode 100644
index 00000000000..acd047477c8
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/no_slash.yml
@@ -0,0 +1,2 @@
+trigger-minimal:
+  trigger: 'slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/tailing_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/tailing_slash.yml
new file mode 100644
index 00000000000..0fdd00da3de
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/minimal/tailing_slash.yml
@@ -0,0 +1,2 @@
+trigger-minimal:
+  trigger: 'slug/'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/empty.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/empty.yml
new file mode 100644
index 00000000000..0aa2330cecb
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/empty.yml
@@ -0,0 +1,3 @@
+trigger-project:
+  trigger:
+    project: ''
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/invalid_variable.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/invalid_variable.yml
new file mode 100644
index 00000000000..3c17ec62039
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/invalid_variable.yml
@@ -0,0 +1,3 @@
+trigger-project:
+  trigger:
+    project: 'slug#'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/leading_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/leading_slash.yml
new file mode 100644
index 00000000000..f9884603171
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/leading_slash.yml
@@ -0,0 +1,3 @@
+trigger-project:
+  trigger:
+    project: '/slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/no_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/no_slash.yml
new file mode 100644
index 00000000000..d89e09756eb
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/no_slash.yml
@@ -0,0 +1,3 @@
+trigger-project:
+  trigger:
+    project: 'slug'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/tailing_slash.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/tailing_slash.yml
new file mode 100644
index 00000000000..3c39d6be4cb
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/project_path/trigger/project/tailing_slash.yml
@@ -0,0 +1,3 @@
+trigger-project:
+  trigger:
+    project: 'slug/'
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/variables.yml b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/variables.yml
new file mode 100644
index 00000000000..a7f23cf0d73
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/negative_tests/variables.yml
@@ -0,0 +1,5 @@
+# invalid variable (unknown keyword is used)
+variables:
+  FOO:
+    value: BAR
+    desc: A single value variable
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/project_path.yml b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/project_path.yml
new file mode 100644
index 00000000000..8a12cdf4f15
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/project_path.yml
@@ -0,0 +1,101 @@
+# Covers https://gitlab.com/gitlab-org/gitlab/-/merge_requests/95469
+# Test cases:
+#  - include file from project
+#  - trigger pipeline from project, 3 forms (see schema at ci.json)
+#
+# Sub-cases - forms of project path:
+#  - common case:        group/project
+#  - sub-group:          group/sub-group/project
+#  - variable:           $FOO
+#  - variable in string: group/$VAR/project
+#  - invalid variable:   $.
+#    (testing regex, that does not validate variable names)
+
+# BEGIN CASE: include yml from project
+include:
+  - project: 'group/project'
+    file: '/templates/.gitlab-ci-template.yml'
+
+  - project: 'group/sub-group/project'
+    file: '/templates/.gitlab-ci-template.yml'
+
+  - project: '$FOO'
+    file: '/templates/.gitlab-ci-template.yml'
+
+  - project: 'group/$VAR/project'
+    file: '/templates/.gitlab-ci-template.yml'
+
+  - project: '$.'
+    file: '/templates/.gitlab-ci-template.yml'
+# END CASE
+
+# BEGIN CASE: trigger minimal
+trigger-minimal:
+  trigger: 'group/project'
+
+trigger-minimal-sub-group:
+  trigger: 'group/sub-group/project'
+
+trigger-minimal-variable:
+  trigger: '$FOO'
+
+trigger-minimal-variable-in-string:
+  trigger: 'group/$VAR/project'
+
+trigger-minimal-invalid-variable:
+  trigger: '$.'
+# END CASE
+
+# BEGIN CASE: trigger project
+trigger-project:
+  trigger:
+    project: 'group/project'
+
+trigger-project-sub-group:
+  trigger:
+    project: 'group/sub-group/project'
+
+trigger-project-variable:
+  trigger:
+    project: '$FOO'
+
+trigger-project-variable-in-string:
+  trigger:
+    project: 'group/$VAR/project'
+
+trigger-project-invalid-variable:
+  trigger:
+    project: '$.'
+# END CASE
+
+# BEGIN CASE: trigger file
+trigger-include:
+  trigger:
+    include:
+      - project: 'group/project'
+        file: '/path/to/child-pipeline.yml'
+
+trigger-include-sub-group:
+  trigger:
+    include:
+      - project: 'group/sub-group/project'
+        file: '/path/to/child-pipeline.yml'
+
+trigger-include-variable:
+  trigger:
+    include:
+      - project: '$FOO'
+        file: '/path/to/child-pipeline.yml'
+
+trigger-include-variable-in-string:
+  trigger:
+    include:
+      - project: 'group/$VAR/project'
+        file: '/path/to/child-pipeline.yml'
+
+trigger-include-invalid-variable:
+  trigger:
+    include:
+      - project: '$.'
+        file: '/path/to/child-pipeline.yml'
+# END CASE
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/rules.yml b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/rules.yml
index 37cae6b4264..ef604f707b5 100644
--- a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/rules.yml
+++ b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/rules.yml
@@ -15,7 +15,9 @@ rules:changes as array of strings:
 
 # valid workflow:rules:exists
 # valid rules:changes:path
+# valid workflow:name
 workflow:
+  name: 'Pipeline name'
   rules:
     - changes:
         paths:
diff --git a/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/variables.yml b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/variables.yml
new file mode 100644
index 00000000000..ee71087a72e
--- /dev/null
+++ b/spec/frontend/editor/schema/ci/yaml_tests/positive_tests/variables.yml
@@ -0,0 +1,8 @@
+variables:
+  TEST_VAR: "hello world!"
+  123456: "123456"
+  FOO:
+    value: "BAR"
+    description: "A single value variable"
+  DEPLOY_ENVIRONMENT:
+    description: "A multi-value variable"
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 9a14e1a55eb..21f8979f1a9 100644
--- a/spec/frontend/editor/source_editor_ci_schema_ext_spec.js
+++ b/spec/frontend/editor/source_editor_ci_schema_ext_spec.js
@@ -1,4 +1,4 @@
-import { languages } from 'monaco-editor';
+import { setDiagnosticsOptions } from 'monaco-yaml';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
@@ -52,16 +52,12 @@ describe('~/editor/editor_ci_config_ext', () => {
   });
 
   describe('registerCiSchema', () => {
-    beforeEach(() => {
-      jest.spyOn(languages.yaml.yamlDefaults, 'setDiagnosticsOptions');
-    });
-
     describe('register validations options with monaco for yaml language', () => {
       const mockProjectNamespace = 'namespace1';
       const mockProjectPath = 'project1';
 
       const getConfiguredYmlSchema = () => {
-        return languages.yaml.yamlDefaults.setDiagnosticsOptions.mock.calls[0][0].schemas[0];
+        return setDiagnosticsOptions.mock.calls[0][0].schemas[0];
       };
 
       it('with expected basic validation configuration', () => {
@@ -77,8 +73,8 @@ describe('~/editor/editor_ci_config_ext', () => {
           completion: true,
         };
 
-        expect(languages.yaml.yamlDefaults.setDiagnosticsOptions).toHaveBeenCalledTimes(1);
-        expect(languages.yaml.yamlDefaults.setDiagnosticsOptions).toHaveBeenCalledWith(
+        expect(setDiagnosticsOptions).toHaveBeenCalledTimes(1);
+        expect(setDiagnosticsOptions).toHaveBeenCalledWith(
           expect.objectContaining(expectedOptions),
         );
       });
diff --git a/spec/frontend/editor/source_editor_instance_spec.js b/spec/frontend/editor/source_editor_instance_spec.js
index 20ba23d56ff..89b5ad27690 100644
--- a/spec/frontend/editor/source_editor_instance_spec.js
+++ b/spec/frontend/editor/source_editor_instance_spec.js
@@ -160,7 +160,7 @@ describe('Source Editor Instance', () => {
   });
 
   describe('public API', () => {
-    it.each(['use', 'unuse'], 'provides "%s" as public method by default', (method) => {
+    it.each(['use', 'unuse'])('provides "%s" as public method by default', (method) => {
       seInstance = new SourceEditorInstance();
       expect(seInstance[method]).toBeDefined();
     });
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 fe20c23e4d7..1ff351b6554 100644
--- a/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
+++ b/spec/frontend/editor/source_editor_markdown_livepreview_ext_spec.js
@@ -12,7 +12,7 @@ import {
 } from '~/editor/constants';
 import { EditorMarkdownPreviewExtension } from '~/editor/extensions/source_editor_markdown_livepreview_ext';
 import SourceEditor from '~/editor/source_editor';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import syntaxHighlight from '~/syntax_highlight';
 import { spyOnApi } from './helpers';
@@ -279,7 +279,7 @@ describe('Markdown Live Preview Extension for Source Editor', () => {
       mockAxios.onPost().reply(500);
 
       await fetchPreview();
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/environments/delete_environment_modal_spec.js b/spec/frontend/environments/delete_environment_modal_spec.js
index 48e4f661c1d..cc18bf754eb 100644
--- a/spec/frontend/environments/delete_environment_modal_spec.js
+++ b/spec/frontend/environments/delete_environment_modal_spec.js
@@ -6,7 +6,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { resolvedEnvironment } from './graphql/mock_data';
 
 jest.mock('~/flash');
@@ -57,7 +57,7 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
 
     await nextTick();
 
-    expect(createFlash).not.toHaveBeenCalled();
+    expect(createAlert).not.toHaveBeenCalled();
 
     expect(deleteResolver).toHaveBeenCalledWith(
       expect.anything(),
@@ -76,7 +76,7 @@ describe('~/environments/components/delete_environment_modal.vue', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith(
+    expect(createAlert).toHaveBeenCalledWith(
       expect.objectContaining({
         message: s__(
           'Environments|An error occurred while deleting the environment. Check if the environment stopped; if not, stop it and try again.',
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js
index 0f2d6e95bf0..5ea23af4c16 100644
--- a/spec/frontend/environments/edit_environment_spec.js
+++ b/spec/frontend/environments/edit_environment_spec.js
@@ -3,7 +3,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -85,7 +85,7 @@ describe('~/environments/components/edit.vue', () => {
 
     await submitForm(expected, [400, { message: ['uh oh!'] }]);
 
-    expect(createFlash).toHaveBeenCalledWith({ message: 'uh oh!' });
+    expect(createAlert).toHaveBeenCalledWith({ message: 'uh oh!' });
     expect(showsLoading()).toBe(false);
   });
 
diff --git a/spec/frontend/environments/empty_state_spec.js b/spec/frontend/environments/empty_state_spec.js
index 974afc6d032..02cf2dc3c68 100644
--- a/spec/frontend/environments/empty_state_spec.js
+++ b/spec/frontend/environments/empty_state_spec.js
@@ -4,10 +4,21 @@ import EmptyState from '~/environments/components/empty_state.vue';
 import { ENVIRONMENTS_SCOPE } from '~/environments/constants';
 
 const HELP_PATH = '/help';
+const NEW_PATH = '/new';
 
 describe('~/environments/components/empty_state.vue', () => {
   let wrapper;
 
+  const findNewEnvironmentLink = () =>
+    wrapper.findByRole('link', {
+      name: s__('Environments|New environment'),
+    });
+
+  const findDocsLink = () =>
+    wrapper.findByRole('link', {
+      name: s__('Environments|How do I create an environment?'),
+    });
+
   const createWrapper = ({ propsData = {} } = {}) =>
     mountExtended(EmptyState, {
       propsData: {
@@ -15,6 +26,7 @@ describe('~/environments/components/empty_state.vue', () => {
         helpPath: HELP_PATH,
         ...propsData,
       },
+      provide: { newEnvironmentPath: NEW_PATH },
     });
 
   afterEach(() => {
@@ -44,10 +56,44 @@ describe('~/environments/components/empty_state.vue', () => {
   it('shows a link to the the help path', () => {
     wrapper = createWrapper();
 
-    const link = wrapper.findByRole('link', {
-      name: s__('Environments|How do I create an environment?'),
-    });
+    const link = findDocsLink();
 
     expect(link.attributes('href')).toBe(HELP_PATH);
   });
+
+  it('hides a link to creating a new environment', () => {
+    const link = findNewEnvironmentLink();
+
+    expect(link.exists()).toBe(false);
+  });
+
+  describe('with search term', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ propsData: { hasTerm: true } });
+    });
+
+    it('should show text about searching', () => {
+      const header = wrapper.findByRole('heading', {
+        name: s__('Environments|No results found'),
+      });
+
+      expect(header.exists()).toBe(true);
+
+      const text = wrapper.findByText(s__('Environments|Edit your search and try again'));
+
+      expect(text.exists()).toBe(true);
+    });
+
+    it('hides the documentation link', () => {
+      const link = findDocsLink();
+
+      expect(link.exists()).toBe(false);
+    });
+
+    it('shows a link to create a new environment', () => {
+      const link = findNewEnvironmentLink();
+
+      expect(link.attributes('href')).toBe(NEW_PATH);
+    });
+  });
 });
diff --git a/spec/frontend/environments/enable_review_app_modal_spec.js b/spec/frontend/environments/enable_review_app_modal_spec.js
index b6dac811ea6..7939bd600dc 100644
--- a/spec/frontend/environments/enable_review_app_modal_spec.js
+++ b/spec/frontend/environments/enable_review_app_modal_spec.js
@@ -1,7 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlModal } from '@gitlab/ui';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import EnableReviewAppButton from '~/environments/components/enable_review_app_modal.vue';
+import EnableReviewAppModal from '~/environments/components/enable_review_app_modal.vue';
+import { REVIEW_APP_MODAL_I18N as i18n } from '~/environments/constants';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 // hardcode uniqueId for determinism
@@ -9,10 +10,12 @@ jest.mock('lodash/uniqueId', () => (x) => `${x}77`);
 
 const EXPECTED_COPY_PRE_ID = 'enable-review-app-copy-string-77';
 
-describe('Enable Review App Button', () => {
+describe('Enable Review App Modal', () => {
   let wrapper;
   let modal;
 
+  const findInstructions = () => wrapper.findAll('ol li');
+  const findInstructionAt = (i) => wrapper.findAll('ol li').at(i);
   const findCopyString = () => wrapper.find(`#${EXPECTED_COPY_PRE_ID}`);
 
   afterEach(() => {
@@ -22,29 +25,31 @@ describe('Enable Review App Button', () => {
   describe('renders the modal', () => {
     beforeEach(() => {
       wrapper = extendedWrapper(
-        shallowMount(EnableReviewAppButton, {
+        shallowMount(EnableReviewAppModal, {
           propsData: {
             modalId: 'fake-id',
             visible: true,
           },
-          provide: {
-            defaultBranchName: 'main',
-          },
         }),
       );
 
       modal = wrapper.findComponent(GlModal);
     });
 
-    it('renders the defaultBranchName copy', () => {
-      expect(findCopyString().text()).toContain('- main');
+    it('displays instructions', () => {
+      expect(findInstructions().length).toBe(7);
+      expect(findInstructionAt(0).text()).toContain(i18n.instructions.step1);
+    });
+
+    it('renders the snippet to copy', () => {
+      expect(findCopyString().text()).toBe(wrapper.vm.modalInfoCopyStr);
     });
 
     it('renders the copyToClipboard button', () => {
       expect(wrapper.findComponent(ModalCopyButton).props()).toMatchObject({
         modalId: 'fake-id',
         target: `#${EXPECTED_COPY_PRE_ID}`,
-        title: 'Copy snippet text',
+        title: i18n.copyToClipboardText,
       });
     });
 
diff --git a/spec/frontend/environments/environment_external_url_spec.js b/spec/frontend/environments/environment_external_url_spec.js
index 4c133665979..5966993166b 100644
--- a/spec/frontend/environments/environment_external_url_spec.js
+++ b/spec/frontend/environments/environment_external_url_spec.js
@@ -1,16 +1,35 @@
 import { mount } from '@vue/test-utils';
+import { s__, __ } from '~/locale';
 import ExternalUrlComp from '~/environments/components/environment_external_url.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
 describe('External URL Component', () => {
   let wrapper;
-  const externalUrl = 'https://gitlab.com';
+  let externalUrl;
 
-  beforeEach(() => {
-    wrapper = mount(ExternalUrlComp, { propsData: { externalUrl } });
+  describe('with safe link', () => {
+    beforeEach(() => {
+      externalUrl = 'https://gitlab.com';
+      wrapper = mount(ExternalUrlComp, { propsData: { externalUrl } });
+    });
+
+    it('should link to the provided externalUrl prop', () => {
+      expect(wrapper.attributes('href')).toBe(externalUrl);
+      expect(wrapper.find('a').exists()).toBe(true);
+    });
   });
 
-  it('should link to the provided externalUrl prop', () => {
-    expect(wrapper.attributes('href')).toEqual(externalUrl);
-    expect(wrapper.find('a').exists()).toBe(true);
+  describe('with unsafe link', () => {
+    beforeEach(() => {
+      externalUrl = 'postgres://gitlab';
+      wrapper = mount(ExternalUrlComp, { propsData: { externalUrl } });
+    });
+
+    it('should show a copy button instead', () => {
+      const button = wrapper.findComponent(ModalCopyButton);
+      expect(button.props('text')).toBe(externalUrl);
+      expect(button.text()).toBe(__('Copy URL'));
+      expect(button.props('title')).toBe(s__('Environments|Copy live environment URL'));
+    });
   });
 });
diff --git a/spec/frontend/environments/environment_folder_spec.js b/spec/frontend/environments/environment_folder_spec.js
index 48624f2324b..a37515bc3f7 100644
--- a/spec/frontend/environments/environment_folder_spec.js
+++ b/spec/frontend/environments/environment_folder_spec.js
@@ -31,6 +31,7 @@ describe('~/environments/components/environments_folder.vue', () => {
       apolloProvider,
       propsData: {
         scope: 'available',
+        search: '',
         ...propsData,
       },
       stubs: { transition: stubTransition() },
@@ -137,13 +138,26 @@ describe('~/environments/components/environments_folder.vue', () => {
       expect(environmentFolderMock).toHaveBeenCalledTimes(1);
       expect(environmentFolderMock).toHaveBeenCalledWith(
         {},
-        {
-          environment: nestedEnvironment.latest,
-          scope,
-        },
+        expect.objectContaining({ scope }),
         expect.anything(),
         expect.anything(),
       );
     },
   );
+
+  it('should query for the entered parameter', async () => {
+    const search = 'hello';
+
+    wrapper = createWrapper({ nestedEnvironment, search }, createApolloProvider());
+
+    await nextTick();
+    await waitForPromises();
+
+    expect(environmentFolderMock).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ search }),
+      expect.anything(),
+      expect.anything(),
+    );
+  });
 });
diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
index aff54107d6b..65a9f2907d2 100644
--- a/spec/frontend/environments/environments_app_spec.js
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -71,7 +71,7 @@ describe('~/environments/components/environments_app.vue', () => {
       previousPage: 1,
       __typename: 'LocalPageInfo',
     },
-    location = '?scope=available&page=2',
+    location = '?scope=available&page=2&search=prod',
   }) => {
     setWindowLocation(location);
     environmentAppMock.mockReturnValue(environmentsApp);
@@ -104,7 +104,7 @@ describe('~/environments/components/environments_app.vue', () => {
     await createWrapperWithMocked({
       environmentsApp: resolvedEnvironmentsApp,
       folder: resolvedFolder,
-      location: '?scope=bad&page=2',
+      location: '?scope=bad&page=2&search=prod',
     });
 
     expect(environmentAppMock).toHaveBeenCalledWith(
@@ -350,7 +350,54 @@ describe('~/environments/components/environments_app.vue', () => {
       next.trigger('click');
 
       await nextTick();
-      expect(window.location.search).toBe('?scope=available&page=3');
+      expect(window.location.search).toBe('?scope=available&page=3&search=prod');
+    });
+  });
+
+  describe('search', () => {
+    let searchBox;
+
+    const waitForDebounce = async () => {
+      await nextTick();
+      jest.runOnlyPendingTimers();
+    };
+
+    beforeEach(async () => {
+      await createWrapperWithMocked({
+        environmentsApp: resolvedEnvironmentsApp,
+        folder: resolvedFolder,
+      });
+      searchBox = wrapper.findByRole('searchbox', {
+        name: s__('Environments|Search by environment name'),
+      });
+    });
+
+    it('should sync the query params to the new search', async () => {
+      searchBox.setValue('hello');
+
+      await waitForDebounce();
+
+      expect(window.location.search).toBe('?scope=available&page=1&search=hello');
+    });
+
+    it('should query for the entered parameter', async () => {
+      const search = 'hello';
+
+      searchBox.setValue(search);
+
+      await waitForDebounce();
+      await waitForPromises();
+
+      expect(environmentAppMock).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ search }),
+        expect.anything(),
+        expect.anything(),
+      );
+    });
+
+    it('should sync search term from query params on load', async () => {
+      expect(searchBox.element.value).toBe('prod');
     });
   });
 });
diff --git a/spec/frontend/environments/environments_detail_header_spec.js b/spec/frontend/environments/environments_detail_header_spec.js
index 4687119127d..1f233c05fbf 100644
--- a/spec/frontend/environments/environments_detail_header_spec.js
+++ b/spec/frontend/environments/environments_detail_header_spec.js
@@ -1,10 +1,12 @@
 import { GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { __, s__ } from '~/locale';
 import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
 import EnvironmentsDetailHeader from '~/environments/components/environments_detail_header.vue';
 import StopEnvironmentModal from '~/environments/components/stop_environment_modal.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { createEnvironment } from './mock_data';
 
 describe('Environments detail header component', () => {
@@ -243,4 +245,23 @@ describe('Environments detail header component', () => {
       expect(findDeleteEnvironmentModal().exists()).toBe(true);
     });
   });
+
+  describe('when the environment has an unsafe external url', () => {
+    const externalUrl = 'postgres://staging';
+
+    beforeEach(() => {
+      createWrapper({
+        props: {
+          environment: createEnvironment({ externalUrl }),
+        },
+      });
+    });
+
+    it('should show a copy button instead', () => {
+      const button = wrapper.findComponent(ModalCopyButton);
+      expect(button.props('title')).toBe(s__('Environments|Copy live environment URL'));
+      expect(button.props('text')).toBe(externalUrl);
+      expect(button.text()).toBe(__('Copy URL'));
+    });
+  });
 });
diff --git a/spec/frontend/environments/graphql/resolvers_spec.js b/spec/frontend/environments/graphql/resolvers_spec.js
index 26f0659204a..7684cca2303 100644
--- a/spec/frontend/environments/graphql/resolvers_spec.js
+++ b/spec/frontend/environments/graphql/resolvers_spec.js
@@ -41,11 +41,16 @@ describe('~/frontend/environments/graphql/resolvers', () => {
     it('should fetch environments and map them to frontend data', async () => {
       const cache = { writeQuery: jest.fn() };
       const scope = 'available';
+      const search = '';
       mock
-        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1 } })
+        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1, search } })
         .reply(200, environmentsApp, {});
 
-      const app = await mockResolvers.Query.environmentApp(null, { scope, page: 1 }, { cache });
+      const app = await mockResolvers.Query.environmentApp(
+        null,
+        { scope, page: 1, search },
+        { cache },
+      );
       expect(app).toEqual(resolvedEnvironmentsApp);
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pollIntervalQuery,
@@ -57,12 +62,12 @@ describe('~/frontend/environments/graphql/resolvers', () => {
       const scope = 'stopped';
       const interval = 3000;
       mock
-        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1 } })
+        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1, search: '' } })
         .reply(200, environmentsApp, {
           'poll-interval': interval,
         });
 
-      await mockResolvers.Query.environmentApp(null, { scope, page: 1 }, { cache });
+      await mockResolvers.Query.environmentApp(null, { scope, page: 1, search: '' }, { cache });
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pollIntervalQuery,
         data: { interval },
@@ -72,7 +77,7 @@ describe('~/frontend/environments/graphql/resolvers', () => {
       const cache = { writeQuery: jest.fn() };
       const scope = 'stopped';
       mock
-        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1 } })
+        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1, search: '' } })
         .reply(200, environmentsApp, {
           'x-next-page': '2',
           'x-page': '1',
@@ -82,7 +87,7 @@ describe('~/frontend/environments/graphql/resolvers', () => {
           'X-Total-Pages': '5',
         });
 
-      await mockResolvers.Query.environmentApp(null, { scope, page: 1 }, { cache });
+      await mockResolvers.Query.environmentApp(null, { scope, page: 1, search: '' }, { cache });
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pageInfoQuery,
         data: {
@@ -102,10 +107,10 @@ describe('~/frontend/environments/graphql/resolvers', () => {
       const cache = { writeQuery: jest.fn() };
       const scope = 'stopped';
       mock
-        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1 } })
+        .onGet(ENDPOINT, { params: { nested: true, scope, page: 1, search: '' } })
         .reply(200, environmentsApp, {});
 
-      await mockResolvers.Query.environmentApp(null, { scope, page: 1 }, { cache });
+      await mockResolvers.Query.environmentApp(null, { scope, page: 1, search: '' }, { cache });
       expect(cache.writeQuery).toHaveBeenCalledWith({
         query: pageInfoQuery,
         data: {
@@ -124,11 +129,14 @@ describe('~/frontend/environments/graphql/resolvers', () => {
   });
   describe('folder', () => {
     it('should fetch the folder url passed to it', async () => {
-      mock.onGet(ENDPOINT, { params: { per_page: 3, scope: 'available' } }).reply(200, folder);
+      mock
+        .onGet(ENDPOINT, { params: { per_page: 3, scope: 'available', search: '' } })
+        .reply(200, folder);
 
       const environmentFolder = await mockResolvers.Query.folder(null, {
         environment: { folderPath: ENDPOINT },
         scope: 'available',
+        search: '',
       });
 
       expect(environmentFolder).toEqual(resolvedFolder);
diff --git a/spec/frontend/environments/new_environment_spec.js b/spec/frontend/environments/new_environment_spec.js
index 2405cb82eac..6dd4eea7437 100644
--- a/spec/frontend/environments/new_environment_spec.js
+++ b/spec/frontend/environments/new_environment_spec.js
@@ -3,7 +3,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -94,7 +94,7 @@ describe('~/environments/components/new.vue', () => {
 
     await submitForm(expected, [400, { message: ['name taken'] }]);
 
-    expect(createFlash).toHaveBeenCalledWith({ message: 'name taken' });
+    expect(createAlert).toHaveBeenCalledWith({ message: 'name taken' });
     expect(showsLoading()).toBe(false);
   });
 });
diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 732eff65495..9d6e46be8c4 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -18,7 +18,7 @@ import {
   trackErrorDetailsViewsOptions,
   trackErrorStatusUpdateOptions,
 } from '~/error_tracking/utils';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/flash';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -144,7 +144,7 @@ describe('ErrorDetails', () => {
 
       await nextTick();
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(mocks.$apollo.queries.error.stopPolling).not.toHaveBeenCalled();
     });
 
@@ -156,9 +156,9 @@ describe('ErrorDetails', () => {
       await nextTick();
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
       expect(wrapper.findComponent(GlLink).exists()).toBe(false);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Could not connect to Sentry. Refresh the page to try again.',
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
       expect(mocks.$apollo.queries.error.stopPolling).toHaveBeenCalled();
     });
diff --git a/spec/frontend/error_tracking/store/actions_spec.js b/spec/frontend/error_tracking/store/actions_spec.js
index 6bac21341a7..8f085282f80 100644
--- a/spec/frontend/error_tracking/store/actions_spec.js
+++ b/spec/frontend/error_tracking/store/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/actions';
 import * as types from '~/error_tracking/store/mutation_types';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
 
@@ -20,7 +20,7 @@ describe('Sentry common store actions', () => {
 
   afterEach(() => {
     mock.restore();
-    createFlash.mockClear();
+    createAlert.mockClear();
   });
   const endpoint = '123/stacktrace';
   const redirectUrl = '/list';
@@ -49,7 +49,7 @@ describe('Sentry common store actions', () => {
       mock.onPut().reply(400, {});
       await testAction(actions.updateStatus, params, {}, [], []);
       expect(visitUrl).not.toHaveBeenCalled();
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
   });
 
diff --git a/spec/frontend/error_tracking/store/details/actions_spec.js b/spec/frontend/error_tracking/store/details/actions_spec.js
index a3a6f7cc309..1893d226270 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
 
@@ -19,7 +19,7 @@ describe('Sentry error details store actions', () => {
 
   afterEach(() => {
     mockedAdapter.restore();
-    createFlash.mockClear();
+    createAlert.mockClear();
     if (mockedRestart) {
       mockedRestart.mockRestore();
       mockedRestart = null;
@@ -53,7 +53,7 @@ describe('Sentry error details store actions', () => {
         [{ type: types.SET_LOADING_STACKTRACE, payload: false }],
         [],
       );
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
 
     it('should not restart polling when receiving an empty 204 response', async () => {
diff --git a/spec/frontend/error_tracking/store/list/actions_spec.js b/spec/frontend/error_tracking/store/list/actions_spec.js
index 7173f68bb96..2809bbe834e 100644
--- a/spec/frontend/error_tracking/store/list/actions_spec.js
+++ b/spec/frontend/error_tracking/store/list/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/list/actions';
 import * as types from '~/error_tracking/store/list/mutation_types';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 
@@ -51,7 +51,7 @@ describe('error tracking actions', () => {
         ],
         [],
       );
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
   });
 
diff --git a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
index b87571830ca..22bac3fca15 100644
--- a/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
+++ b/spec/frontend/feature_highlight/feature_highlight_helper_spec.js
@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import { dismiss } from '~/feature_highlight/feature_highlight_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 
@@ -32,7 +32,7 @@ describe('feature highlight helper', () => {
 
       await dismiss(endpoint, highlightId);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message:
           'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
       });
diff --git a/spec/frontend/fixtures/namespaces.rb b/spec/frontend/fixtures/namespaces.rb
index b11f661fe09..a3f295f4e66 100644
--- a/spec/frontend/fixtures/namespaces.rb
+++ b/spec/frontend/fixtures/namespaces.rb
@@ -7,38 +7,43 @@ RSpec.describe 'Jobs (JavaScript fixtures)' do
   include JavaScriptFixturesHelpers
   include GraphqlHelpers
 
-  describe GraphQL::Query, type: :request do
+  describe API::Projects, type: :request do
     let_it_be(:user) { create(:user) }
-    let_it_be(:groups) { create_list(:group, 4) }
 
-    before_all do
-      groups.each { |group| group.add_owner(user) }
-    end
+    describe 'transfer_locations' do
+      let_it_be(:groups) { create_list(:group, 4) }
+      let_it_be(:project) { create(:project, namespace: user.namespace) }
 
-    query_name = 'search_namespaces_where_user_can_transfer_projects'
-    query_extension = '.query.graphql'
+      before_all do
+        groups.each { |group| group.add_owner(user) }
+      end
 
-    full_input_path = "projects/settings/graphql/queries/#{query_name}#{query_extension}"
-    base_output_path = "graphql/projects/settings/#{query_name}"
+      it 'api/projects/transfer_locations_page_1.json' do
+        get api("/projects/#{project.id}/transfer_locations?per_page=2", user)
 
-    it "#{base_output_path}_page_1#{query_extension}.json" do
-      query = get_graphql_query_as_string(full_input_path)
+        expect(response).to be_successful
+      end
 
-      post_graphql(query, current_user: user, variables: { first: 2 })
+      it 'api/projects/transfer_locations_page_2.json' do
+        get api("/projects/#{project.id}/transfer_locations?per_page=2&page=2", user)
 
-      expect_graphql_errors_to_be_empty
+        expect(response).to be_successful
+      end
     end
+  end
+
+  describe GraphQL::Query, type: :request do
+    let_it_be(:user) { create(:user) }
+
+    query_name = 'current_user_namespace.query.graphql'
 
-    it "#{base_output_path}_page_2#{query_extension}.json" do
-      query = get_graphql_query_as_string(full_input_path)
+    input_path = "projects/settings/graphql/queries/#{query_name}"
+    output_path = "graphql/projects/settings/#{query_name}.json"
 
-      post_graphql(query, current_user: user, variables: { first: 2 })
+    it output_path do
+      query = get_graphql_query_as_string(input_path)
 
-      post_graphql(
-        query,
-        current_user: user,
-        variables: { first: 2, after: graphql_data_at('currentUser', 'groups', 'pageInfo', 'endCursor') }
-      )
+      post_graphql(query, current_user: user)
 
       expect_graphql_errors_to_be_empty
     end
diff --git a/spec/frontend/fixtures/pipeline_schedules.rb b/spec/frontend/fixtures/pipeline_schedules.rb
index 5b7a445557e..4de0bd762f8 100644
--- a/spec/frontend/fixtures/pipeline_schedules.rb
+++ b/spec/frontend/fixtures/pipeline_schedules.rb
@@ -2,40 +2,74 @@
 
 require 'spec_helper'
 
-RSpec.describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do
+RSpec.describe 'Pipeline schedules (JavaScript fixtures)' do
+  include ApiHelpers
   include JavaScriptFixturesHelpers
+  include GraphqlHelpers
 
   let(:namespace) { create(:namespace, name: 'frontend-fixtures' ) }
   let(:project) { create(:project, :public, :repository) }
   let(:user) { project.first_owner }
   let!(:pipeline_schedule) { create(:ci_pipeline_schedule, project: project, owner: user) }
+  let!(:pipeline_schedule_inactive) { create(:ci_pipeline_schedule, :inactive, project: project, owner: user) }
   let!(:pipeline_schedule_populated) { create(:ci_pipeline_schedule, project: project, owner: user) }
   let!(:pipeline_schedule_variable1) { create(:ci_pipeline_schedule_variable, key: 'foo', value: 'foovalue', pipeline_schedule: pipeline_schedule_populated) }
   let!(:pipeline_schedule_variable2) { create(:ci_pipeline_schedule_variable, key: 'bar', value: 'barvalue', pipeline_schedule: pipeline_schedule_populated) }
 
-  render_views
+  describe Projects::PipelineSchedulesController, type: :controller do
+    render_views
 
-  before do
-    sign_in(user)
-  end
+    before do
+      sign_in(user)
+      stub_feature_flags(pipeline_schedules_vue: false)
+    end
+
+    it 'pipeline_schedules/edit.html' do
+      get :edit, params: {
+        namespace_id: project.namespace.to_param,
+        project_id: project,
+        id: pipeline_schedule.id
+      }
+
+      expect(response).to be_successful
+    end
 
-  it 'pipeline_schedules/edit.html' do
-    get :edit, params: {
-      namespace_id: project.namespace.to_param,
-      project_id: project,
-      id: pipeline_schedule.id
-    }
+    it 'pipeline_schedules/edit_with_variables.html' do
+      get :edit, params: {
+        namespace_id: project.namespace.to_param,
+        project_id: project,
+        id: pipeline_schedule_populated.id
+      }
 
-    expect(response).to be_successful
+      expect(response).to be_successful
+    end
   end
 
-  it 'pipeline_schedules/edit_with_variables.html' do
-    get :edit, params: {
-      namespace_id: project.namespace.to_param,
-      project_id: project,
-      id: pipeline_schedule_populated.id
-    }
+  describe GraphQL::Query, type: :request do
+    before do
+      pipeline_schedule.pipelines << build(:ci_pipeline, project: project)
+    end
+
+    fixtures_path = 'graphql/pipeline_schedules/'
+    get_pipeline_schedules_query = 'get_pipeline_schedules.query.graphql'
+
+    let_it_be(:query) do
+      get_graphql_query_as_string("pipeline_schedules/graphql/queries/#{get_pipeline_schedules_query}")
+    end
+
+    it "#{fixtures_path}#{get_pipeline_schedules_query}.json" do
+      post_graphql(query, current_user: user, variables: { projectPath: project.full_path })
+
+      expect_graphql_errors_to_be_empty
+    end
+
+    it "#{fixtures_path}#{get_pipeline_schedules_query}.as_guest.json" do
+      guest = create(:user)
+      project.add_guest(user)
+
+      post_graphql(query, current_user: guest, variables: { projectPath: project.full_path })
 
-    expect(response).to be_successful
+      expect_graphql_errors_to_be_empty
+    end
   end
 end
diff --git a/spec/frontend/flash_spec.js b/spec/frontend/flash_spec.js
index e26c52f0bf7..a809bf248bf 100644
--- a/spec/frontend/flash_spec.js
+++ b/spec/frontend/flash_spec.js
@@ -285,6 +285,13 @@ describe('Flash', () => {
             expect(document.querySelector('.gl-alert')).toBeNull();
           });
 
+          it('does not crash if calling .dismiss() twice', () => {
+            alert = createAlert({ message: mockMessage });
+
+            alert.dismiss();
+            expect(() => alert.dismiss()).not.toThrow();
+          });
+
           it('calls onDismiss when dismissed', () => {
             const dismissHandler = jest.fn();
 
diff --git a/spec/frontend/grafana_integration/components/grafana_integration_spec.js b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
index d2111194097..021a3aa41ed 100644
--- a/spec/frontend/grafana_integration/components/grafana_integration_spec.js
+++ b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
@@ -3,7 +3,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
 import axios from '~/lib/utils/axios_utils';
@@ -30,7 +30,7 @@ describe('grafana integration component', () => {
   afterEach(() => {
     if (wrapper.destroy) {
       wrapper.destroy();
-      createFlash.mockReset();
+      createAlert.mockReset();
       refreshCurrentPage.mockReset();
     }
   });
@@ -113,7 +113,7 @@ describe('grafana integration component', () => {
 
         await nextTick();
         await jest.runAllTicks();
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: `There was an error saving your changes. ${message}`,
         });
       });
diff --git a/spec/frontend/groups/components/app_spec.js b/spec/frontend/groups/components/app_spec.js
index a4a7530184d..091ec17d58e 100644
--- a/spec/frontend/groups/components/app_spec.js
+++ b/spec/frontend/groups/components/app_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import appComponent from '~/groups/components/app.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
@@ -11,6 +11,7 @@ import eventHub from '~/groups/event_hub';
 import GroupsService from '~/groups/service/groups_service';
 import GroupsStore from '~/groups/store/groups_store';
 import EmptyState from '~/groups/components/empty_state.vue';
+import GroupsComponent from '~/groups/components/groups.vue';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtilities from '~/lib/utils/url_utility';
 import setWindowLocation from 'helpers/set_window_location_helper';
@@ -115,7 +116,7 @@ describe('AppComponent', () => {
         return vm.fetchGroups({}).then(() => {
           expect(vm.isLoading).toBe(false);
           expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'An error occurred. Please try again.',
           });
         });
@@ -326,7 +327,7 @@ describe('AppComponent', () => {
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
         return waitForPromises().then(() => {
           expect(vm.store.removeGroup).not.toHaveBeenCalled();
-          expect(createFlash).toHaveBeenCalledWith({ message });
+          expect(createAlert).toHaveBeenCalledWith({ message });
           expect(vm.targetGroup.isBeingRemoved).toBe(false);
         });
       });
@@ -341,7 +342,7 @@ describe('AppComponent', () => {
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(childGroupItem.leavePath);
         return waitForPromises().then(() => {
           expect(vm.store.removeGroup).not.toHaveBeenCalled();
-          expect(createFlash).toHaveBeenCalledWith({ message });
+          expect(createAlert).toHaveBeenCalledWith({ message });
           expect(vm.targetGroup.isBeingRemoved).toBe(false);
         });
       });
@@ -388,24 +389,27 @@ describe('AppComponent', () => {
       });
 
       describe.each`
-        action                      | groups        | fromSearch | renderEmptyState | expected
-        ${'subgroups_and_projects'} | ${[]}         | ${false}   | ${true}          | ${true}
-        ${''}                       | ${[]}         | ${false}   | ${true}          | ${false}
-        ${'subgroups_and_projects'} | ${mockGroups} | ${false}   | ${true}          | ${false}
-        ${'subgroups_and_projects'} | ${[]}         | ${true}    | ${true}          | ${false}
+        action                      | groups        | fromSearch | shouldRenderEmptyState | searchEmpty
+        ${'subgroups_and_projects'} | ${[]}         | ${false}   | ${true}                | ${false}
+        ${''}                       | ${[]}         | ${false}   | ${false}               | ${false}
+        ${'subgroups_and_projects'} | ${mockGroups} | ${false}   | ${false}               | ${false}
+        ${'subgroups_and_projects'} | ${[]}         | ${true}    | ${false}               | ${true}
       `(
-        'when `action` is $action, `groups` is $groups, `fromSearch` is $fromSearch, and `renderEmptyState` is $renderEmptyState',
-        ({ action, groups, fromSearch, renderEmptyState, expected }) => {
-          it(expected ? 'renders empty state' : 'does not render empty state', async () => {
+        'when `action` is $action, `groups` is $groups, and `fromSearch` is $fromSearch',
+        ({ action, groups, fromSearch, shouldRenderEmptyState, searchEmpty }) => {
+          it(`${shouldRenderEmptyState ? 'renders' : 'does not render'} empty state`, async () => {
             createShallowComponent({
-              propsData: { action, renderEmptyState },
+              propsData: { action, renderEmptyState: true },
             });
 
+            await waitForPromises();
+
             vm.updateGroups(groups, fromSearch);
 
             await nextTick();
 
-            expect(wrapper.findComponent(EmptyState).exists()).toBe(expected);
+            expect(wrapper.findComponent(EmptyState).exists()).toBe(shouldRenderEmptyState);
+            expect(wrapper.findComponent(GroupsComponent).props('searchEmpty')).toBe(searchEmpty);
           });
         },
       );
@@ -440,18 +444,10 @@ describe('AppComponent', () => {
       expect(eventHub.$on).toHaveBeenCalledWith('showLeaveGroupModal', expect.any(Function));
       expect(eventHub.$on).toHaveBeenCalledWith('updatePagination', expect.any(Function));
       expect(eventHub.$on).toHaveBeenCalledWith('updateGroups', expect.any(Function));
-    });
-
-    it('should initialize `searchEmptyMessage` prop with correct string when `hideProjects` is `false`', async () => {
-      createShallowComponent();
-      await nextTick();
-      expect(vm.searchEmptyMessage).toBe('No groups or projects matched your search');
-    });
-
-    it('should initialize `searchEmptyMessage` prop with correct string when `hideProjects` is `true`', async () => {
-      createShallowComponent({ propsData: { hideProjects: true } });
-      await nextTick();
-      expect(vm.searchEmptyMessage).toBe('No groups matched your search');
+      expect(eventHub.$on).toHaveBeenCalledWith(
+        'fetchFilteredAndSortedGroups',
+        expect.any(Function),
+      );
     });
   });
 
@@ -468,6 +464,46 @@ describe('AppComponent', () => {
       expect(eventHub.$off).toHaveBeenCalledWith('showLeaveGroupModal', expect.any(Function));
       expect(eventHub.$off).toHaveBeenCalledWith('updatePagination', expect.any(Function));
       expect(eventHub.$off).toHaveBeenCalledWith('updateGroups', expect.any(Function));
+      expect(eventHub.$off).toHaveBeenCalledWith(
+        'fetchFilteredAndSortedGroups',
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe('when `fetchFilteredAndSortedGroups` event is emitted', () => {
+    const search = 'Foo bar';
+    const sort = 'created_asc';
+    const emitFetchFilteredAndSortedGroups = () => {
+      eventHub.$emit('fetchFilteredAndSortedGroups', {
+        filterGroupsBy: search,
+        sortBy: sort,
+      });
+    };
+    let setPaginationInfoSpy;
+
+    beforeEach(() => {
+      setPaginationInfoSpy = jest.spyOn(GroupsStore.prototype, 'setPaginationInfo');
+      createShallowComponent();
+    });
+
+    it('renders loading icon', async () => {
+      emitFetchFilteredAndSortedGroups();
+      await nextTick();
+
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+    });
+
+    it('calls API with expected params', () => {
+      emitFetchFilteredAndSortedGroups();
+
+      expect(getGroupsSpy).toHaveBeenCalledWith(undefined, undefined, search, sort, undefined);
+    });
+
+    it('updates pagination', () => {
+      emitFetchFilteredAndSortedGroups();
+
+      expect(setPaginationInfoSpy).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/groups/components/group_item_spec.js b/spec/frontend/groups/components/group_item_spec.js
index 3aa66644c19..4570aa33a6c 100644
--- a/spec/frontend/groups/components/group_item_spec.js
+++ b/spec/frontend/groups/components/group_item_spec.js
@@ -245,19 +245,14 @@ describe('GroupItemComponent', () => {
       expect(vm.$el.querySelector('.group-list-tree')).toBeDefined();
     });
   });
+
   describe('schema.org props', () => {
     describe('when showSchemaMarkup is disabled on the group', () => {
-      it.each(['itemprop', 'itemtype', 'itemscope'], 'it does not set %s', (attr) => {
+      it.each(['itemprop', 'itemtype', 'itemscope'])('does not set %s', (attr) => {
         expect(wrapper.attributes(attr)).toBeUndefined();
       });
-      it.each(
-        ['.js-group-avatar', '.js-group-name', '.js-group-description'],
-        'it does not set `itemprop` on sub-nodes',
-        (selector) => {
-          expect(wrapper.find(selector).attributes('itemprop')).toBeUndefined();
-        },
-      );
     });
+
     describe('when group has microdata', () => {
       beforeEach(() => {
         const group = withMicrodata({
diff --git a/spec/frontend/groups/components/groups_spec.js b/spec/frontend/groups/components/groups_spec.js
index 866868eff36..0cbb6cc8309 100644
--- a/spec/frontend/groups/components/groups_spec.js
+++ b/spec/frontend/groups/components/groups_spec.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { GlEmptyState } from '@gitlab/ui';
 
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import GroupFolderComponent from '~/groups/components/group_folder.vue';
@@ -15,7 +16,6 @@ describe('GroupsComponent', () => {
   const defaultPropsData = {
     groups: mockGroups,
     pageInfo: mockPageInfo,
-    searchEmptyMessage: 'No matching results',
     searchEmpty: false,
   };
 
@@ -67,13 +67,16 @@ describe('GroupsComponent', () => {
 
       expect(wrapper.findComponent(GroupFolderComponent).exists()).toBe(true);
       expect(findPaginationLinks().exists()).toBe(true);
-      expect(wrapper.findByText(defaultPropsData.searchEmptyMessage).exists()).toBe(false);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
     });
 
     it('should render empty search message when `searchEmpty` is `true`', () => {
       createComponent({ propsData: { searchEmpty: true } });
 
-      expect(wrapper.findByText(defaultPropsData.searchEmptyMessage).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).props()).toMatchObject({
+        title: GroupsComponent.i18n.emptyStateTitle,
+        description: GroupsComponent.i18n.emptyStateDescription,
+      });
     });
   });
 });
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
new file mode 100644
index 00000000000..db9a5c7b16b
--- /dev/null
+++ b/spec/frontend/groups/components/new_top_level_group_alert_spec.js
@@ -0,0 +1,75 @@
+import { shallowMount } from '@vue/test-utils';
+import NewTopLevelGroupAlert from '~/groups/components/new_top_level_group_alert.vue';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+describe('NewTopLevelGroupAlert', () => {
+  let wrapper;
+  let userCalloutDismissSpy;
+
+  const findAlert = () => wrapper.findComponent({ ref: 'newTopLevelAlert' });
+  const createSubGroupPath = '/groups/new?parent_id=1#create-group-pane';
+
+  const createComponent = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
+    wrapper = shallowMount(NewTopLevelGroupAlert, {
+      provide: {
+        createSubGroupPath,
+      },
+      stubs: {
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when the component is created', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: true,
+      });
+    });
+
+    it('renders a button with a link to create a new sub-group', () => {
+      expect(findAlert().props('primaryButtonText')).toBe(
+        NewTopLevelGroupAlert.i18n.primaryBtnText,
+      );
+      expect(findAlert().props('primaryButtonLink')).toBe(
+        helpPagePath('user/group/subgroups/index'),
+      );
+    });
+  });
+
+  describe('dismissing the alert', () => {
+    beforeEach(() => {
+      findAlert().vm.$emit('dismiss');
+    });
+
+    it('calls the dismiss callback', () => {
+      expect(userCalloutDismissSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the alert has been dismissed', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: false,
+      });
+    });
+
+    it('does not show the alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/groups/components/overview_tabs_spec.js b/spec/frontend/groups/components/overview_tabs_spec.js
index 352bf25b84f..93e087e10f2 100644
--- a/spec/frontend/groups/components/overview_tabs_spec.js
+++ b/spec/frontend/groups/components/overview_tabs_spec.js
@@ -1,28 +1,46 @@
-import { GlTab } from '@gitlab/ui';
+import { GlSorting, GlSortingItem, GlTab } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import { createLocalVue } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import OverviewTabs from '~/groups/components/overview_tabs.vue';
 import GroupsApp from '~/groups/components/app.vue';
+import GroupFolderComponent from '~/groups/components/group_folder.vue';
 import GroupsStore from '~/groups/store/groups_store';
 import GroupsService from '~/groups/service/groups_service';
 import { createRouter } from '~/groups/init_overview_tabs';
+import eventHub from '~/groups/event_hub';
 import {
   ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
   ACTIVE_TAB_SHARED,
   ACTIVE_TAB_ARCHIVED,
+  OVERVIEW_TABS_SORTING_ITEMS,
 } from '~/groups/constants';
 import axios from '~/lib/utils/axios_utils';
 
+const localVue = createLocalVue();
+localVue.component('GroupFolder', GroupFolderComponent);
 const router = createRouter();
+const [SORTING_ITEM_NAME, , SORTING_ITEM_UPDATED] = OVERVIEW_TABS_SORTING_ITEMS;
 
 describe('OverviewTabs', () => {
   let wrapper;
+  let axiosMock;
 
-  const endpoints = {
-    subgroups_and_projects: '/groups/foobar/-/children.json',
-    shared: '/groups/foobar/-/shared_projects.json',
-    archived: '/groups/foobar/-/children.json?archived=only',
+  const defaultProvide = {
+    endpoints: {
+      subgroups_and_projects: '/groups/foobar/-/children.json',
+      shared: '/groups/foobar/-/shared_projects.json',
+      archived: '/groups/foobar/-/children.json?archived=only',
+    },
+    newSubgroupPath: '/groups/new',
+    newProjectPath: 'projects/new',
+    newSubgroupIllustration: '',
+    newProjectIllustration: '',
+    emptySubgroupIllustration: '',
+    canCreateSubgroups: false,
+    canCreateProjects: false,
+    initialSort: 'name_asc',
   };
 
   const routerMock = {
@@ -31,12 +49,15 @@ describe('OverviewTabs', () => {
 
   const createComponent = async ({
     route = { name: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS, params: { group: 'foo/bar/baz' } },
+    provide = {},
   } = {}) => {
     wrapper = mountExtended(OverviewTabs, {
       router,
       provide: {
-        endpoints,
+        ...defaultProvide,
+        ...provide,
       },
+      localVue,
       mocks: { $route: route, $router: routerMock },
     });
 
@@ -47,13 +68,13 @@ describe('OverviewTabs', () => {
   const findTab = (name) => wrapper.findByRole('tab', { name });
   const findSelectedTab = () => wrapper.findByRole('tab', { selected: true });
 
-  afterEach(() => {
-    wrapper.destroy();
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
   });
 
-  beforeEach(async () => {
-    // eslint-disable-next-line no-new
-    new AxiosMockAdapter(axios);
+  afterEach(() => {
+    wrapper.destroy();
+    axiosMock.restore();
   });
 
   it('renders `Subgroups and projects` tab with `GroupsApp` component', async () => {
@@ -68,7 +89,7 @@ describe('OverviewTabs', () => {
     expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
       action: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
       store: new GroupsStore({ showSchemaMarkup: true }),
-      service: new GroupsService(endpoints[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]),
+      service: new GroupsService(defaultProvide.endpoints[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]),
       hideProjects: false,
       renderEmptyState: true,
     });
@@ -89,7 +110,7 @@ describe('OverviewTabs', () => {
     expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
       action: ACTIVE_TAB_SHARED,
       store: new GroupsStore(),
-      service: new GroupsService(endpoints[ACTIVE_TAB_SHARED]),
+      service: new GroupsService(defaultProvide.endpoints[ACTIVE_TAB_SHARED]),
       hideProjects: false,
       renderEmptyState: false,
     });
@@ -112,7 +133,7 @@ describe('OverviewTabs', () => {
     expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
       action: ACTIVE_TAB_ARCHIVED,
       store: new GroupsStore(),
-      service: new GroupsService(endpoints[ACTIVE_TAB_ARCHIVED]),
+      service: new GroupsService(defaultProvide.endpoints[ACTIVE_TAB_ARCHIVED]),
       hideProjects: false,
       renderEmptyState: false,
     });
@@ -120,6 +141,14 @@ describe('OverviewTabs', () => {
     expect(tabPanel.vm.$attrs.lazy).toBe(false);
   });
 
+  it('sets `lazy` prop to `false` for initially active tab and `true` for all other tabs', async () => {
+    await createComponent({ route: { name: ACTIVE_TAB_SHARED, params: { group: 'foo/bar' } } });
+
+    expect(findTabPanels().at(0).vm.$attrs.lazy).toBe(true);
+    expect(findTabPanels().at(1).vm.$attrs.lazy).toBe(false);
+    expect(findTabPanels().at(2).vm.$attrs.lazy).toBe(true);
+  });
+
   describe.each([
     [
       { name: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS, params: { group: 'foo/bar/baz' } },
@@ -184,4 +213,109 @@ describe('OverviewTabs', () => {
       expect(routerMock.push).toHaveBeenCalledWith(expectedRoute);
     });
   });
+
+  describe('searching and sorting', () => {
+    const setup = async () => {
+      jest.spyOn(eventHub, '$emit');
+      await createComponent();
+
+      // Click through tabs so they are all loaded
+      await findTab(OverviewTabs.i18n[ACTIVE_TAB_SHARED]).trigger('click');
+      await findTab(OverviewTabs.i18n[ACTIVE_TAB_ARCHIVED]).trigger('click');
+      await findTab(OverviewTabs.i18n[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]).trigger('click');
+    };
+
+    const sharedAssertions = ({ search, sort }) => {
+      it('sets `lazy` prop to `true` for all of the non-active tabs so they are reloaded after sort or search is applied', () => {
+        expect(findTabPanels().at(0).vm.$attrs.lazy).toBe(false);
+        expect(findTabPanels().at(1).vm.$attrs.lazy).toBe(true);
+        expect(findTabPanels().at(2).vm.$attrs.lazy).toBe(true);
+      });
+
+      it('emits `fetchFilteredAndSortedGroups` event from `eventHub`', () => {
+        expect(eventHub.$emit).toHaveBeenCalledWith(
+          `${ACTIVE_TAB_SUBGROUPS_AND_PROJECTS}fetchFilteredAndSortedGroups`,
+          {
+            filterGroupsBy: search,
+            sortBy: sort,
+          },
+        );
+      });
+    };
+
+    describe('when search is typed in', () => {
+      const search = 'Foo bar';
+
+      beforeEach(async () => {
+        await setup();
+        await wrapper.findByPlaceholderText(OverviewTabs.i18n.searchPlaceholder).setValue(search);
+      });
+
+      it('updates query string with `filter` key', () => {
+        expect(routerMock.push).toHaveBeenCalledWith({ query: { filter: search } });
+      });
+
+      sharedAssertions({ search, sort: defaultProvide.initialSort });
+    });
+
+    describe('when sort is changed', () => {
+      beforeEach(async () => {
+        await setup();
+        wrapper.findAllComponents(GlSortingItem).at(2).vm.$emit('click');
+        await nextTick();
+      });
+
+      it('updates query string with `sort` key', () => {
+        expect(routerMock.push).toHaveBeenCalledWith({
+          query: { sort: SORTING_ITEM_UPDATED.asc },
+        });
+      });
+
+      sharedAssertions({ search: '', sort: SORTING_ITEM_UPDATED.asc });
+    });
+
+    describe('when sort direction is changed', () => {
+      beforeEach(async () => {
+        await setup();
+        await wrapper
+          .findByRole('button', { name: 'Sorting Direction: Ascending' })
+          .trigger('click');
+      });
+
+      it('updates query string with `sort` key', () => {
+        expect(routerMock.push).toHaveBeenCalledWith({
+          query: { sort: SORTING_ITEM_NAME.desc },
+        });
+      });
+
+      sharedAssertions({ search: '', sort: SORTING_ITEM_NAME.desc });
+    });
+
+    describe('when `filter` and `sort` query strings are set', () => {
+      beforeEach(async () => {
+        await createComponent({
+          route: {
+            name: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+            params: { group: 'foo/bar/baz' },
+            query: { filter: 'Foo bar', sort: SORTING_ITEM_UPDATED.desc },
+          },
+        });
+      });
+
+      it('sets value of search input', () => {
+        expect(
+          wrapper.findByPlaceholderText(OverviewTabs.i18n.searchPlaceholder).element.value,
+        ).toBe('Foo bar');
+      });
+
+      it('sets sort dropdown', () => {
+        expect(wrapper.findComponent(GlSorting).props()).toMatchObject({
+          text: SORTING_ITEM_UPDATED.label,
+          isAscending: false,
+        });
+
+        expect(wrapper.findAllComponents(GlSortingItem).at(2).vm.$attrs.active).toBe(true);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/groups/components/transfer_group_form_spec.js b/spec/frontend/groups/components/transfer_group_form_spec.js
index 8cfe8ce8e18..7cbe6e5bbab 100644
--- a/spec/frontend/groups/components/transfer_group_form_spec.js
+++ b/spec/frontend/groups/components/transfer_group_form_spec.js
@@ -2,7 +2,7 @@ import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Component from '~/groups/components/transfer_group_form.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 
 describe('Transfer group form', () => {
   let wrapper;
diff --git a/spec/frontend/groups/store/groups_store_spec.js b/spec/frontend/groups/store/groups_store_spec.js
index 8ac5d7099f1..ce1791d0062 100644
--- a/spec/frontend/groups/store/groups_store_spec.js
+++ b/spec/frontend/groups/store/groups_store_spec.js
@@ -16,13 +16,13 @@ describe('ProjectsStore', () => {
       store = new GroupsStore();
 
       expect(Object.keys(store.state).length).toBe(2);
-      expect(Array.isArray(store.state.groups)).toBeTruthy();
+      expect(Array.isArray(store.state.groups)).toBe(true);
       expect(Object.keys(store.state.pageInfo).length).toBe(0);
-      expect(store.hideProjects).toBeFalsy();
+      expect(store.hideProjects).toBe(false);
 
       store = new GroupsStore({ hideProjects: true });
 
-      expect(store.hideProjects).toBeTruthy();
+      expect(store.hideProjects).toBe(true);
     });
   });
 
@@ -65,8 +65,8 @@ describe('ProjectsStore', () => {
       expect(store.formatGroupItem).toHaveBeenCalledWith(expect.any(Object));
       expect(mockParentGroupItem.children.length).toBe(1);
       expect(Object.keys(mockParentGroupItem.children[0]).indexOf('fullName')).toBeGreaterThan(-1);
-      expect(mockParentGroupItem.isOpen).toBeTruthy();
-      expect(mockParentGroupItem.isChildrenLoading).toBeFalsy();
+      expect(mockParentGroupItem.isOpen).toBe(true);
+      expect(mockParentGroupItem.isChildrenLoading).toBe(false);
     });
   });
 
diff --git a/spec/frontend/header_search/components/app_spec.js b/spec/frontend/header_search/components/app_spec.js
index 6a138f9a247..b0bfe2b45f0 100644
--- a/spec/frontend/header_search/components/app_spec.js
+++ b/spec/frontend/header_search/components/app_spec.js
@@ -2,6 +2,7 @@ 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 '~/header_search/components/app.vue';
 import HeaderSearchAutocompleteItems from '~/header_search/components/header_search_autocomplete_items.vue';
@@ -360,22 +361,43 @@ describe('HeaderSearchApp', () => {
 
     describe('Header Search Input', () => {
       describe('when dropdown is closed', () => {
-        it('onFocus opens dropdown', async () => {
+        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: 'top_navigation',
+          });
         });
 
-        it('onClick opens dropdown', async () => {
+        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: 'top_navigation',
+          });
+        });
+
+        it('onClick followed by onFocus only triggers a single snowplow event', async () => {
+          findHeaderSearchInput().vm.$emit('click');
+          findHeaderSearchInput().vm.$emit('focus');
+
+          expect(trackingSpy).toHaveBeenCalledTimes(1);
         });
       });
 
diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
index c9425f6c9cd..dc103fec5d0 100644
--- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js
@@ -1,7 +1,7 @@
 import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { projectData, branches } from 'jest/ide/mock_data';
-import commitActions from '~/ide/components/commit_sidebar/actions.vue';
+import CommitActions from '~/ide/components/commit_sidebar/actions.vue';
 import { createStore } from '~/ide/stores';
 import {
   COMMIT_TO_NEW_BRANCH,
@@ -18,32 +18,27 @@ const BRANCH_REGULAR_NO_ACCESS = 'regular/no-access';
 
 describe('IDE commit sidebar actions', () => {
   let store;
-  let vm;
+  let wrapper;
 
   const createComponent = ({ hasMR = false, currentBranchId = 'main', emptyRepo = false } = {}) => {
-    const Component = Vue.extend(commitActions);
-
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.currentBranchId = currentBranchId;
-    vm.$store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = currentBranchId;
+    store.state.currentProjectId = 'abcproject';
 
     const proj = { ...projectData };
     proj.branches[currentBranchId] = branches.find((branch) => branch.name === currentBranchId);
     proj.empty_repo = emptyRepo;
 
-    Vue.set(vm.$store.state.projects, 'abcproject', proj);
+    Vue.set(store.state.projects, 'abcproject', proj);
 
     if (hasMR) {
-      vm.$store.state.currentMergeRequestId = '1';
-      vm.$store.state.projects[store.state.currentProjectId].mergeRequests[
+      store.state.currentMergeRequestId = '1';
+      store.state.projects[store.state.currentProjectId].mergeRequests[
         store.state.currentMergeRequestId
       ] = { foo: 'bar' };
     }
 
-    vm.$mount();
-
-    return vm;
+    wrapper = mount(CommitActions, { store });
+    return wrapper;
   };
 
   beforeEach(() => {
@@ -52,17 +47,16 @@ describe('IDE commit sidebar actions', () => {
   });
 
   afterEach(() => {
-    vm.$destroy();
-    vm = null;
+    wrapper.destroy();
   });
 
-  const findText = () => vm.$el.textContent;
-  const findRadios = () => Array.from(vm.$el.querySelectorAll('input[type="radio"]'));
+  const findText = () => wrapper.text();
+  const findRadios = () => wrapper.findAll('input[type="radio"]');
 
   it('renders 2 groups', () => {
     createComponent();
 
-    expect(findRadios().length).toBe(2);
+    expect(findRadios()).toHaveLength(2);
   });
 
   it('renders current branch text', () => {
@@ -79,41 +73,38 @@ describe('IDE commit sidebar actions', () => {
     expect(findText()).not.toContain('Create a new branch and merge request');
   });
 
-  describe('currentBranchText', () => {
-    it('escapes current branch', () => {
-      const injectedSrc = '<img src="x" />';
-      createComponent({ currentBranchId: injectedSrc });
+  it('escapes current branch name', () => {
+    const injectedSrc = '<img src="x" />';
+    const escapedSrc = '&lt;img src=&quot;x&quot; /&gt';
+    createComponent({ currentBranchId: injectedSrc });
 
-      expect(vm.currentBranchText).not.toContain(injectedSrc);
-    });
+    expect(wrapper.text()).not.toContain(injectedSrc);
+    expect(wrapper.text).not.toContain(escapedSrc);
   });
 
   describe('updateSelectedCommitAction', () => {
     it('does not return anything if currentBranch does not exist', () => {
       createComponent({ currentBranchId: null });
 
-      expect(vm.$store.dispatch).not.toHaveBeenCalled();
+      expect(store.dispatch).not.toHaveBeenCalled();
     });
 
     it('is not called on mount if there is already a selected commitAction', () => {
       store.state.commitAction = '1';
       createComponent({ currentBranchId: null });
 
-      expect(vm.$store.dispatch).not.toHaveBeenCalled();
+      expect(store.dispatch).not.toHaveBeenCalled();
     });
 
     it('calls again after staged changes', async () => {
       createComponent({ currentBranchId: null });
 
-      vm.$store.state.currentBranchId = 'main';
-      vm.$store.state.changedFiles.push({});
-      vm.$store.state.stagedFiles.push({});
+      store.state.currentBranchId = 'main';
+      store.state.changedFiles.push({});
+      store.state.stagedFiles.push({});
 
       await nextTick();
-      expect(vm.$store.dispatch).toHaveBeenCalledWith(
-        ACTION_UPDATE_COMMIT_ACTION,
-        expect.anything(),
-      );
+      expect(store.dispatch).toHaveBeenCalledWith(ACTION_UPDATE_COMMIT_ACTION, expect.anything());
     });
 
     it.each`
@@ -133,9 +124,7 @@ describe('IDE commit sidebar actions', () => {
       ({ input, expectedOption }) => {
         createComponent(input);
 
-        expect(vm.$store.dispatch.mock.calls).toEqual([
-          [ACTION_UPDATE_COMMIT_ACTION, expectedOption],
-        ]);
+        expect(store.dispatch.mock.calls).toEqual([[ACTION_UPDATE_COMMIT_ACTION, expectedOption]]);
       },
     );
   });
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 dea920ecb5e..c9571d39acb 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js
@@ -1,133 +1,136 @@
+import { mount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import listItem from '~/ide/components/commit_sidebar/list_item.vue';
+import ListItem from '~/ide/components/commit_sidebar/list_item.vue';
 import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list item', () => {
-  let vm;
-  let f;
+  let wrapper;
+  let testFile;
   let findPathEl;
   let store;
   let router;
 
   beforeEach(() => {
     store = createStore();
-    router = createRouter(store);
+    jest.spyOn(store, 'dispatch');
 
-    const Component = Vue.extend(listItem);
+    router = createRouter(store);
 
-    f = file('test-file');
+    testFile = file('test-file');
 
-    store.state.entries[f.path] = f;
+    store.state.entries[testFile.path] = testFile;
 
-    vm = createComponentWithStore(Component, store, {
-      file: f,
-      activeFileKey: `staged-${f.key}`,
-    }).$mount();
+    wrapper = mount(ListItem, {
+      store,
+      propsData: {
+        file: testFile,
+        activeFileKey: `staged-${testFile.key}`,
+      },
+    });
 
-    findPathEl = vm.$el.querySelector('.multi-file-commit-list-path');
+    findPathEl = wrapper.find('.multi-file-commit-list-path');
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const findPathText = () => trimText(findPathEl.textContent);
+  const findPathText = () => trimText(findPathEl.text());
 
   it('renders file path', () => {
-    expect(findPathText()).toContain(f.path);
+    expect(findPathText()).toContain(testFile.path);
   });
 
   it('correctly renders renamed entries', async () => {
-    Vue.set(vm.file, 'prevName', 'Old name');
-
+    Vue.set(testFile, 'prevName', 'Old name');
     await nextTick();
-    expect(findPathText()).toEqual(`Old name → ${f.name}`);
+
+    expect(findPathText()).toEqual(`Old name → ${testFile.name}`);
   });
 
   it('correctly renders entry, the name of which did not change after rename (as within a folder)', async () => {
-    Vue.set(vm.file, 'prevName', f.name);
-
+    Vue.set(testFile, 'prevName', testFile.name);
     await nextTick();
-    expect(findPathText()).toEqual(f.name);
+
+    expect(findPathText()).toEqual(testFile.name);
   });
 
   it('opens a closed file in the editor when clicking the file path', async () => {
-    jest.spyOn(vm, 'openPendingTab');
     jest.spyOn(router, 'push').mockImplementation(() => {});
 
-    findPathEl.click();
-
-    await nextTick();
+    await findPathEl.trigger('click');
 
-    expect(vm.openPendingTab).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', expect.anything());
     expect(router.push).toHaveBeenCalled();
   });
 
   it('calls updateViewer with diff when clicking file', async () => {
-    jest.spyOn(vm, 'openFileInEditor');
-    jest.spyOn(vm, 'updateViewer');
     jest.spyOn(router, 'push').mockImplementation(() => {});
 
-    findPathEl.click();
-
+    await findPathEl.trigger('click');
     await waitForPromises();
 
-    expect(vm.updateViewer).toHaveBeenCalledWith('diff');
+    expect(store.dispatch).toHaveBeenCalledWith('updateViewer', 'diff');
   });
 
-  describe('computed', () => {
-    describe('iconName', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconName).toBe('file-modified');
-      });
+  describe('icon name', () => {
+    const getIconName = () => wrapper.findComponent(GlIcon).props('name');
+
+    it('is modified when not a tempFile', () => {
+      expect(getIconName()).toBe('file-modified');
+    });
 
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
+    it('is addition when is a tempFile', async () => {
+      testFile.tempFile = true;
+      await nextTick();
 
-        expect(vm.iconName).toBe('file-addition');
-      });
+      expect(getIconName()).toBe('file-addition');
+    });
 
-      it('returns deletion', () => {
-        f.deleted = true;
+    it('is deletion when is deleted', async () => {
+      testFile.deleted = true;
+      await nextTick();
 
-        expect(vm.iconName).toBe('file-deletion');
-      });
+      expect(getIconName()).toBe('file-deletion');
     });
+  });
 
-    describe('iconClass', () => {
-      it('returns modified when not a tempFile', () => {
-        expect(vm.iconClass).toContain('ide-file-modified');
-      });
+  describe('icon class', () => {
+    const getIconClass = () => wrapper.findComponent(GlIcon).classes();
 
-      it('returns addition when not a tempFile', () => {
-        f.tempFile = true;
+    it('is modified when not a tempFile', () => {
+      expect(getIconClass()).toContain('ide-file-modified');
+    });
 
-        expect(vm.iconClass).toContain('ide-file-addition');
-      });
+    it('is addition when is a tempFile', async () => {
+      testFile.tempFile = true;
+      await nextTick();
 
-      it('returns deletion', () => {
-        f.deleted = true;
+      expect(getIconClass()).toContain('ide-file-addition');
+    });
 
-        expect(vm.iconClass).toContain('ide-file-deletion');
-      });
+    it('returns deletion when is deleted', async () => {
+      testFile.deleted = true;
+      await nextTick();
+
+      expect(getIconClass()).toContain('ide-file-deletion');
     });
   });
 
   describe('is active', () => {
     it('does not add active class when dont keys match', () => {
-      expect(vm.$el.querySelector('.is-active')).toBe(null);
+      expect(wrapper.find('.is-active').exists()).toBe(false);
     });
 
     it('adds active class when keys match', async () => {
-      vm.keyPrefix = 'staged';
+      await wrapper.setProps({ keyPrefix: 'staged' });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.is-active')).not.toBe(null);
+      expect(wrapper.find('.is-active').exists()).toBe(true);
     });
   });
 });
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 ace266aec5e..c2ef29c1059 100644
--- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
@@ -1,135 +1,121 @@
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import createComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue';
 
 describe('IDE commit message field', () => {
-  const Component = Vue.extend(CommitMessageField);
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    setHTMLFixture('<div id="app"></div>');
-
-    vm = createComponent(
-      Component,
-      {
+    wrapper = mount(CommitMessageField, {
+      propsData: {
         text: '',
         placeholder: 'testing',
       },
-      '#app',
-    );
+      attachTo: document.body,
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
-
-    resetHTMLFixture();
+    wrapper.destroy();
   });
 
+  const findMessage = () => wrapper.find('textarea');
+  const findHighlights = () => wrapper.findAll('.highlights span');
+  const findMarks = () => wrapper.findAll('mark');
+
   it('adds is-focused class on focus', async () => {
-    vm.$el.querySelector('textarea').focus();
+    await findMessage().trigger('focus');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(true);
   });
 
   it('removed is-focused class on blur', async () => {
-    vm.$el.querySelector('textarea').focus();
+    await findMessage().trigger('focus');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(true);
 
-    vm.$el.querySelector('textarea').blur();
+    await findMessage().trigger('blur');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(false);
   });
 
-  it('emits input event on input', () => {
-    jest.spyOn(vm, '$emit').mockImplementation();
-
-    const textarea = vm.$el.querySelector('textarea');
-    textarea.value = 'testing';
-
-    textarea.dispatchEvent(new Event('input'));
+  it('emits input event on input', async () => {
+    await findMessage().setValue('testing');
 
-    expect(vm.$emit).toHaveBeenCalledWith('input', 'testing');
+    expect(wrapper.emitted('input')[0]).toStrictEqual(['testing']);
   });
 
   describe('highlights', () => {
     describe('subject line', () => {
       it('does not highlight less than 50 characters', async () => {
-        vm.text = 'text less than 50 chars';
+        await wrapper.setProps({ text: 'text less than 50 chars' });
 
-        await nextTick();
-        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
-          'text less than 50 chars',
-        );
+        expect(findHighlights()).toHaveLength(1);
+        expect(findHighlights().at(0).text()).toContain('text less than 50 chars');
 
-        expect(vm.$el.querySelector('mark').style.display).toBe('none');
+        expect(findMarks()).toHaveLength(1);
+        expect(findMarks().at(0).isVisible()).toBe(false);
       });
 
       it('highlights characters over 50 length', async () => {
-        vm.text =
-          'text less than 50 chars that should not highlighted. text more than 50 should be highlighted';
+        await wrapper.setProps({
+          text:
+            'text less than 50 chars that should not highlighted. text more than 50 should be highlighted',
+        });
 
-        await nextTick();
-        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
+        expect(findHighlights()).toHaveLength(1);
+        expect(findHighlights().at(0).text()).toContain(
           'text less than 50 chars that should not highlighte',
         );
 
-        expect(vm.$el.querySelector('mark').style.display).not.toBe('none');
-        expect(vm.$el.querySelector('mark').textContent).toBe(
-          'd. text more than 50 should be highlighted',
-        );
+        expect(findMarks()).toHaveLength(1);
+        expect(findMarks().at(0).isVisible()).toBe(true);
+        expect(findMarks().at(0).text()).toBe('d. text more than 50 should be highlighted');
       });
     });
 
     describe('body text', () => {
       it('does not highlight body text less tan 72 characters', async () => {
-        vm.text = 'subject line\nbody content';
+        await wrapper.setProps({ text: 'subject line\nbody content' });
 
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none');
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks().at(1).isVisible()).toBe(false);
       });
 
       it('highlights body text more than 72 characters', async () => {
-        vm.text =
-          'subject line\nbody content that will be highlighted when it is more than 72 characters in length';
-
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none');
-        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
+        await wrapper.setProps({
+          text:
+            'subject line\nbody content that will be highlighted when it is more than 72 characters in length',
+        });
+
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks().at(1).isVisible()).toBe(true);
+        expect(findMarks().at(1).text()).toBe('in length');
       });
 
       it('highlights body text & subject line', async () => {
-        vm.text =
-          'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length';
+        await wrapper.setProps({
+          text:
+            'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length',
+        });
 
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark').length).toBe(2);
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks()).toHaveLength(2);
 
-        expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d');
-        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
+        expect(findMarks().at(0).text()).toContain('d');
+        expect(findMarks().at(1).text()).toBe('in length');
       });
     });
   });
 
   describe('scrolling textarea', () => {
     it('updates transform of highlights', async () => {
-      vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content';
+      await wrapper.setProps({ text: 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content' });
 
+      findMessage().element.scrollTo(0, 50);
       await nextTick();
-      vm.$el.querySelector('textarea').scrollTo(0, 50);
 
-      vm.handleScroll();
-
-      await nextTick();
-      expect(vm.scrollTop).toBe(50);
-      expect(vm.$el.querySelector('.highlights').style.transform).toBe('translate3d(0, -50px, 0)');
+      expect(wrapper.find('.highlights').element.style.transform).toBe('translate3d(0, -50px, 0)');
     });
   });
 });
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 ee6ed694285..a3fa03a4aa5 100644
--- a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
@@ -1,123 +1,116 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { GlFormRadioGroup } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import RadioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
 import { createStore } from '~/ide/stores';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 describe('IDE commit sidebar radio group', () => {
-  let vm;
+  let wrapper;
   let store;
 
-  beforeEach(async () => {
+  const createComponent = (config = {}) => {
     store = createStore();
 
-    const Component = Vue.extend(RadioGroup);
-
     store.state.commit.commitAction = '2';
+    store.state.commit.newBranchName = 'test-123';
 
-    vm = createComponentWithStore(Component, store, {
-      value: '1',
-      label: 'test',
-      checked: true,
+    wrapper = mount(RadioGroup, {
+      store,
+      propsData: config.props,
+      slots: config.slots,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
-
-    vm.$mount();
-
-    await nextTick();
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('uses label if present', () => {
-    expect(vm.$el.textContent).toContain('test');
-  });
+  describe('without input', () => {
+    const props = {
+      value: '1',
+      label: 'test',
+      checked: true,
+    };
 
-  it('uses slot if label is not present', async () => {
-    vm.$destroy();
+    it('uses label if present', () => {
+      createComponent({ props });
 
-    vm = new Vue({
-      components: {
-        RadioGroup,
-      },
-      store,
-      render: (createElement) =>
-        createElement('radio-group', { props: { value: '1' } }, 'Testing slot'),
+      expect(wrapper.text()).toContain('test');
     });
 
-    vm.$mount();
+    it('uses slot if label is not present', () => {
+      createComponent({ props: { value: '1', checked: true }, slots: { default: 'Testing slot' } });
 
-    await nextTick();
-    expect(vm.$el.textContent).toContain('Testing slot');
-  });
+      expect(wrapper.text()).toContain('Testing slot');
+    });
 
-  it('updates store when changing radio button', async () => {
-    vm.$el.querySelector('input').dispatchEvent(new Event('change'));
+    it('updates store when changing radio button', async () => {
+      createComponent({ props });
 
-    await nextTick();
-    expect(store.state.commit.commitAction).toBe('1');
+      await wrapper.find('input').trigger('change');
+
+      expect(store.state.commit.commitAction).toBe('1');
+    });
   });
 
   describe('with input', () => {
-    beforeEach(async () => {
-      vm.$destroy();
-
-      const Component = Vue.extend(RadioGroup);
-
-      store.state.commit.commitAction = '1';
-      store.state.commit.newBranchName = 'test-123';
-
-      vm = createComponentWithStore(Component, store, {
-        value: '1',
-        label: 'test',
-        checked: true,
-        showInput: true,
-      });
-
-      vm.$mount();
-
-      await nextTick();
-    });
+    const props = {
+      value: '2',
+      label: 'test',
+      checked: true,
+      showInput: true,
+    };
 
     it('renders input box when commitAction matches value', () => {
-      expect(vm.$el.querySelector('.form-control')).not.toBeNull();
+      createComponent({ props: { ...props, value: '2' } });
+
+      expect(wrapper.find('.form-control').exists()).toBe(true);
     });
 
-    it('hides input when commitAction doesnt match value', async () => {
-      store.state.commit.commitAction = '2';
+    it('hides input when commitAction doesnt match value', () => {
+      createComponent({ props: { ...props, value: '1' } });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.form-control')).toBeNull();
+      expect(wrapper.find('.form-control').exists()).toBe(false);
     });
 
     it('updates branch name in store on input', async () => {
-      const input = vm.$el.querySelector('.form-control');
-      input.value = 'testing-123';
-      input.dispatchEvent(new Event('input'));
+      createComponent({ props });
+
+      await wrapper.find('.form-control').setValue('testing-123');
 
-      await nextTick();
       expect(store.state.commit.newBranchName).toBe('testing-123');
     });
 
     it('renders newBranchName if present', () => {
-      const input = vm.$el.querySelector('.form-control');
+      createComponent({ props });
 
-      expect(input.value).toBe('test-123');
+      const input = wrapper.find('.form-control');
+
+      expect(input.element.value).toBe('test-123');
     });
   });
 
   describe('tooltipTitle', () => {
     it('returns title when disabled', () => {
-      vm.title = 'test title';
-      vm.disabled = true;
+      createComponent({
+        props: { value: '1', label: 'test', disabled: true, title: 'test title' },
+      });
 
-      expect(vm.tooltipTitle).toBe('test title');
+      const tooltip = getBinding(wrapper.findComponent(GlFormRadioGroup).element, 'gl-tooltip');
+      expect(tooltip.value).toBe('test title');
     });
 
     it('returns blank when not disabled', () => {
-      vm.title = 'test title';
+      createComponent({
+        props: { value: '1', label: 'test', title: 'test title' },
+      });
+
+      const tooltip = getBinding(wrapper.findComponent(GlFormRadioGroup).element, 'gl-tooltip');
 
-      expect(vm.tooltipTitle).not.toBe('test title');
+      expect(tooltip.value).toBe('');
     });
   });
 });
diff --git a/spec/frontend/ide/components/file_row_extra_spec.js b/spec/frontend/ide/components/file_row_extra_spec.js
index 5a7a1fe7db0..281c549a1b4 100644
--- a/spec/frontend/ide/components/file_row_extra_spec.js
+++ b/spec/frontend/ide/components/file_row_extra_spec.js
@@ -1,146 +1,146 @@
-import Vue, { nextTick } from 'vue';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
 import FileRowExtra from '~/ide/components/file_row_extra.vue';
-import { createStore } from '~/ide/stores';
+import { createStoreOptions } from '~/ide/stores';
 import { file } from '../helpers';
 
 describe('IDE extra file row component', () => {
-  let Component;
-  let vm;
+  let wrapper;
+  let store;
   let unstagedFilesCount = 0;
   let stagedFilesCount = 0;
   let changesCount = 0;
 
-  beforeAll(() => {
-    Component = Vue.extend(FileRowExtra);
-  });
+  const createComponent = (fileProps) => {
+    const storeConfig = createStoreOptions();
 
-  beforeEach(() => {
-    vm = createComponentWithStore(Component, createStore(), {
-      file: {
-        ...file('test'),
+    store = new Vuex.Store({
+      ...storeConfig,
+      getters: {
+        getUnstagedFilesCountForPath: () => () => unstagedFilesCount,
+        getStagedFilesCountForPath: () => () => stagedFilesCount,
+        getChangesInFolder: () => () => changesCount,
       },
-      dropdownOpen: false,
     });
 
-    jest.spyOn(vm, 'getUnstagedFilesCountForPath', 'get').mockReturnValue(() => unstagedFilesCount);
-    jest.spyOn(vm, 'getStagedFilesCountForPath', 'get').mockReturnValue(() => stagedFilesCount);
-    jest.spyOn(vm, 'getChangesInFolder', 'get').mockReturnValue(() => changesCount);
-
-    vm.$mount();
-  });
+    wrapper = mount(FileRowExtra, {
+      store,
+      propsData: {
+        file: {
+          ...file('test'),
+          type: 'tree',
+          ...fileProps,
+        },
+        dropdownOpen: false,
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
 
     stagedFilesCount = 0;
     unstagedFilesCount = 0;
     changesCount = 0;
   });
 
-  describe('folderChangesTooltip', () => {
-    it('returns undefined when changes count is 0', () => {
-      changesCount = 0;
-
-      expect(vm.folderChangesTooltip).toBe(undefined);
-    });
-
+  describe('folder changes tooltip', () => {
     [
       { input: 1, output: '1 changed file' },
       { input: 2, output: '2 changed files' },
     ].forEach(({ input, output }) => {
-      it('returns changed files count if changes count is not 0', () => {
+      it('shows changed files count if changes count is not 0', () => {
         changesCount = input;
+        createComponent();
 
-        expect(vm.folderChangesTooltip).toBe(output);
+        expect(wrapper.find('.ide-file-modified').attributes('title')).toBe(output);
       });
     });
   });
 
   describe('show tree changes count', () => {
+    const findTreeChangesCount = () => wrapper.find('.ide-tree-changes');
+
     it('does not show for blobs', () => {
-      vm.file.type = 'blob';
+      createComponent({ type: 'blob' });
 
-      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+      expect(findTreeChangesCount().exists()).toBe(false);
     });
 
     it('does not show when changes count is 0', () => {
-      vm.file.type = 'tree';
+      createComponent({ type: 'tree' });
 
-      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+      expect(findTreeChangesCount().exists()).toBe(false);
     });
 
-    it('does not show when tree is open', async () => {
-      vm.file.type = 'tree';
-      vm.file.opened = true;
+    it('does not show when tree is open', () => {
       changesCount = 1;
+      createComponent({ type: 'tree', opened: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+      expect(findTreeChangesCount().exists()).toBe(false);
     });
 
-    it('shows for trees with changes', async () => {
-      vm.file.type = 'tree';
-      vm.file.opened = false;
+    it('shows for trees with changes', () => {
       changesCount = 1;
+      createComponent({ type: 'tree', opened: false });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
+      expect(findTreeChangesCount().exists()).toBe(true);
     });
   });
 
   describe('changes file icon', () => {
+    const findChangedFileIcon = () => wrapper.find('.file-changed-icon');
+
     it('hides when file is not changed', () => {
-      expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
+      createComponent();
+
+      expect(findChangedFileIcon().exists()).toBe(false);
     });
 
-    it('shows when file is changed', async () => {
-      vm.file.changed = true;
+    it('shows when file is changed', () => {
+      createComponent({ type: 'blob', changed: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+      expect(findChangedFileIcon().exists()).toBe(true);
     });
 
-    it('shows when file is staged', async () => {
-      vm.file.staged = true;
+    it('shows when file is staged', () => {
+      createComponent({ type: 'blob', staged: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+      expect(findChangedFileIcon().exists()).toBe(true);
     });
 
-    it('shows when file is a tempFile', async () => {
-      vm.file.tempFile = true;
+    it('shows when file is a tempFile', () => {
+      createComponent({ type: 'blob', tempFile: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+      expect(findChangedFileIcon().exists()).toBe(true);
     });
 
-    it('shows when file is renamed', async () => {
-      vm.file.prevPath = 'original-file';
+    it('shows when file is renamed', () => {
+      createComponent({ type: 'blob', prevPath: 'original-file' });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+      expect(findChangedFileIcon().exists()).toBe(true);
     });
 
-    it('hides when file is renamed', async () => {
-      vm.file.prevPath = 'original-file';
-      vm.file.type = 'tree';
+    it('hides when tree is renamed', () => {
+      createComponent({ type: 'tree', prevPath: 'original-path' });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
+      expect(findChangedFileIcon().exists()).toBe(false);
     });
   });
 
   describe('merge request icon', () => {
+    const findMergeRequestIcon = () => wrapper.find('[data-testid="git-merge-icon"]');
+
     it('hides when not a merge request change', () => {
-      expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).toBe(null);
+      createComponent();
+
+      expect(findMergeRequestIcon().exists()).toBe(false);
     });
 
-    it('shows when a merge request change', async () => {
-      vm.file.mrChange = true;
+    it('shows when a merge request change', () => {
+      createComponent({ mrChange: true });
 
-      await nextTick();
-      expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).not.toBe(null);
+      expect(findMergeRequestIcon().exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/ide/components/file_templates/bar_spec.js b/spec/frontend/ide/components/file_templates/bar_spec.js
index aaf9c17ccbf..60f37260393 100644
--- a/spec/frontend/ide/components/file_templates/bar_spec.js
+++ b/spec/frontend/ide/components/file_templates/bar_spec.js
@@ -1,19 +1,16 @@
-import Vue, { nextTick } from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import Bar from '~/ide/components/file_templates/bar.vue';
 import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
 describe('IDE file templates bar component', () => {
-  let Component;
-  let vm;
-
-  beforeAll(() => {
-    Component = Vue.extend(Bar);
-  });
+  let wrapper;
+  let store;
 
   beforeEach(() => {
-    const store = createStore();
+    store = createStore();
+    jest.spyOn(store, 'dispatch').mockImplementation();
 
     store.state.openFiles.push({
       ...file('file'),
@@ -21,24 +18,22 @@ describe('IDE file templates bar component', () => {
       active: true,
     });
 
-    vm = mountComponentWithStore(Component, { store });
+    wrapper = mount(Bar, { store });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('template type dropdown', () => {
     it('renders dropdown component', () => {
-      expect(vm.$el.querySelector('.dropdown').textContent).toContain('Choose a type');
+      expect(wrapper.find('.dropdown').text()).toContain('Choose a type');
     });
 
-    it('calls setSelectedTemplateType when clicking item', () => {
-      jest.spyOn(vm, 'setSelectedTemplateType').mockImplementation();
-
-      vm.$el.querySelector('.dropdown-menu button').click();
+    it('calls setSelectedTemplateType when clicking item', async () => {
+      await wrapper.find('.dropdown-menu button').trigger('click');
 
-      expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
+      expect(store.dispatch).toHaveBeenCalledWith('fileTemplates/setSelectedTemplateType', {
         name: '.gitlab-ci.yml',
         key: 'gitlab_ci_ymls',
       });
@@ -46,60 +41,52 @@ describe('IDE file templates bar component', () => {
   });
 
   describe('template dropdown', () => {
-    beforeEach(async () => {
-      vm.$store.state.fileTemplates.templates = [
+    beforeEach(() => {
+      store.state.fileTemplates.templates = [
         {
           name: 'test',
         },
       ];
-      vm.$store.state.fileTemplates.selectedTemplateType = {
+      store.state.fileTemplates.selectedTemplateType = {
         name: '.gitlab-ci.yml',
         key: 'gitlab_ci_ymls',
       };
-
-      await nextTick();
     });
 
     it('renders dropdown component', () => {
-      expect(vm.$el.querySelectorAll('.dropdown')[1].textContent).toContain('Choose a template');
+      expect(wrapper.findAll('.dropdown').at(1).text()).toContain('Choose a template');
     });
 
-    it('calls fetchTemplate on dropdown open', () => {
-      jest.spyOn(vm, 'fetchTemplate').mockImplementation();
-
-      vm.$el.querySelectorAll('.dropdown-menu')[1].querySelector('button').click();
+    it('calls fetchTemplate on dropdown open', async () => {
+      await wrapper.findAll('.dropdown-menu').at(1).find('button').trigger('click');
 
-      expect(vm.fetchTemplate).toHaveBeenCalledWith({
+      expect(store.dispatch).toHaveBeenCalledWith('fileTemplates/fetchTemplate', {
         name: 'test',
       });
     });
   });
 
+  const findUndoButton = () => wrapper.find('.btn-default-secondary');
   it('shows undo button if updateSuccess is true', async () => {
-    vm.$store.state.fileTemplates.updateSuccess = true;
-
+    store.state.fileTemplates.updateSuccess = true;
     await nextTick();
-    expect(vm.$el.querySelector('.btn-default').style.display).not.toBe('none');
-  });
 
-  it('calls undoFileTemplate when clicking undo button', () => {
-    jest.spyOn(vm, 'undoFileTemplate').mockImplementation();
+    expect(findUndoButton().isVisible()).toBe(true);
+  });
 
-    vm.$el.querySelector('.btn-default-secondary').click();
+  it('calls undoFileTemplate when clicking undo button', async () => {
+    await findUndoButton().trigger('click');
 
-    expect(vm.undoFileTemplate).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledWith('fileTemplates/undoFileTemplate', undefined);
   });
 
   it('calls setSelectedTemplateType if activeFile name matches a template', async () => {
     const fileName = '.gitlab-ci.yml';
-
-    jest.spyOn(vm, 'setSelectedTemplateType').mockImplementation(() => {});
-    vm.$store.state.openFiles[0].name = fileName;
-
-    vm.setInitialType();
+    store.state.openFiles = [{ ...file(fileName), opened: true, active: true }];
 
     await nextTick();
-    expect(vm.setSelectedTemplateType).toHaveBeenCalledWith({
+
+    expect(store.dispatch).toHaveBeenCalledWith('fileTemplates/setSelectedTemplateType', {
       name: fileName,
       key: 'gitlab_ci_ymls',
     });
diff --git a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap b/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
deleted file mode 100644
index 45444166a50..00000000000
--- a/spec/frontend/ide/components/jobs/__snapshots__/stage_spec.js.snap
+++ /dev/null
@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IDE pipeline stage renders stage details & icon 1`] = `
-<div
-  class="ide-stage card gl-mt-3"
->
-  <div
-    class="card-header"
-  >
-    <ci-icon-stub
-      cssclasses=""
-      size="24"
-      status="[object Object]"
-    />
-     
-    <strong
-      class="gl-ml-3 text-truncate"
-      data-container="body"
-    >
-      
-      build
-    
-    </strong>
-     
-    <div
-      class="gl-mr-3 gl-ml-2"
-    >
-      <gl-badge-stub
-        size="md"
-        variant="muted"
-      >
-        4
-      </gl-badge-stub>
-    </div>
-     
-    <gl-icon-stub
-      class="ide-stage-collapse-icon"
-      name="chevron-lg-down"
-      size="16"
-    />
-  </div>
-   
-  <div
-    class="card-body p-0"
-  >
-    <item-stub
-      job="[object Object]"
-    />
-    <item-stub
-      job="[object Object]"
-    />
-    <item-stub
-      job="[object Object]"
-    />
-    <item-stub
-      job="[object Object]"
-    />
-  </div>
-</div>
-`;
diff --git a/spec/frontend/ide/components/jobs/detail/description_spec.js b/spec/frontend/ide/components/jobs/detail/description_spec.js
index 128ccff6568..629c4424314 100644
--- a/spec/frontend/ide/components/jobs/detail/description_spec.js
+++ b/spec/frontend/ide/components/jobs/detail/description_spec.js
@@ -1,44 +1,43 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import Description from '~/ide/components/jobs/detail/description.vue';
 import { jobs } from '../../../mock_data';
 
 describe('IDE job description', () => {
-  const Component = Vue.extend(Description);
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    vm = mountComponent(Component, {
-      job: jobs[0],
+    wrapper = mount(Description, {
+      propsData: {
+        job: jobs[0],
+      },
     });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders job details', () => {
-    expect(vm.$el.textContent).toContain('#1');
-    expect(vm.$el.textContent).toContain('test');
+    expect(wrapper.text()).toContain('#1');
+    expect(wrapper.text()).toContain('test');
   });
 
   it('renders CI icon', () => {
-    expect(
-      vm.$el.querySelector('.ci-status-icon [data-testid="status_success_borderless-icon"]'),
-    ).not.toBe(null);
+    expect(wrapper.find('.ci-status-icon').findComponent(GlIcon).exists()).toBe(true);
   });
 
   it('renders a borderless CI icon', () => {
-    expect(
-      vm.$el.querySelector('.borderless [data-testid="status_success_borderless-icon"]'),
-    ).not.toBe(null);
+    expect(wrapper.find('.borderless').findComponent(GlIcon).exists()).toBe(true);
   });
 
   it('renders bridge job details without the job link', () => {
-    vm = mountComponent(Component, {
-      job: { ...jobs[0], path: undefined },
+    wrapper = mount(Description, {
+      propsData: {
+        job: { ...jobs[0], path: undefined },
+      },
     });
 
-    expect(vm.$el.querySelector('[data-testid="description-detail-link"]')).toBe(null);
+    expect(wrapper.find('[data-testid="description-detail-link"]').exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/ide/components/jobs/detail_spec.js b/spec/frontend/ide/components/jobs/detail_spec.js
index 9122471d421..bf2be3aa595 100644
--- a/spec/frontend/ide/components/jobs/detail_spec.js
+++ b/spec/frontend/ide/components/jobs/detail_spec.js
@@ -1,15 +1,17 @@
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+
 import { TEST_HOST } from 'helpers/test_constants';
-import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import JobDetail from '~/ide/components/jobs/detail.vue';
 import { createStore } from '~/ide/stores';
 import { jobs } from '../../mock_data';
 
 describe('IDE jobs detail view', () => {
-  let vm;
+  let wrapper;
+  let store;
 
   const createComponent = () => {
-    const store = createStore();
+    store = createStore();
 
     store.state.pipelines.detailJob = {
       ...jobs[0],
@@ -18,163 +20,129 @@ describe('IDE jobs detail view', () => {
       rawPath: `${TEST_HOST}/raw`,
     };
 
-    return createComponentWithStore(Vue.extend(JobDetail), store);
+    jest.spyOn(store, 'dispatch');
+    store.dispatch.mockResolvedValue();
+
+    wrapper = mount(JobDetail, { store });
   };
 
-  beforeEach(() => {
-    vm = createComponent();
+  const findBuildJobLog = () => wrapper.find('pre');
+  const findScrollToBottomButton = () => wrapper.find('button[aria-label="Scroll to bottom"]');
+  const findScrollToTopButton = () => wrapper.find('button[aria-label="Scroll to top"]');
 
-    jest.spyOn(vm, 'fetchJobLogs').mockResolvedValue();
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('mounted', () => {
-    beforeEach(() => {
-      vm = vm.$mount();
-    });
+    const findJobOutput = () => wrapper.find('.bash');
+    const findBuildLoaderAnimation = () => wrapper.find('.build-loader-animation');
 
     it('calls fetchJobLogs', () => {
-      expect(vm.fetchJobLogs).toHaveBeenCalled();
+      expect(store.dispatch).toHaveBeenCalledWith('pipelines/fetchJobLogs', undefined);
     });
 
     it('scrolls to bottom', () => {
-      expect(vm.$refs.buildJobLog.scrollTo).toHaveBeenCalled();
+      expect(findBuildJobLog().element.scrollTo).toHaveBeenCalled();
     });
 
     it('renders job output', () => {
-      expect(vm.$el.querySelector('.bash').textContent).toContain('testing');
+      expect(findJobOutput().text()).toContain('testing');
     });
 
     it('renders empty message output', async () => {
-      vm.$store.state.pipelines.detailJob.output = '';
-
+      store.state.pipelines.detailJob.output = '';
       await nextTick();
-      expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged');
+
+      expect(findJobOutput().text()).toContain('No messages were logged');
     });
 
     it('renders loading icon', () => {
-      expect(vm.$el.querySelector('.build-loader-animation')).not.toBe(null);
-      expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('');
+      expect(findBuildLoaderAnimation().exists()).toBe(true);
+      expect(findBuildLoaderAnimation().isVisible()).toBe(true);
     });
 
     it('hides output when loading', () => {
-      expect(vm.$el.querySelector('.bash')).not.toBe(null);
-      expect(vm.$el.querySelector('.bash').style.display).toBe('none');
+      expect(findJobOutput().exists()).toBe(true);
+      expect(findJobOutput().isVisible()).toBe(false);
     });
 
     it('hide loading icon when isLoading is false', async () => {
-      vm.$store.state.pipelines.detailJob.isLoading = false;
-
+      store.state.pipelines.detailJob.isLoading = false;
       await nextTick();
-      expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none');
-    });
 
-    it('resets detailJob when clicking header button', () => {
-      jest.spyOn(vm, 'setDetailJob').mockImplementation();
+      expect(findBuildLoaderAnimation().isVisible()).toBe(false);
+    });
 
-      vm.$el.querySelector('.btn').click();
+    it('resets detailJob when clicking header button', async () => {
+      await wrapper.find('.btn').trigger('click');
 
-      expect(vm.setDetailJob).toHaveBeenCalledWith(null);
+      expect(store.dispatch).toHaveBeenCalledWith('pipelines/setDetailJob', null);
     });
 
     it('renders raw path link', () => {
-      expect(vm.$el.querySelector('.controllers-buttons').getAttribute('href')).toBe(
-        `${TEST_HOST}/raw`,
-      );
+      expect(wrapper.find('.controllers-buttons').attributes('href')).toBe(`${TEST_HOST}/raw`);
     });
   });
 
   describe('scroll buttons', () => {
     beforeEach(() => {
-      vm = createComponent();
-      jest.spyOn(vm, 'fetchJobLogs').mockResolvedValue();
-    });
-
-    afterEach(() => {
-      vm.$destroy();
+      createComponent();
     });
 
     it.each`
-      fnName          | btnName   | scrollPos
-      ${'scrollDown'} | ${'down'} | ${0}
-      ${'scrollUp'}   | ${'up'}   | ${1}
-    `('triggers $fnName when clicking $btnName button', async ({ fnName, scrollPos }) => {
-      jest.spyOn(vm, fnName).mockImplementation();
-
-      vm = vm.$mount();
+      fnName           | btnName   | scrollPos | targetScrollPos
+      ${'scroll down'} | ${'down'} | ${0}      | ${200}
+      ${'scroll up'}   | ${'up'}   | ${200}    | ${0}
+    `('triggers $fnName when clicking $btnName button', async ({ scrollPos, targetScrollPos }) => {
+      jest.spyOn(findBuildJobLog().element, 'offsetHeight', 'get').mockReturnValue(0);
+      jest.spyOn(findBuildJobLog().element, 'scrollHeight', 'get').mockReturnValue(200);
+      jest.spyOn(findBuildJobLog().element, 'scrollTop', 'get').mockReturnValue(scrollPos);
+      findBuildJobLog().element.scrollTo.mockReset();
 
-      vm.scrollPos = scrollPos;
-
-      await nextTick();
-      vm.$el.querySelector('.btn-scroll:not([disabled])').click();
-      expect(vm[fnName]).toHaveBeenCalled();
-    });
-  });
-
-  describe('scrollDown', () => {
-    beforeEach(() => {
-      vm = vm.$mount();
-
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTo').mockImplementation();
-    });
-
-    it('scrolls build trace to bottom', () => {
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollHeight', 'get').mockReturnValue(1000);
-
-      vm.scrollDown();
-
-      expect(vm.$refs.buildJobLog.scrollTo).toHaveBeenCalledWith(0, 1000);
-    });
-  });
-
-  describe('scrollUp', () => {
-    beforeEach(() => {
-      vm = vm.$mount();
-
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTo').mockImplementation();
-    });
+      await findBuildJobLog().trigger('scroll'); // trigger button updates
 
-    it('scrolls build trace to top', () => {
-      vm.scrollUp();
+      await wrapper.find('.controllers button:not(:disabled)').trigger('click');
 
-      expect(vm.$refs.buildJobLog.scrollTo).toHaveBeenCalledWith(0, 0);
+      expect(findBuildJobLog().element.scrollTo).toHaveBeenCalledWith(0, targetScrollPos);
     });
   });
 
-  describe('scrollBuildLog', () => {
+  describe('scrolling build log', () => {
     beforeEach(() => {
-      vm = vm.$mount();
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTo').mockImplementation();
-      jest.spyOn(vm.$refs.buildJobLog, 'offsetHeight', 'get').mockReturnValue(100);
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollHeight', 'get').mockReturnValue(200);
+      jest.spyOn(findBuildJobLog().element, 'offsetHeight', 'get').mockReturnValue(100);
+      jest.spyOn(findBuildJobLog().element, 'scrollHeight', 'get').mockReturnValue(200);
     });
 
-    it('sets scrollPos to bottom when at the bottom', () => {
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTop', 'get').mockReturnValue(100);
+    it('keeps scroll at bottom when already at the bottom', async () => {
+      jest.spyOn(findBuildJobLog().element, 'scrollTop', 'get').mockReturnValue(100);
 
-      vm.scrollBuildLog();
+      await findBuildJobLog().trigger('scroll');
 
-      expect(vm.scrollPos).toBe(1);
+      expect(findScrollToBottomButton().attributes('disabled')).toBe('disabled');
+      expect(findScrollToTopButton().attributes('disabled')).not.toBe('disabled');
     });
 
-    it('sets scrollPos to top when at the top', () => {
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTop', 'get').mockReturnValue(0);
-      vm.scrollPos = 1;
+    it('keeps scroll at top when already at top', async () => {
+      jest.spyOn(findBuildJobLog().element, 'scrollTop', 'get').mockReturnValue(0);
 
-      vm.scrollBuildLog();
+      await findBuildJobLog().trigger('scroll');
 
-      expect(vm.scrollPos).toBe(0);
+      expect(findScrollToBottomButton().attributes('disabled')).not.toBe('disabled');
+      expect(findScrollToTopButton().attributes('disabled')).toBe('disabled');
     });
 
-    it('resets scrollPos when not at top or bottom', () => {
-      jest.spyOn(vm.$refs.buildJobLog, 'scrollTop', 'get').mockReturnValue(10);
+    it('resets scroll when not at top or bottom', async () => {
+      jest.spyOn(findBuildJobLog().element, 'scrollTop', 'get').mockReturnValue(10);
 
-      vm.scrollBuildLog();
+      await findBuildJobLog().trigger('scroll');
 
-      expect(vm.scrollPos).toBe('');
+      expect(findScrollToBottomButton().attributes('disabled')).not.toBe('disabled');
+      expect(findScrollToTopButton().attributes('disabled')).not.toBe('disabled');
     });
   });
 });
diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js
index c76760a5522..32e27333e42 100644
--- a/spec/frontend/ide/components/jobs/item_spec.js
+++ b/spec/frontend/ide/components/jobs/item_spec.js
@@ -1,36 +1,38 @@
-import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+
 import JobItem from '~/ide/components/jobs/item.vue';
 import { jobs } from '../../mock_data';
 
 describe('IDE jobs item', () => {
-  const Component = Vue.extend(JobItem);
   const job = jobs[0];
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    vm = mountComponent(Component, {
-      job,
-    });
+    wrapper = mount(JobItem, { propsData: { job } });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders job details', () => {
-    expect(vm.$el.textContent).toContain(job.name);
-    expect(vm.$el.textContent).toContain(`#${job.id}`);
+    expect(wrapper.text()).toContain(job.name);
+    expect(wrapper.text()).toContain(`#${job.id}`);
   });
 
   it('renders CI icon', () => {
-    expect(vm.$el.querySelector('[data-testid="status_success_borderless-icon"]')).not.toBe(null);
+    expect(wrapper.find('[data-testid="status_success_borderless-icon"]').exists()).toBe(true);
   });
 
   it('does not render view logs button if not started', async () => {
-    vm.job.started = false;
+    await wrapper.setProps({
+      job: {
+        ...jobs[0],
+        started: false,
+      },
+    });
 
-    await nextTick();
-    expect(vm.$el.querySelector('.btn')).toBe(null);
+    expect(wrapper.findComponent(GlButton).exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/ide/components/jobs/stage_spec.js b/spec/frontend/ide/components/jobs/stage_spec.js
index 1d5e5743a4d..52fbff2f497 100644
--- a/spec/frontend/ide/components/jobs/stage_spec.js
+++ b/spec/frontend/ide/components/jobs/stage_spec.js
@@ -18,8 +18,9 @@ describe('IDE pipeline stage', () => {
     },
   };
 
-  const findHeader = () => wrapper.findComponent({ ref: 'cardHeader' });
-  const findJobList = () => wrapper.findComponent({ ref: 'jobList' });
+  const findHeader = () => wrapper.find('[data-testid="card-header"]');
+  const findJobList = () => wrapper.find('[data-testid="job-list"]');
+  const findStageTitle = () => wrapper.find('[data-testid="stage-title"]');
 
   const createComponent = (props) => {
     wrapper = shallowMount(Stage, {
@@ -65,9 +66,9 @@ describe('IDE pipeline stage', () => {
     expect(wrapper.emitted().clickViewLog[0][0]).toBe(job);
   });
 
-  it('renders stage details & icon', () => {
+  it('renders stage title', () => {
     createComponent();
-    expect(wrapper.element).toMatchSnapshot();
+    expect(findStageTitle().isVisible()).toBe(true);
   });
 
   describe('when collapsed', () => {
diff --git a/spec/frontend/ide/components/new_dropdown/button_spec.js b/spec/frontend/ide/components/new_dropdown/button_spec.js
index 298d7b810e1..a9cfdfd20c1 100644
--- a/spec/frontend/ide/components/new_dropdown/button_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/button_spec.js
@@ -1,59 +1,60 @@
-import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import Button from '~/ide/components/new_dropdown/button.vue';
 
 describe('IDE new entry dropdown button component', () => {
-  let Component;
-  let vm;
-
-  beforeAll(() => {
-    Component = Vue.extend(Button);
-  });
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      label: 'Testing',
-      icon: 'doc-new',
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(Button, {
+      propsData: {
+        label: 'Testing',
+        icon: 'doc-new',
+        ...props,
+      },
     });
-
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders button with label', () => {
-    expect(vm.$el.textContent).toContain('Testing');
+    createComponent();
+
+    expect(wrapper.text()).toContain('Testing');
   });
 
   it('renders icon', () => {
-    expect(vm.$el.querySelector('[data-testid="doc-new-icon"]')).not.toBe(null);
+    createComponent();
+
+    expect(wrapper.find('[data-testid="doc-new-icon"]').exists()).toBe(true);
   });
 
-  it('emits click event', () => {
-    vm.$el.click();
+  it('emits click event', async () => {
+    createComponent();
 
-    expect(vm.$emit).toHaveBeenCalledWith('click');
+    await wrapper.trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
   });
 
-  it('hides label if showLabel is false', async () => {
-    vm.showLabel = false;
+  it('hides label if showLabel is false', () => {
+    createComponent({ showLabel: false });
 
-    await nextTick();
-    expect(vm.$el.textContent).not.toContain('Testing');
+    expect(wrapper.text()).not.toContain('Testing');
   });
 
-  describe('tooltipTitle', () => {
+  describe('tooltip title', () => {
     it('returns empty string when showLabel is true', () => {
-      expect(vm.tooltipTitle).toBe('');
+      createComponent({ showLabel: true });
+
+      expect(wrapper.attributes('title')).toBe('');
     });
 
-    it('returns label', async () => {
-      vm.showLabel = false;
+    it('returns label', () => {
+      createComponent({ showLabel: false });
 
-      await nextTick();
-      expect(vm.tooltipTitle).toBe('Testing');
+      expect(wrapper.attributes('title')).toBe('Testing');
     });
   });
 });
diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js
index 68cc08d2ebc..c6f9fd0c4ea 100644
--- a/spec/frontend/ide/components/new_dropdown/modal_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlModal } from '@gitlab/ui';
 import { nextTick } from 'vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import Modal from '~/ide/components/new_dropdown/modal.vue';
 import { createStore } from '~/ide/stores';
 import { stubComponent } from 'helpers/stub_component';
@@ -341,7 +341,7 @@ describe('new file modal component', () => {
         });
 
         it('does not trigger flash', () => {
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
         });
       });
 
@@ -360,7 +360,7 @@ describe('new file modal component', () => {
         });
 
         it('does not trigger flash', () => {
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
         });
       });
     });
@@ -380,7 +380,7 @@ describe('new file modal component', () => {
     });
 
     it('creates flash', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'The name "src" is already taken in this directory.',
         fadeTransition: false,
         addBodyClass: true,
@@ -405,7 +405,7 @@ describe('new file modal component', () => {
     });
 
     it('does not create flash', () => {
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
 
     it('dispatches event', () => {
diff --git a/spec/frontend/ide/components/new_dropdown/upload_spec.js b/spec/frontend/ide/components/new_dropdown/upload_spec.js
index 3eafe9e7ccb..fc643589d51 100644
--- a/spec/frontend/ide/components/new_dropdown/upload_spec.js
+++ b/spec/frontend/ide/components/new_dropdown/upload_spec.js
@@ -1,39 +1,34 @@
-import Vue from 'vue';
-import createComponent from 'helpers/vue_mount_component_helper';
-import upload from '~/ide/components/new_dropdown/upload.vue';
+import { mount } from '@vue/test-utils';
+import Upload from '~/ide/components/new_dropdown/upload.vue';
 
 describe('new dropdown upload', () => {
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    const Component = Vue.extend(upload);
-
-    vm = createComponent(Component, {
-      path: '',
+    wrapper = mount(Upload, {
+      propsData: {
+        path: '',
+      },
     });
-
-    vm.entryName = 'testing';
-
-    jest.spyOn(vm, '$emit');
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('openFile', () => {
     it('calls for each file', () => {
       const files = ['test', 'test2', 'test3'];
 
-      jest.spyOn(vm, 'readFile').mockImplementation(() => {});
-      jest.spyOn(vm.$refs.fileUpload, 'files', 'get').mockReturnValue(files);
+      jest.spyOn(wrapper.vm, 'readFile').mockImplementation(() => {});
+      jest.spyOn(wrapper.vm.$refs.fileUpload, 'files', 'get').mockReturnValue(files);
 
-      vm.openFile();
+      wrapper.vm.openFile();
 
-      expect(vm.readFile.mock.calls.length).toBe(3);
+      expect(wrapper.vm.readFile.mock.calls.length).toBe(3);
 
       files.forEach((file, i) => {
-        expect(vm.readFile.mock.calls[i]).toEqual([file]);
+        expect(wrapper.vm.readFile.mock.calls[i]).toEqual([file]);
       });
     });
   });
@@ -48,7 +43,7 @@ describe('new dropdown upload', () => {
         type: 'images/png',
       };
 
-      vm.readFile(file);
+      wrapper.vm.readFile(file);
 
       expect(FileReader.prototype.readAsDataURL).toHaveBeenCalledWith(file);
     });
@@ -71,35 +66,39 @@ describe('new dropdown upload', () => {
 
     it('calls readAsText and creates file in plain text (without encoding) if the file content is plain text', async () => {
       const waitForCreate = new Promise((resolve) => {
-        vm.$on('create', resolve);
+        wrapper.vm.$on('create', resolve);
       });
 
-      vm.createFile(textTarget, textFile);
+      wrapper.vm.createFile(textTarget, textFile);
 
       expect(FileReader.prototype.readAsText).toHaveBeenCalledWith(textFile);
 
       await waitForCreate;
-      expect(vm.$emit).toHaveBeenCalledWith('create', {
-        name: textFile.name,
-        type: 'blob',
-        content: 'plain text',
-        rawPath: '',
-        mimeType: 'test/mime-text',
-      });
+      expect(wrapper.emitted('create')[0]).toStrictEqual([
+        {
+          name: textFile.name,
+          type: 'blob',
+          content: 'plain text',
+          rawPath: '',
+          mimeType: 'test/mime-text',
+        },
+      ]);
     });
 
     it('creates a blob URL for the content if binary', () => {
-      vm.createFile(binaryTarget, binaryFile);
+      wrapper.vm.createFile(binaryTarget, binaryFile);
 
       expect(FileReader.prototype.readAsText).not.toHaveBeenCalled();
 
-      expect(vm.$emit).toHaveBeenCalledWith('create', {
-        name: binaryFile.name,
-        type: 'blob',
-        content: 'ðððð',
-        rawPath: 'blob:https://gitlab.com/048c7ac1-98de-4a37-ab1b-0206d0ea7e1b',
-        mimeType: 'test/mime-binary',
-      });
+      expect(wrapper.emitted('create')[0]).toStrictEqual([
+        {
+          name: binaryFile.name,
+          type: 'blob',
+          content: 'ðððð',
+          rawPath: 'blob:https://gitlab.com/048c7ac1-98de-4a37-ab1b-0206d0ea7e1b',
+          mimeType: 'test/mime-binary',
+        },
+      ]);
     });
   });
 });
diff --git a/spec/frontend/ide/components/shared/tokened_input_spec.js b/spec/frontend/ide/components/shared/tokened_input_spec.js
index 2efef9918b1..b70c9659e46 100644
--- a/spec/frontend/ide/components/shared/tokened_input_spec.js
+++ b/spec/frontend/ide/components/shared/tokened_input_spec.js
@@ -1,5 +1,4 @@
-import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import TokenedInput from '~/ide/components/shared/tokened_input.vue';
 
 const TEST_PLACEHOLDER = 'Searching in test';
@@ -10,120 +9,106 @@ const TEST_TOKENS = [
 ];
 const TEST_VALUE = 'lorem';
 
-function getTokenElements(vm) {
-  return Array.from(vm.$el.querySelectorAll('.filtered-search-token button'));
-}
-
-function createBackspaceEvent() {
-  const e = new Event('keyup');
-  e.keyCode = 8;
-  e.which = e.keyCode;
-  e.altKey = false;
-  e.ctrlKey = true;
-  e.shiftKey = false;
-  e.metaKey = false;
-  return e;
+function getTokenElements(wrapper) {
+  return wrapper.findAll('.filtered-search-token button');
 }
 
 describe('IDE shared/TokenedInput', () => {
-  const Component = Vue.extend(TokenedInput);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      tokens: TEST_TOKENS,
-      placeholder: TEST_PLACEHOLDER,
-      value: TEST_VALUE,
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(TokenedInput, {
+      propsData: {
+        tokens: TEST_TOKENS,
+        placeholder: TEST_PLACEHOLDER,
+        value: TEST_VALUE,
+        ...props,
+      },
+      attachTo: document.body,
     });
-
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders tokens', () => {
-    const renderedTokens = getTokenElements(vm).map((x) => x.textContent.trim());
+    createComponent();
+    const renderedTokens = getTokenElements(wrapper).wrappers.map((w) => w.text());
 
     expect(renderedTokens).toEqual(TEST_TOKENS.map((x) => x.label));
   });
 
   it('renders input', () => {
-    expect(vm.$refs.input).toBeInstanceOf(HTMLInputElement);
-    expect(vm.$refs.input).toHaveValue(TEST_VALUE);
-  });
-
-  it('renders placeholder, when tokens are empty', async () => {
-    vm.tokens = [];
+    createComponent();
 
-    await nextTick();
-    expect(vm.$refs.input).toHaveAttr('placeholder', TEST_PLACEHOLDER);
+    expect(wrapper.find('input').element).toBeInstanceOf(HTMLInputElement);
+    expect(wrapper.find('input').element).toHaveValue(TEST_VALUE);
   });
 
-  it('triggers "removeToken" on token click', () => {
-    getTokenElements(vm)[0].click();
+  it('renders placeholder, when tokens are empty', () => {
+    createComponent({ tokens: [] });
 
-    expect(vm.$emit).toHaveBeenCalledWith('removeToken', TEST_TOKENS[0]);
+    expect(wrapper.find('input').attributes('placeholder')).toBe(TEST_PLACEHOLDER);
   });
 
-  it('when input triggers backspace event, it calls "onBackspace"', () => {
-    jest.spyOn(vm, 'onBackspace').mockImplementation(() => {});
+  it('triggers "removeToken" on token click', async () => {
+    createComponent();
+    await getTokenElements(wrapper).at(0).trigger('click');
 
-    vm.$refs.input.dispatchEvent(createBackspaceEvent());
-    vm.$refs.input.dispatchEvent(createBackspaceEvent());
-
-    expect(vm.onBackspace).toHaveBeenCalledTimes(2);
+    expect(wrapper.emitted('removeToken')[0]).toStrictEqual([TEST_TOKENS[0]]);
   });
 
-  it('triggers "removeToken" on backspaces when value is empty', () => {
-    vm.value = '';
-
-    vm.onBackspace();
+  it('removes token on backspace when value is empty', async () => {
+    createComponent({ value: '' });
 
-    expect(vm.$emit).not.toHaveBeenCalled();
-    expect(vm.backspaceCount).toEqual(1);
+    expect(wrapper.emitted('removeToken')).toBeUndefined();
 
-    vm.onBackspace();
+    await wrapper.find('input').trigger('keyup.delete');
+    await wrapper.find('input').trigger('keyup.delete');
 
-    expect(vm.$emit).toHaveBeenCalledWith('removeToken', TEST_TOKENS[TEST_TOKENS.length - 1]);
-    expect(vm.backspaceCount).toEqual(0);
+    expect(wrapper.emitted('removeToken')[0]).toStrictEqual([TEST_TOKENS[TEST_TOKENS.length - 1]]);
   });
 
-  it('does not trigger "removeToken" on backspaces when value is not empty', () => {
-    vm.onBackspace();
-    vm.onBackspace();
+  it('does not trigger "removeToken" on backspaces when value is not empty', async () => {
+    createComponent({ value: 'SOMETHING' });
+
+    await wrapper.find('input').trigger('keyup.delete');
+    await wrapper.find('input').trigger('keyup.delete');
 
-    expect(vm.backspaceCount).toEqual(0);
-    expect(vm.$emit).not.toHaveBeenCalled();
+    expect(wrapper.emitted('removeToken')).toBeUndefined();
   });
 
-  it('does not trigger "removeToken" on backspaces when tokens are empty', () => {
-    vm.tokens = [];
+  it('does not trigger "removeToken" on backspaces when tokens are empty', async () => {
+    createComponent({ value: '', tokens: [] });
 
-    vm.onBackspace();
-    vm.onBackspace();
+    await wrapper.find('input').trigger('keyup.delete');
+    await wrapper.find('input').trigger('keyup.delete');
 
-    expect(vm.backspaceCount).toEqual(0);
-    expect(vm.$emit).not.toHaveBeenCalled();
+    expect(wrapper.emitted('removeToken')).toBeUndefined();
   });
 
-  it('triggers "focus" on input focus', () => {
-    vm.$refs.input.dispatchEvent(new Event('focus'));
+  it('triggers "focus" on input focus', async () => {
+    createComponent();
 
-    expect(vm.$emit).toHaveBeenCalledWith('focus');
+    await wrapper.find('input').trigger('focus');
+
+    expect(wrapper.emitted('focus')).toHaveLength(1);
   });
 
-  it('triggers "blur" on input blur', () => {
-    vm.$refs.input.dispatchEvent(new Event('blur'));
+  it('triggers "blur" on input blur', async () => {
+    createComponent();
+
+    await wrapper.find('input').trigger('blur');
 
-    expect(vm.$emit).toHaveBeenCalledWith('blur');
+    expect(wrapper.emitted('blur')).toHaveLength(1);
   });
 
-  it('triggers "input" with value on input change', () => {
-    vm.$refs.input.value = 'something-else';
-    vm.$refs.input.dispatchEvent(new Event('input'));
+  it('triggers "input" with value on input change', async () => {
+    createComponent();
+
+    await wrapper.find('input').setValue('something-else');
 
-    expect(vm.$emit).toHaveBeenCalledWith('input', 'something-else');
+    expect(wrapper.emitted('input')[0]).toStrictEqual(['something-else']);
   });
 });
diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js
index 4da3e1910e9..0d22f7f73fe 100644
--- a/spec/frontend/ide/components/terminal/terminal_spec.js
+++ b/spec/frontend/ide/components/terminal/terminal_spec.js
@@ -171,7 +171,7 @@ describe('IDE Terminal', () => {
 
     it('creates the terminal', () => {
       expect(GLTerminal).toHaveBeenCalledWith(wrapper.vm.$refs.terminal);
-      expect(wrapper.vm.glterminal).toBeTruthy();
+      expect(wrapper.vm.glterminal).toBeInstanceOf(GLTerminal);
     });
 
     describe('scroll listener', () => {
diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
index ec8559f1b56..067da25cb52 100644
--- a/spec/frontend/ide/init_gitlab_web_ide_spec.js
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -6,7 +6,7 @@ jest.mock('@gitlab/web-ide');
 
 const ROOT_ELEMENT_ID = 'ide';
 const TEST_NONCE = 'test123nonce';
-const TEST_PROJECT = { path_with_namespace: 'group1/project1' };
+const TEST_PROJECT_PATH = 'group1/project1';
 const TEST_BRANCH_NAME = '12345-foo-patch';
 const TEST_GITLAB_URL = 'https://test-gitlab/';
 const TEST_GITLAB_WEB_IDE_PUBLIC_PATH = 'test/webpack/assets/gitlab-web-ide/public/path';
@@ -18,7 +18,7 @@ describe('ide/init_gitlab_web_ide', () => {
     el.id = ROOT_ELEMENT_ID;
     // why: We'll test that this class is removed later
     el.classList.add('ide-loading');
-    el.dataset.project = JSON.stringify(TEST_PROJECT);
+    el.dataset.projectPath = TEST_PROJECT_PATH;
     el.dataset.cspNonce = TEST_NONCE;
     el.dataset.branchName = TEST_BRANCH_NAME;
 
@@ -43,7 +43,7 @@ describe('ide/init_gitlab_web_ide', () => {
   it('calls start with element', () => {
     expect(start).toHaveBeenCalledWith(findRootElement(), {
       baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
-      projectPath: TEST_PROJECT.path_with_namespace,
+      projectPath: TEST_PROJECT_PATH,
       ref: TEST_BRANCH_NAME,
       gitlabUrl: TEST_GITLAB_URL,
       nonce: TEST_NONCE,
diff --git a/spec/frontend/ide/stores/actions/merge_request_spec.js b/spec/frontend/ide/stores/actions/merge_request_spec.js
index abc3ba5b0a2..f1b2a7b881a 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '~/ide/constants';
 import service from '~/ide/services';
 import { createStore } from '~/ide/stores';
@@ -139,8 +139,8 @@ describe('IDE store merge request actions', () => {
             branchId: 'bar',
           })
           .catch(() => {
-            expect(createFlash).toHaveBeenCalled();
-            expect(createFlash.mock.calls[0][0].message).toBe(
+            expect(createAlert).toHaveBeenCalled();
+            expect(createAlert.mock.calls[0][0].message).toBe(
               'Error fetching merge requests for bar',
             );
           });
@@ -520,7 +520,7 @@ describe('IDE store merge request actions', () => {
       store.dispatch.mockRejectedValue();
 
       return openMergeRequest(store, mr).catch(() => {
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: expect.any(String),
         });
       });
diff --git a/spec/frontend/ide/stores/actions/project_spec.js b/spec/frontend/ide/stores/actions/project_spec.js
index cc7d39b4d43..5a5ead4c544 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import service from '~/ide/services';
 import { createStore } from '~/ide/stores';
 import {
@@ -97,7 +97,7 @@ describe('IDE store project actions', () => {
     });
 
     afterEach(() => {
-      createFlash.mockRestore();
+      createAlert.mockRestore();
     });
 
     it.each`
@@ -122,7 +122,7 @@ describe('IDE store project actions', () => {
 
       if (!responseSuccess) {
         expect(logError).toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalled();
+        expect(createAlert).toHaveBeenCalled();
       }
     });
   });
diff --git a/spec/frontend/ide/stores/actions_spec.js b/spec/frontend/ide/stores/actions_spec.js
index f6d54491d77..fd2c3d18813 100644
--- a/spec/frontend/ide/stores/actions_spec.js
+++ b/spec/frontend/ide/stores/actions_spec.js
@@ -4,6 +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 {
   init,
   stageAllChanges,
@@ -29,6 +30,7 @@ jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
   joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths,
 }));
+jest.mock('~/flash');
 
 describe('Multi-file store actions', () => {
   let store;
@@ -138,7 +140,7 @@ describe('Multi-file store actions', () => {
           name: 'testing/test',
           type: 'tree',
         });
-        expect(tree.tree[0].tempFile).toBeTruthy();
+        expect(tree.tree[0].tempFile).toBe(true);
         expect(tree.tree[0].name).toBe('test');
         expect(tree.tree[0].type).toBe('tree');
       });
@@ -158,7 +160,7 @@ describe('Multi-file store actions', () => {
           type: 'tree',
         });
         expect(store.state.entries[tree.path].tempFile).toEqual(false);
-        expect(document.querySelector('.flash-alert')).not.toBeNull();
+        expect(createAlert).toHaveBeenCalled();
       });
     });
 
@@ -173,7 +175,7 @@ describe('Multi-file store actions', () => {
         });
         const f = store.state.entries[name];
 
-        expect(f.tempFile).toBeTruthy();
+        expect(f.tempFile).toBe(true);
         expect(f.mimeType).toBe('test/mime');
         expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
       });
@@ -216,8 +218,10 @@ describe('Multi-file store actions', () => {
           name: 'test',
           type: 'blob',
         });
-        expect(document.querySelector('.flash-alert')?.textContent.trim()).toEqual(
-          `The name "${f.name}" is already taken in this directory.`,
+        expect(createAlert).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: `The name "${f.name}" is already taken in this directory.`,
+          }),
         );
       });
     });
@@ -930,7 +934,7 @@ describe('Multi-file store actions', () => {
         );
 
         expect(dispatch.mock.calls).toHaveLength(0);
-        expect(document.querySelector('.flash-alert')).not.toBeNull();
+        expect(createAlert).toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/ide/stores/modules/commit/mutations_spec.js b/spec/frontend/ide/stores/modules/commit/mutations_spec.js
index 50342832d75..d277157e737 100644
--- a/spec/frontend/ide/stores/modules/commit/mutations_spec.js
+++ b/spec/frontend/ide/stores/modules/commit/mutations_spec.js
@@ -37,7 +37,7 @@ describe('IDE commit module mutations', () => {
     it('updates submitCommitLoading', () => {
       mutations.UPDATE_LOADING(state, true);
 
-      expect(state.submitCommitLoading).toBeTruthy();
+      expect(state.submitCommitLoading).toBe(true);
     });
   });
 
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 ecda7f304ba..f48797415df 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -89,7 +89,7 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveStartSessionError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: messages.UNEXPECTED_ERROR_STARTING,
       });
     });
@@ -163,7 +163,7 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveStopSessionError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: messages.UNEXPECTED_ERROR_STOPPING,
       });
     });
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 eabc69b23aa..fe2328f25c2 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -115,7 +115,7 @@ describe('IDE store terminal session controls actions', () => {
     it('flashes message', () => {
       actions.receiveSessionStatusError({ dispatch });
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: messages.UNEXPECTED_ERROR_STATUS,
       });
     });
diff --git a/spec/frontend/ide/stores/mutations/tree_spec.js b/spec/frontend/ide/stores/mutations/tree_spec.js
index 6935e57578f..a8c0d7ba2c8 100644
--- a/spec/frontend/ide/stores/mutations/tree_spec.js
+++ b/spec/frontend/ide/stores/mutations/tree_spec.js
@@ -17,11 +17,11 @@ describe('Multi-file store tree mutations', () => {
     it('toggles tree open', () => {
       mutations.TOGGLE_TREE_OPEN(localState, localTree.path);
 
-      expect(localTree.opened).toBeTruthy();
+      expect(localTree.opened).toBe(true);
 
       mutations.TOGGLE_TREE_OPEN(localState, localTree.path);
 
-      expect(localTree.opened).toBeFalsy();
+      expect(localTree.opened).toBe(false);
     });
   });
 
diff --git a/spec/frontend/ide/stores/mutations_spec.js b/spec/frontend/ide/stores/mutations_spec.js
index 4602a0837e0..4117f2648bd 100644
--- a/spec/frontend/ide/stores/mutations_spec.js
+++ b/spec/frontend/ide/stores/mutations_spec.js
@@ -30,13 +30,13 @@ describe('Multi-file store mutations', () => {
         entry,
       });
 
-      expect(entry.loading).toBeTruthy();
+      expect(entry.loading).toBe(true);
 
       mutations.TOGGLE_LOADING(localState, {
         entry,
       });
 
-      expect(entry.loading).toBeFalsy();
+      expect(entry.loading).toBe(false);
     });
 
     it('toggles loading of entry and sets specific value', () => {
@@ -44,14 +44,14 @@ describe('Multi-file store mutations', () => {
         entry,
       });
 
-      expect(entry.loading).toBeTruthy();
+      expect(entry.loading).toBe(true);
 
       mutations.TOGGLE_LOADING(localState, {
         entry,
         forceValue: true,
       });
 
-      expect(entry.loading).toBeTruthy();
+      expect(entry.loading).toBe(true);
     });
   });
 
diff --git a/spec/frontend/ide/utils_spec.js b/spec/frontend/ide/utils_spec.js
index fd9d481251d..4efc0ac6028 100644
--- a/spec/frontend/ide/utils_spec.js
+++ b/spec/frontend/ide/utils_spec.js
@@ -1,4 +1,5 @@
 import { languages } from 'monaco-editor';
+import { setDiagnosticsOptions as yamlDiagnosticsOptions } from 'monaco-yaml';
 import {
   isTextFile,
   registerLanguages,
@@ -203,7 +204,6 @@ describe('WebIDE utils', () => {
       };
 
       jest.spyOn(languages.json.jsonDefaults, 'setDiagnosticsOptions');
-      jest.spyOn(languages.yaml.yamlDefaults, 'setDiagnosticsOptions');
     });
 
     it('registers the given schemas with monaco for both json and yaml languages', () => {
@@ -212,7 +212,7 @@ describe('WebIDE utils', () => {
       expect(languages.json.jsonDefaults.setDiagnosticsOptions).toHaveBeenCalledWith(
         expect.objectContaining({ schemas: [schema] }),
       );
-      expect(languages.yaml.yamlDefaults.setDiagnosticsOptions).toHaveBeenCalledWith(
+      expect(yamlDiagnosticsOptions).toHaveBeenCalledWith(
         expect.objectContaining({ schemas: [schema] }),
       );
     });
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 f97ea046cbe..a0115cb9349 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
@@ -5,13 +5,14 @@ import VueApollo from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import httpStatus from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import { STATUSES } from '~/import_entities/constants';
 import { i18n, ROOT_NAMESPACE } from '~/import_entities/import_groups/constants';
 import ImportTable from '~/import_entities/import_groups/components/import_table.vue';
 import importGroupsMutation from '~/import_entities/import_groups/graphql/mutations/import_groups.mutation.graphql';
+import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
 
 import { availableNamespacesFixture, generateFakeEntry } from '../graphql/fixtures';
@@ -246,7 +247,7 @@ describe('import table', () => {
     await findImportButtons()[0].trigger('click');
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith(
+    expect(createAlert).toHaveBeenCalledWith(
       expect.objectContaining({
         message: i18n.ERROR_IMPORT,
       }),
@@ -528,6 +529,17 @@ describe('import table', () => {
     });
   });
 
+  it('renders pagination bar with storage key', async () => {
+    createComponent({
+      bulkImportSourceGroups: () => new Promise(() => {}),
+    });
+    await waitForPromises();
+
+    expect(wrapper.getComponent(PaginationBar).props('storageKey')).toBe(
+      ImportTable.LOCAL_STORAGE_KEY,
+    );
+  });
+
   describe('unavailable features warning', () => {
     it('renders alert when there are unavailable features', async () => {
       createComponent({
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 01f976562c6..13d2a95ca14 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { STATUSES } from '~/import_entities/constants';
 import { StatusPoller } from '~/import_entities/import_groups/services/status_poller';
 import axios from '~/lib/utils/axios_utils';
@@ -83,7 +83,7 @@ describe('Bulk import status poller', () => {
   it('when error occurs shows flash with error', () => {
     const [[pollConfig]] = Poll.mock.calls;
     pollConfig.errorCallback();
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('when success response arrives updates relevant group status', () => {
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
new file mode 100644
index 00000000000..68716600592
--- /dev/null
+++ b/spec/frontend/import_entities/import_projects/components/advanced_settings_spec.js
@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import { GlFormCheckbox } from '@gitlab/ui';
+import AdvancedSettingsPanel from '~/import_entities/import_projects/components/advanced_settings.vue';
+
+describe('Import Advanced Settings', () => {
+  let wrapper;
+  const OPTIONAL_STAGES = [
+    { name: 'stage1', label: 'Stage 1' },
+    { name: 'stage2', label: 'Stage 2', details: 'Extra details' },
+  ];
+
+  const createComponent = () => {
+    wrapper = mount(AdvancedSettingsPanel, {
+      propsData: {
+        stages: OPTIONAL_STAGES,
+        value: {
+          stage1: false,
+          stage2: false,
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GLFormCheckbox for each optional stage', () => {
+    expect(wrapper.findAllComponents(GlFormCheckbox)).toHaveLength(OPTIONAL_STAGES.length);
+  });
+
+  it('renders label for each optional stage', () => {
+    wrapper.findAllComponents(GlFormCheckbox).wrappers.forEach((w, idx) => {
+      expect(w.text()).toContain(OPTIONAL_STAGES[idx].label);
+    });
+  });
+
+  it('renders details for stage with details', () => {
+    expect(wrapper.findAllComponents(GlFormCheckbox).at(1).text()).toContain(
+      OPTIONAL_STAGES[1].details,
+    );
+  });
+
+  it('emits new stages selection state when checkbox is changed', () => {
+    const firstCheckbox = wrapper.findComponent(GlFormCheckbox);
+
+    firstCheckbox.vm.$emit('change', true);
+
+    expect(wrapper.emitted('input')[0]).toStrictEqual([
+      {
+        stage1: true,
+        stage2: false,
+      },
+    ]);
+  });
+});
diff --git a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
index c0ae4294e3d..53807167fe8 100644
--- a/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
+++ b/spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js
@@ -5,6 +5,7 @@ import Vuex from 'vuex';
 import { STATUSES } from '~/import_entities/constants';
 import ImportProjectsTable from '~/import_entities/import_projects/components/import_projects_table.vue';
 import ProviderRepoTableRow from '~/import_entities/import_projects/components/provider_repo_table_row.vue';
+import AdvancedSettingsPanel from '~/import_entities/import_projects/components/advanced_settings.vue';
 import * as getters from '~/import_entities/import_projects/store/getters';
 import state from '~/import_entities/import_projects/store/state';
 
@@ -45,6 +46,7 @@ describe('ImportProjectsTable', () => {
     slots,
     filterable,
     paginatable,
+    optionalStages,
   } = {}) {
     Vue.use(Vuex);
 
@@ -71,6 +73,7 @@ describe('ImportProjectsTable', () => {
         providerTitle,
         filterable,
         paginatable,
+        optionalStages,
       },
       slots,
       stubs: {
@@ -271,4 +274,23 @@ describe('ImportProjectsTable', () => {
       expect(wrapper.text().includes(INCOMPATIBLE_TEXT)).toBe(shouldRenderSlot);
     },
   );
+
+  it('should not render advanced settings panel when no optional steps are passed', () => {
+    createComponent({ state: { providerRepos: [providerRepo] } });
+
+    expect(wrapper.findComponent(AdvancedSettingsPanel).exists()).toBe(false);
+  });
+
+  it('should render advanced settings panel when no optional steps are passed', () => {
+    const OPTIONAL_STAGES = [{ name: 'step1', label: 'Step 1' }];
+    createComponent({ state: { providerRepos: [providerRepo] }, optionalStages: OPTIONAL_STAGES });
+
+    expect(wrapper.findComponent(AdvancedSettingsPanel).exists()).toBe(true);
+    expect(wrapper.findComponent(AdvancedSettingsPanel).props('stages')).toStrictEqual(
+      OPTIONAL_STAGES,
+    );
+    expect(wrapper.findComponent(AdvancedSettingsPanel).props('value')).toStrictEqual({
+      step1: false,
+    });
+  });
 });
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 17a07b1e9f9..40934e90b78 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
@@ -44,7 +44,7 @@ describe('ProviderRepoTableRow', () => {
 
     wrapper = shallowMount(ProviderRepoTableRow, {
       store,
-      propsData: { availableNamespaces, userNamespace, ...props },
+      propsData: { availableNamespaces, userNamespace, optionalStages: {}, ...props },
     });
   }
 
@@ -92,10 +92,24 @@ describe('ProviderRepoTableRow', () => {
 
       await nextTick();
 
-      const { calls } = fetchImport.mock;
+      expect(fetchImport).toHaveBeenCalledWith(expect.anything(), {
+        repoId: repo.importSource.id,
+        optionalStages: {},
+      });
+    });
+
+    it('includes optionalStages to import', async () => {
+      const OPTIONAL_STAGES = { stage1: true, stage2: false };
+      await wrapper.setProps({ optionalStages: OPTIONAL_STAGES });
+
+      findImportButton().vm.$emit('click');
+
+      await nextTick();
 
-      expect(calls).toHaveLength(1);
-      expect(calls[0][1]).toBe(repo.importSource.id);
+      expect(fetchImport).toHaveBeenCalledWith(expect.anything(), {
+        repoId: repo.importSource.id,
+        optionalStages: OPTIONAL_STAGES,
+      });
     });
   });
 
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 0ebe8525b5a..e154863f339 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { STATUSES } from '~/import_entities/constants';
 import actionsFactory from '~/import_entities/import_projects/store/actions';
 import { getImportTarget } from '~/import_entities/import_projects/store/getters';
@@ -155,7 +155,7 @@ describe('import_projects store actions', () => {
           [],
         );
 
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'Provider rate limit exceeded. Try again later',
         });
       });
@@ -198,7 +198,7 @@ describe('import_projects store actions', () => {
 
       return testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -222,7 +222,7 @@ describe('import_projects store actions', () => {
 
       await testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -234,7 +234,7 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Importing the project failed',
       });
     });
@@ -245,7 +245,7 @@ describe('import_projects store actions', () => {
 
       await testAction(
         fetchImport,
-        importRepoId,
+        { repoId: importRepoId, optionalStages: {} },
         localState,
         [
           {
@@ -257,7 +257,7 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: `Importing the project failed: ${ERROR_MESSAGE}`,
       });
     });
@@ -358,7 +358,7 @@ describe('import_projects store actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Requesting namespaces failed',
       });
     });
@@ -366,14 +366,22 @@ describe('import_projects store actions', () => {
 
   describe('importAll', () => {
     it('dispatches multiple fetchImport actions', async () => {
+      const OPTIONAL_STAGES = { stage1: true, stage2: false };
+
       await testAction(
         importAll,
-        null,
+        { optionalStages: OPTIONAL_STAGES },
         localState,
         [],
         [
-          { type: 'fetchImport', payload: importRepoId },
-          { type: 'fetchImport', payload: otherImportRepoId },
+          {
+            type: 'fetchImport',
+            payload: { repoId: importRepoId, optionalStages: OPTIONAL_STAGES },
+          },
+          {
+            type: 'fetchImport',
+            payload: { repoId: otherImportRepoId, optionalStages: OPTIONAL_STAGES },
+          },
         ],
       );
     });
diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 21e57a2e33c..0a3beee0507 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -18,6 +18,7 @@ import {
   integrationLevels,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
   I18N_DEFAULT_ERROR_MESSAGE,
+  INTEGRATION_FORM_TYPE_SLACK,
   billingPlans,
   billingPlanNames,
 } from '~/integrations/constants';
@@ -88,6 +89,7 @@ describe('IntegrationForm', () => {
   const findConnectionSection = () => findAllSections().at(0);
   const findConnectionSectionComponent = () =>
     findConnectionSection().findComponent(IntegrationSectionConnection);
+  const findHelpHtml = () => wrapper.findByTestId('help-html');
 
   beforeEach(() => {
     mockAxios = new MockAdapter(axios);
@@ -712,5 +714,48 @@ describe('IntegrationForm', () => {
         expect(refreshCurrentPage).toHaveBeenCalledTimes(1);
       });
     });
+
+    describe('Help and sections rendering', () => {
+      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}
+      `(
+        '$sections sections, and "$helpHtml" helpHtml when the FF is "$flagIsOn" for "$integration" integration',
+        ({ integration, flagIsOn, helpHtml, sections, shouldShowSections, shouldShowHelp }) => {
+          createComponent({
+            provide: {
+              helpHtml,
+              glFeatures: { integrationSlackAppNotifications: flagIsOn },
+            },
+            customStateProps: {
+              sections,
+              type: integration,
+            },
+          });
+          expect(findAllSections().length > 0).toEqual(shouldShowSections);
+          expect(findHelpHtml().exists()).toBe(shouldShowHelp);
+          if (shouldShowHelp) {
+            expect(findHelpHtml().html()).toContain(helpHtml);
+          }
+        },
+      );
+    });
   });
 });
diff --git a/spec/frontend/issuable/bulk_update_sidebar/components/status_select_spec.js b/spec/frontend/issuable/bulk_update_sidebar/components/status_dropdown_spec.js
index 8ecbf41ce56..2f281cb88f9 100644
--- a/spec/frontend/issuable/bulk_update_sidebar/components/status_select_spec.js
+++ b/spec/frontend/issuable/bulk_update_sidebar/components/status_dropdown_spec.js
@@ -1,9 +1,9 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import StatusSelect from '~/issuable/bulk_update_sidebar/components/status_select.vue';
-import { ISSUE_STATUS_SELECT_OPTIONS } from '~/issuable/bulk_update_sidebar/constants';
+import StatusDropdown from '~/issuable/bulk_update_sidebar/components/status_dropdown.vue';
+import { statusDropdownOptions } from '~/issuable/bulk_update_sidebar/constants';
 
-describe('StatusSelect', () => {
+describe('SubscriptionsDropdown component', () => {
   let wrapper;
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
@@ -11,7 +11,7 @@ describe('StatusSelect', () => {
   const findHiddenInput = () => wrapper.find('input');
 
   function createComponent() {
-    wrapper = shallowMount(StatusSelect);
+    wrapper = shallowMount(StatusDropdown);
   }
 
   afterEach(() => {
@@ -45,14 +45,12 @@ describe('StatusSelect', () => {
 
     it('updates value of the hidden input', () => {
       expect(findHiddenInput().attributes('value')).toBe(
-        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].value,
+        statusDropdownOptions[selectItemAtIndex].value,
       );
     });
 
     it('updates the dropdown text prop', () => {
-      expect(findDropdown().props('text')).toBe(
-        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].text,
-      );
+      expect(findDropdown().props('text')).toBe(statusDropdownOptions[selectItemAtIndex].text);
     });
 
     it('sets dropdown item `is-checked` prop to `true`', () => {
diff --git a/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js b/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js
new file mode 100644
index 00000000000..56ef7a1ed39
--- /dev/null
+++ b/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js
@@ -0,0 +1,76 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import SubscriptionsDropdown from '~/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue';
+import { subscriptionsDropdownOptions } from '~/issuable/bulk_update_sidebar/constants';
+
+describe('SubscriptionsDropdown component', () => {
+  let wrapper;
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findHiddenInput = () => wrapper.find('input');
+
+  function createComponent() {
+    wrapper = shallowMount(SubscriptionsDropdown);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with no value selected', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('hidden input value is undefined', () => {
+      expect(findHiddenInput().attributes('value')).toBeUndefined();
+    });
+
+    it('renders default text', () => {
+      expect(findDropdown().props('text')).toBe(SubscriptionsDropdown.i18n.defaultDropdownText);
+    });
+
+    it('renders dropdown items with `is-checked` prop set to `false`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+  });
+
+  describe('when selecting a value', () => {
+    beforeEach(() => {
+      createComponent();
+      findAllDropdownItems().at(0).vm.$emit('click');
+    });
+
+    it('updates value of the hidden input', () => {
+      expect(findHiddenInput().attributes('value')).toBe(subscriptionsDropdownOptions[0].value);
+    });
+
+    it('updates the dropdown text prop', () => {
+      expect(findDropdown().props('text')).toBe(subscriptionsDropdownOptions[0].text);
+    });
+
+    it('sets dropdown item `is-checked` prop to `true`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(true);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+
+    describe('when selecting the value that is already selected', () => {
+      it('clears dropdown selection', async () => {
+        findAllDropdownItems().at(0).vm.$emit('click');
+        await nextTick();
+        const dropdownItems = findAllDropdownItems();
+
+        expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+        expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+        expect(findDropdown().props('text')).toBe(SubscriptionsDropdown.i18n.defaultDropdownText);
+      });
+    });
+  });
+});
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 b518d2fbdec..680dbd68493 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { linkedIssueTypesMap } from '~/related_issues/constants';
 import RelatedIssuesBlock from '~/related_issues/components/related_issues_block.vue';
@@ -136,7 +136,7 @@ describe('RelatedIssuesRoot', () => {
         await createComponent();
         jest.spyOn(wrapper.vm, 'processAllReferences');
         jest.spyOn(wrapper.vm.service, 'addRelatedIssues');
-        createFlash.mockClear();
+        createAlert.mockClear();
       });
 
       it('processes references before submitting', () => {
@@ -207,12 +207,12 @@ describe('RelatedIssuesRoot', () => {
         mock.onPost(defaultProps.endpoint).reply(409, { message });
         wrapper.vm.store.setPendingReferences([issuable1.reference, issuable2.reference]);
 
-        expect(createFlash).not.toHaveBeenCalled();
+        expect(createAlert).not.toHaveBeenCalled();
 
         findRelatedIssuesBlock().vm.$emit('addIssuableFormSubmit', input);
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({ message });
+        expect(createAlert).toHaveBeenCalledWith({ message });
       });
     });
 
diff --git a/spec/frontend/issues/show/components/edited_spec.js b/spec/frontend/issues/show/components/edited_spec.js
index 8a240c38b5f..aa6e0a9dceb 100644
--- a/spec/frontend/issues/show/components/edited_spec.js
+++ b/spec/frontend/issues/show/components/edited_spec.js
@@ -1,7 +1,10 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { getTimeago } from '~/lib/utils/datetime_utility';
 import Edited from '~/issues/show/components/edited.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
+const timeago = getTimeago();
+
 describe('Edited component', () => {
   let wrapper;
 
@@ -9,7 +12,8 @@ describe('Edited component', () => {
   const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
   const formatText = (text) => text.trim().replace(/\s\s+/g, ' ');
 
-  const mountComponent = (propsData) => shallowMount(Edited, { propsData });
+  const mountComponent = (propsData) => mount(Edited, { propsData });
+  const updatedAt = '2017-05-15T12:31:04.428Z';
 
   afterEach(() => {
     wrapper.destroy();
@@ -17,12 +21,12 @@ describe('Edited component', () => {
 
   it('renders an edited at+by string', () => {
     wrapper = mountComponent({
-      updatedAt: '2017-05-15T12:31:04.428Z',
+      updatedAt,
       updatedByName: 'Some User',
       updatedByPath: '/some_user',
     });
 
-    expect(formatText(wrapper.text())).toBe('Edited by Some User');
+    expect(formatText(wrapper.text())).toBe(`Edited ${timeago.format(updatedAt)} by Some User`);
     expect(findAuthorLink().attributes('href')).toBe('/some_user');
     expect(findTimeAgoTooltip().exists()).toBe(true);
   });
@@ -40,10 +44,10 @@ describe('Edited component', () => {
 
   it('if no updatedByName and updatedByPath is provided, no user element will be rendered', () => {
     wrapper = mountComponent({
-      updatedAt: '2017-05-15T12:31:04.428Z',
+      updatedAt,
     });
 
-    expect(formatText(wrapper.text())).toBe('Edited');
+    expect(formatText(wrapper.text())).toBe(`Edited ${timeago.format(updatedAt)}`);
     expect(findAuthorLink().exists()).toBe(false);
     expect(findTimeAgoTooltip().exists()).toBe(true);
   });
diff --git a/spec/frontend/issues/show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js
index 61433607a2b..cd4d422583b 100644
--- a/spec/frontend/issues/show/components/fields/description_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_spec.js
@@ -2,13 +2,15 @@ import { shallowMount } from '@vue/test-utils';
 import DescriptionField from '~/issues/show/components/fields/description.vue';
 import eventHub from '~/issues/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 
 describe('Description field component', () => {
   let wrapper;
 
   const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
+  const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
 
-  const mountComponent = (description = 'test') =>
+  const mountComponent = ({ description = 'test', contentEditorOnIssues = false } = {}) =>
     shallowMount(DescriptionField, {
       attachTo: document.body,
       propsData: {
@@ -17,6 +19,11 @@ describe('Description field component', () => {
         quickActionsDocsPath: '/',
         value: description,
       },
+      provide: {
+        glFeatures: {
+          contentEditorOnIssues,
+        },
+      },
       stubs: {
         MarkdownField,
       },
@@ -40,7 +47,7 @@ describe('Description field component', () => {
   it('renders markdown field with a markdown description', () => {
     const markdown = '**test**';
 
-    wrapper = mountComponent(markdown);
+    wrapper = mountComponent({ description: markdown });
 
     expect(findTextarea().element.value).toBe(markdown);
   });
@@ -66,4 +73,52 @@ describe('Description field component', () => {
 
     expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
+
+  describe('when contentEditorOnIssues feature flag is on', () => {
+    beforeEach(() => {
+      wrapper = mountComponent({ contentEditorOnIssues: true });
+    });
+
+    it('uses the MarkdownEditor component to edit markdown', () => {
+      expect(findMarkdownEditor().props()).toEqual(
+        expect.objectContaining({
+          value: 'test',
+          renderMarkdownPath: '/',
+          markdownDocsPath: '/',
+          quickActionsDocsPath: expect.any(String),
+          initOnAutofocus: true,
+          supportsQuickActions: true,
+          enableAutocomplete: true,
+        }),
+      );
+    });
+
+    it('triggers update with meta+enter', () => {
+      findMarkdownEditor().vm.$emit('keydown', {
+        type: 'keydown',
+        keyCode: 13,
+        metaKey: true,
+      });
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
+    });
+
+    it('triggers update with ctrl+enter', () => {
+      findMarkdownEditor().vm.$emit('keydown', {
+        type: 'keydown',
+        keyCode: 13,
+        ctrlKey: true,
+      });
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
+    });
+
+    it('emits input event when MarkdownEditor emits input event', () => {
+      const markdown = 'markdown';
+
+      findMarkdownEditor().vm.$emit('input', markdown);
+
+      expect(wrapper.emitted('input')).toEqual([[markdown]]);
+    });
+  });
 });
diff --git a/spec/frontend/issues/show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js
index 5c0fe991b22..aedb974cbd0 100644
--- a/spec/frontend/issues/show/components/form_spec.js
+++ b/spec/frontend/issues/show/components/form_spec.js
@@ -1,14 +1,16 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Autosave from '~/autosave';
+import { getDraft, updateDraft, clearDraft, getLockVersion } from '~/lib/utils/autosave';
 import DescriptionTemplate from '~/issues/show/components/fields/description_template.vue';
+import IssuableTitleField from '~/issues/show/components/fields/title.vue';
+import DescriptionField from '~/issues/show/components/fields/description.vue';
 import IssueTypeField from '~/issues/show/components/fields/type.vue';
 import formComponent from '~/issues/show/components/form.vue';
 import LockedWarning from '~/issues/show/components/locked_warning.vue';
 import eventHub from '~/issues/show/event_hub';
 
-jest.mock('~/autosave');
+jest.mock('~/lib/utils/autosave');
 
 describe('Inline edit form component', () => {
   let wrapper;
@@ -38,9 +40,14 @@ describe('Inline edit form component', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        DescriptionField,
+      },
     });
   };
 
+  const findTitleField = () => wrapper.findComponent(IssuableTitleField);
+  const findDescriptionField = () => wrapper.findComponent(DescriptionField);
   const findDescriptionTemplate = () => wrapper.findComponent(DescriptionTemplate);
   const findIssuableTypeField = () => wrapper.findComponent(IssueTypeField);
   const findLockedWarning = () => wrapper.findComponent(LockedWarning);
@@ -108,16 +115,34 @@ describe('Inline edit form component', () => {
   });
 
   describe('autosave', () => {
-    let spy;
-
     beforeEach(() => {
-      spy = jest.spyOn(Autosave.prototype, 'reset');
+      getDraft.mockImplementation((autosaveKey) => {
+        return autosaveKey[autosaveKey.length - 1];
+      });
     });
 
-    it('initialized Autosave on mount', () => {
+    it('initializes title and description fields with saved drafts', () => {
       createComponent();
 
-      expect(Autosave).toHaveBeenCalledTimes(2);
+      expect(findTitleField().props().value).toBe('title');
+      expect(findDescriptionField().props().value).toBe('description');
+    });
+
+    it('updates local storage drafts when title and description change', () => {
+      const updatedTitle = 'updated title';
+      const updatedDescription = 'updated description';
+
+      createComponent();
+
+      findTitleField().vm.$emit('input', updatedTitle);
+      findDescriptionField().vm.$emit('input', updatedDescription);
+
+      expect(updateDraft).toHaveBeenCalledWith(expect.any(Array), updatedTitle);
+      expect(updateDraft).toHaveBeenCalledWith(
+        expect.any(Array),
+        updatedDescription,
+        defaultProps.formState.lock_version,
+      );
     });
 
     it('calls reset on autosave when eventHub emits appropriate events', () => {
@@ -125,33 +150,60 @@ describe('Inline edit form component', () => {
 
       eventHub.$emit('close.form');
 
-      expect(spy).toHaveBeenCalledTimes(2);
+      expect(clearDraft).toHaveBeenCalledTimes(2);
 
       eventHub.$emit('delete.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(4);
+      expect(clearDraft).toHaveBeenCalledTimes(4);
 
       eventHub.$emit('update.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(6);
+      expect(clearDraft).toHaveBeenCalledTimes(6);
     });
 
     describe('outdated description', () => {
+      const clientSideMockVersion = 'lock version from local storage';
+      const serverSideMockVersion = 'lock version from server';
+
+      const mockGetLockVersion = () => getLockVersion.mockResolvedValue(clientSideMockVersion);
+
       it('does not show warning if lock version from server is the same as the local lock version', () => {
         createComponent();
         expect(findAlert().exists()).toBe(false);
       });
 
       it('shows warning if lock version from server differs than the local lock version', async () => {
-        Autosave.prototype.getSavedLockVersion.mockResolvedValue('lock version from local storage');
+        mockGetLockVersion();
 
         createComponent({
-          formState: { ...defaultProps.formState, lock_version: 'lock version from server' },
+          formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
         });
 
         await nextTick();
         expect(findAlert().exists()).toBe(true);
       });
+
+      describe('when saved draft is discarded', () => {
+        beforeEach(async () => {
+          mockGetLockVersion();
+
+          createComponent({
+            formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
+          });
+
+          await nextTick();
+
+          findAlert().vm.$emit('secondaryAction');
+        });
+
+        it('hides the warning alert', () => {
+          expect(findAlert().exists()).toBe(false);
+        });
+
+        it('clears the description draft', () => {
+          expect(clearDraft).toHaveBeenCalledWith(expect.any(Array));
+        });
+      });
     });
   });
 });
diff --git a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
index d92aeabba0f..458c1c3f858 100644
--- a/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
+++ b/spec/frontend/issues/show/components/incidents/incident_tabs_spec.js
@@ -5,7 +5,6 @@ import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 import DescriptionComponent from '~/issues/show/components/description.vue';
 import HighlightBar from '~/issues/show/components/incidents/highlight_bar.vue';
 import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue';
-import TimelineTab from '~/issues/show/components/incidents/timeline_events_tab.vue';
 import INVALID_URL from '~/lib/utils/invalid_url';
 import Tracking from '~/tracking';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
@@ -38,7 +37,6 @@ describe('Incident Tabs component', () => {
             projectId: '',
             issuableId: '',
             uploadMetricsFeatureAvailable: true,
-            glFeatures: { incidentTimeline: true },
           },
           data() {
             return { alert: mockAlert, ...data };
@@ -67,7 +65,6 @@ describe('Incident Tabs component', () => {
   const findAlertDetailsComponent = () => wrapper.findComponent(AlertDetailsTable);
   const findDescriptionComponent = () => wrapper.findComponent(DescriptionComponent);
   const findHighlightBarComponent = () => wrapper.findComponent(HighlightBar);
-  const findTimelineTab = () => wrapper.findComponent(TimelineTab);
 
   describe('empty state', () => {
     beforeEach(() => {
@@ -128,20 +125,4 @@ describe('Incident Tabs component', () => {
       expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
   });
-
-  describe('incident timeline tab', () => {
-    beforeEach(() => {
-      mountComponent();
-    });
-
-    it('renders the timeline tab when feature flag is enabled', () => {
-      expect(findTimelineTab().exists()).toBe(true);
-    });
-
-    it('does not render timeline tab when feature flag is disabled', () => {
-      mountComponent({}, { provide: { glFeatures: { incidentTimeline: false } } });
-
-      expect(findTimelineTab().exists()).toBe(false);
-    });
-  });
 });
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 7f086a276f7..2e7449974e5 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
@@ -22,12 +22,15 @@ describe('Timeline events form', () => {
   useFakeDate(fakeDate);
   let wrapper;
 
-  const mountComponent = ({ mountMethod = shallowMountExtended }) => {
+  const mountComponent = ({ mountMethod = shallowMountExtended } = {}) => {
     wrapper = mountMethod(TimelineEventsForm, {
       propsData: {
         showSaveAndAdd: true,
         isEventProcessed: false,
       },
+      stubs: {
+        GlButton: true,
+      },
     });
   };
 
@@ -48,17 +51,18 @@ describe('Timeline events form', () => {
     findHourInput().setValue(5);
     findMinuteInput().setValue(45);
   };
+  const findTextarea = () => wrapper.findByTestId('input-note');
 
   const submitForm = async () => {
-    findSubmitButton().trigger('click');
+    findSubmitButton().vm.$emit('click');
     await waitForPromises();
   };
   const submitFormAndAddAnother = async () => {
-    findSubmitAndAddButton().trigger('click');
+    findSubmitAndAddButton().vm.$emit('click');
     await waitForPromises();
   };
   const cancelForm = async () => {
-    findCancelButton().trigger('click');
+    findCancelButton().vm.$emit('click');
     await waitForPromises();
   };
 
@@ -118,5 +122,17 @@ describe('Timeline events form', () => {
       expect(findHourInput().element.value).toBe('0');
       expect(findMinuteInput().element.value).toBe('0');
     });
+
+    it('should disable the save buttons when event content does not exist', async () => {
+      expect(findSubmitButton().props('disabled')).toBe(true);
+      expect(findSubmitAndAddButton().props('disabled')).toBe(true);
+    });
+
+    it('should enable the save buttons when event content exists', async () => {
+      await findTextarea().setValue('hello');
+
+      expect(findSubmitButton().props('disabled')).toBe(false);
+      expect(findSubmitAndAddButton().props('disabled')).toBe(false);
+    });
   });
 });
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 cc8346253ee..d41031f9eaa 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
@@ -238,7 +238,7 @@ describe('NewBranchForm', () => {
         scenario                 | mutation                              | alertTitle                          | alertText
         ${'with errors-as-data'} | ${mockCreateBranchMutationWithErrors} | ${CREATE_BRANCH_ERROR_WITH_CONTEXT} | ${mockCreateBranchMutationResponseWithErrors.data.createBranch.errors[0]}
         ${'top-level error'}     | ${mockCreateBranchMutationFailed}     | ${''}                               | ${CREATE_BRANCH_ERROR_GENERIC}
-      `('', ({ mutation, alertTitle, alertText }) => {
+      `('given $scenario', ({ mutation, alertTitle, alertText }) => {
         beforeEach(async () => {
           createComponent({
             mockApollo: createMockApolloProvider({
diff --git a/spec/frontend/jira_connect/subscriptions/pkce_spec.js b/spec/frontend/jira_connect/subscriptions/pkce_spec.js
index 4ee88059b7a..671922c36d8 100644
--- a/spec/frontend/jira_connect/subscriptions/pkce_spec.js
+++ b/spec/frontend/jira_connect/subscriptions/pkce_spec.js
@@ -1,11 +1,7 @@
 import crypto from 'crypto';
-import { TextEncoder, TextDecoder } from 'util';
 
 import { createCodeVerifier, createCodeChallenge } from '~/jira_connect/subscriptions/pkce';
 
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder;
-
 describe('pkce', () => {
   beforeAll(() => {
     Object.defineProperty(global.self, 'crypto', {
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 8c724a8030b..109cef6f817 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -12,7 +12,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query.graphql';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
@@ -229,7 +229,7 @@ describe('Job table app', () => {
 
       await findFilteredSearch().vm.$emit('filterJobsBySearch', ['raw text']);
 
-      expect(createFlash).toHaveBeenCalledWith(expectedWarning);
+      expect(createAlert).toHaveBeenCalledWith(expectedWarning);
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
     });
 
diff --git a/spec/frontend/labels/components/promote_label_modal_spec.js b/spec/frontend/labels/components/promote_label_modal_spec.js
index 8cfaba6f98a..8953e3cbcd8 100644
--- a/spec/frontend/labels/components/promote_label_modal_spec.js
+++ b/spec/frontend/labels/components/promote_label_modal_spec.js
@@ -1,98 +1,100 @@
-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlModal, GlSprintf } from '@gitlab/ui';
+import AxiosMockAdapter from 'axios-mock-adapter';
+
 import { TEST_HOST } from 'helpers/test_constants';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { stubComponent } from 'helpers/stub_component';
+
 import axios from '~/lib/utils/axios_utils';
-import promoteLabelModal from '~/labels/components/promote_label_modal.vue';
+import PromoteLabelModal from '~/labels/components/promote_label_modal.vue';
 import eventHub from '~/labels/event_hub';
 
 describe('Promote label modal', () => {
-  let vm;
-  const Component = Vue.extend(promoteLabelModal);
+  let wrapper;
+  let axiosMock;
+
   const labelMockData = {
     labelTitle: 'Documentation',
-    labelColor: '#5cb85c',
-    labelTextColor: '#ffffff',
+    labelColor: 'rgb(92, 184, 92)',
+    labelTextColor: 'rgb(255, 255, 255)',
     url: `${TEST_HOST}/dummy/promote/labels`,
     groupName: 'group',
   };
 
-  describe('Modal title and description', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, labelMockData);
+  const createComponent = () => {
+    wrapper = shallowMount(PromoteLabelModal, {
+      propsData: labelMockData,
+      stubs: {
+        GlSprintf,
+        GlModal: stubComponent(GlModal, {
+          template: `<div><slot name="modal-title"></slot><slot></slot></div>`,
+        }),
+      },
     });
+  };
 
-    afterEach(() => {
-      vm.$destroy();
-    });
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+    createComponent();
+  });
 
+  afterEach(() => {
+    axiosMock.reset();
+    wrapper.destroy();
+  });
+
+  describe('Modal title and description', () => {
     it('contains the proper description', () => {
-      expect(vm.text).toContain(
+      expect(wrapper.text()).toContain(
         `Promoting ${labelMockData.labelTitle} will make it available for all projects inside ${labelMockData.groupName}`,
       );
     });
 
     it('contains a label span with the color', () => {
-      expect(vm.labelColor).not.toBe(null);
-      expect(vm.labelColor).toBe(labelMockData.labelColor);
-      expect(vm.labelTitle).toBe(labelMockData.labelTitle);
+      const label = wrapper.find('.modal-title-with-label .label');
+
+      expect(label.element.style.backgroundColor).toBe(labelMockData.labelColor);
+      expect(label.element.style.color).toBe(labelMockData.labelTextColor);
+      expect(label.text()).toBe(labelMockData.labelTitle);
     });
   });
 
   describe('When requesting a label promotion', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, {
-        ...labelMockData,
-      });
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
     });
 
-    afterEach(() => {
-      vm.$destroy();
-    });
-
-    it('redirects when a label is promoted', () => {
+    it('redirects when a label is promoted', async () => {
       const responseURL = `${TEST_HOST}/dummy/endpoint`;
-      jest.spyOn(axios, 'post').mockImplementation((url) => {
-        expect(url).toBe(labelMockData.url);
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'promoteLabelModal.requestStarted',
-          labelMockData.url,
-        );
-        return Promise.resolve({
-          request: {
-            responseURL,
-          },
-        });
-      });
+      axiosMock.onPost(labelMockData.url).reply(200, { url: responseURL });
 
-      return vm.onSubmit().then(() => {
-        expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', {
-          labelUrl: labelMockData.url,
-          successful: true,
-        });
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith(
+        'promoteLabelModal.requestStarted',
+        labelMockData.url,
+      );
+
+      await axios.waitForAll();
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', {
+        labelUrl: labelMockData.url,
+        successful: true,
       });
     });
 
-    it('displays an error if promoting a label failed', () => {
+    it('displays an error if promoting a label failed', async () => {
       const dummyError = new Error('promoting label failed');
       dummyError.response = { status: 500 };
+      axiosMock.onPost(labelMockData.url).reply(500, { error: dummyError });
 
-      jest.spyOn(axios, 'post').mockImplementation((url) => {
-        expect(url).toBe(labelMockData.url);
-        expect(eventHub.$emit).toHaveBeenCalledWith(
-          'promoteLabelModal.requestStarted',
-          labelMockData.url,
-        );
+      wrapper.findComponent(GlModal).vm.$emit('primary');
 
-        return Promise.reject(dummyError);
-      });
+      await axios.waitForAll();
 
-      return vm.onSubmit().catch((error) => {
-        expect(error).toBe(dummyError);
-        expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', {
-          labelUrl: labelMockData.url,
-          successful: false,
-        });
+      expect(eventHub.$emit).toHaveBeenCalledWith('promoteLabelModal.requestFinished', {
+        labelUrl: labelMockData.url,
+        successful: false,
       });
     });
   });
diff --git a/spec/frontend/lib/dompurify_spec.js b/spec/frontend/lib/dompurify_spec.js
index 5523cc0606e..412408ce377 100644
--- a/spec/frontend/lib/dompurify_spec.js
+++ b/spec/frontend/lib/dompurify_spec.js
@@ -1,4 +1,4 @@
-import { sanitize } from '~/lib/dompurify';
+import { sanitize, defaultConfig } from '~/lib/dompurify';
 
 // GDK
 const rootGon = {
@@ -45,7 +45,7 @@ const invalidProtocolUrls = [
 /* eslint-enable no-script-url */
 const validProtocolUrls = ['slack://open', 'x-devonthink-item://90909', 'x-devonthink-item:90909'];
 
-const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
+const forbiddenDataAttrs = defaultConfig.FORBID_ATTR;
 const acceptedDataAttrs = ['data-random', 'data-custom'];
 
 describe('~/lib/dompurify', () => {
diff --git a/spec/frontend/lib/utils/autosave_spec.js b/spec/frontend/lib/utils/autosave_spec.js
index 12e97f6cdec..afb49dd6db4 100644
--- a/spec/frontend/lib/utils/autosave_spec.js
+++ b/spec/frontend/lib/utils/autosave_spec.js
@@ -1,32 +1,42 @@
-import { clearDraft, getDraft, updateDraft } from '~/lib/utils/autosave';
+import { clearDraft, getDraft, updateDraft, getLockVersion } from '~/lib/utils/autosave';
 
 describe('autosave utils', () => {
   const autosaveKey = 'dummy-autosave-key';
   const text = 'some dummy text';
+  const lockVersion = '2';
+  const normalizedAutosaveKey = `autosave/${autosaveKey}`;
+  const lockVersionKey = `autosave/${autosaveKey}/lockVersion`;
 
   describe('clearDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
+      localStorage.setItem(lockVersionKey, lockVersion);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
     it('removes the draft from localStorage', () => {
       clearDraft(autosaveKey);
 
-      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(null);
+      expect(localStorage.getItem(normalizedAutosaveKey)).toBe(null);
+    });
+
+    it('removes the lockVersion from localStorage', () => {
+      clearDraft(autosaveKey);
+
+      expect(localStorage.getItem(lockVersionKey)).toBe(null);
     });
   });
 
   describe('getDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
     it('returns the draft from localStorage', () => {
@@ -36,7 +46,7 @@ describe('autosave utils', () => {
     });
 
     it('returns null if no entry exists in localStorage', () => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
 
       const result = getDraft(autosaveKey);
 
@@ -46,19 +56,44 @@ describe('autosave utils', () => {
 
   describe('updateDraft', () => {
     beforeEach(() => {
-      localStorage.setItem(`autosave/${autosaveKey}`, text);
+      localStorage.setItem(normalizedAutosaveKey, text);
     });
 
     afterEach(() => {
-      localStorage.removeItem(`autosave/${autosaveKey}`);
+      localStorage.removeItem(normalizedAutosaveKey);
     });
 
-    it('removes the draft from localStorage', () => {
+    it('updates the stored draft', () => {
       const newText = 'new text';
 
       updateDraft(autosaveKey, newText);
 
-      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(newText);
+      expect(localStorage.getItem(normalizedAutosaveKey)).toBe(newText);
+    });
+
+    describe('when lockVersion is provided', () => {
+      it('updates the stored lockVersion', () => {
+        const newText = 'new text';
+        const newLockVersion = '2';
+
+        updateDraft(autosaveKey, newText, lockVersion);
+
+        expect(localStorage.getItem(lockVersionKey)).toBe(newLockVersion);
+      });
+    });
+  });
+
+  describe('getLockVersion', () => {
+    beforeEach(() => {
+      localStorage.setItem(lockVersionKey, lockVersion);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(lockVersionKey);
+    });
+
+    it('returns the lockVersion from localStorage', () => {
+      expect(getLockVersion(autosaveKey)).toBe(lockVersion);
     });
   });
 });
diff --git a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
index 018ae12c908..2e0bb6a8dcd 100644
--- a/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
+++ b/spec/frontend/lib/utils/datetime/date_format_utility_spec.js
@@ -145,3 +145,22 @@ describe('durationTimeFormatted', () => {
     expect(utils.durationTimeFormatted(duration)).toBe(expectedOutput);
   });
 });
+
+describe('formatUtcOffset', () => {
+  it.each`
+    offset       | expected
+    ${-32400}    | ${'- 9'}
+    ${'-12600'}  | ${'- 3.5'}
+    ${0}         | ${'0'}
+    ${'10800'}   | ${'+ 3'}
+    ${19800}     | ${'+ 5.5'}
+    ${0}         | ${'0'}
+    ${[]}        | ${'0'}
+    ${{}}        | ${'0'}
+    ${true}      | ${'0'}
+    ${null}      | ${'0'}
+    ${undefined} | ${'0'}
+  `('returns $expected given $offset', ({ offset, expected }) => {
+    expect(utils.formatUtcOffset(offset)).toEqual(expected);
+  });
+});
diff --git a/spec/frontend/lib/utils/text_markdown_spec.js b/spec/frontend/lib/utils/text_markdown_spec.js
index 8d179baa505..9fbb3d0a660 100644
--- a/spec/frontend/lib/utils/text_markdown_spec.js
+++ b/spec/frontend/lib/utils/text_markdown_spec.js
@@ -4,15 +4,30 @@ import {
   keypressNoteText,
   compositionStartNoteText,
   compositionEndNoteText,
+  updateTextForToolbarBtn,
 } from '~/lib/utils/text_markdown';
 import '~/lib/utils/jquery_at_who';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 describe('init markdown', () => {
+  let mdArea;
   let textArea;
+  let indentButton;
+  let outdentButton;
 
   beforeAll(() => {
-    textArea = document.createElement('textarea');
-    document.querySelector('body').appendChild(textArea);
+    setHTMLFixture(
+      `<div class='md-area'>
+        <textarea></textarea>
+        <button data-md-command="indentLines" id="indentButton"></button>
+        <button data-md-command="outdentLines" id="outdentButton"></button>
+      </div>`,
+    );
+    mdArea = document.querySelector('.md-area');
+    textArea = mdArea.querySelector('textarea');
+    indentButton = mdArea.querySelector('#indentButton');
+    outdentButton = mdArea.querySelector('#outdentButton');
+
     textArea.focus();
 
     // needed for the underlying insertText to work
@@ -20,7 +35,7 @@ describe('init markdown', () => {
   });
 
   afterAll(() => {
-    textArea.parentNode.removeChild(textArea);
+    resetHTMLFixture();
   });
 
   describe('insertMarkdownText', () => {
@@ -183,6 +198,7 @@ describe('init markdown', () => {
           textArea.addEventListener('keydown', keypressNoteText);
           textArea.addEventListener('compositionstart', compositionStartNoteText);
           textArea.addEventListener('compositionend', compositionEndNoteText);
+          gon.markdown_automatic_lists = true;
         });
 
         it.each`
@@ -302,19 +318,22 @@ describe('init markdown', () => {
           expect(textArea.value).toEqual(expected);
           expect(textArea.selectionStart).toBe(expected.length);
         });
-      });
-    });
 
-    describe('shifting selected lines left or right', () => {
-      const indentEvent = new KeyboardEvent('keydown', { key: ']', metaKey: true });
-      const outdentEvent = new KeyboardEvent('keydown', { key: '[', metaKey: true });
+        it('does nothing if user preference disabled', () => {
+          const text = '- test';
 
-      beforeEach(() => {
-        textArea.addEventListener('keydown', keypressNoteText);
-        textArea.addEventListener('compositionstart', compositionStartNoteText);
-        textArea.addEventListener('compositionend', compositionEndNoteText);
+          gon.markdown_automatic_lists = false;
+
+          textArea.value = text;
+          textArea.setSelectionRange(text.length, text.length);
+          textArea.dispatchEvent(enterEvent);
+
+          expect(textArea.value).toEqual(text);
+        });
       });
+    });
 
+    describe('shifting selected lines left or right', () => {
       it.each`
         selectionStart | selectionEnd | expected                | expectedSelectionStart | expectedSelectionEnd
         ${0}           | ${0}         | ${'  012\n456\n89'}     | ${2}                   | ${2}
@@ -338,7 +357,7 @@ describe('init markdown', () => {
           textArea.value = text;
           textArea.setSelectionRange(selectionStart, selectionEnd);
 
-          textArea.dispatchEvent(indentEvent);
+          updateTextForToolbarBtn($(indentButton));
 
           expect(textArea.value).toEqual(expected);
           expect(textArea.selectionStart).toEqual(expectedSelectionStart);
@@ -350,7 +369,7 @@ describe('init markdown', () => {
         textArea.value = '012\n\n89';
         textArea.setSelectionRange(4, 4);
 
-        textArea.dispatchEvent(indentEvent);
+        updateTextForToolbarBtn($(indentButton));
 
         expect(textArea.value).toEqual('012\n  \n89');
         expect(textArea.selectionStart).toEqual(6);
@@ -381,7 +400,7 @@ describe('init markdown', () => {
           textArea.value = text;
           textArea.setSelectionRange(selectionStart, selectionEnd);
 
-          textArea.dispatchEvent(outdentEvent);
+          updateTextForToolbarBtn($(outdentButton));
 
           expect(textArea.value).toEqual(expected);
           expect(textArea.selectionStart).toEqual(expectedSelectionStart);
@@ -393,7 +412,7 @@ describe('init markdown', () => {
         textArea.value = '012\n\n89';
         textArea.setSelectionRange(4, 4);
 
-        textArea.dispatchEvent(outdentEvent);
+        updateTextForToolbarBtn($(outdentButton));
 
         expect(textArea.value).toEqual('012\n\n89');
         expect(textArea.selectionStart).toEqual(4);
diff --git a/spec/frontend/lib/utils/text_utility_spec.js b/spec/frontend/lib/utils/text_utility_spec.js
index 49a160c9f23..f2572ca0ad2 100644
--- a/spec/frontend/lib/utils/text_utility_spec.js
+++ b/spec/frontend/lib/utils/text_utility_spec.js
@@ -386,4 +386,16 @@ describe('text_utility', () => {
       expect(textUtils.limitedCounterWithDelimiter(120)).toBe(120);
     });
   });
+
+  describe('base64EncodeUnicode', () => {
+    it('encodes unicode characters', () => {
+      expect(textUtils.base64EncodeUnicode('😀')).toBe('8J+YgA==');
+    });
+  });
+
+  describe('base64DecodeUnicode', () => {
+    it('decodes unicode characters', () => {
+      expect(textUtils.base64DecodeUnicode('8J+YgA==')).toBe('😀');
+    });
+  });
 });
diff --git a/spec/frontend/listbox/index_spec.js b/spec/frontend/listbox/index_spec.js
index 07c6cca535a..fd41531796b 100644
--- a/spec/frontend/listbox/index_spec.js
+++ b/spec/frontend/listbox/index_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
-import { getAllByRole, getByRole } from '@testing-library/dom';
-import { GlDropdown } from '@gitlab/ui';
+import { getAllByRole, getByTestId } from '@testing-library/dom';
+import { GlListbox } from '@gitlab/ui';
 import { createWrapper } from '@vue/test-utils';
 import { initListbox, parseAttributes } from '~/listbox';
 import { getFixture, setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
@@ -28,20 +28,6 @@ describe('initListbox', () => {
     instance = initListbox(...args);
   };
 
-  // TODO: Rewrite these finders to use better semantics once the
-  // implementation is switched to GlListbox
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/348738
-  const findToggleButton = () => document.body.querySelector('.gl-dropdown-toggle');
-  const findItem = (text) => getByRole(document.body, 'menuitem', { name: text });
-  const findItems = () => getAllByRole(document.body, 'menuitem');
-  const findSelectedItems = () =>
-    findItems().filter(
-      (menuitem) =>
-        !menuitem
-          .querySelector('.gl-new-dropdown-item-check-icon')
-          .classList.contains('gl-visibility-hidden'),
-    );
-
   it('returns null given no element', () => {
     setup();
 
@@ -55,6 +41,10 @@ describe('initListbox', () => {
   describe('given a valid element', () => {
     let onChangeSpy;
 
+    const listbox = () => createWrapper(instance).findComponent(GlListbox);
+    const findToggleButton = () => getByTestId(document.body, 'base-dropdown-toggle');
+    const findSelectedItems = () => getAllByRole(document.body, 'option', { selected: true });
+
     beforeEach(async () => {
       setHTMLFixture(fixture);
       onChangeSpy = jest.fn();
@@ -85,10 +75,9 @@ describe('initListbox', () => {
       expect(instance.$el.classList).toContain('test-class-1', 'test-class-2');
     });
 
-    describe.each(parsedAttributes.items)('clicking on an item', (item) => {
+    describe.each(parsedAttributes.items)('selecting an item', (item) => {
       beforeEach(async () => {
-        findItem(item.text).click();
-
+        listbox().vm.$emit('select', item.value);
         await nextTick();
       });
 
@@ -108,8 +97,7 @@ describe('initListbox', () => {
     });
 
     it('passes the "right" prop through to the underlying component', () => {
-      const wrapper = createWrapper(instance).findComponent(GlDropdown);
-      expect(wrapper.props('right')).toBe(parsedAttributes.right);
+      expect(listbox().props('right')).toBe(parsedAttributes.right);
     });
   });
 });
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 5581fd52458..ef3c8bde3cf 100644
--- a/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
+++ b/spec/frontend/members/components/filter_sort/sort_dropdown_spec.js
@@ -45,7 +45,7 @@ describe('SortDropdown', () => {
 
   const findSortingComponent = () => wrapper.findComponent(GlSorting);
   const findSortDirectionToggle = () =>
-    findSortingComponent().find('button[title="Sort direction"]');
+    findSortingComponent().find('button[title^="Sort direction"]');
   const findDropdownToggle = () => wrapper.find('button[aria-haspopup="true"]');
   const findDropdownItemByText = (text) =>
     wrapper
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 f3f50bf620a..03cfc6ca0f6 100644
--- a/spec/frontend/members/components/table/member_action_buttons_spec.js
+++ b/spec/frontend/members/components/table/member_action_buttons_spec.js
@@ -27,7 +27,7 @@ describe('MemberActionButtons', () => {
     wrapper.destroy();
   });
 
-  test.each`
+  it.each`
     memberType                    | member           | expectedComponent             | expectedComponentName
     ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserActionButtons}          | ${'UserActionButtons'}
     ${MEMBER_TYPES.group}         | ${group}         | ${GroupActionButtons}         | ${'GroupActionButtons'}
diff --git a/spec/frontend/members/components/table/member_avatar_spec.js b/spec/frontend/members/components/table/member_avatar_spec.js
index 35f82c28fc5..dc5c97f41df 100644
--- a/spec/frontend/members/components/table/member_avatar_spec.js
+++ b/spec/frontend/members/components/table/member_avatar_spec.js
@@ -22,7 +22,7 @@ describe('MemberList', () => {
     wrapper.destroy();
   });
 
-  test.each`
+  it.each`
     memberType                    | member           | expectedComponent | expectedComponentName
     ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserAvatar}     | ${'UserAvatar'}
     ${MEMBER_TYPES.group}         | ${group}         | ${GroupAvatar}    | ${'GroupAvatar'}
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 fd56699602e..0b0140b0cdb 100644
--- a/spec/frontend/members/components/table/members_table_cell_spec.js
+++ b/spec/frontend/members/components/table/members_table_cell_spec.js
@@ -95,7 +95,7 @@ describe('MembersTableCell', () => {
     wrapper = null;
   });
 
-  test.each`
+  it.each`
     member           | expectedMemberType
     ${memberMock}    | ${MEMBER_TYPES.user}
     ${group}         | ${MEMBER_TYPES.group}
diff --git a/spec/frontend/members/utils_spec.js b/spec/frontend/members/utils_spec.js
index 0271483801c..8bef2096a2a 100644
--- a/spec/frontend/members/utils_spec.js
+++ b/spec/frontend/members/utils_spec.js
@@ -89,7 +89,7 @@ describe('Members Utils', () => {
   });
 
   describe('isGroup', () => {
-    test.each`
+    it.each`
       member        | expected
       ${group}      | ${true}
       ${memberMock} | ${false}
@@ -99,7 +99,7 @@ describe('Members Utils', () => {
   });
 
   describe('isDirectMember', () => {
-    test.each`
+    it.each`
       member             | expected
       ${directMember}    | ${true}
       ${inheritedMember} | ${false}
@@ -109,7 +109,7 @@ describe('Members Utils', () => {
   });
 
   describe('isCurrentUser', () => {
-    test.each`
+    it.each`
       currentUserId             | expected
       ${IS_CURRENT_USER_ID}     | ${true}
       ${IS_NOT_CURRENT_USER_ID} | ${false}
@@ -119,7 +119,7 @@ describe('Members Utils', () => {
   });
 
   describe('canRemove', () => {
-    test.each`
+    it.each`
       member                                     | expected
       ${{ ...directMember, canRemove: true }}    | ${true}
       ${{ ...inheritedMember, canRemove: true }} | ${false}
@@ -130,7 +130,7 @@ describe('Members Utils', () => {
   });
 
   describe('canResend', () => {
-    test.each`
+    it.each`
       member                                                           | expected
       ${invite}                                                        | ${true}
       ${{ ...invite, invite: { ...invite.invite, canResend: false } }} | ${false}
@@ -140,7 +140,7 @@ describe('Members Utils', () => {
   });
 
   describe('canUpdate', () => {
-    test.each`
+    it.each`
       member                                     | currentUserId             | expected
       ${{ ...directMember, canUpdate: true }}    | ${IS_NOT_CURRENT_USER_ID} | ${true}
       ${{ ...directMember, canUpdate: true }}    | ${IS_CURRENT_USER_ID}     | ${false}
diff --git a/spec/frontend/merge_conflicts/store/actions_spec.js b/spec/frontend/merge_conflicts/store/actions_spec.js
index e73769cba51..50eac982e20 100644
--- a/spec/frontend/merge_conflicts/store/actions_spec.js
+++ b/spec/frontend/merge_conflicts/store/actions_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Cookies from '~/lib/utils/cookies';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -125,7 +125,7 @@ describe('merge conflicts actions', () => {
         ],
         [],
       );
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Failed to save merge conflicts resolutions. Please try again!',
       });
     });
diff --git a/spec/frontend/merge_request_spec.js b/spec/frontend/merge_request_spec.js
index bcf64204c7a..16e3e49a297 100644
--- a/spec/frontend/merge_request_spec.js
+++ b/spec/frontend/merge_request_spec.js
@@ -3,9 +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 axios from '~/lib/utils/axios_utils';
 import MergeRequest from '~/merge_request';
 
+jest.mock('~/flash');
+
 describe('MergeRequest', () => {
   const test = {};
   describe('task lists', () => {
@@ -95,8 +98,11 @@ describe('MergeRequest', () => {
 
         await waitForPromises();
 
-        expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-          'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
+        expect(createAlert).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message:
+              'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
+          }),
         );
       });
     });
diff --git a/spec/frontend/milestones/components/promote_milestone_modal_spec.js b/spec/frontend/milestones/components/promote_milestone_modal_spec.js
index 11eaa92f2b0..60657fbc9b8 100644
--- a/spec/frontend/milestones/components/promote_milestone_modal_spec.js
+++ b/spec/frontend/milestones/components/promote_milestone_modal_spec.js
@@ -3,7 +3,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import PromoteMilestoneModal from '~/milestones/components/promote_milestone_modal.vue';
@@ -103,7 +103,7 @@ describe('Promote milestone modal', () => {
       wrapper.findComponent(GlModal).vm.$emit('primary');
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({ message: dummyError });
+      expect(createAlert).toHaveBeenCalledWith({ message: dummyError });
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 1de6b6e3e98..1d17a9116df 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { objectToQuery } from '~/lib/utils/url_utility';
@@ -198,7 +198,7 @@ describe('Dashboard', () => {
       );
 
       await nextTick();
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it('does not display a warning if there are no validation warnings', async () => {
@@ -210,7 +210,7 @@ describe('Dashboard', () => {
       );
 
       await nextTick();
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
   });
 
@@ -275,7 +275,7 @@ describe('Dashboard', () => {
       setupStoreWithData(store);
 
       await nextTick();
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
       expect(store.dispatch).not.toHaveBeenCalledWith(
         'monitoringDashboard/setExpandedPanel',
         expect.anything(),
diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js
index a327e234581..9873654bdda 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import {
   queryToObject,
@@ -115,7 +115,7 @@ describe('dashboard invalid url parameters', () => {
     createMountedWrapper();
 
     await nextTick();
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
 
     expect(findDateTimePicker().props('value')).toEqual(defaultTimeRange);
 
diff --git a/spec/frontend/monitoring/requests/index_spec.js b/spec/frontend/monitoring/requests/index_spec.js
index 03bf5d70153..6f9af911a9f 100644
--- a/spec/frontend/monitoring/requests/index_spec.js
+++ b/spec/frontend/monitoring/requests/index_spec.js
@@ -129,7 +129,7 @@ describe('monitoring metrics_requests', () => {
       });
     });
 
-    test.each`
+    it.each`
       code                                | reason
       ${statusCodes.BAD_REQUEST}          | ${'Parameters are missing or incorrect'}
       ${statusCodes.UNPROCESSABLE_ENTITY} | ${"Expression can't be executed"}
diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js
index a872a7780eb..ca66768c3cc 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as commonUtils from '~/lib/utils/common_utils';
 import statusCodes from '~/lib/utils/http_status';
@@ -82,7 +82,7 @@ describe('Monitoring store actions', () => {
     mock.reset();
 
     commonUtils.backOff.mockReset();
-    createFlash.mockReset();
+    createAlert.mockReset();
   });
 
   // Setup
@@ -241,7 +241,7 @@ describe('Monitoring store actions', () => {
           'receiveMetricsDashboardFailure',
           new Error('Request failed with status code 500'),
         );
-        expect(createFlash).toHaveBeenCalled();
+        expect(createAlert).toHaveBeenCalled();
       });
 
       it('dispatches a failure action when a message is returned', async () => {
@@ -250,7 +250,7 @@ describe('Monitoring store actions', () => {
           'receiveMetricsDashboardFailure',
           new Error('Request failed with status code 500'),
         );
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: expect.stringContaining(mockDashboardsErrorResponse.message),
         });
       });
@@ -263,7 +263,7 @@ describe('Monitoring store actions', () => {
           'receiveMetricsDashboardFailure',
           new Error('Request failed with status code 500'),
         );
-        expect(createFlash).not.toHaveBeenCalled();
+        expect(createAlert).not.toHaveBeenCalled();
       });
     });
   });
@@ -328,7 +328,7 @@ describe('Monitoring store actions', () => {
         },
       });
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
 
     it('dispatches fetchPrometheusMetric for each panel query', async () => {
@@ -385,7 +385,7 @@ describe('Monitoring store actions', () => {
         defaultQueryParams,
       });
 
-      expect(createFlash).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -570,7 +570,7 @@ describe('Monitoring store actions', () => {
         [],
         [{ type: 'receiveDeploymentsDataFailure' }],
         () => {
-          expect(createFlash).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalled();
         },
       );
     });
@@ -1084,8 +1084,8 @@ describe('Monitoring store actions', () => {
 
       return testAction(fetchVariableMetricLabelValues, { defaultQueryParams }, state, [], []).then(
         () => {
-          expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledTimes(1);
+          expect(createAlert).toHaveBeenCalledWith({
             message: expect.stringContaining('error getting options for variable "label1"'),
           });
         },
diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js
index 31975052077..6c6c3d6b90f 100644
--- a/spec/frontend/monitoring/utils_spec.js
+++ b/spec/frontend/monitoring/utils_spec.js
@@ -290,7 +290,7 @@ describe('monitoring/utils', () => {
       expect(() => expandedPanelPayloadFromUrl(metricsDashboardViewModel, search)).toThrow();
     });
 
-    test.each`
+    it.each`
       group            | title            | yLabel             | missingField
       ${'NOT_A_GROUP'} | ${title}         | ${yLabel}          | ${'group'}
       ${group}         | ${'NOT_A_TITLE'} | ${yLabel}          | ${'title'}
@@ -367,7 +367,7 @@ describe('monitoring/utils', () => {
       ],
     };
 
-    [
+    it.each([
       {
         input: { metrics: undefined },
         output: {},
@@ -393,12 +393,10 @@ describe('monitoring/utils', () => {
         output: multipleMetricExpected,
         testCase: 'barChartsDataParser returns multiple series object with multiple metrics',
       },
-    ].forEach(({ input, output, testCase }) => {
-      it(testCase, () => {
-        expect(monitoringUtils.barChartsDataParser(input.metrics)).toEqual(
-          expect.objectContaining(output),
-        );
-      });
+    ])('$testCase', ({ input, output }) => {
+      expect(monitoringUtils.barChartsDataParser(input.metrics)).toEqual(
+        expect.objectContaining(output),
+      );
     });
   });
 
diff --git a/spec/frontend/nav/components/top_nav_app_spec.js b/spec/frontend/nav/components/top_nav_app_spec.js
index 745707c1d28..b32ab5ebe09 100644
--- a/spec/frontend/nav/components/top_nav_app_spec.js
+++ b/spec/frontend/nav/components/top_nav_app_spec.js
@@ -1,5 +1,6 @@
 import { GlNavItemDropdown } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import { mockTracking } from 'helpers/tracking_helper';
 import TopNavApp from '~/nav/components/top_nav_app.vue';
 import TopNavDropdownMenu from '~/nav/components/top_nav_dropdown_menu.vue';
 import { TEST_NAV_DATA } from '../mock_data';
@@ -8,6 +9,14 @@ describe('~/nav/components/top_nav_app.vue', () => {
   let wrapper;
 
   const createComponent = () => {
+    wrapper = mount(TopNavApp, {
+      propsData: {
+        navData: TEST_NAV_DATA,
+      },
+    });
+  };
+
+  const createComponentShallow = () => {
     wrapper = shallowMount(TopNavApp, {
       propsData: {
         navData: TEST_NAV_DATA,
@@ -16,6 +25,7 @@ describe('~/nav/components/top_nav_app.vue', () => {
   };
 
   const findNavItemDropdown = () => wrapper.findComponent(GlNavItemDropdown);
+  const findNavItemDropdowToggle = () => findNavItemDropdown().find('.js-top-nav-dropdown-toggle');
   const findMenu = () => wrapper.findComponent(TopNavDropdownMenu);
 
   afterEach(() => {
@@ -24,7 +34,7 @@ describe('~/nav/components/top_nav_app.vue', () => {
 
   describe('default', () => {
     beforeEach(() => {
-      createComponent();
+      createComponentShallow();
     });
 
     it('renders nav item dropdown', () => {
@@ -45,4 +55,18 @@ describe('~/nav/components/top_nav_app.vue', () => {
       });
     });
   });
+
+  describe('tracking', () => {
+    it('emits a tracking event when the toggle is clicked', () => {
+      const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      createComponent();
+
+      findNavItemDropdowToggle().trigger('click');
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_nav', {
+        label: 'hamburger_menu',
+        property: 'top_navigation',
+      });
+    });
+  });
 });
diff --git a/spec/frontend/notebook/cells/output/index_spec.js b/spec/frontend/notebook/cells/output/index_spec.js
index 97a7e22be60..8bf049235a9 100644
--- a/spec/frontend/notebook/cells/output/index_spec.js
+++ b/spec/frontend/notebook/cells/output/index_spec.js
@@ -53,6 +53,7 @@ describe('Output component', () => {
       expect(iframe.exists()).toBe(true);
       expect(iframe.element.getAttribute('sandbox')).toBe('');
       expect(iframe.element.getAttribute('srcdoc')).toBe('<p>test</p>');
+      expect(iframe.element.getAttribute('scrolling')).toBe('auto');
     });
 
     it('renders multiple raw HTML outputs', () => {
diff --git a/spec/frontend/notes/components/__snapshots__/notes_app_spec.js.snap b/spec/frontend/notes/components/__snapshots__/notes_app_spec.js.snap
index 5f4b3e04a79..bc29903d4bf 100644
--- a/spec/frontend/notes/components/__snapshots__/notes_app_spec.js.snap
+++ b/spec/frontend/notes/components/__snapshots__/notes_app_spec.js.snap
@@ -3,15 +3,15 @@
 exports[`note_app when sort direction is asc shows skeleton notes after the loaded discussions 1`] = `
 "<ul id=\\"notes-list\\" class=\\"notes main-notes-list timeline\\">
   <noteable-discussion-stub discussion=\\"[object Object]\\" renderdifffile=\\"true\\" helppagepath=\\"\\" isoverviewtab=\\"true\\"></noteable-discussion-stub>
-  <skeleton-loading-container-stub></skeleton-loading-container-stub>
-  <discussion-filter-note-stub style=\\"display: none;\\"></discussion-filter-note-stub>
+  <skeleton-loading-container-stub class=\\"note-skeleton\\"></skeleton-loading-container-stub>
+  <!---->
 </ul>"
 `;
 
 exports[`note_app when sort direction is desc shows skeleton notes before the loaded discussions 1`] = `
 "<ul id=\\"notes-list\\" class=\\"notes main-notes-list timeline\\">
-  <skeleton-loading-container-stub></skeleton-loading-container-stub>
+  <skeleton-loading-container-stub class=\\"note-skeleton\\"></skeleton-loading-container-stub>
   <noteable-discussion-stub discussion=\\"[object Object]\\" renderdifffile=\\"true\\" helppagepath=\\"\\" isoverviewtab=\\"true\\"></noteable-discussion-stub>
-  <discussion-filter-note-stub style=\\"display: none;\\"></discussion-filter-note-stub>
+  <!---->
 </ul>"
 `;
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 55e4ef42e37..701ff492702 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -7,7 +7,7 @@ import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import CommentForm from '~/notes/components/comment_form.vue';
 import CommentTypeDropdown from '~/notes/components/comment_type_dropdown.vue';
@@ -71,11 +71,19 @@ describe('issue_comment_form component', () => {
   };
 
   const notableDataMockCanUpdateIssuable = createNotableDataMock({
-    current_user: { can_update: true, can_create_note: true },
+    current_user: { can_update: true, can_create_note: true, can_create_confidential_note: true },
   });
 
   const notableDataMockCannotUpdateIssuable = createNotableDataMock({
-    current_user: { can_update: false, can_create_note: true },
+    current_user: {
+      can_update: false,
+      can_create_note: false,
+      can_create_confidential_note: false,
+    },
+  });
+
+  const notableDataMockCannotCreateConfidentialNote = createNotableDataMock({
+    current_user: { can_update: false, can_create_note: true, can_create_confidential_note: false },
   });
 
   const mountComponent = ({
@@ -490,7 +498,7 @@ describe('issue_comment_form component', () => {
               await nextTick();
               await nextTick();
 
-              expect(createFlash).toHaveBeenCalledWith({
+              expect(createAlert).toHaveBeenCalledWith({
                 message: `Something went wrong while closing the ${type}. Please try again later.`,
               });
             });
@@ -526,7 +534,7 @@ describe('issue_comment_form component', () => {
             await nextTick();
             await nextTick();
 
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: `Something went wrong while reopening the ${type}. Please try again later.`,
             });
           });
@@ -562,6 +570,17 @@ describe('issue_comment_form component', () => {
         expect(checkbox.element.checked).toBe(false);
       });
 
+      it('should not render checkbox if user is not at least a reporter', () => {
+        mountComponent({
+          mountFunction: mount,
+          initialData: { note: 'confidential note' },
+          noteableData: { ...notableDataMockCannotCreateConfidentialNote },
+        });
+
+        const checkbox = findConfidentialNoteCheckbox();
+        expect(checkbox.exists()).toBe(false);
+      });
+
       it.each`
         noteableType      | rendered | message
         ${'Issue'}        | ${true}  | ${'render'}
diff --git a/spec/frontend/notes/components/diff_discussion_header_spec.js b/spec/frontend/notes/components/diff_discussion_header_spec.js
index 5800f68b114..bb44563b87a 100644
--- a/spec/frontend/notes/components/diff_discussion_header_spec.js
+++ b/spec/frontend/notes/components/diff_discussion_header_spec.js
@@ -42,7 +42,7 @@ describe('diff_discussion_header component', () => {
       expect(props).toMatchObject({
         src: firstNoteAuthor.avatar_url,
         alt: firstNoteAuthor.name,
-        size: { default: 24, md: 32 },
+        size: 32,
       });
     });
   });
diff --git a/spec/frontend/notes/components/discussion_actions_spec.js b/spec/frontend/notes/components/discussion_actions_spec.js
index d16c13d6fd3..e414ada1854 100644
--- a/spec/frontend/notes/components/discussion_actions_spec.js
+++ b/spec/frontend/notes/components/discussion_actions_spec.js
@@ -81,7 +81,7 @@ describe('DiscussionActions', () => {
         });
       });
 
-      it(shouldRender ? 'renders resolve buttons' : 'does not render resolve buttons', () => {
+      it(`${shouldRender ? 'renders' : 'does not render'} resolve buttons`, () => {
         expect(wrapper.findComponent(ResolveDiscussionButton).exists()).toBe(shouldRender);
         expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(shouldRender);
       });
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 76177229cff..b870cda2a24 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -1,10 +1,7 @@
-import { GlSprintf } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NoteHeader from '~/notes/components/note_header.vue';
-import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
-import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 
 Vue.use(Vuex);
 
@@ -23,7 +20,6 @@ describe('NoteHeader component', () => {
   const findTimestamp = () => wrapper.findComponent({ ref: 'noteTimestamp' });
   const findInternalNoteIndicator = () => wrapper.findByTestId('internalNoteIndicator');
   const findSpinner = () => wrapper.findComponent({ ref: 'spinner' });
-  const findAuthorStatus = () => wrapper.findComponent({ ref: 'authorStatus' });
 
   const statusHtml =
     '"<span class="user-status-emoji has-tooltip" title="foo bar" data-html="true" data-placement="top"><gl-emoji title="basketball and hoop" data-name="basketball" data-unicode-version="6.0">🏀</gl-emoji></span>"';
@@ -37,22 +33,14 @@ describe('NoteHeader component', () => {
     username: 'root',
     show_status: true,
     status_tooltip_html: statusHtml,
-    availability: '',
   };
 
-  const createComponent = (props, userAttributes = false) => {
+  const createComponent = (props) => {
     wrapper = shallowMountExtended(NoteHeader, {
       store: new Vuex.Store({
         actions,
       }),
       propsData: { ...props },
-      stubs: { GlSprintf, UserNameWithStatus },
-      provide: {
-        glFeatures: {
-          removeUserAttributesProjects: userAttributes,
-          removeUserAttributesGroups: userAttributes,
-        },
-      },
     });
   };
 
@@ -61,26 +49,6 @@ describe('NoteHeader component', () => {
     wrapper = null;
   });
 
-  describe('when removeUserAttributesProjects feature flag is enabled', () => {
-    it('does not render busy status', () => {
-      createComponent({ author: { ...author, availability: AVAILABILITY_STATUS.BUSY } }, true);
-
-      expect(wrapper.find('.note-header-info').text()).not.toContain('(Busy)');
-    });
-
-    it('does not render author status', () => {
-      createComponent({ author }, true);
-
-      expect(findAuthorStatus().exists()).toBe(false);
-    });
-
-    it('does not render username', () => {
-      createComponent({ author }, true);
-
-      expect(wrapper.find('.note-header-info').text()).not.toContain('@');
-    });
-  });
-
   it('does not render discussion actions when includeToggle is false', () => {
     createComponent({
       includeToggle: false,
@@ -145,39 +113,6 @@ describe('NoteHeader component', () => {
 
     expect(wrapper.find('.js-user-link').exists()).toBe(true);
   });
-
-  it('renders busy status if author availability is set', () => {
-    createComponent({ author: { ...author, availability: AVAILABILITY_STATUS.BUSY } });
-
-    expect(wrapper.find('.js-user-link').text()).toContain('(Busy)');
-  });
-
-  it('renders author status', () => {
-    createComponent({ author });
-
-    expect(findAuthorStatus().exists()).toBe(true);
-  });
-
-  it('does not render author status if show_status=false', () => {
-    createComponent({
-      author: { ...author, status: { availability: AVAILABILITY_STATUS.BUSY }, show_status: false },
-    });
-
-    expect(findAuthorStatus().exists()).toBe(false);
-  });
-
-  it('does not render author status if status_tooltip_html=null', () => {
-    createComponent({
-      author: {
-        ...author,
-        status: { availability: AVAILABILITY_STATUS.BUSY },
-        status_tooltip_html: null,
-      },
-    });
-
-    expect(findAuthorStatus().exists()).toBe(false);
-  });
-
   it('renders deleted user text if author is not passed as a prop', () => {
     createComponent();
 
@@ -270,24 +205,6 @@ describe('NoteHeader component', () => {
     });
   });
 
-  describe('when author status tooltip is opened', () => {
-    it('removes `title` attribute from emoji to prevent duplicate tooltips', () => {
-      createComponent({
-        author: {
-          ...author,
-          status_tooltip_html: statusHtml,
-        },
-      });
-
-      return nextTick().then(() => {
-        const authorStatus = findAuthorStatus();
-        authorStatus.trigger('mouseenter');
-
-        expect(authorStatus.find('gl-emoji').attributes('title')).toBeUndefined();
-      });
-    });
-  });
-
   describe('when author username link is hovered', () => {
     it('toggles hover specific CSS classes on author name link', async () => {
       createComponent({ author });
@@ -327,4 +244,18 @@ describe('NoteHeader component', () => {
       );
     });
   });
+
+  it('does render username', () => {
+    createComponent({ author }, true);
+
+    expect(wrapper.find('.note-header-info').text()).toContain('@');
+  });
+
+  describe('with system note', () => {
+    it('does not render username', () => {
+      createComponent({ author, isSystemNote: true }, true);
+
+      expect(wrapper.find('.note-header-info').text()).not.toContain('@');
+    });
+  });
 });
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index b044d40cbe4..3d7195752d3 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -214,7 +214,7 @@ describe('issue_note', () => {
       expect(avatarProps.src).toBe(author.avatar_url);
       expect(avatarProps.entityName).toBe(author.username);
       expect(avatarProps.alt).toBe(author.name);
-      expect(avatarProps.size).toEqual({ default: 24, md: 32 });
+      expect(avatarProps.size).toEqual(32);
     });
 
     it('should render note header content', () => {
diff --git a/spec/frontend/notes/components/notes_activity_header_spec.js b/spec/frontend/notes/components/notes_activity_header_spec.js
new file mode 100644
index 00000000000..5b3165bf401
--- /dev/null
+++ b/spec/frontend/notes/components/notes_activity_header_spec.js
@@ -0,0 +1,67 @@
+import { shallowMount } from '@vue/test-utils';
+import { __ } from '~/locale';
+import NotesActivityHeader from '~/notes/components/notes_activity_header.vue';
+import DiscussionFilter from '~/notes/components/discussion_filter.vue';
+import TimelineToggle from '~/notes/components/timeline_toggle.vue';
+import createStore from '~/notes/stores';
+import waitForPromises from 'helpers/wait_for_promises';
+import { notesFilters } from '../mock_data';
+
+describe('~/notes/components/notes_activity_header.vue', () => {
+  let wrapper;
+
+  const findTitle = () => wrapper.find('h2');
+
+  const createComponent = ({ props = {}, ...options } = {}) => {
+    wrapper = shallowMount(NotesActivityHeader, {
+      propsData: {
+        notesFilters,
+        ...props,
+      },
+      // why: Rendering async timeline toggle requires store
+      store: createStore(),
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders title', () => {
+      expect(findTitle().text()).toBe(__('Activity'));
+    });
+
+    it('renders discussion filter', () => {
+      expect(wrapper.findComponent(DiscussionFilter).props()).toEqual({
+        filters: notesFilters,
+        selectedValue: 0,
+      });
+    });
+
+    it('does not render timeline toggle', () => {
+      expect(wrapper.findComponent(TimelineToggle).exists()).toBe(false);
+    });
+  });
+
+  it('with notesFilterValue prop, passes to discussion filter', () => {
+    createComponent({ props: { notesFilterValue: 1 } });
+
+    expect(wrapper.findComponent(DiscussionFilter).props('selectedValue')).toBe(1);
+  });
+
+  it('with showTimelineViewToggle injected, renders timeline toggle asynchronously', async () => {
+    createComponent({ provide: { showTimelineViewToggle: () => true } });
+
+    expect(wrapper.findComponent(TimelineToggle).exists()).toBe(false);
+
+    await waitForPromises();
+
+    expect(wrapper.findComponent(TimelineToggle).exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/notes/components/notes_app_spec.js b/spec/frontend/notes/components/notes_app_spec.js
index d4cb07d97dc..9051fcab97f 100644
--- a/spec/frontend/notes/components/notes_app_spec.js
+++ b/spec/frontend/notes/components/notes_app_spec.js
@@ -11,6 +11,7 @@ import axios from '~/lib/utils/axios_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
 import CommentForm from '~/notes/components/comment_form.vue';
 import NotesApp from '~/notes/components/notes_app.vue';
+import NotesActivityHeader from '~/notes/components/notes_activity_header.vue';
 import * as constants from '~/notes/constants';
 import createStore from '~/notes/stores';
 import '~/behaviors/markdown/render_gfm';
@@ -20,11 +21,14 @@ import * as mockData from '../mock_data';
 
 const TYPE_COMMENT_FORM = 'comment-form';
 const TYPE_NOTES_LIST = 'notes-list';
+const TEST_NOTES_FILTER_VALUE = 1;
 
 const propsData = {
   noteableData: mockData.noteableDataMock,
   notesData: mockData.notesDataMock,
   userData: mockData.userDataMock,
+  notesFilters: mockData.notesFilters,
+  notesFilterValue: TEST_NOTES_FILTER_VALUE,
 };
 
 describe('note_app', () => {
@@ -47,7 +51,7 @@ describe('note_app', () => {
     axiosMock = new AxiosMockAdapter(axios);
 
     store = createStore();
-    mountComponent = () => {
+    mountComponent = ({ props = {} } = {}) => {
       return mount(
         {
           components: {
@@ -58,7 +62,10 @@ describe('note_app', () => {
           </div>`,
         },
         {
-          propsData,
+          propsData: {
+            ...propsData,
+            ...props,
+          },
           store,
         },
       );
@@ -144,6 +151,13 @@ describe('note_app', () => {
     it('updates discussions badge', () => {
       expect(document.querySelector('.js-discussions-count').textContent).toEqual('2');
     });
+
+    it('should render notes activity header', () => {
+      expect(wrapper.findComponent(NotesActivityHeader).props()).toEqual({
+        notesFilterValue: TEST_NOTES_FILTER_VALUE,
+        notesFilters: mockData.notesFilters,
+      });
+    });
   });
 
   describe('render with comments disabled', () => {
@@ -151,8 +165,15 @@ describe('note_app', () => {
       setHTMLFixture('<div class="js-discussions-count"></div>');
 
       axiosMock.onAny().reply(mockData.getIndividualNoteResponse);
-      store.state.commentsDisabled = true;
-      wrapper = mountComponent();
+      wrapper = mountComponent({
+        // why: In this integration test, previously we manually set store.state.commentsDisabled
+        //      This stopped working when we added `<discussion-filter>` into the component tree.
+        //      Let's lean into the integration scope and use a prop that "disables comments".
+        props: {
+          notesFilterValue: constants.HISTORY_ONLY_FILTER_VALUE,
+        },
+      });
+
       return waitForPromises();
     });
 
@@ -358,7 +379,7 @@ describe('note_app', () => {
     it('should listen hashchange event', () => {
       const notesApp = wrapper.findComponent(NotesApp);
       const hash = 'some dummy hash';
-      jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce(hash);
+      jest.spyOn(urlUtility, 'getLocationHash').mockReturnValue(hash);
       const setTargetNoteHash = jest.spyOn(notesApp.vm, 'setTargetNoteHash');
 
       window.dispatchEvent(new Event('hashchange'), hash);
diff --git a/spec/frontend/notes/mixins/discussion_navigation_spec.js b/spec/frontend/notes/mixins/discussion_navigation_spec.js
index 1b4e8026d84..45625d0a23f 100644
--- a/spec/frontend/notes/mixins/discussion_navigation_spec.js
+++ b/spec/frontend/notes/mixins/discussion_navigation_spec.js
@@ -4,7 +4,6 @@ import Vuex from 'vuex';
 import { setHTMLFixture } from 'helpers/fixtures';
 import createEventHub from '~/helpers/event_hub_factory';
 import * as utils from '~/lib/utils/common_utils';
-import eventHub from '~/notes/event_hub';
 import discussionNavigation from '~/notes/mixins/discussion_navigation';
 import notesModule from '~/notes/stores/modules';
 
@@ -35,13 +34,15 @@ describe('Discussion navigation mixin', () => {
 
   beforeEach(() => {
     setHTMLFixture(
-      [...'abcde']
+      `<div class="notes">
+      ${[...'abcde']
         .map(
           (id) =>
             `<ul class="notes" data-discussion-id="${id}"></ul>
             <div class="discussion" data-discussion-id="${id}"></div>`,
         )
-        .join(''),
+        .join('')}
+      </div>`,
     );
 
     jest.spyOn(utils, 'scrollToElementWithContext');
@@ -58,7 +59,7 @@ describe('Discussion navigation mixin', () => {
         },
         diffs: {
           namespaced: true,
-          actions: { scrollToFile },
+          actions: { scrollToFile, disableVirtualScroller: () => {} },
           state: { diffFiles: [] },
         },
       },
@@ -73,9 +74,6 @@ describe('Discussion navigation mixin', () => {
     jest.clearAllMocks();
   });
 
-  const findDiscussion = (selector, id) =>
-    document.querySelector(`${selector}[data-discussion-id="${id}"]`);
-
   describe('jumpToFirstUnresolvedDiscussion method', () => {
     let vm;
 
@@ -110,14 +108,14 @@ describe('Discussion navigation mixin', () => {
     });
 
     describe.each`
-      fn                            | args  | currentId | expected
-      ${'jumpToNextDiscussion'}     | ${[]} | ${null}   | ${'a'}
-      ${'jumpToNextDiscussion'}     | ${[]} | ${'a'}    | ${'c'}
-      ${'jumpToNextDiscussion'}     | ${[]} | ${'e'}    | ${'a'}
-      ${'jumpToPreviousDiscussion'} | ${[]} | ${null}   | ${'e'}
-      ${'jumpToPreviousDiscussion'} | ${[]} | ${'e'}    | ${'c'}
-      ${'jumpToPreviousDiscussion'} | ${[]} | ${'c'}    | ${'a'}
-    `('$fn (args = $args, currentId = $currentId)', ({ fn, args, currentId, expected }) => {
+      fn                            | args  | currentId
+      ${'jumpToNextDiscussion'}     | ${[]} | ${null}
+      ${'jumpToNextDiscussion'}     | ${[]} | ${'a'}
+      ${'jumpToNextDiscussion'}     | ${[]} | ${'e'}
+      ${'jumpToPreviousDiscussion'} | ${[]} | ${null}
+      ${'jumpToPreviousDiscussion'} | ${[]} | ${'e'}
+      ${'jumpToPreviousDiscussion'} | ${[]} | ${'c'}
+    `('$fn (args = $args, currentId = $currentId)', ({ fn, args, currentId }) => {
       beforeEach(() => {
         store.state.notes.currentDiscussionId = currentId;
       });
@@ -130,125 +128,18 @@ describe('Discussion navigation mixin', () => {
           await nextTick();
         });
 
-        it('expands discussion', () => {
-          expect(expandDiscussion).toHaveBeenCalled();
-        });
-
-        it('scrolls to element', () => {
-          expect(utils.scrollToElement).toHaveBeenCalled();
-        });
-      });
-
-      describe('on `diffs` active tab', () => {
-        beforeEach(async () => {
-          window.mrTabs.currentAction = 'diffs';
-          wrapper.vm[fn](...args);
-
+        it('expands discussion', async () => {
           await nextTick();
-        });
 
-        it('sets current discussion', () => {
-          expect(store.state.notes.currentDiscussionId).toEqual(expected);
-        });
-
-        it('expands discussion', () => {
           expect(expandDiscussion).toHaveBeenCalled();
         });
 
-        it('scrolls when scrollToDiscussion is emitted', () => {
-          expect(utils.scrollToElementWithContext).not.toHaveBeenCalled();
-
-          eventHub.$emit('scrollToDiscussion');
-
-          expect(utils.scrollToElementWithContext).toHaveBeenCalledWith(
-            findDiscussion('ul.notes', expected),
-            { behavior: 'auto', offset: 0 },
-          );
-        });
-      });
-
-      describe('on `other` active tab', () => {
-        beforeEach(async () => {
-          window.mrTabs.currentAction = 'other';
-          wrapper.vm[fn](...args);
-
+        it('scrolls to element', async () => {
           await nextTick();
-        });
 
-        it('sets current discussion', () => {
-          expect(store.state.notes.currentDiscussionId).toEqual(expected);
-        });
-
-        it('does not expand discussion yet', () => {
-          expect(expandDiscussion).not.toHaveBeenCalled();
-        });
-
-        it('shows mrTabs', () => {
-          expect(window.mrTabs.tabShown).toHaveBeenCalledWith('show');
-        });
-
-        describe('when tab is changed', () => {
-          beforeEach(() => {
-            window.mrTabs.eventHub.$emit('MergeRequestTabChange');
-
-            jest.runAllTimers();
-          });
-
-          it('expands discussion', () => {
-            expect(expandDiscussion).toHaveBeenCalledWith(expect.anything(), {
-              discussionId: expected,
-            });
-          });
-
-          it('scrolls to discussion', () => {
-            expect(utils.scrollToElement).toHaveBeenCalledWith(
-              findDiscussion('div.discussion', expected),
-              { behavior: 'auto', offset: 0 },
-            );
-          });
+          expect(utils.scrollToElement).toHaveBeenCalled();
         });
       });
     });
-
-    describe('virtual scrolling feature', () => {
-      beforeEach(() => {
-        jest.spyOn(store, 'dispatch');
-
-        store.state.notes.currentDiscussionId = 'a';
-        window.location.hash = 'test';
-      });
-
-      afterEach(() => {
-        window.gon = {};
-        window.location.hash = '';
-      });
-
-      it('resets location hash', async () => {
-        wrapper.vm.jumpToNextDiscussion();
-
-        await nextTick();
-
-        expect(window.location.hash).toBe('');
-      });
-
-      it.each`
-        tabValue
-        ${'diffs'}
-        ${'other'}
-      `(
-        'calls scrollToFile with setHash as $hashValue when the tab is $tabValue',
-        async ({ tabValue }) => {
-          window.mrTabs.currentAction = tabValue;
-
-          wrapper.vm.jumpToNextDiscussion();
-
-          await nextTick();
-
-          expect(store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', {
-            path: 'test.js',
-          });
-        },
-      );
-    });
   });
 });
diff --git a/spec/frontend/notes/mock_data.js b/spec/frontend/notes/mock_data.js
index 9fa7166474a..286f2adc1d8 100644
--- a/spec/frontend/notes/mock_data.js
+++ b/spec/frontend/notes/mock_data.js
@@ -1,4 +1,5 @@
 // Copied to ee/spec/frontend/notes/mock_data.js
+import { __ } from '~/locale';
 
 export const notesDataMock = {
   discussionsPath: '/gitlab-org/gitlab-foss/issues/26/discussions.json',
@@ -35,6 +36,7 @@ export const noteableDataMock = {
     can_create_note: true,
     can_update: true,
     can_award_emoji: true,
+    can_create_confidential_note: true,
   },
   description: '',
   due_date: null,
@@ -1292,3 +1294,18 @@ export const draftDiffDiscussion = {
   file_path: 'lib/foo.rb',
   isDraft: true,
 };
+
+export const notesFilters = [
+  {
+    title: __('Show all activity'),
+    value: 0,
+  },
+  {
+    title: __('Show comments only'),
+    value: 1,
+  },
+  {
+    title: __('Show history only'),
+    value: 2,
+  },
+];
diff --git a/spec/frontend/notes/utils/get_notes_filter_data_spec.js b/spec/frontend/notes/utils/get_notes_filter_data_spec.js
new file mode 100644
index 00000000000..c3a8d3bc619
--- /dev/null
+++ b/spec/frontend/notes/utils/get_notes_filter_data_spec.js
@@ -0,0 +1,44 @@
+import { getNotesFilterData } from '~/notes/utils/get_notes_filter_data';
+import { notesFilters } from '../mock_data';
+
+// what: This is the format we expect the element attribute to be in
+// why: For readability, we make this clear by hardcoding the indecise instead of using `reduce`.
+const TEST_NOTES_FILTERS_ATTR = {
+  [notesFilters[0].title]: notesFilters[0].value,
+  [notesFilters[1].title]: notesFilters[1].value,
+  [notesFilters[2].title]: notesFilters[2].value,
+};
+
+describe('~/notes/utils/get_notes_filter_data', () => {
+  it.each([
+    {
+      desc: 'empty',
+      attributes: {},
+      expectation: {
+        notesFilters: [],
+        notesFilterValue: undefined,
+      },
+    },
+    {
+      desc: 'valid attributes',
+      attributes: {
+        'data-notes-filters': JSON.stringify(TEST_NOTES_FILTERS_ATTR),
+        'data-notes-filter-value': '1',
+      },
+      expectation: {
+        notesFilters,
+        notesFilterValue: 1,
+      },
+    },
+  ])('with $desc, parses data from element attributes', ({ attributes, expectation }) => {
+    const el = document.createElement('div');
+
+    Object.entries(attributes).forEach(([key, value]) => {
+      el.setAttribute(key, value);
+    });
+
+    const actual = getNotesFilterData(el);
+
+    expect(actual).toStrictEqual(expectation);
+  });
+});
diff --git a/spec/frontend/operation_settings/components/metrics_settings_spec.js b/spec/frontend/operation_settings/components/metrics_settings_spec.js
index 810049220ae..732dfdd42fb 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { timezones } from '~/monitoring/format_date';
@@ -52,7 +52,7 @@ describe('operation settings external dashboard component', () => {
     }
     axios.patch.mockReset();
     refreshCurrentPage.mockReset();
-    createFlash.mockReset();
+    createAlert.mockReset();
   });
 
   it('renders header text', () => {
@@ -208,7 +208,7 @@ describe('operation settings external dashboard component', () => {
 
         await nextTick();
         await jest.runAllTicks();
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: `There was an error saving your changes. ${message}`,
         });
       });
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 6fe3dabc603..849215e286b 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
@@ -8,8 +8,8 @@ import { defaultConfig, harborTagsList } from '../../mock_data';
 describe('Harbor tag list row', () => {
   let wrapper;
 
-  const findListItem = () => wrapper.find(ListItem);
-  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findListItem = () => wrapper.findComponent(ListItem);
+  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
   const findByTestId = (testId) => wrapper.findByTestId(testId);
 
   const $route = {
@@ -58,7 +58,7 @@ describe('Harbor tag list row', () => {
       expect(findByTestId('name').text()).toBe(harborTagsList[0].name);
     });
 
-    describe(' clipboard button', () => {
+    describe('clipboard button', () => {
       it('exists', () => {
         expect(findClipboardButton().exists()).toBe(true);
       });
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 6bcf6611d07..4c6b2b6daaa 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
@@ -8,9 +8,9 @@ import { defaultConfig, harborTagsResponse } from '../../mock_data';
 describe('Harbor Tags List', () => {
   let wrapper;
 
-  const findTagsLoader = () => wrapper.find(TagsLoader);
+  const findTagsLoader = () => wrapper.findComponent(TagsLoader);
   const findTagsListRows = () => wrapper.findAllComponents(TagsListRow);
-  const findRegistryList = () => wrapper.find(RegistryList);
+  const findRegistryList = () => wrapper.findComponent(RegistryList);
 
   const mountComponent = ({ propsData, config = defaultConfig }) => {
     wrapper = shallowMount(TagsList, {
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 7e0f05e736b..10901c6ec1e 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
@@ -15,8 +15,8 @@ jest.mock('~/rest_api', () => ({
 describe('Harbor Tags page', () => {
   let wrapper;
 
-  const findTagsHeader = () => wrapper.find(TagsHeader);
-  const findTagsList = () => wrapper.find(TagsList);
+  const findTagsHeader = () => wrapper.findComponent(TagsHeader);
+  const findTagsList = () => wrapper.findComponent(TagsList);
 
   const waitForHarborTagsRequest = async () => {
     await waitForPromises();
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
index 31ab108558c..bb970336b94 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/store/actions_spec.js
@@ -1,6 +1,6 @@
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import { FETCH_PACKAGE_VERSIONS_ERROR } from '~/packages_and_registries/infrastructure_registry/details/constants';
 import {
   fetchPackageVersions,
@@ -67,9 +67,9 @@ describe('Actions Package details store', () => {
         [],
       );
       expect(Api.projectPackage).toHaveBeenCalledWith(packageEntity.project_id, packageEntity.id);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: FETCH_PACKAGE_VERSIONS_ERROR,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
@@ -87,9 +87,9 @@ describe('Actions Package details store', () => {
       Api.deleteProjectPackage = jest.fn().mockRejectedValue();
 
       await testAction(deletePackage, undefined, { packageEntity }, [], []);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_ERROR_MESSAGE,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
@@ -112,18 +112,18 @@ describe('Actions Package details store', () => {
         packageEntity.id,
         fileId,
       );
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     });
 
     it('should create flash on API error', async () => {
       Api.deleteProjectPackageFile = jest.fn().mockRejectedValue();
       await testAction(deletePackageFile, fileId, { packageEntity }, [], []);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
-        type: 'warning',
+        variant: VARIANT_WARNING,
       });
     });
   });
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js
index 93d013bb458..aca6b0942cc 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
@@ -74,7 +74,7 @@ describe('Infrastructure Title', () => {
       mountComponent({ ...exampleProps, count });
     });
 
-    it(exist ? 'exists' : 'does not exist', () => {
+    it(`${exist ? 'exists' : 'does not exist'}`, () => {
       expect(findMetadataItem().exists()).toBe(exist);
     });
 
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
index db1d3f3f633..dff95364d7d 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_INFO } from '~/flash';
 import * as commonUtils from '~/lib/utils/common_utils';
 import PackageListApp from '~/packages_and_registries/infrastructure_registry/list/components/packages_list_app.vue';
 import { DELETE_PACKAGE_SUCCESS_MESSAGE } from '~/packages_and_registries/infrastructure_registry/list/constants';
@@ -222,9 +222,9 @@ describe('packages_list_app', () => {
     it(`creates a flash if the query string contains ${SHOW_DELETE_SUCCESS_ALERT}`, () => {
       mountComponent();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DELETE_PACKAGE_SUCCESS_MESSAGE,
-        type: 'notice',
+        variant: VARIANT_INFO,
       });
     });
 
@@ -238,7 +238,7 @@ describe('packages_list_app', () => {
       setWindowLocation('?');
       mountComponent();
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(commonUtils.historyReplaceState).not.toHaveBeenCalled();
     });
   });
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
index d596f2dae33..36417eaf793 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/stores/actions_spec.js
@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
 import Api from '~/api';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { MISSING_DELETE_PATH_ERROR } from '~/packages_and_registries/infrastructure_registry/list/constants';
 import * as actions from '~/packages_and_registries/infrastructure_registry/list/stores/actions';
 import * as types from '~/packages_and_registries/infrastructure_registry/list/stores/mutation_types';
@@ -107,7 +107,7 @@ describe('Actions Package list store', () => {
           { type: 'setLoading', payload: false },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it('should force the terraform_module type when forceTerraform is true', async () => {
@@ -209,17 +209,17 @@ describe('Actions Package list store', () => {
           { type: 'setLoading', payload: false },
         ],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it.each`
       property             | actionPayload
       ${'_links'}          | ${{}}
       ${'delete_api_path'} | ${{ _links: {} }}
-    `('should reject and createFlash when $property is missing', ({ actionPayload }) => {
+    `('should reject and createAlert when $property is missing', ({ actionPayload }) => {
       return testAction(actions.requestDeletePackage, actionPayload, null, [], []).catch((e) => {
         expect(e).toEqual(new Error(MISSING_DELETE_PATH_ERROR));
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: DELETE_PACKAGE_ERROR_MESSAGE,
         });
       });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
index 61923233d2e..047fa04947c 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/package_title_spec.js.snap
@@ -79,6 +79,18 @@ exports[`PackageTitle renders with tags 1`] = `
             texttooltip=""
           />
         </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-last-downloaded-at"
+            icon="download"
+            link=""
+            size="m"
+            text="Last downloaded Aug 17, 2021"
+            texttooltip=""
+          />
+        </div>
       </div>
     </div>
      
@@ -164,6 +176,18 @@ exports[`PackageTitle renders without tags 1`] = `
             texttooltip=""
           />
         </div>
+        <div
+          class="gl-display-flex gl-align-items-center gl-mr-5"
+        >
+          <metadata-item-stub
+            data-testid="package-last-downloaded-at"
+            icon="download"
+            link=""
+            size="m"
+            text="Last downloaded Aug 17, 2021"
+            texttooltip=""
+          />
+        </div>
       </div>
     </div>
      
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 37416dcd4e7..1fda77f2aaa 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
@@ -49,6 +49,7 @@ describe('PackageTitle', () => {
   const findPackageSize = () => wrapper.findByTestId('package-size');
   const findPipelineProject = () => wrapper.findByTestId('pipeline-project');
   const findPackageRef = () => wrapper.findByTestId('package-ref');
+  const findPackageLastDownloadedAt = () => wrapper.findByTestId('package-last-downloaded-at');
   const findPackageTags = () => wrapper.findComponent(PackageTags);
   const findPackageBadges = () => wrapper.findAllByTestId('tag-badge');
   const findSubHeaderText = () => wrapper.findByTestId('sub-header');
@@ -227,4 +228,25 @@ describe('PackageTitle', () => {
       });
     });
   });
+
+  describe('package last downloaded at', () => {
+    it('does not display the data if missing', async () => {
+      await createComponent({
+        ...packageData(),
+        lastDownloadedAt: null,
+      });
+
+      expect(findPackageLastDownloadedAt().exists()).toBe(false);
+    });
+
+    it('correctly shows the data if present', async () => {
+      await createComponent();
+
+      expect(findPackageLastDownloadedAt().props()).toMatchObject({
+        text: 'Last downloaded Aug 17, 2021',
+        icon: 'download',
+        size: 'm',
+      });
+    });
+  });
 });
diff --git a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
index 14a70def7d0..93c2196b210 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js
@@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import createFlash from '~/flash';
+import { createAlert, VARIANT_SUCCESS, VARIANT_WARNING } from '~/flash';
 import DeletePackage from '~/packages_and_registries/package_registry/components/functional/delete_package.vue';
 
 import destroyPackageMutation from '~/packages_and_registries/package_registry/graphql/mutations/destroy_package.mutation.graphql';
@@ -104,22 +104,22 @@ describe('DeletePackage', () => {
       expect(wrapper.emitted('end')).toEqual([[]]);
     });
 
-    it('does not call createFlash', async () => {
+    it('does not call createAlert', async () => {
       createComponent();
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
 
-    it('calls createFlash with the success message when showSuccessAlert is true', async () => {
+    it('calls createAlert with the success message when showSuccessAlert is true', async () => {
       createComponent({ showSuccessAlert: true });
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DeletePackage.i18n.successMessage,
-        type: 'success',
+        variant: VARIANT_SUCCESS,
       });
     });
   });
@@ -141,14 +141,14 @@ describe('DeletePackage', () => {
       expect(wrapper.emitted('end')).toEqual([[]]);
     });
 
-    it('calls createFlash with the error message', async () => {
+    it('calls createAlert with the error message', async () => {
       createComponent({ showSuccessAlert: true });
 
       await clickOnButtonAndWait(eventPayload);
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: DeletePackage.i18n.errorMessage,
-        type: 'warning',
+        variant: VARIANT_WARNING,
         captureError: true,
         error: expect.any(Error),
       });
diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js
index 22236424e6a..c2b6fb734d6 100644
--- a/spec/frontend/packages_and_registries/package_registry/mock_data.js
+++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js
@@ -127,6 +127,7 @@ export const packageData = (extend) => ({
   version: '1.0.0',
   createdAt: '2020-08-17T14:23:32Z',
   updatedAt: '2020-08-17T14:23:32Z',
+  lastDownloadedAt: '2021-08-17T14:23:32Z',
   status: 'DEFAULT',
   mavenUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/maven',
   npmUrl: 'http://gdk.test:3000/api/v4/projects/1/packages/npm',
diff --git a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js
index 83158d1cc5e..a32e76a132e 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
@@ -1,4 +1,4 @@
-import { GlEmptyState, GlBadge, GlTabs, GlTab } from '@gitlab/ui';
+import { GlEmptyState, GlBadge, GlTabs, GlTab, GlSprintf } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 
 import VueApollo from 'vue-apollo';
@@ -6,7 +6,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 
 import AdditionalMetadata from '~/packages_and_registries/package_registry/components/details/additional_metadata.vue';
 import PackagesApp from '~/packages_and_registries/package_registry/pages/details.vue';
@@ -86,11 +86,17 @@ describe('PackagesApp', () => {
         PackageTitle,
         DeletePackage,
         GlModal: {
-          template: '<div></div>',
+          template: `
+            <div>
+              <slot name="modal-title"></slot>
+              <p><slot></slot></p>
+            </div>
+          `,
           methods: {
             show: jest.fn(),
           },
         },
+        GlSprintf,
         GlTabs,
         GlTab,
       },
@@ -149,7 +155,7 @@ describe('PackagesApp', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith(
+    expect(createAlert).toHaveBeenCalledWith(
       expect.objectContaining({
         message: FETCH_PACKAGE_DETAILS_ERROR_MESSAGE,
       }),
@@ -245,7 +251,9 @@ describe('PackagesApp', () => {
 
       await findDeleteButton().trigger('click');
 
-      expect(findDeleteModal().exists()).toBe(true);
+      expect(findDeleteModal().find('p').text()).toBe(
+        'You are about to delete version 1.0.0 of @gitlab-org/package-15. Are you sure?',
+      );
     });
 
     describe('successful request', () => {
@@ -359,6 +367,12 @@ describe('PackagesApp', () => {
 
         expect(showDeletePackageSpy).toHaveBeenCalled();
         expect(showDeleteFileSpy).not.toHaveBeenCalled();
+
+        await waitForPromises();
+
+        expect(findDeleteModal().find('p').text()).toBe(
+          'Deleting the last package asset will remove version 1.0.0 of @gitlab-org/package-15. Are you sure?',
+        );
       });
 
       it('confirming on the modal sets the loading state', async () => {
@@ -383,7 +397,7 @@ describe('PackagesApp', () => {
 
         await doDeleteFile();
 
-        expect(createFlash).toHaveBeenCalledWith(
+        expect(createAlert).toHaveBeenCalledWith(
           expect.objectContaining({
             message: DELETE_PACKAGE_FILE_SUCCESS_MESSAGE,
           }),
@@ -399,7 +413,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFile();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
             }),
@@ -416,7 +430,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFile();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILE_ERROR_MESSAGE,
             }),
@@ -468,7 +482,7 @@ describe('PackagesApp', () => {
 
         await doDeleteFiles();
 
-        expect(createFlash).toHaveBeenCalledWith(
+        expect(createAlert).toHaveBeenCalledWith(
           expect.objectContaining({
             message: DELETE_PACKAGE_FILES_SUCCESS_MESSAGE,
           }),
@@ -484,7 +498,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFiles();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILES_ERROR_MESSAGE,
             }),
@@ -501,7 +515,7 @@ describe('PackagesApp', () => {
 
           await doDeleteFiles();
 
-          expect(createFlash).toHaveBeenCalledWith(
+          expect(createAlert).toHaveBeenCalledWith(
             expect.objectContaining({
               message: DELETE_PACKAGE_FILES_ERROR_MESSAGE,
             }),
@@ -533,6 +547,12 @@ describe('PackagesApp', () => {
         findPackageFiles().vm.$emit('delete-files', packageFiles());
 
         expect(showDeletePackageSpy).toHaveBeenCalled();
+
+        await waitForPromises();
+
+        expect(findDeleteModal().find('p').text()).toBe(
+          'Deleting all package assets will remove version 1.0.0 of @gitlab-org/package-15. Are you sure?',
+        );
       });
     });
   });
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 8b60f31512b..2bb99fb8e8f 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
@@ -19,6 +19,7 @@ import {
   expirationPolicyPayload,
   emptyExpirationPolicyPayload,
   containerExpirationPolicyData,
+  nullExpirationPolicyPayload,
 } from '../mock_data';
 
 describe('Cleanup image tags project settings', () => {
@@ -98,15 +99,30 @@ describe('Cleanup image tags project settings', () => {
     expect(findDescription().text()).toMatchInterpolatedText(CONTAINER_CLEANUP_POLICY_DESCRIPTION);
   });
 
+  it('when loading does not render form or alert components', () => {
+    mountComponentWithApollo({
+      resolver: jest.fn().mockResolvedValue(),
+    });
+
+    expect(findFormComponent().exists()).toBe(false);
+    expect(findAlert().exists()).toBe(false);
+  });
+
   describe('the form is disabled', () => {
-    it('hides the form', () => {
-      mountComponent();
+    it('hides the form', async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+      });
+      await waitForPromises();
 
       expect(findFormComponent().exists()).toBe(false);
     });
 
-    it('shows an alert', () => {
-      mountComponent();
+    it('shows an alert', async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+      });
+      await waitForPromises();
 
       const text = findAlert().text();
       expect(text).toContain(UNAVAILABLE_FEATURE_INTRO_TEXT);
@@ -114,8 +130,12 @@ describe('Cleanup image tags project settings', () => {
     });
 
     describe('an admin is visiting the page', () => {
-      it('shows the admin part of the alert message', () => {
-        mountComponent({ ...defaultProvidedValues, isAdmin: true });
+      it('shows the admin part of the alert message', async () => {
+        mountComponentWithApollo({
+          provide: { ...defaultProvidedValues, isAdmin: true },
+          resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+        });
+        await waitForPromises();
 
         const sprintf = findAlert().findComponent(GlSprintf);
         expect(sprintf.text()).toBe('administration settings');
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 35baeaeac61..43484d26d76 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
@@ -16,7 +16,11 @@ import {
 import expirationPolicyQuery from '~/packages_and_registries/settings/project/graphql/queries/get_expiration_policy.query.graphql';
 import SettingsBlock from '~/vue_shared/components/settings/settings_block.vue';
 
-import { expirationPolicyPayload, emptyExpirationPolicyPayload } from '../mock_data';
+import {
+  expirationPolicyPayload,
+  emptyExpirationPolicyPayload,
+  nullExpirationPolicyPayload,
+} from '../mock_data';
 
 describe('Container expiration policy project settings', () => {
   let wrapper;
@@ -78,15 +82,30 @@ describe('Container expiration policy project settings', () => {
     expect(findButton().attributes('href')).toBe(defaultProvidedValues.cleanupSettingsPath);
   });
 
+  it('when loading does not render form or alert components', () => {
+    mountComponentWithApollo({
+      resolver: jest.fn().mockResolvedValue(),
+    });
+
+    expect(findFormComponent().exists()).toBe(false);
+    expect(findAlert().exists()).toBe(false);
+  });
+
   describe('the form is disabled', () => {
-    it('the form is hidden', () => {
-      mountComponent();
+    it('hides the form', async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+      });
+      await waitForPromises();
 
       expect(findFormComponent().exists()).toBe(false);
     });
 
-    it('shows an alert', () => {
-      mountComponent();
+    it('shows an alert', async () => {
+      mountComponentWithApollo({
+        resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+      });
+      await waitForPromises();
 
       const text = findAlert().text();
       expect(text).toContain(UNAVAILABLE_FEATURE_INTRO_TEXT);
@@ -94,8 +113,12 @@ describe('Container expiration policy project settings', () => {
     });
 
     describe('an admin is visiting the page', () => {
-      it('shows the admin part of the alert message', () => {
-        mountComponent({ ...defaultProvidedValues, isAdmin: true });
+      it('shows the admin part of the alert message', async () => {
+        mountComponentWithApollo({
+          provide: { ...defaultProvidedValues, isAdmin: true },
+          resolver: jest.fn().mockResolvedValue(nullExpirationPolicyPayload()),
+        });
+        await waitForPromises();
 
         const sprintf = findAlert().findComponent(GlSprintf);
         expect(sprintf.text()).toBe('administration settings');
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
index 0696144215c..3204ca01f99 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js
@@ -29,6 +29,15 @@ export const emptyExpirationPolicyPayload = () => ({
   },
 });
 
+export const nullExpirationPolicyPayload = () => ({
+  data: {
+    project: {
+      id: '1',
+      containerExpirationPolicy: null,
+    },
+  },
+});
+
 export const expirationPolicyMutationPayload = ({ override, errors = [] } = {}) => ({
   data: {
     updateContainerExpirationPolicy: {
diff --git a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
index ebf21c01324..17669331370 100644
--- a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
+++ b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js
@@ -1,9 +1,10 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
-import mountComponent from 'helpers/vue_mount_component_helper';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
-import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
+import StopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
@@ -14,20 +15,23 @@ describe('stop_jobs_modal.vue', () => {
   const props = {
     url: `${TEST_HOST}/stop_jobs_modal.vue/stopAll`,
   };
-  let vm;
+  let wrapper;
 
-  afterEach(() => {
-    vm.$destroy();
+  beforeEach(() => {
+    wrapper = mount(StopJobsModal, { propsData: props });
   });
 
-  beforeEach(() => {
-    const Component = Vue.extend(stopJobsModal);
-    vm = mountComponent(Component, props);
+  afterEach(() => {
+    wrapper.destroy();
   });
 
-  describe('onSubmit', () => {
+  describe('on submit', () => {
     it('stops jobs and redirects to overview page', async () => {
       const responseURL = `${TEST_HOST}/stop_jobs_modal.vue/jobs`;
+      // TODO: We can't use axios-mock-adapter because our current version
+      // does not support responseURL
+      //
+      // see https://gitlab.com/gitlab-org/gitlab/-/issues/375308 for details
       jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(props.url);
         return Promise.resolve({
@@ -37,18 +41,28 @@ describe('stop_jobs_modal.vue', () => {
         });
       });
 
-      await vm.onSubmit();
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+      await nextTick();
+
       expect(redirectTo).toHaveBeenCalledWith(responseURL);
     });
 
     it('displays error if stopping jobs failed', async () => {
+      Vue.config.errorHandler = () => {}; // silencing thrown error
+
       const dummyError = new Error('stopping jobs failed');
+      // TODO: We can't use axios-mock-adapter because our current version
+      // does not support responseURL
+      //
+      // see https://gitlab.com/gitlab-org/gitlab/-/issues/375308 for details
       jest.spyOn(axios, 'post').mockImplementation((url) => {
         expect(url).toBe(props.url);
         return Promise.reject(dummyError);
       });
 
-      await expect(vm.onSubmit()).rejects.toEqual(dummyError);
+      wrapper.findComponent(GlModal).vm.$emit('primary');
+      await nextTick();
+
       expect(redirectTo).not.toHaveBeenCalled();
     });
   });
diff --git a/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js b/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js
new file mode 100644
index 00000000000..c1e1545944b
--- /dev/null
+++ b/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js
@@ -0,0 +1,81 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlListbox } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import searchUsersQuery from '~/graphql_shared/queries/users_search_all.query.graphql';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import UserSelect from '~/pages/import/fogbugz/new_user_map/components/user_select.vue';
+
+Vue.use(VueApollo);
+
+const USERS_RESPONSE = {
+  data: {
+    users: {
+      nodes: [
+        {
+          id: 'gid://gitlab/User/44',
+          avatarUrl: '/avatar1',
+          webUrl: '/reported_user_22',
+          name: 'Birgit Steuber',
+          username: 'reported_user_22',
+          __typename: 'UserCore',
+        },
+        {
+          id: 'gid://gitlab/User/43',
+          avatarUrl: '/avatar2',
+          webUrl: '/reported_user_21',
+          name: 'Luke Spinka',
+          username: 'reported_user_21',
+          __typename: 'UserCore',
+        },
+      ],
+      __typename: 'UserCoreConnection',
+    },
+  },
+};
+
+describe('fogbugz user select component', () => {
+  let wrapper;
+  const searchQueryHandlerSuccess = jest.fn().mockResolvedValue(USERS_RESPONSE);
+
+  const createComponent = (propsData = { name: 'demo' }) => {
+    const fakeApollo = createMockApollo([[searchUsersQuery, searchQueryHandlerSuccess]]);
+
+    wrapper = shallowMount(UserSelect, {
+      apolloProvider: fakeApollo,
+      propsData,
+    });
+  };
+
+  it('renders hidden input with name from props', () => {
+    const name = 'test';
+    createComponent({ name });
+    expect(wrapper.find('input').attributes('name')).toBe(name);
+  });
+
+  it('syncs input value with value emitted from listbox', async () => {
+    createComponent();
+
+    const id = 8;
+
+    wrapper.findComponent(GlListbox).vm.$emit('select', `gid://gitlab/User/${id}`);
+    await nextTick();
+
+    expect(wrapper.get('input').attributes('value')).toBe(id.toString());
+  });
+
+  it('filters users when search is performed in listbox', async () => {
+    createComponent();
+    jest.runOnlyPendingTimers();
+
+    wrapper.findComponent(GlListbox).vm.$emit('search', 'test');
+    await nextTick();
+    jest.runOnlyPendingTimers();
+
+    expect(searchQueryHandlerSuccess).toHaveBeenCalledWith({
+      first: expect.anything(),
+      search: 'test',
+    });
+  });
+});
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 f221a90da61..727c5164cdc 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -449,7 +449,7 @@ describe('ForkForm component', () => {
         await submitForm();
 
         expect(urlUtility.redirectTo).not.toHaveBeenCalled();
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'An error occurred while forking the project. Please try again.',
         });
       });
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 1a88aebae32..f6d3957115f 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
@@ -10,7 +10,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import searchQuery from '~/pages/projects/forks/new/queries/search_forkable_namespaces.query.graphql';
 import ProjectNamespace from '~/pages/projects/forks/new/components/project_namespace.vue';
 
@@ -167,7 +167,7 @@ describe('ProjectNamespace component', () => {
     });
 
     it('creates a flash message and captures the error', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Something went wrong while loading data. Please refresh the page to try again.',
         captureError: true,
         error: expect.any(Error),
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
index 5b9c48f0d9b..f54d56c3af4 100644
--- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js
@@ -1,8 +1,7 @@
 import $ from 'jquery';
 import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import { formatUtcOffset, formatTimezone } from '~/lib/utils/datetime_utility';
 import TimezoneDropdown, {
-  formatUtcOffset,
-  formatTimezone,
   findTimezoneByIdentifier,
 } from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
 
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 b37d2f06191..0f947e84e0f 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
@@ -1,15 +1,12 @@
 import { nextTick } from 'vue';
-import { GlAlert, GlButton, GlFormInput, GlFormGroup, GlSegmentedControl } from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { mockTracking } from 'helpers/tracking_helper';
-import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import ContentEditor from '~/content_editor/components/content_editor.vue';
-import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import {
   CONTENT_EDITOR_LOADED_ACTION,
   SAVED_USING_CONTENT_EDITOR_ACTION,
@@ -18,8 +15,6 @@ import {
   WIKI_FORMAT_UPDATED_ACTION,
 } from '~/pages/shared/wikis/constants';
 
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-
 jest.mock('~/emoji');
 
 describe('WikiForm', () => {
@@ -30,16 +25,12 @@ describe('WikiForm', () => {
   const findForm = () => wrapper.find('form');
   const findTitle = () => wrapper.find('#wiki_title');
   const findFormat = () => wrapper.find('#wiki_format');
-  const findContent = () => wrapper.find('#wiki_content');
   const findMessage = () => wrapper.find('#wiki_message');
+  const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
   const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button');
   const findCancelButton = () => wrapper.findByTestId('wiki-cancel-button');
-  const findToggleEditingModeButton = () => wrapper.findByTestId('toggle-editing-mode-button');
   const findTitleHelpLink = () => wrapper.findByText('Learn more.');
   const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link');
-  const findContentEditor = () => wrapper.findComponent(ContentEditor);
-  const findClassicEditor = () => wrapper.findComponent(MarkdownField);
-  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
   const setFormat = (value) => {
     const format = findFormat();
@@ -53,13 +44,6 @@ describe('WikiForm', () => {
     await nextTick();
   };
 
-  const dispatchBeforeUnload = () => {
-    const e = new Event('beforeunload');
-    jest.spyOn(e, 'preventDefault');
-    window.dispatchEvent(e);
-    return e;
-  };
-
   const pageInfoNew = {
     persisted: false,
     uploadsPath: '/project/path/-/wikis/attachments',
@@ -103,11 +87,8 @@ describe('WikiForm', () => {
           },
         },
         stubs: {
-          MarkdownField,
           GlAlert,
           GlButton,
-          GlSegmentedControl,
-          LocalStorageSync: stubComponent(LocalStorageSync),
           GlFormInput,
           GlFormGroup,
         },
@@ -126,6 +107,22 @@ describe('WikiForm', () => {
     wrapper = null;
   });
 
+  it('displays markdown editor', () => {
+    createWrapper({ persisted: true });
+
+    expect(findMarkdownEditor().props()).toEqual(
+      expect.objectContaining({
+        value: pageInfoPersisted.content,
+        renderMarkdownPath: pageInfoPersisted.markdownPreviewPath,
+        markdownDocsPath: pageInfoPersisted.markdownHelpPath,
+        uploadsPath: pageInfoPersisted.uploadsPath,
+        initOnAutofocus: pageInfoPersisted.persisted,
+        formFieldId: 'wiki_content',
+        formFieldName: 'wiki[content]',
+      }),
+    );
+  });
+
   it.each`
     title                | persisted | message
     ${'my page'}         | ${false}  | ${'Create my page'}
@@ -154,7 +151,7 @@ describe('WikiForm', () => {
   it('does not trim page content by default', () => {
     createWrapper({ persisted: true });
 
-    expect(findContent().element.value).toBe('  My page content  ');
+    expect(findMarkdownEditor().props().value).toBe('  My page content  ');
   });
 
   it.each`
@@ -168,7 +165,9 @@ describe('WikiForm', () => {
 
     await setFormat(format);
 
-    expect(findClassicEditor().props('enablePreview')).toBe(enabled);
+    nextTick();
+
+    expect(findMarkdownEditor().props('enablePreview')).toBe(enabled);
   });
 
   it.each`
@@ -185,14 +184,6 @@ describe('WikiForm', () => {
     expect(wrapper.text()).toContain(text);
   });
 
-  it('starts with no unload warning', () => {
-    createWrapper();
-
-    const e = dispatchBeforeUnload();
-    expect(typeof e.returnValue).not.toBe('string');
-    expect(e.preventDefault).not.toHaveBeenCalled();
-  });
-
   it.each`
     persisted | titleHelpText                                                                                              | titleHelpLink
     ${true}   | ${'You can move this page by adding the path to the beginning of the title.'}                              | ${'/help/user/project/wiki/index#move-a-wiki-page'}
@@ -219,15 +210,7 @@ describe('WikiForm', () => {
     beforeEach(async () => {
       createWrapper({ mountFn: mount, persisted: true });
 
-      const input = findContent();
-
-      await input.setValue(' Lorem ipsum dolar sit! ');
-    });
-
-    it('sets before unload warning', () => {
-      const e = dispatchBeforeUnload();
-
-      expect(e.preventDefault).toHaveBeenCalledTimes(1);
+      await findMarkdownEditor().vm.$emit('input', ' Lorem ipsum dolar sit! ');
     });
 
     describe('form submit', () => {
@@ -235,17 +218,12 @@ describe('WikiForm', () => {
         await triggerFormSubmit();
       });
 
-      it('when form submitted, unsets before unload warning', () => {
-        const e = dispatchBeforeUnload();
-        expect(e.preventDefault).not.toHaveBeenCalled();
-      });
-
       it('triggers wiki format tracking event', () => {
         expect(trackingSpy).toHaveBeenCalledTimes(1);
       });
 
       it('does not trim page content', () => {
-        expect(findContent().element.value).toBe(' Lorem ipsum dolar sit! ');
+        expect(findMarkdownEditor().props().value).toBe(' Lorem ipsum dolar sit! ');
       });
     });
   });
@@ -264,7 +242,7 @@ describe('WikiForm', () => {
         createWrapper({ mountFn: mount });
 
         await findTitle().setValue(title);
-        await findContent().setValue(content);
+        await findMarkdownEditor().vm.$emit('input', content);
 
         expect(findSubmitButton().props().disabled).toBe(disabledAttr);
       },
@@ -296,208 +274,59 @@ describe('WikiForm', () => {
     );
   });
 
-  describe('toggle editing mode control', () => {
-    beforeEach(() => {
-      createWrapper({ mountFn: mount });
-    });
+  it.each`
+    format        | enabled  | action
+    ${'markdown'} | ${true}  | ${'enables'}
+    ${'rdoc'}     | ${false} | ${'disables'}
+    ${'asciidoc'} | ${false} | ${'disables'}
+    ${'org'}      | ${false} | ${'disables'}
+  `('$action content editor when format is $format', async ({ format, enabled }) => {
+    createWrapper({ mountFn: mount });
 
-    it.each`
-      format        | exists   | action
-      ${'markdown'} | ${true}  | ${'displays'}
-      ${'rdoc'}     | ${false} | ${'hides'}
-      ${'asciidoc'} | ${false} | ${'hides'}
-      ${'org'}      | ${false} | ${'hides'}
-    `('$action toggle editing mode button when format is $format', async ({ format, exists }) => {
-      await setFormat(format);
-
-      expect(findToggleEditingModeButton().exists()).toBe(exists);
-    });
+    setFormat(format);
 
-    describe('when content editor is not active', () => {
-      it('displays "Source" label in the toggle editing mode button', () => {
-        expect(findToggleEditingModeButton().props().checked).toBe('source');
-      });
+    await nextTick();
 
-      describe('when clicking the toggle editing mode button', () => {
-        beforeEach(async () => {
-          await findToggleEditingModeButton().vm.$emit('input', 'richText');
-        });
+    expect(findMarkdownEditor().props().enableContentEditor).toBe(enabled);
+  });
 
-        it('hides the classic editor', () => {
-          expect(findClassicEditor().exists()).toBe(false);
-        });
+  describe('when markdown editor activates the content editor', () => {
+    beforeEach(async () => {
+      createWrapper({ mountFn: mount, persisted: true });
 
-        it('shows the content editor', () => {
-          expect(findContentEditor().exists()).toBe(true);
-        });
-      });
+      await findMarkdownEditor().vm.$emit('contentEditor');
     });
 
-    describe('markdown editor type persistance', () => {
-      it('loads content editor by default if it is persisted in local storage', async () => {
-        expect(findClassicEditor().exists()).toBe(true);
-        expect(findContentEditor().exists()).toBe(false);
-
-        // enable content editor
-        await findLocalStorageSync().vm.$emit('input', 'richText');
-
-        expect(findContentEditor().exists()).toBe(true);
-        expect(findClassicEditor().exists()).toBe(false);
-      });
+    it('disables the format dropdown', () => {
+      expect(findFormat().element.getAttribute('disabled')).toBeDefined();
     });
 
-    describe('when content editor is active', () => {
-      beforeEach(() => {
-        createWrapper();
-        findToggleEditingModeButton().vm.$emit('input', 'richText');
-      });
-
-      it('displays "Edit Rich" label in the toggle editing mode button', () => {
-        expect(findToggleEditingModeButton().props().checked).toBe('richText');
-      });
-
-      describe('when clicking the toggle editing mode button', () => {
-        beforeEach(async () => {
-          await findToggleEditingModeButton().vm.$emit('input', 'source');
-          await nextTick();
-        });
-
-        it('hides the content editor', () => {
-          expect(findContentEditor().exists()).toBe(false);
-        });
-
-        it('displays the classic editor', () => {
-          expect(findClassicEditor().exists()).toBe(true);
-        });
-      });
-
-      describe('when content editor is loading', () => {
-        beforeEach(async () => {
-          findContentEditor().vm.$emit('loading');
-
-          await nextTick();
-        });
-
-        it('disables toggle editing mode button', () => {
-          expect(findToggleEditingModeButton().attributes().disabled).toBe('true');
-        });
-
-        describe('when content editor loads successfully', () => {
-          it('enables toggle editing mode button', async () => {
-            findContentEditor().vm.$emit('loadingSuccess');
-
-            await nextTick();
-
-            expect(findToggleEditingModeButton().attributes().disabled).not.toBeDefined();
-          });
-        });
-
-        describe('when content editor fails to load', () => {
-          it('enables toggle editing mode button', async () => {
-            findContentEditor().vm.$emit('loadingError');
-
-            await nextTick();
-
-            expect(findToggleEditingModeButton().attributes().disabled).not.toBeDefined();
-          });
-        });
+    it('sends tracking event when editor loads', async () => {
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, CONTENT_EDITOR_LOADED_ACTION, {
+        label: WIKI_CONTENT_EDITOR_TRACKING_LABEL,
       });
     });
-  });
-
-  describe('wiki content editor', () => {
-    describe('clicking "Edit rich text": editor fails to load', () => {
-      beforeEach(async () => {
-        createWrapper({ mountFn: mount });
-        mock.onPost(/preview-markdown/).reply(400);
-
-        await findToggleEditingModeButton().vm.$emit('input', 'richText');
-
-        // try waiting for content editor to load (but it will never actually load)
-        await waitForPromises();
-      });
-
-      it('disables the submit button', () => {
-        expect(findSubmitButton().props('disabled')).toBe(true);
-      });
-
-      describe('toggling editing modes to the classic editor', () => {
-        beforeEach(() => {
-          return findToggleEditingModeButton().vm.$emit('input', 'source');
-        });
 
-        it('switches to classic editor', () => {
-          expect(findContentEditor().exists()).toBe(false);
-          expect(findClassicEditor().exists()).toBe(true);
-        });
-      });
-    });
+    describe('when triggering form submit', () => {
+      const updatedMarkdown = 'hello **world**';
 
-    describe('clicking "Edit rich text": editor loads successfully', () => {
       beforeEach(async () => {
-        createWrapper({ persisted: true, mountFn: mount });
-
-        mock.onPost(/preview-markdown/).reply(200, { body: '<p>hello <strong>world</strong></p>' });
-
-        await findToggleEditingModeButton().vm.$emit('input', 'richText');
-        await waitForPromises();
-      });
-
-      it('shows the rich text editor when loading finishes', async () => {
-        expect(findContentEditor().exists()).toBe(true);
+        findMarkdownEditor().vm.$emit('input', updatedMarkdown);
+        await triggerFormSubmit();
       });
 
-      it('sends tracking event when editor loads', async () => {
-        expect(trackingSpy).toHaveBeenCalledWith(undefined, CONTENT_EDITOR_LOADED_ACTION, {
+      it('triggers tracking events on form submit', async () => {
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, SAVED_USING_CONTENT_EDITOR_ACTION, {
           label: WIKI_CONTENT_EDITOR_TRACKING_LABEL,
         });
-      });
-
-      it('disables the format dropdown', () => {
-        expect(findFormat().element.getAttribute('disabled')).toBeDefined();
-      });
 
-      describe('when wiki content is updated', () => {
-        const updatedMarkdown = 'hello **world**';
-
-        beforeEach(() => {
-          findContentEditor().vm.$emit('change', {
-            empty: false,
-            changed: true,
-            markdown: updatedMarkdown,
-          });
-        });
-
-        it('sets before unload warning', () => {
-          const e = dispatchBeforeUnload();
-          expect(e.preventDefault).toHaveBeenCalledTimes(1);
-        });
-
-        it('unsets before unload warning on form submit', async () => {
-          await triggerFormSubmit();
-
-          const e = dispatchBeforeUnload();
-          expect(e.preventDefault).not.toHaveBeenCalled();
-        });
-
-        it('triggers tracking events on form submit', async () => {
-          await triggerFormSubmit();
-          expect(trackingSpy).toHaveBeenCalledWith(undefined, SAVED_USING_CONTENT_EDITOR_ACTION, {
-            label: WIKI_CONTENT_EDITOR_TRACKING_LABEL,
-          });
-
-          expect(trackingSpy).toHaveBeenCalledWith(undefined, WIKI_FORMAT_UPDATED_ACTION, {
-            label: WIKI_FORMAT_LABEL,
-            extra: {
-              value: findFormat().element.value,
-              old_format: pageInfoPersisted.format,
-              project_path: pageInfoPersisted.path,
-            },
-          });
-        });
-
-        it('sets content field to the content editor updated markdown', async () => {
-          expect(findContent().element.value).toBe(updatedMarkdown);
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, WIKI_FORMAT_UPDATED_ACTION, {
+          label: WIKI_FORMAT_LABEL,
+          extra: {
+            value: findFormat().element.value,
+            old_format: pageInfoPersisted.format,
+            project_path: pageInfoPersisted.path,
+          },
         });
       });
     });
diff --git a/spec/frontend/pdf/page_spec.js b/spec/frontend/pdf/page_spec.js
index 07a7f1bb2ff..4cf83a3252d 100644
--- a/spec/frontend/pdf/page_spec.js
+++ b/spec/frontend/pdf/page_spec.js
@@ -1,17 +1,16 @@
-import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import PageComponent from '~/pdf/page/index.vue';
 
 jest.mock('pdfjs-dist/webpack', () => {
-  return { default: jest.requireActual('pdfjs-dist/build/pdf') };
+  return { default: jest.requireActual('pdfjs-dist/legacy/build/pdf') };
 });
 
 describe('Page component', () => {
-  const Component = Vue.extend(PageComponent);
-  let vm;
+  let wrapper;
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders the page when mounting', async () => {
@@ -20,16 +19,18 @@ describe('Page component', () => {
       getViewport: jest.fn().mockReturnValue({}),
     };
 
-    vm = mountComponent(Component, {
-      page: testPage,
-      number: 1,
+    wrapper = mount(PageComponent, {
+      propsData: {
+        page: testPage,
+        number: 1,
+      },
     });
 
-    expect(vm.rendering).toBe(true);
-
     await nextTick();
 
-    expect(testPage.render).toHaveBeenCalledWith(vm.renderContext);
-    expect(vm.rendering).toBe(false);
+    expect(testPage.render).toHaveBeenCalledWith({
+      canvasContext: wrapper.find('canvas').element.getContext('2d'),
+      viewport: testPage.getViewport(),
+    });
   });
 });
diff --git a/spec/frontend/performance_bar/components/request_warning_spec.js b/spec/frontend/performance_bar/components/request_warning_spec.js
index d558c7b018a..9dd8ea9f933 100644
--- a/spec/frontend/performance_bar/components/request_warning_spec.js
+++ b/spec/frontend/performance_bar/components/request_warning_spec.js
@@ -2,14 +2,21 @@ import { shallowMount } from '@vue/test-utils';
 import RequestWarning from '~/performance_bar/components/request_warning.vue';
 
 describe('request warning', () => {
+  let wrapper;
   const htmlId = 'request-123';
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('when the request has warnings', () => {
-    const wrapper = shallowMount(RequestWarning, {
-      propsData: {
-        htmlId,
-        warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
-      },
+    beforeEach(() => {
+      wrapper = shallowMount(RequestWarning, {
+        propsData: {
+          htmlId,
+          warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
+        },
+      });
     });
 
     it('adds a warning emoji with the correct ID', () => {
@@ -19,11 +26,13 @@ describe('request warning', () => {
   });
 
   describe('when the request does not have warnings', () => {
-    const wrapper = shallowMount(RequestWarning, {
-      propsData: {
-        htmlId,
-        warnings: [],
-      },
+    beforeEach(() => {
+      wrapper = shallowMount(RequestWarning, {
+        propsData: {
+          htmlId,
+          warnings: [],
+        },
+      });
     });
 
     it('does nothing', () => {
diff --git a/spec/frontend/persistent_user_callout_spec.js b/spec/frontend/persistent_user_callout_spec.js
index 9cd5bb9e9a1..c9574208900 100644
--- a/spec/frontend/persistent_user_callout_spec.js
+++ b/spec/frontend/persistent_user_callout_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import PersistentUserCallout from '~/persistent_user_callout';
 
@@ -108,7 +108,7 @@ describe('PersistentUserCallout', () => {
       await waitForPromises();
 
       expect(persistentUserCallout.container.remove).not.toHaveBeenCalled();
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while dismissing the alert. Refresh the page and try again.',
       });
     });
@@ -214,7 +214,7 @@ describe('PersistentUserCallout', () => {
       await waitForPromises();
 
       expect(window.location.assign).not.toHaveBeenCalled();
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message:
           'An error occurred while acknowledging the notification. Refresh the page and try again.',
       });
diff --git a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js
index 8f6f4d8cff9..f0347ad19ac 100644
--- a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js
+++ b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js
@@ -360,7 +360,7 @@ describe('Pipeline editor branch switcher', () => {
   });
 
   describe('loading icon', () => {
-    test.each`
+    it.each`
       isQueryLoading | isRendered
       ${true}        | ${true}
       ${false}       | ${false}
diff --git a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
index 8e0a73b6e7c..c76c3460e99 100644
--- a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
+++ b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
@@ -7,6 +7,7 @@ describe('Pipeline editor empty state', () => {
   let wrapper;
   const defaultProvide = {
     emptyStateIllustrationPath: 'my/svg/path',
+    usesExternalConfig: false,
   };
 
   const createComponent = ({ provide } = {}) => {
@@ -18,6 +19,7 @@ describe('Pipeline editor empty state', () => {
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findSvgImage = () => wrapper.find('img');
   const findTitle = () => wrapper.find('h1');
+  const findExternalCiInstructions = () => wrapper.find('p');
   const findConfirmButton = () => wrapper.findComponent(GlButton);
   const findDescription = () => wrapper.findComponent(GlSprintf);
 
@@ -25,7 +27,33 @@ describe('Pipeline editor empty state', () => {
     wrapper.destroy();
   });
 
-  describe('template', () => {
+  describe('when project uses an external CI config', () => {
+    beforeEach(() => {
+      createComponent({
+        provide: { usesExternalConfig: true },
+      });
+    });
+
+    it('renders an svg image', () => {
+      expect(findSvgImage().exists()).toBe(true);
+    });
+
+    it('renders the correct title and instructions', () => {
+      expect(findTitle().exists()).toBe(true);
+      expect(findExternalCiInstructions().exists()).toBe(true);
+
+      expect(findExternalCiInstructions().html()).toContain(
+        wrapper.vm.$options.i18n.externalCiInstructions,
+      );
+      expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.externalCiNote);
+    });
+
+    it('does not render the CTA button', () => {
+      expect(findConfirmButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when project uses an accessible CI config', () => {
     beforeEach(() => {
       createComponent();
     });
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
index 1989f23a415..9fe1536d3f5 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js
@@ -55,11 +55,12 @@ jest.mock('~/lib/utils/url_utility', () => ({
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-const mockProvide = {
+const defaultProvide = {
   ciConfigPath: mockCiConfigPath,
   defaultBranch: mockDefaultBranch,
   newMergeRequestPath: mockNewMergeRequestPath,
   projectFullPath: mockProjectFullPath,
+  usesExternalConfig: false,
 };
 
 describe('Pipeline editor app component', () => {
@@ -79,7 +80,7 @@ describe('Pipeline editor app component', () => {
     stubs = {},
   } = {}) => {
     wrapper = shallowMount(PipelineEditorApp, {
-      provide: { ...mockProvide, ...provide },
+      provide: { ...defaultProvide, ...provide },
       stubs,
       mocks: {
         $apollo: {
@@ -229,6 +230,22 @@ describe('Pipeline editor app component', () => {
       mockLatestCommitShaQuery.mockResolvedValue(mockCommitShaResults);
     });
 
+    describe('when project uses an external CI config file', () => {
+      beforeEach(async () => {
+        await createComponentWithApollo({
+          provide: {
+            usesExternalConfig: true,
+          },
+        });
+      });
+
+      it('shows an empty state and does not show editor home component', () => {
+        expect(findEmptyState().exists()).toBe(true);
+        expect(findAlert().exists()).toBe(false);
+        expect(findEditorHome().exists()).toBe(false);
+      });
+    });
+
     describe('when file exists', () => {
       beforeEach(async () => {
         await createComponentWithApollo();
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
index e317d1ddcc2..2b06660c4b3 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
@@ -149,20 +149,20 @@ describe('Pipeline editor home wrapper', () => {
 
         await nextTick();
 
-        expect(findCommitSection().exists()).toBe(shouldShow);
+        expect(findCommitSection().isVisible()).toBe(shouldShow);
       },
     );
 
     it('shows the commit form again when coming back to the create tab', async () => {
-      expect(findCommitSection().exists()).toBe(true);
+      expect(findCommitSection().isVisible()).toBe(true);
 
       findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB);
       await nextTick();
-      expect(findCommitSection().exists()).toBe(false);
+      expect(findCommitSection().isVisible()).toBe(false);
 
       findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB);
       await nextTick();
-      expect(findCommitSection().exists()).toBe(true);
+      expect(findCommitSection().isVisible()).toBe(true);
     });
 
     describe('rendering with tab params', () => {
@@ -178,7 +178,7 @@ describe('Pipeline editor home wrapper', () => {
           setWindowLocation(`https://gitlab.test/ci/editor/?tab=${TABS_INDEX[tab]}`);
           await createComponent({ stubs: { PipelineEditorTabs } });
 
-          expect(findCommitSection().exists()).toBe(shouldShow);
+          expect(findCommitSection().isVisible()).toBe(shouldShow);
         },
       );
     });
diff --git a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
index 5ce29bd6c5d..3e699b93fd3 100644
--- a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
@@ -1,72 +1,101 @@
-import { GlForm, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlForm, GlDropdownItem, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
 import CreditCardValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { redirectTo } from '~/lib/utils/url_utility';
 import PipelineNewForm from '~/pipeline_new/components/pipeline_new_form.vue';
+import ciConfigVariablesQuery from '~/pipeline_new/graphql/queries/ci_config_variables.graphql';
+import { resolvers } from '~/pipeline_new/graphql/resolvers';
 import RefsDropdown from '~/pipeline_new/components/refs_dropdown.vue';
 import {
+  mockCreditCardValidationRequiredError,
+  mockCiConfigVariablesResponse,
+  mockCiConfigVariablesResponseWithoutDesc,
+  mockEmptyCiConfigVariablesResponse,
+  mockError,
   mockQueryParams,
   mockPostParams,
   mockProjectId,
-  mockError,
   mockRefs,
-  mockCreditCardValidationRequiredError,
+  mockYamlVariables,
 } from '../mock_data';
 
+Vue.use(VueApollo);
+
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
 }));
 
 const projectRefsEndpoint = '/root/project/refs';
 const pipelinesPath = '/root/project/-/pipelines';
-const configVariablesPath = '/root/project/-/pipelines/config_variables';
+const projectPath = '/root/project/-/pipelines/config_variables';
 const newPipelinePostResponse = { id: 1 };
 const defaultBranch = 'main';
 
 describe('Pipeline New Form', () => {
   let wrapper;
   let mock;
+  let mockApollo;
+  let mockCiConfigVariables;
   let dummySubmitEvent;
 
   const findForm = () => wrapper.findComponent(GlForm);
   const findRefsDropdown = () => wrapper.findComponent(RefsDropdown);
-  const findSubmitButton = () => wrapper.find('[data-testid="run_pipeline_button"]');
-  const findVariableRows = () => wrapper.findAll('[data-testid="ci-variable-row"]');
-  const findRemoveIcons = () => wrapper.findAll('[data-testid="remove-ci-variable-row"]');
-  const findDropdowns = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-type"]');
-  const findKeyInputs = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-key"]');
-  const findValueInputs = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-value"]');
-  const findErrorAlert = () => wrapper.find('[data-testid="run-pipeline-error-alert"]');
-  const findWarningAlert = () => wrapper.find('[data-testid="run-pipeline-warning-alert"]');
+  const findSubmitButton = () => wrapper.findByTestId('run_pipeline_button');
+  const findVariableRows = () => wrapper.findAllByTestId('ci-variable-row');
+  const findRemoveIcons = () => wrapper.findAllByTestId('remove-ci-variable-row');
+  const findVariableTypes = () => wrapper.findAllByTestId('pipeline-form-ci-variable-type');
+  const findKeyInputs = () => wrapper.findAllByTestId('pipeline-form-ci-variable-key');
+  const findValueInputs = () => wrapper.findAllByTestId('pipeline-form-ci-variable-value');
+  const findValueDropdowns = () =>
+    wrapper.findAllByTestId('pipeline-form-ci-variable-value-dropdown');
+  const findValueDropdownItems = (dropdown) => dropdown.findAllComponents(GlDropdownItem);
+  const findErrorAlert = () => wrapper.findByTestId('run-pipeline-error-alert');
+  const findWarningAlert = () => wrapper.findByTestId('run-pipeline-warning-alert');
   const findWarningAlertSummary = () => findWarningAlert().findComponent(GlSprintf);
-  const findWarnings = () => wrapper.findAll('[data-testid="run-pipeline-warning"]');
+  const findWarnings = () => wrapper.findAllByTestId('run-pipeline-warning');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findCCAlert = () => wrapper.findComponent(CreditCardValidationRequiredAlert);
   const getFormPostParams = () => JSON.parse(mock.history.post[0].data);
 
-  const selectBranch = (branch) => {
+  const selectBranch = async (branch) => {
     // Select a branch in the dropdown
     findRefsDropdown().vm.$emit('input', {
       shortName: branch,
       fullName: `refs/heads/${branch}`,
     });
+
+    await waitForPromises();
+  };
+
+  const changeKeyInputValue = async (keyInputIndex, value) => {
+    const input = findKeyInputs().at(keyInputIndex);
+    input.element.value = value;
+    input.trigger('change');
+
+    await nextTick();
   };
 
-  const createComponent = (props = {}, method = shallowMount) => {
+  const createComponentWithApollo = ({ method = shallowMountExtended, props = {} } = {}) => {
+    const handlers = [[ciConfigVariablesQuery, mockCiConfigVariables]];
+    mockApollo = createMockApollo(handlers, resolvers);
+
     wrapper = method(PipelineNewForm, {
+      apolloProvider: mockApollo,
       provide: {
         projectRefsEndpoint,
       },
       propsData: {
         projectId: mockProjectId,
         pipelinesPath,
-        configVariablesPath,
+        projectPath,
         defaultBranch,
         refParam: defaultBranch,
         settingsLink: '',
@@ -78,7 +107,7 @@ describe('Pipeline New Form', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {});
+    mockCiConfigVariables = jest.fn();
     mock.onGet(projectRefsEndpoint).reply(httpStatusCodes.OK, mockRefs);
 
     dummySubmitEvent = {
@@ -87,24 +116,20 @@ describe('Pipeline New Form', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-
     mock.restore();
+    wrapper.destroy();
   });
 
   describe('Form', () => {
     beforeEach(async () => {
-      createComponent(mockQueryParams, mount);
-
-      mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, newPipelinePostResponse);
-
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
+      createComponentWithApollo({ props: mockQueryParams, method: mountExtended });
       await waitForPromises();
     });
 
     it('displays the correct values for the provided query params', async () => {
-      expect(findDropdowns().at(0).props('text')).toBe('Variable');
-      expect(findDropdowns().at(1).props('text')).toBe('File');
+      expect(findVariableTypes().at(0).props('text')).toBe('Variable');
+      expect(findVariableTypes().at(1).props('text')).toBe('File');
       expect(findRefsDropdown().props('value')).toEqual({ shortName: 'tag-1' });
       expect(findVariableRows()).toHaveLength(3);
     });
@@ -117,7 +142,7 @@ describe('Pipeline New Form', () => {
     it('displays an empty variable for the user to fill out', async () => {
       expect(findKeyInputs().at(2).element.value).toBe('');
       expect(findValueInputs().at(2).element.value).toBe('');
-      expect(findDropdowns().at(2).props('text')).toBe('Variable');
+      expect(findVariableTypes().at(2).props('text')).toBe('Variable');
     });
 
     it('does not display remove icon for last row', () => {
@@ -147,13 +172,12 @@ describe('Pipeline New Form', () => {
 
   describe('Pipeline creation', () => {
     beforeEach(async () => {
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
       mock.onPost(pipelinesPath).reply(httpStatusCodes.OK, newPipelinePostResponse);
-
-      await waitForPromises();
     });
 
     it('does not submit the native HTML form', async () => {
-      createComponent();
+      createComponentWithApollo();
 
       findForm().vm.$emit('submit', dummySubmitEvent);
 
@@ -161,7 +185,7 @@ describe('Pipeline New Form', () => {
     });
 
     it('disables the submit button immediately after submitting', async () => {
-      createComponent();
+      createComponentWithApollo();
 
       expect(findSubmitButton().props('disabled')).toBe(false);
 
@@ -172,7 +196,7 @@ describe('Pipeline New Form', () => {
     });
 
     it('creates pipeline with full ref and variables', async () => {
-      createComponent();
+      createComponentWithApollo();
 
       findForm().vm.$emit('submit', dummySubmitEvent);
       await waitForPromises();
@@ -182,7 +206,7 @@ describe('Pipeline New Form', () => {
     });
 
     it('creates a pipeline with short ref and variables from the query params', async () => {
-      createComponent(mockQueryParams);
+      createComponentWithApollo({ props: mockQueryParams });
 
       await waitForPromises();
 
@@ -197,64 +221,51 @@ describe('Pipeline New Form', () => {
 
   describe('When the ref has been changed', () => {
     beforeEach(async () => {
-      createComponent({}, mount);
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
+      createComponentWithApollo({ method: mountExtended });
 
       await waitForPromises();
     });
-    it('variables persist between ref changes', async () => {
-      selectBranch('main');
-
-      await waitForPromises();
 
-      const mainInput = findKeyInputs().at(0);
-      mainInput.element.value = 'build_var';
-      mainInput.trigger('change');
+    it('variables persist between ref changes', async () => {
+      await selectBranch('main');
+      await changeKeyInputValue(0, 'build_var');
 
-      await nextTick();
+      await selectBranch('branch-1');
+      await changeKeyInputValue(0, 'deploy_var');
 
-      selectBranch('branch-1');
+      await selectBranch('main');
 
-      await waitForPromises();
+      expect(findKeyInputs().at(0).element.value).toBe('build_var');
+      expect(findVariableRows().length).toBe(2);
 
-      const branchOneInput = findKeyInputs().at(0);
-      branchOneInput.element.value = 'deploy_var';
-      branchOneInput.trigger('change');
+      await selectBranch('branch-1');
 
-      await nextTick();
+      expect(findKeyInputs().at(0).element.value).toBe('deploy_var');
+      expect(findVariableRows().length).toBe(2);
+    });
 
-      selectBranch('main');
+    it('skips query call when form variables are already cached', async () => {
+      await selectBranch('main');
+      await changeKeyInputValue(0, 'build_var');
 
-      await waitForPromises();
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(1);
 
-      expect(findKeyInputs().at(0).element.value).toBe('build_var');
-      expect(findVariableRows().length).toBe(2);
+      await selectBranch('branch-1');
 
-      selectBranch('branch-1');
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(2);
 
-      await waitForPromises();
+      // no additional call since `main` form values have been cached
+      await selectBranch('main');
 
-      expect(findKeyInputs().at(0).element.value).toBe('deploy_var');
-      expect(findVariableRows().length).toBe(2);
+      expect(mockCiConfigVariables).toHaveBeenCalledTimes(2);
     });
   });
 
   describe('when yml defines a variable', () => {
-    const mockYmlKey = 'yml_var';
-    const mockYmlValue = 'yml_var_val';
-    const mockYmlMultiLineValue = `A value
-    with multiple
-    lines`;
-    const mockYmlDesc = 'A var from yml.';
-
     it('loading icon is shown when content is requested and hidden when received', async () => {
-      createComponent(mockQueryParams, mount);
-
-      mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
-        [mockYmlKey]: {
-          value: mockYmlValue,
-          description: mockYmlDesc,
-        },
-      });
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
+      createComponentWithApollo({ props: mockQueryParams, method: mountExtended });
 
       expect(findLoadingIcon().exists()).toBe(true);
 
@@ -263,51 +274,62 @@ describe('Pipeline New Form', () => {
       expect(findLoadingIcon().exists()).toBe(false);
     });
 
-    it('multi-line strings are added to the value field without removing line breaks', async () => {
-      createComponent(mockQueryParams, mount);
+    describe('with different predefined values', () => {
+      beforeEach(async () => {
+        mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponse);
+        createComponentWithApollo({ method: mountExtended });
+        await waitForPromises();
+      });
+
+      it('multi-line strings are added to the value field without removing line breaks', () => {
+        expect(findValueInputs().at(1).element.value).toBe(mockYamlVariables[1].value);
+      });
 
-      mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
-        [mockYmlKey]: {
-          value: mockYmlMultiLineValue,
-          description: mockYmlDesc,
-        },
+      it('multiple predefined values are rendered as a dropdown', () => {
+        const dropdown = findValueDropdowns().at(0);
+        const dropdownItems = findValueDropdownItems(dropdown);
+        const { valueOptions } = mockYamlVariables[2];
+
+        expect(dropdownItems.at(0).text()).toBe(valueOptions[0]);
+        expect(dropdownItems.at(1).text()).toBe(valueOptions[1]);
+        expect(dropdownItems.at(2).text()).toBe(valueOptions[2]);
       });
 
-      await waitForPromises();
+      it('variables with multiple predefined values sets the first option as the default', () => {
+        const dropdown = findValueDropdowns().at(0);
+        const { valueOptions } = mockYamlVariables[2];
 
-      expect(findValueInputs().at(0).element.value).toBe(mockYmlMultiLineValue);
+        expect(dropdown.props('text')).toBe(valueOptions[0]);
+      });
     });
 
     describe('with description', () => {
       beforeEach(async () => {
-        createComponent(mockQueryParams, mount);
-
-        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
-          [mockYmlKey]: {
-            value: mockYmlValue,
-            description: mockYmlDesc,
-          },
-        });
-
+        mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponse);
+        createComponentWithApollo({ props: mockQueryParams, method: mountExtended });
         await waitForPromises();
       });
 
       it('displays all the variables', async () => {
-        expect(findVariableRows()).toHaveLength(4);
+        expect(findVariableRows()).toHaveLength(6);
       });
 
       it('displays a variable from yml', () => {
-        expect(findKeyInputs().at(0).element.value).toBe(mockYmlKey);
-        expect(findValueInputs().at(0).element.value).toBe(mockYmlValue);
+        expect(findKeyInputs().at(0).element.value).toBe(mockYamlVariables[0].key);
+        expect(findValueInputs().at(0).element.value).toBe(mockYamlVariables[0].value);
       });
 
       it('displays a variable from provided query params', () => {
-        expect(findKeyInputs().at(1).element.value).toBe('test_var');
-        expect(findValueInputs().at(1).element.value).toBe('test_var_val');
+        expect(findKeyInputs().at(3).element.value).toBe(
+          Object.keys(mockQueryParams.variableParams)[0],
+        );
+        expect(findValueInputs().at(3).element.value).toBe(
+          Object.values(mockQueryParams.fileParams)[0],
+        );
       });
 
       it('adds a description to the first variable from yml', () => {
-        expect(findVariableRows().at(0).text()).toContain(mockYmlDesc);
+        expect(findVariableRows().at(0).text()).toContain(mockYamlVariables[0].description);
       });
 
       it('removes the description when a variable key changes', async () => {
@@ -316,39 +338,27 @@ describe('Pipeline New Form', () => {
 
         await nextTick();
 
-        expect(findVariableRows().at(0).text()).not.toContain(mockYmlDesc);
+        expect(findVariableRows().at(0).text()).not.toContain(mockYamlVariables[0].description);
       });
     });
 
     describe('without description', () => {
       beforeEach(async () => {
-        createComponent(mockQueryParams, mount);
-
-        mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
-          [mockYmlKey]: {
-            value: mockYmlValue,
-            description: null,
-          },
-          yml_var2: {
-            value: 'yml_var2_val',
-          },
-          yml_var3: {
-            description: '',
-          },
-        });
-
+        mockCiConfigVariables.mockResolvedValue(mockCiConfigVariablesResponseWithoutDesc);
+        createComponentWithApollo({ method: mountExtended });
         await waitForPromises();
       });
 
-      it('displays all the variables', async () => {
-        expect(findVariableRows()).toHaveLength(3);
+      it('displays variables with description only', async () => {
+        expect(findVariableRows()).toHaveLength(2); // extra empty variable is added at the end
       });
     });
   });
 
   describe('Form errors and warnings', () => {
     beforeEach(() => {
-      createComponent();
+      mockCiConfigVariables.mockResolvedValue(mockEmptyCiConfigVariablesResponse);
+      createComponentWithApollo();
     });
 
     describe('when the refs cannot be loaded', () => {
diff --git a/spec/frontend/pipeline_new/mock_data.js b/spec/frontend/pipeline_new/mock_data.js
index e99684ff417..e95a65171fc 100644
--- a/spec/frontend/pipeline_new/mock_data.js
+++ b/spec/frontend/pipeline_new/mock_data.js
@@ -65,3 +65,62 @@ export const mockVariables = [
   },
   { uniqueId: 'var-refs/heads/main4', variable_type: 'env_var', key: '', value: '' },
 ];
+
+export const mockYamlVariables = [
+  {
+    description: 'This is a variable with a value.',
+    key: 'VAR_WITH_VALUE',
+    value: 'test_value',
+    valueOptions: null,
+  },
+  {
+    description: 'This is a variable with a multi-line value.',
+    key: 'VAR_WITH_MULTILINE',
+    value: `this is
+      a multiline value`,
+    valueOptions: null,
+  },
+  {
+    description: 'This is a variable with predefined values.',
+    key: 'VAR_WITH_OPTIONS',
+    value: 'development',
+    valueOptions: ['development', 'staging', 'production'],
+  },
+];
+
+export const mockYamlVariablesWithoutDesc = [
+  {
+    description: 'This is a variable with a value.',
+    key: 'VAR_WITH_VALUE',
+    value: 'test_value',
+    valueOptions: null,
+  },
+  {
+    description: null,
+    key: 'VAR_WITH_MULTILINE',
+    value: `this is
+      a multiline value`,
+    valueOptions: null,
+  },
+  {
+    description: null,
+    key: 'VAR_WITH_OPTIONS',
+    value: 'development',
+    valueOptions: ['development', 'staging', 'production'],
+  },
+];
+
+export const mockCiConfigVariablesQueryResponse = (ciConfigVariables) => ({
+  data: {
+    project: {
+      id: 1,
+      ciConfigVariables,
+    },
+  },
+});
+
+export const mockCiConfigVariablesResponse = mockCiConfigVariablesQueryResponse(mockYamlVariables);
+export const mockEmptyCiConfigVariablesResponse = mockCiConfigVariablesQueryResponse([]);
+export const mockCiConfigVariablesResponseWithoutDesc = mockCiConfigVariablesQueryResponse(
+  mockYamlVariablesWithoutDesc,
+);
diff --git a/spec/frontend/pipeline_schedules/components/pipeline_schedules_form_spec.js b/spec/frontend/pipeline_schedules/components/pipeline_schedules_form_spec.js
new file mode 100644
index 00000000000..4b5a9611251
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/pipeline_schedules_form_spec.js
@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlForm } from '@gitlab/ui';
+import PipelineSchedulesForm from '~/pipeline_schedules/components/pipeline_schedules_form.vue';
+
+describe('Pipeline schedules form', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineSchedulesForm);
+  };
+
+  const findForm = () => wrapper.findComponent(GlForm);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays form', () => {
+    expect(findForm().exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
new file mode 100644
index 00000000000..cce8f480928
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/pipeline_schedules_spec.js
@@ -0,0 +1,161 @@
+import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+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 PipelineSchedules from '~/pipeline_schedules/components/pipeline_schedules.vue';
+import PipelineSchedulesTable from '~/pipeline_schedules/components/table/pipeline_schedules_table.vue';
+import deletePipelineScheduleMutation from '~/pipeline_schedules/graphql/mutations/delete_pipeline_schedule.mutation.graphql';
+import getPipelineSchedulesQuery from '~/pipeline_schedules/graphql/queries/get_pipeline_schedules.query.graphql';
+import {
+  mockGetPipelineSchedulesGraphQLResponse,
+  mockPipelineScheduleNodes,
+  deleteMutationResponse,
+} from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Pipeline schedules app', () => {
+  let wrapper;
+
+  const successHandler = jest.fn().mockResolvedValue(mockGetPipelineSchedulesGraphQLResponse);
+  const failedHandler = jest.fn().mockRejectedValue(new Error('GraphQL error'));
+
+  const deleteMutationHandlerSuccess = jest.fn().mockResolvedValue(deleteMutationResponse);
+  const deleteMutationHandlerFailed = jest.fn().mockRejectedValue(new Error('GraphQL error'));
+
+  const createMockApolloProvider = (
+    requestHandlers = [[getPipelineSchedulesQuery, successHandler]],
+  ) => {
+    return createMockApollo(requestHandlers);
+  };
+
+  const createComponent = (requestHandlers) => {
+    wrapper = shallowMount(PipelineSchedules, {
+      provide: {
+        fullPath: 'gitlab-org/gitlab',
+      },
+      apolloProvider: createMockApolloProvider(requestHandlers),
+    });
+  };
+
+  const findTable = () => wrapper.findComponent(PipelineSchedulesTable);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findModal = () => wrapper.findComponent(GlModal);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays table', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findTable().exists()).toBe(true);
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  it('fetches query and passes an array of pipeline schedules', async () => {
+    createComponent();
+
+    expect(successHandler).toHaveBeenCalled();
+
+    await waitForPromises();
+
+    expect(findTable().props('schedules')).toEqual(mockPipelineScheduleNodes);
+  });
+
+  it('handles loading state', async () => {
+    createComponent();
+
+    expect(findLoadingIcon().exists()).toBe(true);
+
+    await waitForPromises();
+
+    expect(findLoadingIcon().exists()).toBe(false);
+  });
+
+  it('shows query error alert', async () => {
+    createComponent([[getPipelineSchedulesQuery, failedHandler]]);
+
+    await waitForPromises();
+
+    expect(findAlert().text()).toBe('There was a problem fetching pipeline schedules.');
+  });
+
+  it('shows delete mutation error alert', async () => {
+    createComponent([
+      [getPipelineSchedulesQuery, successHandler],
+      [deletePipelineScheduleMutation, deleteMutationHandlerFailed],
+    ]);
+
+    await waitForPromises();
+
+    findModal().vm.$emit('primary');
+
+    await waitForPromises();
+
+    expect(findAlert().text()).toBe('There was a problem deleting the pipeline schedule.');
+  });
+
+  it('deletes pipeline schedule and refetches query', async () => {
+    createComponent([
+      [getPipelineSchedulesQuery, successHandler],
+      [deletePipelineScheduleMutation, deleteMutationHandlerSuccess],
+    ]);
+
+    jest.spyOn(wrapper.vm.$apollo.queries.schedules, 'refetch');
+
+    await waitForPromises();
+
+    const scheduleId = mockPipelineScheduleNodes[0].id;
+
+    findTable().vm.$emit('showDeleteModal', scheduleId);
+
+    expect(wrapper.vm.$apollo.queries.schedules.refetch).not.toHaveBeenCalled();
+
+    findModal().vm.$emit('primary');
+
+    await waitForPromises();
+
+    expect(deleteMutationHandlerSuccess).toHaveBeenCalledWith({
+      id: scheduleId,
+    });
+    expect(wrapper.vm.$apollo.queries.schedules.refetch).toHaveBeenCalled();
+  });
+
+  it('modal should be visible after event', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findModal().props('visible')).toBe(false);
+
+    findTable().vm.$emit('showDeleteModal', mockPipelineScheduleNodes[0].id);
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(true);
+  });
+
+  it('modal should be hidden', async () => {
+    createComponent();
+
+    await waitForPromises();
+
+    findTable().vm.$emit('showDeleteModal', mockPipelineScheduleNodes[0].id);
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(true);
+
+    findModal().vm.$emit('hide');
+
+    await nextTick();
+
+    expect(findModal().props('visible')).toBe(false);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
new file mode 100644
index 00000000000..ecc1bdeb679
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_actions_spec.js
@@ -0,0 +1,49 @@
+import { GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PipelineScheduleActions from '~/pipeline_schedules/components/table/cells/pipeline_schedule_actions.vue';
+import { mockPipelineScheduleNodes, mockPipelineScheduleAsGuestNodes } from '../../../mock_data';
+
+describe('Pipeline schedule actions', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedule: mockPipelineScheduleNodes[0],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMountExtended(PipelineScheduleActions, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
+  const findDeleteBtn = () => wrapper.findByTestId('delete-pipeline-schedule-btn');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays action buttons', () => {
+    createComponent();
+
+    expect(findAllButtons()).toHaveLength(3);
+  });
+
+  it('does not display action buttons', () => {
+    createComponent({ schedule: mockPipelineScheduleAsGuestNodes[0] });
+
+    expect(findAllButtons()).toHaveLength(0);
+  });
+
+  it('delete button emits showDeleteModal event and schedule id', () => {
+    createComponent();
+
+    findDeleteBtn().vm.$emit('click');
+
+    expect(wrapper.emitted()).toEqual({
+      showDeleteModal: [[mockPipelineScheduleNodes[0].id]],
+    });
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
new file mode 100644
index 00000000000..5a47b24232f
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline_spec.js
@@ -0,0 +1,42 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
+import PipelineScheduleLastPipeline from '~/pipeline_schedules/components/table/cells/pipeline_schedule_last_pipeline.vue';
+import { mockPipelineScheduleNodes } from '../../../mock_data';
+
+describe('Pipeline schedule last pipeline', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedule: mockPipelineScheduleNodes[2],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMountExtended(PipelineScheduleLastPipeline, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findCIBadge = () => wrapper.findComponent(CiBadge);
+  const findStatusText = () => wrapper.findByTestId('pipeline-schedule-status-text');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays pipeline status', () => {
+    createComponent();
+
+    expect(findCIBadge().exists()).toBe(true);
+    expect(findCIBadge().props('status')).toBe(defaultProps.schedule.lastPipeline.detailedStatus);
+    expect(findStatusText().exists()).toBe(false);
+  });
+
+  it('displays "none" status text', () => {
+    createComponent({ schedule: mockPipelineScheduleNodes[0] });
+
+    expect(findStatusText().text()).toBe('None');
+    expect(findCIBadge().exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js
new file mode 100644
index 00000000000..b1bdc1e91a0
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_next_run_spec.js
@@ -0,0 +1,43 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PipelineScheduleNextRun from '~/pipeline_schedules/components/table/cells/pipeline_schedule_next_run.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { mockPipelineScheduleNodes } from '../../../mock_data';
+
+describe('Pipeline schedule next run', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedule: mockPipelineScheduleNodes[0],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMountExtended(PipelineScheduleNextRun, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findTimeAgo = () => wrapper.findComponent(TimeAgoTooltip);
+  const findInactive = () => wrapper.findByTestId('pipeline-schedule-inactive');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays time ago', () => {
+    createComponent();
+
+    expect(findTimeAgo().exists()).toBe(true);
+    expect(findInactive().exists()).toBe(false);
+    expect(findTimeAgo().props('time')).toBe(defaultProps.schedule.realNextRun);
+  });
+
+  it('displays inactive state', () => {
+    const inactiveSchedule = mockPipelineScheduleNodes[1];
+    createComponent({ schedule: inactiveSchedule });
+
+    expect(findInactive().text()).toBe('Inactive');
+    expect(findTimeAgo().exists()).toBe(false);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js
new file mode 100644
index 00000000000..3ab04958f5e
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_owner_spec.js
@@ -0,0 +1,40 @@
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import PipelineScheduleOwner from '~/pipeline_schedules/components/table/cells/pipeline_schedule_owner.vue';
+import { mockPipelineScheduleNodes } from '../../../mock_data';
+
+describe('Pipeline schedule owner', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedule: mockPipelineScheduleNodes[0],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMount(PipelineScheduleOwner, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays avatar', () => {
+    expect(findAvatar().exists()).toBe(true);
+    expect(findAvatar().props('src')).toBe(defaultProps.schedule.owner.avatarUrl);
+  });
+
+  it('avatar links to user', () => {
+    expect(findAvatarLink().attributes('href')).toBe(defaultProps.schedule.owner.webPath);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js
new file mode 100644
index 00000000000..6817e58790b
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/cells/pipeline_schedule_target_spec.js
@@ -0,0 +1,41 @@
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import PipelineScheduleTarget from '~/pipeline_schedules/components/table/cells/pipeline_schedule_target.vue';
+import { mockPipelineScheduleNodes } from '../../../mock_data';
+
+describe('Pipeline schedule target', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedule: mockPipelineScheduleNodes[0],
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = shallowMount(PipelineScheduleTarget, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findLink = () => wrapper.findComponent(GlLink);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays icon', () => {
+    expect(findIcon().exists()).toBe(true);
+    expect(findIcon().props('name')).toBe('fork');
+  });
+
+  it('displays ref link', () => {
+    expect(findLink().attributes('href')).toBe(defaultProps.schedule.refPath);
+    expect(findLink().text()).toBe(defaultProps.schedule.refForDisplay);
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/components/table/pipeline_schedules_table_spec.js b/spec/frontend/pipeline_schedules/components/table/pipeline_schedules_table_spec.js
new file mode 100644
index 00000000000..914897946ee
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/components/table/pipeline_schedules_table_spec.js
@@ -0,0 +1,39 @@
+import { GlTableLite } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import PipelineSchedulesTable from '~/pipeline_schedules/components/table/pipeline_schedules_table.vue';
+import { mockPipelineScheduleNodes } from '../../mock_data';
+
+describe('Pipeline schedules table', () => {
+  let wrapper;
+
+  const defaultProps = {
+    schedules: mockPipelineScheduleNodes,
+  };
+
+  const createComponent = (props = defaultProps) => {
+    wrapper = mountExtended(PipelineSchedulesTable, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findTable = () => wrapper.findComponent(GlTableLite);
+  const findScheduleDescription = () => wrapper.findByTestId('pipeline-schedule-description');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays table', () => {
+    expect(findTable().exists()).toBe(true);
+  });
+
+  it('displays schedule description', () => {
+    expect(findScheduleDescription().text()).toBe('pipeline schedule');
+  });
+});
diff --git a/spec/frontend/pipeline_schedules/mock_data.js b/spec/frontend/pipeline_schedules/mock_data.js
new file mode 100644
index 00000000000..0a60998d8fb
--- /dev/null
+++ b/spec/frontend/pipeline_schedules/mock_data.js
@@ -0,0 +1,35 @@
+// Fixture located at spec/frontend/fixtures/pipeline_schedules.rb
+import mockGetPipelineSchedulesGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.json';
+import mockGetPipelineSchedulesAsGuestGraphQLResponse from 'test_fixtures/graphql/pipeline_schedules/get_pipeline_schedules.query.graphql.as_guest.json';
+
+const {
+  data: {
+    project: {
+      pipelineSchedules: { nodes },
+    },
+  },
+} = mockGetPipelineSchedulesGraphQLResponse;
+
+const {
+  data: {
+    project: {
+      pipelineSchedules: { nodes: guestNodes },
+    },
+  },
+} = mockGetPipelineSchedulesAsGuestGraphQLResponse;
+
+export const mockPipelineScheduleNodes = nodes;
+
+export const mockPipelineScheduleAsGuestNodes = guestNodes;
+
+export const deleteMutationResponse = {
+  data: {
+    pipelineScheduleDelete: {
+      clientMutationId: null,
+      errors: [],
+      __typename: 'PipelineScheduleDeletePayload',
+    },
+  },
+};
+
+export { mockGetPipelineSchedulesGraphQLResponse };
diff --git a/spec/frontend/pipeline_wizard/components/commit_spec.js b/spec/frontend/pipeline_wizard/components/commit_spec.js
index d7e019c642e..fa30b9c2b97 100644
--- a/spec/frontend/pipeline_wizard/components/commit_spec.js
+++ b/spec/frontend/pipeline_wizard/components/commit_spec.js
@@ -211,7 +211,7 @@ describe('Pipeline Wizard - Commit Page', () => {
       }) => {
         let consoleSpy;
 
-        beforeAll(async () => {
+        beforeEach(async () => {
           createComponent(
             {
               filename,
@@ -246,7 +246,7 @@ describe('Pipeline Wizard - Commit Page', () => {
           await waitForPromises();
         });
 
-        afterAll(() => {
+        afterEach(() => {
           wrapper.destroy();
         });
 
diff --git a/spec/frontend/pipeline_wizard/components/editor_spec.js b/spec/frontend/pipeline_wizard/components/editor_spec.js
index 26e4b8eb0ea..dd0a609043a 100644
--- a/spec/frontend/pipeline_wizard/components/editor_spec.js
+++ b/spec/frontend/pipeline_wizard/components/editor_spec.js
@@ -3,12 +3,20 @@ import { Document } from 'yaml';
 import YamlEditor from '~/pipeline_wizard/components/editor.vue';
 
 describe('Pages Yaml Editor wrapper', () => {
+  let wrapper;
+
   const defaultOptions = {
     propsData: { doc: new Document({ foo: 'bar' }), filename: 'foo.yml' },
   };
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('mount hook', () => {
-    const wrapper = mount(YamlEditor, defaultOptions);
+    beforeEach(() => {
+      wrapper = mount(YamlEditor, defaultOptions);
+    });
 
     it('editor is mounted', () => {
       expect(wrapper.vm.editor).not.toBeUndefined();
@@ -19,16 +27,11 @@ describe('Pages Yaml Editor wrapper', () => {
   describe('watchers', () => {
     describe('doc', () => {
       const doc = new Document({ baz: ['bar'] });
-      let wrapper;
 
       beforeEach(() => {
         wrapper = mount(YamlEditor, defaultOptions);
       });
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it("causes the editor's value to be set to the stringified document", async () => {
         await wrapper.setProps({ doc });
         expect(wrapper.vm.editor.getValue()).toEqual(doc.toString());
@@ -48,7 +51,10 @@ describe('Pages Yaml Editor wrapper', () => {
 
     describe('highlight', () => {
       const highlight = 'foo';
-      const wrapper = mount(YamlEditor, defaultOptions);
+
+      beforeEach(() => {
+        wrapper = mount(YamlEditor, defaultOptions);
+      });
 
       it('calls editor.highlight(path, keep=true)', async () => {
         const highlightSpy = jest.spyOn(wrapper.vm.yamlEditorExtension.obj, 'highlight');
diff --git a/spec/frontend/pipeline_wizard/components/widgets/list_spec.js b/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
index 796356634bc..c9e9f5caebe 100644
--- a/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
+++ b/spec/frontend/pipeline_wizard/components/widgets/list_spec.js
@@ -22,6 +22,9 @@ describe('Pipeline Wizard - List Widget', () => {
   const setValueOnInputField = (value, atIndex = 0) => {
     return findGlFormInputGroupByIndex(atIndex).vm.$emit('input', value);
   };
+  const getValueOfInputField = (atIndex = 0) => {
+    return findGlFormInputGroupByIndex(atIndex).get('input').element.value;
+  };
   const findAddStepButton = () => wrapper.findByTestId('add-step-button');
   const addStep = () => findAddStepButton().vm.$emit('click');
 
@@ -103,6 +106,24 @@ describe('Pipeline Wizard - List Widget', () => {
       expect(addStepBtn.text()).toBe('add another step');
     });
 
+    it('deletes the correct input item', async () => {
+      createComponent({}, mountExtended);
+
+      await addStep();
+      await addStep();
+      setValueOnInputField('foo', 0);
+      setValueOnInputField('bar', 1);
+      setValueOnInputField('baz', 2);
+
+      const button = findAllGlFormInputGroups().at(1).find('[data-testid="remove-step-button"]');
+
+      button.vm.$emit('click');
+      await nextTick();
+
+      expect(getValueOfInputField(0)).toBe('foo');
+      expect(getValueOfInputField(1)).toBe('baz');
+    });
+
     it('the "add step" button increases the number of input fields', async () => {
       createComponent();
 
diff --git a/spec/frontend/pipeline_wizard/components/wrapper_spec.js b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
index f064bf01c86..d5b78cebcb3 100644
--- a/spec/frontend/pipeline_wizard/components/wrapper_spec.js
+++ b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
@@ -132,7 +132,7 @@ describe('Pipeline Wizard - wrapper.vue', () => {
         expectStepDef,
         expectProgressBarValue,
       }) => {
-        beforeAll(async () => {
+        beforeEach(async () => {
           createComponent();
 
           for (const emittedValue of navigationEventChain) {
@@ -145,7 +145,7 @@ describe('Pipeline Wizard - wrapper.vue', () => {
           }
         });
 
-        afterAll(() => {
+        afterEach(() => {
           wrapper.destroy();
         });
 
@@ -184,11 +184,11 @@ describe('Pipeline Wizard - wrapper.vue', () => {
   });
 
   describe('editor overlay', () => {
-    beforeAll(() => {
+    beforeEach(() => {
       createComponent();
     });
 
-    afterAll(() => {
+    afterEach(() => {
       wrapper.destroy();
     });
 
@@ -236,11 +236,11 @@ describe('Pipeline Wizard - wrapper.vue', () => {
   });
 
   describe('line highlights', () => {
-    beforeAll(() => {
+    beforeEach(() => {
       createComponent();
     });
 
-    afterAll(() => {
+    afterEach(() => {
       wrapper.destroy();
     });
 
@@ -266,7 +266,7 @@ describe('Pipeline Wizard - wrapper.vue', () => {
   });
 
   describe('integration test', () => {
-    beforeAll(async () => {
+    beforeEach(async () => {
       createComponent({}, mountExtended);
     });
 
@@ -290,14 +290,25 @@ describe('Pipeline Wizard - wrapper.vue', () => {
     describe('navigating back', () => {
       let inputField;
 
-      beforeAll(async () => {
+      beforeEach(async () => {
+        createComponent({}, mountExtended);
+
+        findFirstInputFieldForTarget('$FOO').setValue('fooVal');
+        await nextTick();
+
+        findFirstVisibleStep().vm.$emit('next');
+        await nextTick();
+
+        findFirstInputFieldForTarget('$BAR').setValue('barVal');
+        await nextTick();
+
         findFirstVisibleStep().vm.$emit('back');
         await nextTick();
 
         inputField = findFirstInputFieldForTarget('$FOO');
       });
 
-      afterAll(() => {
+      afterEach(() => {
         wrapper.destroy();
         inputField = undefined;
       });
diff --git a/spec/frontend/pipeline_wizard/mock/yaml.js b/spec/frontend/pipeline_wizard/mock/yaml.js
index 12b6f1052b2..014a32c5700 100644
--- a/spec/frontend/pipeline_wizard/mock/yaml.js
+++ b/spec/frontend/pipeline_wizard/mock/yaml.js
@@ -62,8 +62,7 @@ export const steps = `
 export const compiledScenario1 = `foo: fooVal
 `;
 
-export const compiledScenario2 = `foo: fooVal
-bar: barVal
+export const compiledScenario2 = `bar: barVal
 `;
 
 export const compiledScenario3 = `foo: newFooVal
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 bfbb5f934b9..d1da7cb3acf 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -70,7 +70,7 @@ describe('Failed Jobs App', () => {
     await waitForPromises();
 
     expect(findJobsTable().exists()).toBe(true);
-    expect(createFlash).not.toHaveBeenCalled();
+    expect(createAlert).not.toHaveBeenCalled();
   });
 
   it('handles query fetch error correctly', async () => {
@@ -80,7 +80,7 @@ describe('Failed Jobs App', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: 'There was a problem fetching the failed jobs.',
     });
   });
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 b597a3bf4b0..0df15afd70d 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -88,7 +88,7 @@ describe('Failed Jobs Table', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: 'There was a problem retrying the failed job.',
     });
   });
diff --git a/spec/frontend/pipelines/components/jobs/jobs_app_spec.js b/spec/frontend/pipelines/components/jobs/jobs_app_spec.js
index 89b6f764b2f..9bc14266593 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -88,7 +88,7 @@ describe('Jobs app', () => {
 
     expect(findJobsTable().exists()).toBe(true);
     expect(findSkeletonLoader().exists()).toBe(false);
-    expect(createFlash).not.toHaveBeenCalled();
+    expect(createAlert).not.toHaveBeenCalled();
   });
 
   it('handles job fetch error correctly', async () => {
@@ -98,7 +98,7 @@ describe('Jobs app', () => {
 
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: 'An error occurred while fetching the pipelines jobs.',
     });
   });
diff --git a/spec/frontend/pipelines/pipeline_multi_actions_spec.js b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
index 149b40330e2..f0dae8ebcbe 100644
--- a/spec/frontend/pipelines/pipeline_multi_actions_spec.js
+++ b/spec/frontend/pipelines/pipeline_multi_actions_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlDropdown, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlSprintf, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -46,6 +46,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
         },
         stubs: {
           GlSprintf,
+          GlDropdown,
         },
       }),
     );
@@ -56,6 +57,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllArtifactItems = () => wrapper.findAllByTestId(artifactItemTestId);
   const findFirstArtifactItem = () => wrapper.findByTestId(artifactItemTestId);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findEmptyMessage = () => wrapper.findByTestId('artifacts-empty-message');
 
   beforeEach(() => {
@@ -75,7 +77,7 @@ describe('Pipeline Multi Actions Dropdown', () => {
   });
 
   describe('Artifacts', () => {
-    it('should fetch artifacts on dropdown click', async () => {
+    it('should fetch artifacts and show search box on dropdown click', async () => {
       const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
       mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
       createComponent();
@@ -84,6 +86,16 @@ describe('Pipeline Multi Actions Dropdown', () => {
 
       expect(mockAxios.history.get).toHaveLength(1);
       expect(wrapper.vm.artifacts).toEqual(artifacts);
+      expect(findSearchBox().exists()).toBe(true);
+    });
+
+    it('should focus the search box when opened with artifacts', () => {
+      createComponent({ mockData: { artifacts } });
+      wrapper.vm.$refs.searchInput.focusInput = jest.fn();
+
+      findDropdown().vm.$emit('shown');
+
+      expect(wrapper.vm.$refs.searchInput.focusInput).toHaveBeenCalled();
     });
 
     it('should render all the provided artifacts when search query is empty', () => {
@@ -109,10 +121,11 @@ describe('Pipeline Multi Actions Dropdown', () => {
       expect(findFirstArtifactItem().text()).toBe(artifacts[0].name);
     });
 
-    it('should render empty message when no artifacts are found', () => {
+    it('should render empty message and no search box when no artifacts are found', () => {
       createComponent({ mockData: { artifacts: [] } });
 
       expect(findEmptyMessage().exists()).toBe(true);
+      expect(findSearchBox().exists()).toBe(false);
     });
 
     describe('while loading artifacts', () => {
diff --git a/spec/frontend/pipelines/pipelines_actions_spec.js b/spec/frontend/pipelines/pipelines_actions_spec.js
index fdfced38dca..26e61efc4f6 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import PipelinesManualActions from '~/pipelines/components/pipelines_list/pipelines_manual_actions.vue';
@@ -95,7 +95,7 @@ describe('Pipelines Actions dropdown', () => {
 
         await waitForPromises();
         expect(findDropdown().props('loading')).toBe(false);
-        expect(createFlash).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledTimes(1);
       });
     });
 
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index cc2ff90de57..a3f15e25f36 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 createFlash from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
@@ -261,9 +261,14 @@ describe('Pipelines', () => {
             );
           });
 
-          it('tracks tab change click', () => {
+          it.each(['all', 'finished', 'branches', 'tags'])('tracks %p tab click', async (scope) => {
+            goToTab(scope);
+
+            await waitForPromises();
+
             expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_filter_tabs', {
               label: TRACKING_CATEGORIES.tabs,
+              property: scope,
             });
           });
         });
@@ -356,8 +361,11 @@ describe('Pipelines', () => {
         });
 
         it('displays a warning message if raw text search is used', () => {
-          expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith({ message: RAW_TEXT_WARNING, type: 'warning' });
+          expect(createAlert).toHaveBeenCalledTimes(1);
+          expect(createAlert).toHaveBeenCalledWith({
+            message: RAW_TEXT_WARNING,
+            variant: VARIANT_WARNING,
+          });
         });
 
         it('should update browser bar', () => {
diff --git a/spec/frontend/pipelines/test_reports/stores/actions_spec.js b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
index 74a9d8c354f..6e61ef97257 100644
--- a/spec/frontend/pipelines/test_reports/stores/actions_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/actions_spec.js
@@ -2,7 +2,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/pipelines/stores/test_reports/actions';
 import * as types from '~/pipelines/stores/test_reports/mutation_types';
@@ -56,7 +56,7 @@ describe('Actions TestReports Store', () => {
         [],
         [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
index f9b9da01a2b..ed0cc71eb97 100644
--- a/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
+++ b/spec/frontend/pipelines/test_reports/stores/mutations_spec.js
@@ -1,7 +1,7 @@
 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 
 jest.mock('~/flash.js');
 
@@ -61,7 +61,7 @@ describe('Mutations TestReports Store', () => {
     it('should show a flash message otherwise', () => {
       mutations[types.SET_SUITE_ERROR](mockState, {});
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/frontend/profile/account/components/update_username_spec.js b/spec/frontend/profile/account/components/update_username_spec.js
index e331eed1863..575df9fb3c0 100644
--- a/spec/frontend/profile/account/components/update_username_spec.js
+++ b/spec/frontend/profile/account/components/update_username_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import UpdateUsername from '~/profile/account/components/update_username.vue';
@@ -149,7 +149,7 @@ describe('UpdateUsername component', () => {
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'Invalid username',
       });
     });
@@ -161,7 +161,7 @@ describe('UpdateUsername component', () => {
 
       await expect(wrapper.vm.onConfirm()).rejects.toThrow();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while updating your username, please try again.',
       });
     });
diff --git a/spec/frontend/profile/preferences/components/profile_preferences_spec.js b/spec/frontend/profile/preferences/components/profile_preferences_spec.js
index 89ce838a383..91cd868daac 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 createFlash from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_INFO } from '~/flash';
 import IntegrationView from '~/profile/preferences/components/integration_view.vue';
 import ProfilePreferences from '~/profile/preferences/components/profile_preferences.vue';
 import { i18n } from '~/profile/preferences/constants';
@@ -149,7 +149,10 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success');
       form.dispatchEvent(successEvent);
 
-      expect(createFlash).toHaveBeenCalledWith({ message: i18n.defaultSuccess, type: 'notice' });
+      expect(createAlert).toHaveBeenCalledWith({
+        message: i18n.defaultSuccess,
+        variant: VARIANT_INFO,
+      });
     });
 
     it('displays the custom success message', () => {
@@ -157,14 +160,17 @@ describe('ProfilePreferences component', () => {
       const successEvent = new CustomEvent('ajax:success', { detail: [{ message }] });
       form.dispatchEvent(successEvent);
 
-      expect(createFlash).toHaveBeenCalledWith({ message, type: 'notice' });
+      expect(createAlert).toHaveBeenCalledWith({ message, variant: VARIANT_INFO });
     });
 
     it('displays the default error message', () => {
       const errorEvent = new CustomEvent('ajax:error');
       form.dispatchEvent(errorEvent);
 
-      expect(createFlash).toHaveBeenCalledWith({ message: i18n.defaultError, type: 'alert' });
+      expect(createAlert).toHaveBeenCalledWith({
+        message: i18n.defaultError,
+        variant: VARIANT_DANGER,
+      });
     });
 
     it('displays the custom error message', () => {
@@ -172,7 +178,7 @@ describe('ProfilePreferences component', () => {
       const errorEvent = new CustomEvent('ajax:error', { detail: [{ message }] });
       form.dispatchEvent(errorEvent);
 
-      expect(createFlash).toHaveBeenCalledWith({ message, type: 'alert' });
+      expect(createAlert).toHaveBeenCalledWith({ message, variant: VARIANT_DANGER });
     });
   });
 
diff --git a/spec/frontend/projects/commit/store/actions_spec.js b/spec/frontend/projects/commit/store/actions_spec.js
index 56dffcbd48e..008710984b9 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { PROJECT_BRANCHES_ERROR } from '~/projects/commit/constants';
 import * as actions from '~/projects/commit/store/actions';
@@ -68,7 +68,7 @@ describe('Commit form modal store actions', () => {
 
       await testAction(actions.fetchBranches, {}, state, [], [{ type: 'requestBranches' }]);
 
-      expect(createFlash).toHaveBeenCalledWith({ message: PROJECT_BRANCHES_ERROR });
+      expect(createAlert).toHaveBeenCalledWith({ message: PROJECT_BRANCHES_ERROR });
     });
   });
 
diff --git a/spec/frontend/projects/commits/store/actions_spec.js b/spec/frontend/projects/commits/store/actions_spec.js
index fdb12640b26..930b801af71 100644
--- a/spec/frontend/projects/commits/store/actions_spec.js
+++ b/spec/frontend/projects/commits/store/actions_spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import actions from '~/projects/commits/store/actions';
 import * as types from '~/projects/commits/store/mutation_types';
 import createState from '~/projects/commits/store/state';
@@ -38,8 +38,8 @@ describe('Project commits actions', () => {
       const mockDispatchContext = { dispatch: () => {}, commit: () => {}, state };
       actions.receiveAuthorsError(mockDispatchContext);
 
-      expect(createFlash).toHaveBeenCalledTimes(1);
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledTimes(1);
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred fetching the project authors.',
       });
     });
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index 2dbecf7cc61..9b052a17caa 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -134,6 +134,40 @@ describe('CompareApp component', () => {
     });
   });
 
+  describe('mode dropdown', () => {
+    const findModeDropdownButton = () => wrapper.find('[data-testid="modeDropdown"]');
+    const findEnableStraightModeButton = () =>
+      wrapper.find('[data-testid="enableStraightModeButton"]');
+    const findDisableStraightModeButton = () =>
+      wrapper.find('[data-testid="disableStraightModeButton"]');
+
+    it('renders the mode dropdown button', () => {
+      expect(findModeDropdownButton().exists()).toBe(true);
+    });
+
+    it('has the correct text', () => {
+      expect(findEnableStraightModeButton().text()).toBe('...');
+      expect(findDisableStraightModeButton().text()).toBe('..');
+    });
+
+    it('straight mode button when clicked', async () => {
+      expect(wrapper.props('straight')).toBe(false);
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+
+      findEnableStraightModeButton().vm.$emit('click');
+
+      await nextTick();
+
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('true');
+
+      findDisableStraightModeButton().vm.$emit('click');
+
+      await nextTick();
+
+      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+    });
+  });
+
   describe('merge request buttons', () => {
     const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
     const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
diff --git a/spec/frontend/projects/compare/components/mock_data.js b/spec/frontend/projects/compare/components/mock_data.js
index 81d64469a2a..28d9a394038 100644
--- a/spec/frontend/projects/compare/components/mock_data.js
+++ b/spec/frontend/projects/compare/components/mock_data.js
@@ -17,6 +17,7 @@ export const appDefaultProps = {
   projects: [sourceProject],
   paramsFrom: 'main',
   paramsTo: 'target/branch',
+  straight: false,
   createMrPath: '',
   sourceProjectRefsPath,
   targetProjectRefsPath,
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
index f64af1aa994..c21c0f4f9d1 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue';
 
@@ -79,7 +79,7 @@ describe('RevisionDropdown component', () => {
     axiosMock.onGet('some/invalid/path').replyOnce(404);
 
     await wrapper.vm.fetchBranchesAndTags();
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('GlDropdown component', () => {
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index 35e32fd3da0..d598bafea92 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
 import { revisionDropdownDefaultProps as defaultProps } from './mock_data';
@@ -67,7 +67,7 @@ describe('RevisionDropdown component', () => {
     createComponent();
 
     await wrapper.vm.fetchBranchesAndTags();
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('makes a new request when refsProjectPath is changed', async () => {
@@ -93,7 +93,7 @@ describe('RevisionDropdown component', () => {
       createComponent();
 
       await wrapper.vm.searchBranchesAndTags();
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it('makes request with search param', async () => {
diff --git a/spec/frontend/projects/settings/branch_rules/branch_dropdown_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
index 79bce5a4b3f..11f219c1f90 100644
--- a/spec/frontend/projects/settings/branch_rules/branch_dropdown_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
@@ -4,7 +4,7 @@ import { GlDropdown, GlSearchBoxByType, GlDropdownItem, GlSprintf } from '@gitla
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BranchDropdown, {
   i18n,
-} from '~/projects/settings/branch_rules/components/branch_dropdown.vue';
+} from '~/projects/settings/branch_rules/components/edit/branch_dropdown.vue';
 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';
diff --git a/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
index b0b2b9191d4..21e63fdb24d 100644
--- a/spec/frontend/projects/settings/branch_rules/rule_edit_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
@@ -1,9 +1,9 @@
 import { nextTick } from 'vue';
 import { getParameterByName } from '~/lib/utils/url_utility';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import RuleEdit from '~/projects/settings/branch_rules/components/rule_edit.vue';
-import BranchDropdown from '~/projects/settings/branch_rules/components/branch_dropdown.vue';
-import Protections from '~/projects/settings/branch_rules/components/protections/index.vue';
+import RuleEdit from '~/projects/settings/branch_rules/components/edit/index.vue';
+import BranchDropdown from '~/projects/settings/branch_rules/components/edit/branch_dropdown.vue';
+import Protections from '~/projects/settings/branch_rules/components/edit/protections/index.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   getParameterByName: jest.fn().mockImplementation(() => 'main'),
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
index 3592fa50622..ee90ff8318f 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
@@ -3,10 +3,10 @@ import { GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import Protections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/index.vue';
-import PushProtections from '~/projects/settings/branch_rules/components/protections/push_protections.vue';
-import MergeProtections from '~/projects/settings/branch_rules/components/protections/merge_protections.vue';
-import { protections } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/index.vue';
+import PushProtections from '~/projects/settings/branch_rules/components/edit/protections/push_protections.vue';
+import MergeProtections from '~/projects/settings/branch_rules/components/edit/protections/merge_protections.vue';
+import { protections } from '../../../mock_data';
 
 describe('Branch Protections', () => {
   let wrapper;
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
index 0e168a2ad78..b5fdc46d600 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
@@ -2,8 +2,8 @@ import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import MergeProtections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/merge_protections.vue';
-import { membersAllowedToMerge, requireCodeOwnersApproval } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/merge_protections.vue';
+import { membersAllowedToMerge, requireCodeOwnersApproval } from '../../../mock_data';
 
 describe('Merge Protections', () => {
   let wrapper;
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/push_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
index d54dad08338..60bb7a51dcb 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/push_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
@@ -2,8 +2,8 @@ import { GlFormGroup, GlSprintf, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PushProtections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/push_protections.vue';
-import { membersAllowedToPush, allowForcePush } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/push_protections.vue';
+import { membersAllowedToPush, allowForcePush } from '../../../mock_data';
 
 describe('Push Protections', () => {
   let wrapper;
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
new file mode 100644
index 00000000000..bf4026b65db
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
@@ -0,0 +1,113 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import * as util from '~/lib/utils/url_utility';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import RuleView from '~/projects/settings/branch_rules/components/view/index.vue';
+import {
+  I18N,
+  ALL_BRANCHES_WILDCARD,
+} from '~/projects/settings/branch_rules/components/view/constants';
+import Protection from '~/projects/settings/branch_rules/components/view/protection.vue';
+import branchRulesQuery from '~/projects/settings/branch_rules/queries/branch_rules_details.query.graphql';
+import { sprintf } from '~/locale';
+import { branchProtectionsMockResponse } from './mock_data';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterByName: jest.fn().mockReturnValue('main'),
+  joinPaths: jest.fn(),
+}));
+
+Vue.use(VueApollo);
+
+const protectionMockProps = {
+  headerLinkHref: 'protected/branches',
+  headerLinkTitle: 'Manage in Protected Branches',
+  roles: [{ accessLevelDescription: 'Maintainers' }],
+  users: [{ avatarUrl: 'test.com/user.png', name: 'peter', webUrl: 'test.com' }],
+};
+
+describe('View branch rules', () => {
+  let wrapper;
+  let fakeApollo;
+  const projectPath = 'test/testing';
+  const protectedBranchesPath = 'protected/branches';
+  const approvalRulesPath = 'approval/rules';
+  const branchProtectionsMockRequestHandler = jest
+    .fn()
+    .mockResolvedValue(branchProtectionsMockResponse);
+
+  const createComponent = async () => {
+    fakeApollo = createMockApollo([[branchRulesQuery, branchProtectionsMockRequestHandler]]);
+
+    wrapper = shallowMountExtended(RuleView, {
+      apolloProvider: fakeApollo,
+      provide: { projectPath, protectedBranchesPath, approvalRulesPath },
+    });
+
+    await waitForPromises();
+  };
+
+  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 findApprovalsTitle = () => wrapper.findByText(I18N.approvalsTitle);
+
+  it('gets the branch param from url and renders it in the view', () => {
+    expect(util.getParameterByName).toHaveBeenCalledWith('branch');
+    expect(findBranchName().text()).toBe('main');
+    expect(findBranchTitle().text()).toBe(I18N.branchNameOrPattern);
+  });
+
+  it('renders the correct label if all branches are targeted', async () => {
+    jest.spyOn(util, 'getParameterByName').mockReturnValueOnce(ALL_BRANCHES_WILDCARD);
+    await createComponent();
+
+    expect(findBranchName().text()).toBe(I18N.allBranches);
+    expect(findBranchTitle().text()).toBe(I18N.targetBranch);
+    jest.restoreAllMocks();
+  });
+
+  it('renders the correct branch title', () => {
+    expect(findBranchTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection title', () => {
+    expect(findBranchProtectionTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection component for push rules', () => {
+    expect(findBranchProtections().at(0).props()).toMatchObject({
+      header: sprintf(I18N.allowedToPushHeader, { total: 2 }),
+      ...protectionMockProps,
+    });
+  });
+
+  it('renders force push protection', () => {
+    expect(findForcePushTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection component for merge rules', () => {
+    expect(findBranchProtections().at(1).props()).toMatchObject({
+      header: sprintf(I18N.allowedToMergeHeader, { total: 2 }),
+      ...protectionMockProps,
+    });
+  });
+
+  it('renders a branch protection component for approvals', () => {
+    expect(findApprovalsTitle().exists()).toBe(true);
+
+    expect(findBranchProtections().at(2).props()).toMatchObject({
+      header: sprintf(I18N.approvalsHeader, { total: 0 }),
+      headerLinkHref: approvalRulesPath,
+      headerLinkTitle: I18N.manageApprovalsLinkTitle,
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
new file mode 100644
index 00000000000..c3f573061da
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
@@ -0,0 +1,141 @@
+const usersMock = [
+  {
+    username: 'usr1',
+    webUrl: 'http://test.test/usr1',
+    name: 'User 1',
+    avatarUrl: 'http://test.test/avt1.png',
+  },
+  {
+    username: 'usr2',
+    webUrl: 'http://test.test/usr2',
+    name: 'User 2',
+    avatarUrl: 'http://test.test/avt2.png',
+  },
+  {
+    username: 'usr3',
+    webUrl: 'http://test.test/usr3',
+    name: 'User 3',
+    avatarUrl: 'http://test.test/avt3.png',
+  },
+  {
+    username: 'usr4',
+    webUrl: 'http://test.test/usr4',
+    name: 'User 4',
+    avatarUrl: 'http://test.test/avt4.png',
+  },
+  {
+    username: 'usr5',
+    webUrl: 'http://test.test/usr5',
+    name: 'User 5',
+    avatarUrl: 'http://test.test/avt5.png',
+  },
+];
+
+const accessLevelsMock = [
+  { accessLevelDescription: 'Administrator' },
+  { accessLevelDescription: 'Maintainer' },
+];
+
+const approvalsRequired = 3;
+
+const groupsMock = [{ name: 'test_group_1' }, { name: 'test_group_2' }];
+
+export const protectionPropsMock = {
+  header: 'Test protection',
+  headerLinkTitle: 'Test link title',
+  headerLinkHref: 'Test link href',
+  roles: accessLevelsMock,
+  users: usersMock,
+  groups: groupsMock,
+  approvals: [
+    {
+      name: 'test',
+      eligibleApprovers: { nodes: usersMock },
+      approvalsRequired,
+    },
+  ],
+};
+
+export const protectionRowPropsMock = {
+  title: 'Test title',
+  users: usersMock,
+  accessLevels: accessLevelsMock,
+  approvalsRequired,
+};
+
+export const accessLevelsMockResponse = [
+  {
+    __typename: 'PushAccessLevelEdge',
+    node: {
+      __typename: 'PushAccessLevel',
+      accessLevel: 40,
+      accessLevelDescription: 'Jona Langworth',
+      group: null,
+      user: {
+        __typename: 'UserCore',
+        id: '123',
+        webUrl: 'test.com',
+        name: 'peter',
+        avatarUrl: 'test.com/user.png',
+      },
+    },
+  },
+  {
+    __typename: 'PushAccessLevelEdge',
+    node: {
+      __typename: 'PushAccessLevel',
+      accessLevel: 40,
+      accessLevelDescription: 'Maintainers',
+      group: null,
+      user: null,
+    },
+  },
+];
+
+export const branchProtectionsMockResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/6',
+      __typename: 'Project',
+      branchRules: {
+        __typename: 'BranchRuleConnection',
+        nodes: [
+          {
+            __typename: 'BranchRule',
+            name: 'main',
+            branchProtection: {
+              __typename: 'BranchProtection',
+              allowForcePush: true,
+              codeOwnerApprovalRequired: true,
+              mergeAccessLevels: {
+                __typename: 'MergeAccessLevelConnection',
+                edges: accessLevelsMockResponse,
+              },
+              pushAccessLevels: {
+                __typename: 'PushAccessLevelConnection',
+                edges: accessLevelsMockResponse,
+              },
+            },
+          },
+          {
+            __typename: 'BranchRule',
+            name: '*',
+            branchProtection: {
+              __typename: 'BranchProtection',
+              allowForcePush: true,
+              codeOwnerApprovalRequired: true,
+              mergeAccessLevels: {
+                __typename: 'MergeAccessLevelConnection',
+                edges: [],
+              },
+              pushAccessLevels: {
+                __typename: 'PushAccessLevelConnection',
+                edges: [],
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
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
new file mode 100644
index 00000000000..b0a69bedd3e
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
@@ -0,0 +1,71 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ProtectionRow, {
+  MAX_VISIBLE_AVATARS,
+  AVATAR_SIZE,
+} from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionRowPropsMock } from './mock_data';
+
+describe('Branch rule protection row', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ProtectionRow, {
+      propsData: protectionRowPropsMock,
+      stubs: { GlAvatarsInline },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findTitle = () => wrapper.findByText(protectionRowPropsMock.title);
+  const findAvatarsInline = () => wrapper.findComponent(GlAvatarsInline);
+  const findAvatarLinks = () => wrapper.findAllComponents(GlAvatarLink);
+  const findAvatars = () => wrapper.findAllComponents(GlAvatar);
+  const findAccessLevels = () => wrapper.findAllByTestId('access-level');
+  const findApprovalsRequired = () =>
+    wrapper.findByText(`${protectionRowPropsMock.approvalsRequired} approvals required`);
+
+  it('renders a title', () => {
+    expect(findTitle().exists()).toBe(true);
+  });
+
+  it('renders an avatars-inline component', () => {
+    expect(findAvatarsInline().props('avatars')).toMatchObject(protectionRowPropsMock.users);
+    expect(findAvatarsInline().props('badgeSrOnlyText')).toBe('1 additional user');
+  });
+
+  it('renders avatar-link components', () => {
+    expect(findAvatarLinks().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatarLinks().at(1).attributes('href')).toBe(protectionRowPropsMock.users[1].webUrl);
+    expect(findAvatarLinks().at(1).attributes('title')).toBe(protectionRowPropsMock.users[1].name);
+  });
+
+  it('renders avatar components', () => {
+    expect(findAvatars().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatars().at(1).attributes('src')).toBe(protectionRowPropsMock.users[1].avatarUrl);
+    expect(findAvatars().at(1).attributes('label')).toBe(protectionRowPropsMock.users[1].name);
+    expect(findAvatars().at(1).props('size')).toBe(AVATAR_SIZE);
+  });
+
+  it('renders access level descriptions', () => {
+    expect(findAccessLevels().length).toBe(protectionRowPropsMock.accessLevels.length);
+
+    expect(findAccessLevels().at(0).text()).toBe(
+      protectionRowPropsMock.accessLevels[0].accessLevelDescription,
+    );
+    expect(findAccessLevels().at(1).text()).toContain(',');
+
+    expect(findAccessLevels().at(1).text()).toContain(
+      protectionRowPropsMock.accessLevels[1].accessLevelDescription,
+    );
+  });
+
+  it('renders the number of approvals required', () => {
+    expect(findApprovalsRequired().exists()).toBe(true);
+  });
+});
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
new file mode 100644
index 00000000000..e2fbb4f5bbb
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
@@ -0,0 +1,68 @@
+import { GlCard, GlLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Protection, { i18n } from '~/projects/settings/branch_rules/components/view/protection.vue';
+import ProtectionRow from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionPropsMock } from './mock_data';
+
+describe('Branch rule protection', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(Protection, {
+      propsData: protectionPropsMock,
+      stubs: { GlCard },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findCard = () => wrapper.findComponent(GlCard);
+  const findHeader = () => wrapper.findByText(protectionPropsMock.header);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findProtectionRows = () => wrapper.findAllComponents(ProtectionRow);
+
+  it('renders a card component', () => {
+    expect(findCard().exists()).toBe(true);
+  });
+
+  it('renders a header with a link', () => {
+    expect(findHeader().exists()).toBe(true);
+    expect(findLink().text()).toBe(protectionPropsMock.headerLinkTitle);
+    expect(findLink().attributes('href')).toBe(protectionPropsMock.headerLinkHref);
+  });
+
+  it('renders a protection row for roles', () => {
+    expect(findProtectionRows().at(0).props()).toMatchObject({
+      accessLevels: protectionPropsMock.roles,
+      showDivider: false,
+      title: i18n.rolesTitle,
+    });
+  });
+
+  it('renders a protection row for users', () => {
+    expect(findProtectionRows().at(1).props()).toMatchObject({
+      users: protectionPropsMock.users,
+      showDivider: true,
+      title: i18n.usersTitle,
+    });
+  });
+
+  it('renders a protection row for groups', () => {
+    expect(findProtectionRows().at(2).props()).toMatchObject({
+      accessLevels: protectionPropsMock.groups,
+      showDivider: true,
+      title: i18n.groupsTitle,
+    });
+  });
+
+  it('renders a protection row for approvals', () => {
+    const approval = protectionPropsMock.approvals[0];
+    expect(findProtectionRows().at(3).props()).toMatchObject({
+      title: approval.name,
+      users: approval.eligibleApprovers.nodes,
+      approvalsRequired: approval.approvalsRequired,
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/components/default_branch_selector_spec.js b/spec/frontend/projects/settings/components/default_branch_selector_spec.js
new file mode 100644
index 00000000000..94648d87524
--- /dev/null
+++ b/spec/frontend/projects/settings/components/default_branch_selector_spec.js
@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import DefaultBranchSelector from '~/projects/settings/components/default_branch_selector.vue';
+import RefSelector from '~/ref/components/ref_selector.vue';
+import { REF_TYPE_BRANCHES } from '~/ref/constants';
+
+describe('projects/settings/components/default_branch_selector', () => {
+  const persistedDefaultBranch = 'main';
+  const projectId = '123';
+  let wrapper;
+
+  const findRefSelector = () => wrapper.findComponent(RefSelector);
+
+  const buildWrapper = () => {
+    wrapper = shallowMount(DefaultBranchSelector, {
+      propsData: {
+        persistedDefaultBranch,
+        projectId,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(() => {
+    buildWrapper();
+  });
+
+  it('displays a RefSelector component', () => {
+    expect(findRefSelector().props()).toEqual({
+      value: persistedDefaultBranch,
+      enabledRefTypes: [REF_TYPE_BRANCHES],
+      projectId,
+      state: true,
+      translations: {
+        dropdownHeader: expect.any(String),
+        searchPlaceholder: expect.any(String),
+      },
+      useSymbolicRefNames: false,
+      name: 'project[default_branch]',
+    });
+
+    expect(findRefSelector().classes()).toContain('gl-w-full');
+  });
+});
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 bde7148078d..6e639f895a8 100644
--- a/spec/frontend/projects/settings/components/transfer_project_form_spec.js
+++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js
@@ -1,41 +1,65 @@
 import Vue, { nextTick } from 'vue';
+import { GlAlert } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
-import searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1 from 'test_fixtures/graphql/projects/settings/search_namespaces_where_user_can_transfer_projects_page_1.query.graphql.json';
-import searchNamespacesWhereUserCanTransferProjectsQueryResponsePage2 from 'test_fixtures/graphql/projects/settings/search_namespaces_where_user_can_transfer_projects_page_2.query.graphql.json';
-import {
-  groupNamespaces,
-  userNamespaces,
-} from 'jest/vue_shared/components/namespace_select/mock_data';
+import currentUserNamespaceQueryResponse from 'test_fixtures/graphql/projects/settings/current_user_namespace.query.graphql.json';
+import transferLocationsResponsePage1 from 'test_fixtures/api/projects/transfer_locations_page_1.json';
+import transferLocationsResponsePage2 from 'test_fixtures/api/projects/transfer_locations_page_2.json';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue';
-import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
+import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
-import searchNamespacesWhereUserCanTransferProjectsQuery from '~/projects/settings/graphql/queries/search_namespaces_where_user_can_transfer_projects.query.graphql';
+import currentUserNamespaceQuery from '~/projects/settings/graphql/queries/current_user_namespace.query.graphql';
+import { getTransferLocations } from '~/api/projects_api';
 import waitForPromises from 'helpers/wait_for_promises';
 
+jest.mock('~/api/projects_api', () => ({
+  getTransferLocations: jest.fn(),
+}));
+
 describe('Transfer project form', () => {
   let wrapper;
 
+  const projectId = '1';
   const confirmButtonText = 'Confirm';
   const confirmationPhrase = 'You must construct additional pylons!';
 
-  const runDebounce = () => jest.runAllTimers();
-
   Vue.use(VueApollo);
 
-  const defaultQueryHandler = jest
-    .fn()
-    .mockResolvedValue(searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1);
+  const defaultQueryHandler = jest.fn().mockResolvedValue(currentUserNamespaceQueryResponse);
+  const mockResolvedGetTransferLocations = ({
+    data = transferLocationsResponsePage1,
+    page = '1',
+    nextPage = '2',
+    prevPage = null,
+  } = {}) => {
+    getTransferLocations.mockResolvedValueOnce({
+      data,
+      headers: {
+        'x-per-page': '2',
+        'x-page': page,
+        'x-total': '4',
+        'x-total-pages': '2',
+        'x-next-page': nextPage,
+        'x-prev-page': prevPage,
+      },
+    });
+  };
+  const mockRejectedGetTransferLocations = () => {
+    const error = new Error();
+
+    getTransferLocations.mockRejectedValueOnce(error);
+  };
 
   const createComponent = ({
-    requestHandlers = [[searchNamespacesWhereUserCanTransferProjectsQuery, defaultQueryHandler]],
+    requestHandlers = [[currentUserNamespaceQuery, defaultQueryHandler]],
   } = {}) => {
     wrapper = shallowMountExtended(TransferProjectForm, {
+      provide: {
+        projectId,
+      },
       propsData: {
-        userNamespaces,
-        groupNamespaces,
         confirmButtonText,
         confirmationPhrase,
       },
@@ -44,7 +68,12 @@ describe('Transfer project form', () => {
   };
 
   const findNamespaceSelect = () => wrapper.findComponent(NamespaceSelect);
+  const showNamespaceSelect = async () => {
+    findNamespaceSelect().vm.$emit('show');
+    await waitForPromises();
+  };
   const findConfirmDanger = () => wrapper.findComponent(ConfirmDanger);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   afterEach(() => {
     wrapper.destroy();
@@ -69,66 +98,113 @@ describe('Transfer project form', () => {
   });
 
   describe('with a selected namespace', () => {
-    const [selectedItem] = groupNamespaces;
+    const [selectedItem] = transferLocationsResponsePage1;
 
-    beforeEach(() => {
+    const arrange = async () => {
+      mockResolvedGetTransferLocations();
       createComponent();
-
+      await showNamespaceSelect();
       findNamespaceSelect().vm.$emit('select', selectedItem);
-    });
+    };
+
+    it('emits the `selectNamespace` event when a namespace is selected', async () => {
+      await arrange();
 
-    it('emits the `selectNamespace` event when a namespace is selected', () => {
       const args = [selectedItem.id];
 
       expect(wrapper.emitted('selectNamespace')).toEqual([args]);
     });
 
-    it('enables the confirm button', () => {
+    it('enables the confirm button', async () => {
+      await arrange();
+
       expect(findConfirmDanger().attributes('disabled')).toBeUndefined();
     });
 
-    it('clicking the confirm button emits the `confirm` event', () => {
+    it('clicking the confirm button emits the `confirm` event', async () => {
+      await arrange();
+
       findConfirmDanger().vm.$emit('confirm');
 
       expect(wrapper.emitted('confirm')).toBeDefined();
     });
   });
 
-  it('passes correct props to `NamespaceSelect` component', async () => {
-    createComponent();
+  describe('when `NamespaceSelect` is opened', () => {
+    it('fetches user and group namespaces and passes correct props to `NamespaceSelect` component', async () => {
+      mockResolvedGetTransferLocations();
+      createComponent();
+      await showNamespaceSelect();
+
+      const { namespace } = currentUserNamespaceQueryResponse.data.currentUser;
+
+      expect(findNamespaceSelect().props()).toMatchObject({
+        userNamespaces: [
+          {
+            id: getIdFromGraphQLId(namespace.id),
+            humanName: namespace.fullName,
+          },
+        ],
+        groupNamespaces: transferLocationsResponsePage1.map(({ id, full_name: humanName }) => ({
+          id,
+          humanName,
+        })),
+        hasNextPageOfGroups: true,
+        isLoading: false,
+        isSearchLoading: false,
+        shouldFilterNamespaces: false,
+      });
+    });
 
-    runDebounce();
-    await waitForPromises();
+    describe('when namespaces have already been fetched', () => {
+      beforeEach(async () => {
+        mockResolvedGetTransferLocations();
+        createComponent();
+        await showNamespaceSelect();
+      });
+
+      it('does not fetch namespaces', async () => {
+        getTransferLocations.mockClear();
+        defaultQueryHandler.mockClear();
+
+        await showNamespaceSelect();
 
-    const {
-      namespace,
-      groups,
-    } = searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1.data.currentUser;
-
-    expect(findNamespaceSelect().props()).toMatchObject({
-      userNamespaces: [
-        {
-          id: getIdFromGraphQLId(namespace.id),
-          humanName: namespace.fullName,
-        },
-      ],
-      groupNamespaces: groups.nodes.map((node) => ({
-        id: getIdFromGraphQLId(node.id),
-        humanName: node.fullName,
-      })),
-      hasNextPageOfGroups: true,
-      isLoadingMoreGroups: false,
-      isSearchLoading: false,
-      shouldFilterNamespaces: false,
+        expect(getTransferLocations).not.toHaveBeenCalled();
+        expect(defaultQueryHandler).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('when `getTransferLocations` API call fails', () => {
+      it('displays error alert', async () => {
+        mockRejectedGetTransferLocations();
+        createComponent();
+        await showNamespaceSelect();
+
+        expect(findAlert().exists()).toBe(true);
+      });
+    });
+
+    describe('when `currentUser` GraphQL query fails', () => {
+      it('displays error alert', async () => {
+        mockResolvedGetTransferLocations();
+        const error = new Error();
+        createComponent({
+          requestHandlers: [[currentUserNamespaceQuery, jest.fn().mockRejectedValueOnce(error)]],
+        });
+        await showNamespaceSelect();
+
+        expect(findAlert().exists()).toBe(true);
+      });
     });
   });
 
   describe('when `search` event is fired', () => {
     const arrange = async () => {
+      mockResolvedGetTransferLocations();
       createComponent();
-
+      await showNamespaceSelect();
+      mockResolvedGetTransferLocations();
       findNamespaceSelect().vm.$emit('search', 'foo');
-
       await nextTick();
     };
 
@@ -138,87 +214,106 @@ describe('Transfer project form', () => {
       expect(findNamespaceSelect().props('isSearchLoading')).toBe(true);
     });
 
-    it('passes `search` variable to query', async () => {
+    it('passes `search` param to API call', async () => {
       await arrange();
 
-      runDebounce();
       await waitForPromises();
 
-      expect(defaultQueryHandler).toHaveBeenCalledWith(expect.objectContaining({ search: 'foo' }));
+      expect(getTransferLocations).toHaveBeenCalledWith(
+        projectId,
+        expect.objectContaining({ search: 'foo' }),
+      );
+    });
+
+    describe('when `getTransferLocations` API call fails', () => {
+      it('displays dismissible error alert', async () => {
+        mockResolvedGetTransferLocations();
+        createComponent();
+        await showNamespaceSelect();
+        mockRejectedGetTransferLocations();
+        findNamespaceSelect().vm.$emit('search', 'foo');
+        await waitForPromises();
+
+        const alert = findAlert();
+
+        expect(alert.exists()).toBe(true);
+
+        alert.vm.$emit('dismiss');
+        await nextTick();
+
+        expect(alert.exists()).toBe(false);
+      });
     });
   });
 
   describe('when `load-more-groups` event is fired', () => {
-    let queryHandler;
-
     const arrange = async () => {
-      queryHandler = jest.fn();
-      queryHandler.mockResolvedValueOnce(
-        searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1,
-      );
-      queryHandler.mockResolvedValueOnce(
-        searchNamespacesWhereUserCanTransferProjectsQueryResponsePage2,
-      );
+      mockResolvedGetTransferLocations();
+      createComponent();
+      await showNamespaceSelect();
 
-      createComponent({
-        requestHandlers: [[searchNamespacesWhereUserCanTransferProjectsQuery, queryHandler]],
+      mockResolvedGetTransferLocations({
+        data: transferLocationsResponsePage2,
+        page: '2',
+        nextPage: null,
+        prevPage: '1',
       });
 
-      runDebounce();
-      await waitForPromises();
-
       findNamespaceSelect().vm.$emit('load-more-groups');
       await nextTick();
     };
 
-    it('sets `isLoadingMoreGroups` prop to `true`', async () => {
+    it('sets `isLoading` prop to `true`', async () => {
       await arrange();
 
-      expect(findNamespaceSelect().props('isLoadingMoreGroups')).toBe(true);
+      expect(findNamespaceSelect().props('isLoading')).toBe(true);
     });
 
-    it('passes `after` and `first` variables to query', async () => {
+    it('passes `page` param to API call', async () => {
       await arrange();
 
-      runDebounce();
       await waitForPromises();
 
-      expect(queryHandler).toHaveBeenCalledWith(
-        expect.objectContaining({
-          first: 25,
-          after:
-            searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1.data.currentUser.groups
-              .pageInfo.endCursor,
-        }),
+      expect(getTransferLocations).toHaveBeenCalledWith(
+        projectId,
+        expect.objectContaining({ page: 2 }),
       );
     });
 
     it('updates `groupNamespaces` prop with new groups', async () => {
       await arrange();
 
-      runDebounce();
       await waitForPromises();
 
-      expect(findNamespaceSelect().props('groupNamespaces')).toEqual(
-        [
-          ...searchNamespacesWhereUserCanTransferProjectsQueryResponsePage1.data.currentUser.groups
-            .nodes,
-          ...searchNamespacesWhereUserCanTransferProjectsQueryResponsePage2.data.currentUser.groups
-            .nodes,
-        ].map((node) => ({
-          id: getIdFromGraphQLId(node.id),
-          humanName: node.fullName,
-        })),
+      expect(findNamespaceSelect().props('groupNamespaces')).toMatchObject(
+        [...transferLocationsResponsePage1, ...transferLocationsResponsePage2].map(
+          ({ id, full_name: humanName }) => ({
+            id,
+            humanName,
+          }),
+        ),
       );
     });
 
     it('updates `hasNextPageOfGroups` prop', async () => {
       await arrange();
 
-      runDebounce();
       await waitForPromises();
 
       expect(findNamespaceSelect().props('hasNextPageOfGroups')).toBe(false);
     });
+
+    describe('when `getTransferLocations` API call fails', () => {
+      it('displays error alert', async () => {
+        mockResolvedGetTransferLocations();
+        createComponent();
+        await showNamespaceSelect();
+        mockRejectedGetTransferLocations();
+        findNamespaceSelect().vm.$emit('load-more-groups');
+        await waitForPromises();
+
+        expect(findAlert().exists()).toBe(true);
+      });
+    });
   });
 });
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 e920cd48163..4603436c40a 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/app_spec.js
@@ -6,8 +6,8 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import BranchRules, { i18n } from '~/projects/settings/repository/branch_rules/app.vue';
 import BranchRule from '~/projects/settings/repository/branch_rules/components/branch_rule.vue';
 import branchRulesQuery from '~/projects/settings/repository/branch_rules/graphql/queries/branch_rules.query.graphql';
-import createFlash from '~/flash';
-import { branchRulesMockResponse, propsDataMock } from './mock_data';
+import { createAlert } from '~/flash';
+import { branchRulesMockResponse, appProvideMock } from './mock_data';
 
 jest.mock('~/flash');
 
@@ -24,9 +24,7 @@ describe('Branch rules app', () => {
 
     wrapper = mountExtended(BranchRules, {
       apolloProvider: fakeApollo,
-      propsData: {
-        ...propsDataMock,
-      },
+      provide: appProvideMock,
     });
 
     await waitForPromises();
@@ -39,7 +37,7 @@ describe('Branch rules app', () => {
 
   it('displays an error if branch rules query fails', async () => {
     await createComponent({ queryHandler: jest.fn().mockRejectedValue() });
-    expect(createFlash).toHaveBeenCalledWith({ message: i18n.queryError });
+    expect(createAlert).toHaveBeenCalledWith({ message: i18n.queryError });
   });
 
   it('displays an empty state if no branch rules are present', async () => {
@@ -49,7 +47,11 @@ describe('Branch rules app', () => {
 
   it('renders branch rules', () => {
     const { nodes } = branchRulesMockResponse.data.project.branchRules;
-    expect(findAllBranchRules().at(0).text()).toBe(nodes[0].name);
-    expect(findAllBranchRules().at(1).text()).toBe(nodes[1].name);
+
+    expect(findAllBranchRules().length).toBe(nodes.length);
+
+    expect(findAllBranchRules().at(0).props('name')).toBe(nodes[0].name);
+
+    expect(findAllBranchRules().at(1).props('name')).toBe(nodes[1].name);
   });
 });
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 924dab60704..2bc705f538b 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
@@ -2,26 +2,24 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import BranchRule, {
   i18n,
 } from '~/projects/settings/repository/branch_rules/components/branch_rule.vue';
-
-const defaultProps = {
-  name: 'main',
-  isDefault: true,
-  isProtected: true,
-  approvalDetails: ['requires approval from TEST', '2 status checks'],
-};
+import { branchRuleProvideMock, branchRulePropsMock } from '../mock_data';
 
 describe('Branch rule', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMountExtended(BranchRule, { propsData: { ...defaultProps, ...props } });
+    wrapper = shallowMountExtended(BranchRule, {
+      provide: branchRuleProvideMock,
+      propsData: { ...branchRulePropsMock, ...props },
+    });
   };
 
   const findDefaultBadge = () => wrapper.findByText(i18n.defaultLabel);
   const findProtectedBadge = () => wrapper.findByText(i18n.protectedLabel);
-  const findBranchName = () => wrapper.findByText(defaultProps.name);
+  const findBranchName = () => wrapper.findByText(branchRulePropsMock.name);
   const findProtectionDetailsList = () => wrapper.findByRole('list');
   const findProtectionDetailsListItems = () => wrapper.findAllByRole('listitem');
+  const findDetailsButton = () => wrapper.findByText(i18n.detailsButtonLabel);
 
   beforeEach(() => createComponent());
 
@@ -52,7 +50,17 @@ describe('Branch rule', () => {
   });
 
   it('renders the protection details list items', () => {
-    expect(findProtectionDetailsListItems().at(0).text()).toBe(defaultProps.approvalDetails[0]);
-    expect(findProtectionDetailsListItems().at(1).text()).toBe(defaultProps.approvalDetails[1]);
+    expect(findProtectionDetailsListItems().at(0).text()).toBe(
+      branchRulePropsMock.approvalDetails[0],
+    );
+    expect(findProtectionDetailsListItems().at(1).text()).toBe(
+      branchRulePropsMock.approvalDetails[1],
+    );
+  });
+
+  it('renders a detail button with the correct href', () => {
+    expect(findDetailsButton().attributes('href')).toBe(
+      `${branchRuleProvideMock.branchRulesPath}?branch=${branchRulePropsMock.name}`,
+    );
   });
 });
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 14ed35f047d..bac82992c4d 100644
--- a/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
+++ b/spec/frontend/projects/settings/repository/branch_rules/mock_data.js
@@ -20,6 +20,17 @@ export const branchRulesMockResponse = {
   },
 };
 
-export const propsDataMock = {
+export const appProvideMock = {
   projectPath: 'some/project/path',
 };
+
+export const branchRuleProvideMock = {
+  branchRulesPath: 'settings/repository/branch_rules',
+};
+
+export const branchRulePropsMock = {
+  name: 'main',
+  isDefault: true,
+  isProtected: true,
+  approvalDetails: ['requires approval from TEST', '2 status checks'],
+};
diff --git a/spec/frontend/protected_branches/protected_branch_edit_spec.js b/spec/frontend/protected_branches/protected_branch_edit_spec.js
index 6ef1b58a956..0aec4fbc037 100644
--- a/spec/frontend/protected_branches/protected_branch_edit_spec.js
+++ b/spec/frontend/protected_branches/protected_branch_edit_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import ProtectedBranchEdit from '~/protected_branches/protected_branch_edit';
 
@@ -136,7 +136,7 @@ describe('ProtectedBranchEdit', () => {
 
         expect(toggle).not.toHaveClass(IS_DISABLED_CLASS);
         expect(toggle.querySelector(IS_LOADING_SELECTOR)).toBe(null);
-        expect(createFlash).not.toHaveBeenCalled();
+        expect(createAlert).not.toHaveBeenCalled();
       });
     });
 
@@ -149,7 +149,7 @@ describe('ProtectedBranchEdit', () => {
       it('flashes error', async () => {
         await axios.waitForAll();
 
-        expect(createFlash).toHaveBeenCalled();
+        expect(createAlert).toHaveBeenCalled();
       });
     });
   });
diff --git a/spec/frontend/ref/components/ref_selector_spec.js b/spec/frontend/ref/components/ref_selector_spec.js
index 6c5af5a2625..96601a729b2 100644
--- a/spec/frontend/ref/components/ref_selector_spec.js
+++ b/spec/frontend/ref/components/ref_selector_spec.js
@@ -109,6 +109,8 @@ describe('Ref selector component', () => {
   const findCommitDropdownItems = () => findCommitsSection().findAllComponents(GlDropdownItem);
   const findFirstCommitDropdownItem = () => findCommitDropdownItems().at(0);
 
+  const findHiddenInputField = () => wrapper.find('[data-testid="selected-ref-form-field"]');
+
   //
   // Expecters
   //
@@ -181,6 +183,24 @@ describe('Ref selector component', () => {
         expect(findLoadingIcon().exists()).toBe(false);
       });
     });
+
+    describe('when name property is provided', () => {
+      it('renders an forrm input hidden field', () => {
+        const name = 'default_tag';
+
+        createComponent({ propsData: { name } });
+
+        expect(findHiddenInputField().attributes().name).toBe(name);
+      });
+    });
+
+    describe('when name property is not provided', () => {
+      it('renders an forrm input hidden field', () => {
+        createComponent();
+
+        expect(findHiddenInputField().exists()).toBe(false);
+      });
+    });
   });
 
   describe('post-initialization behavior', () => {
@@ -194,7 +214,7 @@ describe('Ref selector component', () => {
       });
 
       it('adds the provided ID to the GlDropdown instance', () => {
-        expect(wrapper.attributes().id).toBe(id);
+        expect(wrapper.findComponent(GlDropdown).attributes().id).toBe(id);
       });
     });
 
@@ -202,7 +222,7 @@ describe('Ref selector component', () => {
       const preselectedRef = fixtures.branches[0].name;
 
       beforeEach(() => {
-        createComponent({ propsData: { value: preselectedRef } });
+        createComponent({ propsData: { value: preselectedRef, name: 'selectedRef' } });
 
         return waitForRequests();
       });
@@ -210,6 +230,10 @@ describe('Ref selector component', () => {
       it('renders the pre-selected ref name', () => {
         expect(findButtonContent().text()).toBe(preselectedRef);
       });
+
+      it('binds hidden input field to the pre-selected ref', () => {
+        expect(findHiddenInputField().attributes().value).toBe(preselectedRef);
+      });
     });
 
     describe('when the selected ref is updated by the parent component', () => {
diff --git a/spec/frontend/releases/__snapshots__/util_spec.js.snap b/spec/frontend/releases/__snapshots__/util_spec.js.snap
index 55e3dda60a0..d88d79d2cde 100644
--- a/spec/frontend/releases/__snapshots__/util_spec.js.snap
+++ b/spec/frontend/releases/__snapshots__/util_spec.js.snap
@@ -155,8 +155,8 @@ Object {
         Object {
           "__typename": "ReleaseEvidence",
           "collectedAt": "2018-12-03T00:00:00Z",
-          "filepath": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/evidences/1.json",
-          "id": "gid://gitlab/Releases::Evidence/1",
+          "filepath": Any<String>,
+          "id": Any<String>,
           "sha": "760d6cdfb0879c3ffedec13af470e0f71cf52c6cde4d",
         },
       ],
@@ -198,10 +198,10 @@ Object {
   ],
   "paginationInfo": Object {
     "__typename": "PageInfo",
-    "endCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTgtMTItMTAgMDA6MDA6MDAuMDAwMDAwMDAwICswMDAwIiwiaWQiOiIxIn0",
+    "endCursor": Any<String>,
     "hasNextPage": false,
     "hasPreviousPage": false,
-    "startCursor": "eyJyZWxlYXNlZF9hdCI6IjIwMTktMDEtMTAgMDA6MDA6MDAuMDAwMDAwMDAwICswMDAwIiwiaWQiOiIyIn0",
+    "startCursor": Any<String>,
   },
 }
 `;
@@ -377,8 +377,8 @@ Object {
       Object {
         "__typename": "ReleaseEvidence",
         "collectedAt": "2018-12-03T00:00:00Z",
-        "filepath": "http://localhost/releases-namespace/releases-project/-/releases/v1.1/evidences/1.json",
-        "id": "gid://gitlab/Releases::Evidence/1",
+        "filepath": Any<String>,
+        "id": Any<String>,
         "sha": "760d6cdfb0879c3ffedec13af470e0f71cf52c6cde4d",
       },
     ],
diff --git a/spec/frontend/releases/components/app_index_spec.js b/spec/frontend/releases/components/app_index_spec.js
index f64f07de90e..48589a54ec4 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { historyPushState } from '~/lib/utils/common_utils';
 import { sprintf, __ } from '~/locale';
 import ReleasesIndexApp from '~/releases/components/app_index.vue';
@@ -161,13 +161,13 @@ describe('app_index.vue', () => {
         it(`${toDescription(flashMessage)} show a flash message`, async () => {
           await waitForPromises();
           if (flashMessage) {
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: ReleasesIndexApp.i18n.errorMessage,
               captureError: true,
               error: expect.any(Error),
             });
           } else {
-            expect(createFlash).not.toHaveBeenCalled();
+            expect(createAlert).not.toHaveBeenCalled();
           }
         });
 
diff --git a/spec/frontend/releases/components/app_show_spec.js b/spec/frontend/releases/components/app_show_spec.js
index 9ca25b3b69a..c5cb8589ee8 100644
--- a/spec/frontend/releases/components/app_show_spec.js
+++ b/spec/frontend/releases/components/app_show_spec.js
@@ -4,7 +4,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -53,13 +53,13 @@ describe('Release show component', () => {
 
   const expectNoFlash = () => {
     it('does not show a flash message', () => {
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
     });
   };
 
   const expectFlashWithMessage = (message) => {
     it(`shows a flash message that reads "${message}"`, () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message,
         captureError: true,
         error: expect.any(Error),
diff --git a/spec/frontend/releases/components/evidence_block_spec.js b/spec/frontend/releases/components/evidence_block_spec.js
index 2db1e9e38a2..6f935215dd7 100644
--- a/spec/frontend/releases/components/evidence_block_spec.js
+++ b/spec/frontend/releases/components/evidence_block_spec.js
@@ -36,7 +36,7 @@ describe('Evidence Block', () => {
   });
 
   it('renders the title for the dowload link', () => {
-    expect(wrapper.findComponent(GlLink).text()).toBe(`v1.1-evidences-1.json`);
+    expect(wrapper.findComponent(GlLink).text()).toMatch(/v1\.1-evidences-[0-9]+\.json/);
   });
 
   it('renders the correct hover text for the download', () => {
@@ -44,7 +44,9 @@ describe('Evidence Block', () => {
   });
 
   it('renders the correct file link for download', () => {
-    expect(wrapper.findComponent(GlLink).attributes().download).toBe(`v1.1-evidences-1.json`);
+    expect(wrapper.findComponent(GlLink).attributes().download).toMatch(
+      /v1\.1-evidences-[0-9]+\.json/,
+    );
   });
 
   describe('sha text', () => {
diff --git a/spec/frontend/releases/components/tag_field_new_spec.js b/spec/frontend/releases/components/tag_field_new_spec.js
index b8047cae8c2..fcba0da3462 100644
--- a/spec/frontend/releases/components/tag_field_new_spec.js
+++ b/spec/frontend/releases/components/tag_field_new_spec.js
@@ -1,14 +1,17 @@
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem, GlFormGroup, GlSprintf } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
+import { trimText } from 'helpers/text_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 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';
 
 const TEST_TAG_NAME = 'test-tag-name';
+const TEST_TAG_MESSAGE = 'Test tag message';
 const TEST_PROJECT_ID = '1234';
 const TEST_CREATE_FROM = 'test-create-from';
 const NONEXISTENT_TAG_NAME = 'nonexistent-tag';
@@ -47,6 +50,8 @@ describe('releases/components/tag_field_new', () => {
       store,
       stubs: {
         RefSelector: RefSelectorStub,
+        GlFormGroup,
+        GlSprintf,
       },
     });
   };
@@ -61,9 +66,11 @@ describe('releases/components/tag_field_new', () => {
     });
 
     store.state.editNew.createFrom = TEST_CREATE_FROM;
+    store.state.editNew.showCreateFrom = true;
 
     store.state.editNew.release = {
       tagName: TEST_TAG_NAME,
+      tagMessage: '',
       assets: {
         links: [],
       },
@@ -86,6 +93,9 @@ describe('releases/components/tag_field_new', () => {
 
   const findCreateNewTagOption = () => wrapper.findComponent(GlDropdownItem);
 
+  const findAnnotatedTagMessageFormGroup = () =>
+    wrapper.find('[data-testid="annotated-tag-message-field"]');
+
   describe('"Tag name" field', () => {
     describe('rendering and behavior', () => {
       beforeEach(() => createComponent());
@@ -124,6 +134,10 @@ describe('releases/components/tag_field_new', () => {
           expect(findCreateFromFormGroup().exists()).toBe(false);
         });
 
+        it('hides the "Tag message" field', () => {
+          expect(findAnnotatedTagMessageFormGroup().exists()).toBe(false);
+        });
+
         it('fetches the release notes for the tag', () => {
           const expectedUrl = `/api/v4/projects/1234/repository/tags/${updatedTagName}`;
           expect(mock.history.get).toContainEqual(expect.objectContaining({ url: expectedUrl }));
@@ -230,4 +244,34 @@ describe('releases/components/tag_field_new', () => {
       });
     });
   });
+
+  describe('"Annotated Tag" field', () => {
+    beforeEach(() => {
+      createComponent(mountExtended);
+    });
+
+    it('renders a label', () => {
+      expect(wrapper.findByRole('textbox', { name: 'Set tag message' }).exists()).toBe(true);
+    });
+
+    it('renders a description', () => {
+      expect(trimText(findAnnotatedTagMessageFormGroup().text())).toContain(
+        'Add a message to the tag. Leaving this blank creates a lightweight tag.',
+      );
+    });
+
+    it('updates the store', async () => {
+      await findAnnotatedTagMessageFormGroup().find('textarea').setValue(TEST_TAG_MESSAGE);
+
+      expect(store.state.editNew.release.tagMessage).toBe(TEST_TAG_MESSAGE);
+    });
+
+    it('shows a link', () => {
+      const link = wrapper.findByRole('link', {
+        name: 'lightweight tag',
+      });
+
+      expect(link.attributes('href')).toBe('https://git-scm.com/book/en/v2/Git-Basics-Tagging/');
+    });
+  });
 });
diff --git a/spec/frontend/releases/stores/modules/detail/actions_spec.js b/spec/frontend/releases/stores/modules/detail/actions_spec.js
index 48fba3adb24..eeee6747349 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { ASSET_LINK_TYPE } from '~/releases/constants';
@@ -59,7 +59,7 @@ describe('Release edit/new actions', () => {
     releaseResponse = cloneDeep(originalOneReleaseForEditingQueryResponse);
     gon.api_version = 'v4';
     error = new Error('Yikes!');
-    createFlash.mockClear();
+    createAlert.mockClear();
   });
 
   describe('when creating a new release', () => {
@@ -151,8 +151,8 @@ describe('Release edit/new actions', () => {
 
         it(`shows a flash message`, () => {
           return actions.fetchRelease({ commit: jest.fn(), state, rootState: state }).then(() => {
-            expect(createFlash).toHaveBeenCalledTimes(1);
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledTimes(1);
+            expect(createAlert).toHaveBeenCalledWith({
               message: 'Something went wrong while getting the release details.',
             });
           });
@@ -169,6 +169,15 @@ describe('Release edit/new actions', () => {
       });
     });
 
+    describe('updateReleaseTagMessage', () => {
+      it(`commits ${types.UPDATE_RELEASE_TAG_MESSAGE} with the updated tag name`, () => {
+        const newMessage = 'updated-tag-message';
+        return testAction(actions.updateReleaseTagMessage, newMessage, state, [
+          { type: types.UPDATE_RELEASE_TAG_MESSAGE, payload: newMessage },
+        ]);
+      });
+    });
+
     describe('updateReleasedAt', () => {
       it(`commits ${types.UPDATE_RELEASED_AT} with the updated date`, () => {
         const newDate = new Date();
@@ -370,8 +379,8 @@ describe('Release edit/new actions', () => {
           return actions
             .createRelease({ commit: jest.fn(), dispatch: jest.fn(), state, getters: {} })
             .then(() => {
-              expect(createFlash).toHaveBeenCalledTimes(1);
-              expect(createFlash).toHaveBeenCalledWith({
+              expect(createAlert).toHaveBeenCalledTimes(1);
+              expect(createAlert).toHaveBeenCalledWith({
                 message: 'Yikes!',
               });
             });
@@ -396,8 +405,8 @@ describe('Release edit/new actions', () => {
           return actions
             .createRelease({ commit: jest.fn(), dispatch: jest.fn(), state, getters: {} })
             .then(() => {
-              expect(createFlash).toHaveBeenCalledTimes(1);
-              expect(createFlash).toHaveBeenCalledWith({
+              expect(createAlert).toHaveBeenCalledTimes(1);
+              expect(createAlert).toHaveBeenCalledWith({
                 message: 'Something went wrong while creating a new release.',
               });
             });
@@ -527,8 +536,8 @@ describe('Release edit/new actions', () => {
         it('shows a flash message', async () => {
           await actions.updateRelease({ commit, dispatch, state, getters });
 
-          expect(createFlash).toHaveBeenCalledTimes(1);
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledTimes(1);
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'Something went wrong while saving the release details.',
           });
         });
@@ -547,8 +556,8 @@ describe('Release edit/new actions', () => {
           it('shows a flash message', async () => {
             await actions.updateRelease({ commit, dispatch, state, getters });
 
-            expect(createFlash).toHaveBeenCalledTimes(1);
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledTimes(1);
+            expect(createAlert).toHaveBeenCalledWith({
               message: 'Something went wrong while saving the release details.',
             });
           });
@@ -700,8 +709,8 @@ describe('Release edit/new actions', () => {
       it('shows a flash message', async () => {
         await actions.deleteRelease({ commit, dispatch, state, getters });
 
-        expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'Something went wrong while deleting the release.',
         });
       });
@@ -736,8 +745,8 @@ describe('Release edit/new actions', () => {
       it('shows a flash message', async () => {
         await actions.deleteRelease({ commit, dispatch, state, getters });
 
-        expect(createFlash).toHaveBeenCalledTimes(1);
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledTimes(1);
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'Something went wrong while deleting the release.',
         });
       });
@@ -779,7 +788,7 @@ describe('Release edit/new actions', () => {
         [],
       );
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: s__('Release|Unable to fetch the tag notes.'),
       });
       expect(getTag).toHaveBeenCalledWith(state.projectId, tagName);
diff --git a/spec/frontend/releases/stores/modules/detail/getters_spec.js b/spec/frontend/releases/stores/modules/detail/getters_spec.js
index 2982dc5c46c..f8b87ec71dc 100644
--- a/spec/frontend/releases/stores/modules/detail/getters_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/getters_spec.js
@@ -317,7 +317,7 @@ describe('Release edit/new getters', () => {
       { milestones: ['release.milestone[0].title'] },
     ],
   ])('releaseUpdateMutatationVariables', (description, state, expectedVariables) => {
-    it(description, () => {
+    it(`${description}`, () => {
       const expectedVariablesObject = { input: expect.objectContaining(expectedVariables) };
 
       const actualVariables = getters.releaseUpdateMutatationVariables(state, {
@@ -332,6 +332,7 @@ describe('Release edit/new getters', () => {
     it('returns all the data needed for the releaseCreate GraphQL query', () => {
       const state = {
         createFrom: 'main',
+        release: { tagMessage: 'hello' },
       };
 
       const otherGetters = {
@@ -352,6 +353,7 @@ describe('Release edit/new getters', () => {
       const expectedVariables = {
         input: {
           name: 'release.name',
+          tagMessage: 'hello',
           ref: 'main',
           assets: {
             links: [
diff --git a/spec/frontend/releases/stores/modules/detail/mutations_spec.js b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
index 8bbf550b77d..944769d22cc 100644
--- a/spec/frontend/releases/stores/modules/detail/mutations_spec.js
+++ b/spec/frontend/releases/stores/modules/detail/mutations_spec.js
@@ -26,6 +26,7 @@ describe('Release edit/new mutations', () => {
 
       expect(state.release).toEqual({
         tagName: 'v1.3',
+        tagMessage: '',
         name: '',
         description: '',
         milestones: [],
@@ -90,6 +91,16 @@ describe('Release edit/new mutations', () => {
     });
   });
 
+  describe(`${types.UPDATE_RELEASE_TAG_MESSAGE}`, () => {
+    it("updates the release's tag message", () => {
+      state.release = release;
+      const newMessage = 'updated-tag-message';
+      mutations[types.UPDATE_RELEASE_TAG_MESSAGE](state, newMessage);
+
+      expect(state.release.tagMessage).toBe(newMessage);
+    });
+  });
+
   describe(`${types.UPDATE_RELEASED_AT}`, () => {
     it("updates the release's released at date", () => {
       state.release = release;
diff --git a/spec/frontend/releases/util_spec.js b/spec/frontend/releases/util_spec.js
index 055c8e8b39f..14cce8320e9 100644
--- a/spec/frontend/releases/util_spec.js
+++ b/spec/frontend/releases/util_spec.js
@@ -115,8 +115,18 @@ describe('releases/util.js', () => {
             author: {
               id: expect.any(String),
             },
+            evidences: [
+              {
+                id: expect.any(String),
+                filepath: expect.any(String),
+              },
+            ],
           },
         ],
+        paginationInfo: {
+          startCursor: expect.any(String),
+          endCursor: expect.any(String),
+        },
       });
     });
   });
@@ -128,6 +138,12 @@ describe('releases/util.js', () => {
           author: {
             id: expect.any(String),
           },
+          evidences: [
+            {
+              id: expect.any(String),
+              filepath: expect.any(String),
+            },
+          ],
         },
       });
     });
diff --git a/spec/frontend/reports/accessibility_report/components/accessibility_issue_body_spec.js b/spec/frontend/reports/accessibility_report/components/accessibility_issue_body_spec.js
deleted file mode 100644
index d835ca4c733..00000000000
--- a/spec/frontend/reports/accessibility_report/components/accessibility_issue_body_spec.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { GlBadge } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import AccessibilityIssueBody from '~/reports/accessibility_report/components/accessibility_issue_body.vue';
-
-const issue = {
-  name:
-    'The accessibility scanning found 2 errors of the following type: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
-  code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
-  message: 'This element has insufficient contrast at this conformance level.',
-  status: 'failed',
-  className: 'spec.test_spec',
-  learnMoreUrl: 'https://www.w3.org/TR/WCAG20-TECHS/H91.html',
-};
-
-describe('CustomMetricsForm', () => {
-  let wrapper;
-
-  const mountComponent = ({ name, code, message, status, className }, isNew = false) => {
-    wrapper = shallowMount(AccessibilityIssueBody, {
-      propsData: {
-        issue: {
-          name,
-          code,
-          message,
-          status,
-          className,
-        },
-        isNew,
-      },
-    });
-  };
-
-  const findIsNewBadge = () => wrapper.findComponent(GlBadge);
-
-  beforeEach(() => {
-    mountComponent(issue);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('Displays the issue message', () => {
-    const description = wrapper.findComponent({ ref: 'accessibility-issue-description' }).text();
-
-    expect(description).toContain(`Message: ${issue.message}`);
-  });
-
-  describe('When an issue code is present', () => {
-    it('Creates the correct URL for learning more about the issue code', () => {
-      const learnMoreUrl = wrapper
-        .findComponent({ ref: 'accessibility-issue-learn-more' })
-        .attributes('href');
-
-      expect(learnMoreUrl).toBe(issue.learnMoreUrl);
-    });
-  });
-
-  describe('When an issue code is not present', () => {
-    beforeEach(() => {
-      mountComponent({
-        ...issue,
-        code: undefined,
-      });
-    });
-
-    it('Creates a URL leading to the overview documentation page', () => {
-      const learnMoreUrl = wrapper
-        .findComponent({ ref: 'accessibility-issue-learn-more' })
-        .attributes('href');
-
-      expect(learnMoreUrl).toBe('https://www.w3.org/TR/WCAG20-TECHS/Overview.html');
-    });
-  });
-
-  describe('When an issue code does not contain the TECHS code', () => {
-    beforeEach(() => {
-      mountComponent({
-        ...issue,
-        code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2',
-      });
-    });
-
-    it('Creates a URL leading to the overview documentation page', () => {
-      const learnMoreUrl = wrapper
-        .findComponent({ ref: 'accessibility-issue-learn-more' })
-        .attributes('href');
-
-      expect(learnMoreUrl).toBe('https://www.w3.org/TR/WCAG20-TECHS/Overview.html');
-    });
-  });
-
-  describe('When issue is new', () => {
-    beforeEach(() => {
-      mountComponent(issue, true);
-    });
-
-    it('Renders the new badge', () => {
-      expect(findIsNewBadge().exists()).toBe(true);
-    });
-  });
-
-  describe('When issue is not new', () => {
-    beforeEach(() => {
-      mountComponent(issue, false);
-    });
-
-    it('Does not render the new badge', () => {
-      expect(findIsNewBadge().exists()).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/reports/accessibility_report/grouped_accessibility_reports_app_spec.js b/spec/frontend/reports/accessibility_report/grouped_accessibility_reports_app_spec.js
deleted file mode 100644
index 9d3535291eb..00000000000
--- a/spec/frontend/reports/accessibility_report/grouped_accessibility_reports_app_spec.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import AccessibilityIssueBody from '~/reports/accessibility_report/components/accessibility_issue_body.vue';
-import GroupedAccessibilityReportsApp from '~/reports/accessibility_report/grouped_accessibility_reports_app.vue';
-import { getStoreConfig } from '~/reports/accessibility_report/store';
-import { mockReport } from './mock_data';
-
-Vue.use(Vuex);
-
-describe('Grouped accessibility reports app', () => {
-  let wrapper;
-  let mockStore;
-
-  const mountComponent = () => {
-    wrapper = mount(GroupedAccessibilityReportsApp, {
-      store: mockStore,
-      propsData: {
-        endpoint: 'endpoint.json',
-      },
-    });
-  };
-
-  const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]');
-
-  beforeEach(() => {
-    mockStore = new Vuex.Store({
-      ...getStoreConfig(),
-      actions: { fetchReport: () => {}, setEndpoint: () => {} },
-    });
-
-    mountComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('while loading', () => {
-    beforeEach(() => {
-      mockStore.state.isLoading = true;
-      mountComponent();
-    });
-
-    it('renders loading state', () => {
-      expect(findHeader().text()).toEqual('Accessibility scanning results are being parsed');
-    });
-  });
-
-  describe('with error', () => {
-    beforeEach(() => {
-      mockStore.state.isLoading = false;
-      mockStore.state.hasError = true;
-      mountComponent();
-    });
-
-    it('renders error state', () => {
-      expect(findHeader().text()).toEqual('Accessibility scanning failed loading results');
-    });
-  });
-
-  describe('with a report', () => {
-    describe('with no issues', () => {
-      beforeEach(() => {
-        mockStore.state.report = {
-          summary: {
-            errored: 0,
-          },
-        };
-      });
-
-      it('renders no issues header', () => {
-        expect(findHeader().text()).toContain(
-          'Accessibility scanning detected no issues for the source branch only',
-        );
-      });
-    });
-
-    describe('with one issue', () => {
-      beforeEach(() => {
-        mockStore.state.report = {
-          summary: {
-            errored: 1,
-          },
-        };
-      });
-
-      it('renders one issue header', () => {
-        expect(findHeader().text()).toContain(
-          'Accessibility scanning detected 1 issue for the source branch only',
-        );
-      });
-    });
-
-    describe('with multiple issues', () => {
-      beforeEach(() => {
-        mockStore.state.report = {
-          summary: {
-            errored: 2,
-          },
-        };
-      });
-
-      it('renders multiple issues header', () => {
-        expect(findHeader().text()).toContain(
-          'Accessibility scanning detected 2 issues for the source branch only',
-        );
-      });
-    });
-
-    describe('with issues to show', () => {
-      beforeEach(() => {
-        mockStore.state.report = mockReport;
-      });
-
-      it('renders custom accessibility issue body', () => {
-        const issueBody = wrapper.findComponent(AccessibilityIssueBody);
-
-        expect(issueBody.props('issue').code).toBe(mockReport.new_errors[0].code);
-        expect(issueBody.props('issue').message).toBe(mockReport.new_errors[0].message);
-        expect(issueBody.props('isNew')).toBe(true);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/reports/accessibility_report/mock_data.js b/spec/frontend/reports/accessibility_report/mock_data.js
deleted file mode 100644
index 9dace1e7c54..00000000000
--- a/spec/frontend/reports/accessibility_report/mock_data.js
+++ /dev/null
@@ -1,53 +0,0 @@
-export const mockReport = {
-  status: 'failed',
-  summary: {
-    total: 2,
-    resolved: 0,
-    errored: 2,
-  },
-  new_errors: [
-    {
-      code: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail',
-      type: 'error',
-      typeCode: 1,
-      message:
-        'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.84:1. Recommendation:  change text colour to #767676.',
-      context: '<a href="/stages-devops-lifecycle/" class="main-nav-link">Product</a>',
-      selector: '#main-nav > div:nth-child(2) > ul > li:nth-child(1) > a',
-      runner: 'htmlcs',
-      runnerExtras: {},
-    },
-  ],
-  new_notes: [],
-  new_warnings: [],
-  resolved_errors: [
-    {
-      code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
-      type: 'error',
-      typeCode: 1,
-      message:
-        'Anchor element found with a valid href attribute, but no link content has been supplied.',
-      context: '<a href="/" class="navbar-brand animated"><svg height="36" viewBox="0 0 1...</a>',
-      selector: '#main-nav > div:nth-child(1) > a',
-      runner: 'htmlcs',
-      runnerExtras: {},
-    },
-  ],
-  resolved_notes: [],
-  resolved_warnings: [],
-  existing_errors: [
-    {
-      code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
-      type: 'error',
-      typeCode: 1,
-      message:
-        'Anchor element found with a valid href attribute, but no link content has been supplied.',
-      context: '<a href="/" class="navbar-brand animated"><svg height="36" viewBox="0 0 1...</a>',
-      selector: '#main-nav > div:nth-child(1) > a',
-      runner: 'htmlcs',
-      runnerExtras: {},
-    },
-  ],
-  existing_notes: [],
-  existing_warnings: [],
-};
diff --git a/spec/frontend/reports/accessibility_report/store/actions_spec.js b/spec/frontend/reports/accessibility_report/store/actions_spec.js
deleted file mode 100644
index bab6c4905a7..00000000000
--- a/spec/frontend/reports/accessibility_report/store/actions_spec.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import testAction from 'helpers/vuex_action_helper';
-import { TEST_HOST } from 'spec/test_constants';
-import axios from '~/lib/utils/axios_utils';
-import createStore from '~/reports/accessibility_report/store';
-import * as actions from '~/reports/accessibility_report/store/actions';
-import * as types from '~/reports/accessibility_report/store/mutation_types';
-import { mockReport } from '../mock_data';
-
-describe('Accessibility Reports actions', () => {
-  let localState;
-  let localStore;
-
-  beforeEach(() => {
-    localStore = createStore();
-    localState = localStore.state;
-  });
-
-  describe('setEndpoints', () => {
-    it('should commit SET_ENDPOINTS mutation', () => {
-      const endpoint = 'endpoint.json';
-
-      return testAction(
-        actions.setEndpoint,
-        endpoint,
-        localState,
-        [{ type: types.SET_ENDPOINT, payload: endpoint }],
-        [],
-      );
-    });
-  });
-
-  describe('fetchReport', () => {
-    let mock;
-
-    beforeEach(() => {
-      localState.endpoint = `${TEST_HOST}/endpoint.json`;
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      mock.restore();
-      actions.stopPolling();
-      actions.clearEtagPoll();
-    });
-
-    describe('success', () => {
-      it('should commit REQUEST_REPORT mutation and dispatch receiveReportSuccess', () => {
-        const data = { report: { summary: {} } };
-        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(200, data);
-
-        return testAction(
-          actions.fetchReport,
-          null,
-          localState,
-          [{ type: types.REQUEST_REPORT }],
-          [
-            {
-              payload: { status: 200, data },
-              type: 'receiveReportSuccess',
-            },
-          ],
-        );
-      });
-    });
-
-    describe('error', () => {
-      it('should commit REQUEST_REPORT and RECEIVE_REPORT_ERROR mutations', () => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
-
-        return testAction(
-          actions.fetchReport,
-          null,
-          localState,
-          [{ type: types.REQUEST_REPORT }],
-          [{ type: 'receiveReportError' }],
-        );
-      });
-    });
-  });
-
-  describe('receiveReportSuccess', () => {
-    it('should commit RECEIVE_REPORT_SUCCESS mutation with 200', () => {
-      return testAction(
-        actions.receiveReportSuccess,
-        { status: 200, data: mockReport },
-        localState,
-        [{ type: types.RECEIVE_REPORT_SUCCESS, payload: mockReport }],
-        [{ type: 'stopPolling' }],
-      );
-    });
-
-    it('should not commit RECEIVE_REPORTS_SUCCESS mutation with 204', () => {
-      return testAction(
-        actions.receiveReportSuccess,
-        { status: 204, data: mockReport },
-        localState,
-        [],
-        [],
-      );
-    });
-  });
-
-  describe('receiveReportError', () => {
-    it('should commit RECEIVE_REPORT_ERROR mutation', () => {
-      return testAction(
-        actions.receiveReportError,
-        null,
-        localState,
-        [{ type: types.RECEIVE_REPORT_ERROR }],
-        [{ type: 'stopPolling' }],
-      );
-    });
-  });
-});
diff --git a/spec/frontend/reports/accessibility_report/store/getters_spec.js b/spec/frontend/reports/accessibility_report/store/getters_spec.js
deleted file mode 100644
index 96344596003..00000000000
--- a/spec/frontend/reports/accessibility_report/store/getters_spec.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import createStore from '~/reports/accessibility_report/store';
-import * as getters from '~/reports/accessibility_report/store/getters';
-import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '~/reports/constants';
-
-describe('Accessibility reports store getters', () => {
-  let localState;
-  let localStore;
-
-  beforeEach(() => {
-    localStore = createStore();
-    localState = localStore.state;
-  });
-
-  describe('summaryStatus', () => {
-    describe('when summary is loading', () => {
-      it('returns loading status', () => {
-        localState.isLoading = true;
-
-        expect(getters.summaryStatus(localState)).toEqual(LOADING);
-      });
-    });
-
-    describe('when summary has error', () => {
-      it('returns error status', () => {
-        localState.hasError = true;
-
-        expect(getters.summaryStatus(localState)).toEqual(ERROR);
-      });
-    });
-
-    describe('when summary has failed status', () => {
-      it('returns loading status', () => {
-        localState.status = STATUS_FAILED;
-
-        expect(getters.summaryStatus(localState)).toEqual(ERROR);
-      });
-    });
-
-    describe('when summary has successfully loaded', () => {
-      it('returns loading status', () => {
-        expect(getters.summaryStatus(localState)).toEqual(SUCCESS);
-      });
-    });
-  });
-
-  describe('groupedSummaryText', () => {
-    describe('when state is loading', () => {
-      it('returns the loading summary message', () => {
-        localState.isLoading = true;
-        const result = 'Accessibility scanning results are being parsed';
-
-        expect(getters.groupedSummaryText(localState)).toEqual(result);
-      });
-    });
-
-    describe('when state has error', () => {
-      it('returns the error summary message', () => {
-        localState.hasError = true;
-        const result = 'Accessibility scanning failed loading results';
-
-        expect(getters.groupedSummaryText(localState)).toEqual(result);
-      });
-    });
-
-    describe('when state has successfully loaded', () => {
-      describe('when report has errors', () => {
-        it('returns summary message containing number of errors', () => {
-          localState.report = {
-            summary: {
-              errored: 2,
-            },
-          };
-          const result = 'Accessibility scanning detected 2 issues for the source branch only';
-
-          expect(getters.groupedSummaryText(localState)).toEqual(result);
-        });
-      });
-
-      describe('when report has no errors', () => {
-        it('returns summary message containing no errors', () => {
-          localState.report = {
-            summary: {
-              errored: 0,
-            },
-          };
-          const result = 'Accessibility scanning detected no issues for the source branch only';
-
-          expect(getters.groupedSummaryText(localState)).toEqual(result);
-        });
-      });
-    });
-  });
-
-  describe('shouldRenderIssuesList', () => {
-    describe('when has issues to render', () => {
-      it('returns true', () => {
-        localState.report = {
-          existing_errors: [{ name: 'Issue' }],
-        };
-
-        expect(getters.shouldRenderIssuesList(localState)).toEqual(true);
-      });
-    });
-
-    describe('when does not have issues to render', () => {
-      it('returns false', () => {
-        localState.report = {
-          status: 'success',
-          summary: { errored: 0 },
-        };
-
-        expect(getters.shouldRenderIssuesList(localState)).toEqual(false);
-      });
-    });
-  });
-
-  describe('unresolvedIssues', () => {
-    it('returns the array unresolved errors', () => {
-      localState.report = {
-        existing_errors: [1],
-      };
-      const result = [1];
-
-      expect(getters.unresolvedIssues(localState)).toEqual(result);
-    });
-  });
-
-  describe('resolvedIssues', () => {
-    it('returns array of resolved errors', () => {
-      localState.report = {
-        resolved_errors: [1],
-      };
-      const result = [1];
-
-      expect(getters.resolvedIssues(localState)).toEqual(result);
-    });
-  });
-
-  describe('newIssues', () => {
-    it('returns array of new errors', () => {
-      localState.report = {
-        new_errors: [1],
-      };
-      const result = [1];
-
-      expect(getters.newIssues(localState)).toEqual(result);
-    });
-  });
-});
diff --git a/spec/frontend/reports/accessibility_report/store/mutations_spec.js b/spec/frontend/reports/accessibility_report/store/mutations_spec.js
deleted file mode 100644
index b336261d804..00000000000
--- a/spec/frontend/reports/accessibility_report/store/mutations_spec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import createStore from '~/reports/accessibility_report/store';
-import mutations from '~/reports/accessibility_report/store/mutations';
-
-describe('Accessibility Reports mutations', () => {
-  let localState;
-  let localStore;
-
-  beforeEach(() => {
-    localStore = createStore();
-    localState = localStore.state;
-  });
-
-  describe('SET_ENDPOINT', () => {
-    it('sets endpoint to given value', () => {
-      const endpoint = 'endpoint.json';
-      mutations.SET_ENDPOINT(localState, endpoint);
-
-      expect(localState.endpoint).toEqual(endpoint);
-    });
-  });
-
-  describe('REQUEST_REPORT', () => {
-    it('sets isLoading to true', () => {
-      mutations.REQUEST_REPORT(localState);
-
-      expect(localState.isLoading).toEqual(true);
-    });
-  });
-
-  describe('RECEIVE_REPORT_SUCCESS', () => {
-    it('sets isLoading to false', () => {
-      mutations.RECEIVE_REPORT_SUCCESS(localState, {});
-
-      expect(localState.isLoading).toEqual(false);
-    });
-
-    it('sets hasError to false', () => {
-      mutations.RECEIVE_REPORT_SUCCESS(localState, {});
-
-      expect(localState.hasError).toEqual(false);
-    });
-
-    it('sets report to response report', () => {
-      const report = { data: 'testing' };
-      mutations.RECEIVE_REPORT_SUCCESS(localState, report);
-
-      expect(localState.report).toEqual(report);
-    });
-  });
-
-  describe('RECEIVE_REPORT_ERROR', () => {
-    it('sets isLoading to false', () => {
-      mutations.RECEIVE_REPORT_ERROR(localState);
-
-      expect(localState.isLoading).toEqual(false);
-    });
-
-    it('sets hasError to true', () => {
-      mutations.RECEIVE_REPORT_ERROR(localState);
-
-      expect(localState.hasError).toEqual(true);
-    });
-  });
-});
diff --git a/spec/frontend/reports/components/report_section_spec.js b/spec/frontend/reports/components/report_section_spec.js
index bdfba8d6878..cc35b99a199 100644
--- a/spec/frontend/reports/components/report_section_spec.js
+++ b/spec/frontend/reports/components/report_section_spec.js
@@ -7,9 +7,13 @@ import ReportSection from '~/reports/components/report_section.vue';
 describe('ReportSection component', () => {
   let wrapper;
 
-  const findButton = () => wrapper.findComponent(GlButton);
+  const findExpandButton = () => wrapper.findComponent(GlButton);
   const findPopover = () => wrapper.findComponent(HelpPopover);
   const findReportSection = () => wrapper.find('.js-report-section-container');
+  const expectExpandButtonOpen = () =>
+    expect(findExpandButton().props('icon')).toBe('chevron-lg-up');
+  const expectExpandButtonClosed = () =>
+    expect(findExpandButton().props('icon')).toBe('chevron-lg-down');
 
   const resolvedIssues = [
     {
@@ -122,22 +126,22 @@ describe('ReportSection component', () => {
       it('toggles issues', async () => {
         createComponent({ props: { hasIssues: true } });
 
-        await findButton().trigger('click');
+        await findExpandButton().trigger('click');
 
         expect(findReportSection().isVisible()).toBe(true);
-        expect(findButton().text()).toBe('Collapse');
+        expectExpandButtonOpen();
 
-        await findButton().trigger('click');
+        await findExpandButton().trigger('click');
 
         expect(findReportSection().isVisible()).toBe(false);
-        expect(findButton().text()).toBe('Expand');
+        expectExpandButtonClosed();
       });
 
       it('is always expanded, if always-open is set to true', () => {
         createComponent({ props: { hasIssues: true, alwaysOpen: true } });
 
         expect(findReportSection().isVisible()).toBe(true);
-        expect(findButton().exists()).toBe(false);
+        expect(findExpandButton().exists()).toBe(false);
       });
     });
   });
@@ -148,7 +152,7 @@ describe('ReportSection component', () => {
 
       expect(wrapper.emitted('toggleEvent')).toBeUndefined();
 
-      findButton().trigger('click');
+      findExpandButton().trigger('click');
 
       expect(wrapper.emitted('toggleEvent')).toEqual([[]]);
     });
@@ -158,7 +162,7 @@ describe('ReportSection component', () => {
 
       expect(wrapper.emitted('toggleEvent')).toBeUndefined();
 
-      findButton().trigger('click');
+      findExpandButton().trigger('click');
 
       expect(wrapper.emitted('toggleEvent')).toBeUndefined();
     });
@@ -208,7 +212,7 @@ describe('ReportSection component', () => {
     });
 
     it('should still render the expand/collapse button', () => {
-      expect(findButton().text()).toBe('Expand');
+      expectExpandButtonClosed();
     });
   });
 
diff --git a/spec/frontend/repository/commits_service_spec.js b/spec/frontend/repository/commits_service_spec.js
index 697fa7c4fd1..de7c56f239a 100644
--- a/spec/frontend/repository/commits_service_spec.js
+++ b/spec/frontend/repository/commits_service_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { loadCommits, isRequested, resetRequestedCommits } from '~/repository/commits_service';
 import httpStatus from '~/lib/utils/http_status';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { I18N_COMMIT_DATA_FETCH_ERROR } from '~/repository/constants';
 
 jest.mock('~/flash');
@@ -65,13 +65,13 @@ describe('commits service', () => {
     expect(isRequested(300)).toBe(false);
   });
 
-  it('calls `createFlash` when the request fails', async () => {
+  it('calls `createAlert` when the request fails', async () => {
     const invalidPath = '/#@ some/path';
     const invalidUrl = `${url}${invalidPath}`;
     mock.onGet(invalidUrl).replyOnce(httpStatus.INTERNAL_SERVER_ERROR, [], {});
 
     await requestCommits(1, 'my-project', invalidPath);
 
-    expect(createFlash).toHaveBeenCalledWith({ message: I18N_COMMIT_DATA_FETCH_ERROR });
+    expect(createAlert).toHaveBeenCalledWith({ message: I18N_COMMIT_DATA_FETCH_ERROR });
   });
 });
diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 01494cb6a24..6fe60f3c2e6 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -7,7 +7,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
   <user-avatar-link-stub
     class="gl-my-2 gl-mr-4"
     imgalt=""
-    imgcssclasses="gl-mr-0!"
+    imgcssclasses=""
     imgsize="32"
     imgsrc="https://test.com"
     linkhref="/test"
diff --git a/spec/frontend/repository/components/blob_controls_spec.js b/spec/frontend/repository/components/blob_controls_spec.js
index 6da1861ea7c..0d52542397f 100644
--- a/spec/frontend/repository/components/blob_controls_spec.js
+++ b/spec/frontend/repository/components/blob_controls_spec.js
@@ -8,9 +8,13 @@ import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql'
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createRouter from '~/repository/router';
 import { updateElementsVisibility } from '~/repository/utils/dom';
+import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
+import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import { blobControlsDataMock, refMock } from '../mock_data';
 
 jest.mock('~/repository/utils/dom');
+jest.mock('~/behaviors/shortcuts/shortcuts_blob');
+jest.mock('~/blob/blob_line_permalink_updater');
 
 let router;
 let wrapper;
@@ -82,4 +86,12 @@ describe('Blob controls component', () => {
       expect(updateElementsVisibility).toHaveBeenCalledWith('.tree-controls', true);
     },
   );
+
+  it('loads the ShortcutsBlob', () => {
+    expect(ShortcutsBlob).toHaveBeenCalled();
+  });
+
+  it('loads the BlobLinePermalinkUpdater', () => {
+    expect(BlobLinePermalinkUpdater).toHaveBeenCalled();
+  });
 });
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index bf9528953b6..964b135bee3 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -185,7 +185,7 @@ describe('Repository last commit component', () => {
 
     it('strips the first newline of the description', () => {
       expect(findCommitRowDescription().html()).toBe(
-        '<pre class="commit-row-description gl-mb-3">Update ADOPTERS.md</pre>',
+        '<pre class="commit-row-description gl-mb-3 gl-white-space-pre-line">Update ADOPTERS.md</pre>',
       );
     });
 
diff --git a/spec/frontend/repository/components/new_directory_modal_spec.js b/spec/frontend/repository/components/new_directory_modal_spec.js
index aaf751a9a8d..cf0d48280f4 100644
--- a/spec/frontend/repository/components/new_directory_modal_spec.js
+++ b/spec/frontend/repository/components/new_directory_modal_spec.js
@@ -4,7 +4,7 @@ import { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 import NewDirectoryModal from '~/repository/components/new_directory_modal.vue';
@@ -194,7 +194,7 @@ describe('NewDirectoryModal', () => {
         await fillForm({ dirName: 'foo', branchName: 'master', commitMessage: 'foo' });
         await submitForm();
 
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: NewDirectoryModal.i18n.ERROR_MESSAGE,
         });
       });
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 26064e9b248..b99d741e984 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -40,10 +40,10 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   </td>
    
   <td
-    class="d-none d-sm-table-cell tree-commit cursor-default"
+    class="d-none d-sm-table-cell tree-commit cursor-default gl-text-secondary"
   >
     <gl-link-stub
-      class="str-truncated-100 tree-commit-link"
+      class="str-truncated-100 tree-commit-link gl-text-secondary"
     />
      
     <gl-intersection-observer-stub>
@@ -52,7 +52,7 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   </td>
    
   <td
-    class="tree-time-ago text-right cursor-default"
+    class="tree-time-ago text-right cursor-default gl-text-secondary"
   >
     <timeago-tooltip-stub
       cssclass=""
@@ -105,10 +105,10 @@ exports[`Repository table row component renders table row 1`] = `
   </td>
    
   <td
-    class="d-none d-sm-table-cell tree-commit cursor-default"
+    class="d-none d-sm-table-cell tree-commit cursor-default gl-text-secondary"
   >
     <gl-link-stub
-      class="str-truncated-100 tree-commit-link"
+      class="str-truncated-100 tree-commit-link gl-text-secondary"
     />
      
     <gl-intersection-observer-stub>
@@ -117,7 +117,7 @@ exports[`Repository table row component renders table row 1`] = `
   </td>
    
   <td
-    class="tree-time-ago text-right cursor-default"
+    class="tree-time-ago text-right cursor-default gl-text-secondary"
   >
     <timeago-tooltip-stub
       cssclass=""
@@ -170,10 +170,10 @@ exports[`Repository table row component renders table row for path with special
   </td>
    
   <td
-    class="d-none d-sm-table-cell tree-commit cursor-default"
+    class="d-none d-sm-table-cell tree-commit cursor-default gl-text-secondary"
   >
     <gl-link-stub
-      class="str-truncated-100 tree-commit-link"
+      class="str-truncated-100 tree-commit-link gl-text-secondary"
     />
      
     <gl-intersection-observer-stub>
@@ -182,7 +182,7 @@ exports[`Repository table row component renders table row for path with special
   </td>
    
   <td
-    class="tree-time-ago text-right cursor-default"
+    class="tree-time-ago text-right cursor-default gl-text-secondary"
   >
     <timeago-tooltip-stub
       cssclass=""
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index 697d2dcc7f5..2180f78a8df 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -159,7 +159,7 @@ describe('Repository table component', () => {
   });
 
   describe('Show more button', () => {
-    const showMoreButton = () => vm.find(GlButton);
+    const showMoreButton = () => vm.findComponent(GlButton);
 
     it.each`
       hasMore  | expectButtonToExist
diff --git a/spec/frontend/repository/components/table/parent_row_spec.js b/spec/frontend/repository/components/table/parent_row_spec.js
index 9daae8c36ef..03fb4242e40 100644
--- a/spec/frontend/repository/components/table/parent_row_spec.js
+++ b/spec/frontend/repository/components/table/parent_row_spec.js
@@ -39,7 +39,7 @@ describe('Repository parent row component', () => {
   `('renders link in $path to $to', ({ path, to }) => {
     factory(path);
 
-    expect(vm.find(RouterLinkStub).props().to).toEqual({
+    expect(vm.findComponent(RouterLinkStub).props().to).toEqual({
       path: to,
     });
   });
@@ -69,6 +69,6 @@ describe('Repository parent row component', () => {
   it('renders loading icon when loading parent', () => {
     factory('app/assets', 'app');
 
-    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+    expect(vm.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 13b09e57473..64aa6d179a8 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -47,7 +47,7 @@ function factory(propsData = {}) {
 }
 
 describe('Repository table row component', () => {
-  const findRouterLink = () => vm.find(RouterLinkStub);
+  const findRouterLink = () => vm.findComponent(RouterLinkStub);
   const findIntersectionObserver = () => vm.findComponent(GlIntersectionObserver);
 
   afterEach(() => {
@@ -124,7 +124,7 @@ describe('Repository table row component', () => {
     });
 
     await nextTick();
-    expect(vm.find(component).exists()).toBe(true);
+    expect(vm.findComponent(component).exists()).toBe(true);
   });
 
   it.each`
@@ -141,7 +141,7 @@ describe('Repository table row component', () => {
     });
 
     await nextTick();
-    expect(vm.find({ ref: 'link' }).props('to')).toEqual({
+    expect(vm.findComponent({ ref: 'link' }).props('to')).toEqual({
       path: `/-/tree/main/${encodeURIComponent(path)}`,
     });
   });
@@ -197,7 +197,7 @@ describe('Repository table row component', () => {
     });
 
     await nextTick();
-    expect(vm.find(GlBadge).exists()).toBe(true);
+    expect(vm.findComponent(GlBadge).exists()).toBe(true);
   });
 
   it('renders commit and web links with href for submodule', async () => {
@@ -213,7 +213,7 @@ describe('Repository table row component', () => {
 
     await nextTick();
     expect(vm.find('a').attributes('href')).toEqual('https://test.com');
-    expect(vm.find(GlLink).attributes('href')).toEqual('https://test.com/commit');
+    expect(vm.findComponent(GlLink).attributes('href')).toEqual('https://test.com/commit');
   });
 
   it('renders lock icon', async () => {
@@ -226,8 +226,8 @@ describe('Repository table row component', () => {
     });
 
     await nextTick();
-    expect(vm.find(GlIcon).exists()).toBe(true);
-    expect(vm.find(GlIcon).props('name')).toBe('lock');
+    expect(vm.findComponent(GlIcon).exists()).toBe(true);
+    expect(vm.findComponent(GlIcon).props('name')).toBe('lock');
   });
 
   it('renders loading icon when path is loading', () => {
@@ -240,7 +240,7 @@ describe('Repository table row component', () => {
       loadingPath: 'test',
     });
 
-    expect(vm.find(FileIcon).props('loading')).toBe(true);
+    expect(vm.findComponent(FileIcon).props('loading')).toBe(true);
   });
 
   describe('row visibility', () => {
diff --git a/spec/frontend/repository/components/tree_content_spec.js b/spec/frontend/repository/components/tree_content_spec.js
index 9d3a5394df8..352f4314232 100644
--- a/spec/frontend/repository/components/tree_content_spec.js
+++ b/spec/frontend/repository/components/tree_content_spec.js
@@ -38,7 +38,7 @@ function factory(path, data = () => ({})) {
 }
 
 describe('Repository table component', () => {
-  const findFileTable = () => vm.find(FileTable);
+  const findFileTable = () => vm.findComponent(FileTable);
 
   afterEach(() => {
     vm.destroy();
@@ -53,7 +53,7 @@ describe('Repository table component', () => {
 
     await nextTick();
 
-    expect(vm.find(FilePreview).exists()).toBe(true);
+    expect(vm.findComponent(FilePreview).exists()).toBe(true);
   });
 
   it('trigger fetchFiles and resetRequestedCommits when mounted', async () => {
diff --git a/spec/frontend/repository/components/upload_blob_modal_spec.js b/spec/frontend/repository/components/upload_blob_modal_spec.js
index 505ff7f3dd6..8db169b02b4 100644
--- a/spec/frontend/repository/components/upload_blob_modal_spec.js
+++ b/spec/frontend/repository/components/upload_blob_modal_spec.js
@@ -4,7 +4,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
 import { visitUrl } from '~/lib/utils/url_utility';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
@@ -47,12 +47,12 @@ describe('UploadBlobModal', () => {
     });
   };
 
-  const findModal = () => wrapper.find(GlModal);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findCommitMessage = () => wrapper.find(GlFormTextarea);
-  const findBranchName = () => wrapper.find(GlFormInput);
-  const findMrToggle = () => wrapper.find(GlToggle);
-  const findUploadDropzone = () => wrapper.find(UploadDropzone);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findCommitMessage = () => wrapper.findComponent(GlFormTextarea);
+  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;
@@ -185,7 +185,7 @@ describe('UploadBlobModal', () => {
           });
 
           it('creates a flash error', () => {
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: 'Error uploading file. Please try again.',
             });
           });
diff --git a/spec/frontend/repository/pages/blob_spec.js b/spec/frontend/repository/pages/blob_spec.js
index 41ab4d616b8..4fe6188370e 100644
--- a/spec/frontend/repository/pages/blob_spec.js
+++ b/spec/frontend/repository/pages/blob_spec.js
@@ -7,7 +7,7 @@ jest.mock('~/repository/utils/dom');
 describe('Repository blob page component', () => {
   let wrapper;
 
-  const findBlobContentViewer = () => wrapper.find(BlobContentViewer);
+  const findBlobContentViewer = () => wrapper.findComponent(BlobContentViewer);
   const path = 'file.js';
 
   beforeEach(() => {
diff --git a/spec/frontend/repository/pages/index_spec.js b/spec/frontend/repository/pages/index_spec.js
index c0afb7931b1..559257d414c 100644
--- a/spec/frontend/repository/pages/index_spec.js
+++ b/spec/frontend/repository/pages/index_spec.js
@@ -34,7 +34,7 @@ describe('Repository index page component', () => {
   it('renders TreePage', () => {
     factory();
 
-    const child = wrapper.find(TreePage);
+    const child = wrapper.findComponent(TreePage);
 
     expect(child.exists()).toBe(true);
     expect(child.props()).toEqual({ path: '/' });
diff --git a/spec/frontend/runner/admin_runner_show/admin_runner_show_app_spec.js b/spec/frontend/runner/admin_runner_show/admin_runner_show_app_spec.js
index 7ab4aeee9bc..64f66d8f3ba 100644
--- a/spec/frontend/runner/admin_runner_show/admin_runner_show_app_spec.js
+++ b/spec/frontend/runner/admin_runner_show/admin_runner_show_app_spec.js
@@ -104,6 +104,10 @@ describe('AdminRunnerShowApp', () => {
                         Platform darwin
                         Configuration Runs untagged jobs
                         Maximum job timeout None
+                        Token expiry
+                        Runner authentication token expiration
+                        Runner authentication tokens will expire based on a set interval.
+                        They will automatically rotate once expired. Learn more Never expires
                         Tags None`.replace(/\s+/g, ' ');
 
       expect(wrapper.text().replace(/\s+/g, ' ')).toContain(expected);
diff --git a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
index 55a298e1695..7afde3bdc96 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -20,8 +20,6 @@ import AdminRunnersApp from '~/runner/admin_runners/admin_runners_app.vue';
 import RunnerStackedLayoutBanner from '~/runner/components/runner_stacked_layout_banner.vue';
 import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
 import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
-import RunnerBulkDelete from '~/runner/components/runner_bulk_delete.vue';
-import RunnerBulkDeleteCheckbox from '~/runner/components/runner_bulk_delete_checkbox.vue';
 import RunnerList from '~/runner/components/runner_list.vue';
 import RunnerListEmptyState from '~/runner/components/runner_list_empty_state.vue';
 import RunnerStats from '~/runner/components/stat/runner_stats.vue';
@@ -45,6 +43,7 @@ import {
   PARAM_KEY_STATUS,
   PARAM_KEY_TAG,
   STATUS_ONLINE,
+  DEFAULT_MEMBERSHIP,
   RUNNER_PAGE_SIZE,
 } from '~/runner/constants';
 import allRunnersQuery from 'ee_else_ce/runner/graphql/list/all_runners.query.graphql';
@@ -83,8 +82,6 @@ const COUNT_QUERIES = 7; // 4 tabs + 3 status queries
 
 describe('AdminRunnersApp', () => {
   let wrapper;
-  let cacheConfig;
-  let localMutations;
   let showToast;
 
   const findRunnerStackedLayoutBanner = () => wrapper.findComponent(RunnerStackedLayoutBanner);
@@ -92,8 +89,6 @@ describe('AdminRunnersApp', () => {
   const findRunnerActionsCell = () => wrapper.findComponent(RunnerActionsCell);
   const findRegistrationDropdown = () => wrapper.findComponent(RegistrationDropdown);
   const findRunnerTypeTabs = () => wrapper.findComponent(RunnerTypeTabs);
-  const findRunnerBulkDelete = () => wrapper.findComponent(RunnerBulkDelete);
-  const findRunnerBulkDeleteCheckbox = () => wrapper.findComponent(RunnerBulkDeleteCheckbox);
   const findRunnerList = () => wrapper.findComponent(RunnerList);
   const findRunnerListEmptyState = () => wrapper.findComponent(RunnerListEmptyState);
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
@@ -106,7 +101,7 @@ describe('AdminRunnersApp', () => {
     provide,
     ...options
   } = {}) => {
-    ({ cacheConfig, localMutations } = createLocalState());
+    const { cacheConfig, localMutations } = createLocalState();
 
     const handlers = [
       [allRunnersQuery, mockRunnersHandler],
@@ -195,7 +190,7 @@ describe('AdminRunnersApp', () => {
     const { id, shortSha } = mockRunners[0];
     const numericId = getIdFromGraphQLId(id);
 
-    const runnerLink = wrapper.find('tr [data-testid="td-summary"]').find(GlLink);
+    const runnerLink = wrapper.find('tr [data-testid="td-summary"]').findComponent(GlLink);
 
     expect(runnerLink.text()).toBe(`#${numericId} (${shortSha})`);
     expect(runnerLink.attributes('href')).toBe(`http://localhost/admin/runners/${numericId}`);
@@ -204,7 +199,9 @@ describe('AdminRunnersApp', () => {
   it('renders runner actions for each runner', async () => {
     await createComponent({ mountFn: mountExtended });
 
-    const runnerActions = wrapper.find('tr [data-testid="td-actions"]').find(RunnerActionsCell);
+    const runnerActions = wrapper
+      .find('tr [data-testid="td-actions"]')
+      .findComponent(RunnerActionsCell);
     const runner = mockRunners[0];
 
     expect(runnerActions.props()).toEqual({
@@ -219,6 +216,7 @@ describe('AdminRunnersApp', () => {
     expect(mockRunnersHandler).toHaveBeenLastCalledWith({
       status: undefined,
       type: undefined,
+      membership: DEFAULT_MEMBERSHIP,
       sort: DEFAULT_SORT,
       first: RUNNER_PAGE_SIZE,
     });
@@ -255,7 +253,7 @@ describe('AdminRunnersApp', () => {
     });
 
     it('Links to the runner page', async () => {
-      const runnerLink = wrapper.find('tr [data-testid="td-summary"]').find(GlLink);
+      const runnerLink = wrapper.find('tr [data-testid="td-summary"]').findComponent(GlLink);
 
       expect(runnerLink.text()).toBe(`#${id} (${shortSha})`);
       expect(runnerLink.attributes('href')).toBe(`http://localhost/admin/runners/${id}`);
@@ -288,6 +286,7 @@ describe('AdminRunnersApp', () => {
     it('sets the filters in the search bar', () => {
       expect(findRunnerFilteredSearchBar().props('value')).toEqual({
         runnerType: INSTANCE_TYPE,
+        membership: DEFAULT_MEMBERSHIP,
         filters: [
           { type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } },
           { type: PARAM_KEY_PAUSED, value: { data: 'true', operator: '=' } },
@@ -301,6 +300,7 @@ describe('AdminRunnersApp', () => {
       expect(mockRunnersHandler).toHaveBeenLastCalledWith({
         status: STATUS_ONLINE,
         type: INSTANCE_TYPE,
+        membership: DEFAULT_MEMBERSHIP,
         paused: true,
         sort: DEFAULT_SORT,
         first: RUNNER_PAGE_SIZE,
@@ -310,6 +310,7 @@ describe('AdminRunnersApp', () => {
     it('fetches count results for requested status', () => {
       expect(mockRunnersCountHandler).toHaveBeenCalledWith({
         type: INSTANCE_TYPE,
+        membership: DEFAULT_MEMBERSHIP,
         status: STATUS_ONLINE,
         paused: true,
       });
@@ -322,6 +323,7 @@ describe('AdminRunnersApp', () => {
 
       findRunnerFilteredSearchBar().vm.$emit('input', {
         runnerType: null,
+        membership: DEFAULT_MEMBERSHIP,
         filters: [{ type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } }],
         sort: CREATED_ASC,
       });
@@ -339,6 +341,7 @@ describe('AdminRunnersApp', () => {
     it('requests the runners with filters', () => {
       expect(mockRunnersHandler).toHaveBeenLastCalledWith({
         status: STATUS_ONLINE,
+        membership: DEFAULT_MEMBERSHIP,
         sort: CREATED_ASC,
         first: RUNNER_PAGE_SIZE,
       });
@@ -347,6 +350,7 @@ describe('AdminRunnersApp', () => {
     it('fetches count results for requested status', () => {
       expect(mockRunnersCountHandler).toHaveBeenCalledWith({
         status: STATUS_ONLINE,
+        membership: DEFAULT_MEMBERSHIP,
       });
     });
   });
@@ -357,65 +361,26 @@ describe('AdminRunnersApp', () => {
     expect(findRunnerPagination().attributes('disabled')).toBe('true');
   });
 
-  describe('when bulk delete is enabled', () => {
+  describe('Bulk delete', () => {
     describe('Before runners are deleted', () => {
       beforeEach(async () => {
-        await createComponent({
-          mountFn: mountExtended,
-          provide: {
-            glFeatures: { adminRunnersBulkDelete: true },
-          },
-        });
-      });
-
-      it('runner bulk delete is available', () => {
-        expect(findRunnerBulkDelete().props('runners')).toEqual(mockRunners);
-      });
-
-      it('runner bulk delete checkbox is available', () => {
-        expect(findRunnerBulkDeleteCheckbox().props('runners')).toEqual(mockRunners);
+        await createComponent({ mountFn: mountExtended });
       });
 
       it('runner list is checkable', () => {
         expect(findRunnerList().props('checkable')).toBe(true);
       });
-
-      it('responds to checked items by updating the local cache', () => {
-        const setRunnerCheckedMock = jest
-          .spyOn(localMutations, 'setRunnerChecked')
-          .mockImplementation(() => {});
-
-        const runner = mockRunners[0];
-
-        expect(setRunnerCheckedMock).toHaveBeenCalledTimes(0);
-
-        findRunnerList().vm.$emit('checked', {
-          runner,
-          isChecked: true,
-        });
-
-        expect(setRunnerCheckedMock).toHaveBeenCalledTimes(1);
-        expect(setRunnerCheckedMock).toHaveBeenCalledWith({
-          runner,
-          isChecked: true,
-        });
-      });
     });
 
     describe('When runners are deleted', () => {
       beforeEach(async () => {
-        await createComponent({
-          mountFn: mountExtended,
-          provide: {
-            glFeatures: { adminRunnersBulkDelete: true },
-          },
-        });
+        await createComponent({ mountFn: mountExtended });
       });
 
       it('count data is refetched', async () => {
         expect(mockRunnersCountHandler).toHaveBeenCalledTimes(COUNT_QUERIES);
 
-        findRunnerBulkDelete().vm.$emit('deleted', { message: 'Runners deleted' });
+        findRunnerList().vm.$emit('deleted', { message: 'Runners deleted' });
 
         expect(mockRunnersCountHandler).toHaveBeenCalledTimes(COUNT_QUERIES * 2);
       });
@@ -423,7 +388,7 @@ describe('AdminRunnersApp', () => {
       it('toast is shown', async () => {
         expect(showToast).toHaveBeenCalledTimes(0);
 
-        findRunnerBulkDelete().vm.$emit('deleted', { message: 'Runners deleted' });
+        findRunnerList().vm.$emit('deleted', { message: 'Runners deleted' });
 
         expect(showToast).toHaveBeenCalledTimes(1);
         expect(showToast).toHaveBeenCalledWith('Runners deleted');
@@ -457,6 +422,7 @@ describe('AdminRunnersApp', () => {
       beforeEach(async () => {
         findRunnerFilteredSearchBar().vm.$emit('input', {
           runnerType: null,
+          membership: DEFAULT_MEMBERSHIP,
           filters: [{ type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } }],
           sort: CREATED_ASC,
         });
@@ -504,6 +470,7 @@ describe('AdminRunnersApp', () => {
       await findRunnerPaginationNext().trigger('click');
 
       expect(mockRunnersHandler).toHaveBeenLastCalledWith({
+        membership: DEFAULT_MEMBERSHIP,
         sort: CREATED_DESC,
         first: RUNNER_PAGE_SIZE,
         after: pageInfo.endCursor,
diff --git a/spec/frontend/runner/components/cells/link_cell_spec.js b/spec/frontend/runner/components/cells/link_cell_spec.js
index a59a0eaa5d8..46ab1adb6b6 100644
--- a/spec/frontend/runner/components/cells/link_cell_spec.js
+++ b/spec/frontend/runner/components/cells/link_cell_spec.js
@@ -5,7 +5,7 @@ import LinkCell from '~/runner/components/cells/link_cell.vue';
 describe('LinkCell', () => {
   let wrapper;
 
-  const findGlLink = () => wrapper.find(GlLink);
+  const findGlLink = () => wrapper.findComponent(GlLink);
   const findSpan = () => wrapper.find('span');
 
   const createComponent = ({ props = {}, ...options } = {}) => {
diff --git a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
index ffd6f126627..58974d4f85f 100644
--- a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
@@ -122,7 +122,7 @@ describe('RunnerActionsCell', () => {
       expect(wrapper.emitted('deleted')).toEqual([[value]]);
     });
 
-    it('Renders the runner delete disabled button when user cannot delete', () => {
+    it('Does not render the runner delete button when user cannot delete', () => {
       createComponent({
         runner: {
           userPermissions: {
@@ -132,7 +132,7 @@ describe('RunnerActionsCell', () => {
         },
       });
 
-      expect(findDeleteBtn().props('disabled')).toBe(true);
+      expect(findDeleteBtn().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/runner/components/cells/runner_owner_cell_spec.js b/spec/frontend/runner/components/cells/runner_owner_cell_spec.js
new file mode 100644
index 00000000000..e9965d8855d
--- /dev/null
+++ b/spec/frontend/runner/components/cells/runner_owner_cell_spec.js
@@ -0,0 +1,111 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+import RunnerOwnerCell from '~/runner/components/cells/runner_owner_cell.vue';
+
+import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
+
+describe('RunnerOwnerCell', () => {
+  let wrapper;
+
+  const findLink = () => wrapper.findComponent(GlLink);
+  const getLinkTooltip = () => getBinding(findLink().element, 'gl-tooltip').value;
+
+  const createComponent = ({ runner } = {}) => {
+    wrapper = shallowMount(RunnerOwnerCell, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      propsData: {
+        runner,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('When its an instance runner', () => {
+    beforeEach(() => {
+      createComponent({
+        runner: {
+          runnerType: INSTANCE_TYPE,
+        },
+      });
+    });
+
+    it('shows an administrator label', () => {
+      expect(findLink().exists()).toBe(false);
+      expect(wrapper.text()).toBe(s__('Runners|Administrator'));
+    });
+  });
+
+  describe('When its a group runner', () => {
+    const mockName = 'Group 2';
+    const mockFullName = 'Group 1 / Group 2';
+    const mockWebUrl = '/group-1/group-2';
+
+    beforeEach(() => {
+      createComponent({
+        runner: {
+          runnerType: GROUP_TYPE,
+          groups: {
+            nodes: [
+              {
+                name: mockName,
+                fullName: mockFullName,
+                webUrl: mockWebUrl,
+              },
+            ],
+          },
+        },
+      });
+    });
+
+    it('Displays a group link', () => {
+      expect(findLink().attributes('href')).toBe(mockWebUrl);
+      expect(wrapper.text()).toBe(mockName);
+      expect(getLinkTooltip()).toBe(mockFullName);
+    });
+  });
+
+  describe('When its a project runner', () => {
+    const mockName = 'Project 1';
+    const mockNameWithNamespace = 'Group 1 / Project 1';
+    const mockWebUrl = '/group-1/project-1';
+
+    beforeEach(() => {
+      createComponent({
+        runner: {
+          runnerType: PROJECT_TYPE,
+          ownerProject: {
+            name: mockName,
+            nameWithNamespace: mockNameWithNamespace,
+            webUrl: mockWebUrl,
+          },
+        },
+      });
+    });
+
+    it('Displays a project link', () => {
+      expect(findLink().attributes('href')).toBe(mockWebUrl);
+      expect(wrapper.text()).toBe(mockName);
+      expect(getLinkTooltip()).toBe(mockNameWithNamespace);
+    });
+  });
+
+  describe('When its an empty runner', () => {
+    beforeEach(() => {
+      createComponent({
+        runner: {},
+      });
+    });
+
+    it('shows no label', () => {
+      expect(wrapper.text()).toBe('');
+    });
+  });
+});
diff --git a/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js b/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js
index 21ec9f61f37..e7cadefc140 100644
--- a/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js
@@ -85,7 +85,7 @@ describe('RunnerTypeCell', () => {
       contactedAt: '2022-01-02',
     });
 
-    expect(findRunnerSummaryField('clock').find(TimeAgo).props('time')).toBe('2022-01-02');
+    expect(findRunnerSummaryField('clock').findComponent(TimeAgo).props('time')).toBe('2022-01-02');
   });
 
   it('Displays empty last contact', () => {
@@ -93,7 +93,7 @@ describe('RunnerTypeCell', () => {
       contactedAt: null,
     });
 
-    expect(findRunnerSummaryField('clock').find(TimeAgo).exists()).toBe(false);
+    expect(findRunnerSummaryField('clock').findComponent(TimeAgo).exists()).toBe(false);
     expect(findRunnerSummaryField('clock').text()).toContain(__('Never'));
   });
 
@@ -134,7 +134,7 @@ describe('RunnerTypeCell', () => {
   });
 
   it('Displays created at', () => {
-    expect(findRunnerSummaryField('calendar').find(TimeAgo).props('time')).toBe(
+    expect(findRunnerSummaryField('calendar').findComponent(TimeAgo).props('time')).toBe(
       mockRunner.createdAt,
     );
   });
diff --git a/spec/frontend/runner/components/runner_bulk_delete_checkbox_spec.js b/spec/frontend/runner/components/runner_bulk_delete_checkbox_spec.js
index 0ac89e82314..424a4e61ccd 100644
--- a/spec/frontend/runner/components/runner_bulk_delete_checkbox_spec.js
+++ b/spec/frontend/runner/components/runner_bulk_delete_checkbox_spec.js
@@ -5,11 +5,21 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RunnerBulkDeleteCheckbox from '~/runner/components/runner_bulk_delete_checkbox.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createLocalState } from '~/runner/graphql/list/local_state';
-import { allRunnersData } from '../mock_data';
 
 Vue.use(VueApollo);
 
-jest.mock('~/flash');
+const makeRunner = (id, deleteRunner = true) => ({
+  id,
+  userPermissions: { deleteRunner },
+});
+
+// Multi-select checkbox possible states:
+const stateToAttrs = {
+  unchecked: { disabled: undefined, checked: undefined, indeterminate: undefined },
+  checked: { disabled: undefined, checked: 'true', indeterminate: undefined },
+  indeterminate: { disabled: undefined, checked: undefined, indeterminate: 'true' },
+  disabled: { disabled: 'true', checked: undefined, indeterminate: undefined },
+};
 
 describe('RunnerBulkDeleteCheckbox', () => {
   let wrapper;
@@ -18,12 +28,14 @@ describe('RunnerBulkDeleteCheckbox', () => {
 
   const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
-  const mockRunners = allRunnersData.data.runners.nodes;
-  const mockIds = allRunnersData.data.runners.nodes.map(({ id }) => id);
-  const mockId = mockIds[0];
-  const mockIdAnotherPage = 'RUNNER_IN_ANOTHER_PAGE_ID';
+  const expectCheckboxToBe = (state) => {
+    const expected = stateToAttrs[state];
+    expect(findCheckbox().attributes('disabled')).toBe(expected.disabled);
+    expect(findCheckbox().attributes('checked')).toBe(expected.checked);
+    expect(findCheckbox().attributes('indeterminate')).toBe(expected.indeterminate);
+  };
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ runners = [] } = {}) => {
     const { cacheConfig, localMutations } = mockState;
     const apolloProvider = createMockApollo(undefined, undefined, cacheConfig);
 
@@ -33,8 +45,7 @@ describe('RunnerBulkDeleteCheckbox', () => {
         localMutations,
       },
       propsData: {
-        runners: mockRunners,
-        ...props,
+        runners,
       },
     });
   };
@@ -49,31 +60,61 @@ describe('RunnerBulkDeleteCheckbox', () => {
     jest.spyOn(mockState.localMutations, 'setRunnersChecked');
   });
 
-  describe.each`
-    case                         | is                 | checkedRunnerIds                   | disabled     | checked      | indeterminate
-    ${'no runners'}              | ${'unchecked'}     | ${[]}                              | ${undefined} | ${undefined} | ${undefined}
-    ${'no runners in this page'} | ${'unchecked'}     | ${[mockIdAnotherPage]}             | ${undefined} | ${undefined} | ${undefined}
-    ${'all runners'}             | ${'checked'}       | ${mockIds}                         | ${undefined} | ${'true'}    | ${undefined}
-    ${'some runners'}            | ${'indeterminate'} | ${[mockId]}                        | ${undefined} | ${undefined} | ${'true'}
-    ${'all plus other runners'}  | ${'checked'}       | ${[...mockIds, mockIdAnotherPage]} | ${undefined} | ${'true'}    | ${undefined}
-  `('When $case are checked', ({ is, checkedRunnerIds, disabled, checked, indeterminate }) => {
-    beforeEach(async () => {
+  describe('when all runners can be deleted', () => {
+    const mockIds = ['1', '2', '3'];
+    const mockIdAnotherPage = '4';
+    const mockRunners = mockIds.map((id) => makeRunner(id));
+
+    it.each`
+      case                         | checkedRunnerIds                   | state
+      ${'no runners'}              | ${[]}                              | ${'unchecked'}
+      ${'no runners in this page'} | ${[mockIdAnotherPage]}             | ${'unchecked'}
+      ${'all runners'}             | ${mockIds}                         | ${'checked'}
+      ${'some runners'}            | ${[mockIds[0]]}                    | ${'indeterminate'}
+      ${'all plus other runners'}  | ${[...mockIds, mockIdAnotherPage]} | ${'checked'}
+    `('if $case are checked, checkbox is $state', ({ checkedRunnerIds, state }) => {
       mockCheckedRunnerIds = checkedRunnerIds;
 
-      createComponent();
+      createComponent({ runners: mockRunners });
+      expectCheckboxToBe(state);
     });
+  });
+
+  describe('when some runners cannot be deleted', () => {
+    it('all allowed runners are selected, checkbox is checked', () => {
+      mockCheckedRunnerIds = ['a', 'b', 'c'];
+      createComponent({
+        runners: [makeRunner('a'), makeRunner('b'), makeRunner('c', false)],
+      });
 
-    it(`is ${is}`, () => {
-      expect(findCheckbox().attributes('disabled')).toBe(disabled);
-      expect(findCheckbox().attributes('checked')).toBe(checked);
-      expect(findCheckbox().attributes('indeterminate')).toBe(indeterminate);
+      expectCheckboxToBe('checked');
+    });
+
+    it('some allowed runners are selected, checkbox is indeterminate', () => {
+      mockCheckedRunnerIds = ['a', 'b'];
+      createComponent({
+        runners: [makeRunner('a'), makeRunner('b'), makeRunner('c')],
+      });
+
+      expectCheckboxToBe('indeterminate');
+    });
+
+    it('no allowed runners are selected, checkbox is disabled', () => {
+      mockCheckedRunnerIds = ['a', 'b'];
+      createComponent({
+        runners: [makeRunner('a', false), makeRunner('b', false)],
+      });
+
+      expectCheckboxToBe('disabled');
     });
   });
 
   describe('When user selects', () => {
+    const mockRunners = [makeRunner('1'), makeRunner('2')];
+
     beforeEach(() => {
-      mockCheckedRunnerIds = mockIds;
-      createComponent();
+      mockCheckedRunnerIds = ['1', '2'];
+      createComponent({ runners: mockRunners });
     });
 
     it.each([[true], [false]])('sets checked to %s', (checked) => {
@@ -89,13 +130,11 @@ describe('RunnerBulkDeleteCheckbox', () => {
 
   describe('When runners are loading', () => {
     beforeEach(() => {
-      createComponent({ props: { runners: [] } });
+      createComponent();
     });
 
-    it(`is disabled`, () => {
-      expect(findCheckbox().attributes('disabled')).toBe('true');
-      expect(findCheckbox().attributes('checked')).toBe(undefined);
-      expect(findCheckbox().attributes('indeterminate')).toBe(undefined);
+    it('is disabled', () => {
+      expectCheckboxToBe('disabled');
     });
   });
 });
diff --git a/spec/frontend/runner/components/runner_delete_button_spec.js b/spec/frontend/runner/components/runner_delete_button_spec.js
index 52fe803c536..c8fb7a69379 100644
--- a/spec/frontend/runner/components/runner_delete_button_spec.js
+++ b/spec/frontend/runner/components/runner_delete_button_spec.js
@@ -9,11 +9,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { captureException } from '~/runner/sentry_utils';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { createAlert } from '~/flash';
-import {
-  I18N_DELETE_RUNNER,
-  I18N_DELETE_DISABLED_MANY_PROJECTS,
-  I18N_DELETE_DISABLED_UNKNOWN_REASON,
-} from '~/runner/constants';
+import { I18N_DELETE_RUNNER } from '~/runner/constants';
 
 import RunnerDeleteButton from '~/runner/components/runner_delete_button.vue';
 import RunnerDeleteModal from '~/runner/components/runner_delete_modal.vue';
@@ -267,29 +263,4 @@ describe('RunnerDeleteButton', () => {
       });
     });
   });
-
-  describe.each`
-    reason                                     | runner                 | tooltip
-    ${'runner belongs to more than 1 project'} | ${{ projectCount: 2 }} | ${I18N_DELETE_DISABLED_MANY_PROJECTS}
-    ${'unknown reason'}                        | ${{}}                  | ${I18N_DELETE_DISABLED_UNKNOWN_REASON}
-  `('When button is disabled because $reason', ({ runner, tooltip }) => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          disabled: true,
-          runner,
-        },
-      });
-    });
-
-    it('Displays a disabled delete button', () => {
-      expect(findBtn().props('disabled')).toBe(true);
-    });
-
-    it(`Tooltip "${tooltip}" is shown`, () => {
-      // tabindex is required for a11y
-      expect(wrapper.attributes('tabindex')).toBe('0');
-      expect(getTooltip()).toBe(tooltip);
-    });
-  });
 });
diff --git a/spec/frontend/runner/components/runner_details_spec.js b/spec/frontend/runner/components/runner_details_spec.js
index f2281223a25..e6cc936e260 100644
--- a/spec/frontend/runner/components/runner_details_spec.js
+++ b/spec/frontend/runner/components/runner_details_spec.js
@@ -25,12 +25,7 @@ describe('RunnerDetails', () => {
 
   const findDetailGroups = () => wrapper.findComponent(RunnerGroups);
 
-  const createComponent = ({
-    props = {},
-    stubs,
-    mountFn = shallowMountExtended,
-    enforceRunnerTokenExpiresAt = false,
-  } = {}) => {
+  const createComponent = ({ props = {}, stubs, mountFn = shallowMountExtended } = {}) => {
     wrapper = mountFn(RunnerDetails, {
       propsData: {
         ...props,
@@ -39,9 +34,6 @@ describe('RunnerDetails', () => {
         RunnerDetail,
         ...stubs,
       },
-      provide: {
-        glFeatures: { enforceRunnerTokenExpiresAt },
-      },
     });
   };
 
@@ -82,7 +74,6 @@ describe('RunnerDetails', () => {
               ...runner,
             },
           },
-          enforceRunnerTokenExpiresAt: true,
           stubs: {
             GlIntersperse,
             GlSprintf,
@@ -135,22 +126,5 @@ describe('RunnerDetails', () => {
         expect(findDetailGroups().props('runner')).toEqual(mockGroupRunner);
       });
     });
-
-    describe('Token expiration field', () => {
-      it.each`
-        case                                            | flag     | shown
-        ${'is shown when feature flag is enabled'}      | ${true}  | ${true}
-        ${'is not shown when feature flag is disabled'} | ${false} | ${false}
-      `('$case', ({ flag, shown }) => {
-        createComponent({
-          props: {
-            runner: mockGroupRunner,
-          },
-          enforceRunnerTokenExpiresAt: flag,
-        });
-
-        expect(findDd('Token expiry', wrapper).exists()).toBe(shown);
-      });
-    });
   });
 });
diff --git a/spec/frontend/runner/components/runner_filtered_search_bar_spec.js b/spec/frontend/runner/components/runner_filtered_search_bar_spec.js
index e35bec3aa38..c92e19f9263 100644
--- a/spec/frontend/runner/components/runner_filtered_search_bar_spec.js
+++ b/spec/frontend/runner/components/runner_filtered_search_bar_spec.js
@@ -4,10 +4,26 @@ import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_
 import { statusTokenConfig } from '~/runner/components/search_tokens/status_token_config';
 import TagToken from '~/runner/components/search_tokens/tag_token.vue';
 import { tagTokenConfig } from '~/runner/components/search_tokens/tag_token_config';
-import { PARAM_KEY_STATUS, PARAM_KEY_TAG, STATUS_ONLINE, INSTANCE_TYPE } from '~/runner/constants';
+import {
+  PARAM_KEY_STATUS,
+  PARAM_KEY_TAG,
+  STATUS_ONLINE,
+  INSTANCE_TYPE,
+  DEFAULT_MEMBERSHIP,
+  DEFAULT_SORT,
+  CONTACTED_DESC,
+} from '~/runner/constants';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 
+const mockSearch = {
+  runnerType: null,
+  membership: DEFAULT_MEMBERSHIP,
+  filters: [],
+  pagination: { page: 1 },
+  sort: DEFAULT_SORT,
+};
+
 describe('RunnerList', () => {
   let wrapper;
 
@@ -15,8 +31,7 @@ describe('RunnerList', () => {
   const findGlFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
   const findSortOptions = () => wrapper.findAllComponents(GlDropdownItem);
 
-  const mockDefaultSort = 'CREATED_DESC';
-  const mockOtherSort = 'CONTACTED_DESC';
+  const mockOtherSort = CONTACTED_DESC;
   const mockFilters = [
     { type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } },
     { type: 'filtered-search-term', value: { data: '' } },
@@ -32,11 +47,7 @@ describe('RunnerList', () => {
       propsData: {
         namespace: 'runners',
         tokens: [],
-        value: {
-          runnerType: null,
-          filters: [],
-          sort: mockDefaultSort,
-        },
+        value: mockSearch,
         ...props,
       },
       stubs: {
@@ -115,6 +126,7 @@ describe('RunnerList', () => {
         props: {
           value: {
             runnerType: INSTANCE_TYPE,
+            membership: DEFAULT_MEMBERSHIP,
             sort: mockOtherSort,
             filters: mockFilters,
           },
@@ -141,6 +153,7 @@ describe('RunnerList', () => {
 
       expectToHaveLastEmittedInput({
         runnerType: INSTANCE_TYPE,
+        membership: DEFAULT_MEMBERSHIP,
         filters: mockFilters,
         sort: mockOtherSort,
         pagination: {},
@@ -154,8 +167,9 @@ describe('RunnerList', () => {
 
     expectToHaveLastEmittedInput({
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: mockFilters,
-      sort: mockDefaultSort,
+      sort: DEFAULT_SORT,
       pagination: {},
     });
   });
@@ -165,6 +179,7 @@ describe('RunnerList', () => {
 
     expectToHaveLastEmittedInput({
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [],
       sort: mockOtherSort,
       pagination: {},
diff --git a/spec/frontend/runner/components/runner_list_empty_state_spec.js b/spec/frontend/runner/components/runner_list_empty_state_spec.js
index 59cff863106..038162b889e 100644
--- a/spec/frontend/runner/components/runner_list_empty_state_spec.js
+++ b/spec/frontend/runner/components/runner_list_empty_state_spec.js
@@ -8,6 +8,7 @@ import RunnerListEmptyState from '~/runner/components/runner_list_empty_state.vu
 
 const mockSvgPath = 'mock-svg-path.svg';
 const mockFilteredSvgPath = 'mock-filtered-svg-path.svg';
+const mockRegistrationToken = 'REGISTRATION_TOKEN';
 
 describe('RunnerListEmptyState', () => {
   let wrapper;
@@ -21,6 +22,7 @@ describe('RunnerListEmptyState', () => {
       propsData: {
         svgPath: mockSvgPath,
         filteredSvgPath: mockFilteredSvgPath,
+        registrationToken: mockRegistrationToken,
         ...props,
       },
       directives: {
@@ -35,27 +37,52 @@ describe('RunnerListEmptyState', () => {
   };
 
   describe('when search is not filtered', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+    const title = s__('Runners|Get started with runners');
 
-    it('renders an illustration', () => {
-      expect(findEmptyState().props('svgPath')).toBe(mockSvgPath);
-    });
+    describe('when there is a registration token', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders an illustration', () => {
+        expect(findEmptyState().props('svgPath')).toBe(mockSvgPath);
+      });
+
+      it('displays "no results" text with instructions', () => {
+        const desc = s__(
+          'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.',
+        );
 
-    it('displays "no results" text', () => {
-      const title = s__('Runners|Get started with runners');
-      const desc = s__(
-        'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.',
-      );
+        expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
+      });
 
-      expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
+      it('opens a runner registration instructions modal with a link', () => {
+        const { value } = getBinding(findLink().element, 'gl-modal');
+
+        expect(findRunnerInstructionsModal().props('modalId')).toEqual(value);
+      });
     });
 
-    it('opens a runner registration instructions modal with a link', () => {
-      const { value } = getBinding(findLink().element, 'gl-modal');
+    describe('when there is no registration token', () => {
+      beforeEach(() => {
+        createComponent({ props: { registrationToken: null } });
+      });
+
+      it('renders an illustration', () => {
+        expect(findEmptyState().props('svgPath')).toBe(mockSvgPath);
+      });
+
+      it('displays "no results" text', () => {
+        const desc = s__(
+          'Runners|Runners are the agents that run your CI/CD jobs. To register new runners, please contact your administrator.',
+        );
+
+        expect(findEmptyState().text()).toMatchInterpolatedText(`${title} ${desc}`);
+      });
 
-      expect(findRunnerInstructionsModal().props('modalId')).toEqual(value);
+      it('has no registration instructions link', () => {
+        expect(findLink().exists()).toBe(false);
+      });
     });
   });
 
diff --git a/spec/frontend/runner/components/runner_list_spec.js b/spec/frontend/runner/components/runner_list_spec.js
index 54a9e713721..a31990f8f7e 100644
--- a/spec/frontend/runner/components/runner_list_spec.js
+++ b/spec/frontend/runner/components/runner_list_spec.js
@@ -1,12 +1,19 @@
 import { GlTableLite, GlSkeletonLoader } from '@gitlab/ui';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import {
   extendedWrapper,
   shallowMountExtended,
   mountExtended,
 } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { createLocalState } from '~/runner/graphql/list/local_state';
+
 import RunnerList from '~/runner/components/runner_list.vue';
-import RunnerStatusPopover from '~/runner/components/runner_status_popover.vue';
+import RunnerBulkDelete from '~/runner/components/runner_bulk_delete.vue';
+import RunnerBulkDeleteCheckbox from '~/runner/components/runner_bulk_delete_checkbox.vue';
+
 import { I18N_PROJECT_TYPE, I18N_STATUS_NEVER_CONTACTED } from '~/runner/constants';
 import { allRunnersData, onlineContactTimeoutSecs, staleTimeoutSecs } from '../mock_data';
 
@@ -15,6 +22,8 @@ const mockActiveRunnersCount = mockRunners.length;
 
 describe('RunnerList', () => {
   let wrapper;
+  let cacheConfig;
+  let localMutations;
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findTable = () => wrapper.findComponent(GlTableLite);
@@ -22,18 +31,24 @@ describe('RunnerList', () => {
   const findRows = () => wrapper.findAll('[data-testid^="runner-row-"]');
   const findCell = ({ row = 0, fieldKey }) =>
     extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
+  const findRunnerBulkDelete = () => wrapper.findComponent(RunnerBulkDelete);
+  const findRunnerBulkDeleteCheckbox = () => wrapper.findComponent(RunnerBulkDeleteCheckbox);
 
   const createComponent = (
     { props = {}, provide = {}, ...options } = {},
     mountFn = shallowMountExtended,
   ) => {
+    ({ cacheConfig, localMutations } = createLocalState());
+
     wrapper = mountFn(RunnerList, {
+      apolloProvider: createMockApollo([], {}, cacheConfig),
       propsData: {
         runners: mockRunners,
         activeRunnersCount: mockActiveRunnersCount,
         ...props,
       },
       provide: {
+        localMutations,
         onlineContactTimeoutSecs,
         staleTimeoutSecs,
         ...provide,
@@ -50,7 +65,7 @@ describe('RunnerList', () => {
     createComponent(
       {
         stubs: {
-          RunnerStatusPopover: {
+          HelpPopover: {
             template: '<div/>',
           },
         },
@@ -60,11 +75,13 @@ describe('RunnerList', () => {
 
     const headerLabels = findHeaders().wrappers.map((w) => w.text());
 
-    expect(findHeaders().at(0).findComponent(RunnerStatusPopover).exists()).toBe(true);
+    expect(findHeaders().at(0).findComponent(HelpPopover).exists()).toBe(true);
+    expect(findHeaders().at(2).findComponent(HelpPopover).exists()).toBe(true);
 
     expect(headerLabels).toEqual([
-      'Status',
-      'Runner',
+      s__('Runners|Status'),
+      s__('Runners|Runner'),
+      s__('Runners|Owner'),
       '', // actions has no label
     ]);
   });
@@ -123,21 +140,40 @@ describe('RunnerList', () => {
       );
     });
 
+    it('runner bulk delete is available', () => {
+      expect(findRunnerBulkDelete().props('runners')).toEqual(mockRunners);
+    });
+
+    it('runner bulk delete checkbox is available', () => {
+      expect(findRunnerBulkDeleteCheckbox().props('runners')).toEqual(mockRunners);
+    });
+
     it('Displays a checkbox field', () => {
       expect(findCell({ fieldKey: 'checkbox' }).find('input').exists()).toBe(true);
     });
 
-    it('Emits a checked event', async () => {
-      const checkbox = findCell({ fieldKey: 'checkbox' }).find('input');
+    it('Sets a runner as checked', async () => {
+      const runner = mockRunners[0];
+      const setRunnerCheckedMock = jest
+        .spyOn(localMutations, 'setRunnerChecked')
+        .mockImplementation(() => {});
 
+      const checkbox = findCell({ fieldKey: 'checkbox' }).find('input');
       await checkbox.setChecked();
 
-      expect(wrapper.emitted('checked')).toHaveLength(1);
-      expect(wrapper.emitted('checked')[0][0]).toEqual({
+      expect(setRunnerCheckedMock).toHaveBeenCalledTimes(1);
+      expect(setRunnerCheckedMock).toHaveBeenCalledWith({
+        runner,
         isChecked: true,
-        runner: mockRunners[0],
       });
     });
+
+    it('Emits a deleted event', async () => {
+      const event = { message: 'Deleted!' };
+      findRunnerBulkDelete().vm.$emit('deleted', event);
+
+      expect(wrapper.emitted('deleted')).toEqual([[event]]);
+    });
   });
 
   describe('Scoped cell slots', () => {
diff --git a/spec/frontend/runner/components/runner_membership_toggle_spec.js b/spec/frontend/runner/components/runner_membership_toggle_spec.js
new file mode 100644
index 00000000000..1a7ae22618a
--- /dev/null
+++ b/spec/frontend/runner/components/runner_membership_toggle_spec.js
@@ -0,0 +1,57 @@
+import { GlToggle } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
+import RunnerMembershipToggle from '~/runner/components/runner_membership_toggle.vue';
+import {
+  I18N_SHOW_ONLY_INHERITED,
+  MEMBERSHIP_DESCENDANTS,
+  MEMBERSHIP_ALL_AVAILABLE,
+} from '~/runner/constants';
+
+describe('RunnerMembershipToggle', () => {
+  let wrapper;
+
+  const findToggle = () => wrapper.findComponent(GlToggle);
+
+  const createComponent = ({ props = {}, mountFn = shallowMount } = {}) => {
+    wrapper = mountFn(RunnerMembershipToggle, {
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Displays text', () => {
+    createComponent({ mountFn: mount });
+
+    expect(wrapper.text()).toBe(I18N_SHOW_ONLY_INHERITED);
+  });
+
+  it.each`
+    membershipValue             | toggleValue
+    ${MEMBERSHIP_DESCENDANTS}   | ${true}
+    ${MEMBERSHIP_ALL_AVAILABLE} | ${false}
+  `(
+    'Displays a membership of $membershipValue as enabled=$toggleValue',
+    ({ membershipValue, toggleValue }) => {
+      createComponent({ props: { value: membershipValue } });
+
+      expect(findToggle().props('value')).toBe(toggleValue);
+    },
+  );
+
+  it.each`
+    changeEvt | membershipValue
+    ${true}   | ${MEMBERSHIP_DESCENDANTS}
+    ${false}  | ${MEMBERSHIP_ALL_AVAILABLE}
+  `(
+    'Emits $changeEvt when value is changed to $membershipValue',
+    ({ changeEvt, membershipValue }) => {
+      createComponent();
+      findToggle().vm.$emit('change', changeEvt);
+
+      expect(wrapper.emitted('input')).toStrictEqual([[membershipValue]]);
+    },
+  );
+});
diff --git a/spec/frontend/runner/components/runner_stacked_layout_banner_spec.js b/spec/frontend/runner/components/runner_stacked_layout_banner_spec.js
index 1a8aced9292..d1f04f0ee37 100644
--- a/spec/frontend/runner/components/runner_stacked_layout_banner_spec.js
+++ b/spec/frontend/runner/components/runner_stacked_layout_banner_spec.js
@@ -29,6 +29,8 @@ describe('RunnerStackedLayoutBanner', () => {
   });
 
   it('Does not display a banner when dismissed', async () => {
+    createComponent();
+
     findLocalStorageSync().vm.$emit('input', true);
 
     await nextTick();
diff --git a/spec/frontend/runner/components/runner_type_tabs_spec.js b/spec/frontend/runner/components/runner_type_tabs_spec.js
index 45ab8684332..dde35533bc3 100644
--- a/spec/frontend/runner/components/runner_type_tabs_spec.js
+++ b/spec/frontend/runner/components/runner_type_tabs_spec.js
@@ -2,9 +2,21 @@ import { GlTab } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
 import RunnerCount from '~/runner/components/stat/runner_count.vue';
-import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
-
-const mockSearch = { runnerType: null, filters: [], pagination: { page: 1 }, sort: 'CREATED_DESC' };
+import {
+  INSTANCE_TYPE,
+  GROUP_TYPE,
+  PROJECT_TYPE,
+  DEFAULT_MEMBERSHIP,
+  DEFAULT_SORT,
+} from '~/runner/constants';
+
+const mockSearch = {
+  runnerType: null,
+  membership: DEFAULT_MEMBERSHIP,
+  filters: [],
+  pagination: { page: 1 },
+  sort: DEFAULT_SORT,
+};
 
 const mockCount = (type, multiplier = 1) => {
   let count;
@@ -113,7 +125,7 @@ describe('RunnerTypeTabs', () => {
     });
 
     findTabs().wrappers.forEach((tab) => {
-      expect(tab.find(RunnerCount).props()).toEqual({
+      expect(tab.findComponent(RunnerCount).props()).toEqual({
         scope: INSTANCE_TYPE,
         skip: false,
         variables: expect.objectContaining(mockVariables),
diff --git a/spec/frontend/runner/components/runner_update_form_spec.js b/spec/frontend/runner/components/runner_update_form_spec.js
index 7b67a89f989..e12736216a0 100644
--- a/spec/frontend/runner/components/runner_update_form_spec.js
+++ b/spec/frontend/runner/components/runner_update_form_spec.js
@@ -145,7 +145,7 @@ describe('RunnerUpdateForm', () => {
     });
 
     it('Form skeleton is shown', () => {
-      expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
+      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
       expect(findFields()).toHaveLength(0);
     });
 
diff --git a/spec/frontend/runner/components/search_tokens/tag_token_spec.js b/spec/frontend/runner/components/search_tokens/tag_token_spec.js
index 22f0561ca5f..a7363eb11cd 100644
--- a/spec/frontend/runner/components/search_tokens/tag_token_spec.js
+++ b/spec/frontend/runner/components/search_tokens/tag_token_spec.js
@@ -77,7 +77,7 @@ describe('TagToken', () => {
   const findToken = () => wrapper.findComponent(GlToken);
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  beforeEach(async () => {
+  beforeEach(() => {
     mock = new MockAdapter(axios);
 
     mock.onGet(TAG_SUGGESTIONS_PATH, { params: { search: '' } }).reply(200, mockTags);
@@ -86,9 +86,6 @@ describe('TagToken', () => {
       .reply(200, mockTagsFiltered);
 
     getRecentlyUsedSuggestions.mockReturnValue([]);
-
-    createComponent();
-    await waitForPromises();
   });
 
   afterEach(() => {
@@ -97,11 +94,17 @@ describe('TagToken', () => {
   });
 
   describe('when the tags token is displayed', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('requests tags suggestions', () => {
       expect(mock.history.get[0].params).toEqual({ search: '' });
     });
 
-    it('displays tags suggestions', () => {
+    it('displays tags suggestions', async () => {
+      await waitForPromises();
+
       mockTags.forEach(({ name }, i) => {
         expect(findGlFilteredSearchSuggestions().at(i).text()).toBe(name);
       });
@@ -132,13 +135,13 @@ describe('TagToken', () => {
   });
 
   describe('when the users filters suggestions', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
+      createComponent();
+
       findGlFilteredSearchToken().vm.$emit('input', { data: mockSearchTerm });
     });
 
-    it('requests filtered tags suggestions', async () => {
-      await waitForPromises();
-
+    it('requests filtered tags suggestions', () => {
       expect(mock.history.get[1].params).toEqual({ search: mockSearchTerm });
     });
 
@@ -166,7 +169,7 @@ describe('TagToken', () => {
       await waitForPromises();
     });
 
-    it('error is shown', async () => {
+    it('error is shown', () => {
       expect(createAlert).toHaveBeenCalledTimes(1);
       expect(createAlert).toHaveBeenCalledWith({ message: expect.any(String) });
     });
@@ -180,8 +183,26 @@ describe('TagToken', () => {
       await waitForPromises();
     });
 
-    it('selected tag is displayed', async () => {
+    it('selected tag is displayed', () => {
       expect(findToken().exists()).toBe(true);
     });
   });
+
+  describe('when suggestions are disabled', () => {
+    beforeEach(async () => {
+      createComponent({
+        config: {
+          ...mockTagTokenConfig,
+          suggestionsDisabled: true,
+        },
+      });
+
+      await waitForPromises();
+    });
+
+    it('displays no suggestions', () => {
+      expect(findGlFilteredSearchSuggestions()).toHaveLength(0);
+      expect(mock.history.get).toHaveLength(0);
+    });
+  });
 });
diff --git a/spec/frontend/runner/graphql/local_state_spec.js b/spec/frontend/runner/graphql/local_state_spec.js
index ae874fef00d..915170b53f9 100644
--- a/spec/frontend/runner/graphql/local_state_spec.js
+++ b/spec/frontend/runner/graphql/local_state_spec.js
@@ -4,6 +4,13 @@ import { createLocalState } from '~/runner/graphql/list/local_state';
 import getCheckedRunnerIdsQuery from '~/runner/graphql/list/checked_runner_ids.query.graphql';
 import { RUNNER_TYPENAME } from '~/runner/constants';
 
+const makeRunner = (id, deleteRunner = true) => ({
+  id,
+  userPermissions: {
+    deleteRunner,
+  },
+});
+
 describe('~/runner/graphql/list/local_state', () => {
   let localState;
   let apolloClient;
@@ -57,16 +64,21 @@ describe('~/runner/graphql/list/local_state', () => {
     });
 
     it('returns checked runners that have a reference in the cache', () => {
-      addMockRunnerToCache('a');
-      localState.localMutations.setRunnerChecked({ runner: { id: 'a' }, isChecked: true });
+      const id = 'a';
+
+      addMockRunnerToCache(id);
+      localState.localMutations.setRunnerChecked({
+        runner: makeRunner(id),
+        isChecked: true,
+      });
 
       expect(queryCheckedRunnerIds()).toEqual(['a']);
     });
 
     it('return checked runners that are not dangling references', () => {
       addMockRunnerToCache('a'); // 'b' is missing from the cache, perhaps because it was deleted
-      localState.localMutations.setRunnerChecked({ runner: { id: 'a' }, isChecked: true });
-      localState.localMutations.setRunnerChecked({ runner: { id: 'b' }, isChecked: true });
+      localState.localMutations.setRunnerChecked({ runner: makeRunner('a'), isChecked: true });
+      localState.localMutations.setRunnerChecked({ runner: makeRunner('b'), isChecked: true });
 
       expect(queryCheckedRunnerIds()).toEqual(['a']);
     });
@@ -81,7 +93,7 @@ describe('~/runner/graphql/list/local_state', () => {
     beforeEach(() => {
       inputs.forEach(([id, isChecked]) => {
         addMockRunnerToCache(id);
-        localState.localMutations.setRunnerChecked({ runner: { id }, isChecked });
+        localState.localMutations.setRunnerChecked({ runner: makeRunner(id), isChecked });
       });
     });
     it(`for inputs="${inputs}" has a ids="[${expected}]"`, () => {
@@ -102,7 +114,7 @@ describe('~/runner/graphql/list/local_state', () => {
         ids.forEach(addMockRunnerToCache);
 
         localState.localMutations.setRunnersChecked({
-          runners: ids.map((id) => ({ id })),
+          runners: ids.map((id) => makeRunner(id)),
           isChecked,
         });
       });
@@ -117,7 +129,7 @@ describe('~/runner/graphql/list/local_state', () => {
     it('clears all checked items', () => {
       ['a', 'b', 'c'].forEach((id) => {
         addMockRunnerToCache(id);
-        localState.localMutations.setRunnerChecked({ runner: { id }, isChecked: true });
+        localState.localMutations.setRunnerChecked({ runner: makeRunner(id), isChecked: true });
       });
 
       expect(queryCheckedRunnerIds()).toEqual(['a', 'b', 'c']);
@@ -127,4 +139,29 @@ describe('~/runner/graphql/list/local_state', () => {
       expect(queryCheckedRunnerIds()).toEqual([]);
     });
   });
+
+  describe('when some runners cannot be deleted', () => {
+    beforeEach(() => {
+      addMockRunnerToCache('a');
+      addMockRunnerToCache('b');
+    });
+
+    it('setRunnerChecked does not check runner that cannot be deleted', () => {
+      localState.localMutations.setRunnerChecked({
+        runner: makeRunner('a', false),
+        isChecked: true,
+      });
+
+      expect(queryCheckedRunnerIds()).toEqual([]);
+    });
+
+    it('setRunnersChecked does not check runner that cannot be deleted', () => {
+      localState.localMutations.setRunnersChecked({
+        runners: [makeRunner('a', false), makeRunner('b', false)],
+        isChecked: true,
+      });
+
+      expect(queryCheckedRunnerIds()).toEqual([]);
+    });
+  });
 });
diff --git a/spec/frontend/runner/group_runner_show/group_runner_show_app_spec.js b/spec/frontend/runner/group_runner_show/group_runner_show_app_spec.js
index cee1d436942..a3b67674c94 100644
--- a/spec/frontend/runner/group_runner_show/group_runner_show_app_spec.js
+++ b/spec/frontend/runner/group_runner_show/group_runner_show_app_spec.js
@@ -101,6 +101,11 @@ describe('GroupRunnerShowApp', () => {
                         Platform darwin
                         Configuration Runs untagged jobs
                         Maximum job timeout None
+                        Token expiry
+                        Runner authentication token expiration
+                        Runner authentication tokens will expire based on a set interval.
+                        They will automatically rotate once expired. Learn more
+                        Never expires
                         Tags None`.replace(/\s+/g, ' ');
 
       expect(wrapper.text().replace(/\s+/g, ' ')).toContain(expected);
diff --git a/spec/frontend/runner/group_runners/group_runners_app_spec.js b/spec/frontend/runner/group_runners/group_runners_app_spec.js
index a17502c7eec..7482926e151 100644
--- a/spec/frontend/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/runner/group_runners/group_runners_app_spec.js
@@ -14,6 +14,7 @@ import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { upgradeStatusTokenConfig } from 'ee_else_ce/runner/components/search_tokens/upgrade_status_token_config';
+import { createLocalState } from '~/runner/graphql/list/local_state';
 
 import RunnerStackedLayoutBanner from '~/runner/components/runner_stacked_layout_banner.vue';
 import RunnerTypeTabs from '~/runner/components/runner_type_tabs.vue';
@@ -24,6 +25,7 @@ import RunnerStats from '~/runner/components/stat/runner_stats.vue';
 import RunnerActionsCell from '~/runner/components/cells/runner_actions_cell.vue';
 import RegistrationDropdown from '~/runner/components/registration/registration_dropdown.vue';
 import RunnerPagination from '~/runner/components/runner_pagination.vue';
+import RunnerMembershipToggle from '~/runner/components/runner_membership_toggle.vue';
 
 import {
   CREATED_ASC,
@@ -36,9 +38,12 @@ import {
   GROUP_TYPE,
   PARAM_KEY_PAUSED,
   PARAM_KEY_STATUS,
+  PARAM_KEY_TAG,
   STATUS_ONLINE,
   STATUS_OFFLINE,
   STATUS_STALE,
+  MEMBERSHIP_ALL_AVAILABLE,
+  MEMBERSHIP_DESCENDANTS,
   RUNNER_PAGE_SIZE,
   I18N_EDIT,
 } from '~/runner/constants';
@@ -89,15 +94,23 @@ describe('GroupRunnersApp', () => {
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
   const findRunnerPaginationNext = () => findRunnerPagination().findByText(s__('Pagination|Next'));
   const findRunnerFilteredSearchBar = () => wrapper.findComponent(RunnerFilteredSearchBar);
+  const findRunnerMembershipToggle = () => wrapper.findComponent(RunnerMembershipToggle);
+
+  const createComponent = ({
+    props = {},
+    provide = {},
+    mountFn = shallowMountExtended,
+    ...options
+  } = {}) => {
+    const { cacheConfig, localMutations } = createLocalState();
 
-  const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => {
     const handlers = [
       [groupRunnersQuery, mockGroupRunnersHandler],
       [groupRunnersCountQuery, mockGroupRunnersCountHandler],
     ];
 
     wrapper = mountFn(GroupRunnersApp, {
-      apolloProvider: createMockApollo(handlers),
+      apolloProvider: createMockApollo(handlers, {}, cacheConfig),
       propsData: {
         registrationToken: mockRegistrationToken,
         groupFullPath: mockGroupFullPath,
@@ -105,10 +118,12 @@ describe('GroupRunnersApp', () => {
         ...props,
       },
       provide: {
+        localMutations,
         onlineContactTimeoutSecs,
         staleTimeoutSecs,
         emptyStateSvgPath,
         emptyStateFilteredSvgPath,
+        ...provide,
       },
       ...options,
     });
@@ -147,19 +162,50 @@ describe('GroupRunnersApp', () => {
     expect(findRegistrationDropdown().props('type')).toBe(GROUP_TYPE);
   });
 
+  describe('show all available runners toggle', () => {
+    it('shows the membership toggle', () => {
+      createComponent();
+      expect(findRunnerMembershipToggle().exists()).toBe(true);
+    });
+
+    it('sets the membership toggle', () => {
+      setWindowLocation(`?membership[]=${MEMBERSHIP_ALL_AVAILABLE}`);
+
+      createComponent();
+
+      expect(findRunnerMembershipToggle().props('value')).toBe(MEMBERSHIP_ALL_AVAILABLE);
+    });
+
+    it('requests filter', async () => {
+      createComponent();
+      findRunnerMembershipToggle().vm.$emit('input', MEMBERSHIP_ALL_AVAILABLE);
+
+      await waitForPromises();
+
+      expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          membership: MEMBERSHIP_ALL_AVAILABLE,
+        }),
+      );
+    });
+  });
+
   it('shows total runner counts', async () => {
     await createComponent({ mountFn: mountExtended });
 
     expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
       status: STATUS_ONLINE,
+      membership: MEMBERSHIP_DESCENDANTS,
       groupFullPath: mockGroupFullPath,
     });
     expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
       status: STATUS_OFFLINE,
+      membership: MEMBERSHIP_DESCENDANTS,
       groupFullPath: mockGroupFullPath,
     });
     expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
       status: STATUS_STALE,
+      membership: MEMBERSHIP_DESCENDANTS,
       groupFullPath: mockGroupFullPath,
     });
 
@@ -183,6 +229,7 @@ describe('GroupRunnersApp', () => {
       groupFullPath: mockGroupFullPath,
       status: undefined,
       type: undefined,
+      membership: MEMBERSHIP_DESCENDANTS,
       sort: DEFAULT_SORT,
       first: RUNNER_PAGE_SIZE,
     });
@@ -202,6 +249,10 @@ describe('GroupRunnersApp', () => {
         type: PARAM_KEY_STATUS,
         options: expect.any(Array),
       }),
+      expect.objectContaining({
+        type: PARAM_KEY_TAG,
+        suggestionsDisabled: true,
+      }),
       upgradeStatusTokenConfig,
     ]);
   });
@@ -213,7 +264,7 @@ describe('GroupRunnersApp', () => {
     const { id: graphqlId, shortSha } = node;
     const id = getIdFromGraphQLId(graphqlId);
     const COUNT_QUERIES = 6; // Smart queries that display a filtered count of runners
-    const FILTERED_COUNT_QUERIES = 3; // Smart queries that display a count of runners in tabs
+    const FILTERED_COUNT_QUERIES = 6; // Smart queries that display a count of runners in tabs and single stats
 
     beforeEach(async () => {
       await createComponent({ mountFn: mountExtended });
@@ -266,6 +317,7 @@ describe('GroupRunnersApp', () => {
     it('sets the filters in the search bar', () => {
       expect(findRunnerFilteredSearchBar().props('value')).toEqual({
         runnerType: INSTANCE_TYPE,
+        membership: MEMBERSHIP_DESCENDANTS,
         filters: [{ type: 'status', value: { data: STATUS_ONLINE, operator: '=' } }],
         sort: 'CREATED_DESC',
         pagination: {},
@@ -277,6 +329,7 @@ describe('GroupRunnersApp', () => {
         groupFullPath: mockGroupFullPath,
         status: STATUS_ONLINE,
         type: INSTANCE_TYPE,
+        membership: MEMBERSHIP_DESCENDANTS,
         sort: DEFAULT_SORT,
         first: RUNNER_PAGE_SIZE,
       });
@@ -286,6 +339,7 @@ describe('GroupRunnersApp', () => {
       expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
         groupFullPath: mockGroupFullPath,
         type: INSTANCE_TYPE,
+        membership: MEMBERSHIP_DESCENDANTS,
         status: STATUS_ONLINE,
       });
     });
@@ -297,6 +351,7 @@ describe('GroupRunnersApp', () => {
 
       findRunnerFilteredSearchBar().vm.$emit('input', {
         runnerType: null,
+        membership: MEMBERSHIP_DESCENDANTS,
         filters: [{ type: PARAM_KEY_STATUS, value: { data: STATUS_ONLINE, operator: '=' } }],
         sort: CREATED_ASC,
       });
@@ -315,6 +370,7 @@ describe('GroupRunnersApp', () => {
       expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
         groupFullPath: mockGroupFullPath,
         status: STATUS_ONLINE,
+        membership: MEMBERSHIP_DESCENDANTS,
         sort: CREATED_ASC,
         first: RUNNER_PAGE_SIZE,
       });
@@ -324,6 +380,7 @@ describe('GroupRunnersApp', () => {
       expect(mockGroupRunnersCountHandler).toHaveBeenCalledWith({
         groupFullPath: mockGroupFullPath,
         status: STATUS_ONLINE,
+        membership: MEMBERSHIP_DESCENDANTS,
       });
     });
   });
@@ -334,6 +391,11 @@ describe('GroupRunnersApp', () => {
     expect(findRunnerPagination().attributes('disabled')).toBe('true');
   });
 
+  it('runners cannot be deleted in bulk', () => {
+    createComponent();
+    expect(findRunnerList().props('checkable')).toBe(false);
+  });
+
   describe('when no runners are found', () => {
     beforeEach(async () => {
       mockGroupRunnersHandler.mockResolvedValue({
@@ -395,6 +457,7 @@ describe('GroupRunnersApp', () => {
 
       expect(mockGroupRunnersHandler).toHaveBeenLastCalledWith({
         groupFullPath: mockGroupFullPath,
+        membership: MEMBERSHIP_DESCENDANTS,
         sort: CREATED_DESC,
         first: RUNNER_PAGE_SIZE,
         after: pageInfo.endCursor,
diff --git a/spec/frontend/runner/mock_data.js b/spec/frontend/runner/mock_data.js
index 555ec40184f..da0c0433b3e 100644
--- a/spec/frontend/runner/mock_data.js
+++ b/spec/frontend/runner/mock_data.js
@@ -17,7 +17,7 @@ import groupRunnersData from 'test_fixtures/graphql/runner/list/group_runners.qu
 import groupRunnersDataPaginated from 'test_fixtures/graphql/runner/list/group_runners.query.graphql.paginated.json';
 import groupRunnersCountData from 'test_fixtures/graphql/runner/list/group_runners_count.query.graphql.json';
 
-import { RUNNER_PAGE_SIZE } from '~/runner/constants';
+import { DEFAULT_MEMBERSHIP, RUNNER_PAGE_SIZE } from '~/runner/constants';
 
 const emptyPageInfo = {
   __typename: 'PageInfo',
@@ -34,8 +34,18 @@ export const mockSearchExamples = [
   {
     name: 'a default query',
     urlQuery: '',
-    search: { runnerType: null, filters: [], pagination: {}, sort: 'CREATED_DESC' },
-    graphqlVariables: { sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    search: {
+      runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
+      filters: [],
+      pagination: {},
+      sort: 'CREATED_DESC',
+    },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
     isDefault: true,
   },
   {
@@ -43,17 +53,24 @@ export const mockSearchExamples = [
     urlQuery: '?status[]=ACTIVE',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { status: 'ACTIVE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      status: 'ACTIVE',
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'a single term text search',
     urlQuery: '?search=something',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [
         {
           type: 'filtered-search-term',
@@ -63,13 +80,19 @@ export const mockSearchExamples = [
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { search: 'something', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      search: 'something',
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'a two terms text search',
     urlQuery: '?search=something+else',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [
         {
           type: 'filtered-search-term',
@@ -83,24 +106,36 @@ export const mockSearchExamples = [
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { search: 'something else', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      search: 'something else',
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'single instance type',
     urlQuery: '?runner_type[]=INSTANCE_TYPE',
     search: {
       runnerType: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
       filters: [],
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { type: 'INSTANCE_TYPE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      type: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'multiple runner status',
     urlQuery: '?status[]=ACTIVE&status[]=PAUSED',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [
         { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
         { type: 'status', value: { data: 'PAUSED', operator: '=' } },
@@ -108,13 +143,19 @@ export const mockSearchExamples = [
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { status: 'ACTIVE', sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      status: 'ACTIVE',
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'multiple status, a single instance type and a non default sort',
     urlQuery: '?status[]=ACTIVE&runner_type[]=INSTANCE_TYPE&sort=CREATED_ASC',
     search: {
       runnerType: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
       filters: [{ type: 'status', value: { data: 'ACTIVE', operator: '=' } }],
       pagination: {},
       sort: 'CREATED_ASC',
@@ -122,6 +163,7 @@ export const mockSearchExamples = [
     graphqlVariables: {
       status: 'ACTIVE',
       type: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
       sort: 'CREATED_ASC',
       first: RUNNER_PAGE_SIZE,
     },
@@ -131,11 +173,13 @@ export const mockSearchExamples = [
     urlQuery: '?tag[]=tag-1',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [{ type: 'tag', value: { data: 'tag-1', operator: '=' } }],
       pagination: {},
       sort: 'CREATED_DESC',
     },
     graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
       tagList: ['tag-1'],
       first: 20,
       sort: 'CREATED_DESC',
@@ -146,6 +190,7 @@ export const mockSearchExamples = [
     urlQuery: '?tag[]=tag-1&tag[]=tag-2',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [
         { type: 'tag', value: { data: 'tag-1', operator: '=' } },
         { type: 'tag', value: { data: 'tag-2', operator: '=' } },
@@ -154,6 +199,7 @@ export const mockSearchExamples = [
       sort: 'CREATED_DESC',
     },
     graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
       tagList: ['tag-1', 'tag-2'],
       first: 20,
       sort: 'CREATED_DESC',
@@ -164,22 +210,34 @@ export const mockSearchExamples = [
     urlQuery: '?after=AFTER_CURSOR',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [],
       pagination: { after: 'AFTER_CURSOR' },
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { sort: 'CREATED_DESC', after: 'AFTER_CURSOR', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      after: 'AFTER_CURSOR',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'the previous page',
     urlQuery: '?before=BEFORE_CURSOR',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [],
       pagination: { before: 'BEFORE_CURSOR' },
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { sort: 'CREATED_DESC', before: 'BEFORE_CURSOR', last: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      before: 'BEFORE_CURSOR',
+      last: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'the next page filtered by a status, an instance type, tags and a non default sort',
@@ -187,6 +245,7 @@ export const mockSearchExamples = [
       '?status[]=ACTIVE&runner_type[]=INSTANCE_TYPE&tag[]=tag-1&tag[]=tag-2&sort=CREATED_ASC&after=AFTER_CURSOR',
     search: {
       runnerType: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
       filters: [
         { type: 'status', value: { data: 'ACTIVE', operator: '=' } },
         { type: 'tag', value: { data: 'tag-1', operator: '=' } },
@@ -198,6 +257,7 @@ export const mockSearchExamples = [
     graphqlVariables: {
       status: 'ACTIVE',
       type: 'INSTANCE_TYPE',
+      membership: DEFAULT_MEMBERSHIP,
       tagList: ['tag-1', 'tag-2'],
       sort: 'CREATED_ASC',
       after: 'AFTER_CURSOR',
@@ -209,22 +269,34 @@ export const mockSearchExamples = [
     urlQuery: '?paused[]=true',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [{ type: 'paused', value: { data: 'true', operator: '=' } }],
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { paused: true, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      paused: true,
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
   {
     name: 'active runners',
     urlQuery: '?paused[]=false',
     search: {
       runnerType: null,
+      membership: DEFAULT_MEMBERSHIP,
       filters: [{ type: 'paused', value: { data: 'false', operator: '=' } }],
       pagination: {},
       sort: 'CREATED_DESC',
     },
-    graphqlVariables: { paused: false, sort: 'CREATED_DESC', first: RUNNER_PAGE_SIZE },
+    graphqlVariables: {
+      paused: false,
+      membership: DEFAULT_MEMBERSHIP,
+      sort: 'CREATED_DESC',
+      first: RUNNER_PAGE_SIZE,
+    },
   },
 ];
 
diff --git a/spec/frontend/search/sidebar/components/app_spec.js b/spec/frontend/search/sidebar/components/app_spec.js
index 3bea0748c47..89959feec39 100644
--- a/spec/frontend/search/sidebar/components/app_spec.js
+++ b/spec/frontend/search/sidebar/components/app_spec.js
@@ -42,20 +42,39 @@ describe('GlobalSearchSidebar', () => {
   const findResetLinkButton = () => wrapper.findComponent(GlLink);
 
   describe('template', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+    describe('scope=projects', () => {
+      beforeEach(() => {
+        createComponent({ urlQuery: { ...MOCK_QUERY, scope: 'projects' } });
+      });
 
-    it('renders StatusFilter always', () => {
-      expect(findStatusFilter().exists()).toBe(true);
-    });
+      it("doesn't render StatusFilter", () => {
+        expect(findStatusFilter().exists()).toBe(false);
+      });
+
+      it("doesn't render ConfidentialityFilter", () => {
+        expect(findConfidentialityFilter().exists()).toBe(false);
+      });
 
-    it('renders ConfidentialityFilter always', () => {
-      expect(findConfidentialityFilter().exists()).toBe(true);
+      it("doesn't render ApplyButton", () => {
+        expect(findApplyButton().exists()).toBe(false);
+      });
     });
 
-    it('renders ApplyButton always', () => {
-      expect(findApplyButton().exists()).toBe(true);
+    describe('scope=issues', () => {
+      beforeEach(() => {
+        createComponent({ urlQuery: MOCK_QUERY });
+      });
+      it('renders StatusFilter', () => {
+        expect(findStatusFilter().exists()).toBe(true);
+      });
+
+      it('renders ConfidentialityFilter', () => {
+        expect(findConfidentialityFilter().exists()).toBe(true);
+      });
+
+      it('renders ApplyButton', () => {
+        expect(findApplyButton().exists()).toBe(true);
+      });
     });
   });
 
@@ -115,7 +134,7 @@ describe('GlobalSearchSidebar', () => {
 
   describe('actions', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({});
     });
 
     it('clicking ApplyButton calls applyQuery', () => {
diff --git a/spec/frontend/search/sidebar/components/confidentiality_filter_spec.js b/spec/frontend/search/sidebar/components/confidentiality_filter_spec.js
index a377ddae0eb..c57eabd57b9 100644
--- a/spec/frontend/search/sidebar/components/confidentiality_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/confidentiality_filter_spec.js
@@ -34,7 +34,7 @@ describe('ConfidentialityFilter', () => {
     wrapper = null;
   });
 
-  const findRadioFilter = () => wrapper.find(RadioFilter);
+  const findRadioFilter = () => wrapper.findComponent(RadioFilter);
 
   describe('template', () => {
     beforeEach(() => {
diff --git a/spec/frontend/search/sidebar/components/radio_filter_spec.js b/spec/frontend/search/sidebar/components/radio_filter_spec.js
index c0a8259b4fe..94d529348a9 100644
--- a/spec/frontend/search/sidebar/components/radio_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/radio_filter_spec.js
@@ -43,7 +43,7 @@ describe('RadioFilter', () => {
     wrapper = null;
   });
 
-  const findGlRadioButtonGroup = () => wrapper.find(GlFormRadioGroup);
+  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/status_filter_spec.js b/spec/frontend/search/sidebar/components/status_filter_spec.js
index 5d8ecd8733a..f3152c014b6 100644
--- a/spec/frontend/search/sidebar/components/status_filter_spec.js
+++ b/spec/frontend/search/sidebar/components/status_filter_spec.js
@@ -34,7 +34,7 @@ describe('StatusFilter', () => {
     wrapper = null;
   });
 
-  const findRadioFilter = () => wrapper.find(RadioFilter);
+  const findRadioFilter = () => wrapper.findComponent(RadioFilter);
 
   describe('template', () => {
     beforeEach(() => {
diff --git a/spec/frontend/search/sort/components/app_spec.js b/spec/frontend/search/sort/components/app_spec.js
index 0e8eebba3cb..a566b9b99d3 100644
--- a/spec/frontend/search/sort/components/app_spec.js
+++ b/spec/frontend/search/sort/components/app_spec.js
@@ -43,9 +43,9 @@ describe('GlobalSearchSort', () => {
     wrapper = null;
   });
 
-  const findSortButtonGroup = () => wrapper.find(GlButtonGroup);
-  const findSortDropdown = () => wrapper.find(GlDropdown);
-  const findSortDirectionButton = () => wrapper.find(GlButton);
+  const findSortButtonGroup = () => wrapper.findComponent(GlButtonGroup);
+  const findSortDropdown = () => wrapper.findComponent(GlDropdown);
+  const findSortDirectionButton = () => wrapper.findComponent(GlButton);
   const findDropdownItems = () => findSortDropdown().findAllComponents(GlDropdownItem);
   const findDropdownItemsText = () => findDropdownItems().wrappers.map((w) => w.text());
 
diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js
index 2f93d3f6805..c442ffa521d 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import * as actions from '~/search/store/actions';
@@ -37,8 +37,8 @@ describe('Global Search Store Actions', () => {
   let state;
 
   const flashCallback = (callCount) => {
-    expect(createFlash).toHaveBeenCalledTimes(callCount);
-    createFlash.mockClear();
+    expect(createAlert).toHaveBeenCalledTimes(callCount);
+    createAlert.mockClear();
   };
 
   beforeEach(() => {
diff --git a/spec/frontend/search/topbar/components/app_spec.js b/spec/frontend/search/topbar/components/app_spec.js
index 0a44688bfe0..c7fd7084101 100644
--- a/spec/frontend/search/topbar/components/app_spec.js
+++ b/spec/frontend/search/topbar/components/app_spec.js
@@ -36,9 +36,9 @@ describe('GlobalSearchTopbar', () => {
     wrapper.destroy();
   });
 
-  const findGlSearchBox = () => wrapper.find(GlSearchBoxByClick);
-  const findGroupFilter = () => wrapper.find(GroupFilter);
-  const findProjectFilter = () => wrapper.find(ProjectFilter);
+  const findGlSearchBox = () => wrapper.findComponent(GlSearchBoxByClick);
+  const findGroupFilter = () => wrapper.findComponent(GroupFilter);
+  const findProjectFilter = () => wrapper.findComponent(ProjectFilter);
 
   describe('template', () => {
     beforeEach(() => {
diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js
index bd173791fee..b2d0297fdc2 100644
--- a/spec/frontend/search/topbar/components/group_filter_spec.js
+++ b/spec/frontend/search/topbar/components/group_filter_spec.js
@@ -53,7 +53,7 @@ describe('GroupFilter', () => {
     wrapper.destroy();
   });
 
-  const findSearchableDropdown = () => wrapper.find(SearchableDropdown);
+  const findSearchableDropdown = () => wrapper.findComponent(SearchableDropdown);
 
   describe('template', () => {
     beforeEach(() => {
diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js
index 5afcd281d0c..297a536e075 100644
--- a/spec/frontend/search/topbar/components/project_filter_spec.js
+++ b/spec/frontend/search/topbar/components/project_filter_spec.js
@@ -53,7 +53,7 @@ describe('ProjectFilter', () => {
     wrapper.destroy();
   });
 
-  const findSearchableDropdown = () => wrapper.find(SearchableDropdown);
+  const findSearchableDropdown = () => wrapper.findComponent(SearchableDropdown);
 
   describe('template', () => {
     beforeEach(() => {
diff --git a/spec/frontend/search_settings/components/search_settings_spec.js b/spec/frontend/search_settings/components/search_settings_spec.js
index d0a2018c7f0..3f856968db6 100644
--- a/spec/frontend/search_settings/components/search_settings_spec.js
+++ b/spec/frontend/search_settings/components/search_settings_spec.js
@@ -1,4 +1,4 @@
-import { GlSearchBoxByType } from '@gitlab/ui';
+import { GlEmptyState, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture } from 'helpers/fixtures';
 import SearchSettings from '~/search_settings/components/search_settings.vue';
@@ -14,7 +14,7 @@ describe('search_settings/components/search_settings.vue', () => {
   const EXTRA_SETTINGS_ID = 'js-extra-settings';
   const TEXT_CONTAIN_SEARCH_TERM = `This text contain ${SEARCH_TERM}.`;
   const TEXT_WITH_SIBLING_ELEMENTS = `${SEARCH_TERM} <a data-testid="sibling" href="#">Learn more</a>.`;
-
+  const HIDE_WHEN_EMPTY_CLASS = 'js-hide-when-nothing-matches-search';
   let wrapper;
 
   const buildWrapper = () => {
@@ -22,6 +22,7 @@ describe('search_settings/components/search_settings.vue', () => {
       propsData: {
         searchRoot: document.querySelector(`#${ROOT_ID}`),
         sectionSelector: SECTION_SELECTOR,
+        hideWhenEmptySelector: `.${HIDE_WHEN_EMPTY_CLASS}`,
         isExpandedFn: isExpanded,
       },
       // Add real listeners so we can simplify and strengthen some tests.
@@ -45,7 +46,9 @@ describe('search_settings/components/search_settings.vue', () => {
   };
 
   const findMatchSiblingElement = () => document.querySelector(`[data-testid="sibling"]`);
-  const findSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findHideWhenEmpty = () => document.querySelector(`.${HIDE_WHEN_EMPTY_CLASS}`);
   const search = (term) => {
     findSearchBox().vm.$emit('input', term);
   };
@@ -67,6 +70,9 @@ describe('search_settings/components/search_settings.vue', () => {
           <span>${TEXT_CONTAIN_SEARCH_TERM}</span>
           <span>${TEXT_WITH_SIBLING_ELEMENTS}</span>
         </section>
+        <div class="row ${HIDE_WHEN_EMPTY_CLASS}">
+          <button type="submit">Save</button>
+        </div>
       </div>
     </div>
     `);
@@ -93,13 +99,41 @@ describe('search_settings/components/search_settings.vue', () => {
     expect(wrapper.emitted('expand')).toEqual([[section]]);
   });
 
+  describe('when nothing matches the search term', () => {
+    beforeEach(() => {
+      search('xxxxxxxxxxx');
+    });
+
+    it('shows an empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('hides the form buttons', () => {
+      expect(findHideWhenEmpty()).toHaveClass(HIDE_CLASS);
+    });
+  });
+
+  describe('when something matches the search term', () => {
+    beforeEach(() => {
+      search(SEARCH_TERM);
+    });
+
+    it('shows no empty state', () => {
+      expect(findEmptyState().exists()).toBe(false);
+    });
+
+    it('shows the form buttons', () => {
+      expect(findHideWhenEmpty()).not.toHaveClass(HIDE_CLASS);
+    });
+  });
+
   it('highlight elements that match the search term', () => {
     search(SEARCH_TERM);
 
     expect(highlightedElementsCount()).toBe(3);
   });
 
-  it('highlight only search term and not the whole line', () => {
+  it('highlights only search term and not the whole line', () => {
     search(SEARCH_TERM);
 
     expect(highlightedTextNodes()).toBe(true);
@@ -142,6 +176,10 @@ describe('search_settings/components/search_settings.vue', () => {
         expect(visibleSectionsCount()).toBe(sectionsCount());
       });
 
+      it('hides the empty state', () => {
+        expect(findEmptyState().exists()).toBe(false);
+      });
+
       it('removes the highlight from all elements', () => {
         expect(highlightedElementsCount()).toBe(0);
       });
diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index 222cabc6a63..ddefda2ffc3 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -281,7 +281,7 @@ describe('App component', () => {
         });
       });
 
-      it(shouldRender ? 'renders' : 'does not render', () => {
+      it(`${shouldRender ? 'renders' : 'does not render'}`, () => {
         expect(findAutoDevopsEnabledAlert().exists()).toBe(shouldRender);
       });
     });
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 b6451af57d7..8f2b5383191 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -193,7 +193,7 @@ describe('TrainingProviderList component', () => {
         });
 
         it(`shows the learn more link for enabled card ${index}`, () => {
-          const learnMoreLink = findCards().at(index).find(GlLink);
+          const learnMoreLink = findCards().at(index).findComponent(GlLink);
           const tempLogo = TEMP_PROVIDER_URLS[name];
 
           if (tempLogo) {
@@ -224,7 +224,7 @@ describe('TrainingProviderList component', () => {
         });
 
         it('shows a info-tooltip that describes the purpose of a primary provider', () => {
-          const infoIcon = findPrimaryProviderRadios().at(index).find(GlIcon);
+          const infoIcon = findPrimaryProviderRadios().at(index).findComponent(GlIcon);
           const tooltip = getBinding(infoIcon.element, 'gl-tooltip');
 
           expect(infoIcon.props()).toMatchObject({
diff --git a/spec/frontend/security_configuration/components/upgrade_banner_spec.js b/spec/frontend/security_configuration/components/upgrade_banner_spec.js
index ff44acfc4f9..c34d8e47a6c 100644
--- a/spec/frontend/security_configuration/components/upgrade_banner_spec.js
+++ b/spec/frontend/security_configuration/components/upgrade_banner_spec.js
@@ -79,7 +79,7 @@ describe('UpgradeBanner component', () => {
       expect(wrapperText).toContain('statistics in the merge request');
       expect(wrapperText).toContain('statistics across projects');
       expect(wrapperText).toContain('Runtime security metrics');
-      expect(wrapperText).toContain('More scan types, including Container Scanning,');
+      expect(wrapperText).toContain('More scan types, including DAST,');
     });
 
     describe('when user interacts', () => {
diff --git a/spec/frontend/self_monitor/components/self_monitor_form_spec.js b/spec/frontend/self_monitor/components/self_monitor_form_spec.js
index 89ad5a00a14..c690bbf1c57 100644
--- a/spec/frontend/self_monitor/components/self_monitor_form_spec.js
+++ b/spec/frontend/self_monitor/components/self_monitor_form_spec.js
@@ -42,7 +42,7 @@ describe('self monitor component', () => {
       it('renders as an expand button by default', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
-        const button = wrapper.find(GlButton);
+        const button = wrapper.findComponent(GlButton);
 
         expect(button.text()).toBe('Expand');
       });
@@ -79,7 +79,7 @@ describe('self monitor component', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
         expect(
-          wrapper.find({ ref: 'selfMonitoringFormText' }).find('a').attributes('href'),
+          wrapper.findComponent({ ref: 'selfMonitoringFormText' }).find('a').attributes('href'),
         ).toEqual(`${TEST_HOST}/instance-administrators-random/gitlab-self-monitoring`);
       });
 
diff --git a/spec/frontend/set_status_modal/set_status_form_spec.js b/spec/frontend/set_status_modal/set_status_form_spec.js
index 8e1623eedf5..486e06d2906 100644
--- a/spec/frontend/set_status_modal/set_status_form_spec.js
+++ b/spec/frontend/set_status_modal/set_status_form_spec.js
@@ -127,6 +127,8 @@ describe('SetStatusForm', () => {
 
   describe('when `Clear status after` dropdown is changed', () => {
     it('emits `clear-status-after-click`', async () => {
+      await createComponent();
+
       await wrapper.findByTestId('thirtyMinutes').trigger('click');
 
       expect(wrapper.emitted('clear-status-after-click')).toEqual([[timeRanges[0]]]);
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 c5fb590646d..53d2a9e0978 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
@@ -4,7 +4,7 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
 import EmojiPicker from '~/emoji/components/picker.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -51,11 +51,11 @@ describe('SetStatusModalWrapper', () => {
     });
   };
 
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const findMessageField = () =>
     wrapper.findByPlaceholderText(SetStatusForm.i18n.statusMessagePlaceholder);
   const findClearStatusButton = () => wrapper.find('.js-clear-user-status-button');
-  const findAvailabilityCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findAvailabilityCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findClearStatusAtMessage = () => wrapper.find('[data-testid="clear-status-at-message"]');
   const getEmojiPicker = () => wrapper.findComponent(EmojiPickerStub);
 
@@ -253,7 +253,7 @@ describe('SetStatusModalWrapper', () => {
         findModal().vm.$emit('primary');
         await nextTick();
 
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: "Sorry, we weren't able to set your status. Please try again later.",
         });
       });
diff --git a/spec/frontend/sidebar/assignee_title_spec.js b/spec/frontend/sidebar/assignee_title_spec.js
index e29e3d489a5..14a6bdbf907 100644
--- a/spec/frontend/sidebar/assignee_title_spec.js
+++ b/spec/frontend/sidebar/assignee_title_spec.js
@@ -85,7 +85,7 @@ describe('AssigneeTitle component', () => {
       editable: false,
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
   });
 
   it('renders spinner when loading', () => {
@@ -95,7 +95,7 @@ describe('AssigneeTitle component', () => {
       editable: false,
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('does not render edit link when not editable', () => {
diff --git a/spec/frontend/sidebar/assignees_spec.js b/spec/frontend/sidebar/assignees_spec.js
index c2aff456abb..7cf7fd33022 100644
--- a/spec/frontend/sidebar/assignees_spec.js
+++ b/spec/frontend/sidebar/assignees_spec.js
@@ -33,7 +33,7 @@ describe('Assignee component', () => {
     it('displays no assignee icon when collapsed', () => {
       createWrapper();
       const collapsedChildren = findCollapsedChildren();
-      const userIcon = collapsedChildren.at(0).find(GlIcon);
+      const userIcon = collapsedChildren.at(0).findComponent(GlIcon);
 
       expect(collapsedChildren.length).toBe(1);
       expect(collapsedChildren.at(0).attributes('aria-label')).toBe('None');
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 8cde70ff8da..4764f3607bc 100644
--- a/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
+++ b/spec/frontend/sidebar/components/assignees/assignee_avatar_link_spec.js
@@ -46,7 +46,7 @@ describe('AssigneeAvatarLink component', () => {
   it('renders assignee avatar', () => {
     createComponent();
 
-    expect(wrapper.find(AssigneeAvatar).props()).toEqual(
+    expect(wrapper.findComponent(AssigneeAvatar).props()).toEqual(
       expect.objectContaining({
         issuableType: TEST_ISSUABLE_TYPE,
         user: userDataMock(),
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 81ff51133bf..7e7d4921cfa 100644
--- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js
+++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_list_spec.js
@@ -21,7 +21,7 @@ describe('CollapsedAssigneeList component', () => {
     });
   }
 
-  const findNoUsersIcon = () => wrapper.find(GlIcon);
+  const findNoUsersIcon = () => wrapper.findComponent(GlIcon);
   const findAvatarCounter = () => wrapper.find('.avatar-counter');
   const findAssignees = () => wrapper.findAllComponents(CollapsedAssignee);
   const getTooltipTitle = () => wrapper.attributes('title');
diff --git a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
index 2d5a3653631..4db95114b96 100644
--- a/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
+++ b/spec/frontend/sidebar/components/assignees/collapsed_assignee_spec.js
@@ -34,7 +34,7 @@ describe('CollapsedAssignee assignee component', () => {
   it('has assignee avatar', () => {
     createComponent();
 
-    expect(wrapper.find(AssigneeAvatar).props()).toEqual({
+    expect(wrapper.findComponent(AssigneeAvatar).props()).toEqual({
       imgSize: 24,
       user: TEST_USER,
       issuableType: TEST_ISSUABLE_TYPE,
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 3644a51c7fd..cbb4c41dd14 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_assignees_widget_spec.js
@@ -5,7 +5,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import SidebarAssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
@@ -167,7 +167,7 @@ describe('Sidebar assignees widget', () => {
       });
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while fetching participants.',
       });
     });
@@ -333,7 +333,7 @@ describe('Sidebar assignees widget', () => {
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while updating assignees.',
       });
     });
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 724fba62479..6c22d2f687d 100644
--- a/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
+++ b/spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js
@@ -67,15 +67,33 @@ describe('boards sidebar remove issue', () => {
       expect(findLoader().exists()).toBe(true);
     });
 
-    it('shows expanded content and hides collapsed content when clicking edit button', async () => {
-      const slots = { default: '<div>Select item</div>' };
-      createComponent({ canUpdate: true, slots });
-      findEditButton().vm.$emit('click');
-
-      await nextTick();
-
-      expect(findCollapsed().isVisible()).toBe(false);
-      expect(findExpanded().isVisible()).toBe(true);
+    describe('when clicking edit button', () => {
+      describe('when can edit', () => {
+        it('shows expanded (editable) content', async () => {
+          const slots = { default: '<div>Select item</div>' };
+          createComponent({ canUpdate: true, slots });
+          findEditButton().vm.$emit('click');
+
+          await nextTick();
+
+          expect(findCollapsed().isVisible()).toBe(false);
+          expect(findExpanded().isVisible()).toBe(true);
+        });
+      });
+
+      describe('when cannot edit', () => {
+        it('shows collapsed (non-editable) content', async () => {
+          const slots = { default: '<div>Select item</div>' };
+          createComponent({ canUpdate: false, slots });
+          // Simulate parent component calling `expand` method when user
+          // clicks on collapsed sidebar (e.g. in sidebar_weight_widget.vue)
+          wrapper.vm.expand();
+          await nextTick();
+
+          expect(findCollapsed().isVisible()).toBe(true);
+          expect(findExpanded().isVisible()).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 b902d7313fd..03c2e1a37a9 100644
--- a/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
+++ b/spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js
@@ -46,7 +46,7 @@ describe('UncollapsedAssigneeList component', () => {
     });
 
     it('calls the AssigneeAvatarLink with the proper props', () => {
-      expect(wrapper.find(AssigneeAvatarLink).exists()).toBe(true);
+      expect(wrapper.findComponent(AssigneeAvatarLink).exists()).toBe(true);
     });
 
     it('Shows one user with avatar, username and author name', () => {
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 1ea035c7184..b27f7c6b4e1 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
@@ -2,7 +2,7 @@ import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarConfidentialityForm from '~/sidebar/components/confidential/sidebar_confidentiality_form.vue';
 import { confidentialityQueries } from '~/sidebar/constants';
 
@@ -63,7 +63,7 @@ describe('Sidebar Confidentiality Form', () => {
     findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: 'Something went wrong while setting issue confidentiality.',
     });
   });
@@ -77,7 +77,7 @@ describe('Sidebar Confidentiality Form', () => {
     findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: '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 3a3f0b1d9fa..e486a8e9ec7 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarConfidentialityContent from '~/sidebar/components/confidential/sidebar_confidentiality_content.vue';
 import SidebarConfidentialityForm from '~/sidebar/components/confidential/sidebar_confidentiality_form.vue';
 import SidebarConfidentialityWidget, {
@@ -126,7 +126,7 @@ describe('Sidebar Confidentiality Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('closes the form and dispatches an event when `closeForm` is emitted', async () => {
diff --git a/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js b/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js
index 699b2bbd0b1..69a8d645973 100644
--- a/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js
+++ b/spec/frontend/sidebar/components/copy_email_to_clipboard_spec.js
@@ -12,6 +12,6 @@ describe('CopyEmailToClipboard component', () => {
   });
 
   it('sets CopyableField `value` prop to issueEmailAddress', () => {
-    expect(wrapper.find(CopyableField).props('value')).toBe(mockIssueEmailAddress);
+    expect(wrapper.findComponent(CopyableField).props('value')).toBe(mockIssueEmailAddress);
   });
 });
diff --git a/spec/frontend/sidebar/components/crm_contacts_spec.js b/spec/frontend/sidebar/components/crm_contacts_spec.js
index 6456829258f..6d76fa1f9df 100644
--- a/spec/frontend/sidebar/components/crm_contacts_spec.js
+++ b/spec/frontend/sidebar/components/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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import CrmContacts from '~/sidebar/components/crm_contacts/crm_contacts.vue';
 import getIssueCrmContactsQuery from '~/sidebar/components/crm_contacts/queries/get_issue_crm_contacts.query.graphql';
 import issueCrmContactsSubscription from '~/sidebar/components/crm_contacts/queries/issue_crm_contacts.subscription.graphql';
@@ -47,7 +47,7 @@ describe('Issue crm contacts component', () => {
     mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('calls the query with correct variables', () => {
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 1e2173e2988..67413cffdda 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -28,7 +28,7 @@ describe('Sidebar date Widget', () => {
 
   const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
   const findPopoverIcon = () => wrapper.find('[data-testid="inherit-date-popover"]');
-  const findDatePicker = () => wrapper.find(GlDatepicker);
+  const findDatePicker = () => wrapper.findComponent(GlDatepicker);
 
   const createComponent = ({
     dueDateQueryHandler = jest.fn().mockResolvedValue(issuableDueDateResponse()),
@@ -149,14 +149,14 @@ describe('Sidebar date Widget', () => {
       createComponent({ canInherit });
       await waitForPromises();
 
-      expect(wrapper.find(component).exists()).toBe(expected);
+      expect(wrapper.findComponent(component).exists()).toBe(expected);
     },
   );
 
   it('does not render SidebarInheritDate when canInherit is true and date is loading', async () => {
     createComponent({ canInherit: true });
 
-    expect(wrapper.find(SidebarInheritDate).exists()).toBe(false);
+    expect(wrapper.findComponent(SidebarInheritDate).exists()).toBe(false);
   });
 
   it('displays a flash message when query is rejected', async () => {
@@ -165,7 +165,7 @@ describe('Sidebar date Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it.each`
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 1eda4ea977f..cbe01263dcd 100644
--- a/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js
+++ b/spec/frontend/sidebar/components/date/sidebar_formatted_date_spec.js
@@ -5,7 +5,7 @@ import SidebarFormattedDate from '~/sidebar/components/date/sidebar_formatted_da
 describe('SidebarFormattedDate', () => {
   let wrapper;
   const findFormattedDate = () => wrapper.find("[data-testid='sidebar-date-value']");
-  const findRemoveButton = () => wrapper.find(GlButton);
+  const findRemoveButton = () => wrapper.findComponent(GlButton);
 
   const createComponent = ({ hasDate = true } = {}) => {
     wrapper = shallowMount(SidebarFormattedDate, {
diff --git a/spec/frontend/sidebar/components/severity/severity_spec.js b/spec/frontend/sidebar/components/severity/severity_spec.js
index 1e4624e4dcd..2146155791e 100644
--- a/spec/frontend/sidebar/components/severity/severity_spec.js
+++ b/spec/frontend/sidebar/components/severity/severity_spec.js
@@ -21,7 +21,7 @@ describe('SeverityToken', () => {
     }
   });
 
-  const findIcon = () => wrapper.find(GlIcon);
+  const findIcon = () => wrapper.findComponent(GlIcon);
 
   it('renders severity token for each severity type', () => {
     Object.values(INCIDENT_SEVERITY).forEach((severity) => {
diff --git a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
index 83eb9a18597..bdea33371d8 100644
--- a/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
+++ b/spec/frontend/sidebar/components/severity/sidebar_severity_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlTooltip, GlSprintf } from
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { INCIDENT_SEVERITY, ISSUABLE_TYPES } from '~/sidebar/components/severity/constants';
 import updateIssuableSeverity from '~/sidebar/components/severity/graphql/mutations/update_issuable_severity.mutation.graphql';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
@@ -59,7 +59,7 @@ describe('SidebarSeverity', () => {
   const findCriticalSeverityDropdownItem = () => wrapper.findComponent(GlDropdownItem);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findTooltip = () => wrapper.findComponent(GlTooltip);
-  const findCollapsedSeverity = () => wrapper.find({ ref: 'severity' });
+  const findCollapsedSeverity = () => wrapper.findComponent({ ref: 'severity' });
 
   describe('Severity widget', () => {
     it('renders severity dropdown and token', () => {
@@ -104,7 +104,7 @@ describe('SidebarSeverity', () => {
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
 
     it('shows loading icon while updating', async () => {
diff --git a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
index 6761731c093..8ab4d8ea051 100644
--- a/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
+++ b/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js
@@ -15,7 +15,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issues/constants';
 import { timeFor } from '~/lib/utils/datetime_utility';
@@ -369,9 +369,9 @@ describe('SidebarDropdownWidget', () => {
                   findDropdownItemWithText('title').vm.$emit('click');
                 });
 
-                it(`calls createFlash with "${expectedMsg}"`, async () => {
+                it(`calls createAlert with "${expectedMsg}"`, async () => {
                   await nextTick();
-                  expect(createFlash).toHaveBeenCalledWith({
+                  expect(createAlert).toHaveBeenCalledWith({
                     message: expectedMsg,
                     captureError: true,
                     error: expectedMsg,
@@ -455,14 +455,14 @@ describe('SidebarDropdownWidget', () => {
         describe('milestones', () => {
           let projectMilestonesSpy;
 
-          it('should call createFlash if milestones query fails', async () => {
+          it('should call createAlert if milestones query fails', async () => {
             await createComponentWithApollo({
               projectMilestonesSpy: jest.fn().mockRejectedValue(error),
             });
 
             await clickEdit();
 
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: wrapper.vm.i18n.listFetchError,
               captureError: true,
               error: expect.any(Error),
@@ -514,12 +514,12 @@ describe('SidebarDropdownWidget', () => {
       });
 
       describe('currentAttributes', () => {
-        it('should call createFlash if currentAttributes query fails', async () => {
+        it('should call createAlert if currentAttributes query fails', async () => {
           await createComponentWithApollo({
             currentMilestoneSpy: jest.fn().mockRejectedValue(error),
           });
 
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: wrapper.vm.i18n.currentFetchError,
             captureError: true,
             error: expect.any(Error),
diff --git a/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js b/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
index 430acf9f9e7..c94f9918243 100644
--- a/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
+++ b/spec/frontend/sidebar/components/subscriptions/sidebar_subscriptions_widget_spec.js
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import SidebarSubscriptionWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
 import issueSubscribedQuery from '~/sidebar/queries/issue_subscribed.query.graphql';
@@ -144,7 +144,7 @@ describe('Sidebar Subscriptions Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('merge request', () => {
diff --git a/spec/frontend/sidebar/components/time_tracking/report_spec.js b/spec/frontend/sidebar/components/time_tracking/report_spec.js
index 4e619a4e609..af72122052f 100644
--- a/spec/frontend/sidebar/components/time_tracking/report_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/report_spec.js
@@ -6,7 +6,7 @@ import VueApollo from 'vue-apollo';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import Report from '~/sidebar/components/time_tracking/report.vue';
 import getIssueTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_issue_timelogs.query.graphql';
 import getMrTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql';
@@ -65,7 +65,7 @@ describe('Issuable Time Tracking Report', () => {
     mountComponent({ queryHandler: jest.fn().mockRejectedValue('ERROR') });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('for issue', () => {
@@ -153,7 +153,7 @@ describe('Issuable Time Tracking Report', () => {
       await findDeleteButton().trigger('click');
       await waitForPromises();
 
-      expect(createFlash).not.toHaveBeenCalled();
+      expect(createAlert).not.toHaveBeenCalled();
       expect(mutateSpy).toHaveBeenCalledWith({
         mutation: deleteTimelogMutation,
         variables: {
@@ -164,7 +164,7 @@ describe('Issuable Time Tracking Report', () => {
       });
     });
 
-    it('calls `createFlash` with errorMessage and does not remove the row on promise reject', async () => {
+    it('calls `createAlert` with errorMessage and does not remove the row on promise reject', async () => {
       const mutateSpy = jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue({});
 
       await waitForPromises();
@@ -180,7 +180,7 @@ describe('Issuable Time Tracking Report', () => {
         },
       });
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: 'An error occurred while removing the timelog.',
         captureError: true,
         error: expect.any(Object),
diff --git a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
index ea931782d1e..f73491ca95f 100644
--- a/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
+++ b/spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js
@@ -4,7 +4,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import epicTodoQuery from '~/sidebar/queries/epic_todo.query.graphql';
 import TodoButton from '~/vue_shared/components/sidebar/todo_toggle/todo_button.vue';
@@ -83,7 +83,7 @@ describe('Sidebar Todo Widget', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   describe('collapsed', () => {
@@ -97,13 +97,13 @@ describe('Sidebar Todo Widget', () => {
     });
 
     it('shows add todo icon', () => {
-      expect(wrapper.find(GlIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
 
-      expect(wrapper.find(GlIcon).props('name')).toBe('todo-add');
+      expect(wrapper.findComponent(GlIcon).props('name')).toBe('todo-add');
     });
 
     it('sets default tooltip title', () => {
-      expect(wrapper.find(GlButton).attributes('title')).toBe('Add a to do');
+      expect(wrapper.findComponent(GlButton).attributes('title')).toBe('Add a to do');
     });
 
     it('when user has a to do', async () => {
@@ -112,12 +112,12 @@ describe('Sidebar Todo Widget', () => {
       });
 
       await waitForPromises();
-      expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
-      expect(wrapper.find(GlButton).attributes('title')).toBe('Mark as done');
+      expect(wrapper.findComponent(GlIcon).props('name')).toBe('todo-done');
+      expect(wrapper.findComponent(GlButton).attributes('title')).toBe('Mark as done');
     });
 
     it('emits `todoUpdated` event on click on icon', async () => {
-      wrapper.find(GlIcon).vm.$emit('click', event);
+      wrapper.findComponent(GlIcon).vm.$emit('click', event);
 
       await nextTick();
       expect(wrapper.emitted('todoUpdated')).toEqual([[false]]);
diff --git a/spec/frontend/sidebar/issuable_assignees_spec.js b/spec/frontend/sidebar/issuable_assignees_spec.js
index dc59b68bbd4..1161fefcc64 100644
--- a/spec/frontend/sidebar/issuable_assignees_spec.js
+++ b/spec/frontend/sidebar/issuable_assignees_spec.js
@@ -17,7 +17,7 @@ describe('IssuableAssignees', () => {
       },
     });
   };
-  const findUncollapsedAssigneeList = () => wrapper.find(UncollapsedAssigneeList);
+  const findUncollapsedAssigneeList = () => wrapper.findComponent(UncollapsedAssigneeList);
   const findEmptyAssignee = () => wrapper.find('[data-testid="none"]');
 
   afterEach(() => {
diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
index 971744edb0f..2abb0c24d7d 100644
--- a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
+++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { createStore as createMrStore } from '~/mr_notes/stores';
 import createStore from '~/notes/stores';
 import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
@@ -129,7 +129,7 @@ describe('EditFormButtons', () => {
           });
 
           it('does not flash an error message', () => {
-            expect(createFlash).not.toHaveBeenCalled();
+            expect(createAlert).not.toHaveBeenCalled();
           });
         });
 
@@ -162,7 +162,7 @@ describe('EditFormButtons', () => {
           });
 
           it('calls flash with the correct message', () => {
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: `Something went wrong trying to change the locked state of this ${issuableDisplayName}`,
             });
           });
diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
index 986ccaea4b6..8f825847cfc 100644
--- a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
+++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
@@ -26,7 +26,7 @@ describe('IssuableLockForm', () => {
   const findSidebarCollapseIcon = () => wrapper.find('[data-testid="sidebar-collapse-icon"]');
   const findLockStatus = () => wrapper.find('[data-testid="lock-status"]');
   const findEditLink = () => wrapper.find('[data-testid="edit-link"]');
-  const findEditForm = () => wrapper.find(EditForm);
+  const findEditForm = () => wrapper.findComponent(EditForm);
   const findSidebarLockStatusTooltip = () =>
     getBinding(findSidebarCollapseIcon().element, 'gl-tooltip');
 
diff --git a/spec/frontend/sidebar/mock_data.js b/spec/frontend/sidebar/mock_data.js
index 2afe9647cbe..391cbb1e0d5 100644
--- a/spec/frontend/sidebar/mock_data.js
+++ b/spec/frontend/sidebar/mock_data.js
@@ -283,7 +283,6 @@ export const epicParticipantsResponse = () => ({
               name: 'Jacki Kub',
               username: 'francina.skiles',
               webUrl: '/franc',
-              status: null,
             },
           ],
         },
diff --git a/spec/frontend/sidebar/participants_spec.js b/spec/frontend/sidebar/participants_spec.js
index 2517b625225..f7a626a189c 100644
--- a/spec/frontend/sidebar/participants_spec.js
+++ b/spec/frontend/sidebar/participants_spec.js
@@ -36,7 +36,7 @@ describe('Participants', () => {
         loading: true,
       });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('does not show loading spinner not loading', () => {
@@ -44,7 +44,7 @@ describe('Participants', () => {
         loading: false,
       });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     });
 
     it('shows participant count when given', () => {
@@ -73,7 +73,7 @@ describe('Participants', () => {
         loading: true,
       });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
diff --git a/spec/frontend/sidebar/reviewer_title_spec.js b/spec/frontend/sidebar/reviewer_title_spec.js
index 6b4eed5ad0f..68ecd62e4c6 100644
--- a/spec/frontend/sidebar/reviewer_title_spec.js
+++ b/spec/frontend/sidebar/reviewer_title_spec.js
@@ -47,7 +47,7 @@ describe('ReviewerTitle component', () => {
       editable: false,
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
   });
 
   it('renders spinner when loading', () => {
@@ -57,7 +57,7 @@ describe('ReviewerTitle component', () => {
       editable: false,
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('does not render edit link when not editable', () => {
diff --git a/spec/frontend/sidebar/reviewers_spec.js b/spec/frontend/sidebar/reviewers_spec.js
index 88bacc9b7f7..229f7ffbe04 100644
--- a/spec/frontend/sidebar/reviewers_spec.js
+++ b/spec/frontend/sidebar/reviewers_spec.js
@@ -43,7 +43,7 @@ describe('Reviewer component', () => {
     it('displays no reviewer icon when collapsed', () => {
       createWrapper();
       const collapsedChildren = findCollapsedChildren();
-      const userIcon = collapsedChildren.at(0).find(GlIcon);
+      const userIcon = collapsedChildren.at(0).findComponent(GlIcon);
 
       expect(collapsedChildren.length).toBe(1);
       expect(collapsedChildren.at(0).attributes('aria-label')).toBe('None');
diff --git a/spec/frontend/sidebar/sidebar_assignees_spec.js b/spec/frontend/sidebar/sidebar_assignees_spec.js
index 68d20060c37..2cb2425532b 100644
--- a/spec/frontend/sidebar/sidebar_assignees_spec.js
+++ b/spec/frontend/sidebar/sidebar_assignees_spec.js
@@ -73,19 +73,19 @@ describe('sidebar assignees', () => {
   it('hides assignees until fetched', async () => {
     createComponent();
 
-    expect(wrapper.find(Assigness).exists()).toBe(false);
+    expect(wrapper.findComponent(Assigness).exists()).toBe(false);
 
     wrapper.vm.store.isFetching.assignees = false;
 
     await nextTick();
-    expect(wrapper.find(Assigness).exists()).toBe(true);
+    expect(wrapper.findComponent(Assigness).exists()).toBe(true);
   });
 
   describe('when issuableType is issue', () => {
     it('finds AssigneesRealtime component', () => {
       createComponent();
 
-      expect(wrapper.find(AssigneesRealtime).exists()).toBe(true);
+      expect(wrapper.findComponent(AssigneesRealtime).exists()).toBe(true);
     });
   });
 
@@ -93,7 +93,7 @@ describe('sidebar assignees', () => {
     it('does not find AssigneesRealtime component', () => {
       createComponent({ issuableType: 'MR' });
 
-      expect(wrapper.find(AssigneesRealtime).exists()).toBe(false);
+      expect(wrapper.findComponent(AssigneesRealtime).exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/sidebar/sidebar_mediator_spec.js b/spec/frontend/sidebar/sidebar_mediator_spec.js
index 355f0c45bbe..bb5e7f7ff16 100644
--- a/spec/frontend/sidebar/sidebar_mediator_spec.js
+++ b/spec/frontend/sidebar/sidebar_mediator_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
-import SidebarService, { gqClient } from '~/sidebar/services/sidebar_service';
+import SidebarService from '~/sidebar/services/sidebar_service';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
 import SidebarStore from '~/sidebar/stores/sidebar_store';
 import Mock from './mock_data';
@@ -42,22 +42,14 @@ describe('Sidebar mediator', () => {
     });
   });
 
-  it('fetches the data', () => {
+  it('fetches the data', async () => {
     const mockData = Mock.responseMap.GET[mediatorMockData.endpoint];
     mock.onGet(mediatorMockData.endpoint).reply(200, mockData);
-
-    const mockGraphQlData = Mock.graphQlResponseData;
-    const graphQlSpy = jest.spyOn(gqClient, 'query').mockReturnValue({
-      data: mockGraphQlData,
-    });
     const spy = jest.spyOn(mediator, 'processFetchedData').mockReturnValue(Promise.resolve());
+    await mediator.fetch();
 
-    return mediator.fetch().then(() => {
-      expect(spy).toHaveBeenCalledWith(mockData, mockGraphQlData);
-
-      spy.mockRestore();
-      graphQlSpy.mockRestore();
-    });
+    expect(spy).toHaveBeenCalledWith(mockData);
+    spy.mockRestore();
   });
 
   it('processes fetched data', () => {
diff --git a/spec/frontend/sidebar/sidebar_move_issue_spec.js b/spec/frontend/sidebar/sidebar_move_issue_spec.js
index 2e6807ed9d8..195cc6ddeeb 100644
--- a/spec/frontend/sidebar/sidebar_move_issue_spec.js
+++ b/spec/frontend/sidebar/sidebar_move_issue_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
 import SidebarService from '~/sidebar/services/sidebar_service';
@@ -115,7 +115,7 @@ describe('SidebarMoveIssue', () => {
       // Wait for the move issue request to fail
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
       expect(test.$confirmButton.prop('disabled')).toBe(false);
       expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
     });
diff --git a/spec/frontend/sidebar/subscriptions_spec.js b/spec/frontend/sidebar/subscriptions_spec.js
index 6ab8e1e0ebc..1a1aa370eef 100644
--- a/spec/frontend/sidebar/subscriptions_spec.js
+++ b/spec/frontend/sidebar/subscriptions_spec.js
@@ -108,7 +108,7 @@ describe('Subscriptions', () => {
       expect(wrapper.findByTestId('subscription-title').text()).toContain(
         subscribeDisabledDescription,
       );
-      expect(wrapper.find({ ref: 'tooltip' }).attributes('title')).toBe(
+      expect(wrapper.findComponent({ ref: 'tooltip' }).attributes('title')).toBe(
         subscribeDisabledDescription,
       );
     });
diff --git a/spec/frontend/sidebar/todo_spec.js b/spec/frontend/sidebar/todo_spec.js
index 5f696b237e0..8e6597bf80f 100644
--- a/spec/frontend/sidebar/todo_spec.js
+++ b/spec/frontend/sidebar/todo_spec.js
@@ -43,8 +43,8 @@ describe('SidebarTodo', () => {
     ({ isTodo, iconClass, label, icon }) => {
       createComponent({ isTodo });
 
-      expect(wrapper.find(GlIcon).classes().join(' ')).toStrictEqual(iconClass);
-      expect(wrapper.find(GlIcon).props('name')).toStrictEqual(icon);
+      expect(wrapper.findComponent(GlIcon).classes().join(' ')).toStrictEqual(iconClass);
+      expect(wrapper.findComponent(GlIcon).props('name')).toStrictEqual(icon);
       expect(wrapper.find('button').text()).toBe(label);
     },
   );
@@ -76,19 +76,19 @@ describe('SidebarTodo', () => {
     it('renders button icon when `collapsed` prop is `true`', () => {
       createComponent({ collapsed: true });
 
-      expect(wrapper.find(GlIcon).props('name')).toBe('todo-done');
+      expect(wrapper.findComponent(GlIcon).props('name')).toBe('todo-done');
     });
 
     it('renders loading icon when `isActionActive` prop is true', () => {
       createComponent({ isActionActive: true });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('hides button icon when `isActionActive` prop is true', () => {
       createComponent({ collapsed: true, isActionActive: true });
 
-      expect(wrapper.find(GlIcon).isVisible()).toBe(false);
+      expect(wrapper.findComponent(GlIcon).isVisible()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/smart_interval_spec.js b/spec/frontend/smart_interval_spec.js
index 5dda097ae6a..64928fc4ae9 100644
--- a/spec/frontend/smart_interval_spec.js
+++ b/spec/frontend/smart_interval_spec.js
@@ -109,7 +109,7 @@ describe('SmartInterval', () => {
       return waitForPromises().then(() => {
         const { intervalId } = interval.state;
 
-        expect(intervalId).toBeTruthy();
+        expect(intervalId).not.toBeUndefined();
       });
     });
   });
@@ -130,7 +130,7 @@ describe('SmartInterval', () => {
       jest.runOnlyPendingTimers();
 
       return waitForPromises().then(() => {
-        expect(interval.state.intervalId).toBeTruthy();
+        expect(interval.state.intervalId).not.toBeUndefined();
 
         // simulates triggering of visibilitychange event
         interval.onVisibilityChange({ target: { visibilityState: 'hidden' } });
@@ -148,16 +148,16 @@ describe('SmartInterval', () => {
       jest.runOnlyPendingTimers();
 
       return waitForPromises().then(() => {
-        expect(interval.state.intervalId).toBeTruthy();
+        expect(interval.state.intervalId).not.toBeUndefined();
         expect(
           interval.getCurrentInterval() >= DEFAULT_STARTING_INTERVAL &&
             interval.getCurrentInterval() <= DEFAULT_MAX_INTERVAL,
-        ).toBeTruthy();
+        ).toBe(true);
 
         // simulates triggering of visibilitychange event
         interval.onVisibilityChange({ target: { visibilityState: 'hidden' } });
 
-        expect(interval.state.intervalId).toBeTruthy();
+        expect(interval.state.intervalId).not.toBeUndefined();
         expect(interval.getCurrentInterval()).toBe(HIDDEN_INTERVAL);
       });
     });
@@ -166,7 +166,7 @@ describe('SmartInterval', () => {
       jest.runOnlyPendingTimers();
 
       return waitForPromises().then(() => {
-        expect(interval.state.intervalId).toBeTruthy();
+        expect(interval.state.intervalId).not.toBeUndefined();
 
         // simulates triggering of visibilitychange event
         interval.onVisibilityChange({ target: { visibilityState: 'hidden' } });
@@ -176,7 +176,7 @@ describe('SmartInterval', () => {
         // simulates triggering of visibilitychange event
         interval.onVisibilityChange({ target: { visibilityState: 'visible' } });
 
-        expect(interval.state.intervalId).toBeTruthy();
+        expect(interval.state.intervalId).not.toBeUndefined();
       });
     });
 
@@ -194,7 +194,7 @@ describe('SmartInterval', () => {
     it('should execute callback before first interval', () => {
       interval = createDefaultSmartInterval({ immediateExecution: true });
 
-      expect(interval.cfg.immediateExecution).toBeFalsy();
+      expect(interval.cfg.immediateExecution).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/snippet/collapsible_input_spec.js b/spec/frontend/snippet/collapsible_input_spec.js
index 56e64d136c2..4a6fd33b9e4 100644
--- a/spec/frontend/snippet/collapsible_input_spec.js
+++ b/spec/frontend/snippet/collapsible_input_spec.js
@@ -9,7 +9,7 @@ describe('~/snippet/collapsible_input', () => {
 
   beforeEach(() => {
     setHTMLFixture(`
-      <form>    
+      <form>
         <div class="js-collapsible-input js-title">
           <div class="js-collapsed d-none">
             <input type="text" />
@@ -72,7 +72,7 @@ describe('~/snippet/collapsible_input', () => {
         ${'is collapsed'}              | ${''}             | ${true}
         ${'stays open if given value'} | ${'Hello world!'} | ${false}
       `('when loses focus', ({ desc, value, isCollapsed }) => {
-        it(desc, () => {
+        it(`${desc}`, () => {
           findExpandedInput(descriptionEl).value = value;
           focusIn(fooEl);
 
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index cf897414ccb..e7dab0ad79d 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -9,7 +9,7 @@ import { stubPerformanceWebAPI } from 'helpers/performance';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import * as urlUtils from '~/lib/utils/url_utility';
 import SnippetEditApp from '~/snippets/components/edit.vue';
 import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
@@ -206,7 +206,7 @@ describe('Snippet Edit app', () => {
     });
 
     it('should hide loader', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     });
   });
 
@@ -237,7 +237,7 @@ describe('Snippet Edit app', () => {
           !titleHasErrors,
         );
 
-        expect(wrapper.find(SnippetBlobActionsEdit).props('isValid')).toEqual(
+        expect(wrapper.findComponent(SnippetBlobActionsEdit).props('isValid')).toEqual(
           !blobActionsHasErrors,
         );
       },
@@ -273,7 +273,7 @@ describe('Snippet Edit app', () => {
         selectedLevel: visibility,
       });
 
-      expect(wrapper.find(SnippetVisibilityEdit).props('value')).toBe(visibility);
+      expect(wrapper.findComponent(SnippetVisibilityEdit).props('value')).toBe(visibility);
     });
 
     describe('form submission handling', () => {
@@ -361,7 +361,7 @@ describe('Snippet Edit app', () => {
           await waitForPromises();
 
           expect(urlUtils.redirectTo).not.toHaveBeenCalled();
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: `Can't create snippet: ${TEST_MUTATION_ERROR}`,
           });
         });
@@ -385,7 +385,7 @@ describe('Snippet Edit app', () => {
             });
 
             expect(urlUtils.redirectTo).not.toHaveBeenCalled();
-            expect(createFlash).toHaveBeenCalledWith({
+            expect(createAlert).toHaveBeenCalledWith({
               message: `Can't update snippet: ${TEST_MUTATION_ERROR}`,
             });
           },
@@ -407,7 +407,7 @@ describe('Snippet Edit app', () => {
 
         it('should flash', () => {
           // Apollo automatically wraps the resolver's error in a NetworkError
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: `Can't update snippet: ${TEST_API_ERROR.message}`,
           });
         });
diff --git a/spec/frontend/snippets/components/embed_dropdown_spec.js b/spec/frontend/snippets/components/embed_dropdown_spec.js
index 389b1c618a3..ed5ea6cab8a 100644
--- a/spec/frontend/snippets/components/embed_dropdown_spec.js
+++ b/spec/frontend/snippets/components/embed_dropdown_spec.js
@@ -36,7 +36,7 @@ describe('snippets/components/embed_dropdown', () => {
 
         sections.push(current);
       } else {
-        const value = x.find(GlFormInputGroup).props('value');
+        const value = x.findComponent(GlFormInputGroup).props('value');
         const copyValue = x.find('button[title="Copy"]').attributes('data-clipboard-text');
 
         Object.assign(current, {
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 7ea27864519..33b8e2be969 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -4,7 +4,7 @@ import AxiosMockAdapter from 'axios-mock-adapter';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
@@ -46,9 +46,9 @@ describe('Snippet Blob Edit component', () => {
     });
   };
 
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findHeader = () => wrapper.find(BlobHeaderEdit);
-  const findContent = () => wrapper.find(SourceEditor);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findHeader = () => wrapper.findComponent(BlobHeaderEdit);
+  const findContent = () => wrapper.findComponent(SourceEditor);
   const getLastUpdatedArgs = () => {
     const event = wrapper.emitted()['blob-updated'];
 
@@ -125,7 +125,7 @@ describe('Snippet Blob Edit component', () => {
     it('should call flash', async () => {
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         message: "Can't fetch content for the blob: Error: Request failed with status code 500",
       });
     });
diff --git a/spec/frontend/snippets/components/snippet_blob_view_spec.js b/spec/frontend/snippets/components/snippet_blob_view_spec.js
index aa31377f390..c7ff8c21d80 100644
--- a/spec/frontend/snippets/components/snippet_blob_view_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_view_spec.js
@@ -69,13 +69,13 @@ describe('Blob Embeddable', () => {
   describe('rendering', () => {
     it('renders correct components', () => {
       createComponent();
-      expect(wrapper.find(BlobHeader).exists()).toBe(true);
-      expect(wrapper.find(BlobContent).exists()).toBe(true);
+      expect(wrapper.findComponent(BlobHeader).exists()).toBe(true);
+      expect(wrapper.findComponent(BlobContent).exists()).toBe(true);
     });
 
     it('sets simple viewer correctly', () => {
       createComponent();
-      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
     });
 
     it('sets rich viewer correctly', () => {
@@ -83,20 +83,20 @@ describe('Blob Embeddable', () => {
       createComponent({
         data,
       });
-      expect(wrapper.find(RichViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(RichViewer).exists()).toBe(true);
     });
 
     it('correctly switches viewer type', async () => {
       createComponent();
-      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
 
       wrapper.vm.switchViewer(RichViewerMock.type);
 
       await nextTick();
-      expect(wrapper.find(RichViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(RichViewer).exists()).toBe(true);
       await wrapper.vm.switchViewer(SimpleViewerMock.type);
 
-      expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
     });
 
     it('passes information about render error down to blob header', () => {
@@ -110,7 +110,7 @@ describe('Blob Embeddable', () => {
         },
       });
 
-      expect(wrapper.find(BlobHeader).props('hasRenderError')).toBe(true);
+      expect(wrapper.findComponent(BlobHeader).props('hasRenderError')).toBe(true);
     });
 
     describe('bob content in multi-file scenario', () => {
@@ -161,7 +161,7 @@ describe('Blob Embeddable', () => {
 
           await nextTick();
 
-          const findContent = () => wrapper.find(BlobContent);
+          const findContent = () => wrapper.findComponent(BlobContent);
 
           expect(findContent().props('content')).toBe(expectedContent);
         },
@@ -169,36 +169,69 @@ describe('Blob Embeddable', () => {
     });
 
     describe('URLS with hash', () => {
-      beforeEach(() => {
-        window.location.hash = '#LC2';
-      });
-
       afterEach(() => {
         window.location.hash = '';
       });
 
-      it('renders simple viewer by default if URL contains hash', () => {
-        createComponent({
-          data: {},
+      describe('if hash starts with #LC', () => {
+        beforeEach(() => {
+          window.location.hash = '#LC2';
+        });
+
+        it('renders simple viewer by default', () => {
+          createComponent({
+            data: {},
+          });
+
+          expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+          expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
         });
 
-        expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
-        expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+        describe('switchViewer()', () => {
+          it('switches to the passed viewer', async () => {
+            createComponent();
+
+            wrapper.vm.switchViewer(RichViewerMock.type);
+
+            await nextTick();
+            expect(wrapper.vm.activeViewerType).toBe(RichViewerMock.type);
+            expect(wrapper.findComponent(RichViewer).exists()).toBe(true);
+
+            await wrapper.vm.switchViewer(SimpleViewerMock.type);
+            expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+            expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
+          });
+        });
       });
 
-      describe('switchViewer()', () => {
-        it('switches to the passed viewer', async () => {
-          createComponent();
+      describe('if hash starts with anything else', () => {
+        beforeEach(() => {
+          window.location.hash = '#last-headline';
+        });
 
-          wrapper.vm.switchViewer(RichViewerMock.type);
+        it('renders rich viewer by default', () => {
+          createComponent({
+            data: {},
+          });
 
-          await nextTick();
           expect(wrapper.vm.activeViewerType).toBe(RichViewerMock.type);
-          expect(wrapper.find(RichViewer).exists()).toBe(true);
+          expect(wrapper.findComponent(RichViewer).exists()).toBe(true);
+        });
 
-          await wrapper.vm.switchViewer(SimpleViewerMock.type);
-          expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
-          expect(wrapper.find(SimpleViewer).exists()).toBe(true);
+        describe('switchViewer()', () => {
+          it('switches to the passed viewer', async () => {
+            createComponent();
+
+            wrapper.vm.switchViewer(SimpleViewerMock.type);
+
+            await nextTick();
+            expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
+            expect(wrapper.findComponent(SimpleViewer).exists()).toBe(true);
+
+            await wrapper.vm.switchViewer(RichViewerMock.type);
+            expect(wrapper.vm.activeViewerType).toBe(RichViewerMock.type);
+            expect(wrapper.findComponent(RichViewer).exists()).toBe(true);
+          });
         });
       });
     });
@@ -206,7 +239,7 @@ describe('Blob Embeddable', () => {
 
   describe('functionality', () => {
     describe('render error', () => {
-      const findContentEl = () => wrapper.find(BlobContent);
+      const findContentEl = () => wrapper.findComponent(BlobContent);
 
       it('correctly sets blob on the blob-content-error component', () => {
         createComponent();
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index b750225a383..c930c9f635b 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -10,7 +10,7 @@ import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
 import SnippetHeader, { i18n } from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/delete_snippet.mutation.graphql';
 import axios from '~/lib/utils/axios_utils';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_DANGER, VARIANT_SUCCESS } from '~/flash';
 
 jest.mock('~/flash');
 
@@ -267,9 +267,9 @@ describe('Snippet header component', () => {
     });
 
     it.each`
-      request | variant      | text
-      ${200}  | ${'SUCCESS'} | ${i18n.snippetSpamSuccess}
-      ${500}  | ${'DANGER'}  | ${i18n.snippetSpamFailure}
+      request | variant            | text
+      ${200}  | ${VARIANT_SUCCESS} | ${i18n.snippetSpamSuccess}
+      ${500}  | ${VARIANT_DANGER}  | ${i18n.snippetSpamFailure}
     `(
       'renders a "$variant" flash message with "$text" message for a request with a "$request" response',
       async ({ request, variant, text }) => {
@@ -278,9 +278,9 @@ describe('Snippet header component', () => {
         submitAsSpamBtn.trigger('click');
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenLastCalledWith({
+        expect(createAlert).toHaveBeenLastCalledWith({
           message: expect.stringContaining(text),
-          type: FLASH_TYPES[variant],
+          variant,
         });
       },
     );
@@ -311,7 +311,7 @@ describe('Snippet header component', () => {
 
   it('renders modal for deletion of a snippet', () => {
     createComponent();
-    expect(wrapper.find(GlModal).exists()).toBe(true);
+    expect(wrapper.findComponent(GlModal).exists()).toBe(true);
   });
 
   it.each`
diff --git a/spec/frontend/snippets/components/snippet_title_spec.js b/spec/frontend/snippets/components/snippet_title_spec.js
index 48fb51ce703..7c40735d64e 100644
--- a/spec/frontend/snippets/components/snippet_title_spec.js
+++ b/spec/frontend/snippets/components/snippet_title_spec.js
@@ -39,12 +39,12 @@ describe('Snippet header component', () => {
     createComponent();
 
     expect(wrapper.text().trim()).toContain(title);
-    expect(wrapper.find(SnippetDescription).props('description')).toBe(descriptionHtml);
+    expect(wrapper.findComponent(SnippetDescription).props('description')).toBe(descriptionHtml);
   });
 
   it('does not render recent changes time stamp if there were no updates', () => {
     createComponent();
-    expect(wrapper.find(GlSprintf).exists()).toBe(false);
+    expect(wrapper.findComponent(GlSprintf).exists()).toBe(false);
   });
 
   it('does not render recent changes time stamp if the time for creation and updates match', () => {
@@ -57,7 +57,7 @@ describe('Snippet header component', () => {
     });
     createComponent({ props });
 
-    expect(wrapper.find(GlSprintf).exists()).toBe(false);
+    expect(wrapper.findComponent(GlSprintf).exists()).toBe(false);
   });
 
   it('renders translated string with most recent changes timestamp if changes were made', () => {
@@ -70,6 +70,6 @@ describe('Snippet header component', () => {
     });
     createComponent({ props });
 
-    expect(wrapper.find(GlSprintf).exists()).toBe(true);
+    expect(wrapper.findComponent(GlSprintf).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 2d043a5caba..29eb002ef4a 100644
--- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -39,13 +39,13 @@ describe('Snippet Visibility Edit component', () => {
     });
   }
 
-  const findLink = () => wrapper.find('label').find(GlLink);
-  const findRadios = () => wrapper.find(GlFormRadioGroup).findAllComponents(GlFormRadio);
+  const findLink = () => wrapper.find('label').findComponent(GlLink);
+  const findRadios = () => wrapper.findComponent(GlFormRadioGroup).findAllComponents(GlFormRadio);
   const findRadiosData = () =>
     findRadios().wrappers.map((x) => {
       return {
         value: x.find('input').attributes('value'),
-        icon: x.find(GlIcon).props('name'),
+        icon: x.findComponent(GlIcon).props('name'),
         description: x.find('.help-text').text(),
         text: x.find('.js-visibility-option').text(),
       };
@@ -147,7 +147,7 @@ describe('Snippet Visibility Edit component', () => {
 
       createComponent({ propsData: { value } });
 
-      expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
+      expect(wrapper.findComponent(GlFormRadioGroup).attributes('checked')).toBe(value);
     });
   });
 });
diff --git a/spec/frontend/terms/components/app_spec.js b/spec/frontend/terms/components/app_spec.js
index ee78b35843a..f1dbc004da8 100644
--- a/spec/frontend/terms/components/app_spec.js
+++ b/spec/frontend/terms/components/app_spec.js
@@ -74,7 +74,7 @@ describe('TermsApp', () => {
 
       expect(findButton(defaultProvide.paths.accept).attributes('disabled')).toBe('disabled');
 
-      wrapper.find(GlIntersectionObserver).vm.$emit('appear');
+      wrapper.findComponent(GlIntersectionObserver).vm.$emit('appear');
 
       await nextTick();
 
diff --git a/spec/frontend/terraform/components/states_table_spec.js b/spec/frontend/terraform/components/states_table_spec.js
index 12a44452717..0b3b169891b 100644
--- a/spec/frontend/terraform/components/states_table_spec.js
+++ b/spec/frontend/terraform/components/states_table_spec.js
@@ -160,8 +160,8 @@ describe('StatesTable', () => {
       const state = states.at(lineNumber);
 
       expect(state.text()).toContain(name);
-      expect(state.find(GlBadge).exists()).toBe(hasBadge);
-      expect(state.find(GlLoadingIcon).exists()).toBe(loading);
+      expect(state.findComponent(GlBadge).exists()).toBe(hasBadge);
+      expect(state.findComponent(GlLoadingIcon).exists()).toBe(loading);
 
       if (hasBadge) {
         const badge = wrapper.findByTestId(`state-badge-${name}`);
@@ -198,7 +198,7 @@ describe('StatesTable', () => {
       const states = wrapper.findAll('[data-testid="terraform-states-table-pipeline"]');
       const state = states.at(lineNumber);
 
-      expect(state.find(GlTooltip).exists()).toBe(toolTipAdded);
+      expect(state.findComponent(GlTooltip).exists()).toBe(toolTipAdded);
       expect(state.text()).toMatchInterpolatedText(pipelineText);
     },
   );
diff --git a/spec/frontend/terraform/components/terraform_list_spec.js b/spec/frontend/terraform/components/terraform_list_spec.js
index cfd82768098..580951e799a 100644
--- a/spec/frontend/terraform/components/terraform_list_spec.js
+++ b/spec/frontend/terraform/components/terraform_list_spec.js
@@ -57,11 +57,11 @@ describe('TerraformList', () => {
     });
   };
 
-  const findBadge = () => wrapper.find(GlBadge);
-  const findEmptyState = () => wrapper.find(EmptyState);
-  const findPaginationButtons = () => wrapper.find(GlKeysetPagination);
-  const findStatesTable = () => wrapper.find(StatesTable);
-  const findTab = () => wrapper.find(GlTab);
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findEmptyState = () => wrapper.findComponent(EmptyState);
+  const findPaginationButtons = () => wrapper.findComponent(GlKeysetPagination);
+  const findStatesTable = () => wrapper.findComponent(StatesTable);
+  const findTab = () => wrapper.findComponent(GlTab);
 
   afterEach(() => {
     wrapper.destroy();
@@ -182,7 +182,7 @@ describe('TerraformList', () => {
     });
 
     it('displays an alert message', () => {
-      expect(wrapper.find(GlAlert).exists()).toBe(true);
+      expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
     });
   });
 
@@ -195,7 +195,7 @@ describe('TerraformList', () => {
     });
 
     it('displays a loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/toggles/index_spec.js b/spec/frontend/toggles/index_spec.js
index 19c4d6f1f1d..f8c43e0ad0c 100644
--- a/spec/frontend/toggles/index_spec.js
+++ b/spec/frontend/toggles/index_spec.js
@@ -83,12 +83,12 @@ describe('toggles/index.js', () => {
 
         expect(listener).toHaveBeenCalledTimes(0);
 
-        wrapper.find(GlToggle).vm.$emit(event, true);
+        wrapper.findComponent(GlToggle).vm.$emit(event, true);
 
         expect(listener).toHaveBeenCalledTimes(1);
         expect(listener).toHaveBeenLastCalledWith(true);
 
-        wrapper.find(GlToggle).vm.$emit(event, false);
+        wrapper.findComponent(GlToggle).vm.$emit(event, false);
 
         expect(listener).toHaveBeenCalledTimes(2);
         expect(listener).toHaveBeenLastCalledWith(false);
diff --git a/spec/frontend/token_access/token_access_spec.js b/spec/frontend/token_access/token_access_spec.js
index 024e7dfff8c..c55ac32b6a6 100644
--- a/spec/frontend/token_access/token_access_spec.js
+++ b/spec/frontend/token_access/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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import TokenAccess from '~/token_access/components/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';
@@ -40,7 +40,7 @@ describe('TokenAccess component', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAddProjectBtn = () => wrapper.findByRole('button', { name: 'Add project' });
   const findRemoveProjectBtn = () => wrapper.findByRole('button', { name: 'Remove access' });
-  const findTokenSection = () => wrapper.find('[data-testid="token-section"]');
+  const findTokenDisabledAlert = () => wrapper.findByTestId('token-disabled-alert');
 
   const createMockApolloProvider = (requestHandlers) => {
     return createMockApollo(requestHandlers);
@@ -80,7 +80,7 @@ describe('TokenAccess component', () => {
   });
 
   describe('toggle', () => {
-    it('the toggle should be enabled and the token section should show', async () => {
+    it('the toggle is on and the alert is hidden', async () => {
       createComponent([
         [getCIJobTokenScopeQuery, enabledJobTokenScopeHandler],
         [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope],
@@ -89,10 +89,10 @@ describe('TokenAccess component', () => {
       await waitForPromises();
 
       expect(findToggle().props('value')).toBe(true);
-      expect(findTokenSection().exists()).toBe(true);
+      expect(findTokenDisabledAlert().exists()).toBe(false);
     });
 
-    it('the toggle should be disabled and the token section should show', async () => {
+    it('the toggle is off and the alert is visible', async () => {
       createComponent([
         [getCIJobTokenScopeQuery, disabledJobTokenScopeHandler],
         [getProjectsWithCIJobTokenScopeQuery, getProjectsWithScope],
@@ -101,7 +101,7 @@ describe('TokenAccess component', () => {
       await waitForPromises();
 
       expect(findToggle().props('value')).toBe(false);
-      expect(findTokenSection().exists()).toBe(true);
+      expect(findTokenDisabledAlert().exists()).toBe(true);
     });
   });
 
@@ -144,7 +144,7 @@ describe('TokenAccess component', () => {
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -187,7 +187,7 @@ describe('TokenAccess component', () => {
 
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 });
diff --git a/spec/frontend/tooltips/components/tooltips_spec.js b/spec/frontend/tooltips/components/tooltips_spec.js
index 998bb2a9ea2..d5a63a99601 100644
--- a/spec/frontend/tooltips/components/tooltips_spec.js
+++ b/spec/frontend/tooltips/components/tooltips_spec.js
@@ -49,7 +49,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).props('target')).toBe(target);
+      expect(wrapper.findComponent(GlTooltip).props('target')).toBe(target);
     });
 
     it('does not attach a tooltip to a target with empty title', async () => {
@@ -59,7 +59,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).exists()).toBe(false);
+      expect(wrapper.findComponent(GlTooltip).exists()).toBe(false);
     });
 
     it('does not attach a tooltip twice to the same element', async () => {
@@ -76,7 +76,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).text()).toBe(target.getAttribute('title'));
+      expect(wrapper.findComponent(GlTooltip).text()).toBe(target.getAttribute('title'));
     });
 
     it('supports HTML content', async () => {
@@ -88,7 +88,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).html()).toContain(target.getAttribute('title'));
+      expect(wrapper.findComponent(GlTooltip).html()).toContain(target.getAttribute('title'));
     });
 
     it('sets the configuration values passed in the config object', async () => {
@@ -96,7 +96,7 @@ describe('tooltips/components/tooltips.vue', () => {
       target = createTooltipTarget();
       wrapper.vm.addTooltips([target], config);
       await nextTick();
-      expect(wrapper.find(GlTooltip).props()).toMatchObject(config);
+      expect(wrapper.findComponent(GlTooltip).props()).toMatchObject(config);
     });
 
     it.each`
@@ -113,7 +113,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
         await nextTick();
 
-        expect(wrapper.find(GlTooltip).props(prop)).toBe(value);
+        expect(wrapper.findComponent(GlTooltip).props(prop)).toBe(value);
       },
     );
   });
@@ -180,7 +180,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       wrapper.vm.triggerEvent(target, event);
 
-      expect(wrapper.find(GlTooltip).emitted(event)).toHaveLength(1);
+      expect(wrapper.findComponent(GlTooltip).emitted(event)).toHaveLength(1);
     });
   });
 
@@ -198,14 +198,14 @@ describe('tooltips/components/tooltips.vue', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).text()).toBe(currentTitle);
+      expect(wrapper.findComponent(GlTooltip).text()).toBe(currentTitle);
 
       target.setAttribute('title', newTitle);
       wrapper.vm.fixTitle(target);
 
       await nextTick();
 
-      expect(wrapper.find(GlTooltip).text()).toBe(newTitle);
+      expect(wrapper.findComponent(GlTooltip).text()).toBe(newTitle);
     });
   });
 
diff --git a/spec/frontend/user_lists/components/edit_user_list_spec.js b/spec/frontend/user_lists/components/edit_user_list_spec.js
index 941c8244247..5f067d9de3c 100644
--- a/spec/frontend/user_lists/components/edit_user_list_spec.js
+++ b/spec/frontend/user_lists/components/edit_user_list_spec.js
@@ -47,7 +47,7 @@ describe('user_lists/components/edit_user_list', () => {
     });
 
     it('should show a loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -60,7 +60,7 @@ describe('user_lists/components/edit_user_list', () => {
       factory();
       await waitForPromises();
 
-      alert = wrapper.find(GlAlert);
+      alert = wrapper.findComponent(GlAlert);
     });
 
     it('should show a flash with the error respopnse', () => {
@@ -72,7 +72,7 @@ describe('user_lists/components/edit_user_list', () => {
     });
 
     it('should not show a user list form', () => {
-      expect(wrapper.find(UserListForm).exists()).toBe(false);
+      expect(wrapper.findComponent(UserListForm).exists()).toBe(false);
     });
   });
 
@@ -129,7 +129,7 @@ describe('user_lists/components/edit_user_list', () => {
         clickSave();
         await waitForPromises();
 
-        alert = wrapper.find(GlAlert);
+        alert = wrapper.findComponent(GlAlert);
       });
 
       it('should show a flash with the error respopnse', () => {
diff --git a/spec/frontend/user_lists/components/new_user_list_spec.js b/spec/frontend/user_lists/components/new_user_list_spec.js
index ace4a284347..8683cf2463c 100644
--- a/spec/frontend/user_lists/components/new_user_list_spec.js
+++ b/spec/frontend/user_lists/components/new_user_list_spec.js
@@ -72,7 +72,7 @@ describe('user_lists/components/new_user_list', () => {
 
         await waitForPromises();
 
-        alert = wrapper.find(GlAlert);
+        alert = wrapper.findComponent(GlAlert);
       });
 
       it('should show a flash with the error respopnse', () => {
diff --git a/spec/frontend/user_lists/components/user_list_spec.js b/spec/frontend/user_lists/components/user_list_spec.js
index f126c733dd5..e02862cad2b 100644
--- a/spec/frontend/user_lists/components/user_list_spec.js
+++ b/spec/frontend/user_lists/components/user_list_spec.js
@@ -50,7 +50,7 @@ describe('User List', () => {
     });
 
     it('shows a loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -157,7 +157,7 @@ describe('User List', () => {
   });
 
   describe('error', () => {
-    const findAlert = () => wrapper.find(GlAlert);
+    const findAlert = () => wrapper.findComponent(GlAlert);
 
     beforeEach(async () => {
       Api.fetchFeatureFlagUserList.mockRejectedValue();
@@ -190,7 +190,7 @@ describe('User List', () => {
     });
 
     it('displays an empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
     });
   });
 });
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 fb5093eb065..3324b040b86 100644
--- a/spec/frontend/user_lists/components/user_lists_table_spec.js
+++ b/spec/frontend/user_lists/components/user_lists_table_spec.js
@@ -59,7 +59,7 @@ describe('User Lists Table', () => {
 
   describe('delete button', () => {
     it('should display the confirmation modal', async () => {
-      const modal = wrapper.find(GlModal);
+      const modal = wrapper.findComponent(GlModal);
 
       wrapper.find('[data-testid="delete-user-list"]').trigger('click');
 
@@ -73,7 +73,7 @@ describe('User Lists Table', () => {
     let modal;
 
     beforeEach(async () => {
-      modal = wrapper.find(GlModal);
+      modal = wrapper.findComponent(GlModal);
 
       wrapper.find('button').trigger('click');
 
diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js
index 0530569c9df..8ce071c075f 100644
--- a/spec/frontend/user_popovers_spec.js
+++ b/spec/frontend/user_popovers_spec.js
@@ -188,8 +188,8 @@ describe('User Popovers', () => {
       });
 
       it('removes title attribute from user links', () => {
-        expect(userLink.getAttribute('title')).toBeFalsy();
-        expect(userLink.dataset.originalTitle).toBeFalsy();
+        expect(userLink.getAttribute('title')).toBe('');
+        expect(userLink.dataset.originalTitle).toBe('');
       });
 
       it('fetches user info and status from the user cache', () => {
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 05cd1bb5b3d..1f3b6dce620 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,7 +1,7 @@
 import { nextTick } from 'vue';
 import { GlButton, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -49,7 +49,7 @@ describe('MRWidget approvals', () => {
     });
   };
 
-  const findAction = () => wrapper.find(GlButton);
+  const findAction = () => wrapper.findComponent(GlButton);
   const findActionData = () => {
     const action = findAction();
 
@@ -61,8 +61,8 @@ describe('MRWidget approvals', () => {
           text: action.text(),
         };
   };
-  const findSummary = () => wrapper.find(ApprovalsSummary);
-  const findOptionalSummary = () => wrapper.find(ApprovalsSummaryOptional);
+  const findSummary = () => wrapper.findComponent(ApprovalsSummary);
+  const findOptionalSummary = () => wrapper.findComponent(ApprovalsSummaryOptional);
   const findInvalidRules = () => wrapper.find('[data-testid="invalid-rules"]');
 
   beforeEach(() => {
@@ -129,7 +129,7 @@ describe('MRWidget approvals', () => {
     });
 
     it('flashes error', () => {
-      expect(createFlash).toHaveBeenCalledWith({ message: FETCH_ERROR });
+      expect(createAlert).toHaveBeenCalledWith({ message: FETCH_ERROR });
     });
   });
 
@@ -268,7 +268,7 @@ describe('MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith({ message: APPROVE_ERROR });
+            expect(createAlert).toHaveBeenCalledWith({ message: APPROVE_ERROR });
           });
         });
       });
@@ -319,7 +319,7 @@ describe('MRWidget approvals', () => {
           });
 
           it('flashes error message', () => {
-            expect(createFlash).toHaveBeenCalledWith({ message: UNAPPROVE_ERROR });
+            expect(createAlert).toHaveBeenCalledWith({ message: UNAPPROVE_ERROR });
           });
         });
       });
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 65cafc647e0..e6fb0495947 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
@@ -18,7 +18,7 @@ describe('MRWidget approvals summary optional', () => {
     wrapper = null;
   });
 
-  const findHelpLink = () => wrapper.find(GlLink);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
 
   describe('when can approve', () => {
     beforeEach(() => {
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 c2606346292..f4234083346 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
@@ -29,7 +29,7 @@ describe('MRWidget approvals summary', () => {
     });
   };
 
-  const findAvatars = () => wrapper.find(UserAvatarList);
+  const findAvatars = () => wrapper.findComponent(UserAvatarList);
 
   afterEach(() => {
     wrapper.destroy();
@@ -136,7 +136,7 @@ describe('MRWidget approvals summary', () => {
     });
 
     it('does not render avatar list', () => {
-      expect(wrapper.find(UserAvatarList).exists()).toBe(false);
+      expect(wrapper.findComponent(UserAvatarList).exists()).toBe(false);
     });
   });
 });
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 e2386bc7f2b..73fa4b7b08f 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
@@ -60,7 +60,7 @@ describe('Merge Requests Artifacts list app', () => {
     });
 
     it('renders a loading icon', () => {
-      const loadingIcon = wrapper.find(GlLoadingIcon);
+      const loadingIcon = wrapper.findComponent(GlLoadingIcon);
       expect(loadingIcon.exists()).toBe(true);
     });
 
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 d519ad2cdb0..b7bf72cd215 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
@@ -31,11 +31,11 @@ describe('Artifacts List', () => {
   });
 
   it('renders link for the artifact', () => {
-    expect(wrapper.find(GlLink).attributes('href')).toEqual(data.artifacts[0].url);
+    expect(wrapper.findComponent(GlLink).attributes('href')).toEqual(data.artifacts[0].url);
   });
 
   it('renders artifact name', () => {
-    expect(wrapper.find(GlLink).text()).toEqual(data.artifacts[0].text);
+    expect(wrapper.findComponent(GlLink).text()).toEqual(data.artifacts[0].text);
   });
 
   it('renders job url', () => {
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 01fbcb2154f..c253dc63f23 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
@@ -23,7 +23,7 @@ describe('Merge Request Collapsible Extension', () => {
 
   const findTitle = () => wrapper.find('[data-testid="mr-collapsible-title"]');
   const findErrorMessage = () => wrapper.find('.js-error-state');
-  const findIcon = () => wrapper.find(GlIcon);
+  const findIcon = () => wrapper.findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -77,7 +77,7 @@ describe('Merge Request Collapsible Extension', () => {
     });
 
     it('renders loading spinner', () => {
-      expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true);
     });
   });
 
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 8fd93809e01..90a29d15488 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
@@ -32,7 +32,9 @@ describe('MrWidgetAuthorTime', () => {
   });
 
   it('renders author', () => {
-    expect(wrapper.find(MrWidgetAuthor).props('author')).toStrictEqual(defaultProps.author);
+    expect(wrapper.findComponent(MrWidgetAuthor).props('author')).toStrictEqual(
+      defaultProps.author,
+    );
   });
 
   it('renders provided time', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/mr_widget_expandable_section_spec.js b/spec/frontend/vue_merge_request_widget/components/mr_widget_expandable_section_spec.js
index 631aef412a6..8eaed998eb5 100644
--- a/spec/frontend/vue_merge_request_widget/components/mr_widget_expandable_section_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/mr_widget_expandable_section_spec.js
@@ -6,8 +6,8 @@ import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_widge
 describe('MrWidgetExpanableSection', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find(GlButton);
-  const findCollapse = () => wrapper.find(GlCollapse);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findCollapse = () => wrapper.findComponent(GlCollapse);
 
   beforeEach(() => {
     wrapper = shallowMount(MrCollapsibleSection, {
@@ -19,7 +19,7 @@ describe('MrWidgetExpanableSection', () => {
   });
 
   it('renders Icon', () => {
-    expect(wrapper.find(GlIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
   });
 
   it('renders header slot', () => {
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 ebd10f31fa7..6a9b019fb4f 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
@@ -21,6 +21,6 @@ describe('MrWidgetIcon', () => {
 
   it('renders icon and container', () => {
     expect(wrapper.element.className).toContain('circle-icon-container');
-    expect(wrapper.find(GlIcon).props('name')).toEqual(TEST_ICON);
+    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 efe2bf75c3f..c3f6331e560 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
@@ -41,8 +41,8 @@ describe('MrWidgetPipelineContainer', () => {
     });
 
     it('renders pipeline', () => {
-      expect(wrapper.find(MrWidgetPipeline).exists()).toBe(true);
-      expect(wrapper.find(MrWidgetPipeline).props()).toMatchObject({
+      expect(wrapper.findComponent(MrWidgetPipeline).exists()).toBe(true);
+      expect(wrapper.findComponent(MrWidgetPipeline).props()).toMatchObject({
         pipeline: mockStore.pipeline,
         pipelineCoverageDelta: mockStore.pipelineCoverageDelta,
         ciStatus: mockStore.ciStatus,
@@ -82,9 +82,9 @@ describe('MrWidgetPipelineContainer', () => {
     });
 
     it('renders pipeline', () => {
-      expect(wrapper.find(MrWidgetPipeline).exists()).toBe(true);
+      expect(wrapper.findComponent(MrWidgetPipeline).exists()).toBe(true);
       expect(findCIErrorMessage().exists()).toBe(false);
-      expect(wrapper.find(MrWidgetPipeline).props()).toMatchObject({
+      expect(wrapper.findComponent(MrWidgetPipeline).props()).toMatchObject({
         pipeline: mockStore.mergePipeline,
         pipelineCoverageDelta: mockStore.pipelineCoverageDelta,
         ciStatus: mockStore.mergePipeline.details.status.text,
@@ -102,7 +102,7 @@ describe('MrWidgetPipelineContainer', () => {
           targetBranch: 'Foo<script>alert("XSS")</script>',
         },
       });
-      expect(wrapper.find(MrWidgetPipeline).props().sourceBranchLink).toBe('Foo');
+      expect(wrapper.findComponent(MrWidgetPipeline).props().sourceBranchLink).toBe('Foo');
     });
 
     it('renders deployments', () => {
@@ -125,7 +125,7 @@ describe('MrWidgetPipelineContainer', () => {
     it('renders the artifacts app', () => {
       factory();
 
-      expect(wrapper.find(ArtifactsApp).isVisible()).toBe(true);
+      expect(wrapper.findComponent(ArtifactsApp).isVisible()).toBe(true);
     });
   });
 });
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 d6c67dab381..73358edee78 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
@@ -57,7 +57,7 @@ describe('MRWidgetSuggestPipeline', () => {
       });
 
       it('renders widget icon', () => {
-        const icon = wrapper.find(MrWidgetIcon);
+        const icon = wrapper.findComponent(MrWidgetIcon);
 
         expect(icon.exists()).toBe(true);
         expect(icon.props()).toEqual(
@@ -115,7 +115,7 @@ describe('MRWidgetSuggestPipeline', () => {
     });
 
     describe('dismissible', () => {
-      const findDismissContainer = () => wrapper.find(dismissibleContainer);
+      const findDismissContainer = () => wrapper.findComponent(dismissibleContainer);
 
       beforeEach(() => {
         wrapper = shallowMount(suggestPipelineComponent, { propsData: suggestProps });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index 635ef0f6b0d..5f383c468d8 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -72,11 +72,14 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
       <div
         class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
       >
-        <div>
+        <div
+          class="gl-display-flex gl-align-items-flex-start"
+        >
           <div
             class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
             lazy=""
             no-caret=""
+            title="Options"
           >
             <!---->
             <button
@@ -246,11 +249,14 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
       <div
         class="gl-display-flex gl-md-display-block gl-font-size-0 gl-ml-auto"
       >
-        <div>
+        <div
+          class="gl-display-flex gl-align-items-flex-start"
+        >
           <div
             class="dropdown b-dropdown gl-new-dropdown gl-display-block gl-md-display-none! btn-group"
             lazy=""
             no-caret=""
+            title="Options"
           >
             <!---->
             <button
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 1900b53ac11..d85574262fe 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
@@ -15,9 +15,9 @@ describe('Merge request widget merge checks failed state component', () => {
   });
 
   it.each`
-    mrState                                          | displayText
-    ${{ approvals: true, isApproved: false }}        | ${'approvalNeeded'}
-    ${{ blockingMergeRequests: { total_count: 1 } }} | ${'blockingMergeRequests'}
+    mrState                                      | displayText
+    ${{ approvals: true, isApproved: false }}    | ${'approvalNeeded'}
+    ${{ detailedMergeStatus: 'BLOCKED_STATUS' }} | ${'blockingMergeRequests'}
   `('display $displayText text for $mrState', ({ mrState, displayText }) => {
     factory({ mr: mrState });
 
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 9320e733636..398a3912882 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
@@ -7,7 +7,7 @@ import eventHub from '~/vue_merge_request_widget/event_hub';
 describe('MRWidgetAutoMergeFailed', () => {
   let wrapper;
   const mergeError = 'This is the merge error';
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.findComponent(GlButton);
 
   const createComponent = (props = {}, mergeRequestWidgetGraphql = false) => {
     wrapper = mount(AutoMergeFailedComponent, {
@@ -61,7 +61,7 @@ describe('MRWidgetAutoMergeFailed', () => {
         await nextTick();
 
         expect(findButton().attributes('disabled')).toBe('disabled');
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
       });
     });
   });
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 2606933450e..a3aa563b516 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
@@ -1,180 +1,172 @@
 import { getByRole } from '@testing-library/dom';
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import waitForPromises from 'helpers/wait_for_promises';
 import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
 import modalEventHub from '~/projects/commit/event_hub';
-import mergedComponent from '~/vue_merge_request_widget/components/states/mr_widget_merged.vue';
+import MergedComponent from '~/vue_merge_request_widget/components/states/mr_widget_merged.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
 describe('MRWidgetMerged', () => {
-  let vm;
+  let wrapper;
   const targetBranch = 'foo';
-
-  beforeEach(() => {
-    jest.spyOn(document, 'dispatchEvent');
-    const Component = Vue.extend(mergedComponent);
-    const mr = {
-      isRemovingSourceBranch: false,
-      cherryPickInForkPath: false,
-      canCherryPickInCurrentMR: true,
-      revertInForkPath: false,
-      canRevertInCurrentMR: true,
-      canRemoveSourceBranch: true,
-      sourceBranchRemoved: true,
-      metrics: {
-        mergedBy: {
-          name: 'Administrator',
-          username: 'root',
-          webUrl: 'http://localhost:3000/root',
-          avatarUrl:
-            'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+  const mr = {
+    isRemovingSourceBranch: false,
+    cherryPickInForkPath: false,
+    canCherryPickInCurrentMR: true,
+    revertInForkPath: false,
+    canRevertInCurrentMR: true,
+    canRemoveSourceBranch: true,
+    sourceBranchRemoved: true,
+    metrics: {
+      mergedBy: {
+        name: 'Administrator',
+        username: 'root',
+        webUrl: 'http://localhost:3000/root',
+        avatarUrl:
+          'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      },
+      mergedAt: 'Jan 24, 2018 1:02pm UTC',
+      readableMergedAt: '',
+      closedBy: {},
+      closedAt: 'Jan 24, 2018 1:02pm UTC',
+      readableClosedAt: '',
+    },
+    updatedAt: 'mergedUpdatedAt',
+    shortMergeCommitSha: '958c0475',
+    mergeCommitSha: '958c047516e182dfc52317f721f696e8a1ee85ed',
+    mergeCommitPath:
+      'http://localhost:3000/root/nautilus/commit/f7ce827c314c9340b075657fd61c789fb01cf74d',
+    sourceBranch: 'bar',
+    targetBranch,
+  };
+
+  const service = {
+    removeSourceBranch: () => nextTick(),
+  };
+
+  const createComponent = (customMrFields = {}) => {
+    wrapper = mount(MergedComponent, {
+      propsData: {
+        mr: {
+          ...mr,
+          ...customMrFields,
         },
-        mergedAt: 'Jan 24, 2018 1:02pm UTC',
-        readableMergedAt: '',
-        closedBy: {},
-        closedAt: 'Jan 24, 2018 1:02pm UTC',
-        readableClosedAt: '',
+        service,
       },
-      updatedAt: 'mergedUpdatedAt',
-      shortMergeCommitSha: '958c0475',
-      mergeCommitSha: '958c047516e182dfc52317f721f696e8a1ee85ed',
-      mergeCommitPath:
-        'http://localhost:3000/root/nautilus/commit/f7ce827c314c9340b075657fd61c789fb01cf74d',
-      sourceBranch: 'bar',
-      targetBranch,
-    };
-
-    const service = {
-      removeSourceBranch() {},
-    };
+    });
+  };
 
+  beforeEach(() => {
+    jest.spyOn(document, 'dispatchEvent');
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-
-    vm = mountComponent(Component, { mr, service });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('computed', () => {
-    describe('shouldShowRemoveSourceBranch', () => {
-      it('returns true when sourceBranchRemoved is false', () => {
-        vm.mr.sourceBranchRemoved = false;
-
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(true);
-      });
-
-      it('returns false when sourceBranchRemoved is true', () => {
-        vm.mr.sourceBranchRemoved = true;
-
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(false);
-      });
-
-      it('returns false when canRemoveSourceBranch is false', () => {
-        vm.mr.sourceBranchRemoved = false;
-        vm.mr.canRemoveSourceBranch = false;
-
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(false);
-      });
-
-      it('returns false when is making request', () => {
-        vm.mr.canRemoveSourceBranch = true;
-        vm.isMakingRequest = true;
-
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(false);
-      });
+  const findButtonByText = (text) =>
+    wrapper.findAll('button').wrappers.find((w) => w.text() === text);
+  const findRemoveSourceBranchButton = () => findButtonByText('Delete source branch');
 
-      it('returns true when all are true', () => {
-        vm.mr.isRemovingSourceBranch = true;
-        vm.mr.canRemoveSourceBranch = true;
-        vm.isMakingRequest = true;
+  describe('remove source branch button', () => {
+    it('is displayed when sourceBranchRemoved is false', () => {
+      createComponent({ sourceBranchRemoved: false });
 
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(false);
-      });
+      expect(findRemoveSourceBranchButton().exists()).toBe(true);
     });
 
-    describe('shouldShowSourceBranchRemoving', () => {
-      it('should correct value when fields changed', () => {
-        vm.mr.sourceBranchRemoved = false;
+    it('is not displayed when sourceBranchRemoved is true', () => {
+      createComponent({ sourceBranchRemoved: true });
 
-        expect(vm.shouldShowSourceBranchRemoving).toEqual(false);
+      expect(findRemoveSourceBranchButton()).toBe(undefined);
+    });
 
-        vm.mr.sourceBranchRemoved = true;
+    it('is not displayed when canRemoveSourceBranch is true', () => {
+      createComponent({ sourceBranchRemoved: false, canRemoveSourceBranch: false });
 
-        expect(vm.shouldShowRemoveSourceBranch).toEqual(false);
+      expect(findRemoveSourceBranchButton()).toBe(undefined);
+    });
 
-        vm.mr.sourceBranchRemoved = false;
-        vm.isMakingRequest = true;
+    it('is not displayed when is making request', async () => {
+      createComponent({ sourceBranchRemoved: false, canRemoveSourceBranch: true });
 
-        expect(vm.shouldShowSourceBranchRemoving).toEqual(true);
+      await findRemoveSourceBranchButton().trigger('click');
 
-        vm.isMakingRequest = false;
-        vm.mr.isRemovingSourceBranch = true;
+      expect(findRemoveSourceBranchButton()).toBe(undefined);
+    });
 
-        expect(vm.shouldShowSourceBranchRemoving).toEqual(true);
+    it('is not displayed when all are true', () => {
+      createComponent({
+        isRemovingSourceBranch: true,
+        sourceBranchRemoved: false,
+        canRemoveSourceBranch: true,
       });
+
+      expect(findRemoveSourceBranchButton()).toBe(undefined);
     });
   });
 
-  describe('methods', () => {
-    describe('removeSourceBranch', () => {
-      it('should set flag and call service then request main component to update the widget', async () => {
-        jest.spyOn(vm.service, 'removeSourceBranch').mockReturnValue(
-          new Promise((resolve) => {
-            resolve({
-              data: {
-                message: 'Branch was deleted',
-              },
-            });
-          }),
-        );
+  it('should set flag and call service then request main component to update the widget when branch is removed', async () => {
+    createComponent({ sourceBranchRemoved: false });
+    jest.spyOn(service, 'removeSourceBranch').mockResolvedValue({
+      data: {
+        message: 'Branch was deleted',
+      },
+    });
 
-        vm.removeSourceBranch();
+    await findRemoveSourceBranchButton().trigger('click');
 
-        await waitForPromises();
+    await waitForPromises();
 
-        const args = eventHub.$emit.mock.calls[0];
+    const args = eventHub.$emit.mock.calls[0];
 
-        expect(vm.isMakingRequest).toEqual(true);
-        expect(args[0]).toEqual('MRWidgetUpdateRequested');
-        expect(args[1]).not.toThrow();
-      });
-    });
+    expect(args[0]).toEqual('MRWidgetUpdateRequested');
+    expect(args[1]).not.toThrow();
   });
 
   it('calls dispatchDocumentEvent to load in the modal component', () => {
+    createComponent();
+
     expect(document.dispatchEvent).toHaveBeenCalledWith(new CustomEvent('merged:UpdateActions'));
   });
 
   it('emits event to open the revert modal on revert button click', () => {
+    createComponent();
     const eventHubSpy = jest.spyOn(modalEventHub, '$emit');
 
-    getByRole(vm.$el, 'button', { name: /Revert/i }).click();
+    getByRole(wrapper.element, 'button', { name: /Revert/i }).click();
 
     expect(eventHubSpy).toHaveBeenCalledWith(OPEN_REVERT_MODAL);
   });
 
   it('emits event to open the cherry-pick modal on cherry-pick button click', () => {
+    createComponent();
     const eventHubSpy = jest.spyOn(modalEventHub, '$emit');
 
-    getByRole(vm.$el, 'button', { name: /Cherry-pick/i }).click();
+    getByRole(wrapper.element, 'button', { name: /Cherry-pick/i }).click();
 
     expect(eventHubSpy).toHaveBeenCalledWith(OPEN_CHERRY_PICK_MODAL);
   });
 
   it('has merged by information', () => {
-    expect(vm.$el.textContent).toContain('Merged by');
-    expect(vm.$el.textContent).toContain('Administrator');
+    createComponent();
+
+    expect(wrapper.text()).toContain('Merged by');
+    expect(wrapper.text()).toContain('Administrator');
   });
 
   it('shows revert and cherry-pick buttons', () => {
-    expect(vm.$el.textContent).toContain('Revert');
-    expect(vm.$el.textContent).toContain('Cherry-pick');
+    createComponent();
+
+    expect(wrapper.text()).toContain('Revert');
+    expect(wrapper.text()).toContain('Cherry-pick');
   });
 
   it('should use mergedEvent mergedAt as tooltip title', () => {
-    expect(vm.$el.querySelector('time').getAttribute('title')).toBe('Jan 24, 2018 1:02pm UTC');
+    createComponent();
+
+    expect(wrapper.find('time').attributes('title')).toBe('Jan 24, 2018 1:02pm UTC');
   });
 });
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 d5619d4996d..bd158d59d74 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
@@ -6,31 +6,42 @@ import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_i
 describe('PipelineFailed', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = (mr = {}) => {
     wrapper = shallowMount(PipelineFailed, {
+      propsData: {
+        mr,
+      },
       stubs: {
         GlSprintf,
       },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
   it('should render error status icon', () => {
+    createComponent();
+
     expect(wrapper.findComponent(StatusIcon).exists()).toBe(true);
     expect(wrapper.findComponent(StatusIcon).props().status).toBe('failed');
   });
 
   it('should render error message with a disabled merge button', () => {
+    createComponent();
+
     expect(wrapper.text()).toContain('Merge blocked: pipeline must succeed.');
     expect(wrapper.text()).toContain('Push a commit that fixes the failure');
     expect(wrapper.findComponent(GlLink).text()).toContain('learn about other solutions');
   });
+
+  it('should render pipeline blocked message', () => {
+    createComponent({ isPipelineBlocked: true });
+
+    expect(wrapper.text()).toContain(
+      "Merge blocked: pipeline must succeed. It's waiting for a manual action to continue.",
+    );
+  });
 });
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
index 9a6bf66909e..48d3f15560b 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -105,16 +105,17 @@ const createComponent = (
     },
     stubs: {
       CommitEdit,
+      GlSprintf,
     },
     apolloProvider: createMockApollo([[readyToMergeQuery, readyToMergeResponseSpy]]),
   });
 };
 
-const findCheckboxElement = () => wrapper.find(SquashBeforeMerge);
+const findCheckboxElement = () => wrapper.findComponent(SquashBeforeMerge);
 const findCommitEditElements = () => wrapper.findAllComponents(CommitEdit);
-const findCommitDropdownElement = () => wrapper.find(CommitMessageDropdown);
+const findCommitDropdownElement = () => wrapper.findComponent(CommitMessageDropdown);
 const findFirstCommitEditLabel = () => findCommitEditElements().at(0).props('label');
-const findTipLink = () => wrapper.find(GlSprintf);
+const findTipLink = () => wrapper.findComponent(GlSprintf);
 const findCommitEditWithInputId = (inputId) =>
   findCommitEditElements().wrappers.find((x) => x.props('inputId') === inputId);
 const findMergeCommitMessage = () => findCommitEditWithInputId('merge-message-edit').props('value');
@@ -300,6 +301,48 @@ describe('ReadyToMerge', () => {
         expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
       });
     });
+
+    describe('sourceBranchDeletedText', () => {
+      const should = 'Source branch will be deleted.';
+      const shouldNot = 'Source branch will not be deleted.';
+      const did = 'Deleted the source branch.';
+      const didNot = 'Did not delete the source branch.';
+      const scenarios = [
+        "the MR hasn't merged yet, and the backend-provided value expects to delete the branch",
+        "the MR hasn't merged yet, and the backend-provided value expects to leave the branch",
+        "the MR hasn't merged yet, and the backend-provided value is a non-boolean falsey value",
+        "the MR hasn't merged yet, and the backend-provided value is a non-boolean truthy value",
+        'the MR has been merged, and the backend reports that the branch has been removed',
+        'the MR has been merged, and the backend reports that the branch has not been removed',
+        'the MR has been merged, and the backend reports a non-boolean falsey value',
+        'the MR has been merged, and the backend reports a non-boolean truthy value',
+      ];
+
+      it.each`
+        describe        | premerge | mrShould  | mrRemoved | output
+        ${scenarios[0]} | ${true}  | ${true}   | ${null}   | ${should}
+        ${scenarios[1]} | ${true}  | ${false}  | ${null}   | ${shouldNot}
+        ${scenarios[2]} | ${true}  | ${null}   | ${null}   | ${shouldNot}
+        ${scenarios[3]} | ${true}  | ${'yeah'} | ${null}   | ${should}
+        ${scenarios[4]} | ${false} | ${null}   | ${true}   | ${did}
+        ${scenarios[5]} | ${false} | ${null}   | ${false}  | ${didNot}
+        ${scenarios[6]} | ${false} | ${null}   | ${null}   | ${didNot}
+        ${scenarios[7]} | ${false} | ${null}   | ${'yep'}  | ${did}
+      `(
+        'in the case that $describe, returns "$output"',
+        ({ premerge, mrShould, mrRemoved, output }) => {
+          createComponent({
+            mr: {
+              state: !premerge ? 'merged' : 'literally-anything-else',
+              shouldRemoveSourceBranch: mrShould,
+              sourceBranchRemoved: mrRemoved,
+            },
+          });
+
+          expect(wrapper.vm.sourceBranchDeletedText).toBe(output);
+        },
+      );
+    });
   });
 
   describe('methods', () => {
@@ -733,6 +776,34 @@ describe('ReadyToMerge', () => {
     });
   });
 
+  describe('source and target branches diverged', () => {
+    describe('when the MR is showing the Merge button', () => {
+      it('does not display the diverged commits message if the source branch is not behind the target', () => {
+        createComponent({ mr: { divergedCommitsCount: 0 } });
+
+        const textBody = wrapper.text();
+
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is 0 commits behind the target branch'),
+        );
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is 0 commit behind the target branch'),
+        );
+        expect(textBody).toEqual(
+          expect.not.stringContaining('The source branch is behind the target branch'),
+        );
+      });
+
+      it('shows the diverged commits text when the source branch is behind the target', () => {
+        createComponent({ mr: { divergedCommitsCount: 9001, canMerge: false } });
+
+        expect(wrapper.text()).toEqual(
+          expect.stringContaining('The source branch is 9001 commits behind the target branch'),
+        );
+      });
+    });
+  });
+
   describe('Merge button when pipeline has failed', () => {
     beforeEach(() => {
       createComponent({
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 6ea2e8675d3..c839fa17fe5 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
@@ -18,7 +18,7 @@ describe('Squash before merge component', () => {
     wrapper.destroy();
   });
 
-  const findCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
   describe('checkbox', () => {
     it('is unchecked if passed value prop is false', () => {
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_wip_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_wip_spec.js
index af52901f508..7259f210b6e 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_wip_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_wip_spec.js
@@ -38,7 +38,7 @@ describe('Wip', () => {
     it('should have default data', () => {
       const vm = createComponent();
 
-      expect(vm.isMakingRequest).toBeFalsy();
+      expect(vm.isMakingRequest).toBe(false);
     });
   });
 
diff --git a/spec/frontend/vue_merge_request_widget/components/terraform/mr_widget_terraform_container_spec.js b/spec/frontend/vue_merge_request_widget/components/terraform/mr_widget_terraform_container_spec.js
deleted file mode 100644
index 7a868eb8cc9..00000000000
--- a/spec/frontend/vue_merge_request_widget/components/terraform/mr_widget_terraform_container_spec.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import { GlSkeletonLoader, GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
-import axios from '~/lib/utils/axios_utils';
-import Poll from '~/lib/utils/poll';
-import MrWidgetExpanableSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
-import MrWidgetTerraformContainer from '~/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue';
-import TerraformPlan from '~/vue_merge_request_widget/components/terraform/terraform_plan.vue';
-import { invalidPlanWithName, plans, validPlanWithName } from './mock_data';
-
-describe('MrWidgetTerraformConainer', () => {
-  let mock;
-  let wrapper;
-
-  const propsData = { endpoint: '/path/to/terraform/report.json' };
-
-  const findHeader = () => wrapper.find('[data-testid="terraform-header-text"]');
-  const findPlans = () =>
-    wrapper.findAllComponents(TerraformPlan).wrappers.map((x) => x.props('plan'));
-
-  const mockPollingApi = (response, body, header) => {
-    mock.onGet(propsData.endpoint).reply(response, body, header);
-  };
-
-  const mountWrapper = () => {
-    wrapper = shallowMount(MrWidgetTerraformContainer, {
-      propsData,
-      stubs: { MrWidgetExpanableSection, GlSprintf },
-    });
-    return axios.waitForAll();
-  };
-
-  beforeEach(() => {
-    mock = new MockAdapter(axios);
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    mock.restore();
-  });
-
-  describe('when data is loading', () => {
-    beforeEach(async () => {
-      mockPollingApi(200, plans, {});
-
-      await mountWrapper();
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ loading: true });
-      await nextTick();
-    });
-
-    it('diplays loading skeleton', () => {
-      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
-      expect(wrapper.find(MrWidgetExpanableSection).exists()).toBe(false);
-    });
-  });
-
-  describe('when data has finished loading', () => {
-    beforeEach(() => {
-      mockPollingApi(200, plans, {});
-      return mountWrapper();
-    });
-
-    it('displays terraform content', () => {
-      expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
-      expect(wrapper.find(MrWidgetExpanableSection).exists()).toBe(true);
-      expect(findPlans()).toEqual(Object.values(plans));
-    });
-
-    describe('when data includes one invalid plan', () => {
-      beforeEach(() => {
-        const invalidPlanGroup = { bad_plan: invalidPlanWithName };
-        mockPollingApi(200, invalidPlanGroup, {});
-        return mountWrapper();
-      });
-
-      it('displays header text for one invalid plan', () => {
-        expect(findHeader().text()).toBe('1 Terraform report failed to generate');
-      });
-    });
-
-    describe('when data includes multiple invalid plans', () => {
-      beforeEach(() => {
-        const invalidPlanGroup = {
-          bad_plan_one: invalidPlanWithName,
-          bad_plan_two: invalidPlanWithName,
-        };
-
-        mockPollingApi(200, invalidPlanGroup, {});
-        return mountWrapper();
-      });
-
-      it('displays header text for multiple invalid plans', () => {
-        expect(findHeader().text()).toBe('2 Terraform reports failed to generate');
-      });
-    });
-
-    describe('when data includes one valid plan', () => {
-      beforeEach(() => {
-        const validPlanGroup = { valid_plan: validPlanWithName };
-        mockPollingApi(200, validPlanGroup, {});
-        return mountWrapper();
-      });
-
-      it('displays header text for one valid plans', () => {
-        expect(findHeader().text()).toBe('1 Terraform report was generated in your pipelines');
-      });
-    });
-
-    describe('when data includes multiple valid plans', () => {
-      beforeEach(() => {
-        const validPlanGroup = {
-          valid_plan_one: validPlanWithName,
-          valid_plan_two: validPlanWithName,
-        };
-        mockPollingApi(200, validPlanGroup, {});
-        return mountWrapper();
-      });
-
-      it('displays header text for multiple valid plans', () => {
-        expect(findHeader().text()).toBe('2 Terraform reports were generated in your pipelines');
-      });
-    });
-  });
-
-  describe('polling', () => {
-    let pollRequest;
-    let pollStop;
-
-    beforeEach(() => {
-      pollRequest = jest.spyOn(Poll.prototype, 'makeRequest');
-      pollStop = jest.spyOn(Poll.prototype, 'stop');
-    });
-
-    afterEach(() => {
-      pollRequest.mockRestore();
-      pollStop.mockRestore();
-    });
-
-    describe('successful poll', () => {
-      beforeEach(() => {
-        mockPollingApi(200, plans, {});
-
-        return mountWrapper();
-      });
-
-      it('does not make additional requests after poll is successful', () => {
-        expect(pollRequest).toHaveBeenCalledTimes(1);
-        expect(pollStop).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('polling fails', () => {
-      beforeEach(() => {
-        mockPollingApi(500, null, {});
-        return mountWrapper();
-      });
-
-      it('stops loading', () => {
-        expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
-      });
-
-      it('generates one broken plan', () => {
-        expect(findPlans()).toEqual([{ tf_report_error: 'api_error' }]);
-      });
-
-      it('does not make additional requests after poll is unsuccessful', () => {
-        expect(pollRequest).toHaveBeenCalledTimes(1);
-        expect(pollStop).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/vue_merge_request_widget/components/terraform/terraform_plan_spec.js b/spec/frontend/vue_merge_request_widget/components/terraform/terraform_plan_spec.js
deleted file mode 100644
index 3c9f6c2e165..00000000000
--- a/spec/frontend/vue_merge_request_widget/components/terraform/terraform_plan_spec.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { GlLink, GlSprintf } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import TerraformPlan from '~/vue_merge_request_widget/components/terraform/terraform_plan.vue';
-import {
-  invalidPlanWithName,
-  invalidPlanWithoutName,
-  validPlanWithName,
-  validPlanWithoutName,
-} from './mock_data';
-
-describe('TerraformPlan', () => {
-  let wrapper;
-
-  const findIcon = () => wrapper.find('[data-testid="change-type-icon"]');
-  const findLogButton = () => wrapper.find('[data-testid="terraform-report-link"]');
-
-  const mountWrapper = (propsData) => {
-    wrapper = shallowMount(TerraformPlan, { stubs: { GlLink, GlSprintf }, propsData });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('valid plan with job_name', () => {
-    beforeEach(() => {
-      mountWrapper({ plan: validPlanWithName });
-    });
-
-    it('displays a document icon', () => {
-      expect(findIcon().attributes('name')).toBe('doc-changes');
-    });
-
-    it('diplays the header text with a name', () => {
-      expect(wrapper.text()).toContain(`The job ${validPlanWithName.job_name} generated a report.`);
-    });
-
-    it('diplays the reported changes', () => {
-      expect(wrapper.text()).toContain(
-        `Reported Resource Changes: ${validPlanWithName.create} to add, ${validPlanWithName.update} to change, ${validPlanWithName.delete} to delete`,
-      );
-    });
-
-    it('renders button when url is found', () => {
-      expect(findLogButton().exists()).toBe(true);
-      expect(findLogButton().text()).toEqual('View full log');
-    });
-  });
-
-  describe('valid plan without job_name', () => {
-    beforeEach(() => {
-      mountWrapper({ plan: validPlanWithoutName });
-    });
-
-    it('diplays the header text without a name', () => {
-      expect(wrapper.text()).toContain('A report was generated in your pipelines.');
-    });
-  });
-
-  describe('invalid plan with job_name', () => {
-    beforeEach(() => {
-      mountWrapper({ plan: invalidPlanWithName });
-    });
-
-    it('displays a warning icon', () => {
-      expect(findIcon().attributes('name')).toBe('warning');
-    });
-
-    it('diplays the header text with a name', () => {
-      expect(wrapper.text()).toContain(
-        `The job ${invalidPlanWithName.job_name} failed to generate a report.`,
-      );
-    });
-
-    it('diplays generic error since report values are missing', () => {
-      expect(wrapper.text()).toContain('Generating the report caused an error.');
-    });
-  });
-
-  describe('invalid plan with out job_name', () => {
-    beforeEach(() => {
-      mountWrapper({ plan: invalidPlanWithoutName });
-    });
-
-    it('diplays the header text without a name', () => {
-      expect(wrapper.text()).toContain('A report failed to generate.');
-    });
-
-    it('does not render button because url is missing', () => {
-      expect(findLogButton().exists()).toBe(false);
-    });
-  });
-});
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
new file mode 100644
index 00000000000..08424077269
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue renders given data 1`] = `
+"<content-row-stub level=\\"2\\" statusiconname=\\"success\\" widgetname=\\"MyWidget\\" header=\\"This is a header,This is a subheader\\">
+  <div class=\\"gl-display-flex gl-flex-direction-column\\">
+    <div>
+      <p class=\\"gl-mb-0\\">Main text for the row</p>
+      <gl-link-stub href=\\"https://gitlab.com\\">Optional link to display after text</gl-link-stub>
+      <!---->
+      <gl-badge-stub size=\\"md\\" variant=\\"info\\">
+        Badge is optional. Text to be displayed inside badge
+      </gl-badge-stub>
+      <actions-stub widget=\\"MyWidget\\" tertiarybuttons=\\"\\" class=\\"gl-ml-auto gl-pl-3\\"></actions-stub>
+      <p class=\\"gl-m-0 gl-font-sm\\">Optional: Smaller sub-text to be displayed below the main text</p>
+    </div>
+    <ul class=\\"gl-m-0 gl-p-0 gl-list-style-none\\">
+      <li>
+        <content-row-stub level=\\"3\\" statusiconname=\\"\\" widgetname=\\"MyWidget\\" header=\\"Child row header\\" data-qa-selector=\\"child_content\\">
+          <div class=\\"gl-display-flex gl-flex-direction-column\\">
+            <div>
+              <p class=\\"gl-mb-0\\">This is recursive. It will be listed in level 3.</p>
+              <!---->
+              <!---->
+              <!---->
+              <actions-stub widget=\\"MyWidget\\" tertiarybuttons=\\"\\" class=\\"gl-ml-auto gl-pl-3\\"></actions-stub>
+              <!---->
+            </div>
+            <!---->
+          </div>
+        </content-row-stub>
+      </li>
+    </ul>
+  </div>
+</content-row-stub>"
+`;
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
new file mode 100644
index 00000000000..b7753a58747
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/components/widget/dynamic_content_spec.js
@@ -0,0 +1,52 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
+import DynamicContent from '~/vue_merge_request_widget/components/widget/dynamic_content.vue';
+
+describe('~/vue_merge_request_widget/components/widget/dynamic_content.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData } = {}) => {
+    wrapper = shallowMountExtended(DynamicContent, {
+      propsData: {
+        widgetName: 'MyWidget',
+        ...propsData,
+      },
+      stubs: {
+        DynamicContent,
+      },
+    });
+  };
+
+  it('renders given data', () => {
+    createComponent({
+      propsData: {
+        data: {
+          id: 'row-id',
+          header: ['This is a header', 'This is a subheader'],
+          text: 'Main text for the row',
+          subtext: 'Optional: Smaller sub-text to be displayed below the main text',
+          icon: {
+            name: EXTENSION_ICONS.success,
+          },
+          badge: {
+            text: 'Badge is optional. Text to be displayed inside badge',
+            variant: 'info',
+          },
+          link: {
+            text: 'Optional link to display after text',
+            href: 'https://gitlab.com',
+          },
+          children: [
+            {
+              id: 'row-id-2',
+              header: 'Child row header',
+              text: 'This is recursive. It will be listed in level 3.',
+            },
+          ],
+        },
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js
new file mode 100644
index 00000000000..9eddd091ad0
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_row_spec.js
@@ -0,0 +1,65 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import WidgetContentRow from '~/vue_merge_request_widget/components/widget/widget_content_row.vue';
+import StatusIcon from '~/vue_merge_request_widget/components/widget/status_icon.vue';
+
+describe('~/vue_merge_request_widget/components/widget/widget_content_row.vue', () => {
+  let wrapper;
+
+  const findStatusIcon = () => wrapper.findComponent(StatusIcon);
+
+  const createComponent = ({ propsData, slots } = {}) => {
+    wrapper = shallowMountExtended(WidgetContentRow, {
+      propsData: {
+        widgetName: 'MyWidget',
+        level: 2,
+        ...propsData,
+      },
+      slots,
+    });
+  };
+
+  describe('body', () => {
+    it('renders the status icon when provided', () => {
+      createComponent({ propsData: { statusIconName: 'failed' } });
+      expect(findStatusIcon().exists()).toBe(true);
+    });
+
+    it('does not render the status icon when it is not provided', () => {
+      createComponent();
+      expect(findStatusIcon().exists()).toBe(false);
+    });
+
+    it('renders slots properly', () => {
+      createComponent({
+        propsData: {
+          statusIconName: 'success',
+        },
+        slots: {
+          header: '<span>this is a header</span>',
+          body: '<span>this is a body</span>',
+        },
+      });
+
+      expect(wrapper.findByText('this is a body').exists()).toBe(true);
+      expect(wrapper.findByText('this is a header').exists()).toBe(true);
+    });
+  });
+
+  describe('header', () => {
+    it('renders an array of header and subheader', () => {
+      createComponent({ propsData: { header: ['this is a header', 'this is a subheader'] } });
+      expect(wrapper.findByText('this is a header').exists()).toBe(true);
+      expect(wrapper.findByText('this is a subheader').exists()).toBe(true);
+    });
+
+    it('renders a string', () => {
+      createComponent({ propsData: { header: 'this is a header' } });
+      expect(wrapper.findByText('this is a header').exists()).toBe(true);
+    });
+
+    it('escapes html injection properly', () => {
+      createComponent({ propsData: { header: '<b role="header">this is a header</b>' } });
+      expect(wrapper.findByText('<b role="header">this is a header</b>').exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_section_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/widget_content_section_spec.js
deleted file mode 100644
index c2128d3ff33..00000000000
--- a/spec/frontend/vue_merge_request_widget/components/widget/widget_content_section_spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import WidgetContentSection from '~/vue_merge_request_widget/components/widget/widget_content_section.vue';
-import StatusIcon from '~/vue_merge_request_widget/components/extensions/status_icon.vue';
-
-describe('~/vue_merge_request_widget/components/widget/widget_content_section.vue', () => {
-  let wrapper;
-
-  const findStatusIcon = () => wrapper.findComponent(StatusIcon);
-
-  const createComponent = ({ propsData, slots } = {}) => {
-    wrapper = shallowMountExtended(WidgetContentSection, {
-      propsData: {
-        widgetName: 'MyWidget',
-        ...propsData,
-      },
-      slots,
-    });
-  };
-
-  it('does not render the status icon when it is not provided', () => {
-    createComponent();
-    expect(findStatusIcon().exists()).toBe(false);
-  });
-
-  it('renders the status icon when provided', () => {
-    createComponent({ propsData: { statusIconName: 'failed' } });
-    expect(findStatusIcon().exists()).toBe(true);
-  });
-
-  it('renders the default slot', () => {
-    createComponent({
-      slots: {
-        default: 'Hello world',
-      },
-    });
-
-    expect(wrapper.findByText('Hello world').exists()).toBe(true);
-  });
-});
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 b67b5703ad5..4826fecf98d 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
@@ -5,8 +5,9 @@ import waitForPromises from 'helpers/wait_for_promises';
 import StatusIcon from '~/vue_merge_request_widget/components/extensions/status_icon.vue';
 import ActionButtons from '~/vue_merge_request_widget/components/action_buttons.vue';
 import Widget from '~/vue_merge_request_widget/components/widget/widget.vue';
+import WidgetContentRow from '~/vue_merge_request_widget/components/widget/widget_content_row.vue';
 
-describe('MR Widget', () => {
+describe('~/vue_merge_request_widget/components/widget/widget.vue', () => {
   let wrapper;
 
   const findStatusIcon = () => wrapper.findComponent(StatusIcon);
@@ -27,6 +28,10 @@ describe('MR Widget', () => {
         ...propsData,
       },
       slots,
+      stubs: {
+        StatusIcon,
+        ContentRow: WidgetContentRow,
+      },
     });
   };
 
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 7e7438bcc0f..1bad5dacefa 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
@@ -41,7 +41,7 @@ describe('Deployment action button', () => {
     });
 
     it('renders prop icon correctly', () => {
-      expect(wrapper.find(GlIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
     });
   });
 
@@ -59,7 +59,7 @@ describe('Deployment action button', () => {
     });
 
     it('renders slot and icon prop correctly', () => {
-      expect(wrapper.find(GlIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
       expect(wrapper.text()).toContain(actionButtonMocks[DEPLOYING].toString());
     });
   });
@@ -75,8 +75,8 @@ describe('Deployment action button', () => {
     });
 
     it('is disabled and shows the loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -90,8 +90,8 @@ describe('Deployment action button', () => {
       });
     });
     it('is disabled and does not show the loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -106,8 +106,8 @@ describe('Deployment action button', () => {
       });
     });
     it('is disabled and does not show the loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlButton).props('disabled')).toBe(true);
     });
   });
 
@@ -118,8 +118,8 @@ describe('Deployment action button', () => {
       });
     });
     it('is not disabled nor does it show the loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-      expect(wrapper.find(GlButton).props('disabled')).toBe(false);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlButton).props('disabled')).toBe(false);
     });
   });
 });
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 a8912405fa8..58dadb2c679 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { visitUrl } from '~/lib/utils/url_utility';
 import {
@@ -11,6 +11,7 @@ import {
   REDEPLOYING,
   STOPPING,
 } from '~/vue_merge_request_widget/components/deployment/constants';
+import eventHub from '~/vue_merge_request_widget/event_hub';
 import DeploymentActions from '~/vue_merge_request_widget/components/deployment/deployment_actions.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 import {
@@ -167,7 +168,7 @@ describe('DeploymentAction component', () => {
               });
 
               it('should not throw an error', () => {
-                expect(createFlash).not.toHaveBeenCalled();
+                expect(createAlert).not.toHaveBeenCalled();
               });
 
               describe('response includes redirect_url', () => {
@@ -192,6 +193,7 @@ describe('DeploymentAction component', () => {
               describe('it should call the executeAction method', () => {
                 beforeEach(async () => {
                   jest.spyOn(wrapper.vm, 'executeAction').mockImplementation();
+                  jest.spyOn(eventHub, '$emit');
 
                   await waitForPromises();
 
@@ -206,11 +208,16 @@ describe('DeploymentAction component', () => {
                     actionButtonMocks[configConst],
                   );
                 });
+
+                it('emits the FetchDeployments event', () => {
+                  expect(eventHub.$emit).toHaveBeenCalledWith('FetchDeployments');
+                });
               });
 
               describe('when executeInlineAction errors', () => {
                 beforeEach(async () => {
                   executeActionSpy.mockRejectedValueOnce();
+                  jest.spyOn(eventHub, '$emit');
 
                   await waitForPromises();
 
@@ -218,12 +225,15 @@ describe('DeploymentAction component', () => {
                   finderFn().trigger('click');
                 });
 
-                it('should call createFlash with error message', () => {
-                  expect(createFlash).toHaveBeenCalled();
-                  expect(createFlash).toHaveBeenCalledWith({
+                it('should call createAlert with error message', () => {
+                  expect(createAlert).toHaveBeenCalledWith({
                     message: actionButtonMocks[configConst].errorMessage,
                   });
                 });
+
+                it('emits the FetchDeployments event', () => {
+                  expect(eventHub.$emit).toHaveBeenCalledWith('FetchDeployments');
+                });
               });
             });
           });
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 c27cbd8b781..f310f7669a9 100644
--- a/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js
+++ b/spec/frontend/vue_merge_request_widget/deployment/deployment_spec.js
@@ -37,7 +37,7 @@ describe('Deployment component', () => {
   });
 
   it('always renders DeploymentInfo', () => {
-    expect(wrapper.find(DeploymentInfo).exists()).toBe(true);
+    expect(wrapper.findComponent(DeploymentInfo).exists()).toBe(true);
   });
 
   describe('status message and buttons', () => {
@@ -111,7 +111,7 @@ describe('Deployment component', () => {
         });
 
         it(`renders the text: ${text}`, () => {
-          expect(wrapper.find(DeploymentInfo).text()).toContain(text);
+          expect(wrapper.findComponent(DeploymentInfo).text()).toContain(text);
         });
 
         if (actionButtons.length > 0) {
@@ -137,9 +137,11 @@ describe('Deployment component', () => {
         if (actionButtons.includes(DeploymentViewButton)) {
           it('renders the View button with expected text', () => {
             if (status === SUCCESS) {
-              expect(wrapper.find(DeploymentViewButton).text()).toContain('View app');
+              expect(wrapper.findComponent(DeploymentViewButton).text()).toContain('View app');
             } else {
-              expect(wrapper.find(DeploymentViewButton).text()).toContain('View latest app');
+              expect(wrapper.findComponent(DeploymentViewButton).text()).toContain(
+                'View latest app',
+              );
             }
           });
         }
@@ -150,7 +152,7 @@ describe('Deployment component', () => {
   describe('hasExternalUrls', () => {
     describe('when deployment has both external_url_formatted and external_url', () => {
       it('should render the View Button', () => {
-        expect(wrapper.find(DeploymentViewButton).exists()).toBe(true);
+        expect(wrapper.findComponent(DeploymentViewButton).exists()).toBe(true);
       });
     });
 
@@ -165,7 +167,7 @@ describe('Deployment component', () => {
       });
 
       it('should not render the View Button', () => {
-        expect(wrapper.find(DeploymentViewButton).exists()).toBe(false);
+        expect(wrapper.findComponent(DeploymentViewButton).exists()).toBe(false);
       });
     });
 
@@ -180,7 +182,7 @@ describe('Deployment component', () => {
       });
 
       it('should not render the View Button', () => {
-        expect(wrapper.find(DeploymentViewButton).exists()).toBe(false);
+        expect(wrapper.findComponent(DeploymentViewButton).exists()).toBe(false);
       });
     });
   });
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 eb6e3711e2e..8994fa522d0 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
@@ -2,6 +2,7 @@ import { GlDropdown, GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { deploymentMockData } from './deployment_mock_data';
 
 const appButtonText = {
@@ -36,6 +37,7 @@ describe('Deployment View App button', () => {
   const findMrWigdetDeploymentDropdownIcon = () =>
     wrapper.findByTestId('mr-wigdet-deployment-dropdown-icon');
   const findDeployUrlMenuItems = () => wrapper.findAllComponents(GlLink);
+  const findCopyButton = () => wrapper.findComponent(ModalCopyButton);
 
   describe('text', () => {
     it('renders text as passed', () => {
@@ -44,39 +46,93 @@ describe('Deployment View App button', () => {
   });
 
   describe('without changes', () => {
+    let deployment;
+
     beforeEach(() => {
-      createComponent({
-        propsData: {
-          deployment: { ...deploymentMockData, changes: null },
-          appButtonText,
-        },
+      deployment = { ...deploymentMockData, changes: null };
+    });
+
+    describe('with safe url', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link to the review app without dropdown', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findReviewAppLink().attributes('href')).toBe(deployment.external_url);
       });
     });
 
-    it('renders the link to the review app without dropdown', () => {
-      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+    describe('without safe URL', () => {
+      beforeEach(() => {
+        deployment = { ...deployment, external_url: 'postgres://example' };
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link as a copy button', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findCopyButton().props('text')).toBe(deployment.external_url);
+      });
     });
   });
 
   describe('with a single change', () => {
+    let deployment;
+    let change;
+
     beforeEach(() => {
-      createComponent({
-        propsData: {
-          deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
-          appButtonText,
-        },
-      });
+      [change] = deploymentMockData.changes;
+      deployment = { ...deploymentMockData, changes: [change] };
     });
 
-    it('renders the link to the review app without dropdown', () => {
-      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
-      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
+    describe('with safe URL', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
+
+      it('renders the link to the review app without dropdown', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
+      });
+
+      it('renders the link to the review app linked to to the first change', () => {
+        const expectedUrl = deploymentMockData.changes[0].external_url;
+
+        expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
+      });
     });
 
-    it('renders the link to the review app linked to to the first change', () => {
-      const expectedUrl = deploymentMockData.changes[0].external_url;
+    describe('with unsafe URL', () => {
+      beforeEach(() => {
+        change = { ...change, external_url: 'postgres://example' };
+        deployment = { ...deployment, changes: [change] };
+        createComponent({
+          propsData: {
+            deployment,
+            appButtonText,
+          },
+        });
+      });
 
-      expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
+      it('renders the link as a copy button', () => {
+        expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+        expect(findCopyButton().props('text')).toBe(change.external_url);
+      });
     });
   });
 
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 82743275739..05df66165dd 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
@@ -42,7 +42,7 @@ describe('Test report extension', () => {
   const findFullReportLink = () => wrapper.findByTestId('full-report-link');
   const findCopyFailedSpecsBtn = () => wrapper.findByTestId('copy-failed-specs-btn');
   const findAllExtensionListItems = () => wrapper.findAllByTestId('extension-list-item');
-  const findModal = () => wrapper.find(TestCaseDetails);
+  const findModal = () => wrapper.findComponent(TestCaseDetails);
 
   const createComponent = () => {
     wrapper = mountExtended(extensionsContainer, {
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 295b9df30b9..d038660e6d3 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
@@ -24,7 +24,7 @@ describe('MRWidgetHowToMerge', () => {
     mountComponent();
   });
 
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const findInstructionsFields = () =>
     wrapper.findAll('[ data-testid="how-to-merge-instructions"]');
   const findTipLink = () => wrapper.find("[data-testid='docs-tip']");
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 cc894f94f80..6622749da92 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
@@ -368,12 +368,13 @@ describe('MrWidgetOptions', () => {
 
       describe('bindEventHubListeners', () => {
         it.each`
-          event                        | method                   | methodArgs
-          ${'MRWidgetUpdateRequested'} | ${'checkStatus'}         | ${(x) => [x]}
-          ${'MRWidgetRebaseSuccess'}   | ${'checkStatus'}         | ${(x) => [x, true]}
-          ${'FetchActionsContent'}     | ${'fetchActionsContent'} | ${() => []}
-          ${'EnablePolling'}           | ${'resumePolling'}       | ${() => []}
-          ${'DisablePolling'}          | ${'stopPolling'}         | ${() => []}
+          event                        | method                        | methodArgs
+          ${'MRWidgetUpdateRequested'} | ${'checkStatus'}              | ${(x) => [x]}
+          ${'MRWidgetRebaseSuccess'}   | ${'checkStatus'}              | ${(x) => [x, true]}
+          ${'FetchActionsContent'}     | ${'fetchActionsContent'}      | ${() => []}
+          ${'EnablePolling'}           | ${'resumePolling'}            | ${() => []}
+          ${'DisablePolling'}          | ${'stopPolling'}              | ${() => []}
+          ${'FetchDeployments'}        | ${'fetchPreMergeDeployments'} | ${() => []}
         `('should bind to $event', ({ event, method, methodArgs }) => {
           jest.spyOn(wrapper.vm, method).mockImplementation();
 
@@ -771,34 +772,40 @@ describe('MrWidgetOptions', () => {
   });
 
   describe('security widget', () => {
-    describe.each`
-      context                  | hasPipeline | shouldRender
-      ${'there is a pipeline'} | ${true}     | ${true}
-      ${'no pipeline'}         | ${false}    | ${false}
-    `('given $context', ({ hasPipeline, shouldRender }) => {
-      beforeEach(() => {
-        const mrData = {
-          ...mockData,
-          ...(hasPipeline ? {} : { pipeline: null }),
-        };
+    const setup = async (hasPipeline) => {
+      const mrData = {
+        ...mockData,
+        ...(hasPipeline ? {} : { pipeline: null }),
+      };
 
-        // Override top-level mocked requests, which always use a fresh copy of
-        // mockData, which always includes the full pipeline object.
-        mock.onGet(mockData.merge_request_widget_path).reply(() => [200, mrData]);
-        mock.onGet(mockData.merge_request_cached_widget_path).reply(() => [200, mrData]);
-
-        return createComponent(mrData, {
-          apolloProvider: createMockApollo([
-            [
-              securityReportMergeRequestDownloadPathsQuery,
-              async () => ({ data: securityReportMergeRequestDownloadPathsQueryResponse }),
-            ],
-          ]),
-        });
+      // Override top-level mocked requests, which always use a fresh copy of
+      // mockData, which always includes the full pipeline object.
+      mock.onGet(mockData.merge_request_widget_path).reply(() => [200, mrData]);
+      mock.onGet(mockData.merge_request_cached_widget_path).reply(() => [200, mrData]);
+
+      return createComponent(mrData, {
+        apolloProvider: createMockApollo([
+          [
+            securityReportMergeRequestDownloadPathsQuery,
+            async () => ({ data: securityReportMergeRequestDownloadPathsQueryResponse }),
+          ],
+        ]),
       });
+    };
+
+    describe('with a pipeline', () => {
+      it('renders the security widget', async () => {
+        await setup(true);
+
+        expect(findSecurityMrWidget().exists()).toBe(true);
+      });
+    });
+
+    describe('with no pipeline', () => {
+      it('does not render the security widget', async () => {
+        await setup(false);
 
-      it(shouldRender ? 'renders' : 'does not render', () => {
-        expect(findSecurityMrWidget().exists()).toBe(shouldRender);
+        expect(findSecurityMrWidget().exists()).toBe(false);
       });
     });
   });
@@ -881,7 +888,10 @@ describe('MrWidgetOptions', () => {
       await nextTick();
 
       expect(
-        wrapper.find('[data-testid="widget-extension-top-level"]').find(GlDropdown).exists(),
+        wrapper
+          .find('[data-testid="widget-extension-top-level"]')
+          .findComponent(GlDropdown)
+          .exists(),
       ).toBe(false);
 
       await nextTick();
@@ -891,19 +901,19 @@ describe('MrWidgetOptions', () => {
       expect(collapsedSection.text()).toContain('Hello world');
 
       // Renders icon in the row
-      expect(collapsedSection.find(GlIcon).exists()).toBe(true);
-      expect(collapsedSection.find(GlIcon).props('name')).toBe('status-failed');
+      expect(collapsedSection.findComponent(GlIcon).exists()).toBe(true);
+      expect(collapsedSection.findComponent(GlIcon).props('name')).toBe('status-failed');
 
       // Renders badge in the row
-      expect(collapsedSection.find(GlBadge).exists()).toBe(true);
-      expect(collapsedSection.find(GlBadge).text()).toBe('Closed');
+      expect(collapsedSection.findComponent(GlBadge).exists()).toBe(true);
+      expect(collapsedSection.findComponent(GlBadge).text()).toBe('Closed');
 
       // Renders a link in the row
-      expect(collapsedSection.find(GlLink).exists()).toBe(true);
-      expect(collapsedSection.find(GlLink).text()).toBe('GitLab.com');
+      expect(collapsedSection.findComponent(GlLink).exists()).toBe(true);
+      expect(collapsedSection.findComponent(GlLink).text()).toBe('GitLab.com');
 
-      expect(collapsedSection.find(GlButton).exists()).toBe(true);
-      expect(collapsedSection.find(GlButton).text()).toBe('Full report');
+      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', () => {
@@ -994,7 +1004,7 @@ describe('MrWidgetOptions', () => {
 
         await createComponent();
 
-        expect(pollRequest).toHaveBeenCalledTimes(4);
+        expect(pollRequest).toHaveBeenCalledTimes(2);
       });
     });
 
@@ -1032,7 +1042,7 @@ describe('MrWidgetOptions', () => {
         registerExtension(pollingErrorExtension);
         await createComponent();
 
-        expect(pollRequest).toHaveBeenCalledTimes(4);
+        expect(pollRequest).toHaveBeenCalledTimes(2);
       });
 
       it('captures sentry error and displays error when poll has failed', async () => {
@@ -1134,7 +1144,7 @@ describe('MrWidgetOptions', () => {
         ${'WidgetCodeQuality'} | ${'i_testing_code_quality_widget_total'}
         ${'WidgetTerraform'}   | ${'i_testing_terraform_widget_total'}
         ${'WidgetIssues'}      | ${'i_testing_issues_widget_total'}
-        ${'WidgetTestReport'}  | ${'i_testing_summary_widget_total'}
+        ${'WidgetTestSummary'} | ${'i_testing_summary_widget_total'}
       `(
         "sends non-standard events for the '$widgetName' widget",
         async ({ widgetName, nonStandardEvent }) => {
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 0246a8d4b0f..88d9d0b4cff 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
@@ -16,12 +16,13 @@ describe('getStateKey', () => {
       commitsCount: 2,
       hasConflicts: false,
       draft: false,
+      detailedMergeStatus: null,
     };
     const bound = getStateKey.bind(context);
 
     expect(bound()).toEqual(null);
 
-    context.canBeMerged = true;
+    context.detailedMergeStatus = 'MERGEABLE';
 
     expect(bound()).toEqual('readyToMerge');
 
@@ -36,21 +37,15 @@ describe('getStateKey', () => {
     expect(bound()).toEqual('shaMismatch');
 
     context.canMerge = false;
-    context.isPipelineBlocked = true;
-
-    expect(bound()).toEqual('pipelineBlocked');
-
-    context.hasMergeableDiscussionsState = true;
-    context.autoMergeEnabled = false;
+    context.detailedMergeStatus = 'DISCUSSIONS_NOT_RESOLVED';
 
     expect(bound()).toEqual('unresolvedDiscussions');
 
-    context.draft = true;
+    context.detailedMergeStatus = 'DRAFT_STATUS';
 
     expect(bound()).toEqual('draft');
 
-    context.onlyAllowMergeIfPipelineSucceeds = true;
-    context.isPipelineFailed = true;
+    context.detailedMergeStatus = 'CI_MUST_PASS';
 
     expect(bound()).toEqual('pipelineFailed');
 
@@ -62,7 +57,7 @@ describe('getStateKey', () => {
 
     expect(bound()).toEqual('conflicts');
 
-    context.mergeStatus = 'unchecked';
+    context.detailedMergeStatus = 'CHECKING';
 
     expect(bound()).toEqual('checking');
 
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 27b6718fb8e..07cbfe1e79b 100644
--- a/spec/frontend/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/frontend/vue_shared/components/ci_badge_link_spec.js
@@ -1,7 +1,7 @@
+import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { visitUrl } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
@@ -86,18 +86,14 @@ describe('CI Badge Link Component', () => {
     wrapper.destroy();
   });
 
-  it.each(Object.keys(statuses))('should render badge for status: %s', async (status) => {
+  it.each(Object.keys(statuses))('should render badge for status: %s', (status) => {
     createComponent({ status: statuses[status] });
 
-    expect(wrapper.attributes('href')).toBe();
+    expect(wrapper.attributes('href')).toBe(statuses[status].details_path);
     expect(wrapper.text()).toBe(statuses[status].text);
     expect(wrapper.classes()).toContain('ci-status');
     expect(wrapper.classes()).toContain(`ci-${statuses[status].group}`);
     expect(findIcon().exists()).toBe(true);
-
-    await wrapper.trigger('click');
-
-    expect(visitUrl).toHaveBeenCalledWith(statuses[status].details_path);
   });
 
   it('should not render label', () => {
@@ -109,7 +105,7 @@ describe('CI Badge Link Component', () => {
   it('should emit ciStatusBadgeClick event', async () => {
     createComponent({ status: statuses.success });
 
-    await wrapper.trigger('click');
+    await wrapper.findComponent(GlLink).vm.$emit('click');
 
     expect(wrapper.emitted('ciStatusBadgeClick')).toEqual([[]]);
   });
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 441e21ee905..5b0772f6e34 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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';
@@ -146,7 +146,7 @@ describe('LabelsSelectRoot', () => {
     });
 
     it('creates flash with error message', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         captureError: true,
         message: 'Error fetching epic color.',
       });
@@ -186,7 +186,7 @@ describe('LabelsSelectRoot', () => {
       findDropdownContents().vm.$emit('setColor', color);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         captureError: true,
         error: expect.anything(),
         message: 'An error occurred while updating color.',
diff --git a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
index 10eacff630d..7a8f94b3746 100644
--- a/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
+++ b/spec/frontend/vue_shared/components/date_time_picker/date_time_picker_lib_spec.js
@@ -121,7 +121,7 @@ describe('date time picker lib', () => {
       const utcResult = '2019-09-08T01:01:01Z';
       const localResult = '2019-09-08T08:01:01Z';
 
-      test.each`
+      it.each`
         val      | locatTimezone   | utc          | result
         ${value} | ${'UTC'}        | ${undefined} | ${utcResult}
         ${value} | ${'UTC'}        | ${false}     | ${utcResult}
@@ -167,7 +167,7 @@ describe('date time picker lib', () => {
       const utcResult = '2019-09-08 08:01:01';
       const localResult = '2019-09-08 01:01:01';
 
-      test.each`
+      it.each`
         val      | locatTimezone   | utc          | result
         ${value} | ${'UTC'}        | ${undefined} | ${utcResult}
         ${value} | ${'UTC'}        | ${false}     | ${utcResult}
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 68684004b82..99c973bdd26 100644
--- a/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/diff_stats_dropdown_spec.js
@@ -106,11 +106,11 @@ describe('Diff Stats Dropdown', () => {
       expectedAddedDeletedExpanded,
       expectedAddedDeletedCollapsed,
     }) => {
-      beforeAll(() => {
+      beforeEach(() => {
         createComponent({ changed, added, deleted });
       });
 
-      afterAll(() => {
+      afterEach(() => {
         wrapper.destroy();
       });
 
diff --git a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
index 69964b2687d..6e0717c29d7 100644
--- a/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/diff_viewer/diff_viewer_spec.js
@@ -1,8 +1,6 @@
-import Vue, { nextTick } from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
-import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 
 describe('DiffViewer', () => {
   const requiredProps = {
@@ -14,37 +12,28 @@ describe('DiffViewer', () => {
     oldPath: RED_BOX_IMAGE_URL,
     oldSha: 'DEF',
   };
-  let vm;
-
-  function createComponent(props) {
-    const DiffViewer = Vue.extend(diffViewer);
+  let wrapper;
 
-    vm = mountComponent(DiffViewer, props);
+  function createComponent(propsData) {
+    wrapper = mount(DiffViewer, { propsData });
   }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('renders image diff', async () => {
+  it('renders image diff', () => {
     window.gon = {
       relative_url_root: '',
     };
 
     createComponent({ ...requiredProps, projectPath: '' });
 
-    await nextTick();
-
-    expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(
-      `//-/raw/DEF/${RED_BOX_IMAGE_URL}`,
-    );
-
-    expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe(
-      `//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`,
-    );
+    expect(wrapper.find('.deleted img').attributes('src')).toBe(`//-/raw/DEF/${RED_BOX_IMAGE_URL}`);
+    expect(wrapper.find('.added img').attributes('src')).toBe(`//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`);
   });
 
-  it('renders fallback download diff display', async () => {
+  it('renders fallback download diff display', () => {
     createComponent({
       ...requiredProps,
       diffViewerMode: 'added',
@@ -52,18 +41,10 @@ describe('DiffViewer', () => {
       oldPath: 'testold.abc',
     });
 
-    await nextTick();
-
-    expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain('testold.abc');
-
-    expect(vm.$el.querySelector('.deleted .btn.btn-default').textContent.trim()).toContain(
-      'Download',
-    );
-
-    expect(vm.$el.querySelector('.added .file-info').textContent.trim()).toContain('test.abc');
-    expect(vm.$el.querySelector('.added .btn.btn-default').textContent.trim()).toContain(
-      'Download',
-    );
+    expect(wrapper.find('.deleted .file-info').text()).toContain('testold.abc');
+    expect(wrapper.find('.deleted .btn.btn-default').text()).toContain('Download');
+    expect(wrapper.find('.added .file-info').text()).toContain('test.abc');
+    expect(wrapper.find('.added .btn.btn-default').text()).toContain('Download');
   });
 
   describe('renamed file', () => {
@@ -85,7 +66,7 @@ describe('DiffViewer', () => {
         oldPath: 'testold.abc',
       });
 
-      expect(vm.$el.textContent).toContain('File renamed with no changes.');
+      expect(wrapper.text()).toContain('File renamed with no changes.');
     });
   });
 
@@ -99,6 +80,6 @@ describe('DiffViewer', () => {
       bMode: '321',
     });
 
-    expect(vm.$el.textContent).toContain('File mode changed from 123 to 321');
+    expect(wrapper.text()).toContain('File mode changed from 123 to 321');
   });
 });
diff --git a/spec/frontend/vue_shared/components/file_finder/item_spec.js b/spec/frontend/vue_shared/components/file_finder/item_spec.js
index b69c33055c1..f0998b1b5c6 100644
--- a/spec/frontend/vue_shared/components/file_finder/item_spec.js
+++ b/spec/frontend/vue_shared/components/file_finder/item_spec.js
@@ -1,127 +1,119 @@
-import Vue, { nextTick } from 'vue';
-import createComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import { file } from 'jest/ide/helpers';
 import ItemComponent from '~/vue_shared/components/file_finder/item.vue';
 
 describe('File finder item spec', () => {
-  const Component = Vue.extend(ItemComponent);
-  let vm;
-  let localFile;
-
-  beforeEach(() => {
-    localFile = {
-      ...file(),
-      name: 'test file',
-      path: 'test/file',
-    };
-
-    vm = createComponent(Component, {
-      file: localFile,
-      focused: true,
-      searchText: '',
-      index: 0,
+  let wrapper;
+
+  const createComponent = ({ file: customFileFields = {}, ...otherProps } = {}) => {
+    wrapper = mount(ItemComponent, {
+      propsData: {
+        file: {
+          ...file(),
+          name: 'test file',
+          path: 'test/file',
+          ...customFileFields,
+        },
+        focused: true,
+        searchText: '',
+        index: 0,
+        ...otherProps,
+      },
     });
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders file name & path', () => {
-    expect(vm.$el.textContent).toContain('test file');
-    expect(vm.$el.textContent).toContain('test/file');
+    createComponent();
+
+    expect(wrapper.text()).toContain('test file');
+    expect(wrapper.text()).toContain('test/file');
   });
 
   describe('focused', () => {
     it('adds is-focused class', () => {
-      expect(vm.$el.classList).toContain('is-focused');
+      createComponent();
+
+      expect(wrapper.classes()).toContain('is-focused');
     });
 
     it('does not have is-focused class when not focused', async () => {
-      vm.focused = false;
+      createComponent({ focused: false });
 
-      await nextTick();
-      expect(vm.$el.classList).not.toContain('is-focused');
+      expect(wrapper.classes()).not.toContain('is-focused');
     });
   });
 
   describe('changed file icon', () => {
     it('does not render when not a changed or temp file', () => {
-      expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null);
+      createComponent();
+
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(false);
     });
 
     it('renders when a changed file', async () => {
-      vm.file.changed = true;
+      createComponent({ file: { changed: true } });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(true);
     });
 
     it('renders when a temp file', async () => {
-      vm.file.tempFile = true;
+      createComponent({ file: { tempFile: true } });
 
-      await nextTick();
-      expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null);
+      expect(wrapper.find('.diff-changed-stats').exists()).toBe(true);
     });
   });
 
-  it('emits event when clicked', () => {
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
+  it('emits event when clicked', async () => {
+    createComponent();
 
-    vm.$el.click();
+    await wrapper.find('*').trigger('click');
 
-    expect(vm.$emit).toHaveBeenCalledWith('click', vm.file);
+    expect(wrapper.emitted('click')[0]).toStrictEqual([wrapper.props('file')]);
   });
 
   describe('path', () => {
-    let el;
-
-    beforeEach(async () => {
-      vm.searchText = 'file';
-
-      el = vm.$el.querySelector('.diff-changed-file-path');
-
-      nextTick();
-    });
+    const findChangedFilePath = () => wrapper.find('.diff-changed-file-path');
 
     it('highlights text', () => {
-      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+      createComponent({ searchText: 'file' });
+
+      expect(findChangedFilePath().findAll('.highlighted')).toHaveLength(4);
     });
 
     it('adds ellipsis to long text', async () => {
-      vm.file.path = new Array(70)
+      const path = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
         .join('');
 
-      await nextTick();
-      expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`);
+      createComponent({ searchText: 'file', file: { path } });
+
+      expect(findChangedFilePath().text()).toBe(`...${path.substring(path.length - 60)}`);
     });
   });
 
   describe('name', () => {
-    let el;
-
-    beforeEach(async () => {
-      vm.searchText = 'file';
-
-      el = vm.$el.querySelector('.diff-changed-file-name');
-
-      await nextTick();
-    });
+    const findChangedFileName = () => wrapper.find('.diff-changed-file-name');
 
     it('highlights text', () => {
-      expect(el.querySelectorAll('.highlighted').length).toBe(4);
+      createComponent({ searchText: 'file' });
+
+      expect(findChangedFileName().findAll('.highlighted')).toHaveLength(4);
     });
 
     it('does not add ellipsis to long text', async () => {
-      vm.file.name = new Array(70)
+      const name = new Array(70)
         .fill()
         .map((_, i) => `${i}-`)
         .join('');
 
-      await nextTick();
-      expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`);
+      createComponent({ searchText: 'file', file: { name } });
+
+      expect(findChangedFileName().text()).not.toBe(`...${name.substring(name.length - 60)}`);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/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 4140ec09b4e..66ef473f368 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import httpStatusCodes 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';
@@ -159,7 +159,7 @@ describe('Filters actions', () => {
             },
           ],
           [],
-        ).then(() => expect(createFlash).toHaveBeenCalled());
+        ).then(() => expect(createAlert).toHaveBeenCalled());
       });
     });
   });
@@ -233,7 +233,7 @@ describe('Filters actions', () => {
           [],
         ).then(() => {
           expect(mock.history.get[0].url).toBe('/api/v1/groups/fake_group_endpoint/members');
-          expect(createFlash).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalled();
         });
       });
 
@@ -252,7 +252,7 @@ describe('Filters actions', () => {
           [],
         ).then(() => {
           expect(mock.history.get[0].url).toBe('/api/v1/projects/fake_project_endpoint/users');
-          expect(createFlash).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalled();
         });
       });
     });
@@ -298,7 +298,7 @@ describe('Filters actions', () => {
             },
           ],
           [],
-        ).then(() => expect(createFlash).toHaveBeenCalled());
+        ).then(() => expect(createAlert).toHaveBeenCalled());
       });
     });
   });
@@ -376,7 +376,7 @@ describe('Filters actions', () => {
           [],
         ).then(() => {
           expect(mock.history.get[0].url).toBe('/api/v1/groups/fake_group_endpoint/members');
-          expect(createFlash).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalled();
         });
       });
 
@@ -395,7 +395,7 @@ describe('Filters actions', () => {
           [],
         ).then(() => {
           expect(mock.history.get[0].url).toBe('/api/v1/projects/fake_project_endpoint/users');
-          expect(createFlash).toHaveBeenCalled();
+          expect(createAlert).toHaveBeenCalled();
         });
       });
     });
@@ -441,7 +441,7 @@ describe('Filters actions', () => {
             },
           ],
           [],
-        ).then(() => expect(createFlash).toHaveBeenCalled());
+        ).then(() => expect(createAlert).toHaveBeenCalled());
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
index 302dfabffb2..5371b9af475 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -140,13 +140,13 @@ describe('AuthorToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', () => {
+      it('calls `createAlert` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchAuthors').mockRejectedValue({});
 
         getBaseToken().vm.$emit('fetch-suggestions', 'root');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching users.',
           });
         });
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 1de35daa3a5..05b42011fe1 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,7 +9,7 @@ import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BranchToken from '~/vue_shared/components/filtered_search_bar/tokens/branch_token.vue';
@@ -87,13 +87,13 @@ describe('BranchToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', () => {
+      it('calls `createAlert` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchBranches').mockRejectedValue({});
 
         wrapper.vm.fetchBranches('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching branches.',
           });
         });
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 c9879987931..5b744521979 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
@@ -94,7 +94,7 @@ describe('CrmContactToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', 'foo');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchGroupCrmContactsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'group',
             isProject: false,
@@ -108,7 +108,7 @@ describe('CrmContactToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', '5');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchGroupCrmContactsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'group',
             isProject: false,
@@ -134,7 +134,7 @@ describe('CrmContactToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', 'foo');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchProjectCrmContactsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'project',
             isProject: true,
@@ -148,7 +148,7 @@ describe('CrmContactToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', '5');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchProjectCrmContactsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'project',
             isProject: true,
@@ -159,7 +159,7 @@ describe('CrmContactToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', async () => {
+      it('calls `createAlert` with flash error message when request fails', async () => {
         mountComponent();
 
         jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
@@ -167,7 +167,7 @@ describe('CrmContactToken', () => {
         getBaseToken().vm.$emit('fetch-suggestions');
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'There was a problem fetching CRM contacts.',
         });
       });
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 16333b052e6..3a3e96032e8 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
@@ -93,7 +93,7 @@ describe('CrmOrganizationToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', 'foo');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchGroupCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'group',
             isProject: false,
@@ -107,7 +107,7 @@ describe('CrmOrganizationToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', '5');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchGroupCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'group',
             isProject: false,
@@ -133,7 +133,7 @@ describe('CrmOrganizationToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', 'foo');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchProjectCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'project',
             isProject: true,
@@ -147,7 +147,7 @@ describe('CrmOrganizationToken', () => {
           getBaseToken().vm.$emit('fetch-suggestions', '5');
           await waitForPromises();
 
-          expect(createFlash).not.toHaveBeenCalled();
+          expect(createAlert).not.toHaveBeenCalled();
           expect(searchProjectCrmOrganizationsQueryHandler).toHaveBeenCalledWith({
             fullPath: 'project',
             isProject: true,
@@ -158,7 +158,7 @@ describe('CrmOrganizationToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', async () => {
+      it('calls `createAlert` with flash error message when request fails', async () => {
         mountComponent();
 
         jest.spyOn(wrapper.vm.$apollo, 'query').mockRejectedValue({});
@@ -166,7 +166,7 @@ describe('CrmOrganizationToken', () => {
         getBaseToken().vm.$emit('fetch-suggestions');
         await waitForPromises();
 
-        expect(createFlash).toHaveBeenCalledWith({
+        expect(createAlert).toHaveBeenCalledWith({
           message: 'There was a problem fetching CRM organizations.',
         });
       });
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 bf4a6eb7635..e8436d2db17 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import {
@@ -93,13 +93,13 @@ describe('EmojiToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', () => {
+      it('calls `createAlert` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockRejectedValue({});
 
         wrapper.vm.fetchEmojis('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching emojis.',
           });
         });
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 01e281884ed..8ca12afacec 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/vue_shared/components/sidebar/labels_select_vue/mock_data';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -116,13 +116,13 @@ describe('LabelToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', () => {
+      it('calls `createAlert` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
 
         wrapper.vm.fetchLabels('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching labels.',
           });
         });
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 f71ba51fc5b..589697fe542 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,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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { sortMilestonesByDueDate } from '~/milestones/utils';
 
@@ -112,13 +112,13 @@ describe('MilestoneToken', () => {
         });
       });
 
-      it('calls `createFlash` with flash error message when request fails', () => {
+      it('calls `createAlert` with flash error message when request fails', () => {
         jest.spyOn(wrapper.vm.config, 'fetchMilestones').mockRejectedValue({});
 
         wrapper.vm.fetchMilestones('foo');
 
         return waitForPromises().then(() => {
-          expect(createFlash).toHaveBeenCalledWith({
+          expect(createAlert).toHaveBeenCalledWith({
             message: 'There was a problem fetching milestones.',
           });
         });
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 4bbbaab9b7a..0e5fa0f66d4 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,7 +2,7 @@ import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui'
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
 import { mockReleaseToken } from '../mock_data';
 
@@ -73,7 +73,7 @@ describe('ReleaseToken', () => {
     });
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalledWith({
+    expect(createAlert).toHaveBeenCalledWith({
       message: 'There was a problem fetching releases.',
     });
   });
diff --git a/spec/frontend/vue_shared/components/gitlab_version_check_spec.js b/spec/frontend/vue_shared/components/gitlab_version_check_spec.js
index 6699ae5fb69..38f28837cc1 100644
--- a/spec/frontend/vue_shared/components/gitlab_version_check_spec.js
+++ b/spec/frontend/vue_shared/components/gitlab_version_check_spec.js
@@ -1,7 +1,9 @@
 import { GlBadge } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { mockTracking } from 'helpers/tracking_helper';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import axios from '~/lib/utils/axios_utils';
 import GitlabVersionCheck from '~/vue_shared/components/gitlab_version_check.vue';
 
@@ -9,6 +11,8 @@ describe('GitlabVersionCheck', () => {
   let wrapper;
   let mock;
 
+  const UPGRADE_DOCS_URL = helpPagePath('update/index');
+
   const defaultResponse = {
     code: 200,
     res: { severity: 'success' },
@@ -23,7 +27,7 @@ describe('GitlabVersionCheck', () => {
     mock = new MockAdapter(axios);
     mock.onGet().replyOnce(response.code, response.res);
 
-    wrapper = shallowMount(GitlabVersionCheck);
+    wrapper = shallowMountExtended(GitlabVersionCheck);
   };
 
   const dummyGon = {
@@ -38,6 +42,7 @@ describe('GitlabVersionCheck', () => {
     window.gon = originalGon;
   });
 
+  const findGlBadgeClickWrapper = () => wrapper.findByTestId('badge-click-wrapper');
   const findGlBadge = () => wrapper.findComponent(GlBadge);
 
   describe.each`
@@ -77,7 +82,8 @@ describe('GitlabVersionCheck', () => {
           await waitForPromises(); // Ensure we wrap up the axios call
         });
 
-        it(`does${renders ? '' : ' not'} render GlBadge`, () => {
+        it(`does${renders ? '' : ' not'} render Badge Click Wrapper and GlBadge`, () => {
+          expect(findGlBadgeClickWrapper().exists()).toBe(renders);
           expect(findGlBadge().exists()).toBe(renders);
         });
       });
@@ -90,8 +96,11 @@ describe('GitlabVersionCheck', () => {
       ${{ code: 200, res: { severity: 'danger' } }}  | ${{ title: 'Update ASAP', variant: 'danger' }}
     `('badge ui', ({ mockResponse, expectedUI }) => {
       describe(`when response is ${mockResponse.res.severity}`, () => {
+        let trackingSpy;
+
         beforeEach(async () => {
           createComponent(mockResponse);
+          trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
           await waitForPromises(); // Ensure we wrap up the axios call
         });
 
@@ -102,6 +111,24 @@ describe('GitlabVersionCheck', () => {
         it(`variant is ${expectedUI.variant}`, () => {
           expect(findGlBadge().attributes('variant')).toBe(expectedUI.variant);
         });
+
+        it(`tracks rendered_version_badge with label ${expectedUI.title}`, () => {
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'rendered_version_badge', {
+            label: expectedUI.title,
+          });
+        });
+
+        it(`link is ${UPGRADE_DOCS_URL}`, () => {
+          expect(findGlBadge().attributes('href')).toBe(UPGRADE_DOCS_URL);
+        });
+
+        it(`tracks click_version_badge with label ${expectedUI.title} when badge is clicked`, async () => {
+          await findGlBadgeClickWrapper().trigger('click');
+
+          expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_version_badge', {
+            label: expectedUI.title,
+          });
+        });
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/gl_countdown_spec.js b/spec/frontend/vue_shared/components/gl_countdown_spec.js
index 0d1d42082ab..af53d256236 100644
--- a/spec/frontend/vue_shared/components/gl_countdown_spec.js
+++ b/spec/frontend/vue_shared/components/gl_countdown_spec.js
@@ -1,10 +1,9 @@
 import Vue, { nextTick } from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
 describe('GlCountdown', () => {
-  const Component = Vue.extend(GlCountdown);
-  let vm;
+  let wrapper;
   let now = '2000-01-01T00:00:00Z';
 
   beforeEach(() => {
@@ -12,21 +11,20 @@ describe('GlCountdown', () => {
   });
 
   afterEach(() => {
-    vm.$destroy();
-    jest.clearAllTimers();
+    wrapper.destroy();
   });
 
   describe('when there is time remaining', () => {
     beforeEach(async () => {
-      vm = mountComponent(Component, {
-        endDateString: '2000-01-01T01:02:03Z',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: '2000-01-01T01:02:03Z',
+        },
       });
-
-      await nextTick();
     });
 
     it('displays remaining time', () => {
-      expect(vm.$el.textContent).toContain('01:02:03');
+      expect(wrapper.text()).toContain('01:02:03');
     });
 
     it('updates remaining time', async () => {
@@ -34,21 +32,21 @@ describe('GlCountdown', () => {
       jest.advanceTimersByTime(1000);
 
       await nextTick();
-      expect(vm.$el.textContent).toContain('01:02:02');
+      expect(wrapper.text()).toContain('01:02:02');
     });
   });
 
   describe('when there is no time remaining', () => {
     beforeEach(async () => {
-      vm = mountComponent(Component, {
-        endDateString: '1900-01-01T00:00:00Z',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: '1900-01-01T00:00:00Z',
+        },
       });
-
-      await nextTick();
     });
 
     it('displays 00:00:00', () => {
-      expect(vm.$el.textContent).toContain('00:00:00');
+      expect(wrapper.text()).toContain('00:00:00');
     });
   });
 
@@ -62,8 +60,10 @@ describe('GlCountdown', () => {
     });
 
     it('throws a validation error', () => {
-      vm = mountComponent(Component, {
-        endDateString: 'this is invalid',
+      wrapper = mount(GlCountdown, {
+        propsData: {
+          endDateString: 'this is invalid',
+        },
       });
 
       expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1);
diff --git a/spec/frontend/vue_shared/components/group_select/utils_spec.js b/spec/frontend/vue_shared/components/group_select/utils_spec.js
new file mode 100644
index 00000000000..5188e1aabf1
--- /dev/null
+++ b/spec/frontend/vue_shared/components/group_select/utils_spec.js
@@ -0,0 +1,24 @@
+import { groupsPath } from '~/vue_shared/components/group_select/utils';
+
+describe('group_select utils', () => {
+  describe('groupsPath', () => {
+    it.each`
+      groupsFilter           | parentGroupID | expectedPath
+      ${undefined}           | ${undefined}  | ${'/api/:version/groups.json'}
+      ${undefined}           | ${1}          | ${'/api/:version/groups.json'}
+      ${'descendant_groups'} | ${1}          | ${'/api/:version/groups/1/descendant_groups'}
+      ${'subgroups'}         | ${1}          | ${'/api/:version/groups/1/subgroups'}
+    `(
+      'returns $expectedPath with groupsFilter = $groupsFilter and parentGroupID = $parentGroupID',
+      ({ groupsFilter, parentGroupID, expectedPath }) => {
+        expect(groupsPath(groupsFilter, parentGroupID)).toBe(expectedPath);
+      },
+    );
+  });
+
+  it('throws if groupsFilter is passed but parentGroupID is undefined', () => {
+    expect(() => {
+      groupsPath('descendant_groups');
+    }).toThrow('Cannot use groupsFilter without a parentGroupID');
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index 9831908f806..ed417097e1e 100644
--- a/spec/frontend/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -54,6 +54,8 @@ describe('Markdown field header component', () => {
         'Add a bullet list',
         'Add a numbered list',
         'Add a checklist',
+        'Indent line (⌘])',
+        'Outdent line (⌘[)',
         'Add a collapsible section',
         'Add a table',
         'Go full screen',
@@ -140,7 +142,7 @@ describe('Markdown field header component', () => {
     const tableButton = findToolbarButtonByProp('icon', 'table');
 
     expect(tableButton.props('tag')).toEqual(
-      '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |',
+      '| header | header |\n| ------ | ------ |\n|        |        |\n|        |        |',
     );
   });
 
diff --git a/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
new file mode 100644
index 00000000000..f7e93f45148
--- /dev/null
+++ b/spec/frontend/vue_shared/components/markdown/markdown_editor_spec.js
@@ -0,0 +1,289 @@
+import { GlSegmentedControl } from '@gitlab/ui';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { EDITING_MODE_MARKDOWN_FIELD, EDITING_MODE_CONTENT_EDITOR } from '~/vue_shared/constants';
+import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import ContentEditor from '~/content_editor/components/content_editor.vue';
+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';
+
+jest.mock('~/emoji');
+
+describe('vue_shared/component/markdown/markdown_editor', () => {
+  let wrapper;
+  const value = 'test markdown';
+  const renderMarkdownPath = '/api/markdown';
+  const markdownDocsPath = '/help/markdown';
+  const quickActionsDocsPath = '/help/quickactions';
+  const enableAutocomplete = true;
+  const enablePreview = false;
+  const formFieldId = 'markdown_field';
+  const formFieldName = 'form[markdown_field]';
+  const formFieldPlaceholder = 'Write some markdown';
+  const formFieldAriaLabel = 'Edit your content';
+  let mock;
+
+  const buildWrapper = ({ propsData = {}, attachTo } = {}) => {
+    wrapper = mountExtended(MarkdownEditor, {
+      attachTo,
+      propsData: {
+        value,
+        renderMarkdownPath,
+        markdownDocsPath,
+        quickActionsDocsPath,
+        enableAutocomplete,
+        enablePreview,
+        formFieldId,
+        formFieldName,
+        formFieldPlaceholder,
+        formFieldAriaLabel,
+        ...propsData,
+      },
+      stubs: {
+        BubbleMenu: stubComponent(BubbleMenu),
+      },
+    });
+  };
+  const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl);
+  const findMarkdownField = () => wrapper.findComponent(MarkdownField);
+  const findTextarea = () => wrapper.find('textarea');
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
+  const findContentEditor = () => wrapper.findComponent(ContentEditor);
+
+  beforeEach(() => {
+    window.uploads_path = 'uploads';
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mock.restore();
+  });
+
+  it('displays markdown field by default', () => {
+    buildWrapper({ propsData: { supportsQuickActions: true } });
+
+    expect(findMarkdownField().props()).toEqual(
+      expect.objectContaining({
+        markdownPreviewPath: renderMarkdownPath,
+        quickActionsDocsPath,
+        canAttachFile: true,
+        enableAutocomplete,
+        textareaValue: value,
+        markdownDocsPath,
+        uploadsPath: window.uploads_path,
+        enablePreview,
+      }),
+    );
+  });
+
+  it('renders markdown field textarea', () => {
+    buildWrapper();
+
+    expect(findTextarea().attributes()).toEqual(
+      expect.objectContaining({
+        id: formFieldId,
+        name: formFieldName,
+        placeholder: formFieldPlaceholder,
+        'aria-label': formFieldAriaLabel,
+      }),
+    );
+
+    expect(findTextarea().element.value).toBe(value);
+  });
+
+  it('renders switch segmented control', () => {
+    buildWrapper();
+
+    expect(findSegmentedControl().props()).toEqual({
+      checked: EDITING_MODE_MARKDOWN_FIELD,
+      options: [
+        {
+          text: expect.any(String),
+          value: EDITING_MODE_MARKDOWN_FIELD,
+        },
+        {
+          text: expect.any(String),
+          value: EDITING_MODE_CONTENT_EDITOR,
+        },
+      ],
+    });
+  });
+
+  describe.each`
+    editingMode
+    ${EDITING_MODE_CONTENT_EDITOR}
+    ${EDITING_MODE_MARKDOWN_FIELD}
+  `('when segmented control emits change event with $editingMode value', ({ editingMode }) => {
+    it(`emits ${editingMode} event`, () => {
+      buildWrapper();
+
+      findSegmentedControl().vm.$emit('change', editingMode);
+
+      expect(wrapper.emitted(editingMode)).toHaveLength(1);
+    });
+  });
+
+  describe(`when editingMode is ${EDITING_MODE_MARKDOWN_FIELD}`, () => {
+    it('emits input event when markdown field textarea changes', async () => {
+      buildWrapper();
+      const newValue = 'new value';
+
+      await findTextarea().setValue(newValue);
+
+      expect(wrapper.emitted('input')).toEqual([[newValue]]);
+    });
+
+    describe('when initOnAutofocus is true', () => {
+      beforeEach(async () => {
+        buildWrapper({ attachTo: document.body, propsData: { initOnAutofocus: true } });
+
+        await nextTick();
+      });
+
+      it('sets the markdown field as the active element in the document', () => {
+        expect(document.activeElement).toBe(findTextarea().element);
+      });
+    });
+
+    it('bubbles up keydown event', async () => {
+      buildWrapper();
+
+      await findTextarea().trigger('keydown');
+
+      expect(wrapper.emitted('keydown')).toHaveLength(1);
+    });
+
+    describe(`when segmented control triggers input event with ${EDITING_MODE_CONTENT_EDITOR} value`, () => {
+      beforeEach(() => {
+        buildWrapper();
+        findSegmentedControl().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
+        findSegmentedControl().vm.$emit('change', EDITING_MODE_CONTENT_EDITOR);
+      });
+
+      it('displays the content editor', () => {
+        expect(findContentEditor().props()).toEqual(
+          expect.objectContaining({
+            renderMarkdown: expect.any(Function),
+            uploadsPath: window.uploads_path,
+            markdown: value,
+            autofocus: 'end',
+          }),
+        );
+      });
+
+      it('adds hidden field with current markdown', () => {
+        const hiddenField = wrapper.find(`#${formFieldId}`);
+
+        expect(hiddenField.attributes()).toEqual(
+          expect.objectContaining({
+            id: formFieldId,
+            name: formFieldName,
+          }),
+        );
+        expect(hiddenField.element.value).toBe(value);
+      });
+
+      it('hides the markdown field', () => {
+        expect(findMarkdownField().exists()).toBe(false);
+      });
+
+      it('updates localStorage value', () => {
+        expect(findLocalStorageSync().props().value).toBe(EDITING_MODE_CONTENT_EDITOR);
+      });
+    });
+  });
+
+  describe(`when editingMode is ${EDITING_MODE_CONTENT_EDITOR}`, () => {
+    beforeEach(() => {
+      buildWrapper();
+      findSegmentedControl().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
+    });
+
+    describe('when initOnAutofocus is true', () => {
+      beforeEach(() => {
+        buildWrapper({ propsData: { initOnAutofocus: true } });
+        findLocalStorageSync().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
+      });
+
+      it('sets the content editor autofocus property to end', () => {
+        expect(findContentEditor().props().autofocus).toBe('end');
+      });
+    });
+
+    it('emits input event when content editor emits change event', async () => {
+      const newValue = 'new value';
+
+      await findContentEditor().vm.$emit('change', { markdown: newValue });
+
+      expect(wrapper.emitted('input')).toEqual([[newValue]]);
+    });
+
+    it('bubbles up keydown event', () => {
+      const event = new Event('keydown');
+
+      findContentEditor().vm.$emit('keydown', event);
+
+      expect(wrapper.emitted('keydown')).toEqual([[event]]);
+    });
+
+    describe(`when segmented control triggers input event with ${EDITING_MODE_MARKDOWN_FIELD} value`, () => {
+      beforeEach(() => {
+        findSegmentedControl().vm.$emit('input', EDITING_MODE_MARKDOWN_FIELD);
+      });
+
+      it('hides the content editor', () => {
+        expect(findContentEditor().exists()).toBe(false);
+      });
+
+      it('shows the markdown field', () => {
+        expect(findMarkdownField().exists()).toBe(true);
+      });
+
+      it('updates localStorage value', () => {
+        expect(findLocalStorageSync().props().value).toBe(EDITING_MODE_MARKDOWN_FIELD);
+      });
+
+      it('sets the textarea as the activeElement in the document', async () => {
+        // The component should be rebuilt to attach it to the document body
+        buildWrapper({ attachTo: document.body });
+        await findSegmentedControl().vm.$emit('input', EDITING_MODE_CONTENT_EDITOR);
+
+        expect(findContentEditor().exists()).toBe(true);
+
+        await findSegmentedControl().vm.$emit('input', EDITING_MODE_MARKDOWN_FIELD);
+        await findSegmentedControl().vm.$emit('change', EDITING_MODE_MARKDOWN_FIELD);
+
+        expect(document.activeElement).toBe(findTextarea().element);
+      });
+    });
+
+    describe('when content editor emits loading event', () => {
+      beforeEach(() => {
+        findContentEditor().vm.$emit('loading');
+      });
+
+      it('disables switch editing mode control', () => {
+        // This is the only way that I found to check the segmented control is disabled
+        expect(findSegmentedControl().find('input[disabled]').exists()).toBe(true);
+      });
+
+      describe.each`
+        event
+        ${'loadingSuccess'}
+        ${'loadingError'}
+      `('when content editor emits $event event', ({ event }) => {
+        beforeEach(() => {
+          findContentEditor().vm.$emit(event);
+        });
+        it('enables the switch editing mode control', () => {
+          expect(findSegmentedControl().find('input[disabled]').exists()).toBe(false);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/metric_images/metric_images_table_spec.js b/spec/frontend/vue_shared/components/metric_images/metric_images_table_spec.js
index d792bd46ccd..9c91dc9b5fc 100644
--- a/spec/frontend/vue_shared/components/metric_images/metric_images_table_spec.js
+++ b/spec/frontend/vue_shared/components/metric_images/metric_images_table_spec.js
@@ -139,8 +139,7 @@ describe('Metrics upload item', () => {
         closeModal();
 
         await waitForPromises();
-
-        expect(findModal().attributes('visible')).toBeFalsy();
+        expect(findModal().attributes('visible')).toBeUndefined();
       });
 
       it('should delete the image when selected', async () => {
@@ -189,8 +188,7 @@ describe('Metrics upload item', () => {
         closeEditModal();
 
         await waitForPromises();
-
-        expect(findEditModal().attributes('visible')).toBeFalsy();
+        expect(findEditModal().attributes('visible')).toBeUndefined();
       });
 
       it('should delete the image when selected', async () => {
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 518cf354675..537367940e0 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,7 +4,7 @@ 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { fileList, initialData } from '../mock_data';
 
@@ -35,7 +35,7 @@ describe('Metrics tab store actions', () => {
   });
 
   afterEach(() => {
-    createFlash.mockClear();
+    createAlert.mockClear();
   });
 
   describe('fetching metric images', () => {
@@ -61,7 +61,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_IMAGES }, { type: types.RECEIVE_METRIC_IMAGES_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -98,7 +98,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_UPLOAD }, { type: types.RECEIVE_METRIC_UPLOAD_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
@@ -129,7 +129,7 @@ describe('Metrics tab store actions', () => {
         [{ type: types.REQUEST_METRIC_UPLOAD }, { type: types.RECEIVE_METRIC_UPLOAD_ERROR }],
         [],
       );
-      expect(createFlash).toHaveBeenCalled();
+      expect(createAlert).toHaveBeenCalled();
     });
   });
 
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 b57efc88d57..61e4e774420 100644
--- a/spec/frontend/vue_shared/components/modal_copy_button_spec.js
+++ b/spec/frontend/vue_shared/components/modal_copy_button_spec.js
@@ -17,9 +17,16 @@ describe('modal copy button', () => {
         title: 'Copy this value',
         id: 'test-id',
       },
+      slots: {
+        default: 'test',
+      },
     });
   });
 
+  it('should show the default slot', () => {
+    expect(wrapper.text()).toBe('test');
+  });
+
   describe('clipboard', () => {
     it('should fire a `success` event on click', async () => {
       const root = createWrapper(wrapper.vm.$root);
diff --git a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js b/spec/frontend/vue_shared/components/namespace_select/namespace_select_deprecated_spec.js
index 2c14d65186b..d930ef63dad 100644
--- a/spec/frontend/vue_shared/components/namespace_select/namespace_select_spec.js
+++ b/spec/frontend/vue_shared/components/namespace_select/namespace_select_deprecated_spec.js
@@ -11,14 +11,14 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NamespaceSelect, {
   i18n,
   EMPTY_NAMESPACE_ID,
-} from '~/vue_shared/components/namespace_select/namespace_select.vue';
+} from '~/vue_shared/components/namespace_select/namespace_select_deprecated.vue';
 import { userNamespaces, groupNamespaces } from './mock_data';
 
 const FLAT_NAMESPACES = [...userNamespaces, ...groupNamespaces];
 const EMPTY_NAMESPACE_TITLE = 'Empty namespace TEST';
 const EMPTY_NAMESPACE_ITEM = { id: EMPTY_NAMESPACE_ID, humanName: EMPTY_NAMESPACE_TITLE };
 
-describe('Namespace Select', () => {
+describe('NamespaceSelectDeprecated', () => {
   let wrapper;
 
   const createComponent = (props = {}) =>
@@ -207,9 +207,9 @@ describe('Namespace Select', () => {
       expect(wrapper.emitted('load-more-groups')).toEqual([[]]);
     });
 
-    describe('when `isLoadingMoreGroups` prop is `true`', () => {
+    describe('when `isLoading` prop is `true`', () => {
       it('renders a loading icon', () => {
-        wrapper = createComponent({ hasNextPageOfGroups: true, isLoadingMoreGroups: true });
+        wrapper = createComponent({ hasNextPageOfGroups: true, isLoading: true });
 
         expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
       });
@@ -223,4 +223,14 @@ describe('Namespace Select', () => {
       expect(wrapper.findComponent(GlSearchBoxByType).props('isLoading')).toBe(true);
     });
   });
+
+  describe('when dropdown is opened', () => {
+    it('emits `show` event', () => {
+      wrapper = createComponent();
+
+      findDropdown().vm.$emit('show');
+
+      expect(wrapper.emitted('show')).toEqual([[]]);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap
index bf6c8e8c704..3bac96069ec 100644
--- a/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap
+++ b/spec/frontend/vue_shared/components/notes/__snapshots__/placeholder_note_spec.js.snap
@@ -2,13 +2,12 @@
 
 exports[`Issue placeholder note component matches snapshot 1`] = `
 <timeline-entry-item-stub
-  class="note note-wrapper being-posted fade-in-half"
+  class="note note-wrapper note-comment being-posted fade-in-half"
 >
   <div
-    class="timeline-icon"
+    class="timeline-avatar gl-float-left"
   >
     <gl-avatar-link-stub
-      class="gl-mr-3"
       href="/root"
     >
       <gl-avatar-stub
@@ -16,7 +15,7 @@ exports[`Issue placeholder note component matches snapshot 1`] = `
         entityid="0"
         entityname="root"
         shape="circle"
-        size="[object Object]"
+        size="32"
         src="mock_path"
       />
     </gl-avatar-link-stub>
@@ -50,16 +49,20 @@ exports[`Issue placeholder note component matches snapshot 1`] = `
     </div>
      
     <div
-      class="note-body"
+      class="timeline-discussion-body"
     >
       <div
-        class="note-text md"
+        class="note-body"
       >
-        <p>
-          Foo
-        </p>
-        
+        <div
+          class="note-text md"
+        >
+          <p>
+            Foo
+          </p>
+          
 
+        </div>
       </div>
     </div>
   </div>
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 b86c8946e96..8f9f1bb336f 100644
--- a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
+++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js
@@ -1,5 +1,4 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlAvatar } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import IssuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
@@ -53,17 +52,4 @@ describe('Issue placeholder note component', () => {
 
     expect(findNote().classes()).toContain('discussion');
   });
-
-  describe('avatar size', () => {
-    it.each`
-      size                       | line                    | isOverviewTab
-      ${{ default: 24, md: 32 }} | ${null}                 | ${false}
-      ${24}                      | ${{ line_code: '123' }} | ${false}
-      ${{ default: 24, md: 32 }} | ${{ line_code: '123' }} | ${true}
-    `('renders avatar $size for $line and $isOverviewTab', ({ size, line, isOverviewTab }) => {
-      createComponent(false, { line, isOverviewTab });
-
-      expect(wrapper.findComponent(GlAvatar).props('size')).toEqual(size);
-    });
-  });
 });
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 b3be2f8a775..112cdaf74c6 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
@@ -2,6 +2,7 @@ import { GlPagination, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 describe('Pagination bar', () => {
   const DEFAULT_PROPS = {
@@ -20,6 +21,7 @@ describe('Pagination bar', () => {
         ...DEFAULT_PROPS,
         ...propsData,
       },
+      stubs: { LocalStorageSync: true },
     });
   };
 
@@ -90,4 +92,28 @@ describe('Pagination bar', () => {
       'Showing 21 - 40 of 1000+',
     );
   });
+
+  describe('local storage sync', () => {
+    it('does not perform local storage sync when no storage key is provided', () => {
+      createComponent();
+
+      expect(wrapper.findComponent(LocalStorageSync).exists()).toBe(false);
+    });
+
+    it('passes current page size to local storage sync when storage key is provided', () => {
+      const STORAGE_KEY = 'fakeStorageKey';
+      createComponent({ storageKey: STORAGE_KEY });
+
+      expect(wrapper.getComponent(LocalStorageSync).props('storageKey')).toBe(STORAGE_KEY);
+    });
+
+    it('emits set-page event when local storage sync provides new value', () => {
+      const SAVED_SIZE = 50;
+      createComponent({ storageKey: 'some storage key' });
+
+      wrapper.getComponent(LocalStorageSync).vm.$emit('input', SAVED_SIZE);
+
+      expect(wrapper.emitted('set-page-size')).toEqual([[SAVED_SIZE]]);
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/panel_resizer_spec.js b/spec/frontend/vue_shared/components/panel_resizer_spec.js
index d8b903e5bfd..0e261124cbf 100644
--- a/spec/frontend/vue_shared/components/panel_resizer_spec.js
+++ b/spec/frontend/vue_shared/components/panel_resizer_spec.js
@@ -1,12 +1,10 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import panelResizer from '~/vue_shared/components/panel_resizer.vue';
+import { mount } from '@vue/test-utils';
+import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 
 describe('Panel Resizer component', () => {
-  let vm;
-  let PanelResizer;
+  let wrapper;
 
-  const triggerEvent = (eventName, el = vm.$el, clientX = 0) => {
+  const triggerEvent = (eventName, el = wrapper.element, clientX = 0) => {
     const event = document.createEvent('MouseEvents');
     event.initMouseEvent(
       eventName,
@@ -29,57 +27,64 @@ describe('Panel Resizer component', () => {
     el.dispatchEvent(event);
   };
 
-  beforeEach(() => {
-    PanelResizer = Vue.extend(panelResizer);
-  });
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('should render a div element with the correct classes and styles', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'left',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'left',
+      },
     });
 
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe(
-      'position-absolute position-top-0 position-bottom-0 drag-handle position-left-0',
-    );
+    expect(wrapper.element.tagName).toEqual('DIV');
+    expect(wrapper.classes().sort()).toStrictEqual([
+      'drag-handle',
+      'position-absolute',
+      'position-bottom-0',
+      'position-left-0',
+      'position-top-0',
+    ]);
 
-    expect(vm.$el.getAttribute('style')).toBe('cursor: ew-resize;');
+    expect(wrapper.element.getAttribute('style')).toBe('cursor: ew-resize;');
   });
 
   it('should render a div element with the correct classes for a right side panel', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'right',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'right',
+      },
     });
 
-    expect(vm.$el.tagName).toEqual('DIV');
-    expect(vm.$el.getAttribute('class')).toBe(
-      'position-absolute position-top-0 position-bottom-0 drag-handle position-right-0',
-    );
+    expect(wrapper.element.tagName).toEqual('DIV');
+    expect(wrapper.classes().sort()).toStrictEqual([
+      'drag-handle',
+      'position-absolute',
+      'position-bottom-0',
+      'position-right-0',
+      'position-top-0',
+    ]);
   });
 
   it('drag the resizer', () => {
-    vm = mountComponent(PanelResizer, {
-      startSize: 100,
-      side: 'left',
+    wrapper = mount(PanelResizer, {
+      propsData: {
+        startSize: 100,
+        side: 'left',
+      },
     });
 
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    triggerEvent('mousedown', vm.$el);
+    triggerEvent('mousedown');
     triggerEvent('mousemove', document);
     triggerEvent('mouseup', document);
 
-    expect(vm.$emit.mock.calls).toEqual([
-      ['resize-start', 100],
-      ['update:size', 100],
-      ['resize-end', 100],
-    ]);
-
-    expect(vm.size).toBe(100);
+    expect(wrapper.emitted()).toEqual({
+      'resize-start': [[100]],
+      'update:size': [[100]],
+      'resize-end': [[100]],
+    });
   });
 });
diff --git a/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap b/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap
index 2abae33bc19..66cf2354bc7 100644
--- a/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap
+++ b/spec/frontend/vue_shared/components/registry/__snapshots__/history_item_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`History Item renders the correct markup 1`] = `
 <li
-  class="timeline-entry system-note note-wrapper gl-mb-6!"
+  class="timeline-entry system-note note-wrapper"
 >
   <div
     class="timeline-entry-inner"
@@ -22,11 +22,13 @@ exports[`History Item renders the correct markup 1`] = `
       <div
         class="note-header"
       >
-        <span>
+        <div
+          class="note-header-info"
+        >
           <div
             data-testid="default-slot"
           />
-        </span>
+        </div>
       </div>
        
       <div
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 c5672bc28cc..09b0b3d43ad 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 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 {
@@ -93,8 +93,8 @@ describe('Merge request artifact Download', () => {
       });
     });
 
-    it('calls createFlash correctly', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+    it('calls createAlert correctly', () => {
+      expect(createAlert).toHaveBeenCalledWith({
         message: Component.i18n.apiError,
         captureError: true,
         error: expect.any(Error),
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
index 4c7ac6e9a6f..30c1a4b7d2f 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
@@ -67,9 +67,9 @@ describe('LabelsSelectRoot', () => {
 
         // We're utilizing `onDropdownClose` event emitted from the component to always include `touchedLabels`
         // while the first param of the method is the labels list which were added/removed.
-        expect(wrapper.emitted('updateSelectedLabels')).toBeTruthy();
+        expect(wrapper.emitted('updateSelectedLabels')).toHaveLength(1);
         expect(wrapper.emitted('updateSelectedLabels')[0]).toEqual([touchedLabels]);
-        expect(wrapper.emitted('onDropdownClose')).toBeTruthy();
+        expect(wrapper.emitted('onDropdownClose')).toHaveLength(1);
         expect(wrapper.emitted('onDropdownClose')[0]).toEqual([touchedLabels]);
       });
 
@@ -88,7 +88,7 @@ describe('LabelsSelectRoot', () => {
           },
         );
 
-        expect(wrapper.emitted('updateSelectedLabels')).toBeTruthy();
+        expect(wrapper.emitted('updateSelectedLabels')).toHaveLength(1);
         expect(wrapper.emitted('updateSelectedLabels')[0]).toEqual([
           [
             {
@@ -97,7 +97,7 @@ describe('LabelsSelectRoot', () => {
             },
           ],
         ]);
-        expect(wrapper.emitted('onDropdownClose')).toBeTruthy();
+        expect(wrapper.emitted('onDropdownClose')).toHaveLength(1);
         expect(wrapper.emitted('onDropdownClose')[0]).toEqual([[]]);
       });
     });
@@ -106,8 +106,7 @@ describe('LabelsSelectRoot', () => {
       it('emits `toggleCollapse` event on component', () => {
         createComponent();
         wrapper.vm.handleCollapsedValueClick();
-
-        expect(wrapper.emitted().toggleCollapse).toBeTruthy();
+        expect(wrapper.emitted().toggleCollapse).toHaveLength(1);
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
index 2bc513e87bf..edd044bd754 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
@@ -1,7 +1,7 @@
 import MockAdapter from 'axios-mock-adapter';
 
 import testAction from 'helpers/vuex_action_helper';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import * as actions from '~/vue_shared/components/sidebar/labels_select_vue/store/actions';
 import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
@@ -102,7 +102,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveLabelsFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });
 
@@ -186,7 +186,7 @@ describe('LabelsSelect Actions', () => {
     it('shows flash error', () => {
       actions.receiveCreateLabelFailure({ commit: () => {} });
 
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error creating label.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error creating label.' });
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
index 1819e750324..2b2508b5e11 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
@@ -189,10 +189,20 @@ describe('LabelsSelect Mutations', () => {
       });
 
       labelGroupIds.forEach((l) => {
-        expect(state.labels[l.id - 1].touched).toBeFalsy();
+        expect(state.labels[l.id - 1].touched).toBeUndefined();
         expect(state.labels[l.id - 1].set).toBe(false);
       });
     });
+    it('allows selection of multiple scoped labels', () => {
+      const state = { labels: cloneDeep(labels), allowMultipleScopedLabels: true };
+
+      mutations[types.UPDATE_SELECTED_LABELS](state, { labels: [{ id: labels[4].id }] });
+      mutations[types.UPDATE_SELECTED_LABELS](state, { labels: [{ id: labels[5].id }] });
+
+      expect(state.labels[4].set).toBe(true);
+      expect(state.labels[5].set).toBe(true);
+      expect(state.labels[6].set).toBe(true);
+    });
   });
 
   describe(`${types.UPDATE_LABELS_SET_STATE}`, () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
index 9c29f304c71..237f174e048 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { workspaceLabelsQueries } from '~/sidebar/constants';
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_create_view.vue';
 import createLabelMutation from '~/vue_shared/components/sidebar/labels_select_widget/graphql/create_label.mutation.graphql';
@@ -202,7 +202,7 @@ describe('DropdownContentsCreateView', () => {
     });
   });
 
-  it('calls createFlash is mutation has a user-recoverable error', async () => {
+  it('calls createAlert is mutation has a user-recoverable error', async () => {
     createComponent({ mutationHandler: createLabelUserRecoverableErrorHandler });
     fillLabelAttributes();
     await nextTick();
@@ -210,10 +210,10 @@ describe('DropdownContentsCreateView', () => {
     findCreateButton().vm.$emit('click');
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
-  it('calls createFlash is mutation was rejected', async () => {
+  it('calls createAlert is mutation was rejected', async () => {
     createComponent({ mutationHandler: createLabelErrorHandler });
     fillLabelAttributes();
     await nextTick();
@@ -221,7 +221,7 @@ describe('DropdownContentsCreateView', () => {
     findCreateButton().vm.$emit('click');
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('displays error in alert if label title is already taken', async () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
index 7f6770e0bea..5d8ad5ddee5 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents_labels_view.vue';
@@ -143,13 +143,13 @@ describe('DropdownContentsLabelsView', () => {
     expect(findNoResultsMessage().isVisible()).toBe(true);
   });
 
-  it('calls `createFlash` when fetching labels failed', async () => {
+  it('calls `createAlert` when fetching labels failed', async () => {
     createComponent({ queryHandler: jest.fn().mockRejectedValue('Houston, we have a problem!') });
     await makeObserverAppear();
     jest.advanceTimersByTime(DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
     await waitForPromises();
 
-    expect(createFlash).toHaveBeenCalled();
+    expect(createAlert).toHaveBeenCalled();
   });
 
   it('emits an `input` event on label click', async () => {
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
index cad401e0013..b58c44645d6 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js
@@ -3,7 +3,7 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue';
@@ -151,7 +151,7 @@ describe('LabelsSelectRoot', () => {
     it('creates flash with error message when query is rejected', async () => {
       createComponent({ queryHandler: errorQueryHandler });
       await waitForPromises();
-      expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
+      expect(createAlert).toHaveBeenCalledWith({ message: 'Error fetching labels.' });
     });
   });
 
@@ -197,7 +197,7 @@ describe('LabelsSelectRoot', () => {
       findDropdownContents().vm.$emit('setLabels', [label]);
       await waitForPromises();
 
-      expect(createFlash).toHaveBeenCalledWith({
+      expect(createAlert).toHaveBeenCalledWith({
         captureError: true,
         error: expect.anything(),
         message: 'An error occurred while updating labels.',
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 fd3ff9ce892..f661bd6747a 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
@@ -1,10 +1,5 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ChunkLine from '~/vue_shared/components/source_viewer/components/chunk_line.vue';
-import {
-  BIDI_CHARS,
-  BIDI_CHARS_CLASS_LIST,
-  BIDI_CHAR_TOOLTIP,
-} from '~/vue_shared/components/source_viewer/constants';
 
 const DEFAULT_PROPS = {
   number: 2,
@@ -31,7 +26,6 @@ describe('Chunk Line component', () => {
   const findLineLink = () => wrapper.find('.file-line-num');
   const findBlameLink = () => wrapper.find('.file-line-blame');
   const findContent = () => wrapper.findByTestId('content');
-  const findWrappedBidiChars = () => wrapper.findAllByTestId('bidi-wrapper');
 
   beforeEach(() => {
     createComponent();
@@ -40,22 +34,6 @@ describe('Chunk Line component', () => {
   afterEach(() => wrapper.destroy());
 
   describe('rendering', () => {
-    it('wraps BiDi characters', () => {
-      const content = `// some content ${BIDI_CHARS.toString()} with BiDi chars`;
-      createComponent({ content });
-      const wrappedBidiChars = findWrappedBidiChars();
-
-      expect(wrappedBidiChars.length).toBe(BIDI_CHARS.length);
-
-      wrappedBidiChars.wrappers.forEach((_, i) => {
-        expect(wrappedBidiChars.at(i).text()).toBe(BIDI_CHARS[i]);
-        expect(wrappedBidiChars.at(i).attributes()).toMatchObject({
-          class: BIDI_CHARS_CLASS_LIST,
-          title: BIDI_CHAR_TOOLTIP,
-        });
-      });
-    });
-
     it('renders a blame link', () => {
       expect(findBlameLink().attributes()).toMatchObject({
         href: `${DEFAULT_PROPS.blamePath}#L${DEFAULT_PROPS.number}`,
diff --git a/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
new file mode 100644
index 00000000000..4a995e2fde1
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/highlight_util_spec.js
@@ -0,0 +1,44 @@
+import hljs from 'highlight.js/lib/core';
+import languageLoader from '~/content_editor/services/highlight_js_language_loader';
+import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
+import { highlight } from '~/vue_shared/components/source_viewer/workers/highlight_utils';
+
+jest.mock('highlight.js/lib/core', () => ({
+  highlight: jest.fn().mockReturnValue({}),
+  registerLanguage: jest.fn(),
+}));
+
+jest.mock('~/content_editor/services/highlight_js_language_loader', () => ({
+  javascript: jest.fn().mockReturnValue({ default: jest.fn() }),
+}));
+
+jest.mock('~/vue_shared/components/source_viewer/plugins/index', () => ({
+  registerPlugins: jest.fn(),
+}));
+
+const fileType = 'text';
+const content = 'function test() { return true };';
+const language = 'javascript';
+
+describe('Highlight utility', () => {
+  beforeEach(() => highlight(fileType, content, language));
+
+  it('loads the language', () => {
+    expect(languageLoader.javascript).toHaveBeenCalled();
+  });
+
+  it('registers the plugins', () => {
+    expect(registerPlugins).toHaveBeenCalled();
+  });
+
+  it('registers the language', () => {
+    expect(hljs.registerLanguage).toHaveBeenCalledWith(
+      language,
+      languageLoader[language]().default,
+    );
+  });
+
+  it('highlights the content', () => {
+    expect(hljs.highlight).toHaveBeenCalledWith(content, { language });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
index 83fdc5d669d..57045ca54ae 100644
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/index_spec.js
@@ -1,14 +1,18 @@
-import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
-import { HLJS_ON_AFTER_HIGHLIGHT } from '~/vue_shared/components/source_viewer/constants';
-import wrapComments from '~/vue_shared/components/source_viewer/plugins/wrap_comments';
+import {
+  registerPlugins,
+  HLJS_ON_AFTER_HIGHLIGHT,
+} from '~/vue_shared/components/source_viewer/plugins/index';
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
 
-jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_comments');
+jest.mock('~/vue_shared/components/source_viewer/plugins/wrap_child_nodes');
 const hljsMock = { addPlugin: jest.fn() };
 
 describe('Highlight.js plugin registration', () => {
   beforeEach(() => registerPlugins(hljsMock));
 
   it('registers our plugins', () => {
-    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapComments });
+    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapBidiChars });
+    expect(hljsMock.addPlugin).toHaveBeenCalledWith({ [HLJS_ON_AFTER_HIGHLIGHT]: wrapChildNodes });
   });
 });
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util_spec.js
index 8079d5ad99a..e4ce07ec668 100644
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/utils/dependency_linker_util_spec.js
@@ -15,7 +15,7 @@ describe('createLink', () => {
   it('escapes the user-controlled content', () => {
     const unescapedXSS = '<script>XSS</script>';
     const escapedPackageName = '&lt;script&gt;XSS&lt;/script&gt;';
-    const escapedHref = '&amp;lt;script&amp;gt;XSS&amp;lt;/script&amp;gt;';
+    const escapedHref = '&lt;script&gt;XSS&lt;/script&gt;';
     const href = `http://test.com/${unescapedXSS}`;
     const innerText = `testing${unescapedXSS}`;
     const result = `<a href="http://test.com/${escapedHref}" rel="nofollow noreferrer noopener">testing${escapedPackageName}</a>`;
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_bidi_chars_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_bidi_chars_spec.js
new file mode 100644
index 00000000000..f40f8b22627
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_bidi_chars_spec.js
@@ -0,0 +1,17 @@
+import wrapBidiChars from '~/vue_shared/components/source_viewer/plugins/wrap_bidi_chars';
+import {
+  BIDI_CHARS,
+  BIDI_CHARS_CLASS_LIST,
+  BIDI_CHAR_TOOLTIP,
+} from '~/vue_shared/components/source_viewer/constants';
+
+describe('Highlight.js plugin for wrapping BiDi characters', () => {
+  it.each(BIDI_CHARS)('wraps %s BiDi char', (bidiChar) => {
+    const inputValue = `// some content ${bidiChar} with BiDi chars`;
+    const outputValue = `// some content <span class="${BIDI_CHARS_CLASS_LIST}" title="${BIDI_CHAR_TOOLTIP}">${bidiChar}</span>`;
+    const hljsResultMock = { value: inputValue };
+
+    wrapBidiChars(hljsResultMock);
+    expect(hljsResultMock.value).toContain(outputValue);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_child_nodes_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_child_nodes_spec.js
new file mode 100644
index 00000000000..bc6df1a2565
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_child_nodes_spec.js
@@ -0,0 +1,22 @@
+import wrapChildNodes from '~/vue_shared/components/source_viewer/plugins/wrap_child_nodes';
+
+describe('Highlight.js plugin for wrapping _emitter nodes', () => {
+  it('mutates the input value by wrapping each node in a span tag', () => {
+    const hljsResultMock = {
+      _emitter: {
+        rootNode: {
+          children: [
+            { kind: 'string', children: ['Text 1'] },
+            { kind: 'string', children: ['Text 2', { kind: 'comment', children: ['Text 3'] }] },
+            'Text4\nText5',
+          ],
+        },
+      },
+    };
+
+    const outputValue = `<span class="hljs-string">Text 1</span><span class="hljs-string"><span class="hljs-string">Text 2</span><span class="hljs-comment">Text 3</span></span><span class="">Text4</span>\n<span class="">Text5</span>`;
+
+    wrapChildNodes(hljsResultMock);
+    expect(hljsResultMock.value).toBe(outputValue);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_comments_spec.js b/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_comments_spec.js
deleted file mode 100644
index 5fd4182da29..00000000000
--- a/spec/frontend/vue_shared/components/source_viewer/plugins/wrap_comments_spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { HLJS_COMMENT_SELECTOR } from '~/vue_shared/components/source_viewer/constants';
-import wrapComments from '~/vue_shared/components/source_viewer/plugins/wrap_comments';
-
-describe('Highlight.js plugin for wrapping comments', () => {
-  it('mutates the input value by wrapping each line in a span tag', () => {
-    const inputValue = `<span class="${HLJS_COMMENT_SELECTOR}">/* Line 1 \n* Line 2 \n*/</span>`;
-    const outputValue = `<span class="${HLJS_COMMENT_SELECTOR}">/* Line 1 \n<span class="${HLJS_COMMENT_SELECTOR}">* Line 2 </span>\n<span class="${HLJS_COMMENT_SELECTOR}">*/</span>`;
-    const hljsResultMock = { value: inputValue };
-
-    wrapComments(hljsResultMock);
-    expect(hljsResultMock.value).toBe(outputValue);
-  });
-
-  it('does not mutate the input value if the hljs comment selector is not present', () => {
-    const inputValue = '<span class="hljs-keyword">const</span>';
-    const hljsResultMock = { value: inputValue };
-
-    wrapComments(hljsResultMock);
-    expect(hljsResultMock.value).toBe(inputValue);
-  });
-
-  it('does not mutate the input value if the hljs comment line includes a closing tag', () => {
-    const inputValue = `<span class="${HLJS_COMMENT_SELECTOR}">/* Line 1 </span> \n* Line 2 \n*/`;
-    const hljsResultMock = { value: inputValue };
-
-    wrapComments(hljsResultMock);
-    expect(hljsResultMock.value).toBe(inputValue);
-  });
-});
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 e020d9a557e..6d319b37b02 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
@@ -22,10 +22,10 @@ jest.mock('~/vue_shared/components/source_viewer/plugins/index');
 Vue.use(VueRouter);
 const router = new VueRouter();
 
-const generateContent = (content, totalLines = 1) => {
+const generateContent = (content, totalLines = 1, delimiter = '\n') => {
   let generatedContent = '';
   for (let i = 0; i < totalLines; i += 1) {
-    generatedContent += `Line: ${i + 1} = ${content}\n`;
+    generatedContent += `Line: ${i + 1} = ${content}${delimiter}`;
   }
   return generatedContent;
 };
@@ -38,7 +38,9 @@ describe('Source Viewer component', () => {
   const mappedLanguage = ROUGE_TO_HLJS_LANGUAGE_MAP[language];
   const chunk1 = generateContent('// Some source code 1', 70);
   const chunk2 = generateContent('// Some source code 2', 70);
-  const content = chunk1 + chunk2;
+  const chunk3 = generateContent('// Some source code 3', 70, '\r\n');
+  const chunk3Result = generateContent('// Some source code 3', 70, '\n');
+  const content = chunk1 + chunk2 + chunk3;
   const path = 'some/path.js';
   const blamePath = 'some/blame/path.js';
   const fileType = 'javascript';
@@ -152,6 +154,19 @@ describe('Source Viewer component', () => {
         startingFrom: 70,
       });
     });
+
+    it('renders the third chunk', async () => {
+      const thirdChunk = findChunks().at(2);
+
+      expect(thirdChunk.props('content')).toContain(chunk3Result.trim());
+
+      expect(chunk3Result).toEqual(chunk3.replace(/\r?\n/g, '\n'));
+
+      expect(thirdChunk.props()).toMatchObject({
+        totalLines: 70,
+        startingFrom: 140,
+      });
+    });
   });
 
   it('emits showBlobInteractionZones on the eventHub when chunk appears', () => {
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 c6f01efa71a..79b1f17afa0 100644
--- a/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
+++ b/spec/frontend/vue_shared/components/stacked_progress_bar_spec.js
@@ -1,121 +1,109 @@
-import Vue from 'vue';
-
-import mountComponent from 'helpers/vue_mount_component_helper';
-import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
-
-const createComponent = (config) => {
-  const Component = Vue.extend(stackedProgressBarComponent);
-  const defaultConfig = {
-    successLabel: 'Synced',
-    failureLabel: 'Failed',
-    neutralLabel: 'Out of sync',
-    successCount: 25,
-    failureCount: 10,
-    totalCount: 5000,
-    ...config,
-  };
-
-  return mountComponent(Component, defaultConfig);
-};
+import { mount } from '@vue/test-utils';
+import StackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
 
 describe('StackedProgressBarComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
+  let wrapper;
+
+  const createComponent = (config) => {
+    const defaultConfig = {
+      successLabel: 'Synced',
+      failureLabel: 'Failed',
+      neutralLabel: 'Out of sync',
+      successCount: 25,
+      failureCount: 10,
+      totalCount: 5000,
+      ...config,
+    };
+
+    wrapper = mount(StackedProgressBarComponent, { propsData: defaultConfig });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  const findSuccessBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-green').innerText.trim();
-  const findNeutralBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-neutral').innerText.trim();
-  const findFailureBarText = (wrapper) => wrapper.$el.querySelector('.status-red').innerText.trim();
-  const findUnavailableBarText = (wrapper) =>
-    wrapper.$el.querySelector('.status-unavailable').innerText.trim();
-
-  describe('computed', () => {
-    describe('neutralCount', () => {
-      it('returns neutralCount based on totalCount, successCount and failureCount', () => {
-        expect(vm.neutralCount).toBe(4965); // 5000 - 25 - 10
-      });
-    });
-  });
+  const findSuccessBar = () => wrapper.find('.status-green');
+  const findNeutralBar = () => wrapper.find('.status-neutral');
+  const findFailureBar = () => wrapper.find('.status-red');
+  const findUnavailableBar = () => wrapper.find('.status-unavailable');
 
   describe('template', () => {
     it('renders container element', () => {
-      expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy();
+      createComponent();
+
+      expect(wrapper.classes()).toContain('stacked-progress-bar');
     });
 
     it('renders empty state when count is unavailable', () => {
-      const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
+      createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
 
-      expect(findUnavailableBarText(vmX)).not.toBeUndefined();
+      expect(findUnavailableBar()).not.toBeUndefined();
     });
 
     it('renders bar elements when count is available', () => {
-      expect(findSuccessBarText(vm)).not.toBeUndefined();
-      expect(findNeutralBarText(vm)).not.toBeUndefined();
-      expect(findFailureBarText(vm)).not.toBeUndefined();
+      createComponent();
+
+      expect(findSuccessBar().exists()).toBe(true);
+      expect(findNeutralBar().exists()).toBe(true);
+      expect(findFailureBar().exists()).toBe(true);
     });
 
     describe('getPercent', () => {
       it('returns correct percentages from provided count based on `totalCount`', () => {
-        vm = createComponent({ totalCount: 100, successCount: 25, failureCount: 10 });
+        createComponent({ totalCount: 100, successCount: 25, failureCount: 10 });
 
-        expect(findSuccessBarText(vm)).toBe('25%');
-        expect(findNeutralBarText(vm)).toBe('65%');
-        expect(findFailureBarText(vm)).toBe('10%');
+        expect(findSuccessBar().text()).toBe('25%');
+        expect(findNeutralBar().text()).toBe('65%');
+        expect(findFailureBar().text()).toBe('10%');
       });
 
       it('returns percentage with decimal place when decimal is greater than 1', () => {
-        vm = createComponent({ successCount: 67 });
+        createComponent({ successCount: 67 });
 
-        expect(findSuccessBarText(vm)).toBe('1.3%');
+        expect(findSuccessBar().text()).toBe('1.3%');
       });
 
       it('returns percentage as `< 1%` from provided count based on `totalCount` when evaluated value is less than 1', () => {
-        vm = createComponent({ successCount: 10 });
+        createComponent({ successCount: 10 });
 
-        expect(findSuccessBarText(vm)).toBe('< 1%');
+        expect(findSuccessBar().text()).toBe('< 1%');
       });
 
       it('returns not available if totalCount is falsy', () => {
-        vm = createComponent({ totalCount: 0 });
+        createComponent({ totalCount: 0 });
 
-        expect(findUnavailableBarText(vm)).toBe('Not available');
+        expect(findUnavailableBar().text()).toBe('Not available');
       });
 
       it('returns 99.9% when numbers are extreme decimals', () => {
-        vm = createComponent({ totalCount: 1000000 });
+        createComponent({ totalCount: 1000000 });
 
-        expect(findNeutralBarText(vm)).toBe('99.9%');
+        expect(findNeutralBar().text()).toBe('99.9%');
       });
     });
 
-    describe('barStyle', () => {
-      it('returns style string based on percentage provided', () => {
-        expect(vm.barStyle(50)).toBe('width: 50%;');
+    describe('bar style', () => {
+      it('renders width based on percentage provided', () => {
+        createComponent({ totalCount: 100, successCount: 25 });
+
+        expect(findSuccessBar().element.style.width).toBe('25%');
       });
     });
 
-    describe('getTooltip', () => {
+    describe('tooltip', () => {
       describe('when hideTooltips is false', () => {
         it('returns label string based on label and count provided', () => {
-          expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10');
+          createComponent({ successCount: 10, successLabel: 'Synced', hideTooltips: false });
+
+          expect(findSuccessBar().attributes('title')).toBe('Synced: 10');
         });
       });
 
       describe('when hideTooltips is true', () => {
-        beforeEach(() => {
-          vm = createComponent({ hideTooltips: true });
-        });
-
         it('returns an empty string', () => {
-          expect(vm.getTooltip('Synced', 10)).toBe('');
+          createComponent({ successCount: 10, successLabel: 'Synced', hideTooltips: true });
+
+          expect(findSuccessBar().attributes('title')).toBe('');
         });
       });
     });
diff --git a/spec/frontend/vue_shared/components/timezone_dropdown/helpers.js b/spec/frontend/vue_shared/components/timezone_dropdown/helpers.js
new file mode 100644
index 00000000000..dee4c92add4
--- /dev/null
+++ b/spec/frontend/vue_shared/components/timezone_dropdown/helpers.js
@@ -0,0 +1,6 @@
+import timezoneDataFixture from 'test_fixtures/timezones/short.json';
+
+export { timezoneDataFixture };
+
+export const findTzByName = (identifier = '') =>
+  timezoneDataFixture.find(({ name }) => name.toLowerCase() === identifier.toLowerCase());
diff --git a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js b/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js
index 567d18f8b92..e5f56c63031 100644
--- a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
+++ b/spec/frontend/vue_shared/components/timezone_dropdown/timezone_dropdown_spec.js
@@ -1,27 +1,20 @@
 import { GlDropdownItem, GlDropdown } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import createStore from '~/deploy_freeze/store';
-import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
-import { findTzByName, formatTz, timezoneDataFixture } from '../helpers';
-
-Vue.use(Vuex);
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown/timezone_dropdown.vue';
+import { formatTimezone } from '~/lib/utils/datetime_utility';
+import { findTzByName, timezoneDataFixture } from './helpers';
 
 describe('Deploy freeze timezone dropdown', () => {
   let wrapper;
   let store;
 
   const createComponent = (searchTerm, selectedTimezone) => {
-    store = createStore({
-      projectId: '8',
-      timezoneData: timezoneDataFixture,
-    });
-    wrapper = shallowMount(TimezoneDropdown, {
+    wrapper = shallowMountExtended(TimezoneDropdown, {
       store,
       propsData: {
         value: selectedTimezone,
         timezoneData: timezoneDataFixture,
+        name: 'user[timezone]',
       },
     });
 
@@ -32,6 +25,8 @@ describe('Deploy freeze timezone dropdown', () => {
 
   const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
+  const findEmptyResultsItem = () => wrapper.findByTestId('noMatchingResults');
+  const findHiddenInput = () => wrapper.find('input');
 
   afterEach(() => {
     wrapper.destroy();
@@ -66,11 +61,11 @@ describe('Deploy freeze timezone dropdown', () => {
     it('renders only the time zone searched for', () => {
       const selectedTz = findTzByName('Alaska');
       expect(findAllDropdownItems()).toHaveLength(1);
-      expect(findDropdownItemByIndex(0).text()).toBe(formatTz(selectedTz));
+      expect(findDropdownItemByIndex(0).text()).toBe(formatTimezone(selectedTz));
     });
 
     it('should not display empty results message', () => {
-      expect(wrapper.find('[data-testid="noMatchingResults"]').exists()).toBe(false);
+      expect(findEmptyResultsItem().exists()).toBe(false);
     });
 
     describe('Custom events', () => {
@@ -81,7 +76,7 @@ describe('Deploy freeze timezone dropdown', () => {
         expect(wrapper.emitted('input')).toEqual([
           [
             {
-              formattedTimezone: formatTz(selectedTz),
+              formattedTimezone: formatTimezone(selectedTz),
               identifier: selectedTz.identifier,
             },
           ],
@@ -90,13 +85,27 @@ describe('Deploy freeze timezone dropdown', () => {
     });
   });
 
-  describe('Selected time zone', () => {
+  describe('Selected time zone not found', () => {
+    beforeEach(() => {
+      createComponent('', 'Berlin');
+    });
+
+    it('renders empty selections', () => {
+      expect(wrapper.findComponent(GlDropdown).props().text).toBe('Select timezone');
+    });
+
+    it('preserves initial value in the associated input', () => {
+      expect(findHiddenInput().attributes('value')).toBe('Berlin');
+    });
+  });
+
+  describe('Selected time zone found', () => {
     beforeEach(() => {
-      createComponent('', 'Alaska');
+      createComponent('', 'Europe/Berlin');
     });
 
     it('renders selected time zone as dropdown label', () => {
-      expect(wrapper.findComponent(GlDropdown).vm.text).toBe('Alaska');
+      expect(wrapper.findComponent(GlDropdown).props().text).toBe('[UTC + 2] Berlin');
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/url_sync_spec.js b/spec/frontend/vue_shared/components/url_sync_spec.js
index aefe6a5c3e8..acda1a64a75 100644
--- a/spec/frontend/vue_shared/components/url_sync_spec.js
+++ b/spec/frontend/vue_shared/components/url_sync_spec.js
@@ -1,10 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import { historyPushState } from '~/lib/utils/common_utils';
-import { mergeUrlParams } from '~/lib/utils/url_utility';
-import UrlSyncComponent from '~/vue_shared/components/url_sync.vue';
+import { mergeUrlParams, setUrlParams } from '~/lib/utils/url_utility';
+import UrlSyncComponent, { URL_SET_PARAMS_STRATEGY } from '~/vue_shared/components/url_sync.vue';
 
 jest.mock('~/lib/utils/url_utility', () => ({
-  mergeUrlParams: jest.fn((query, url) => `urlParams: ${query} ${url}`),
+  mergeUrlParams: jest.fn((query, url) => `urlParams: ${JSON.stringify(query)} ${url}`),
+  setUrlParams: jest.fn((query, url) => `urlParams: ${JSON.stringify(query)} ${url}`),
 }));
 
 jest.mock('~/lib/utils/common_utils', () => ({
@@ -17,9 +18,14 @@ describe('url sync component', () => {
 
   const findButton = () => wrapper.find('button');
 
-  const createComponent = ({ query = mockQuery, scopedSlots, slots } = {}) => {
+  const createComponent = ({
+    query = mockQuery,
+    scopedSlots,
+    slots,
+    urlParamsUpdateStrategy,
+  } = {}) => {
     wrapper = shallowMount(UrlSyncComponent, {
-      propsData: { query },
+      propsData: { query, ...(urlParamsUpdateStrategy && { urlParamsUpdateStrategy }) },
       scopedSlots,
       slots,
     });
@@ -29,21 +35,39 @@ describe('url sync component', () => {
     wrapper.destroy();
   });
 
-  const expectUrlSync = (query, times, mergeUrlParamsReturnValue) => {
-    expect(mergeUrlParams).toHaveBeenCalledTimes(times);
-    expect(mergeUrlParams).toHaveBeenCalledWith(query, window.location.href, {
-      spreadArrays: true,
-    });
+  const expectUrlSyncFactory = (
+    query,
+    times,
+    urlParamsUpdateStrategy,
+    urlOptions,
+    urlReturnValue,
+  ) => {
+    expect(urlParamsUpdateStrategy).toHaveBeenCalledTimes(times);
+    expect(urlParamsUpdateStrategy).toHaveBeenCalledWith(query, window.location.href, urlOptions);
 
     expect(historyPushState).toHaveBeenCalledTimes(times);
-    expect(historyPushState).toHaveBeenCalledWith(mergeUrlParamsReturnValue);
+    expect(historyPushState).toHaveBeenCalledWith(urlReturnValue);
+  };
+
+  const expectUrlSyncWithMergeUrlParams = (query, times, mergeUrlParamsReturnValue) => {
+    expectUrlSyncFactory(
+      query,
+      times,
+      mergeUrlParams,
+      { spreadArrays: true },
+      mergeUrlParamsReturnValue,
+    );
+  };
+
+  const expectUrlSyncWithSetUrlParams = (query, times, setUrlParamsReturnValue) => {
+    expectUrlSyncFactory(query, times, setUrlParams, true, setUrlParamsReturnValue);
   };
 
   describe('with query as a props', () => {
     it('immediately syncs the query to the URL', () => {
       createComponent();
 
-      expectUrlSync(mockQuery, 1, mergeUrlParams.mock.results[0].value);
+      expectUrlSyncWithMergeUrlParams(mockQuery, 1, mergeUrlParams.mock.results[0].value);
     });
 
     describe('when the query is modified', () => {
@@ -54,11 +78,21 @@ describe('url sync component', () => {
         // using setProps to test the watcher
         await wrapper.setProps({ query: newQuery });
 
-        expectUrlSync(mockQuery, 2, mergeUrlParams.mock.results[1].value);
+        expectUrlSyncWithMergeUrlParams(mockQuery, 2, mergeUrlParams.mock.results[1].value);
       });
     });
   });
 
+  describe('with url-params-update-strategy equals to URL_SET_PARAMS_STRATEGY', () => {
+    it('uses setUrlParams to generate URL', () => {
+      createComponent({
+        urlParamsUpdateStrategy: URL_SET_PARAMS_STRATEGY,
+      });
+
+      expectUrlSyncWithSetUrlParams(mockQuery, 1, setUrlParams.mock.results[0].value);
+    });
+  });
+
   describe('with scoped slot', () => {
     const scopedSlots = {
       default: `
@@ -77,7 +111,7 @@ describe('url sync component', () => {
 
       findButton().trigger('click');
 
-      expectUrlSync({ bar: 'baz' }, 1, mergeUrlParams.mock.results[0].value);
+      expectUrlSyncWithMergeUrlParams({ bar: 'baz' }, 1, mergeUrlParams.mock.results[0].value);
     });
   });
 
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js
deleted file mode 100644
index f87737ca86a..00000000000
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlAvatar, GlTooltip } from '@gitlab/ui';
-import defaultAvatarUrl from 'images/no_avatar.png';
-import { placeholderImage } from '~/lazy_loader';
-import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image_new.vue';
-
-jest.mock('images/no_avatar.png', () => 'default-avatar-url');
-
-const PROVIDED_PROPS = {
-  size: 32,
-  imgSrc: 'myavatarurl.com',
-  imgAlt: 'mydisplayname',
-  cssClasses: 'myextraavatarclass',
-  tooltipText: 'tooltip text',
-  tooltipPlacement: 'bottom',
-};
-
-describe('User Avatar Image Component', () => {
-  let wrapper;
-
-  const findAvatar = () => wrapper.findComponent(GlAvatar);
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('Initialization', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-        },
-      });
-    });
-
-    it('should render `GlAvatar` and provide correct properties to it', () => {
-      expect(findAvatar().attributes('data-src')).toBe(
-        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-      );
-      expect(findAvatar().props()).toMatchObject({
-        src: `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-        alt: PROVIDED_PROPS.imgAlt,
-        size: PROVIDED_PROPS.size,
-      });
-    });
-
-    it('should add correct CSS classes', () => {
-      const classes = wrapper.findComponent(GlAvatar).classes();
-      expect(classes).toContain(PROVIDED_PROPS.cssClasses);
-      expect(classes).not.toContain('lazy');
-    });
-  });
-
-  describe('Initialization when lazy', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-          lazy: true,
-        },
-      });
-    });
-
-    it('should add lazy attributes', () => {
-      expect(findAvatar().classes()).toContain('lazy');
-      expect(findAvatar().attributes()).toMatchObject({
-        src: placeholderImage,
-        'data-src': `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-      });
-    });
-
-    it('should use maximum number when size is provided as an object', () => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-          size: { default: 16, md: 64, lg: 24 },
-          lazy: true,
-        },
-      });
-
-      expect(findAvatar().attributes('data-src')).toBe(`${PROVIDED_PROPS.imgSrc}?width=${64}`);
-    });
-  });
-
-  describe('Initialization without src', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-          imgSrc: null,
-        },
-      });
-    });
-
-    it('should have default avatar image', () => {
-      expect(findAvatar().props('src')).toBe(`${defaultAvatarUrl}?width=${PROVIDED_PROPS.size}`);
-    });
-  });
-
-  describe('Dynamic tooltip content', () => {
-    const slots = {
-      default: ['Action!'],
-    };
-
-    describe('when `tooltipText` is provided and no default slot', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: { ...PROVIDED_PROPS },
-        });
-      });
-
-      it('renders the tooltip with `tooltipText` as content', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
-      });
-    });
-
-    describe('when `tooltipText` and default slot is provided', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: { ...PROVIDED_PROPS },
-          slots,
-        });
-      });
-
-      it('does not render `tooltipText` inside the tooltip', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
-      });
-
-      it('renders the content provided via default slot', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
-      });
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js
deleted file mode 100644
index 2c1be6ec47e..00000000000
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlTooltip } from '@gitlab/ui';
-import defaultAvatarUrl from 'images/no_avatar.png';
-import { placeholderImage } from '~/lazy_loader';
-import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image_old.vue';
-
-jest.mock('images/no_avatar.png', () => 'default-avatar-url');
-
-const PROVIDED_PROPS = {
-  size: 32,
-  imgSrc: 'myavatarurl.com',
-  imgAlt: 'mydisplayname',
-  cssClasses: 'myextraavatarclass',
-  tooltipText: 'tooltip text',
-  tooltipPlacement: 'bottom',
-};
-
-const DEFAULT_PROPS = {
-  size: 20,
-};
-
-describe('User Avatar Image Component', () => {
-  let wrapper;
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('Initialization', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-        },
-      });
-    });
-
-    it('should have <img> as a child element', () => {
-      const imageElement = wrapper.find('img');
-
-      expect(imageElement.exists()).toBe(true);
-      expect(imageElement.attributes('src')).toBe(
-        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-      );
-      expect(imageElement.attributes('data-src')).toBe(
-        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-      );
-      expect(imageElement.attributes('alt')).toBe(PROVIDED_PROPS.imgAlt);
-    });
-
-    it('should properly render img css', () => {
-      const classes = wrapper.find('img').classes();
-      expect(classes).toEqual(['avatar', 's32', PROVIDED_PROPS.cssClasses]);
-      expect(classes).not.toContain('lazy');
-    });
-  });
-
-  describe('Initialization when lazy', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage, {
-        propsData: {
-          ...PROVIDED_PROPS,
-          lazy: true,
-        },
-      });
-    });
-
-    it('should add lazy attributes', () => {
-      const imageElement = wrapper.find('img');
-
-      expect(imageElement.classes()).toContain('lazy');
-      expect(imageElement.attributes('src')).toBe(placeholderImage);
-      expect(imageElement.attributes('data-src')).toBe(
-        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
-      );
-    });
-  });
-
-  describe('Initialization without src', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarImage);
-    });
-
-    it('should have default avatar image', () => {
-      const imageElement = wrapper.find('img');
-
-      expect(imageElement.attributes('src')).toBe(
-        `${defaultAvatarUrl}?width=${DEFAULT_PROPS.size}`,
-      );
-    });
-  });
-
-  describe('Dynamic tooltip content', () => {
-    const slots = {
-      default: ['Action!'],
-    };
-
-    describe('when `tooltipText` is provided and no default slot', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: { ...PROVIDED_PROPS },
-        });
-      });
-
-      it('renders the tooltip with `tooltipText` as content', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
-      });
-    });
-
-    describe('when `tooltipText` and default slot is provided', () => {
-      beforeEach(() => {
-        wrapper = shallowMount(UserAvatarImage, {
-          propsData: { ...PROVIDED_PROPS },
-          slots,
-        });
-      });
-
-      it('does not render `tooltipText` inside the tooltip', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
-      });
-
-      it('renders the content provided via default slot', () => {
-        expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
-      });
-    });
-  });
-});
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 6ad2ef226c2..d63b13981ac 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
@@ -1,7 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlAvatar, GlTooltip } from '@gitlab/ui';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '~/lazy_loader';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import UserAvatarImageNew from '~/vue_shared/components/user_avatar/user_avatar_image_new.vue';
-import UserAvatarImageOld from '~/vue_shared/components/user_avatar/user_avatar_image_old.vue';
+
+jest.mock('images/no_avatar.png', () => 'default-avatar-url');
 
 const PROVIDED_PROPS = {
   size: 32,
@@ -15,37 +18,117 @@ const PROVIDED_PROPS = {
 describe('User Avatar Image Component', () => {
   let wrapper;
 
-  const createWrapper = (props = {}, { glAvatarForAllUserAvatars } = {}) => {
-    wrapper = shallowMount(UserAvatarImage, {
-      propsData: {
-        ...PROVIDED_PROPS,
-        ...props,
-      },
-      provide: {
-        glFeatures: {
-          glAvatarForAllUserAvatars,
-        },
-      },
-    });
-  };
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe.each([
-    [false, true, true],
-    [true, false, true],
-    [true, true, true],
-    [false, false, false],
-  ])(
-    'when glAvatarForAllUserAvatars=%s and enforceGlAvatar=%s',
-    (glAvatarForAllUserAvatars, enforceGlAvatar, isUsingNewVersion) => {
-      it(`will render ${isUsingNewVersion ? 'new' : 'old'} version`, () => {
-        createWrapper({ enforceGlAvatar }, { glAvatarForAllUserAvatars });
-        expect(wrapper.findComponent(UserAvatarImageNew).exists()).toBe(isUsingNewVersion);
-        expect(wrapper.findComponent(UserAvatarImageOld).exists()).toBe(!isUsingNewVersion);
-      });
-    },
-  );
+  describe('Initialization', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+        },
+      });
+    });
+
+    it('should render `GlAvatar` and provide correct properties to it', () => {
+      expect(findAvatar().attributes('data-src')).toBe(
+        `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      );
+      expect(findAvatar().props()).toMatchObject({
+        src: `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+        alt: PROVIDED_PROPS.imgAlt,
+        size: PROVIDED_PROPS.size,
+      });
+    });
+
+    it('should add correct CSS classes', () => {
+      const classes = wrapper.findComponent(GlAvatar).classes();
+      expect(classes).toContain(PROVIDED_PROPS.cssClasses);
+      expect(classes).not.toContain('lazy');
+    });
+  });
+
+  describe('Initialization when lazy', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          lazy: true,
+        },
+      });
+    });
+
+    it('should add lazy attributes', () => {
+      expect(findAvatar().classes()).toContain('lazy');
+      expect(findAvatar().attributes()).toMatchObject({
+        src: placeholderImage,
+        'data-src': `${PROVIDED_PROPS.imgSrc}?width=${PROVIDED_PROPS.size}`,
+      });
+    });
+
+    it('should use maximum number when size is provided as an object', () => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          size: { default: 16, md: 64, lg: 24 },
+          lazy: true,
+        },
+      });
+
+      expect(findAvatar().attributes('data-src')).toBe(`${PROVIDED_PROPS.imgSrc}?width=${64}`);
+    });
+  });
+
+  describe('Initialization without src', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(UserAvatarImage, {
+        propsData: {
+          ...PROVIDED_PROPS,
+          imgSrc: null,
+        },
+      });
+    });
+
+    it('should have default avatar image', () => {
+      expect(findAvatar().props('src')).toBe(`${defaultAvatarUrl}?width=${PROVIDED_PROPS.size}`);
+    });
+  });
+
+  describe('Dynamic tooltip content', () => {
+    const slots = {
+      default: ['Action!'],
+    };
+
+    describe('when `tooltipText` is provided and no default slot', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
+        });
+      });
+
+      it('renders the tooltip with `tooltipText` as content', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
+      });
+    });
+
+    describe('when `tooltipText` and default slot is provided', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
+          slots,
+        });
+      });
+
+      it('does not render `tooltipText` inside the tooltip', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
+      });
+
+      it('renders the content provided via default slot', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+      });
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js
deleted file mode 100644
index f485a14cfea..00000000000
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_new_spec.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { GlAvatarLink } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { TEST_HOST } from 'spec/test_constants';
-import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link_new.vue';
-
-describe('User Avatar Link Component', () => {
-  let wrapper;
-
-  const findUserName = () => wrapper.findByTestId('user-avatar-link-username');
-
-  const defaultProps = {
-    linkHref: `${TEST_HOST}/myavatarurl.com`,
-    imgSize: 32,
-    imgSrc: `${TEST_HOST}/myavatarurl.com`,
-    imgAlt: 'mydisplayname',
-    imgCssClasses: 'myextraavatarclass',
-    tooltipText: 'tooltip text',
-    tooltipPlacement: 'bottom',
-    username: 'username',
-  };
-
-  const createWrapper = (props, slots) => {
-    wrapper = shallowMountExtended(UserAvatarLink, {
-      propsData: {
-        ...defaultProps,
-        ...props,
-        ...slots,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('should render GlLink with correct props', () => {
-    const link = wrapper.findComponent(GlAvatarLink);
-    expect(link.exists()).toBe(true);
-    expect(link.attributes('href')).toBe(defaultProps.linkHref);
-  });
-
-  it('should render UserAvatarImage and provide correct props to it', () => {
-    expect(wrapper.findComponent(UserAvatarImage).exists()).toBe(true);
-    expect(wrapper.findComponent(UserAvatarImage).props()).toEqual({
-      cssClasses: defaultProps.imgCssClasses,
-      imgAlt: defaultProps.imgAlt,
-      imgSrc: defaultProps.imgSrc,
-      lazy: false,
-      size: defaultProps.imgSize,
-      tooltipPlacement: defaultProps.tooltipPlacement,
-      tooltipText: '',
-      enforceGlAvatar: false,
-    });
-  });
-
-  describe('when username provided', () => {
-    beforeEach(() => {
-      createWrapper({ username: defaultProps.username });
-    });
-
-    it('should render provided username', () => {
-      expect(findUserName().text()).toBe(defaultProps.username);
-    });
-
-    it('should provide the tooltip data for the username', () => {
-      expect(findUserName().attributes()).toEqual(
-        expect.objectContaining({
-          title: defaultProps.tooltipText,
-          'tooltip-placement': defaultProps.tooltipPlacement,
-        }),
-      );
-    });
-  });
-
-  describe('when username is NOT provided', () => {
-    beforeEach(() => {
-      createWrapper({ username: '' });
-    });
-
-    it('should NOT render username', () => {
-      expect(findUserName().exists()).toBe(false);
-    });
-  });
-
-  describe('avatar-badge slot', () => {
-    const badge = '<span>User badge</span>';
-
-    beforeEach(() => {
-      createWrapper(defaultProps, {
-        'avatar-badge': badge,
-      });
-    });
-
-    it('should render provided `avatar-badge` slot content', () => {
-      expect(wrapper.html()).toContain(badge);
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js
deleted file mode 100644
index cf7a1025dba..00000000000
--- a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_old_spec.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { GlLink } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { TEST_HOST } from 'spec/test_constants';
-import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link_old.vue';
-
-describe('User Avatar Link Component', () => {
-  let wrapper;
-
-  const findUserName = () => wrapper.find('[data-testid="user-avatar-link-username"]');
-
-  const defaultProps = {
-    linkHref: `${TEST_HOST}/myavatarurl.com`,
-    imgSize: 32,
-    imgSrc: `${TEST_HOST}/myavatarurl.com`,
-    imgAlt: 'mydisplayname',
-    imgCssClasses: 'myextraavatarclass',
-    tooltipText: 'tooltip text',
-    tooltipPlacement: 'bottom',
-    username: 'username',
-  };
-
-  const createWrapper = (props, slots) => {
-    wrapper = shallowMountExtended(UserAvatarLink, {
-      propsData: {
-        ...defaultProps,
-        ...props,
-        ...slots,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('should render GlLink with correct props', () => {
-    const link = wrapper.findComponent(GlLink);
-    expect(link.exists()).toBe(true);
-    expect(link.attributes('href')).toBe(defaultProps.linkHref);
-  });
-
-  it('should render UserAvatarImage and povide correct props to it', () => {
-    expect(wrapper.findComponent(UserAvatarImage).exists()).toBe(true);
-    expect(wrapper.findComponent(UserAvatarImage).props()).toEqual({
-      cssClasses: defaultProps.imgCssClasses,
-      imgAlt: defaultProps.imgAlt,
-      imgSrc: defaultProps.imgSrc,
-      lazy: false,
-      size: defaultProps.imgSize,
-      tooltipPlacement: defaultProps.tooltipPlacement,
-      tooltipText: '',
-      enforceGlAvatar: false,
-    });
-  });
-
-  describe('when username provided', () => {
-    beforeEach(() => {
-      createWrapper({ username: defaultProps.username });
-    });
-
-    it('should render provided username', () => {
-      expect(findUserName().text()).toBe(defaultProps.username);
-    });
-
-    it('should provide the tooltip data for the username', () => {
-      expect(findUserName().attributes()).toEqual(
-        expect.objectContaining({
-          title: defaultProps.tooltipText,
-          'tooltip-placement': defaultProps.tooltipPlacement,
-        }),
-      );
-    });
-  });
-
-  describe('when username is NOT provided', () => {
-    beforeEach(() => {
-      createWrapper({ username: '' });
-    });
-
-    it('should NOT render username', () => {
-      expect(findUserName().exists()).toBe(false);
-    });
-  });
-
-  describe('avatar-badge slot', () => {
-    const badge = '<span>User badge</span>';
-
-    beforeEach(() => {
-      createWrapper(defaultProps, {
-        'avatar-badge': badge,
-      });
-    });
-
-    it('should render provided `avatar-badge` slot content', () => {
-      expect(wrapper.html()).toContain(badge);
-    });
-  });
-});
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 fd3f59008ec..df7ce449678 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
@@ -1,51 +1,102 @@
-import { shallowMount } from '@vue/test-utils';
+import { GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'spec/test_constants';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import UserAvatarLinkNew from '~/vue_shared/components/user_avatar/user_avatar_link_new.vue';
-import UserAvatarLinkOld from '~/vue_shared/components/user_avatar/user_avatar_link_old.vue';
-
-const PROVIDED_PROPS = {
-  size: 32,
-  imgSrc: 'myavatarurl.com',
-  imgAlt: 'mydisplayname',
-  cssClasses: 'myextraavatarclass',
-  tooltipText: 'tooltip text',
-  tooltipPlacement: 'bottom',
-};
 
 describe('User Avatar Link Component', () => {
   let wrapper;
 
-  const createWrapper = (props = {}, { glAvatarForAllUserAvatars } = {}) => {
-    wrapper = shallowMount(UserAvatarLink, {
+  const findUserName = () => wrapper.findByTestId('user-avatar-link-username');
+
+  const defaultProps = {
+    linkHref: `${TEST_HOST}/myavatarurl.com`,
+    imgSize: 32,
+    imgSrc: `${TEST_HOST}/myavatarurl.com`,
+    imgAlt: 'mydisplayname',
+    imgCssClasses: 'myextraavatarclass',
+    tooltipText: 'tooltip text',
+    tooltipPlacement: 'bottom',
+    username: 'username',
+  };
+
+  const createWrapper = (props, slots) => {
+    wrapper = shallowMountExtended(UserAvatarLink, {
       propsData: {
-        ...PROVIDED_PROPS,
+        ...defaultProps,
         ...props,
-      },
-      provide: {
-        glFeatures: {
-          glAvatarForAllUserAvatars,
-        },
+        ...slots,
       },
     });
   };
 
+  beforeEach(() => {
+    createWrapper();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe.each([
-    [false, true, true],
-    [true, false, true],
-    [true, true, true],
-    [false, false, false],
-  ])(
-    'when glAvatarForAllUserAvatars=%s and enforceGlAvatar=%s',
-    (glAvatarForAllUserAvatars, enforceGlAvatar, isUsingNewVersion) => {
-      it(`will render ${isUsingNewVersion ? 'new' : 'old'} version`, () => {
-        createWrapper({ enforceGlAvatar }, { glAvatarForAllUserAvatars });
-        expect(wrapper.findComponent(UserAvatarLinkNew).exists()).toBe(isUsingNewVersion);
-        expect(wrapper.findComponent(UserAvatarLinkOld).exists()).toBe(!isUsingNewVersion);
+  it('should render GlLink with correct props', () => {
+    const link = wrapper.findComponent(GlAvatarLink);
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe(defaultProps.linkHref);
+  });
+
+  it('should render UserAvatarImage and provide correct props to it', () => {
+    expect(wrapper.findComponent(UserAvatarImage).exists()).toBe(true);
+    expect(wrapper.findComponent(UserAvatarImage).props()).toEqual({
+      cssClasses: defaultProps.imgCssClasses,
+      imgAlt: defaultProps.imgAlt,
+      imgSrc: defaultProps.imgSrc,
+      lazy: false,
+      size: defaultProps.imgSize,
+      tooltipPlacement: defaultProps.tooltipPlacement,
+      tooltipText: '',
+    });
+  });
+
+  describe('when username provided', () => {
+    beforeEach(() => {
+      createWrapper({ username: defaultProps.username });
+    });
+
+    it('should render provided username', () => {
+      expect(findUserName().text()).toBe(defaultProps.username);
+    });
+
+    it('should provide the tooltip data for the username', () => {
+      expect(findUserName().attributes()).toEqual(
+        expect.objectContaining({
+          title: defaultProps.tooltipText,
+          'tooltip-placement': defaultProps.tooltipPlacement,
+        }),
+      );
+    });
+  });
+
+  describe('when username is NOT provided', () => {
+    beforeEach(() => {
+      createWrapper({ username: '' });
+    });
+
+    it('should NOT render username', () => {
+      expect(findUserName().exists()).toBe(false);
+    });
+  });
+
+  describe('avatar-badge slot', () => {
+    const badge = '<span>User badge</span>';
+
+    beforeEach(() => {
+      createWrapper(defaultProps, {
+        'avatar-badge': badge,
       });
-    },
-  );
+    });
+
+    it('should render provided `avatar-badge` slot content', () => {
+      expect(wrapper.html()).toContain(badge);
+    });
+  });
 });
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 b9accbf0373..1ad6d043399 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
@@ -153,29 +153,4 @@ describe('UserAvatarList', () => {
       });
     });
   });
-
-  describe('additional styling for the image', () => {
-    it('should not add CSS class when feature flag  `glAvatarForAllUserAvatars` is disabled', () => {
-      factory({
-        propsData: { items: createList(1) },
-      });
-
-      const link = wrapper.findComponent(UserAvatarLink);
-      expect(link.props('imgCssClasses')).not.toBe('gl-mr-3');
-    });
-
-    it('should add CSS class when feature flag `glAvatarForAllUserAvatars` is enabled', () => {
-      factory({
-        propsData: { items: createList(1) },
-        provide: {
-          glFeatures: {
-            glAvatarForAllUserAvatars: true,
-          },
-        },
-      });
-
-      const link = wrapper.findComponent(UserAvatarLink);
-      expect(link.props('imgCssClasses')).toBe('gl-mr-3');
-    });
-  });
 });
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 6d48000beb0..f6316af6ad8 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
@@ -8,10 +8,12 @@ import {
   I18N_USER_BLOCKED,
   I18N_USER_LEARN,
   I18N_USER_FOLLOW,
+  I18N_ERROR_FOLLOW,
   I18N_USER_UNFOLLOW,
+  I18N_ERROR_UNFOLLOW,
 } from '~/vue_shared/components/user_popover/constants';
 import axios from '~/lib/utils/axios_utils';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { followUser, unfollowUser } from '~/api/user_api';
 import { mockTracking } from 'helpers/tracking_helper';
 
@@ -239,6 +241,18 @@ describe('User Popover Component', () => {
       expect(wrapper.html()).toContain('<gl-emoji data-name="basketball_player"');
     });
 
+    it('should show only emoji', () => {
+      const user = {
+        ...DEFAULT_PROPS.user,
+        status: { emoji: 'basketball_player' },
+      };
+
+      createWrapper({ user });
+
+      expect(findUserStatus().exists()).toBe(true);
+      expect(wrapper.html()).toContain('<gl-emoji data-name="basketball_player"');
+    });
+
     it('hides the div when status is null', () => {
       const user = { ...DEFAULT_PROPS.user, status: null };
 
@@ -367,27 +381,49 @@ describe('User Popover Component', () => {
       itTracksToggleFollowButtonClick('follow_from_user_popover');
 
       describe('when an error occurs', () => {
-        beforeEach(() => {
-          followUser.mockRejectedValue({});
+        describe('api send error message', () => {
+          const mockedMessage = sprintf(I18N_ERROR_UNFOLLOW, { limit: 300 });
+          const apiResponse = { response: { data: { message: mockedMessage } } };
 
-          findToggleFollowButton().trigger('click');
-        });
+          beforeEach(() => {
+            followUser.mockRejectedValue(apiResponse);
+            findToggleFollowButton().trigger('click');
+          });
 
-        it('shows an error message', async () => {
-          await axios.waitForAll();
+          it('show an error message from api response', async () => {
+            await axios.waitForAll();
 
-          expect(createFlash).toHaveBeenCalledWith({
-            message: 'An error occurred while trying to follow this user, please try again.',
-            error: {},
-            captureError: true,
+            expect(createAlert).toHaveBeenCalledWith({
+              message: mockedMessage,
+              error: apiResponse,
+              captureError: true,
+            });
           });
         });
 
-        it('emits no events', async () => {
-          await axios.waitForAll();
+        describe('api did not send error message', () => {
+          beforeEach(() => {
+            followUser.mockRejectedValue({});
 
-          expect(wrapper.emitted().follow).toBeUndefined();
-          expect(wrapper.emitted().unfollow).toBeUndefined();
+            findToggleFollowButton().trigger('click');
+          });
+
+          it('shows an error message', async () => {
+            await axios.waitForAll();
+
+            expect(createAlert).toHaveBeenCalledWith({
+              message: I18N_ERROR_FOLLOW,
+              error: {},
+              captureError: true,
+            });
+          });
+
+          it('emits no events', async () => {
+            await axios.waitForAll();
+
+            expect(wrapper.emitted().follow).toBeUndefined();
+            expect(wrapper.emitted().unfollow).toBeUndefined();
+          });
         });
       });
     });
@@ -425,8 +461,8 @@ describe('User Popover Component', () => {
         });
 
         it('shows an error message', () => {
-          expect(createFlash).toHaveBeenCalledWith({
-            message: 'An error occurred while trying to unfollow this user, please try again.',
+          expect(createAlert).toHaveBeenCalledWith({
+            message: I18N_ERROR_UNFOLLOW,
             error: {},
             captureError: true,
           });
diff --git a/spec/frontend/vue_shared/directives/safe_html_spec.js b/spec/frontend/vue_shared/directives/safe_html_spec.js
new file mode 100644
index 00000000000..ba1de8e4596
--- /dev/null
+++ b/spec/frontend/vue_shared/directives/safe_html_spec.js
@@ -0,0 +1,116 @@
+import { shallowMount } from '@vue/test-utils';
+import safeHtml from '~/vue_shared/directives/safe_html';
+import { defaultConfig } from '~/lib/dompurify';
+/* eslint-disable no-script-url */
+const invalidProtocolUrls = [
+  'javascript:alert(1)',
+  'jAvascript:alert(1)',
+  'data:text/html,<script>alert(1);</script>',
+  ' javascript:',
+  'javascript :',
+];
+/* eslint-enable no-script-url */
+const validProtocolUrls = ['slack://open', 'x-devonthink-item://90909', 'x-devonthink-item:90909'];
+
+describe('safe html directive', () => {
+  let wrapper;
+
+  const createComponent = ({ template, html, config } = {}) => {
+    const defaultTemplate = `<div v-safe-html="rawHtml"></div>`;
+    const defaultHtml = 'hello <script>alert(1)</script>world';
+
+    const component = {
+      directives: {
+        safeHtml,
+      },
+      data() {
+        return {
+          rawHtml: html || defaultHtml,
+          config: config || {},
+        };
+      },
+      template: template || defaultTemplate,
+    };
+
+    wrapper = shallowMount(component);
+  };
+
+  describe('default', () => {
+    it('should remove the script tag', () => {
+      createComponent();
+
+      expect(wrapper.html()).toEqual('<div>hello world</div>');
+    });
+
+    it('should remove javascript hrefs', () => {
+      createComponent({ html: '<a href="javascript:prompt(1)">click here</a>' });
+
+      expect(wrapper.html()).toEqual('<div><a>click here</a></div>');
+    });
+
+    it('should remove any existing children', () => {
+      createComponent({
+        template: `<div v-safe-html="rawHtml">foo <i>bar</i></div>`,
+      });
+
+      expect(wrapper.html()).toEqual('<div>hello world</div>');
+    });
+
+    describe('with non-http links', () => {
+      it.each(validProtocolUrls)('should allow %s', (url) => {
+        createComponent({
+          html: `<a href="${url}">internal link</a>`,
+        });
+        expect(wrapper.html()).toContain(`<a href="${url}">internal link</a>`);
+      });
+
+      it.each(invalidProtocolUrls)('should not allow %s', (url) => {
+        createComponent({
+          html: `<a href="${url}">internal link</a>`,
+        });
+        expect(wrapper.html()).toContain(`<a>internal link</a>`);
+      });
+    });
+
+    describe('handles data attributes correctly', () => {
+      const allowedDataAttrs = ['data-safe', 'data-random'];
+
+      it.each(defaultConfig.FORBID_ATTR)('removes dangerous `%s` attribute', (attr) => {
+        const html = `<a ${attr}="true"></a>`;
+        createComponent({ html });
+
+        expect(wrapper.html()).not.toContain(html);
+      });
+
+      it.each(allowedDataAttrs)('does not remove allowed `%s` attribute', (attr) => {
+        const html = `<a ${attr}="true"></a>`;
+        createComponent({ html });
+
+        expect(wrapper.html()).toContain(html);
+      });
+    });
+  });
+
+  describe('advance config', () => {
+    const template = '<div v-safe-html:[config]="rawHtml"></div>';
+    it('should only allow <b> tags', () => {
+      createComponent({
+        template,
+        html: '<a href="javascript:prompt(1)"><b>click here</b></a>',
+        config: { ALLOWED_TAGS: ['b'] },
+      });
+
+      expect(wrapper.html()).toEqual('<div><b>click here</b></div>');
+    });
+
+    it('should strip all html tags', () => {
+      createComponent({
+        template,
+        html: '<a href="javascript:prompt(1)"><u>click here</u></a>',
+        config: { ALLOWED_TAGS: [] },
+      });
+
+      expect(wrapper.html()).toEqual('<div>click here</div>');
+    });
+  });
+});
diff --git a/spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap b/spec/frontend/vue_shared/issuable/__snapshots__/issuable_blocked_icon_spec.js.snap
index 34e4f996ff0..dd011b9d84e 100644
--- a/spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap
+++ b/spec/frontend/vue_shared/issuable/__snapshots__/issuable_blocked_icon_spec.js.snap
@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BoardBlockedIcon on mouseenter on blocked icon with more than three blocking issues matches the snapshot 1`] = `
-"<div class=\\"gl-display-inline\\"><svg data-testid=\\"issue-blocked-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500 gl-icon s16\\" id=\\"blocked-icon-uniqueId\\">
+exports[`IssuableBlockedIcon on mouseenter on blocked icon with more than three blocking issues matches the snapshot 1`] = `
+"<div class=\\"gl-display-inline\\"><svg data-testid=\\"issuable-blocked-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"issuable-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500 gl-icon s16\\" id=\\"blocked-icon-uniqueId\\">
     <use href=\\"#issue-block\\"></use>
   </svg>
   <div class=\\"gl-popover\\">
-    <ul class=\\"gl-list-style-none gl-p-0\\">
+    <ul class=\\"gl-list-style-none gl-p-0 gl-mb-0\\">
       <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/6\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#6</a>
-        <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\">
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-3\\">
           blocking issue title 1
         </p>
       </li>
       <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/5\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#5</a>
-        <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\">
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-3\\">
           blocking issue title 2 + blocking issue title 2 + blocking issue title 2 + bloc…
         </p>
       </li>
       <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/4\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#4</a>
-        <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\">
+        <p data-testid=\\"issuable-title\\" class=\\"gl-display-block! gl-mb-0\\">
           blocking issue title 3
         </p>
       </li>
diff --git a/spec/frontend/boards/components/board_blocked_icon_spec.js b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
index ffdc0a7cecc..d59cbce6633 100644
--- a/spec/frontend/boards/components/board_blocked_icon_spec.js
+++ b/spec/frontend/vue_shared/issuable/issuable_blocked_icon_spec.js
@@ -5,8 +5,9 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue';
-import { blockingIssuablesQueries, issuableTypes } from '~/boards/constants';
+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 { truncate } from '~/lib/utils/text_utility';
 import {
   mockIssue,
@@ -21,9 +22,9 @@ import {
   mockBlockedIssue2,
   mockBlockedEpic1,
   mockBlockingEpicIssuablesResponse1,
-} from '../mock_data';
+} from '../../boards/mock_data';
 
-describe('BoardBlockedIcon', () => {
+describe('IssuableBlockedIcon', () => {
   let wrapper;
   let mockApollo;
 
@@ -64,7 +65,7 @@ describe('BoardBlockedIcon', () => {
 
     Vue.use(VueApollo);
     wrapper = extendedWrapper(
-      mount(BoardBlockedIcon, {
+      mount(IssuableBlockedIcon, {
         apolloProvider: mockApollo,
         propsData: {
           item: {
@@ -88,7 +89,7 @@ describe('BoardBlockedIcon', () => {
     issuableType = issuableTypes.issue,
   } = {}) => {
     wrapper = extendedWrapper(
-      shallowMount(BoardBlockedIcon, {
+      shallowMount(IssuableBlockedIcon, {
         propsData: {
           item: {
             ...mockIssuable,
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 39a76a51191..6b20f0c77a3 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
@@ -138,7 +138,7 @@ describe('IssuableBody', () => {
 
         wrapper.vm.handleTaskListUpdateSuccess(updatedIssuable);
 
-        expect(wrapper.emitted('task-list-update-success')).toBeTruthy();
+        expect(wrapper.emitted('task-list-update-success')).toHaveLength(1);
         expect(wrapper.emitted('task-list-update-success')[0]).toEqual([updatedIssuable]);
       });
     });
@@ -147,7 +147,7 @@ describe('IssuableBody', () => {
       it('emits `task-list-update-failure` event on component', () => {
         wrapper.vm.handleTaskListUpdateFailure();
 
-        expect(wrapper.emitted('task-list-update-failure')).toBeTruthy();
+        expect(wrapper.emitted('task-list-update-failure')).toHaveLength(1);
       });
     });
   });
@@ -202,7 +202,7 @@ describe('IssuableBody', () => {
 
         issuableTitle.vm.$emit('edit-issuable');
 
-        expect(wrapper.emitted('edit-issuable')).toBeTruthy();
+        expect(wrapper.emitted('edit-issuable')).toHaveLength(1);
       });
 
       it.each(['keydown-title', 'keydown-description'])(
@@ -227,7 +227,7 @@ describe('IssuableBody', () => {
 
           issuableEditForm.vm.$emit(eventName, eventObj, issuableMeta);
 
-          expect(wrapper.emitted(eventName)).toBeTruthy();
+          expect(wrapper.emitted(eventName)).toHaveLength(1);
           expect(wrapper.emitted(eventName)[0]).toMatchObject([eventObj, issuableMeta]);
         },
       );
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 a9651cf8bac..43ff68e30b5 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 createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import HelpIcon from '~/vue_shared/security_reports/components/help_icon.vue';
 import SecurityReportDownloadDropdown from '~/vue_shared/security_reports/components/security_report_download_dropdown.vue';
@@ -135,8 +135,8 @@ describe('Security reports app', () => {
       });
     });
 
-    it('calls createFlash correctly', () => {
-      expect(createFlash).toHaveBeenCalledWith({
+    it('calls createAlert correctly', () => {
+      expect(createAlert).toHaveBeenCalledWith({
         message: SecurityReportsApp.i18n.apiError,
         captureError: true,
         error: expect.any(Error),
diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js
new file mode 100644
index 00000000000..16e0a3f549e
--- /dev/null
+++ b/spec/frontend/webhooks/components/form_url_app_spec.js
@@ -0,0 +1,142 @@
+import { nextTick } from 'vue';
+import { GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+
+import FormUrlApp from '~/webhooks/components/form_url_app.vue';
+import FormUrlMaskItem from '~/webhooks/components/form_url_mask_item.vue';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('FormUrlApp', () => {
+  let wrapper;
+
+  const createComponent = ({ props } = {}) => {
+    wrapper = shallowMountExtended(FormUrlApp, {
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findAllRadioButtons = () => wrapper.findAllComponents(GlFormRadio);
+  const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
+  const findUrlMaskDisable = () => findAllRadioButtons().at(0);
+  const findUrlMaskEnable = () => findAllRadioButtons().at(1);
+  const findAllUrlMaskItems = () => wrapper.findAllComponents(FormUrlMaskItem);
+  const findAddItem = () => wrapper.findComponent(GlLink);
+  const findFormUrl = () => wrapper.findByTestId('form-url');
+  const findFormUrlPreview = () => wrapper.findByTestId('form-url-preview');
+  const findUrlMaskSection = () => wrapper.findByTestId('url-mask-section');
+
+  describe('template', () => {
+    it('renders radio buttons for URL masking', () => {
+      createComponent();
+
+      expect(findAllRadioButtons()).toHaveLength(2);
+      expect(findUrlMaskDisable().text()).toBe(FormUrlApp.i18n.radioFullUrlText);
+      expect(findUrlMaskEnable().text()).toBe(FormUrlApp.i18n.radioMaskUrlText);
+    });
+
+    it('does not render mask section', () => {
+      createComponent();
+
+      expect(findUrlMaskSection().exists()).toBe(false);
+    });
+
+    describe('on radio select', () => {
+      beforeEach(async () => {
+        createComponent();
+
+        findRadioGroup().vm.$emit('input', true);
+        await nextTick();
+      });
+
+      it('renders mask section', () => {
+        expect(findUrlMaskSection().exists()).toBe(true);
+      });
+
+      it('renders an empty mask item by default', () => {
+        expect(findAllUrlMaskItems()).toHaveLength(1);
+
+        const firstItem = findAllUrlMaskItems().at(0);
+        expect(firstItem.props('itemKey')).toBeNull();
+        expect(firstItem.props('itemValue')).toBeNull();
+      });
+    });
+
+    describe('with mask items', () => {
+      const mockItem1 = { key: 'key1', value: 'value1' };
+      const mockItem2 = { key: 'key2', value: 'value2' };
+
+      beforeEach(() => {
+        createComponent({
+          props: { initialUrlVariables: [mockItem1, mockItem2] },
+        });
+      });
+
+      it('renders masked URL preview', async () => {
+        const mockUrl = 'https://test.host/value1?secret=value2';
+
+        findFormUrl().vm.$emit('input', mockUrl);
+        await nextTick();
+
+        expect(findFormUrlPreview().attributes('value')).toBe(
+          'https://test.host/{key1}?secret={key2}',
+        );
+      });
+
+      it('renders mask items correctly', () => {
+        expect(findAllUrlMaskItems()).toHaveLength(2);
+
+        const firstItem = findAllUrlMaskItems().at(0);
+        expect(firstItem.props('itemKey')).toBe(mockItem1.key);
+        expect(firstItem.props('itemValue')).toBe(mockItem1.value);
+
+        const secondItem = findAllUrlMaskItems().at(1);
+        expect(secondItem.props('itemKey')).toBe(mockItem2.key);
+        expect(secondItem.props('itemValue')).toBe(mockItem2.value);
+      });
+
+      describe('on mask item input', () => {
+        const mockInput = { index: 0, key: 'display', value: 'secret' };
+
+        it('updates mask item', async () => {
+          const firstItem = findAllUrlMaskItems().at(0);
+          firstItem.vm.$emit('input', mockInput);
+          await nextTick();
+
+          expect(firstItem.props('itemKey')).toBe(mockInput.key);
+          expect(firstItem.props('itemValue')).toBe(mockInput.value);
+        });
+      });
+
+      describe('when add item is clicked', () => {
+        it('adds mask item', async () => {
+          findAddItem().vm.$emit('click');
+          await nextTick();
+
+          expect(findAllUrlMaskItems()).toHaveLength(3);
+
+          const lastItem = findAllUrlMaskItems().at(-1);
+          expect(lastItem.props('itemKey')).toBeNull();
+          expect(lastItem.props('itemValue')).toBeNull();
+        });
+      });
+
+      describe('when remove item is clicked', () => {
+        it('removes the correct mask item', async () => {
+          const firstItem = findAllUrlMaskItems().at(0);
+          firstItem.vm.$emit('remove');
+          await nextTick();
+
+          expect(findAllUrlMaskItems()).toHaveLength(1);
+
+          const newFirstItem = findAllUrlMaskItems().at(0);
+          expect(newFirstItem.props('itemKey')).toBe(mockItem2.key);
+          expect(newFirstItem.props('itemValue')).toBe(mockItem2.value);
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/webhooks/components/form_url_mask_item_spec.js b/spec/frontend/webhooks/components/form_url_mask_item_spec.js
new file mode 100644
index 00000000000..ab028ef2997
--- /dev/null
+++ b/spec/frontend/webhooks/components/form_url_mask_item_spec.js
@@ -0,0 +1,100 @@
+import { nextTick } from 'vue';
+import { GlButton, GlFormInput } from '@gitlab/ui';
+
+import FormUrlMaskItem from '~/webhooks/components/form_url_mask_item.vue';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+describe('FormUrlMaskItem', () => {
+  let wrapper;
+
+  const defaultProps = {
+    index: 0,
+  };
+  const mockKey = 'key';
+  const mockValue = 'value';
+  const mockInput = 'input';
+
+  const createComponent = ({ props } = {}) => {
+    wrapper = shallowMountExtended(FormUrlMaskItem, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findMaskItemKey = () => wrapper.findByTestId('mask-item-key');
+  const findMaskItemValue = () => wrapper.findByTestId('mask-item-value');
+  const findRemoveButton = () => wrapper.findComponent(GlButton);
+
+  describe('template', () => {
+    it('renders input for key and value', () => {
+      createComponent();
+
+      const keyInput = findMaskItemKey();
+      expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel);
+      expect(keyInput.findComponent(GlFormInput).attributes('name')).toBe(
+        'hook[url_variables][][key]',
+      );
+
+      const valueInput = findMaskItemValue();
+      expect(valueInput.attributes('label')).toBe(FormUrlMaskItem.i18n.valueLabel);
+      expect(valueInput.findComponent(GlFormInput).attributes('name')).toBe(
+        'hook[url_variables][][value]',
+      );
+    });
+
+    describe('on key input', () => {
+      beforeEach(async () => {
+        createComponent({ props: { itemKey: mockKey, itemValue: mockValue } });
+
+        findMaskItemKey().findComponent(GlFormInput).vm.$emit('input', mockInput);
+        await nextTick();
+      });
+
+      it('emits input event', () => {
+        expect(wrapper.emitted('input')).toEqual([
+          [{ index: defaultProps.index, key: mockInput, value: mockValue }],
+        ]);
+      });
+    });
+
+    describe('on value input', () => {
+      beforeEach(async () => {
+        createComponent({ props: { itemKey: mockKey, itemValue: mockValue } });
+
+        findMaskItemValue().findComponent(GlFormInput).vm.$emit('input', mockInput);
+        await nextTick();
+      });
+
+      it('emits input event', () => {
+        expect(wrapper.emitted('input')).toEqual([
+          [{ index: defaultProps.index, key: mockKey, value: mockInput }],
+        ]);
+      });
+    });
+
+    it('renders remove button', () => {
+      createComponent();
+
+      expect(findRemoveButton().props('icon')).toBe('remove');
+    });
+
+    describe('when remove button is clicked', () => {
+      const mockIndex = 5;
+
+      beforeEach(async () => {
+        createComponent({ props: { index: mockIndex } });
+
+        findRemoveButton().vm.$emit('click');
+        await nextTick();
+      });
+
+      it('emits remove event', () => {
+        expect(wrapper.emitted('remove')).toEqual([[mockIndex]]);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/whats_new/components/app_spec.js b/spec/frontend/whats_new/components/app_spec.js
index de5a814d3e7..da95b51c0b1 100644
--- a/spec/frontend/whats_new/components/app_spec.js
+++ b/spec/frontend/whats_new/components/app_spec.js
@@ -54,7 +54,7 @@ describe('App', () => {
     });
   };
 
-  const findInfiniteScroll = () => wrapper.find(GlInfiniteScroll);
+  const findInfiniteScroll = () => wrapper.findComponent(GlInfiniteScroll);
 
   const setup = async () => {
     document.body.dataset.page = 'test-page';
@@ -80,7 +80,7 @@ describe('App', () => {
       setup();
     });
 
-    const getDrawer = () => wrapper.find(GlDrawer);
+    const getDrawer = () => wrapper.findComponent(GlDrawer);
     const getBackdrop = () => wrapper.find('.whats-new-modal-backdrop');
 
     it('contains a drawer', () => {
@@ -173,7 +173,7 @@ describe('App', () => {
 
       value();
 
-      expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.find(GlDrawer).element);
+      expect(getDrawerBodyHeight).toHaveBeenCalledWith(wrapper.findComponent(GlDrawer).element);
 
       expect(actions.setDrawerBodyHeight).toHaveBeenCalledWith(
         expect.any(Object),
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 28231fad108..1b204b6fd60 100644
--- a/spec/frontend/work_items/components/work_item_assignees_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_spec.js
@@ -157,6 +157,14 @@ describe('WorkItemAssignees component', () => {
     expect(findTokenSelector().props('viewOnly')).toBe(true);
   });
 
+  it('has a label', () => {
+    createComponent();
+
+    expect(findTokenSelector().props('ariaLabelledby')).toEqual(
+      findAssigneesTitle().attributes('id'),
+    );
+  });
+
   describe('when clicking outside the token selector', () => {
     function arrange(args) {
       createComponent(args);
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 d3165d8dc26..0691fe25e0d 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { mockTracking } from 'helpers/tracking_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import EditedAt from '~/issues/show/components/edited.vue';
 import { updateDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -35,6 +36,7 @@ describe('WorkItemDescription', () => {
 
   const findEditButton = () => wrapper.find('[data-testid="edit-description"]');
   const findMarkdownField = () => wrapper.findComponent(MarkdownField);
+  const findEditedAt = () => wrapper.findComponent(EditedAt);
 
   const editDescription = (newText) => wrapper.find('textarea').setValue(newText);
 
@@ -44,9 +46,9 @@ describe('WorkItemDescription', () => {
   const createComponent = async ({
     mutationHandler = mutationSuccessHandler,
     canUpdate = true,
+    workItemResponse = workItemResponseFactory({ canUpdate }),
     isEditing = false,
   } = {}) => {
-    const workItemResponse = workItemResponseFactory({ canUpdate });
     const workItemResponseHandler = jest.fn().mockResolvedValue(workItemResponse);
 
     const { id } = workItemQueryResponse.data.workItem;
@@ -100,6 +102,33 @@ describe('WorkItemDescription', () => {
   });
 
   describe('editing description', () => {
+    it('shows edited by text', async () => {
+      const lastEditedAt = '2022-09-21T06:18:42Z';
+      const lastEditedBy = {
+        name: 'Administrator',
+        webPath: '/root',
+      };
+
+      await createComponent({
+        workItemResponse: workItemResponseFactory({
+          lastEditedAt,
+          lastEditedBy,
+        }),
+      });
+
+      expect(findEditedAt().props()).toEqual({
+        updatedAt: lastEditedAt,
+        updatedByName: lastEditedBy.name,
+        updatedByPath: lastEditedBy.webPath,
+      });
+    });
+
+    it('does not show edited by text', async () => {
+      await createComponent();
+
+      expect(findEditedAt().exists()).toBe(false);
+    });
+
     it('cancels when clicking cancel', async () => {
       await createComponent({
         isEditing: true,
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 b047e0dc8d7..aae61b11196 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -1,8 +1,14 @@
-import { GlAlert, GlBadge, GlLoadingIcon, GlSkeletonLoader, GlButton } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlBadge,
+  GlLoadingIcon,
+  GlSkeletonLoader,
+  GlButton,
+  GlEmptyState,
+} from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import workItemWeightSubscription from 'ee_component/work_items/graphql/work_item_weight.subscription.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
@@ -14,11 +20,13 @@ import WorkItemState from '~/work_items/components/work_item_state.vue';
 import WorkItemTitle from '~/work_items/components/work_item_title.vue';
 import WorkItemAssignees from '~/work_items/components/work_item_assignees.vue';
 import WorkItemLabels from '~/work_items/components/work_item_labels.vue';
+import WorkItemMilestone from '~/work_items/components/work_item_milestone.vue';
 import WorkItemInformation from '~/work_items/components/work_item_information.vue';
 import { i18n } from '~/work_items/constants';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import workItemDatesSubscription from '~/work_items/graphql/work_item_dates.subscription.graphql';
 import workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql';
+import workItemAssigneesSubscription from '~/work_items/graphql/work_item_assignees.subscription.graphql';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import updateWorkItemTaskMutation from '~/work_items/graphql/update_work_item_task.mutation.graphql';
 import { temporaryConfig } from '~/graphql_shared/issuable_client';
@@ -28,7 +36,7 @@ import {
   workItemDatesSubscriptionResponse,
   workItemResponseFactory,
   workItemTitleSubscriptionResponse,
-  workItemWeightSubscriptionResponse,
+  workItemAssigneesSubscriptionResponse,
 } from '../mock_data';
 
 describe('WorkItemDetail component', () => {
@@ -46,9 +54,12 @@ describe('WorkItemDetail component', () => {
   const successHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
   const datesSubscriptionHandler = jest.fn().mockResolvedValue(workItemDatesSubscriptionResponse);
   const titleSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
-  const weightSubscriptionHandler = jest.fn().mockResolvedValue(workItemWeightSubscriptionResponse);
+  const assigneesSubscriptionHandler = jest
+    .fn()
+    .mockResolvedValue(workItemAssigneesSubscriptionResponse);
 
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findSkeleton = () => wrapper.findComponent(GlSkeletonLoader);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findWorkItemActions = () => wrapper.findComponent(WorkItemActions);
@@ -58,6 +69,7 @@ describe('WorkItemDetail component', () => {
   const findWorkItemDueDate = () => wrapper.findComponent(WorkItemDueDate);
   const findWorkItemAssignees = () => wrapper.findComponent(WorkItemAssignees);
   const findWorkItemLabels = () => wrapper.findComponent(WorkItemLabels);
+  const findWorkItemMilestone = () => wrapper.findComponent(WorkItemMilestone);
   const findParent = () => wrapper.find('[data-testid="work-item-parent"]');
   const findParentButton = () => findParent().findComponent(GlButton);
   const findCloseButton = () => wrapper.find('[data-testid="work-item-close"]');
@@ -72,21 +84,18 @@ describe('WorkItemDetail component', () => {
     handler = successHandler,
     subscriptionHandler = titleSubscriptionHandler,
     confidentialityMock = [updateWorkItemMutation, jest.fn()],
-    workItemsMvc2Enabled = false,
-    includeWidgets = false,
     error = undefined,
+    includeWidgets = false,
+    workItemsMvc2Enabled = false,
   } = {}) => {
     const handlers = [
       [workItemQuery, handler],
       [workItemTitleSubscription, subscriptionHandler],
       [workItemDatesSubscription, datesSubscriptionHandler],
+      [workItemAssigneesSubscription, assigneesSubscriptionHandler],
       confidentialityMock,
     ];
 
-    if (IS_EE) {
-      handlers.push([workItemWeightSubscription, weightSubscriptionHandler]);
-    }
-
     wrapper = shallowMount(WorkItemDetail, {
       apolloProvider: createMockApollo(
         handlers,
@@ -107,6 +116,12 @@ describe('WorkItemDetail component', () => {
           workItemsMvc2: workItemsMvc2Enabled,
         },
         hasIssueWeightsFeature: true,
+        hasIterationsFeature: true,
+        projectNamespace: 'namespace',
+      },
+      stubs: {
+        WorkItemWeight: true,
+        WorkItemIteration: true,
       },
     });
   };
@@ -384,13 +399,14 @@ describe('WorkItemDetail component', () => {
     });
   });
 
-  it('shows an error message when the work item query was unsuccessful', async () => {
+  it('shows empty state with an error message when the work item query was unsuccessful', async () => {
     const errorHandler = jest.fn().mockRejectedValue('Oops');
     createComponent({ handler: errorHandler });
     await waitForPromises();
 
     expect(errorHandler).toHaveBeenCalled();
-    expect(findAlert().text()).toBe(i18n.fetchError);
+    expect(findEmptyState().props('description')).toBe(i18n.fetchError);
+    expect(findWorkItemTitle().exists()).toBe(false);
   });
 
   it('shows an error message when WorkItemTitle emits an `error` event', async () => {
@@ -413,6 +429,30 @@ describe('WorkItemDetail component', () => {
       });
     });
 
+    describe('assignees subscription', () => {
+      describe('when the assignees widget exists', () => {
+        it('calls the assignees subscription', async () => {
+          createComponent();
+          await waitForPromises();
+
+          expect(assigneesSubscriptionHandler).toHaveBeenCalledWith({
+            issuableId: workItemQueryResponse.data.workItem.id,
+          });
+        });
+      });
+
+      describe('when the assignees widget does not exist', () => {
+        it('does not call the assignees subscription', async () => {
+          const response = workItemResponseFactory({ assigneesWidgetPresent: false });
+          const handler = jest.fn().mockResolvedValue(response);
+          createComponent({ handler });
+          await waitForPromises();
+
+          expect(assigneesSubscriptionHandler).not.toHaveBeenCalled();
+        });
+      });
+    });
+
     describe('dates subscription', () => {
       describe('when the due date widget exists', () => {
         it('calls the dates subscription', async () => {
@@ -429,7 +469,7 @@ describe('WorkItemDetail component', () => {
         it('does not call the dates subscription', async () => {
           const response = workItemResponseFactory({ datesWidgetPresent: false });
           const handler = jest.fn().mockResolvedValue(response);
-          createComponent({ handler, workItemsMvc2Enabled: true });
+          createComponent({ handler });
           await waitForPromises();
 
           expect(datesSubscriptionHandler).not.toHaveBeenCalled();
@@ -440,9 +480,7 @@ describe('WorkItemDetail component', () => {
 
   describe('assignees widget', () => {
     it('renders assignees component when widget is returned from the API', async () => {
-      createComponent({
-        workItemsMvc2Enabled: true,
-      });
+      createComponent();
       await waitForPromises();
 
       expect(findWorkItemAssignees().exists()).toBe(true);
@@ -450,7 +488,6 @@ describe('WorkItemDetail component', () => {
 
     it('does not render assignees component when widget is not returned from the API', async () => {
       createComponent({
-        workItemsMvc2Enabled: true,
         handler: jest
           .fn()
           .mockResolvedValue(workItemResponseFactory({ assigneesWidgetPresent: false })),
@@ -463,11 +500,13 @@ describe('WorkItemDetail component', () => {
 
   describe('labels widget', () => {
     it.each`
-      description                                               | includeWidgets | exists
-      ${'renders when widget is returned from API'}             | ${true}        | ${true}
-      ${'does not render when widget is not returned from API'} | ${false}       | ${false}
-    `('$description', async ({ includeWidgets, exists }) => {
-      createComponent({ includeWidgets, workItemsMvc2Enabled: true });
+      description                                               | labelsWidgetPresent | exists
+      ${'renders when widget is returned from API'}             | ${true}             | ${true}
+      ${'does not render when widget is not returned from API'} | ${false}            | ${false}
+    `('$description', async ({ labelsWidgetPresent, exists }) => {
+      const response = workItemResponseFactory({ labelsWidgetPresent });
+      const handler = jest.fn().mockResolvedValue(response);
+      createComponent({ handler });
       await waitForPromises();
 
       expect(findWorkItemLabels().exists()).toBe(exists);
@@ -483,7 +522,7 @@ describe('WorkItemDetail component', () => {
       it(`${datesWidgetPresent ? 'renders' : 'does not render'} due date component`, async () => {
         const response = workItemResponseFactory({ datesWidgetPresent });
         const handler = jest.fn().mockResolvedValue(response);
-        createComponent({ handler, workItemsMvc2Enabled: true });
+        createComponent({ handler });
         await waitForPromises();
 
         expect(findWorkItemDueDate().exists()).toBe(exists);
@@ -491,7 +530,7 @@ describe('WorkItemDetail component', () => {
     });
 
     it('shows an error message when it emits an `error` event', async () => {
-      createComponent({ workItemsMvc2Enabled: true });
+      createComponent();
       await waitForPromises();
       const updateError = 'Failed to update';
 
@@ -502,6 +541,19 @@ describe('WorkItemDetail component', () => {
     });
   });
 
+  describe('milestone widget', () => {
+    it.each`
+      description                                               | includeWidgets | exists
+      ${'renders when widget is returned from API'}             | ${true}        | ${true}
+      ${'does not render when widget is not returned from API'} | ${false}       | ${false}
+    `('$description', async ({ includeWidgets, exists }) => {
+      createComponent({ includeWidgets, workItemsMvc2Enabled: true });
+      await waitForPromises();
+
+      expect(findWorkItemMilestone().exists()).toBe(exists);
+    });
+  });
+
   describe('work item information', () => {
     beforeEach(() => {
       createComponent();
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 1d76154a1f0..701406b9588 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
@@ -62,7 +62,7 @@ describe('WorkItemDueDate component', () => {
             createComponent({ canUpdate: true, startDate });
           });
 
-          it(exists ? 'renders' : 'does not render', () => {
+          it(`${exists ? 'renders' : 'does not render'}`, () => {
             expect(findStartDateButton().exists()).toBe(exists);
           });
         });
@@ -172,7 +172,7 @@ describe('WorkItemDueDate component', () => {
             createComponent({ canUpdate: true, dueDate });
           });
 
-          it(exists ? 'renders' : 'does not render', () => {
+          it(`${exists ? 'renders' : 'does not render'}`, () => {
             expect(findDueDateButton().exists()).toBe(exists);
           });
         });
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 1d976897c15..e6ff7e8502d 100644
--- a/spec/frontend/work_items/components/work_item_labels_spec.js
+++ b/spec/frontend/work_items/components/work_item_labels_spec.js
@@ -7,10 +7,18 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import labelSearchQuery from '~/vue_shared/components/sidebar/labels_select_widget/graphql/project_labels.query.graphql';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+import workItemLabelsSubscription from 'ee_else_ce/work_items/graphql/work_item_labels.subscription.graphql';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import WorkItemLabels from '~/work_items/components/work_item_labels.vue';
-import { i18n } from '~/work_items/constants';
-import { temporaryConfig, resolvers } from '~/graphql_shared/issuable_client';
-import { projectLabelsResponse, mockLabels, workItemQueryResponse } from '../mock_data';
+import { i18n, I18N_WORK_ITEM_ERROR_FETCHING_LABELS } from '~/work_items/constants';
+import {
+  projectLabelsResponse,
+  mockLabels,
+  workItemQueryResponse,
+  workItemResponseFactory,
+  updateWorkItemMutationResponse,
+  workItemLabelsSubscriptionResponse,
+} from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -21,32 +29,32 @@ describe('WorkItemLabels component', () => {
 
   const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
-
   const findEmptyState = () => wrapper.findByTestId('empty-state');
+  const findLabelsTitle = () => wrapper.findByTestId('labels-title');
 
+  const workItemQuerySuccess = jest.fn().mockResolvedValue(workItemQueryResponse);
   const successSearchQueryHandler = jest.fn().mockResolvedValue(projectLabelsResponse);
+  const successUpdateWorkItemMutationHandler = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemMutationResponse);
+  const subscriptionHandler = jest.fn().mockResolvedValue(workItemLabelsSubscriptionResponse);
   const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
 
   const createComponent = ({
-    labels = mockLabels,
     canUpdate = true,
+    workItemQueryHandler = workItemQuerySuccess,
     searchQueryHandler = successSearchQueryHandler,
+    updateWorkItemMutationHandler = successUpdateWorkItemMutationHandler,
   } = {}) => {
-    const apolloProvider = createMockApollo([[labelSearchQuery, searchQueryHandler]], resolvers, {
-      typePolicies: temporaryConfig.cacheConfig.typePolicies,
-    });
-
-    apolloProvider.clients.defaultClient.writeQuery({
-      query: workItemQuery,
-      variables: {
-        id: workItemId,
-      },
-      data: workItemQueryResponse.data,
-    });
+    const apolloProvider = createMockApollo([
+      [workItemQuery, workItemQueryHandler],
+      [labelSearchQuery, searchQueryHandler],
+      [updateWorkItemMutation, updateWorkItemMutationHandler],
+      [workItemLabelsSubscription, subscriptionHandler],
+    ]);
 
     wrapper = mountExtended(WorkItemLabels, {
       propsData: {
-        labels,
         workItemId,
         canUpdate,
         fullPath: 'test-project-path',
@@ -60,6 +68,12 @@ describe('WorkItemLabels component', () => {
     wrapper.destroy();
   });
 
+  it('has a label', () => {
+    createComponent();
+
+    expect(findTokenSelector().props('ariaLabelledby')).toEqual(findLabelsTitle().attributes('id'));
+  });
+
   it('focuses token selector on token selector input event', async () => {
     createComponent();
     findTokenSelector().vm.$emit('input', [mockLabels[0]]);
@@ -151,7 +165,7 @@ describe('WorkItemLabels component', () => {
     findTokenSelector().vm.$emit('focus');
     await waitForPromises();
 
-    expect(wrapper.emitted('error')).toEqual([[i18n.fetchError]]);
+    expect(wrapper.emitted('error')).toEqual([[I18N_WORK_ITEM_ERROR_FETCHING_LABELS]]);
   });
 
   it('should search for with correct key after text input', async () => {
@@ -163,7 +177,53 @@ describe('WorkItemLabels component', () => {
     await waitForPromises();
 
     expect(successSearchQueryHandler).toHaveBeenCalledWith(
-      expect.objectContaining({ search: searchKey }),
+      expect.objectContaining({ searchTerm: searchKey }),
     );
   });
+
+  describe('when clicking outside the token selector', () => {
+    it('calls a mutation with correct variables', () => {
+      createComponent();
+
+      findTokenSelector().vm.$emit('input', [mockLabels[0]]);
+      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+
+      expect(successUpdateWorkItemMutationHandler).toHaveBeenCalledWith({
+        input: {
+          labelsWidget: { addLabelIds: [mockLabels[0].id], removeLabelIds: [] },
+          id: 'gid://gitlab/WorkItem/1',
+        },
+      });
+    });
+
+    it('emits an error and resets labels if mutation was rejected', async () => {
+      const workItemQueryHandler = jest.fn().mockResolvedValue(workItemResponseFactory());
+
+      createComponent({ updateWorkItemMutationHandler: errorHandler, workItemQueryHandler });
+
+      await waitForPromises();
+
+      const initialLabels = findTokenSelector().props('selectedTokens');
+
+      findTokenSelector().vm.$emit('input', [mockLabels[0]]);
+      findTokenSelector().vm.$emit('blur', new FocusEvent({ relatedTarget: null }));
+
+      await waitForPromises();
+
+      const updatedLabels = findTokenSelector().props('selectedTokens');
+
+      expect(wrapper.emitted('error')).toEqual([[i18n.updateError]]);
+      expect(updatedLabels).toEqual(initialLabels);
+    });
+
+    it('has a subscription', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(subscriptionHandler).toHaveBeenCalledWith({
+        issuableId: workItemId,
+      });
+    });
+  });
 });
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 434c1db8a2c..ab3ea623e3e 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
@@ -28,6 +28,7 @@ describe('WorkItemLinksForm', () => {
     listResponse = availableWorkItemsResponse,
     typesResponse = projectWorkItemTypesQueryResponse,
     parentConfidential = false,
+    hasIterationsFeature = false,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemLinksForm, {
       apolloProvider: createMockApollo([
@@ -39,6 +40,7 @@ describe('WorkItemLinksForm', () => {
       propsData: { issuableGid: 'gid://gitlab/WorkItem/1', parentConfidential },
       provide: {
         projectPath: 'project/path',
+        hasIterationsFeature,
       },
     });
 
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 287ec022d3f..e3f3b74f296 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
@@ -10,8 +10,8 @@ describe('WorkItemLinksMenu', () => {
     wrapper = shallowMountExtended(WorkItemLinksMenu);
   };
 
-  const findDropdown = () => wrapper.find(GlDropdown);
-  const findRemoveDropdownItem = () => wrapper.find(GlDropdownItem);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findRemoveDropdownItem = () => wrapper.findComponent(GlDropdownItem);
 
   beforeEach(async () => {
     createComponent();
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 876aedff08b..6961996f912 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
@@ -5,7 +5,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import issueConfidentialQuery from '~/sidebar/queries/issue_confidential.query.graphql';
+import issueDetailsQuery from 'ee_else_ce/work_items/graphql/get_issue_details.query.graphql';
 import WorkItemLinks from '~/work_items/components/work_item_links/work_item_links.vue';
 import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
@@ -21,16 +21,29 @@ import {
 
 Vue.use(VueApollo);
 
-const issueConfidentialityResponse = (confidential = false) => ({
+const issueDetailsResponse = (confidential = false) => ({
   data: {
     workspace: {
-      id: '1',
-      __typename: 'Project',
+      id: 'gid://gitlab/Project/1',
       issuable: {
-        __typename: 'Issue',
         id: 'gid://gitlab/Issue/4',
         confidential,
+        iteration: {
+          id: 'gid://gitlab/Iteration/1124',
+          title: null,
+          startDate: '2022-06-22',
+          dueDate: '2022-07-19',
+          webUrl: 'http://127.0.0.1:3000/groups/gitlab-org/-/iterations/1124',
+          iterationCadence: {
+            id: 'gid://gitlab/Iterations::Cadence/1101',
+            title: 'Quod voluptates quidem ea eaque eligendi ex corporis.',
+            __typename: 'IterationCadence',
+          },
+          __typename: 'Iteration',
+        },
+        __typename: 'Issue',
       },
+      __typename: 'Project',
     },
   },
 });
@@ -55,14 +68,15 @@ describe('WorkItemLinks', () => {
     data = {},
     fetchHandler = jest.fn().mockResolvedValue(workItemHierarchyResponse),
     mutationHandler = mutationChangeParentHandler,
-    confidentialQueryHandler = jest.fn().mockResolvedValue(issueConfidentialityResponse()),
+    issueDetailsQueryHandler = jest.fn().mockResolvedValue(issueDetailsResponse()),
+    hasIterationsFeature = false,
   } = {}) => {
     mockApollo = createMockApollo(
       [
         [getWorkItemLinksQuery, fetchHandler],
         [changeWorkItemParentMutation, mutationHandler],
         [workItemQuery, childWorkItemQueryHandler],
-        [issueConfidentialQuery, confidentialQueryHandler],
+        [issueDetailsQuery, issueDetailsQueryHandler],
       ],
       {},
       { addTypename: true },
@@ -77,6 +91,7 @@ describe('WorkItemLinks', () => {
       provide: {
         projectPath: 'project/path',
         iid: '1',
+        hasIterationsFeature,
       },
       propsData: { issuableId: 1 },
       apolloProvider: mockApollo,
@@ -266,7 +281,7 @@ describe('WorkItemLinks', () => {
   describe('when parent item is confidential', () => {
     it('passes correct confidentiality status to form', async () => {
       await createComponent({
-        confidentialQueryHandler: jest.fn().mockResolvedValue(issueConfidentialityResponse(true)),
+        issueDetailsQueryHandler: jest.fn().mockResolvedValue(issueDetailsResponse(true)),
       });
       findToggleAddFormButton().vm.$emit('click');
       await nextTick();
diff --git a/spec/frontend/work_items/components/work_item_milestone_spec.js b/spec/frontend/work_items/components/work_item_milestone_spec.js
new file mode 100644
index 00000000000..08cdf62ae52
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_milestone_spec.js
@@ -0,0 +1,247 @@
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlSearchBoxByType,
+  GlSkeletonLoader,
+  GlFormGroup,
+  GlDropdownText,
+} from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import WorkItemMilestone from '~/work_items/components/work_item_milestone.vue';
+import { resolvers, temporaryConfig } from '~/graphql_shared/issuable_client';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
+import projectMilestonesQuery from '~/sidebar/queries/project_milestones.query.graphql';
+import {
+  projectMilestonesResponse,
+  projectMilestonesResponseWithNoMilestones,
+  mockMilestoneWidgetResponse,
+  workItemResponseFactory,
+  updateWorkItemMutationErrorResponse,
+} from 'jest/work_items/mock_data';
+import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
+
+describe('WorkItemMilestone component', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+
+  const workItemId = 'gid://gitlab/WorkItem/1';
+  const workItemType = 'Task';
+  const fullPath = 'full-path';
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findNoMilestoneDropdownItem = () => wrapper.findByTestId('no-milestone');
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findFirstDropdownItem = () => findDropdownItems().at(0);
+  const findDropdownTexts = () => wrapper.findAllComponents(GlDropdownText);
+  const findDropdownItemAtIndex = (index) => findDropdownItems().at(index);
+  const findDisabledTextSpan = () => wrapper.findByTestId('disabled-text');
+  const findDropdownTextAtIndex = (index) => findDropdownTexts().at(index);
+  const findInputGroup = () => wrapper.findComponent(GlFormGroup);
+
+  const workItemQueryResponse = workItemResponseFactory({ canUpdate: true, canDelete: true });
+
+  const networkResolvedValue = new Error();
+
+  const successSearchQueryHandler = jest.fn().mockResolvedValue(projectMilestonesResponse);
+  const successSearchWithNoMatchingMilestones = jest
+    .fn()
+    .mockResolvedValue(projectMilestonesResponseWithNoMilestones);
+
+  const showDropdown = () => {
+    findDropdown().vm.$emit('shown');
+  };
+
+  const hideDropdown = () => {
+    findDropdown().vm.$emit('hide');
+  };
+
+  const createComponent = ({
+    canUpdate = true,
+    milestone = mockMilestoneWidgetResponse,
+    searchQueryHandler = successSearchQueryHandler,
+  } = {}) => {
+    const apolloProvider = createMockApollo(
+      [[projectMilestonesQuery, searchQueryHandler]],
+      resolvers,
+      {
+        typePolicies: temporaryConfig.cacheConfig.typePolicies,
+      },
+    );
+
+    apolloProvider.clients.defaultClient.writeQuery({
+      query: workItemQuery,
+      variables: {
+        id: workItemId,
+      },
+      data: workItemQueryResponse.data,
+    });
+
+    wrapper = shallowMountExtended(WorkItemMilestone, {
+      apolloProvider,
+      propsData: {
+        canUpdate,
+        workItemMilestone: milestone,
+        workItemId,
+        workItemType,
+        fullPath,
+      },
+      stubs: {
+        GlDropdown,
+        GlSearchBoxByType,
+      },
+    });
+  };
+
+  it('has "Milestone" label', () => {
+    createComponent();
+
+    expect(findInputGroup().exists()).toBe(true);
+    expect(findInputGroup().attributes('label')).toBe(WorkItemMilestone.i18n.MILESTONE);
+  });
+
+  describe('Default text with canUpdate false and milestone value', () => {
+    describe.each`
+      description             | milestone                      | value
+      ${'when no milestone'}  | ${null}                        | ${WorkItemMilestone.i18n.NONE}
+      ${'when milestone set'} | ${mockMilestoneWidgetResponse} | ${mockMilestoneWidgetResponse.title}
+    `('$description', ({ milestone, value }) => {
+      it(`has a value of "${value}"`, () => {
+        createComponent({ canUpdate: false, milestone });
+
+        expect(findDisabledTextSpan().text()).toBe(value);
+        expect(findDropdown().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('Default text value when canUpdate true and no milestone set', () => {
+    it(`has a value of "Add to milestone"`, () => {
+      createComponent({ canUpdate: true, milestone: null });
+
+      expect(findDropdown().props('text')).toBe(WorkItemMilestone.i18n.MILESTONE_PLACEHOLDER);
+    });
+  });
+
+  describe('Dropdown search', () => {
+    it('has the search box', () => {
+      createComponent();
+
+      expect(findSearchBox().exists()).toBe(true);
+    });
+
+    it('shows no matching results when no items', () => {
+      createComponent({
+        searchQueryHandler: successSearchWithNoMatchingMilestones,
+      });
+
+      expect(findDropdownTextAtIndex(0).text()).toBe(WorkItemMilestone.i18n.NO_MATCHING_RESULTS);
+      expect(findDropdownItems()).toHaveLength(1);
+      expect(findDropdownTexts()).toHaveLength(1);
+    });
+  });
+
+  describe('Dropdown options', () => {
+    beforeEach(() => {
+      createComponent({ canUpdate: true });
+    });
+
+    it('shows the skeleton loader when the items are being fetched on click', async () => {
+      showDropdown();
+      await nextTick();
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+
+    it('shows the milestones in dropdown when the items have finished fetching', async () => {
+      showDropdown();
+      await waitForPromises();
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findNoMilestoneDropdownItem().exists()).toBe(true);
+      expect(findDropdownItems()).toHaveLength(
+        projectMilestonesResponse.data.workspace.attributes.nodes.length + 1,
+      );
+    });
+
+    it('changes the milestone to null when clicked on no milestone', async () => {
+      showDropdown();
+      findFirstDropdownItem().vm.$emit('click');
+
+      hideDropdown();
+      await nextTick();
+      expect(findDropdown().props('loading')).toBe(true);
+
+      await waitForPromises();
+
+      expect(findDropdown().props('loading')).toBe(false);
+      expect(findDropdown().props('text')).toBe(WorkItemMilestone.i18n.MILESTONE_PLACEHOLDER);
+    });
+
+    it('changes the milestone to the selected milestone', async () => {
+      const milestoneIndex = 1;
+      /** the index is -1 since no matching results is also a dropdown item */
+      const milestoneAtIndex =
+        projectMilestonesResponse.data.workspace.attributes.nodes[milestoneIndex - 1];
+      showDropdown();
+
+      await waitForPromises();
+      findDropdownItemAtIndex(milestoneIndex).vm.$emit('click');
+
+      hideDropdown();
+      await waitForPromises();
+
+      expect(findDropdown().props('text')).toBe(milestoneAtIndex.title);
+    });
+  });
+
+  describe('Error handlers', () => {
+    it.each`
+      errorType          | expectedErrorMessage                                                 | mockValue                              | resolveFunction
+      ${'graphql error'} | ${'Something went wrong while updating the task. Please try again.'} | ${updateWorkItemMutationErrorResponse} | ${'mockResolvedValue'}
+      ${'network error'} | ${'Something went wrong while updating the task. Please try again.'} | ${networkResolvedValue}                | ${'mockRejectedValue'}
+    `(
+      'emits an error when there is a $errorType',
+      async ({ mockValue, expectedErrorMessage, resolveFunction }) => {
+        createComponent({
+          mutationHandler: jest.fn()[resolveFunction](mockValue),
+          canUpdate: true,
+        });
+
+        showDropdown();
+        findFirstDropdownItem().vm.$emit('click');
+        hideDropdown();
+
+        await waitForPromises();
+
+        expect(wrapper.emitted('error')).toEqual([[expectedErrorMessage]]);
+      },
+    );
+  });
+
+  describe('Tracking event', () => {
+    it('tracks updating the milestone', async () => {
+      const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      createComponent({ canUpdate: true });
+
+      showDropdown();
+      findFirstDropdownItem().vm.$emit('click');
+      hideDropdown();
+
+      await waitForPromises();
+
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_milestone', {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'item_milestone',
+        property: 'type_Task',
+      });
+    });
+  });
+});
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 95ddfc3980e..182fb0f8cb6 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
@@ -51,7 +51,7 @@ describe('Work Item type component', () => {
       });
 
       it('renders the icon in gray color', () => {
-        expect(findIcon().classes()).toContain('gl-text-gray-500');
+        expect(findIcon().classes()).toContain('gl-text-secondary');
       });
 
       it('shows tooltip on hover when props passed', () => {
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index e1bc8d2f6b7..ed90b11222a 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -17,6 +17,25 @@ export const mockAssignees = [
   },
 ];
 
+export const mockLabels = [
+  {
+    __typename: 'Label',
+    id: 'gid://gitlab/Label/1',
+    title: 'Label 1',
+    description: '',
+    color: '#f00',
+    textColor: '#00f',
+  },
+  {
+    __typename: 'Label',
+    id: 'gid://gitlab/Label/2',
+    title: 'Label::2',
+    description: '',
+    color: '#b00',
+    textColor: '#00b',
+  },
+];
+
 export const workItemQueryResponse = {
   data: {
     workItem: {
@@ -50,6 +69,8 @@ export const workItemQueryResponse = {
           description: 'some **great** text',
           descriptionHtml:
             '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
+          lastEditedAt: null,
+          lastEditedBy: null,
         },
         {
           __typename: 'WorkItemWidgetAssignees',
@@ -163,9 +184,15 @@ export const workItemResponseFactory = ({
   allowsMultipleAssignees = true,
   assigneesWidgetPresent = true,
   datesWidgetPresent = true,
+  labelsWidgetPresent = true,
   weightWidgetPresent = true,
+  milestoneWidgetPresent = true,
+  iterationWidgetPresent = true,
   confidential = false,
   canInviteMembers = false,
+  allowsScopedLabels = false,
+  lastEditedAt = null,
+  lastEditedBy = null,
   parent = mockParent.parent,
 } = {}) => ({
   data: {
@@ -200,6 +227,8 @@ export const workItemResponseFactory = ({
           description: 'some **great** text',
           descriptionHtml:
             '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
+          lastEditedAt,
+          lastEditedBy,
         },
         assigneesWidgetPresent
           ? {
@@ -212,6 +241,16 @@ export const workItemResponseFactory = ({
               },
             }
           : { type: 'MOCK TYPE' },
+        labelsWidgetPresent
+          ? {
+              __typename: 'WorkItemWidgetLabels',
+              type: 'LABELS',
+              allowsScopedLabels,
+              labels: {
+                nodes: mockLabels,
+              },
+            }
+          : { type: 'MOCK TYPE' },
         datesWidgetPresent
           ? {
               __typename: 'WorkItemWidgetStartAndDueDate',
@@ -227,6 +266,30 @@ export const workItemResponseFactory = ({
               weight: 0,
             }
           : { type: 'MOCK TYPE' },
+        iterationWidgetPresent
+          ? {
+              __typename: 'WorkItemWidgetIteration',
+              type: 'ITERATION',
+              iteration: {
+                description: null,
+                id: 'gid://gitlab/Iteration/1215',
+                iid: '182',
+                title: 'Iteration default title',
+                startDate: '2022-09-22',
+                dueDate: '2022-09-30',
+              },
+            }
+          : { type: 'MOCK TYPE' },
+        milestoneWidgetPresent
+          ? {
+              __typename: 'WorkItemWidgetMilestone',
+              dueDate: null,
+              expired: false,
+              id: 'gid://gitlab/Milestone/30',
+              title: 'v4.0',
+              type: 'MILESTONE',
+            }
+          : { type: 'MOCK TYPE' },
         {
           __typename: 'WorkItemWidgetHierarchy',
           type: 'HIERARCHY',
@@ -331,6 +394,11 @@ export const createWorkItemFromTaskMutationResponse = {
             type: 'DESCRIPTION',
             description: 'New description',
             descriptionHtml: '<p>New description</p>',
+            lastEditedAt: '2022-09-21T06:18:42Z',
+            lastEditedBy: {
+              name: 'Administrator',
+              webPath: '/root',
+            },
           },
         ],
       },
@@ -444,6 +512,61 @@ export const workItemWeightSubscriptionResponse = {
   },
 };
 
+export const workItemAssigneesSubscriptionResponse = {
+  data: {
+    issuableAssigneesUpdated: {
+      id: 'gid://gitlab/WorkItem/1',
+      widgets: [
+        {
+          __typename: 'WorkItemAssigneesWeight',
+          assignees: {
+            nodes: [mockAssignees[0]],
+          },
+        },
+      ],
+    },
+  },
+};
+
+export const workItemLabelsSubscriptionResponse = {
+  data: {
+    issuableLabelsUpdated: {
+      id: 'gid://gitlab/WorkItem/1',
+      widgets: [
+        {
+          __typename: 'WorkItemWidgetLabels',
+          type: 'LABELS',
+          allowsScopedLabels: false,
+          labels: {
+            nodes: mockLabels,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export const workItemIterationSubscriptionResponse = {
+  data: {
+    issuableIterationUpdated: {
+      id: 'gid://gitlab/WorkItem/1',
+      widgets: [
+        {
+          __typename: 'WorkItemWidgetIteration',
+          iteration: {
+            description: 'Iteration description',
+            dueDate: '2022-07-29',
+            id: 'gid://gitlab/Iteration/1125',
+            iid: '95',
+            startDate: '2022-06-22',
+            title: 'Iteration subcription title',
+          },
+        },
+      ],
+    },
+  },
+};
+
 export const workItemHierarchyEmptyResponse = {
   data: {
     workItem: {
@@ -857,25 +980,6 @@ export const currentUserNullResponse = {
   },
 };
 
-export const mockLabels = [
-  {
-    __typename: 'Label',
-    id: 'gid://gitlab/Label/1',
-    title: 'Label 1',
-    description: '',
-    color: '#f00',
-    textColor: '#00f',
-  },
-  {
-    __typename: 'Label',
-    id: 'gid://gitlab/Label/2',
-    title: 'Label 2',
-    description: '',
-    color: '#b00',
-    textColor: '#00b',
-  },
-];
-
 export const projectLabelsResponse = {
   data: {
     workspace: {
@@ -887,3 +991,134 @@ export const projectLabelsResponse = {
     },
   },
 };
+
+export const mockIterationWidgetResponse = {
+  description: 'Iteration description',
+  dueDate: '2022-07-19',
+  id: 'gid://gitlab/Iteration/1124',
+  iid: '91',
+  startDate: '2022-06-22',
+  title: 'Iteration title widget',
+};
+
+export const groupIterationsResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Group/22',
+      attributes: {
+        nodes: [
+          {
+            id: 'gid://gitlab/Iteration/1124',
+            title: null,
+            startDate: '2022-06-22',
+            dueDate: '2022-07-19',
+            webUrl: 'http://127.0.0.1:3000/groups/gitlab-org/-/iterations/1124',
+            iterationCadence: {
+              id: 'gid://gitlab/Iterations::Cadence/1101',
+              title: 'Quod voluptates quidem ea eaque eligendi ex corporis.',
+              __typename: 'IterationCadence',
+            },
+            __typename: 'Iteration',
+            state: 'current',
+          },
+          {
+            id: 'gid://gitlab/Iteration/1185',
+            title: null,
+            startDate: '2022-07-06',
+            dueDate: '2022-07-19',
+            webUrl: 'http://127.0.0.1:3000/groups/gitlab-org/-/iterations/1185',
+            iterationCadence: {
+              id: 'gid://gitlab/Iterations::Cadence/1144',
+              title: 'Quo velit perspiciatis saepe aut omnis voluptas ab eos.',
+              __typename: 'IterationCadence',
+            },
+            __typename: 'Iteration',
+            state: 'current',
+          },
+          {
+            id: 'gid://gitlab/Iteration/1194',
+            title: null,
+            startDate: '2022-07-06',
+            dueDate: '2022-07-19',
+            webUrl: 'http://127.0.0.1:3000/groups/gitlab-org/-/iterations/1194',
+            iterationCadence: {
+              id: 'gid://gitlab/Iterations::Cadence/1152',
+              title:
+                'Minima aut consequatur magnam vero doloremque accusamus maxime repellat voluptatem qui.',
+              __typename: 'IterationCadence',
+            },
+            __typename: 'Iteration',
+            state: 'current',
+          },
+        ],
+        __typename: 'IterationConnection',
+      },
+      __typename: 'Group',
+    },
+  },
+};
+
+export const groupIterationsResponseWithNoIterations = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Group/22',
+      attributes: {
+        nodes: [],
+        __typename: 'IterationConnection',
+      },
+      __typename: 'Group',
+    },
+  },
+};
+
+export const mockMilestoneWidgetResponse = {
+  dueDate: null,
+  expired: false,
+  id: 'gid://gitlab/Milestone/30',
+  title: 'v4.0',
+};
+
+export const projectMilestonesResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Project/1',
+      attributes: {
+        nodes: [
+          {
+            id: 'gid://gitlab/Milestone/5',
+            title: 'v4.0',
+            webUrl: '/gitlab-org/gitlab-test/-/milestones/5',
+            dueDate: null,
+            expired: false,
+            __typename: 'Milestone',
+            state: 'active',
+          },
+          {
+            id: 'gid://gitlab/Milestone/4',
+            title: 'v3.0',
+            webUrl: '/gitlab-org/gitlab-test/-/milestones/4',
+            dueDate: null,
+            expired: false,
+            __typename: 'Milestone',
+            state: 'active',
+          },
+        ],
+        __typename: 'MilestoneConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const projectMilestonesResponseWithNoMilestones = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/Project/1',
+      attributes: {
+        nodes: [],
+        __typename: 'MilestoneConnection',
+      },
+      __typename: 'Project',
+    },
+  },
+};
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
index ab370e2ca8b..66a917d8052 100644
--- a/spec/frontend/work_items/router_spec.js
+++ b/spec/frontend/work_items/router_spec.js
@@ -4,15 +4,19 @@ import VueApollo from 'vue-apollo';
 import workItemWeightSubscription from 'ee_component/work_items/graphql/work_item_weight.subscription.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import {
+  workItemAssigneesSubscriptionResponse,
   workItemDatesSubscriptionResponse,
   workItemResponseFactory,
   workItemTitleSubscriptionResponse,
   workItemWeightSubscriptionResponse,
+  workItemLabelsSubscriptionResponse,
 } from 'jest/work_items/mock_data';
 import App from '~/work_items/components/app.vue';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import workItemDatesSubscription from '~/work_items/graphql/work_item_dates.subscription.graphql';
 import workItemTitleSubscription from '~/work_items/graphql/work_item_title.subscription.graphql';
+import workItemAssigneesSubscription from '~/work_items/graphql/work_item_assignees.subscription.graphql';
+import workItemLabelsSubscription from 'ee_else_ce/work_items/graphql/work_item_labels.subscription.graphql';
 import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
 import WorkItemsRoot from '~/work_items/pages/work_item_root.vue';
 import { createRouter } from '~/work_items/router';
@@ -26,6 +30,10 @@ describe('Work items router', () => {
   const datesSubscriptionHandler = jest.fn().mockResolvedValue(workItemDatesSubscriptionResponse);
   const titleSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
   const weightSubscriptionHandler = jest.fn().mockResolvedValue(workItemWeightSubscriptionResponse);
+  const assigneesSubscriptionHandler = jest
+    .fn()
+    .mockResolvedValue(workItemAssigneesSubscriptionResponse);
+  const labelsSubscriptionHandler = jest.fn().mockResolvedValue(workItemLabelsSubscriptionResponse);
 
   const createComponent = async (routeArg) => {
     const router = createRouter('/work_item');
@@ -37,6 +45,8 @@ describe('Work items router', () => {
       [workItemQuery, workItemQueryHandler],
       [workItemDatesSubscription, datesSubscriptionHandler],
       [workItemTitleSubscription, titleSubscriptionHandler],
+      [workItemAssigneesSubscription, assigneesSubscriptionHandler],
+      [workItemLabelsSubscription, labelsSubscriptionHandler],
     ];
 
     if (IS_EE) {
diff --git a/spec/frontend/work_items_hierarchy/components/app_spec.js b/spec/frontend/work_items_hierarchy/components/app_spec.js
index 1426fbfab80..124ff5f1608 100644
--- a/spec/frontend/work_items_hierarchy/components/app_spec.js
+++ b/spec/frontend/work_items_hierarchy/components/app_spec.js
@@ -32,7 +32,7 @@ describe('WorkItemsHierarchy App', () => {
     it('shows when the banner is visible', () => {
       createComponent({}, { bannerVisible: true });
 
-      expect(wrapper.find(GlBanner).exists()).toBe(true);
+      expect(wrapper.findComponent(GlBanner).exists()).toBe(true);
     });
 
     it('hide when close is called', async () => {
@@ -42,7 +42,7 @@ describe('WorkItemsHierarchy App', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlBanner).exists()).toBe(false);
+      expect(wrapper.findComponent(GlBanner).exists()).toBe(false);
     });
   });
 
diff --git a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
index dca016dc317..084aaa754ab 100644
--- a/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
+++ b/spec/frontend/work_items_hierarchy/components/hierarchy_spec.js
@@ -57,7 +57,7 @@ describe('WorkItemsHierarchy Hierarchy', () => {
     });
 
     it('does not render badges', () => {
-      expect(wrapper.find(GlBadge).exists()).toBe(false);
+      expect(wrapper.findComponent(GlBadge).exists()).toBe(false);
     });
   });